Modulo I D - Dreamweaver

Indice General
Mdulo I Editor de documentos HTML
Tema 1 Tema 2 Tema 3 Tema 4 Tema 5 Tema 6
0.0.1 Introduccin al Dreamweaver........................................1
Crear Pginas Web.........................................................11 Trabajar con Elementos Dinmicos..............................59 Capas...............................................................................79 Hojas de Estilo.................................................................89 Bases de Datos ..............................................................101
Tema
Introduccin al Dreamweaver MX
En este tema se explicarn los conceptos bsicos para instalar y explorar el programa Dreamweaver MX y se aprender: A instalar Dreamweaver MX. A abrir y explorar Dreamweaver MX. A manejar la ayuda del Dreamweaver MX.
1.1 Instalando Dreamweaver MX en Windows 98, Windows ME o en Windows XP o 2000. Antes de instalar el Dreamweaver MX es necesario decidir dnde se desea instalarlo y qu tipo de instalacin se desea. Esta decisin tendr en cuenta las opciones que son necesarias y la cantidad de espacio libre que hay en el disco duro.
Instalacin en Windows 98, Windows ME o en Windows XP o 2000. Para instalar el software Dreamweaver MX se requiere: 1) Un procesador Intel Pentium II o equivalente a 300 MHz o ms rpido 2) Windows 98, Windows 2000, Windows NT (con Service Pack 3 o posterior), Windows ME o Windows XP 3) La versin 4.0 o posterior de Netscape Navigator o Microsoft Internet Explorer 4) 96 MB de memoria de acceso aleatorio (RAM) (se recomienda disponer de 128 MB) 5) 275 MB de espacio en disco disponibles 6) Un monitor de 256 colores capaz de mostrar una resolucin de 800 x 600 pxeles (se recomienda disponer de un monitor de millones de colores capaz de mostrar una resolucin de 1024 x 768 pxeles)
1
1 Introduccin al Dreamweaver MX
Para instalar el programa en el ordenador hay que insertar el CD en la unidad del CD-ROM. En la carpeta Dreamweaver hacer clic sobre Instalador del DreamweaverMX.exe. La fila se expander cuando aparezca el cuadro de dilogo, haga clic en Instalar Dreamweaver para comenzar la instalacin.
Figura 1- 1: Pantalla de bienvenida del Dreamweaver
El espacio de trabajo de Dreamweaver En Windows, Dreamweaver MX ofrece dos disposiciones del espacio de trabajo entre las que elegir: una disposicin integrada en la que todo se incluye en una sola ventana y una disposicin flotante muy semejante a la de Dreamweaver 4. La primera vez que inicie Dreamweaver aparece un cuadro de dilogo que permite elegir una disposicin para el espacio de trabajo. Si cambia de idea posteriormente, podr cambiar a otro espacio de trabajo distinto a travs del cuadro de dilogo Preferencias (Figura. 1-3)
Figura 1- 2: Configuracin del espacio de trabajo 2
1.2 Explorando Dreamweaver
Seleccione una de las siguientes disposiciones: Espacio de trabajo de Dreamweaver MX es un espacio de trabajo integrado que utiliza MDI (interfaz para mltiples documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles estn integrados en una misma ventana de aplicacin, con los grupos de paneles apilados a la derecha. Recomendado para la mayora de los usuarios. Espacio de trabajo de Dreamweaver MX, HomeSite/Estilo de codificador es el mismo espacio de trabajo integrado pero con los grupos de paneles apilados a la izquierda, y en el que las ventanas de documentos se muestran de manera predeterminada con la vista Cdigo. Recomendado para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban cdigo manualmente que deseen contar con una disposicin del espacio de trabajo que les resulte familiar. Para elegir esta disposicin, seleccione la opcin Espacio de trabajo de Dreamweaver MX y luego elija la opcin HomeSite/Estilo de codificador. Espacio de trabajo de Dreamweaver 4 es una disposicin de espacio de trabajo similar a la utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los grupos de paneles estn apilados, pero no en una ventana de aplicacin de tamao superior que los contenga. Recomendado slo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio de trabajo que les resulte ms familiar.
Figura 1- 3: Ventana de preferencias
1.2 Explorando Dreamweaver Para iniciar el Dreamweaver, ir a la barra de tareas de Windows y hacer clic en el botn Inicio, elegir Programas y hacer clic en Macromedia Dreamweaver dentro de la Carpeta de Macromedia.
3
Figura 1- 4: Ventana de Dreamweaver
Dreamweaver abrir y mostrar una ventana como la de la Figura 1-4. La ventana Bienvenido ofrece sugerencias para la configuracin del espacio de trabajo para distintos fines e informacin sobre nuevas funciones para aquellas personas que hayan utilizado versiones anteriores de Dreamweaver.
Figura 1- 5: Barra Insertar
La barra Insertar contiene botones para la insercin de diversos tipos de objetos, como imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo
4
1.2 Explorando Dreamweaver
HTML que permite establecer diversos atributos al insertarlo. Por ejemplo, se puede insertar una imagen haciendo clic en el icono Imagen de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en lugar de la barra Insertar.
Figura 1- 6: Barra de Herramientas
La barra de herramientas de documento contiene botones y mens emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador. La ventana de documento muestra el documento actual mientras lo est creando y editando.
Figura 1- 7: Inspector de propiedades
El inspector de propiedades permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado comn. Para ampliar un grupo de paneles, hacer clic en la flecha de ampliacin situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrstrarlo por los puntos situados en el borde izquierdo de la barra de ttulo del grupo. El panel Sitio permite administrar los archivos y carpetas que forman el sitio. Tambin ofrece una vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador de Windows.
Figura 1- 8: Men Ventana
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran

5
aqu, como el panel Historial y el Inspector de cdigo. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilizar el men Ventana.
Barra de mens La barra de mens contienen todas la funciones que el programa puede proporcionar. Existen varios mens colocados en la barra superior de la ventana de Dreamweaver. Cada men incluye una lista de comandos relacionados con el ttulo del men.
Figura 1- 9: Barra de mens
El men Archivo y el men Edicin contienen los elementos de men estndar para estos mens, como Nuevo, Abrir, Guardar, Cortar, Copiar y Pegar. El men Archivo tambin contiene otros comandos para la visualizacin o manipulacin del documento actual, como Vista previa en el navegador e Imprimir cdigo. El men Edicin incluye comandos de seleccin y bsqueda, como Seleccionar etiqueta padre y Buscar y reemplazar, y proporciona acceso al editor de Mtodos abreviados de teclado y al Editor de la biblioteca de etiquetas. El men Edicin tambin proporciona acceso a Preferencias. El men Ver permite obtener diversas vistas del documento (como la vista Diseo y la vista Cdigo) y mostrar y ocultar diversos tipos de elementos de pgina y herramientas de Dreamweaver. El men Insertar ofrece una alternativa a la barra Insertar para la insercin de objetos en el documento. El men Modificar permite cambiar las propiedades del elemento de pgina seleccionado. A travs de este men, puede editar los atributos de etiquetas, cambiar las tablas y elementos de tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas. El men Texto permite aplicar formato al texto fcilmente. El men Comandos proporciona acceso a diversos comandos, entre otros, uno para aplicar formato al cdigo en funcin de las preferencias de formato, otro para crear un lbum de fotos y otro para optimizar una imagen empleando Macromedia Fireworks. El men Sitio proporciona opciones de men para crear, abrir y editar sitios. El men Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver. El men Ayuda proporciona acceso a la documentacin de Dreamweaver, incluidos los sistemas de ayuda para la utilizacin de Dreamweaver y la creacin de extensiones para Dreamweaver, adems de informacin de referencia para diversos lenguajes.
1.3 Ayuda de Dreamweaver Durante todas las fases del trabajo es posible obtener ayuda. Slo es necesario ir a
6
1.3 Ayuda de Dreamweaver
Ayuda de la barra de mens. Aparecer una ventana como la de la Figura 1-10. Esta ayuda puede ser tan sencilla como sugerencias o tan exhaustiva como la que se ofrece en libros de referencias. Existe ayuda de las formas siguientes:
Figura 1- 10: Men de Ayuda
Ayuda en pantalla Si es la primera vez que se utiliza Dreamweaver lo mejor es acceder a la ayuda a traves de opcin Utilizacin del Dreamweaver de Ayuda o pulsando sobre la tecla F1. Se presenta en una ventana de dos paneles, con una lista de temas de Ayuda a la izquierda y detalles acerca del tema a la derecha. Mediante las fichas de la ventana se puede buscar en las listas de contenido de la Ayuda, escribir preguntas o usar palabras clave para buscar en un ndice de la Ayuda (Figura 1-18).
Figura 1- 11: Ventana de Ayuda de Dreamweaver
El Contenido permite ver toda la informacin organizada por temas. Hacer clic en las entradas de nivel superior para ver otros temas subordinados. El ndice, como cualquier ndice impreso tradicional, permite consultar trminos o conceptos concretos. Buscar permite localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de ayuda. La Ayuda contextual ofrece un mtodo para abrir el tema de ayuda pertinente desde cualquier cuadro de dilogo, panel o inspector. Para ver la ayuda contextual, haga clic en el botn Ayuda en un cuadro de dilogo o elija Ayuda en el men Opciones en la barra de ttulo de un grupo de paneles. Tambin puede hacer clic en el icono de interrogacin de un inspector o cualquier otro tipo de ventana.
La ventana Contenido permite ver toda la informacin organizada por temas. Hacer clic en las entradas de nivel superior para ver otros temas subordinados. Adems proporciona acceso a tutoriales, artculos, extensiones y notas tcnicas. Cada tema de ayuda contiene botones que se utilizan para pasar de un tema a otro. Los botones de flecha izquierda y derecha permiten acceder al tema anterior o siguiente de una seccin (siguiendo el orden de los temas establecido en el contenido). Buscar permite localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de ayuda. Seleccionando la ventana de bsqueda, aparece un sistema de bsqueda contextual que permiten hacer preguntas con sus propias palabras, del tipo "Cmo abrir un documento en un marco" y, a continuacin, presenta una lista de los temas de Ayuda relacionados con la pregunta (Figura 1-19).
Figura 1- 12: Asistente para Ayuda
El Indicio, como cualquier ndice impreso tradicional, permite consultar trminos o

8
1.3 Ayuda de Dreamweaver
conceptos concretos. Seleccionando la ventana ndice, aparece un sistema de bsqueda que permite introducir palabras claves, del tipo archivo y, a continuacin, presenta una lista de los temas de Ayuda relacionados con la palabra clave (Figura 1-13).
Figura 1- 13: Ventana ndice
Seleccionando la ventana Favoritos, podr agregar pulsando sobre el botn Agregar aquellos temas o artculos que desee guardar como favoritos (Figura 1-14).
Figura 1- 14: Ventana Favoritos
La Ayuda contextual ofrece un mtodo para abrir el tema de ayuda pertinente desde cualquier cuadro de dilogo, panel o inspector. Para ver la ayuda contextual, hacer clic en el botn Ayuda en un cuadro de dilogo o legir Ayuda en el men Opciones en la barra de ttulo de un grupo de paneles. Tambin se puede hacer clic en el icono de interrogacin de un inspector o cualquier otro tipo de ventana. (Figura 1-15).
Figura 1- 15: Icono de interrogacin
Referencia Si se accede en la ayuda a la opcin Referencia. Aparecer el panel Referencia, en el zona de la ventana correspondiente a grupos de paneles. Ofrece una herramienta de consulta rpida de lenguajes de formato, objetos JavaScript y estilos CSS y sus atributos. Proporciona informacin sobre etiquetas, objetos o estilos especficos con los que est trabajando en la vista Cdigo. Tambin se puede acceder a esta ayuda pulsando sobre la tecla Mays+F1
Figura 1- 16: Panel de Referencias
El men emergente Etiqueta, Objeto o Estilo muestra la etiqueta, el objeto o estilo seleccionado en la vista Cdigo. Junto al men emergente Etiqueta, Objeto o Estilo hay otro men que contiene la lista de atributos de la etiqueta elegida. La seleccin predeterminada es Description, que muestra una descripcin de la etiqueta seleccionada. Tambin puede seleccionar un atributo del men para ver ms informacin sobre el mismo.
10
Tema
Crear Pginas Web
Las pginas son los documentos bsicos del World Wide Web y se escriben en formato HTML. Las pginas pueden formar parte de un Web o utilizarse de manera independiente. Sin embargo, muchas caractersticas de Dreamweaver slo son tiles si se trabaja en un Web. Por ejemplo, una barra de exploracin, que permite al visitante del sitio explorar otras pginas de un sitio Web, no tiene sentido en el contexto de una nica pgina. Dreamweaver es un editor de pginas Web en el que no es necesario tener conocimientos sobre HTML para utilizarlo. Mientras se modifican las pginas tal y como hara en un procesador de textos (escribiendo y dando formato al texto y agregando grficos, tablas y otros elementos a la pgina), Dreamweaver agrega las etiquetas HTML en segundo plano. La pgina se mostrar tal como aparecera en un explorador de Web. Sin embargo, es posible mostrar las etiquetas HTML en la pgina y el usuario puede escribir y modificar las etiquetas HTML.
En este tema se aprender a: Crear documentos Web. Manejar listas y tablas. Visualizar y editar documentos en HTML. Crear formularios. Establecer marcos
11
2 Crear Pginas Web
2.1 Creando un primer documento A partir de un primer documento con dos pginas Web aprender a: 1.- Crear una pgina Web. 2.- Editar texto y cambiar sus propiedades. 3.- Insertar figuras dentro del texto. 4.- Crear enlaces a otras pginas Web y a marcadores dentro de la misma pgina. El ejemplo lo tomaremos de las pginas de La Revista del diario El Mundo. Para crear una pgina Web con Dreamweaver, lo primero que hay que hacer es crear un sitio Web.
Notas
En Dreamweaver, el trmino sitio se emplea para referirse a cualquiera de los siguientes conceptos: Un sitio Web: serie de pginas en un servidor que el visitante ve utilizando un navegador Web. Un sitio remoto: archivos del servidor que componen un sitio Web desde el punto de vista del autor, no del visitante. Un sitio local: archivos del disco local que corresponden a los archivos del sitio remoto. Se editan los archivos en el disco local y, a continuacin, se cargan en el sitio remoto. La creacin de un sitio Web suele comenzar con la planificacin: se determina cuntas pginas se van a crear, qu contenido aparecer en cada pgina y cmo se conectarn las pginas entre s.
En esta seccin, sin embargo, el sitio que estamos creando es muy sencillo, por lo que no requiere mucha planificacin: constar slo de dos pginas Web con vnculos entre ellas. Por tanto, se puede omitir el proceso de planificacin para este sitio y pasar a crear una definicin del sitio. La definicin del sitio se crea utilizando el cuadro de dilogo Definicin del sitio. Se puede usar este cuadro de dilogo en una de estas dos vistas: Bsicas o Avanzadas. La
12
2.1 Creando un primer documento
opcin Bsicas orientar paso a paso a lo largo del proceso de configuracin del sitio. Si prefiere editar informacin del sitio sin esta orientacin, puede hacer clic en la ficha Avanzadas en cualquier momento. El procedimiento siguiente describe cmo configurar las opciones de la versin Bsicas del cuadro de dilogo, que tambin se denomina Asistente para la definicin del sitio. Para obtener informacin sobre la definicin de las opciones de la versin Avanzadas, hacer clic en la ficha Avanzadas y, a continuacin, en el botn Ayuda. Para definir un sitio: 1) Elegir Definir Sitio de Sitio. (Figura 2-1).
Figura 2- 1: Men Sitio
Aparece el cuadro de dilogo Definicin del sitio. (Figura 2-2).
Figura 2- 2: Definicin del sitio
Aparecer la primera pantalla del asistente para la Definicin del sitio solicitando que se introduzca un nombre para el sitio. En el cuadro de texto, introducir un
13
2 Crear Pginas Web
nombre que identifique el sitio en Dreamweaver. Se puede elegir el nombre que se desee. En este caso lo llamaremos Mundo. 2) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecer la siguiente pantalla del Asistente preguntando si desea trabajar con una tecnologa de servidor.
Figura 2- 3: Definicin de Sitio
Seleccionar la opcin No para indicar que el sitio es esttico por el momento, sin pginas dinmicas (Figura 2-3). Si desea configurar un sitio para crear una aplicacin Web, se deber elegir un tipo de documento dinmico como Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) o PHP: Hypertext Preprocessor (PHP), y posteriormente suministrar informacin sobre el servidor de aplicaciones. 3) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecer la siguiente pantalla del Asistente preguntando cmo se desea trabajar con los archivos. Seleccionar la opcin con la etiqueta Editar localmente y luego cargar al servidor de prueba remoto.
14
Figura 2- 4: Dialogo Definicin de Sitio
El cuadro de texto permite especificar una carpeta del disco local donde Dreamweaver deber almacenar la versin local de los archivos del sitio (Figura 2-4). Es ms sencillo especificar un nombre de carpeta exacto utilizando Examinar en lugar de escribir la ruta. Por tanto, hacer clic en el icono de carpeta situado junto al cuadro de texto. Aparecer el cuadro de dilogo Elegir la carpeta raz local para el sitio. En el cuadro de dilogo Elegir la carpeta raz local para el sitio, comenzar accediendo a una carpeta del disco local donde almacenar todos los sitios. 4) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecer la siguiente pantalla del Asistente preguntndole cmo se conecta al servidor remoto. Elija Ninguno en el men emergente (Figura 2-5).
15
2 Crear Pginas Web
5) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecer la siguiente pantalla del asistente mostrando un resumen de la configuracin (Figura 2-6).
Hacer clic en Listo para terminar. En la ventana de Sitio aparecer el sitio creado (Figura 2-7). El panel Sitio muestra ahora la nueva carpeta raz local para el sitio actual y un icono que permite ver todos los discos locales en una vista jerrquica de rbol. El icono tiene la etiqueta Escritorio (Windows).
16
El panel Sitio suele mostrar todos los archivos y las carpetas del sitio, pero ahora mismo el sitio no contiene ningn archivo ni carpeta. Sitio acta como administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir archivos como si se tratara del escritorio del PC.
Figura 2- 7: Ventana de Sitio
Ahora vamos a crear una pgina que llamaremos Sumario. En esa pgina que llamaremos Sumario, se crear la pgina de la Figura 2-5.
Figura 2- 8: Pgina Sumario
En primer lugar se crea una carpeta en el Sitio para guardar imgenes. Para ello pone el cursor sobre Sitio-Mundo y se pulsa el botn derecho del ratn y se elige del men que aparece la opcin Nueva carpeta, a la que llamaremos Imgenes (Figura 2-9).
17
2 Crear Pginas Web
Figura 2- 9: Ventana de Sitio
Ir a travs del Escritorio de Sitio a la carpeta que esta en el CD-Rom titulada Dreamweaver Tutorial, escoger las imgenes que hay en la carpeta Mundo y copiarlas sobre la Carpeta Imgenes que se ha creado. Crear ahora en el Sitio-Mundo una nueva carpeta y llamarla Texto. Copiar los textos que hay en la carpeta Mundo del CD-Rom sobre la carpeta Textos del Sitio-Mundo (Figura 2-10).
Figura 2- 10: Ventana Sitio despus de incorporar los ficheros
Ahora vamos a crear un pgina en blanco en donde escribiremos el texto de la Figura 2-8, para ello poner el cursor sobra la carpeta Sitio-Mundo, pulsar el botn derecho del ratn y elegir del men que aparece la opcin Nuevo archivo, al que denominaremos sumario. Si se pulsa sobre el archivo creado aparecer un Documento sin Ttulo en blanco con el nombre se Mundo/sumario.
18
Figura 2- 11: Documento sumrio.htm
Ahora es posible cambiar el nombre de la pgina por Sumario, para ello ponre el cursor sobre la ventana en blanco y pulsar el botn secundario del ratn, elegir Propiedades de la pgina,). Se abrir la ventana Propiedades de pgina y en ella, dentro de la etiqueta Ttulo se escribir la palabra Sumario, pulsar Aceptar. (Figura 2-12).
Figura 2- 12: Ventana Propiedades de la pgina
Ahora vamos a trabajar sobre el documento sumario, para ello hay que seguir los siguientes pasos: 1) Escribir el texto que aparece en la Figura 2-8 2) Seleccionar "2001.gif" de Imgenes de Sitio-Mundo y arrastrarla con el ratn sobre comienzo de la palabra Generacin. A continuacin, dejar cuatro lneas de espaciado entre el primer y el segundo prrafo para colocar ah la siguiente figura. Los pasos a seguir sern los mismos que con la figura anterior, colocando en primer lugar, el cursor en medio del espacio en blanco. Cmo en
19
2 Crear Pginas Web
esta ocasin, se quiere que la figura "ilustra.gif" se situ a la derecha de la pgina, marcar la figura e ir al Inspector de propiedades y seleccionar Alinear saldr una venta en donde se puede elegir Derecha (Figura 2-13).
Figura 2- 13: ventana con el inspector de Propiedades
3) Colocar el cursor al comienzo de la lnea Mini coches e insertar ah la imagen "coche.gif" seleccionando Izquierda en la opcin de Alinear (Figura 2-12). 4)
Figura 2- 14: Documento Sumario
5) Marcar el prrafo Santiago Calatrava y en ir al Inspector de propiedades y seleccionar Sangra de texto (Figura 2-13).
Figura 2- 15: Botn de sangra de texto
Es fcil observar que el prrafo se ha acortado por el borde izquierdo.

20
6) Se pueden cambiar los colores tanto del fondo como del texto para ello slo habr que pulsar con el botn derecho del ratn cualquier punto de la pgina y escoger Propiedades pgina, ah seleccionar la ficha Fondo y cambiar los prametros de las etiquetas Fondo y Texto (ver Figura 2-12). 7) Lo nico que queda por hacer es comprobar el resultado. Seleccionando Vista Previa de la Barra de herramientas, se puede ver como queda en el explorador seleccionando (ver Figura 2-16).
Figura 2- 16: Botn de Vista previa
8) Aparecer una ventana en donde se puede escoger el explorador. 9) Ya se puede comprobar cmo ha quedado la pgina (Figura 2-8). Para grabar la pgina, elegir Guardar, del men Archivo
Notas
1.- Una de las caractersticas determinantes de cualquier documento Web son los enlaces. Los enlaces son simples referencias a otros documentos, pero no referencias estticas sino verdaderos enlaces activos. Al activar el enlace cualquier cosa a la que haga referencia aparecer en la pantalla. Los documentos WWW son todos ellos documentos con enlaces. Adems de sus comandos de descripcin de documentos, HTML consta de comandos que permiten hacer enlaces a un documento, a imgenes, a sonidos o a animaciones. Existen dos partes en un enlace; una de ellas es la referencia al elemento relacionado (que puede ser un documento, imagen, pelcula o sonido). El elemento al que se hace referencia se puede encontrar dentro del documento en curso o, por el contrario, se puede hallar en cualquier parte de la Internet. La segunda parte de un enlace es el marcador o ancla. El autor de un documento puede definir que el marcador sea una palabra, un grupo de palabras, una imagen, etc. El usuario puede activar ese ancla al sealar el cursor y pulsar con el ratn. 2.- Al trabajar con imgenes en un sitio web es importante saber que los archivos que se manejan en Internet son de dos clases: .gif y .jpeg . El formato .gif, se utiliza para ttulos, logotipos, y grficos con menos de 256 colores. Tambin se pueden usar para fotos pero la calidad ser peor. Si el fichero no es de fotografa, sino que utiliza colores planos, utiliza menos colores. El formato .jpeg se utiliza para fotografas, que al utilizar este formato comprimido,
21
2 Crear Pginas Web
ocupan menos aunque baja un poco la calidad. La cuestin es que un fichero de fotografa ocupa muchsimo espacio (una pantalla viene a ser 1,5 Mb) y es necesario reducirlo, aunque sea a costa de un poco de calidad. Una buena razn de compresin es de un 75 %. Otro punto importante es que nunca es conveniente insertar una imagen grande, para luego achicarla, ya que al hacer esto, se achica la imagen que se ve en pantalla pero no el tamao del archivo. Para cambiar el tamao, seleccionar la imagen y con el Inspector de Propiedades y modificarla hasta el tamao deseado.
Para crear la segunda pgina, como la que aparece en la Figura 2-17,
Figura 2- 17: Pgina de Mini Coches
habr que realizar los siguientes pasos: 1) Crear una nuevo archivo en Sitio-Mundo con el nombre de minicoches.htm. Cambiar el nombre del documento mediante Propiedades de pgina escribiendo Mini Coches. 2) Escribir las tres primeras lneas de la Figura 2-17. Seleccionarlas e ir a Inspector de propiedades y elegir en la caja Alineacin Centro.
22
3) Seleccionar la primera lnea, ir al Inspector de propiedades botn Formato y elegir Encabezados 2. Seleccionar la segunda lnea, ir al botn Formato y elegir Encabezados 1. Seleccionar la tercera lnea, y hacer clic sobre el botn Cursiva. (Figura 2-18).
Figura 2- 18: Pgina con cambio de estilo de palabras
4) Ir a Sitio-Mundo del men pulsar dos ves con el ratn sobre el fichero texto1.txt, aparecer una ventana de documento nueva con una barra oscura en la parte inferior izquierda, seleccionar el texto y copiarlo.
Figura 2- 19: Ventana de texto
5) Pegar el texto sobre la ventana de documentos Mini Coches 6) Poner el cursor en el texto en blanco que hay entre los dos primeros prrafos e insertar en l la imagen "antecede.gif". Marcar la imagen y Seleccionar Alinear izquierda del men Alinear del Inspector de propiedades. La imagen se insertar en lado izquierdo (Figura 2-20).
23
2 Crear Pginas Web
Figura 2- 20: Pgina una vez insertad la imagen
7) Ir al final del texto y dejar una lnea en blanco. Insertar ah con las imgenes top.gif y volver.gif, dejando un espacio en blanco entre ellas. A continuacin, seleccionar ambas imgenes y pulsar sobre el botn Alinear a la derecha en el Inspector de propiedades (Figura 2-25).
Figura 2- 21: Pgina con las dos imgenes insertadas
Para crear un anclaje o marcador al principio de pgina y un enlace o vnculo con l al final de la misma, habr que ir a la primera lnea de la pgina y seleccionar all la palabra Mini. A continuacin, elegir Punto de fijacin con nombre que aparece en la Barra de insertar (Figura 2-22).
Figura 2- 22: Botn de Punto de fijacin con nombre
en la ventana que aparece escribir la palabra la palabra mini, pulsar sobre el botn de Aceptar de esta forma se habr creado un anclaje o marcador, a donde se puede ir mediante un enlace (Figura. 2-23).
24
Figura 2- 23: Ventana de Punto de fijacin
Seleccionar en el final de la pgina, la figura TOP seleccionarla e ir a Inspector de propiedades. Seleccionar en Vnculo la carpeta minicoches.htm., para crear un enlace que ir al marcador o anclaje que se haba creado anteriormente, escriba en la ventana donde aparece la carpeta minicoches.htm#mini (Figura 2-24).
Figura 2- 24: Ventana para crear vnculos
8) Para hacer un enlace o vnculo (link) con la pgina anterior, Seleccionar en el final de la pgina, la figura TOP seleccionarla e ir a Inspector de propiedades. Seleccionar en Vnculo la carpeta sumario.htm.Fig. 2-28). 9) Por ltimo, grabar la segunda pgina, y comprobar que funcionan los dos enlaces creados en vista previa. 10) Ahora vamos a introducir la imagen de distinta forma que en el documento anterior, para ello se crea un marcador de posicin de imagen: Situar punto de insercin al principio de la lnea en blanco Elegir Marcador de posicin de imagen en Insertar En el cuadro de dilogo Marcador de posicin de imagen, introducir un nombre para el marcador de posicin (como minicoches) y valores para el ancho y el alto. Para la minicoches, introducir 120 para el ancho y 675 para el alto.
25
2 Crear Pginas Web
Notas
1.- Crear una pgina nueva Para crear una pgina nueva en un sitio Web o una pgina HTML independiente, Dreamweaver incluye una gran variedad de plantillas que permiten a crear diferentes tipos de pginas: Crear una pgina en blanco. Crear una pgina con un diseo especfico, como una pgina con varias columnas, etc. Crear una pgina con marcos con uno de los diferentes formatos de marco. 2.- Abrir una pgina de la red Para abrir una pgina de la red que despus podremos editar hay que seguir los siguientes pasos: En el men Archivo, seleccionar Abrir. En Nombre de archivo escribir la direccin de la pgina de Internet que queremos abrir. La pagina aparecer en pantalla si tenemos los permisos. y podremos editarla. 2.- Guardar una pgina en un sistema de archivos Es posible guardar una pgina como un archivo "htm" en un sistema de archivos, como en una unidad local o en una red. Si la pgina contiene grficos, archivos de sonido u otros objetos, se le pedir que los guarde en la misma ubicacin que la pgina. Los estndares de Internet nicamente admiten caracteres ASCII en las direcciones URL. Para asegurarse de que todos los visitantes puedan seguir las direcciones URL, independientemente del lenguaje informtico o del sistema operativo, tambin se deben utilizar caracteres ASCII en las direcciones URL de las Web. En una intranet, se pueden utilizar caracteres no ASCII en los nombres de los archivos siempre que el servidor y todos los clientes utilicen la misma pgina de cdigos del sistema, pero es mejor no hacerlo. 3.- Obtener la vista previa de una pgina en un explorador de Web Si se ha instalado Microsoft Internet Explorer versin 3.0 o posterior, se puede obtener rpidamente una vista previa de la pgina actual. Para ello, hacer clic en la ficha Vista previa, en la vista Pgina. Si no se ha instalado Microsoft Internet Explorer versin 3.0 o posterior. 4.- Agregar una imagen de un archivo Es posible agregar una imagen del sistema local de archivos. Las imgenes pueden tener los siguientes formatos de archivo: GIF (estndar y animado), JPEG (estndar y progresivo), etc. 4.- Marcador de posicin de imagen Hay otras formas de introducir imgenes en un documento, como es el de marcador de posicin de imagen. Para crear un marcador de posicin de imagen hay que seguir los siguientes pasos: Situar punto de insercin al principio de la lnea en blanco Elegir Marcador de posicin de imagen en Insertar
26
En el cuadro de dilogo Marcador de posicin de imagen, introducir un nombre para el marcador de posicin y valores para el ancho y el alto. Hacer clic en Aceptar. Aparecer un cuadro gris con las dimensiones especificadas. Se trata de un marcador de posicin para una imagen y se utiliza como ayuda para disponer las pginas sin necesidad de tener imgenes finales a mano, posteriormente a travs del inspector de propiedades las podr aadir. 6.- Hipervnculos Un hipevnculo o vnculo es una conexin de una pgina a otro destino como, por ejemplo, otra pgina o una situacin diferente en la misma pgina. El destino es con frecuencia otra pgina Web, pero tambin puede ser una imagen, una direccin de correo electrnico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un vnculo puede ser un texto o una imagen. Cuando un visitante hace clic en el vnculo, se muestra el destino en el explorador de Web, y se abre o se ejecuta, en funcin del tipo de destino. Por ejemplo, un vnculo a un archivo AVI abre el archivo en un reproductor multimedia y un vnculo a una pgina muestra la pgina en el explorador de Web. Los vnculos se pueden indicar de varias formas. Los exploradores de Web por lo general subrayan los vnculos de texto y los muestran con un color diferente, as es como debe verse un vnculo. Tambin puede establecer efectos para que los vnculos cambien de apariencia cuando el visitante coloca el puntero del ratn encima, como por ejemplo, cambiar la fuente del vnculo. Los vnculos de una imagen no siempre son visibles, pero el visitante puede saber que una imagen tiene un vnculo colocando el puntero del ratn encima, porque cambia de apariencia, por lo general, a una mano que seala. Para enfatizar aun ms un vnculo de texto o de imagen, se puede agregar tambin efectos de HTML dinmico. Un vnculo tambin debe proporcionar una clave visual del lugar que seala. Explorar su sitio Web. Cuando los visitantes abren la pgina principal, debe proporcionarles una forma de explorar otras pginas de su sitio Web. Muchos sitios utilizan un conjunto de botones o vnculos de texto que van a las pginas ms importantes de un Web. Es posible, as mismo, crear una tabla de contenido del sitio Web creando una lista de vnculos que vayan a las pginas ms importantes. 7.- Crear un vnculo a un marcador Un marcador, punto de fijacin de nombre o ancla, es una ubicacin o texto seleccionado en una pgina que se ha marcado. Es posible crear un vnculo a un marcador para mostrar una determinada seccin de una pgina al visitante. Cuando el visitante hace clic en el vnculo, se mostrar la parte correspondiente de la pgina, en lugar de la parte superior de la pgina. Por ejemplo, se pueden utilizar marcadores para explorar una pgina larga que contenga cinco encabezados. Crear un marcador en cada encabezado y, en la parte superior de la pgina, agregar una tabla de contenido que enumere estos encabezados. Cada entrada de la tabla de contenido es un vnculo que utiliza un encabezado con marcador como destino. Un vnculo a un marcador, se indica mediante el signo (#), que precede a la direccin URL de destino.
27
2 Crear Pginas Web
8.- Crear un vnculo a un correo electrnico Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la ventana de mensaje de correo electrnico, el campo Para se rellena automticamente con la direccin especificada en el vnculo. Para crear un vnculo de correo electrnico utilizando el comando Insertar vnculo de correo electrnico: En la vista Diseo de la ventana de documento, situar el punto de insercin donde se desea que aparezca el vnculo de correo electrnico o seleccionar el texto o la imagen que desea que aparezca como vnculo de correo electrnico. Realizar una de estas operaciones para insertar el vnculo: 1) Elija Vnculo de correo electrnico del men Insertar. Aparecer el cuadro de dilogo Insertar vnculo de correo electrnico (Figura 2-25). 2) Seleccionar las opciones deseadas en el cuadro de dilogo.
Figura 2- 25: Ventana de correo electrnico
3) Hacer clic en Aceptar. Para crear un vnculo de correo electrnico mediante el Inspector de propiedades: 1) Seleccionar texto o una imagen en la vista Diseo de la ventana de documento. 2) En el cuadro de texto Vnculo del inspector de propiedades, escribir mailto: seguido de una direccin de correo electrnico. No dejar espacios entre los dos puntos y la direccin de correo electrnico. Por ejemplo, mailto:jose@macromedia2.com. 9.- Direcciones absolutas y relativas Una direccin absoluta de un fichero o una pgina es del estilo: C:\Mis Documentos\Mis Web\index.htm (para que un vnculo que desde otra pgina lleve a la inicial). Si se pone esto en la casilla de Direccin URL, el vnculo funciona trabajando en su ordenador. Pero qu sucede cuando se enva al sitio Web al proveedor de Internet?. La pgina index no est en la misma ruta. No est en C:\Mis Documentos\Mis Web del ordenador del servidor. El ordenador del servidor tiene su propia estructura y organiza sus propias ubicaciones. La direccin absoluta que era vlida en el ordenador, no lo es en el servidor. La conclusin es: que las direcciones absolutas no deben utilizarse, salvo excepciones, ms que para vnculos externos: http:// ... Si se tienen todas las pginas del sitio Web en la misma carpeta, la direccin relativa es simplemente el nombre del fichero, sin nada por delante. Si el sitio Web no es
28
2.2 Listas y Tablas
excesivamente complejo, sta puede ser la solucin ms aconsejable. Al remitirlo al proveedor de Internet, las direcciones relativas funcionan exactamente igual que en el ordenador. Si se alojan las pginas Web en carpetas que cuelgan de la principal, la direccin relativa es la ruta desde la pgina principal hasta la carpeta y fichero en cuestin. Se supone que remitir al proveedor de Internet toda la estructura de subcarpetas a partir de la principal. Entonces, insistimos, las direcciones relativas funcionarn en el proveedor perfectamente. Cuando se maneja el cuadro de dilogo crear vnculo, la forma de crearlo es el doble clic en el fichero de la pgina correspondiente, se estn utilizando siempre direcciones relativas. 10.- Nombre de los Ficheros Para que al remitir las pginas al servidor no se produzcan errores en los vnculos, es necesario que los nombres de los ficheros que se van creando no estn acentuados o y no tengan espacios en blanco.
2.2 Listas y Tablas En esta seccin, adems de crear tres pginas Web, se aprender a: 1.- Crear listas en una pgina Web. 2.- Crear Imgenes con enlaces (Imagen map) 3.- Crear tablas. 4- Crear tablas de disposicin
Crear listas en una pgina Web En primer lugar, supongamos que se quiere hacer una pgina Web con informacin que existe en internet sobre esqu, y ponerla en forma de lista. Supongamos que se conocen las direcciones URL de los puntos de informacin. (se pueden haber conseguido a travs de uno de los servidores de informacin temticos que existen) que pueden ser: Estacin de esqu de Formigal Estacin de esqu de Sierra Nevada Estacin de esqu de Astn Estacin de esqu de Baqueira-Beret Estacin de esqu de Candanch Estacin de esqu de Valdesqu http://www.formigal.com http://www.sierranevada.es http://www.astun.com http://www.baqueira.es http://www.candanchu.com http://www.valdesqui.es
29
2 Crear Pginas Web
1) Crear un nuevo Sitio, como se indica en la seccin anterior. Despus de crear el archivo estaciones.htm, y dar al nuevo documento el ttulo Estaciones de esqu en Internet e introducir los seis nombres de los servidores de informacin sobre esqu que se indican dejando una lnea en blanco entre cada nombre. 2) Despus de seleccionar la primera lnea del texto, que es la que corresponde al ttulo, elegir Encabezados 2 en el Inspector de propiedades. A continuacin, pulsar sobre el botn Centrar, ir al prrafo primero y pulsar el botn derecho del ratn y elegir en Estilos Subrayado.
Figura 2- 26: Ventana con la lista creada
3) Para que las estaciones de esqu se formateen como una lista (Figura 2-26), hay que seleccionar todos los nombres a la vez, y elegir en el Inspector de propiedades la Lista sin ordenar.
Figura 2- 27: Lista sin ordenar
4) Podr cambiar las propiedades de la lista haciendo clic sobre el botn Elementos de lista (Figura 2-27).
Figura 2- 28: Botn Elementos de Lista
Aparecer una ventana en donde se podrn cambiar las propiedades de la lista (Figura 2-28).
30
2.2 Listas y Tablas
Figura 2- 29: Ventana de Propiedades de lista
Como se habr observado, en barra de herramientas Tipo de lista (Figura 2-29) aparecen los distintos tipos de listas que se pueden crear con el lenguaje HTML.
Para crear un enlace a cada uno de los servidores asociados (que son los que se han seleccionado al principio), seleccionar el primero de ellos, ir a Vnculo del Inspector de Propiedades y escribir en la etiqueta direccin URL que aparece, la primera direccin URL.
Figura 2- 30: Documento con Vnculo
Se puede observar que la lnea, adems de subrayada, aparece en otro color, lo que significa que se ha convertido en un enlace, vnculo o link (Figura 2-30). 5) Ir seleccionando, uno a uno, los dems servidores y escribiendo la direccin URL asociada a cada uno, como en el punto 4.
Notas
31
2 Crear Pginas Web
Es posible crear varios tipos de listas: Lista con vietas, para presentar una lista de elementos no ordenados. Las listas con vietas pueden utilizar las vietas estndar (redondas, cuadradas). Lista numerada, para presentar una lista de elementos en secuencia. Se puede elegir entre nmeros, nmeros romanos (maysculas o minsculas) o letras (maysculas o minsculas). Lista de directorios, para presentar una secuencia de trminos cortos. Muchos exploradores de Web pasan por alto este estilo. Lista de mens, para presentar una lista desordenada de entradas cortas. Muchos exploradores de Web pasan por alto este estilo. El formato exacto de una lista depende del explorador de Web del visitante del sitio. Si la pgina utiliza un tema, la lista tendr la fuente y el formato de prrafo del tema. Es posible crear listas con varios prrafos y niveles anidados, y especificar diferentes estilos de lista en cada nivel.
Para crear enlaces en una imagen (Imagen map) 1) Primero habr que crear una pgina en blanco y abrir Imagen desde archivo desde el men Insertar. En la ventana que aparece abrir map.gif, que aparece en el subdirectorio Imgenes que se encuentra en el segundo CD-ROM. (Figura 2-31).
Figura 2- 31: Ventana Dreamweaver con una imagen
En la parte inferior aparece el Inspector de propiedades con nuevos botones que permiten cambiar propiedades de la imagen (Figura 2-32).
32
2.2 Listas y Tablas
Figura 2- 32: Barra del Inspector de propiedades para trabajar con las imgenes
2) Para crear enlaces o vnculos en una imagen seleccionar con el cursor la imagen que aparece en la pantalla. Elegir en la barra del Inspector de propiedades cualquiera de los tres botones que hay para seleccionar zonas activas (Figura 2-33), dependiendo de la forma geomtrica de la zona en la que se quiere crear el enlace.
Figura 2- 33: Botones para crear zonas activas
3) Ir con el cursor sobre el botn Rectangular. Hacer clic sobre uno de los botones, por ejemplo, "Servicio de Informacin" en la ventana de Vnculo del Inspector de propiedades escribir en la etiqueta de Direccin URL, el URL a donde se desea ir al marcarlo (Figura 2-34).
Figura 2- 34: Ventana de vnculo asociada a una zona activa
4) Aadir en los dems botones nuevas direcciones URL. Ventana con las zonas activas.
33
2 Crear Pginas Web
Notas
Es posible agregar zonas activas a grficos como imgenes y GIF animados. Una zona activa es una regin invisible en un grfico a la que se le ha asignado un vnculo. Cuando el visitante hace clic en la regin, el destino del vnculo aparece en el explorador de Web. En Dreamweaver, a las zonas activas adems se les puede dar forma rectangular, circular o polgonal. Un grfico con una o ms zonas activas se denomina mapa de imgenes. El mapa de imgenes proporciona por lo general claves acerca de dnde se debe hacer clic. Por ejemplo, el sitio Web de un fabricante de coches puede utilizar un mapa de imgenes de sus nuevos coches: cuando el visitante hace clic en un coche, aparece una pgina con una descripcin detallada del coche.
Tablas Las tablas permiten bastante juego a la hora de situar textos por la pantalla, son la manera de saltarse las limitaciones que el lenguaje HTML tiene con la ubicacin de los textos. Para crear tablas en una pgina es necesario: 1) Estar dentro de una pgina o crear una nueva en blanco, que es lo que se har en este caso. 2) Ir al men Insertar y seleccionar Tabla, o pulsar sobre el botn Tabla de la Barra de Insertar (Figura 2-35).
Figura 2- 35: Botn Tabla
Aparecer una ventana en la que se solicitan una serie de datos: el nmero de filas, el nmero de columnas, la alineacin, el espaciado, el ancho de la tabla, el tamao del borde, el margen de las celdas, el espaciado entre celdas. La pgina de tablas del ejemplo se titular Estilos de texto y tendr dos filas y ocho columnas. Escribir en la etiqueta Tamao del borde 2: en Ancho 100 y en Espaciado entre celdas 1. (Figuras 2-36 y 37).
34
2.2 Listas y Tablas
Figura 2- 36: Ventana de Insertar tabla
Figura 2- 37: Documento con Tabla
3) En el inspector de propiedades aparecen las opciones que se pueden cambiar en la tabla como son las filas., las columnas los espaciados los colores, etc.(Figura 2-38).
Figura 2- 38: Propiedades de la Tabla
4) Escribir sobre las siete primeras celdas de la primera fila las palabras: Negrita, Cursiva, Subrayado, Tachado, Teletipo, nfasis, Destacado. En las siete primeras celdas de la segunda fila escribir: Cdigo, Variable, Muestra, Teclado, Cita, Definicin, Eliminado, Insertado. Ir a Estilo del men Texto y dar a cada una de las palabras el estilo correspondiente (Figura 2-39).
Figura 2- 39: Ventana del Dreamweaver
5) Colocar el cursor sobre la tabla y en Propiedades de tabla cambiar el espaciado de celdas a 4 y el borde a 5 (Figura 2-40).
35
2 Crear Pginas Web
Figura 2- 40: Tabla con las propiedades cambiadas
6) En la ventana Propiedades de tabla poner en Tamao de bordes 0 (Figura 2-41).
Figura 2- 41: Tabla sin bordes
7) Seleccionar la octava celda de la primera y segunda fila, e ir en el men Tabla sobre Combinar celdas (Figura 2-42), las dos ltimas celdas se unirn en una, escribir en ella la palabra Variable (Figura 2-43).
Figura 2- 42: Botn de combinar celdas
Figura 2- 43: Documento con tabla
Notas
Se puede determinar la forma de la tabla en la pgina estableciendo el tipo de alineacin; las tablas se pueden alinear a la izquierda, derecha o centro de la pgina. Tambin se puede determinar el alto y ancho de la tabla. Por ejemplo, establecer el ancho de la tabla al 80% del ancho total de la pgina (o el ancho del marco, si la tabla est dentro de un marco). Si un visitante cambia el tamao de la ventana del explorador, el tamao de la pgina y de la tabla cambian segn corresponda. En las pginas que incluyen una tabla y texto, tambin se puede especificar si desea que el texto fluya a ambos lados de la tabla. Es posible, asimismo, definir la forma en que aparece el texto dentro de cada celda. Por ejemplo, puede especificar cunto espacio hay entre el borde y el texto de una celda y puede establecer la alineacin horizontal y vertical del texto. Adems, al texto de la tabla se le puede dar formato como a cualquier otro texto (puede cambiar el estilo de fuente,
36
2.2 Listas y Tablas
tamao, color y otros atributos). Se pueden crear ms celdas en la tabla dividiendo una celda en dos o ms. Tambin se pueden unir celdas adyacentes en una sola. Una vez que se han obtenido las necesarias filas y columnas que necesita en su tabla, puede establecer los altos de fila y los anchos de columnas cmo se deseen. Cambiar el tamao de filas y columnas por separado arrastrando los bordes. Definir los altos de fila y los anchos de columna como porcentaje del tamao total de la tabla. Por ejemplo, establecer que una columna tenga el 10% del ancho total de la tabla. Definir los altos de fila y los anchos de columna para que tengan un tamao especfico en pxeles. Establecer que el espaciado entre filas y columnas sea uniforme. Se puede poner etiquetas o ttulos a las tablas agregando un ttulo de tabla, que se coloca por encima o por debajo de la tabla. Tambin se puede dar formato al texto del ttulo. Para dar nfasis a ciertas celdas de la tabla, se definen como encabezados de tabla. De forma predeterminada, un encabezado de tabla recibe formato de texto en negrita. Sin embargo se puede modificar el estilo del encabezado de la tabla y definir otras propiedades de los encabezados de las tablas, como sombreado, etc. Para personalizar la apariencia de los bordes en las tablas, se puede establecer el color del borde de toda la tabla o un color de borde diferente para cada celda individual. Se puede elegir un color para el borde o, si se desea una apariencia tridimensional, se pueden elegir dos colores, uno claro y otro oscuro. Tambin es posible cambiar el grosor del borde externo. Es posible definir colores e imgenes de fondo para determinadas celdas o para toda la tabla. Sin embargo, la configuracin de una celda siempre tiene prioridad. Por ejemplo, si se establece que el color de fondo de una tabla sea verde y el color de una celda sea azul, la tabla tendr un fondo verde pero una celda ser azul. Los colores de fondo se pueden utilizar para sombrear columnas o filas especficas, para agregar nfasis. Se pueden utilizar imgenes de fondo para agregar atractivo visual a las tablas.
Establecimiento de tablas de Disposicin Dreamweaver le permite establecer la disposicin de las pginas Web de diversas formas. Un mtodo frecuente para crear la disposicin de una pgina consiste en utilizar tablas HTML para colocar los elementos. No obstante, las tablas pueden resultar difciles de usar como mtodo de disposicin, ya que inicialmente se crearon para mostrar datos tabulares y no para establecer la disposicin de pginas Web. Para optimizar el uso de tablas en el establecimiento de la disposicin de pginas, Dreamweaver ofrece la vista Disposicin. En la vista Disposicin, se puede establecer la disposicin de una pgina utilizando tablas como estructura subyacente al mismo tiempo que se evitan algunos de los problemas que suelen presentarse al crear disposiciones
37
2 Crear Pginas Web
basadas en tablas con medios tradicionales. Por ejemplo, en la vista Disposicin se pueden dibujar celdas de disposicin en la pgina y desplazarlas al lugar en el que desea colocarlas. Tambin se puede crear fcilmente tanto disposiciones con ancho fijo como disposiciones que se ajusten automticamente al ancho total de la ventana del navegador. En la vista Disposicin, se puede establecer la distribucin de la pgina antes de aadirle contenido. Por ejemplo, se puede dibujar una celda a lo largo de la parte superior de la pgina para insertar un grfico de encabezado, otra celda en la parte izquierda de la pgina para insertar una barra de navegacin y una tercera celda en la parte derecha para insertar contenido. (Otra posibilidad es dibujar cada celda slo en el momento de insertar contenido en ella. Esta posibilidad ofrece mayor flexibilidad; deja ms espacio en blanco en la tabla de disposicin durante ms tiempo, y permite cambiar el tamao de las celdas o su ubicacin con ms facilidad.) Al dibujar una celda de disposicin fuera de una tabla de disposicin, Dreamweaver crea automticamente una tabla de disposicin como contenedor para la celda. Una celda de disposicin no puede existir fuera de una tabla de disposicin. Tambin se pueden anidar las tablas de disposicin situando una nueva tabla de disposicin dentro de otra existente. Esta estructura simplifica la estructura de la tabla cuando las filas o columnas de una parte de la disposicin no estn alineadas con las filas o columnas de otra parte. Por ejemplo, el uso de tablas de disposicin anidadas permite crear de forma sencilla una disposicin de dos columnas con cuatro lneas en la columna izquierda y tres filas en la columna derecha. Para obtener ms informacin, consultar Dibujo de una tabla de disposicin anidada.
Notas
En la vista Disposicin, puede utilizar las herramientas Insertar tabla y Dibujar capa que puede utilizar en la vista Estndar. Para utilizar dichas herramientas, primero debe cambiar a la vista Estndar.
Para cambiar a la vista Disposicin: Si la vista Diseo no est visible, elegir Diseo del men Ver o ir a la pestaa Disposicin de la barra Insertar. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver, con una barra Insertar vertical, los elementos relacionados con la disposicin aparecen en la parte inferior del panel, en lugar de en una categora distinta.) Una barra gris llamada Vista de disposicin aparece a lo largo de la parte superior de la vista Diseo indicando que est en la vista de disposicin. Si la pgina contiene tablas, aparecen como tablas de disposicin. En la vista Disposicin se pueden dibujar celdas y tablas de disposicin en la pgina. Al dibujar una celda de disposicin fuera de una tabla de disposicin, Dreamweaver crea automticamente una tabla de disposicin como contenedor para la celda. Una celda de disposicin no puede existir fuera de una tabla de disposicin.
38
2.2 Listas y Tablas
Para dibujar una celda de disposicin: Situarse en la vista Disposicin (Figura 2-44) y, a continuacin, hacer clic en el botn Dibujar celda de disposicin en la categora Disposicin de la barra Insertar. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver, con una barra Insertar vertical, los elementos relacionados con la disposicin aparecen en la parte inferior del panel, en lugar de en una categora distinta.). El puntero del ratn se convertir en un signo ms (+).
Figura 2- 44: Vista de disposicin
Situar el puntero del ratn en la parte de la pgina en la que se desea que comience la celda y, a continuacin, arrastre para crear la celda de disposicin. Para crear varias celdas sin tener que hacer clic en el botn Dibujar celda de disposicin cada vez, mantener presionada la tecla Control mientras se arrastra para crear cada una de las celdas de disposicin. La celda aparece en la pgina con un contorno azul. (este es el color de contorno predeterminado de las celdas de disposicin). Para cambiar el color del contorno, consultar Configuracin de las preferencias de la vista Disposicin. El ancho de cada celda se muestra en el rea de encabezado de columna en la parte superior de la columna, siempre que las fichas de tabla de disposicin estn visibles (consultar Configuracin de las preferencias de la vista Disposicin). Para obtener ms informacin sobre anchos de columna, consultar Establecimiento del ancho de columna.
Figura 2- 45: Documento con tres celdas disposicin
Para dibujar una tabla de disposicin: Situarse en la vista Disposicin. A continuacin, llevar a cabo una de estas operaciones: Para dibujar una tabla de disposicin, hacer clic en el botn Dibujar tabla de disposicin en la categora Disposicin de la barra Insertar. El puntero del ratn se
39
2 Crear Pginas Web
convertir en un signo ms (+). Para dibujar ms de una tabla de disposicin sin tener que hacer clic repetidamente en el botn Dibujar tabla de disposicin, mantener presionado el botn Control mientras presiona el botn Dibujar tabla de disposicin. Una vez se haya terminado de dibujar una tabla de disposicin, se puede dibujar otra inmediatamente despus. Coloque el puntero en la pgina y arrastre para crear la tabla de disposicin. Si la pgina no tiene contenido, la nueva tabla se coloca automticamente en la esquina superior izquierda de la pgina. La tabla aparecer en la pgina con un contorno verde. (este es el color de contorno predeterminado de las tablas de disposicin.) Para cambiar el color del contorno, consultar Configuracin de las preferencias de la vista Disposicin. En la parte superior de cada tabla dibujada aparecer una ficha Tabla de disposicin que ayuda a seleccionar la tabla y distinguirla del resto de los elementos de la pgina.
Figura 2- 46: Tabla de disposicin
El ancho de la tabla (expresado en pxeles o como un porcentaje del ancho de la pgina) se muestra en el rea de encabezado de columna de la parte superior de la tabla, siempre que las fichas de tabla de disposicin estn visibles (consulte Configuracin de las preferencias de la vista Disposicin). Las tablas no pueden solaparse. Sin embargo, una tabla puede contener otra tabla.
Notas
No puede dibujar una tabla de disposicin junto a contenido existente. Si su pgina ya tiene contenido, puede dibujar una nueva tabla de disposicin slo por debajo del final del contenido existente. Si se intenta dibujar una tabla de disposicin junto a contenido existente pero aparece un puntero distinto que el puntero de dibujo, hay que cambiar el tamao de la ventana de documento para crear ms espacio en blanco entre el final del contenido existente y el final de la ventana.
40
2.2 Listas y Tablas
Se puede activar la cuadrcula de Dreamweaver para utilizarla como gua visual al dibujar la distribucin de la pgina. Se puede hacer que los elementos de la pgina se ajusten automticamente a la cuadrcula cuando se muevan y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando la configuracin de la cuadrcula. El ajuste funciona independientemente de que la cuadrcula est visible. Para mostrar u ocultar la cuadrcula: Elegir Ver > Cuadrcula > Mostrar cuadrcula. Para activar o desactivar el ajuste: Elegir Ver > Cuadrcula > Ajustar a cuadrcula. Para cambiar la configuracin de la cuadrcula: Elegir Ver > Cuadrcula > Configuracin de cuadrcula. Aparece el cuadro de dilogo Configuracin de la cuadrcula. Adicin de contenido a una celda de disposicin En la vista Disposicin puede aadir texto, imgenes y otro contenido a las celdas de disposicin de la misma forma que aadira contenido a las celdas de tablas en la vista Estndar. Hacer clic en la celda en la que desee aadir contenido y, a continuacin, escriba el texto o insertar otro contenido. Slo se puede insertar contenido slo en una celda de disposicin, no en un rea vaca (gris) de una tabla de disposicin. As, antes de poder aadir contenido, hay que crear celdas de disposicin . Para aadir texto a una celda de disposicin: Situar el punto de insercin en la celda de disposicin en la que desea aadir texto y llevar a cabo una de estas operaciones: Escribir texto en la celda. Copiar texto de otro documento y pagarlo. Utilizar el comando Pegar.
Figura 2- 47: Celda de disposicin con texto
Para aadir una imagen a una celda de disposicin: 1) Situar el punto de insercin en la celda de disposicin en la que desea aadir la imagen. Llevar a cabo una de las siguientes operaciones: 2) En la categora Comn de la barra Insertar, hacer clic en el botn Imagen. 3) Elegir Insertar > Imagen.
41
2 Crear Pginas Web
4) En el cuadro de dilogo Seleccionar origen de imagen, seleccionar un archivo de imagen.
Figura 2- 48: Celdas de disposicin con texto y dibujo
Cmo borrar los altos de celdas establecidos automticamente Al crear una celda de disposicin, Dreamweaver especifica automticamente un alto para que la celda se muestre con la altura que se dibuj incluso aunque la celda est vaca. Tras insertar contenido en la celda, es posible que ya no se necesite especificar el alto, de modo que se puede borrar de la tabla los altos de celdas explcitos. Para borrar los altos de celdas, seleccionar una tabla de disposicin haciendo clic en la ficha de la parte superior de la tabla y, a continuacin, hacer clic en el botn Borrar alto de fila del inspector de propiedades (Figura 2-49).
Figura 2- 49: Borrar alto de la fila del inspector
Para mover una celda de disposicin 1) Seleccionar una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla Control. Aparecen manejadores de seleccin alrededor de la celda. Lleve a cabo una de las siguientes operaciones: 2) Arrastar la celda a otra ubicacin dentro de su tabla de disposicin. 3) Presionar las teclas de flecha para mover la celda de pxel en pxel. Mantener presionada la tecla Mays a la vez que se presiona una tecla de flecha para mover la celda de disposicin de 10 en 10 pxeles. Para cambiar el tamao de una tabla de disposicin 1) Seleccionar una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Aparecen manejadores de seleccin alrededor de la tabla. 2) Arrastrar un manejador de seleccin para cambiar el tamao de la tabla.
42
2.3 Visualizando y editando HTML
Los bordes de la tabla se alinean automticamente con los bordes de otras celdas y tablas. Para mover una tabla de disposicin 1) Seleccionar una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Aparecen manejadores de seleccin alrededor de la tabla. Llevar a cabo una de las siguientes operaciones: 2) Arrastar la tabla a otra ubicacin de la pgina. 3) Presionar las teclas de flecha para mover la tabla de pxel en pxel. Mantener mantener presionada la tecla Mays a la vez que presiona una tecla de flecha para mover la tabla de 10 en 10 pxeles. Utilizacin de las imgenes de espaciador Una imagen de espaciador (tambin conocida como GIF espaciador) es una imagen transparente que se utiliza para controlar el espaciado en las tablas autoampliables. Una imagen de espaciador es una imagen GIF transparente de pxel nico que se ha ampliado para tener un nmero determinado de pxeles de ancho. Un navegador no puede dibujar una columna de tabla ms estrecha que la imagen ms ancha contenida en una celda de dicha columna, de modo que al colocar una imagen de espaciador en una columna de tabla se exige a los navegadores que mantengan la columna al menos tan ancha como la imagen. Dreamweaver aade imgenes de espaciador automticamente al establecer una columna como autoampliable a menos que se especifique que no se deben usar imgenes de espaciador. Se puede insertar y quitar manualmente las imgenes de espaciador de cada columna, si se prefiere. Las columnas que contienen imgenes de espaciador presentan una barra doble en el rea de encabezado de columna. Al insertar una imagen de espaciador en una columna o al establecer una columna como autoampliable, aparece un cuadro de dilogo que pregunta cmo se desea configurar el archivo de imagen de espaciador (Figura 2-50). Si ya se ha establecido una imagen de espaciador para el sitio en las preferencias de Dreamweaver, este cuadro de dilogo no aparecer.
Figura 2- 50: Ventana de imagen de espaciador
Es posible insertar y quitar manualmente las imgenes de espaciador de determinadas columnas o quitar todas las imgenes de espaciador de la pgina.
2.3 Visualizando y editando HTML Cuando se visualiza un documento en WWW el texto que se lee en la pantalla siempre
43
2 Crear Pginas Web
tiene el formato adecuado. Para conseguir este formato hay que escribir los documentos en HTML. Los comandos de HTML se insertan alrededor de bloques de texto para describir al texto en s. As por ejemplo, dentro de un documento hay texto que est marcado con varios niveles de cabeceras, encabezamientos de pginas, etc. Existen tambin comandos para importar imgenes, sonidos, animaciones y comandos que permiten especificar los enlaces a otros documentos. En Dreamweaver existe la posibilidad de editar documentos Web con comandos HTML. Para visualizar este documento en lenguaje HTML hay que activar la ventana Cdigo del men Ver. Entonces, aparecer una ventana en la que se ver el texto escrito en lenguaje HTML, como en la Figura 2-51.
Figura 2- 51: Ventana de HTML
Sobre la venta escribir los tag correspondientes a cada uno de los tipos de texto que se indican (vase el modulo 3): Bold, Italic, <TT>Fixed Pitch</TT>, Subscript, Superscrip,Underline,<CITE>Citation</CITE>, <CODE>Code</CODE>,Emphasis,<KBD>Keyboard</KBD>,<SAMP>Sa mple</SAMP>,Strong y <VAR>Variable</VAR>, y visualice le resultado en activando Diseo del men Ver.Ventana Vista Previa Dreamweaver permite tambin trabajar con la ventanas de Diseo y Cdigo a la vez, para ello ir a Cdigo y diseo del men Ver (Figura 2-52).
44
2.3 Visualizando y editando HTML
Figura 2- 52: Documento de Cdigo y diseo
Tambin se puede aadir cdigos HTML en cualquier punto de un documento con slo pulsar sobre el botn de la derecha y elegir insertar Insertar HTML (Figura 2-53).
Figura 2- 53: Insertar HTML
Notas
Cuando se abre una pgina, incluidas las pginas creadas en otros editores, Dreamweaver conserva automticamente el contenido, la sintaxis y el formato HTML de esa pgina. Cuando se guarda la pgina, Dreamweaver guarda cualquier formato personalizado, como por ejemplo, la sangra aplicada y las maysculas y minsculas de las etiquetas de cualquier cdigo HTML. Sin embargo, los cdigos originales de HTML de la pgina no se modifican ni cambian de formato a no ser que se modifiquen con Dreamweaver. Por ejemplo, si se desea agregar un borde a una imagen, escribir border="1" en la etiqueta <IMG>. De esta forma, se asume que se conocen los atributos y valores vlidos para las etiquetas de imgenes. En su lugar, se puede utilizar el cuadro de dilogo Propiedades de imagen para establecer el borde y Dreamweaver escribe de manera automtica la configuracin de borde, con la sintaxis apropiada y utilizando los valores vlidos, en la etiqueta <IMG>.
45
2 Crear Pginas Web
2.4 Creando un Formulario Un formulario es un conjunto de campos que se utiliza para reunir informacin sobre la gente que visita un sitio Web. Los visitantes rellenan un formulario escribiendo texto, haciendo clic en los botones de opcin y casillas de verificacin y seleccionando opciones de los mens desplegables. Tras rellenar el formulario, los visitantes envan los datos que han introducido, que pueden procesarse de varias formas en funcin del controlador de formulario definido. En esta seccin se ver como se puede crear un formulario y se har con un ejemplo, al igual que se ha hecho en las secciones anteriores. Si se quiere crear un Formulario de Inscripcin en el Curso de Internet en el que aparezcan como casillas a rellenar, las destinadas a los datos personales del alumno y a las caractersticas del equipo informtico que va a utilizar, se seguirn los siguientes pasos: 1) En primer lugar, se crearn las partes que aparecen en la Figuras 2-57: Crear una pgina nueva y escribir en la primera lnea el ttulo indicado anteriormente, remarcarlo con el cursor y el Inspector de propiedades escribir en Formato, Encabezado 3 y Centrarlo. Ir al men Insertar y elegir la opcin Formulario, o seleccione la categora Formularios en la barra Insertar y hacer clic en el icono Formulario. Poner el cursor dentro del recuadro que aparece y escribir varias lneas en blanco (Figura 2-54).
Figura 2- 54: Documento Formulario
2) En la ventana de documento, hacer clic en el contorno para seleccionar el formulario o bien seleccione la etiqueta <form> en el selector de etiquetas, que est situado en el extremo inferior izquierdo de la ventana. y observar que en el inspector de propiedades aparece una ventana en donde le podemos decir que se va hacer con los datos que introduzcamos en l (Figura 2-55).
46
2.4 Creando un Formulario
Figura 2- 55: Inspector de propiedades del formulario
En el campo Nombre del formulario del inspector de propiedades, escriba un nombre exclusivo para el formulario, en nuestro caso formulario1. La asignacin de nombre al formulario permite hacer referencia a l o controlarlo con un lenguaje de scripts como JavaScript o VBScript. Si no asigna un nombre al formulario, Dreamweaver genera uno. En el campo Accin del inspector de propiedades, especificar la ruta de la pgina dinmica o script que va a procesar el formulario. Se puede introducir la ruta completa en el campo Accin o bien hacer clic en el icono de carpeta para acceder a la carpeta que contiene el script o pgina de aplicacin. Si especifica la ruta de una pgina dinmica, la ruta al URL ser similar a este ejemplo: http://www.mysite.com/application_name/process.cfm En nuestro caso como todava no estamos conectados aun servidor pondremos que el formulario no lo enven a nuestro correo electrnico poniendo mailto:nuestro correo electrnico En el men emergente Mtodo, elegir el mtodo mediante el cual se transmitirn los datos del formulario al servidor. Los mtodos son: POST Incrusta los datos del formulario en la peticin HTTP. GET Aade el valor a la URL que solicita la pgina. Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario del servidor. Normalmente el valor predeterminado es el mtodo GET. En nuestro caso podremos POST Tenga en cuenta que el mtodo que elija vendr determinado por el servidor Web o de aplicaciones que utilice. Para obtener ms informacin, pngase en contacto con el administrador del servidor de su empresa. No utilice el mtodo GET para enviar formularios largos. Las URL tiene una limitacin de 8.192 caracteres. Si el tamao de los datos enviados es demasiado grande, los datos se truncarn, lo que puede producir resultados de procesamiento inesperados o errneos. Adems, no debe utilizar el mtodo GET cuando enve nombres de usuario, contraseas, nmeros de tarjetas de crdito o cualquier otro tipo de informacin confidencial. GET no es un mtodo seguro para transferir informacin.
47
2 Crear Pginas Web
El men emergente Enctype permite especificar el tipo de codificacin MIME de los datos remitidos al servidor para su procesamiento. El valor predeterminado de application/x-www-form-urlencode se utiliza normalmente junto con el mtodo POST (que es el que emplear ahora). Si crea un campo de carga de archivos, especifique el tipo MIME multipart/form-data. El men emergente Destino permite especificar la ventana en la que se muestran los datos devueltos por el programa ejecutado. Si la ventana indicada no se ha abierto an, aparece una nueva ventana con ese nombre. Los valores de destino son: _blank abre el documento de destino en una nueva ventana sin nombre. _parent abre el documento de destino en la ventana padre de la que muestra el documento actual. _self abre el documento de destino en la misma ventana en la que se envi el formulario. _top abre el documento de destino en el cuerpo de la ventana actual. Este valor se puede utilizar para garantizar que el documento de destino cubre la ventana completa incluso en el caso de que el documento original apareciera en un marco. En nuestro caso como lo vamos a enviar a un correo electrnico es lo mismo 3) Escribir los datos del formulario que aparecen en la Figura 2-56.
Figura 2- 56: Formulario
48
4) Poner el cursor al final de Nombre, ir a Insertar y seleccionar Campo de texto insertarlo al lado de nombre. Hacer lo mismo con los otros datos. Cambiar en cada uno el nombre que asocia automticamente a cada uno el Inspector de propiedades por el nombre del campo apellidos, ciudad, etc (Figura 2-57).
Figura 2- 57: Formulario con campos de texto
5) A continuacin se crearn las partes que aparecen en la Figura 2-58, Para ello colocar el cursor debajo de Correo electrnico y establecer un lnea horizontal mediante Regla horizontal del men Insertar. Escribir Datos Tcnicos en negrita y centrarlo (Figura 2-58).
Figura 2- 58: Ventana del Formulario
6) Escribir los otros datos que queremos introducir Tipo de procesador y seleccionar en Insertar del Formulario de Lista/men . En el Inspector de propiedades pondr como nombre procesadores, y en valores de lista los nombres Pentium II, Pentium III y Pentium IV (Figura 2-59)
49
2 Crear Pginas Web
7) Poner el cursor delante de Moden y elegir en Insertar, el Botn de opcin, y hacer lo mismo con "ADSL" y "Red", y cambiar en cada uno el nombre que asocia automticamente cada uno el Inspector de propiedades por el nombre del tipo de acceso a Internet. 8) Poner el cursor debajo de Observaciones y elegir rea de texto en del men Insertar, y cambiar el nombre en el inspector de propiedades (Figura 2-60).
Figura 2- 60: Documento del Formulario
9) Por ltimo insertar al final dos botones, mediante la opcin botn del men Insertar, uno para enviar el formulario, el botn Enviar y otro para borrar los datos introducidos que ser el botn Restablecer, en ambos tendr que establecer la Accin que quiere para ellos en el Inspector de propiedades (Figura 2-61).
50
10) Ahora ir a la vista previa en el explorador, rellenar el formulario y enviarlo. En su correo electrnico aparecer un e-mail con un fichero adjunto que podr abrir con el bloc de notas en donde encontrar los datos enviados.
Figura 2- 62: Vista previa del formulario
Notas
Los pasos generales que hay que seguir para crear un formulario son: 1) Decidir el tipo de formulario que se desea crear y la informacin que se desea reunir. Los formularios tienen varias aplicaciones: Reunir informacin de contacto. Recibir peticiones. Obtener informacin relacionada con pedidos, envos y facturacin. Obtener comentarios. Configurar un libro de visitantes. Permitir que los visitantes busquen un sitio Web escribiendo una consulta.
51
2 Crear Pginas Web
Pedir a los visitantes que se identifiquen en un sitio Web con nombre de usuario y contrasea. Una vez decidido el tipo de formulario a crear, se puede empezar con un formulario en blanco o utilizar una plantilla o asistente para que cree el formulario en su lugar. 2) Agregarle campos al formulario. Los campos de formulario se utilizan para reunir informacin. Cada tipo de campo funciona de forma diferente, por ello hay que seleccionarlos en funcin de la informacin que se desea obtener de los visitantes. Los campos existentes son los siguientes: Cuadro de texto de una lnea. Para obtener datos cortos, como un nombre o un nmero Cuadro de texto con desplazamiento. Para obtener una o ms lneas de texto, como comentario. Este campo se desplaza para acomodar cantidades de texto variables. Casilla de verificacin. Para elementos opcionales. El visitante puede activar o desactivar la casilla de verificacin. Adems, puede seleccionar varios elementos. Botn de opcin. Para que el visitante seleccione slo una opcin de un grupo. Men desplegable. Para presentar al visitante una lista de opciones. Este campo se puede sustituir por un grupo de botones de opcin, pero ocupa menos espacio en el formulario. Puede configurar un men desplegable para permitir una seleccin o varias. Botn de comando. Para permitir que los visitantes enven el formulario despus de rellenarlo, borren los campos restableciendo el formulario o ejecuten las secuencias de comandos personalizadas. Una vez situados los campos en el formulario, se puede colocar en la pgina de la misma forma que el texto: utilizar saltos de lnea, tablas, hojas de estilo en cascada y ubicar elementos. Escribir directamente en el formulario para incluir etiquetas de campos e instrucciones. Tambin se puede establecer propiedades para cada uno de los campos, por ejemplo, especificar la longitud de un cuadro de texto, si una opcin se selecciona de forma predeterminada y definir las opciones en un men desplegable. 3) El tercer paso en la creacin de un formulario consiste en definir la manera en que se controlan los resultados del formulario. Una vez que el visitante enva el formulario, deben reunirse los datos que se han introducido, los resultados del formulario, para poder verlos, mostrarlos al visitante o trabajar con ellos si es necesario. Dreamweaver proporciona varios controladores de formulario, que toman los resultados y llevan a cabo distintas acciones. Para que estos controladores funcionen es necesario que el servidor tenga la extensiones especiales . Adems slo se puede comprobar su funcionamiento cuando los
52
formularios se envan al servidor (En la segunda parte del curso el servidor que se estudia nos permitirn comprobar si funcionan los formularios que establezcis). 4) El cuarto paso consiste en Validar el formulario, comprobar el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Adjuntar esta accin a campos de texto individuales con el evento onBlur para validar los campos conforme el usuario vaya rellenando el formulario, o adjntala al formulario con el evento onSubmit para evaluar varios campos de texto cuando el usuario hacer clic en el botn Enviar. Al adjuntar esta accin a un formulario se evita que ste sea enviado al servidor si alguno de los campos de texto especificados contiene datos no vlidos. Para usar la accin Validar formulario: a) Para validar campos individuales conforme el usuario va rellenndolos en el formulario, seleccionar campo de texto y elegir Comportamientos en la ventana de Diseo. b) Para validar mltiples campos cuando el usuario enva el formulario, hacer clic en la etiqueta <form> en el selector de etiquetas, situado en el ngulo inferior izquierdo de la ventana de documento, y elija Comportamientos en la ventana de Diseo. c) Seleccione Validar formulario en el men emergente Acciones. d) Realice una de estas operaciones: Si est validando campos individuales, seleccione el mismo campo que seleccion en la ventana de documento en la lista de Campos con nombre. Si est validando mltiples campos, seleccione un campo de texto en la lista de Campos con nombre. e) Seleccione la opcin Obligatorio si el campo debe contener algn dato. f) Elegir una de las siguientes opciones Aceptar: Use Cualquier cosa si el campo es obligatorio pero no tiene que contener ningn tipo de dato determinado. (Si no est seleccionado Obligatorio, esta opcin carece de sentido (es lo mismo que si la accin Validar formulario no se hubiera adjuntado al campo). Use Direccin de correo electrnico para comprobar si el campo contiene un smbolo arroba (@). Use Nmero para comprobar que el campo contiene solamente caracteres numricos. Use Nmero del para comprobar que el campo contiene solamente caracteres numricos dentro de un rango determinado.
53
2 Crear Pginas Web
g) Si se validan mltiples campos, repetir los pasos anteriores para cada uno de los campos que se desee validar. h) Hacer clic en Aceptar. i) Si se valida mltiples campos cuando el usuario enva el formulario, en el men emergente Eventos aparecer automticamente el evento onSubmit. j) Si se validan campos individuales, comprobar que el evento predeterminado sea onBlur u onChange. k) En caso de que no lo sea, seleccione onBlur o onChange en el men desplegable Eventos. Cualquiera de estos dos eventos desencadena la accin Validar formulario cuando el usuario abandona el campo. La diferencia entre ellos estriba en que onBlur tiene lugar independientemente de que el usuario haya escrito algo en el campo, mientras que onChange slo tiene lugar si el usuario ha cambiado el contenido del campo. El evento onBlur es preferible si ha configurado el campo como obligatorio. 5) El ltimo paso en la creacin de un formulario consiste en definir una pgina de confirmacin, que es la que vern los visitantes una vez que hayan enviado un formulario. La pgina de confirmacin puede mostrar un mensaje de "agradecimiento" y el contenido de uno o ms campos del formulario. El visitante puede confirmar que la informacin se introdujo correctamente y, si es necesario, puede volver al formulario y rellenarlo nuevamente.
2.5 Trabajando con Marcos Una pgina de marcos es un tipo especial de pgina HTML que divide la ventana del explorador en varias zonas denominadas marcos; cada marco puede mostrar una pgina diferente. En esta seccin se ver como se puede crear una pgina con frames o marcos. Se har desarrollando un ejemplo. Si se quiere crear una pgina con dos marcos, para que en uno aparezcan cuatro diarios nacionales ABC, El Mundo, El Pas, y La Vanguardia en el otro las pginas Web de estos diarios. Se seguirn los siguientes pasos. 1) En primer lugar, ir al men Archivo y elegir dentro de l Nuevo Documento. En la ventana que aparece se elige Conjunto de marcos y dentro de ella se selecciona Izquierda fijo (Figura 2-63).
54
2.5 Trabajando con Marcos
Figura 2- 63: Ventana de pginas de marcos
pulsar sobre Crear y aparece la ventana con dos marcos. En la ventana en blanco que aparecer la izquierda escribir los nombre de los diarios ABC, El Mundo, El Pas, y La Vanguardia. Figura 2-64.
Figura 2- 64: Ventana con dos marcos
2) Marcar la palabra ABC y crear un vnculo en el Inspector de propiedades a http://www.abc.es, para que la direccin se abra en la ventana de la derecha seleccionar en Destino mainframe (Figura 2-66).
Figura 2- 65: Inspector de Propiedades 55
2 Crear Pginas Web
3) Poner la direccin URL a los otros diarios escribiendo: www.elmundo.es, www.elpais.es, www.lavanguardia.es 4) Establecer la ventana de Vista previa y ver como aparecen los vnculos en el marco de la derecha (Figura 2-66) .
Figura 2- 66: Pagina con marcos
Notas
1.- Para crear una pgina con marcos, tambin se puede hacer, escogiendo marcos en la barra de insertar y en ella escoger el tipo de marco que queremos (Figura 2-67)
Figura 2- 67: Insertar marcos
2.- Para visualizar y configurar de las propiedades de un marco utilizar el inspector de propiedades.(Figura 2-68). Para ello: Seleccionar un marco llevando a cabo una de estas operaciones: Hacer clic en un marco en la ventana de documento mientras se presiona la tecla Alt hacer clic en un marco en el panel Marcos.
Figura 2- 68: Propiedades de un marco 56
2.5 Trabajando con Marcos
3.- Para visualizar y configurar de las propiedades de un conjunto de marcos, utilizar el inspector de propiedades para ver y establecer las propiedades de un conjunto de marcos. Para establecer el ttulo del conjunto de marcos seleccionado, utilice el cuadro de dilogo Propiedades de la pgina o el campo Ttulo de la barra de herramientas de la ventana de documento (Figura 2-67). Para ver o establecer las propiedades de un conjunto de marcos: Seleccione un conjunto de marcos llevando a cabo una de estas operaciones: Hacer clic en uno de los bordes que se encuentran entre dos marcos en el conjunto de marcos de la vista Diseo de la ventana de documento. Hacer clic en el borde que rodea a un conjunto de marcos en el panel Marcos.
Figura 2- 69: Propiedades de un conjunto de marcos
4.- El uso ms comn de los marcos es la navegacin. Un conjunto de marcos suele incluir un marco con una barra de navegacin y otro que muestra las pginas de contenido principal. Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones, las pginas Web que no los incluyen logran prcticamente los mismos objetivos. Por ejemplo, si desea que la barra de navegacin aparezca a la izquierda, puede reemplazar la pgina por un conjunto de marcos o, simplemente, incluir la barra de navegacin en todas las pginas del sitio. ((Dreamweaver le ayuda a crear varias pginas con la misma disposicin con las Plantillas de Dreamweaver.) Hay muchos diseadores Web profesionales que prefieren no utilizar marcos y muchas personas que navegan por la Web a las que no les gustan. Esto suele deberse a que encontraron sitios que utilizaban los marcos incorrecta o innecesariamente (por ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los marcos de navegacin cada vez que el visitante hace clic en un botn de navegacin). Cuando se utilizan bien los marcos (por ejemplo, para incluir controles de navegacin estticos en un marco permitiendo al mismo tiempo que cambie el contenido de otro), pueden resultar muy tiles. No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden experimentar dificultades para navegar por pginas con marcos. Por eso, si los utiliza, incluya siempre una seccin noframes en su conjunto de marcos para los visitantes que no pueden verlos. Si lo desea, puede incluir tambin un vnculo a una versin sin marcos del sitio para los visitantes con navegadores que no admitan marcos o que no deseen utilizarlos. Entre las ventajas de utilizar marcos se incluyen: El navegador de un visitante no tendr que volver a cargar los grficos de navegacin para cada pgina. Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma
57
2 Crear Pginas Web
independiente. (Por ejemplo, si la barra de navegacin se encuentra en otro marco, cuando el visitante se ha desplazado al final de una pgina de contenido muy grande en un marco no ser necesario volver al principio de la pgina para acceder a la barra de navegacin.) Entre los inconvenientes de utilizar marcos se incluyen: Lograr un alineamiento grfico preciso de los elementos en distintos marcos puede resultar difcil. Comprobar las opciones de navegacin puede llevar mucho tiempo. Los URL de las pginas con marcos no se muestran en el navegador, por lo que puede resultar complicado para un visitante marcar una pgina concreta (salvo que incluya cdigo de servidor que le permita cargar la versin con marcos de una determinada pgina).
58
3.1 Imagen de sustitucin Una imagen de sustitucin es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Una imagen de sustitucin consta en realidad de dos imgenes: la imagen principal (la que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver cambia automticamente el tamao de la segunda imagen para que se ajuste a las propiedades de la primera. No es posible ver el efecto de una imagen de sustitucin en la ventana de documento de Dreamweaver. Si desea ver el efecto de sustitucin, presione F12 para obtener una vista previa de la imagen en un navegador y, a continuacin, pase el puntero por la imagen. Las imgenes de sustitucin estn automticamente configuradas para que respondan al evento onMouseOver.
Tema
Trabajar con Elementos Dinmicos
En una pgina se pueden aplicar efectos de animacin de HTML dinmicos a cualquier elemento de una pgina, es decir, a textos, prrafos, imgenes, botones, marquesinas y otros. En algunos casos en esencia consiste en relacionar el efecto a un evento que desencadena la animacin para que se produzca el dinamismo oportuno. Aunque el segundo cuatrismestre del curso esta dirigido esencialmente a crear este tipo de efectos o pginas dinmicas mediante distintas herramientas de los lenguajes de programacin Java, JavaScript y Flash que despus se pueden incorporar a las pgina Web mediante Dreamweaver. l mismo tiene dentro del propio programa una gran capacidad para crear elementos dinmicos como veremos en este Tema.
Para crear una imagen de sustitucin: En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la imagen de sustitucin. Introducir la imagen de sustitucin mediante uno de estos mtodos:
59
3 Trabajar con Elementos Dinmicos
En la barra Insertar, seleccionar Comn y luego hacer clic en el icono Imagen de sustitucin. En la barra Insertar, seleccionar Comn, arrastre el icono Imagen de sustitucin hasta la posicin deseada de la ventana de documento. Elegir Insertar > Imgenes interactivas >Imagen de sustitucin. Se abre el cuadro de dilogo Insertar imagen de sustitucin (Figura 3-1).
Figura 3- 1: Ventana de insertar imagen de sustitucin
Vamos crear una imagen de sustitucin con dos imagenes que aparecen en la carpeta Imagenes del Tutorial del Dreamweaver del segundo CD, para ello: En el campo Nombre de la imagen, introducir un nombre para la imagen de sustitucin (Editoriales). En el cuadro de texto Imagen original, hacer clic en Examinar y seleccionar la imagen que se desea que aparezca al cargarse la pgina o introducir la ruta del archivo de imagen en el cuadro de texto (anaya.jpg). En el cuadro de texto Imagen de sustitucin, hacer clic en Examinar y seleccionar la imagen que se desea que aparezca al pasar el puntero sobre la imagen original o introducir la ruta del archivo de imagen en el cuadro de texto (ariel.jpg). Si se desea que las imgenes se carguen previamente en el cach del navegador, para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen, hay que seleccionar la opcin Carga previa de imagen de sustitucin (seleccionarla). En Texto alternativo, introducir un texto que describa la imagen para los usuarios que utilicen un navegador no grfico. (opcional) En el campo Al hacerse clic, ir a URL, hacer clic en Examinar y seleccionar el archivo o escriba la ruta del archivo que se desea que se abra cuando un usuario hacer clic en la imagen de sustitucin. Si no establece un vnculo para la imagen, Dreamweaver insertar un vnculo nulo (#) en el cdigo HTML relativo al comportamiento de sustitucin. Si se elimina el vnculo nulo, la imagen de sustitucin dejar de funcionar. Hacer clic en Aceptar para cerrar el cuadro de dilogo Insertar imagen de sustitucin. Elegir Archivo > Vista previa en el navegador o presione F12. En el navegador, desplazar el puntero sobre la imagen original. Debe aparecer la imagen de sustitucin (Figura 3-2).
60
3.2 Barra de navegacin
Figura 3- 2: Ventana del navegador
Aunque las imgenes de sustitucin estn automticamente configuradas para que respondan al evento onMouseOver. Es posible cambiar el evento grupo de paneles pulsando sobre la pestaa Diseo>Comportamiento (Figura 3-3)
Figura 3- 3: Ventana de cambio de evento
3.2 Barra de navegacin Una barra de navegacin se compone de una imagen o un conjunto de imgenes cuya visualizacin cambia segn las acciones que realice el usuario. Las barras de navegacin proporcionan a menudo una forma fcil de desplazarse por las pginas y los archivos de un sitio. Antes de usar el comando Insertar barra de navegacin, crear un conjunto de imgenes para los estados de visualizacin de cada elemento de navegacin. (hay que considerar el elemento de la barra de navegacin como si fuera un botn, ya que cuando el usuario hace clic en l, le lleva a otra pgina.) Un elemento de la barra de navegacin puede tener cuatro estados: Arriba: la imagen que aparece cuando el usuario an no ha hecho clic o interactuado
61
con el elemento. Sobre: la imagen que aparece cuando el puntero pasa sobre la imagen Arriba. La apariencia del elemento cambia (por ejemplo, puede ponerse ms clara) para que los usuarios sepan que pueden interactuar con l. Abajo: la imagen que aparece despus de hacer clic en el elemento. Por ejemplo, cuando un usuario hace clic en un elemento, se carga una pgina nueva y la barra de navegacin sigue mostrndose, pero el elemento se oscurece para indicar que est seleccionado. Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la imagen Abajo despus de hacer clic en el elemento. Por ejemplo, el elemento aparece atenuado o gris. Puede utilizar este estado como indicador visual para que los usuarios sepan que no pueden volver a hacer clic en este elemento mientras se encuentren en esa parte del sitio. No es necesario incluir imgenes de barra de navegacin para los cuatro estados. Quiz slo se necesiten, por ejemplo, los estados Arriba y Abajo. Es posible crear una barra de navegacin, copiarla en otras pginas del sitio, utilizarla con marcos y editar los comportamientos de la pgina para mostrar distintos estados a medida que se accede a las pginas.
Insercin de una barra de navegacin Al insertar una barra de navegacin, hay que asignar nombres a los elementos de la barra y seleccionar imgenes para ellas. Vamos a crear un barra de navegacin con dos botones uno para ir a la UNED (www.uned.es) y otro para ir a FUE (www.fue.es). Para crear una barra de navegacin hay que realizar las siguientes operaciones: Elegir Insertar > Imgenes interactivas > Barra de navegacin. Seleccionar la ficha Comn de la barra Insertar y, a continuacin, hacer clic en el botn Insertar barra de navegacin. Aparecer el cuadro de dilogo Insertar barra de navegacin. Seleccionar las opciones deseadas en el cuadro de dilogo. Utilizar las imagenes uned1, 2 y 3 y fue1, 2, y 3 de la carpeta de Imagenes del Tutorial, poner las direcciones web asociadas (Figura 3-4).
62
3.2 Barra de navegacin
Figura 3- 4: Insertar barra de navegacin
Hacer clic en Aceptar. Marcar los dos botones del documento y en el Inspector de propiedades saldr las propiedades de la matriz que ha asociado Dreamweaver a esa barra. Cambie las propiedades poniendo en Borde el nmero 2 y como color del borde blanco (Figura 3-5).
Figura 3- 5: Propiedades tabla
Marcar individualmente cada uno de los botones y en el Inspector de propiedades saldr las propiedades de la celda que ha asociado Dreamweaver a esa barra. Cambie las propiedades del los vnculos poniendo en Destino la opcin _blank (Figura 3-6).
Figura 3- 6: Propiedades celda
63
Por ltimo, visualizar en vista previa y hacer clic en cada uno de los botones (Figura 3-6).
Figura 3- 7: Vista previa
Modificacin de una barra de navegacin Una vez creada una barra de navegacin para un documento, se pueden aadir o quitar imgenes de la barra utilizando el comando Modificar barra de navegacin. Tambin se puede emplear este comando para cambiar una imagen o un conjunto de imgenes, para determinar qu archivo se abre cuando se hace clic en un elemento, para seleccionar otra ventana o marco para abrir un archivo o para reordenar las imgenes. Para modificar una barra de navegacin: Elegir Modificar > Barra de navegacin. Aparecer el cuadro de dilogo Modificar barra de navegacin.
3.3 Botn Flash El objeto de botn Flash es un botn actualizable basado en una plantilla Flash. Se puede personalizar un objeto de botn Flash aadindole texto, color de fondo y vnculos con otros archivos. Los botones Flash pueden insertarse mientras se trabaja en la vista Diseo o en la vista Cdigo. Para insertar un objeto de botn Flash en la ventana de documento, colocar el punto de insercin en el lugar en el que desea insertar el botn Flash. Para abrir el cuadro de dilogo Insertar botn Flash, realice una de las siguientes operaciones: En la barra Insertar, seleccionar Medio y, a continuacin, hacer clic en el icono Botn Flash.
64
3.3 Botn Flash
En la barra Insertar, seleccionar Medio y arrastar el icono Botn Flash a la ventana de documento, o a la ventana de vista Cdigo si se est trabajando en el cdigo. Elegir Insertar > Imgenes interactivas > Botn Flash. Aparecer el cuadro de dilogo Insertar botn Flash. Seleccionar el estilo de botn que se desea en la lista Estilo. En el campo Texto del botn (opcional), escribir el texto que se quiere mostrar. Este campo slo acepta cambios si el botn seleccionado tiene definido el parmetro {Button Text}. Esto se puede observar en el campo Muestra. El texto que se escriba reemplazar {Button Text} al obtener una vista previa del archivo. En el men emergente Fuente, seleccionar la fuente que se desea utilizar. Si la fuente predeterminada de un botn no est disponible en el sistema, seleccionar otra fuente en el men emergente. No se ver la fuente seleccionada en el campo Muestra, aunque se puede hacer clic en Aplicar para insertar el botn en la pgina y ver la apariencia que tendr el texto. En el campo Tamao, introducir un valor numrico para el tamao de la fuente.
Figura 3- 8: Insertar botn Flash
En el campo Vnculo (opcional), introducir un vnculo absoluto o relativo al documento para el botn.
65
En el campo Destino (opcional), especificar la ubicacin en la que se abrir el documento vinculado. Se puede seleccionar una opcin de marco o ventana en el men emergente. Los marcos slo aparecen en la lista si el objeto Flash se edita mientras se encuentra en un conjunto de marcos. En el campo Color de fondo (opcional), establecer el color del fondo de la pelcula Flash. Utilizar el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF). En el campo Guardar como, introducir un nombre de archivo para guardar el nuevo archivo SWF. Puede utilizar el nombre de archivo predeterminado (por ejemplo, button1.swf) o escribir uno nuevo. Si el archivo contiene un vnculo relativo al documento, hay que guardarlo en el mismo directorio que el documento HTML actual para mantener los vnculos relativos al documento. Hacer clic en Obtener ms estilos para pasar al sitio Macromedia Exchange y descargar ms estilos de botn. Hacer clic en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento. Como ejemplo, vamos a crear un botn para ir a la Web del curso de Internet. Para ello hay que escribir en la ventana del botn Flash las opciones que aparecen el Figura 3-8. y apararecer la ventana del documento con el botn creado (Figura 3-9).
Figura 3- 9: Botn Flash
Modificacin de un objeto de botn Flash. Para modificar un objeto de botn Flash. En la ventana de documento, hacer clic en el objeto de botn Flash para seleccionarlo. Abrir el inspector de propiedades si es que no est abierto an. El inspector de propiedades muestra las propiedades del botn Flash. Se puede utilizar el inspector de propiedades para modificar los atributos HTML del botn, como su ancho, alto y color de fondo.
66
3.4 Texto Flash
3.4 Texto Flash El objeto de texto Flash permite crear e insertar un texto en formato Flash. Esto permite crear un pequeo grfico vectorial con fuentes de diseo y el texto elegido. Para crear un texto Flash hay que seguir los siguientes pasos: 1) Abrir el cuadro de dilogo Insertar texto Flash y realizar una de las siguientes operaciones: En la barra Insertar, seleccionar Medio y hacer clic en el icono Texto Flash. En la barra Insertar, seleccionar Medio y arrastar el icono Texto Flash a la ventana de documento, o a la ventana de vista Cdigo si est trabajando en el cdigo. Elegir Insertar > Imgenes interactivas > Texto Flash. Aparecer el cuadro de dilogo Insertar texto Flash. 2) Seleccionar una fuente en el men emergente Fuente. Este men muestra todas las fuentes TrueType cargadas actualmente en el sistema. Introducir un tamao de fuente (de puntos) en el campo Tamao. 3) Especifique los atributos de estilo, como negrita o cursiva, y el alineamiento del texto haciendo clic en los botones apropiados. 4) En el campo Color, establecer el color del texto utilizando el selector de color o introduciendo un valor hexadecimal para la Web (como #FFFFFF). 5) En el campo Color de sustitucin, establecer el color que aparece cuando el puntero pasa sobre el objeto de texto Flash. Utilice el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF).
Figura 3- 10: Insertar texto Flash
6) Introducir el texto deseado en el campo Texto.

67
7) Si desea asociar un vnculo con el objeto de texto Flash, introducir un vnculo absoluto o relativo al documento en el campo Vnculo. 8) Si se ha introducido un vnculo, el campo Destino permite especificar el marco o la ventana de destino en la que se desea que se cargue el vnculo. 9) En el campo Color de fondo, elegir un color de fondo para el texto. Utilizar el selector de color o escribir un valor hexadecimal para la Web (como #FFFFFF). 10) En el campo Guardar como, introducir un nombre para el archivo. Puede utilizar el nombre de archivo predeterminado (por ejemplo, tex1.swf) o escribir uno nuevo. Si el archivo contiene un vnculo relativo al documento, deber guardarlo en el mismo directorio que el documento HTML actual para mantener los vnculos relativos al documento. 11) Hacer clic en Aplicar o Aceptar para insertar el texto Flash en la ventana de documento. Por ejemplo, vamos a crear un texto Flash para ir a la Web de Macromedia, para ello escriba en la ventana del botn texto Flash las opciones que aparecen el Figura 3-10. y apararecer la ventana del documento con el texto creado (Figura 3-11).
Figura 3- 11: Documento con el texto Flash
Si se hace clic en Aplicar, el cuadro de dilogo permanecer abierto y se podr obtener una vista previa del texto en el documento. Para modificar o reproducir el objeto de texto Flash, seguir el mismo procedimiento utilizado para el botn Flash.
3.5 Utilizacin de comportamientos Los comportamientos de Dreamweaver introducen en los documentos cdigo JavaScript que permite a los visitantes interactuar con la pgina Web para modificarla de diversas maneras o para que se realicen determinadas tareas. Un comportamiento es una combinacin de un evento con una accin que desencadena ese evento. En el panel Comportamientos, un comportamiento se aade a una pgina especificando en primer lugar una accin y, a continuacin, el evento que desencadena esa accin.
68
3.5 Utilizacin de comportamientos
El cdigo del comportamiento es cdigo JavaScript del lado del cliente; es decir, se ejecuta en los navegadores, no en los servidores. Los eventos son mensajes generados por los navegadores que indican que un visitante de la pgina ha hecho algo. Por ejemplo, cuando un visitante mueve el puntero sobre un vnculo, el navegador genera un evento onMouseOver para ese vnculo. A continuacin, comprueba si hay cdigo JavaScript (especificado en la pgina mostrada) al que deba llamar cuando se genere ese evento para ese vnculo. Los distintos elementos de la pgina tienen definidos diferentes eventos. Por ejemplo, en la mayora de los navegadores onMouseOver y onClick son eventos asociados a vnculos, mientras que onLoad es un evento asociado a imgenes y a la seccin body del documento. Las acciones constan de cdigo JavaScript ya definido que realiza una tarea especfica, como abrir la ventana de un navegador, mostrar u ocultar una capa, reproducir un sonido o detener una pelcula Shockwave. Las acciones que incorpora Macromedia Dreamweaver MX han sido cuidadosamente desarrolladas por los ingenieros de Dreamweaver para proporcionar la mxima compatibilidad con los distintos navegadores. Despus de adjuntar un comportamiento a un elemento de pgina, cada vez que se produce el evento especificado para ese elemento, el navegador llama la accin (el cdigo JavaScript) que se ha asociado con ese evento. (Los eventos que puede utilizar para desencadenar una accin determinada varan en funcin del navegador de que se trate.) Por ejemplo, si se adjunta la accin Mensaje emergente a un vnculo y se especifica que el evento onMouseOver desencadena esa accin, cada vez que un visitante pase el puntero del ratn sobre ese vnculo en el navegador aparecer el mensaje en un cuadro de dilogo. Un mismo evento puede desencadenar varias acciones distintas, y se puede especificar el orden en que esas acciones tienen lugar. Dreamweaver MX incluye unas 24 acciones de comportamiento. Se pueden encontrar otras acciones en el sitio Web de Macromedia Exchange.
Utilizacin del panel Comportamientos Para abrir el panel Comportamientos, elegir Ventana > Comportamientos. Los comportamientos que ya se han adjuntando al elemento de pgina actualmente seleccionado aparecen en la lista de comportamientos (el rea principal del panel), en orden alfabtico por eventos. Si hay varias acciones para un mismo evento, las acciones se ejecutarn en el orden en que aparecen en la lista. Si en la lista de comportamientos no aparece ningn comportamiento, significa que no hay ningn comportamiento adjunto al elemento actualmente seleccionado. Las opciones del panel Comportamientos son las siguientes: Acciones (+) Es un men emergente de las acciones que se pueden adjuntar al elemento
69
seleccionado actualmente. Cuando se selecciona una accin de esta lista, aparece un cuadro de dilogo en el que se pueden especificar los parmetros correspondientes a la accin. Si todas las acciones aparecen atenuadas, significa que el elemento seleccionado no puede generar ningn evento. Eliminar (-) Elimina la accin y el evento seleccionados de la lista de comportamientos. Botones de flechas arriba y abajo Desplazan la accin seleccionada hacia arriba o hacia abajo en la lista de comportamientos. Las acciones para un evento determinado se ejecutan en el orden especificado. El orden de las acciones se puede cambiar solamente para un evento concreto; por ejemplo, se puede cambiar el orden en que se producen varias acciones para el evento onLoad, pero todas las acciones onLoad permanecen juntas en la lista de comportamientos. Los botones de flecha estn desactivados para las acciones que no se pueden desplazar arriba o abajo de la lista. Eventos (el men que aparece al hacer clic en el botn de flecha que hay junto al nombre del evento seleccionado en la lista de comportamientos) es un men emergente que contiene todos los eventos que puede desencadenar la accin. Este men solamente se ve cuando hay un evento de la lista de comportamientos seleccionado. Aparecern distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos esperados, hay que asegurar que se est seleccionado la etiqueta o el elemento de pgina correcto. (Para seleccionar una etiqueta determinada, usar el selector de etiquetas, que se encuentra en la parte inferior izquierda de la ventana de documento.) Compruebe tambin que ha seleccionado el navegador o navegadores correctos en el submen Mostrar eventos para. Los nombres de eventos entre parntesis solamente estn disponibles para vnculos. Al seleccionar uno de estos nombres de eventos se aade automticamente un vnculo nulo al elemento de la pgina seleccionado y se adjunta el comportamiento a ese vnculo en lugar de adjuntarse al propio elemento. En cdigo HTML, el vnculo nulo se especifica de la siguiente forma: a href="javascript:;".
Notas
Mostrar eventos para (el submen del men Eventos) especifica los navegadores en los que deber funcionar el comportamiento actual. La seleccin que se realiza en este men determina los eventos que aparecern en el men emergente Eventos. Los navegadores antiguos generalmente admiten menos eventos que los ms modernos y, en la mayora de los casos, cuanto ms general sea el navegador de destino elegido, menos eventos se mostrarn, puesto que slo se mostrarn aquellos eventos que estn disponibles en todos los navegadores requeridos. Por ejemplo, si selecciona 3.0 y posteriores, los nicos eventos que podr seleccionar son aquellos que estn disponibles en todas las versiones de Netscape Navigator y Microsoft Internet Explorer desde la 3.0 en adelante, lo que representa una lista de eventos muy reducida.
70
Aplicacin de un comportamiento Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta body) o a vnculos, imgenes, elementos de formulario o cualquier otro elemento HTML. El navegador de destino que se elija determinar los eventos posibles para un elemento dado. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos para cada elemento mucho ms amplia que Navigator 4.0 o que la versin 3.0 de cualquier otro navegador. No se puede adjuntar un comportamiento a texto normal. Para adjuntar un comportamiento: 1) Seleccionar un elemento de la pgina, como una imagen o un vnculo. Para adjuntar un comportamiento a la pgina completa, hacer clic en la etiqueta <body> en el selector de etiquetas. 2) Elegir Ventana > Comportamientos para abrir el panel de comportamientos. 3) Hacer clic en el botn de signo ms (+) y elegir una accin del men emergente Acciones. No se pueden seleccionar las acciones que aparecen atenuadas en el men. Es posible que se muestren atenuadas porque no existe un objeto especfico en el documento actual. Por ejemplo, la accin Reproducir lnea de tiempo se mostrar atenuada si el documento no tiene lneas de tiempo, y la accin Controlar Shockwave o Flash aparecer atenuada si el documento no contiene pelculas Shockwave o Flash. Si no hay eventos para el objeto seleccionado, todas las acciones aparecern atenuadas. 4) Cuando se elige una accin, aparecer un cuadro de dilogo en el que se mostrarn los parmetros e instrucciones de la accin. 5) Introducir los parmetros de la accin y hacer clic en Aceptar. 6) Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la versin 4.0 y posteriores. Algunas acciones no funcionan en los navegadores antiguos. Al adjuntar un comportamiento a una imagen, algunos eventos (como onMouseOver) aparecen entre parntesis. Estos eventos solamente estn disponibles para vnculos. Cuando se elige uno de ellos, Dreamweaver ajusta una etiqueta a alrededor de la imagen para definir un vnculo nulo. El vnculo nulo es representado por javascript:; en el cuadro de texto Vnculos del inspector de propiedades. Puede cambiar el valor del vnculo si desea convertirlo en un vnculo real con otra pgina, pero si borra el vnculo JavaScript sin sustituirlo por otro vnculo, borrar el comportamiento. Como ejemplo vamos a instalar un comportamiento que al pasar el ratn sobre una imagen aparecer una ventana aparte con el contenido de una direccin URL:, en este caso http://www.anaya.es, para ello: 1) Seleccionar la imagen anaya .jpg de la carpeta de Imagenes del Tutorial.
71
2) Elegir Ventana > Comportamientos para abrir el panel de comportamientos. Hacer clic en el botn de signo ms (+) y elegir una accin Abrir ventana del navegador (Figura 3-12).
Figura 3- 12: Men +
3) Aparecer un cuadro de dilogo en el que se mostrarn los parmetros e instrucciones de la accin.
Figura 3- 13: Ventana del Navegador
4) Introducir los parmetros que aparecen en la figura 3-13 y hacer clic en Aceptar. 5) Elegir ahora en Eventos el evento onMouseOver
72
Figura 3- 14: Ventana de Eventos
6) En el panel de Diseo aparece el evento y la accin (Figura 3-16).
Figura 3- 15: Panel de Diseo
7) Por ltimo, comprobar en Vista previa del explorador el comportamiento.
Comportamientos y texto No se puede adjuntar un comportamiento a texto normal. Las etiquetas como p y span no generan eventos en los navegadores, por lo que no es posible desencadenar una accin a partir de esas etiquetas. Sin embargo, s se puede adjuntar un comportamiento a un vnculo. Por ello, la manera ms fcil de adjuntar un comportamiento a texto consiste en aadir un vnculo nulo (que no seala a nada) al texto y, a continuacin, adjuntar el comportamiento al vnculo. Hay que tener en cuenta que al hacerlo, el texto tendr apariencia de vnculo. Se puede cambiar el color del vnculo y eliminar el subrayado si no se desea que parezca un vnculo, si bien, de esta manera los visitantes del sitio no se darn cuenta de que hay una razn para hacer clic en ese texto. Para adjuntar un comportamiento al texto seleccionado:
73
1) En el inspector de propiedades, introducir javascript:; en el campo Vnculo. Es necesario de incluir tanto los dos puntos como el punto y coma. Si se desea, como alternativa se puede usar un signo de almohadilla (#) en el campo Vnculo. El problema de usar un signo de almohadilla es que cuando un visitante hace clic en un vnculo, algunos navegadores pueden saltar a la parte superior de la pgina. Hacer clic en el vnculo nulo de JavaScript no produce efecto alguno en la pgina, por lo que la solucin de JavaScript suele ser la preferible. 2) Con el texto todava seleccionado, abrir el panel Comportamientos (Ventana> Comportamientos). 3) Elegir una accin en el men emergente Acciones, introducir los parmetros de la accin y seleccionar un evento que desencadene la accin. Como ejemplo, vamos a instalar un comportamiento que al pasar el ratn sobre una imagen haga aparecer una ventana aparte con un men. Para ello: 1) Escriba en un documento nuevo la palabras Curso de Internet. 1) Marcarlas y en el inspector de propiedades, introducir javascript:; en el campo Vnculo. Asegurarse de incluir tanto los dos puntos como el punto y coma.
Figura 3- 16: Ventana Propiedades
2) Guardar el documento. 3) Con el texto todava seleccionado, abrir el panel Comportamientos (Ventana> Comportamientos) y elegir Mostrar men emergente (Figura 3-17).
Figura 3- 17: Ventana de comportamientos
74
4) Crear un men con las palabras Preguntas, Noticias, Reuniones. Cambiar los parmetros de la accin (Figura 3-18).
Figura 3- 18: Ventana men emergente
5) Por ltimo, comprobar en Vista previa del explorador el comportamiento (Figura 3-19).
Figura 3- 19: Vista previa
Notas
Para cambiar el aspecto de texto vinculado de modo que no parezca un vnculo: Abrir la vista Cdigo en la ventana de documento eligiendo Ver > Cdigo. Buscar el vnculo En la etiqueta a href del vnculo, insertar este atributo: style="text-decoration:none; color:black". Al incluir este atributo, se desactiva el subrayado y el color del texto se establece en negro. (Por supuesto, si el texto contiguo es de un color distinto, use ese color en lugar del negro.)
75
Descarga e instalacin de comportamientos de otros proveedores Una de las caractersticas ms interesantes de Dreamweaver es su capacidad de ampliacin. Es decir, ofrece a aquellos usuarios que disponen de suficientes conocimientos de JavaScript la oportunidad de escribir cdigo JavaScript y ampliar as las posibilidades de Dreamweaver. Muchos de estos usuarios han decidido compartir sus extensiones con otros usuarios envindolas al sitio Web Macromedia Exchange for Dreamweaver. Para descargar e instalar nuevos comportamientos desde el sitio Exchange: 1) Abrir el panel Comportamientos y elegir Obtener ms comportamientos en el men emergente Acciones (+). 2) Se abrir su navegador principal y aparecer el sitio Exchange. (Para descargar comportamientos es necesario estar conectado a la Web.) 3) Examine o busque los paquetes. 4) Descargar e instalar el paquete de extensiones que se desee. Como ejemplo, vamos a instalar un comportamiento que nos permite crear un reloj o un calendario en una pgina web. 1) Abrir el panel Comportamientos y elegir Obtener ms comportamientos en el men emergente Acciones (+). (Figura 3-20).
Figura 3- 20: Acciones
76
2) Se abrir el navegador principal y aparecer el sitio Exchange. (Para descargar comportamientos es necesario estar conectado a la Web.) (Figura 3-21)
Figura 3- 21: Sitio Exchange
3) Examinar o buscar los paquetes, en este ejemplo escoger el paquete que ya se habr obtenido de la web denominado LiveClock.mxp que esta en la carpeta de Imgenes del Tutorial. 4) Instalar el paquete de LiveClock.mxp pulsando dos veces con el ratn sobre el archivo. Aparecer una ventana que indicar que ya est instalado el paquete (Figura 3-22).
Figura 3- 22: Ventana de Extension Manager
5) Para trabajar con el paquetes slo hay que ir a Comandos y seleccionarlo (Figura 3-23)
77
Figura 3- 23: Men de Comandos
6) Al seleccionarlo se abrir una ventana donde se podrn cambiar las propiedades del reloj y calendario que se quieran instalar (Figura 3-24).
Figura 3- 24: Ventana de paramentros de LiveClock
78
4.1 Paginas diseadas con tablas Una forma de conseguir que los objetos estn situados en una estructura fija entre s, consiste en insertar dichos objetos dentro de las celdas de una tabla, o si es necesario, utilizar incluso en tablas dentro de tablas, es decir anidar tablas. En este apartado se parte de que se ha creado una pgina en blanco. Para insertar una tabla se pulsa el botn , o bien en el men principal se selecciona la opcin Insertar y de su submen la opcin Tabla. Aparece la ventana Insertar Tabla, se escribe un tres en el campo Filas: y un tres en el campo Columnas: y al pulsar el botn Aceptar se vuelve a la pgina donde aparezca la tabla vaca. Se sita el cursor de texto en la celda superior izquierda. Para insertar una imagen se pulsa el botn , o bien del men principal se selecciona la opcin Insertar y de su submen la opcin Imagen. Aparece la ventana Seleccionar origen de imagen, se selecciona la carpeta Graficos en el campo Buscar en:, se escribe el nombre del archivo informacion.jpg en el campo Nombres: y al pulsar el botn Aceptar se vuelve a la pgina donde aparece la celda con la imagen. Se repite esta operacin con las restantes celdas y se modifican los ajustes de los contenidos de las celdas hasta formar la configuracin de la Figura 4-1.
79
Tema
Capas
Los usuarios de procesador de textos y de programas de edicin estn acostumbrados a disponer los distintos objetos, como texto y grficos, dentro de cajas con una determinada distribucin geomtrica de dichas cajas de manera que se imprima lo diseado, por ejemplo, un documento que contiene cuadros de texto y cajas de imgenes en el procesador de texto Word. En el entorno Web no se dispone de la flexibilidad que esos programas poseen, y puede ocurrir que el diseador componga una pgina que el navegador distorsionar geomtricamente segn el tamao de la ventana del navegador y la capacidad de reconocer cdigos. Con la versin 4.0 de HTML se dispone del objeto Capa que solventa este hecho, si bien, no todos los navegadores reconocen esta versin, aunque Explorer 4.5 y Nescape 4.x o superiores versiones si la reconocen. En este tema se construye una pgina con una cierta distribucin espacial utilizando tablas y otra anloga utilizando capas. Se utilizarn los imgenes de la carpeta Graficos.
4 Capas
Figura 4- 1: Diseo de pgina con una tabla de opciones
Una vez seleccionada la tabla, se modifican en la ventana Propiedades (situada debajo de la ventana de edicin) los campos Borde, con un cero, Rell. celda, con un cinco, y Esp. celda con otro cinco. Si se pulsa la tecla F12 se abre la pgina con el navegador establecido por defecto como se muestra en la Figura 4-2.
Figura 4- 2: Vista de la pgina con una tabla de opciones
Slo quedara definir sobre esas imgenes los enlaces a las pginas que abriran cada uno de los servicios. Evidentemente, en cada una de las celdas de una tabla se pueden insertar texto, imgenes, enlaces, ... de la forma habitual.
4.2 Paginas diseadas con capas Toda tabla en HTML posee una forma rectangular con celdas del mismo tamao, aunque las celdas pueden llegar a tener un tamao distinto gracias a la unin o la divisin de stas y otras modificaciones. En cualquier caso las celdas son conexas unas con otras. Una capa es algo similar a una celda que se sita donde el usuario desea el usuario, as un conjunto de capas es algo similar a un conjunto de celdas que son independientes unas de otras. Dos capas pueden superponerse, pero puede ocurrir que una tape a la otra. Otra forma de conseguir que los objetos estn situados en una estructura fija entre s, consiste en insertar cada uno de dichos objetos dentro de una capa distinta. Una capa es pues una caja rectangular posicionada en una pgina donde pueden situarse los objetos
80
4.2 Paginas diseadas con capas
habituales de las pginas web.
Figura 4- 3: Ejemplo de capa en una pgina
Conviene recordar que un rectngulo queda definido por su vrtice superior izquierdo y su vrtice inferior derecho y, que suele generarse con el ratn. Pulsando el botn izquierdo de ste se marca un vrtice y, manteniendo dicho botn pulsado, se desplaza el puntero hasta llegar al otro vrtice que queda definido al liberar el botn.
Figura 4- 4: Vista con el navegador del ejemplo de capa
Una capa situada en una pgina puede tapar la informacin de dicha pgina como si a una hoja de texto se le pegara una nota tipo post-it.
Figura 4- 5: Cdigos HTML del ejemplo de capa
Anlogamente, ahora se parte de una pgina en blanco en la que se insertar una capa. Para insertar una capa se pulsa el botn y el usuario define directamente dentro de la
81
4 Capas
pgina el rectngulo que forma la capa, o bien selecciona la opcin Insertar del men principal y, de su submen, la opcin Capa. Al utilizar esta segunda opcin, aparece el smbolo de una capa en el lugar de la pgina donde estuviera el cursor de texto. Dicha capa (capa activa) es de unas dimensiones preestablecidas. Es el usuario quien debe situar el puntero del ratn sobre la pestaa anexa al rectngulo de la capa para desplazar la capa a la posicin que desee. El traslado de capas y su redimensin se realiza de la forma anloga a como se desplazan y redimensionan las ventanas en Windows. Cuando no se est editando sobre una capa, entonces sus bordes aparecen color gris, sin embargo, basta situar el cursor del ratn y pulsar el botn izquierdo para que dicha capa se active y aparezca el cursor de texto sobre la capa. Sus bordes ahora son negros. Adems, para modificar los valores de la capa simplemente hay que situarse sobre el borde activo, o sobre el smbolo de capa, con el cursor del ratn y pulsar el botn de la izquierda del ratn. El panel Propiedades situado en la parte inferior de la pantalla muestra las caractersticas de dicha capa.
Figura 4- 6: Ventana Propiedades con las propiedades de una capa
Se sita el cursor de texto en la capa y se inserta la imagen adecuada. Para insertar una imagen se pulsa el botn , o bien del men principal se selecciona la opcin Insertar y de su submen la opcin Imagen. Aparece la ventana Seleccionar origen de imagen, se selecciona la carpeta Graficos en el campo Buscar en:, se escribe el nombre del archivo informacion.jpg en el campo Nombres: y al pulsar el botn Aceptar se vuelve a la pgina donde aparece la capa con la imagen. Tan slo queda ajustar el tamao de la capa a la imagen redimensionando la capa.
Figura 4- 7: Pgina con capas con cuadrcula visible 82
4.3 Trabajo con capas y tablas
Se puede repetir esta operacin con las restantes capas y modificar los ajustes de los contenidos de las celdas hasta formar la configuracin de la Figura 4-7. Conviene mostrar la cuadrcula si se estn utilizando varias capas con el fin de que resulte ms fcil la colocacin de cada caja en la hoja. Para ello, se selecciona la opcin Ver del men principal y, de su submen, la opcin Cuadrcula y del nuevo submen se activa la opcin Mostrar cuadrcula. Slo quedara definir sobre esas imgenes los enlaces a las pginas que abriran cada uno de los servicios. Evidentemente, en cada una de las capas se pueden insertar texto, imgenes, enlaces, tablas, ... de la forma habitual.
Figura 4- 8: Vista de la pgina con capas con el navegador
Notas
La diferencia principal entre las dos pginas anteriores es la distinta distribucin espacial de las imgenes que sirve de men inicial de navegacin. Adems hay otra diferencia notable relativa al tamao de la ventana del navegador que abre dichas pginas. Las tablas pueden estar diseadas para que su tamao se ajuste porcentualmente al tamao de la ventana del navegador (principalmente si contiene texto, pues con las imgenes no acta as), por lo tanto, la apariencia de esta pgina ante el diseador puede ser distinta que ante el usuario. Se recomienda cambiar de tamao la ventana del navegador. Si embargo, las capas poseen un tamao y posicin invariable ante el navegador y no se reajustan al tamao de la ventana de ste.
4.3 Trabajo con capas y tablas Si se parte de una pgina diseada con tablas y se quiere tener otra disposicin geomtrica de los elementos de dicha tabla, no es necesario redisear una nueva pgina puesto que se dispone de la opcin de convertir las celdas de la tabla en capas. Empecemos con la pgina de la seccin 4.1. Se selecciona del men principal la opcin Modificar, del submen de sta la opcin Convertir y, del nuevo submen, la opcin Tabla en capas. Aparece la ventana Convertir tabla a capas donde se puede seleccionar
83
4 Capas
distintos campos, en este caso todos, y se pulsa el botn Aceptar.
Figura 4- 9: Ventana Convertir tabla a capas
Figura 4- 10: Vista de la pgina una vez convertida la tabla en capas
Anlogamente, si se dispone de una pgina diseada con capas, se puede conseguir que las capas se transformen en una tabla. Partamos de la pgina de la seccin 4.2. Se selecciona del men principal la opcin Modificar, del submen de sta, la opcin Convertir y, del nuevo submen, la opcin Capas a tabla. Aparece la ventana Convertir capas en tabla donde se puede seleccionar distintos campos y se pulsa el botn Aceptar.
Figura 4- 11: Ventana Convertir capas en tabla
84
4.4 Creacin de capas con imagen de rastreo
Figura 4- 12: Vista de la pgina una vez convertidas las capas en tabla
Notas
Una capa es un objeto anlogo a los otros que se utilizan en el editor, por ello, puede ser eliminada, copiada y pegada. Eliminar (copiar) una capa implica tenerla seleccionada y pulsar la tecla Del (Ctrl+C) o bien usar la opcin Edicin del men principal y, del submen de sta, la subopcin Borrar (Copiar). Al pegar una capa (Ctrl+C o Edicin + Pegar) aparece superpuesta con la inicial, por ello queda tapada salvo que sea trasladada a otro sitio.
4.4 Creacin de capas con imagen de rastreo El diseo de pginas puede ser tan complejo y con contenidos solapados en capas que puede ser bastante costoso su edicin. Con este editor se disponer de la posibilidad de insertar una imagen en el fondo de la pgina, que slo es visible en plena edicin e invisible al abrirla con el navegador, para poder distribuir las distintas capas con facilidad para no superponerlas. Esta posibilidad se llama Imagen de rastreo. Se parte de una pgina en blanco. Se selecciona del men principal la opcin Ver, del submen de sta, la opcin Imagen de rastreo y, del nuevo submen, la opcin Cargar. Aparece la ventana Seleccionar origen de imagen, se selecciona la carpeta Graficos en el campo Buscar en:, se escribe el nombre del archivo MAP.GIF en el campo Nombres: y al pulsar el botn Aceptar se vuelve a la pgina donde aparece con la imagen en el fondo. Esta imagen puede ser situada en otra posicin. Para ello basta seleccionar Ver +
85
4 Capas
Imagen de rastreo y, del submen, la opcin Ajustar posicin. Aparece la ventana Ajustar seleccin de la imagen de rastreo, y se escribe 50 en el campo X:, se escribe 50 en el campo Y: y al pulsar el botn Aceptar se muestra la pgina donde la imagen est en su nueva posicin.
Figura 4- 13: Ventana Ajustar seleccin de la imagen de rastreo
A continuacin se inserta una capa de la forma descrita anteriormente y se ajusta a una parte de la imagen de rastreo, en concreto a la parte de informacin.
Figura 4- 14: Vista de la pgina una vez convertida la tabla en capas
Se repite la accin con las otras capas y basta pulsar la tecla F12 para que el navegador abra la pgina, sin que se vea la imagen de rastreo. Si se desea que ya no sea visible la imagen de rastreo basta seleccionar Ver + Imagen de rastreo y, del submen, la opcin Mostrar.
86
4.4 Creacin de capas con imagen de rastreo
Figura 4- 15: Vista de la pgina al ocultar la imagen de rastreo
Notas
Se puede activar el panel Disposicin avanzada donde se puede ver la lista de capas. Para ello, se selecciona del men principal la opcin Ventana, de submen de sta, la opcin Otros y, del nuevo submen, la opcin Capas. Aparece el panel en el vrtice inferior derecho de la pantalla.
Figura 4- 16: Panel Disposicin avanzada
87
5.1 Formato de pginas con estilos HTML En esta seccin se definirn varios estilos de prrafos y de bloques de texto que se usarn en una pgina ya confeccionada con anterioridad en este tutorial (Figura 5-3). El primer prrafo, con la palabra Mini, es del estilo HTML Encabezado2 y est centrado (Heading2; h2). Estas caractersticas son apreciables en el panel Propiedades.
Tema
Estilos y Hojas de estilo
Los procesadores de textos ms comunes poseen distintos tipos de fuentes, prrafos y aspectos que el usuario puede utilizar para darle la apariencia que desee al documento de texto que edita. Por ejemplo, el procesador de texto Word dispone de la definicin de estilos que el usuario puede aprovechar e incrementar. Los editores de pginas suelen disponer de iguales caractersticas, pero la pgina editada puede no ser reconocida por el navegador que se utilice. Los estilos para texto y prrafos en el entorno Web son standard y no se dispone de la flexibilidad de los procesadores. Puede ocurrir que el navegador utilice los valores predefinidos para el texto. Con la versin 4.0 de HTML se aceptan las hojas de estilo en cascada (CSS) que aparecieron con Internet Explorer 4.5. Una hoja de estilo permite redefinir el aspecto de aquellos elementos de una pgina tales como prrafos, listas, celdas, capas, ... cada vez que se abra con el navegador, e incluso crear nuevos estilos almacenados en un nico archivo que se asocia a la pgina. En este tema se presenta la creacin de nuevos estilos de texto y de una hoja de estilos CSS.
Figura 5- 1: Panel Propiedades del primer prrafo
El segundo es Encabezado1 (Heading1; h1) e igualmente est centrado, el tercero es un prrafo normal que est centrado y los restantes son prrafos normales (p). Las etiquetas HTML de los correspondientes prrafos se muestran en la siguiente figura.
172
5 Estilos y Hojas de estilo
Figura 5- 2: Etiquetas de los primeros prrafos
Si ahora se desea cambiar la apariencia del texto de esta pgina, caben dos posibilidades: cambiar a mano esas caractersticas cada vez que se quiera modificar, o definir estilos de usuario de forma que nuevas modificaciones slo requieran modificar dichos estilos. En esta seccin nos decantamos por esta segunda forma.
Figura 5- 3: Pgina utilizada
Cuando se trabaja con estilos conviene abrir el panel Diseo que se sita en el vrtice superior derecho de la pantalla. Como se trabajar con estilos HTML, entonces se activa la ficha correspondiente en ese panel.
Figura 5- 4: Panel Diseo
Para crear un nuevo estilo HTML se selecciona la opcin Texto del men principal y, de su submen, la opcin Estilos HTML, y del nuevo submen se elige la opcin Nuevo. Esto mismo se puede hacer al pulsar el botn situado en la barra inferior del panel Diseo o al pulsar el botn derecho del ratn cuando el cursor est en zona blanca de este
173
5.1 Formato de pginas con estilos HTML
mismo panel y elegir la opcin Nuevo. Aparece la ventana Definir estilo HTML sobre la cual se modifican los campos deseados como aparecen en la Figura 5-5 y al pulsar el botn Aceptar, aparece el nuevo estilo en el panel Diseo.
Figura 5- 5: Ventana Definir estilo HTML
A continuacin se definen nuevos estilos de prrafos: Cabecera1: Anlogo al anterior estilo pero con un 7 en el campo Tamao: y un color verde en el campo Color:. Normal: Arial en campo Fuente:, 3 en campo Tamao:, izquierda en el campo Alineacin: y un color azul oscuro e el campo Color:. NormalCentrado: Anlogo al normal pero con centrado en el campo Alineacin: e I en el campo Estilo:. Para cambiar el aspecto de la pgina basta situar el cursor de texto en el primer prrafo y pulsar el estilo Cabecera2 que hay en el panel Diseo. Igual con el segundo prrafo y el estilo Cabecera1, tercer prrafo y estilo NormalCentrado. Al seleccionar el resto de prrafos y pulsar el estilo Normal, la pgina queda modificada. Estas acciones se pueden realizar igualmente usando el men principal; Texto, Estilos HTML y el estilo adecuado.
Figura 5- 6: Etiquetas de los nuevos estilos.
Cualquier otra modificacin de aspecto de esta pgina consistir en editar cada uno de los estilos creados y hacer las oportunas modificaciones.
174
Figura 5- 7: Nueva apariencia de la pgina
Para editar un estilo basta con situar el cursor del ratn sobre el nombre del estilo en el panel Diseo, pulsar el botn derecho del ratn y elegir la opcin Editar del men emergente. Aparece nuevamente la ventana Definir estilo HTML sobre la que se realizan los cambios.
Notas
Si la caja de aplicacin automtica de estilos de la barra inferior del panel Diseo no estuviese marcada, , entonces el cambio de estilo requiere la accin de aplicar, es decir, seleccionar el estilo y pulsar el botn Aplicar de la mencionada barra, o pulsar el botn derecho del ratn y elegir la opcin Aplicar del men emergente.
5.2 Hojas de estilo CSS Las hojas de estilo son una solucin ms al deseo creciente de separar en una pgina web la parte que constituye su contenido de la parte que indica como se presentan dichos contenidos. Al tener separados estos dos componentes resulta ms fcil realizar modificaciones en la forma de presentar los contenidos pues slo hay que actuar sobre la hoja de estilos. Tambin tiene algn inconveniente, como que no son interpretadas totalmente por los navegadores 3.x ni por Netscape 4.7, y que las muchas pginas diseadas con codificacin HTML deberan ser rediseadas pues no utilizan esta tecnologa. Como se ha mostrado en la seccin anterior, los estilos son definidos esencialmente para texto. Sin embargo, las hojas de estilos tienen ms aplicaciones pues se pueden definir distintos aspectos de los enlaces y la disposicin de una pgina sin usar capas. En estas hojas de estilo se pueden asignar nuevos estilos a las etiquetas existentes (etiquetas HTML) y crear nuevas etiquetas con su nuevo estilo, incluso puede definir clases de etiquetas sobre las que definir un nuevo estilo creado por el usuario. En esta seccin se redefinir una etiqueta HTML, se definir un estilo personalizado o
175
5.2 Hojas de estilo CSS
clase y un estilo relativo a un enlace. Para estas acciones se dispondr del panel Diseo con la ficha Estilo CSS activa.
Figura 5- 8: Vistas del panel Diseo con la ficha Estilos CSS
Se parte de la pgina mostrada en la Figura 5-3, en la cual el primer prrafo es Encabezado2 y centrado, el segundo es Encabezado1 y centrado, el tercero es un prrafo comn centrado, y el resto es prrafo comn.
5.2.1 Redefinicin de una etiqueta HTML en una pgina Para redefinir la etiqueta h1 se selecciona la opcin Texto del men principal y, de su submen, la opcin Estilos CSS, y del nuevo submen se elige la opcin Nuevo estilo CSS. Esto tambin se puede hacer al pulsar el botn situado en la barra inferior del panel Diseo o al pulsar el botn derecho del ratn cuando el cursor est en la zona blanca de este mismo panel y elegir la opcin Nuevo estilo CSS. Igualmente, esto se puede hacer actuando sobre el panel Propiedades al pulsar el botn existente al lado del campo Formato de dicho panel, abrir el campo de eleccin mltiple anexo y optar por la opcin Nuevo estilo CSS.
Figura 5- 9: Vistas del panel Propiedades
Si el cursor de texto estaba situado en el prrafo Encabezado1, entonces aparece la ventana Definir estilo HTML tal y como aparece en la Figura 5-10. Si estaba situada en otro lugar, entonces slo hay que modificar los campos para que queden como en la mencionada figura.
176
Figura 5- 10: Ventana Nuevo estilo CSS
En este caso esta modificacin slo afectar a esta pgina. Al pulsar el botn Aceptar, aparece la ventana Definicin de estilo CSS para..., en la cual hay distintos campos clasificados en ocho categoras. Se modifican los campos con los contenidos que aparecen en las cuatro figuras siguientes.
Figura 5- 11: Contenidos de las cuatro primeras categoras
Las siguientes categoras no se modifican.
177
Figura 5- 12: Categoras no modificadas
Al pulsar el Aceptar, se vuelve a la ventana de trabajo en la cual se ha modificado el aspecto del texto.
Figura 5- 13: Nuevo aspecto de la pgina de trabajo
Notas
Esta redefinicin de la etiqueta h1, se puede editar. Para ello se selecciona Texto + Estilos CSS y, del nuevo submen, Editar hoja de estilos.
Figura 5- 14: Ventana Editar hoja de estilos
178
Esto tambin se puede hacer al pulsar el botn de la barra inferior del panel Diseo o al pulsar el botn derecho del ratn cuando el cursor est en la zona blanca de ese panel y elegir la opcin Editar hoja de estilos. Igualmente, esto se puede hacer con el panel Propiedades al abrir el campo de eleccin mltiple anexo al campo Formato y elegir por la opcin Editar estilo CSS.
5.2.2 Crear un estilo personal en una hoja de estilos Un estilo personal es aqul que puede ser aplicado a distintas etiquetas. En realidad, este tipo de estilo es una clase que modifica cada etiqueta HTML sobre la que acta, es decir un modificador de etiqueta. Para definir un estilo personal se selecciona la opcin Texto del men principal y, de su submen, la opcin Estilos CSS, y del nuevo submen se elige la opcin Nuevo estilo CSS. Esto tambin se puede hacer al pulsar el botn situado en la barra inferior del panel Diseo o al pulsar el botn derecho del ratn cuando el cursor est en la zona blanca de este mismo panel y elegir la opcin Nuevo estilo CSS. Igualmente, esto se puede hacer actuando sobre el panel Propiedades al pulsar el botn existente al lado del campo Formato de dicho panel, abrir el campo de eleccin mltiple anexo y optar por la opcin Nuevo estilo CSS. Aparece la ventana Definir estilo HTML y se modifican los campos Nombre: con la expresin TextoRoman14, que ser el nombre de la clase, el campo Tipo: con el valor Crear estilo person. (clase), y el campo Definir en: con Nuevo archivo de hoja de estilos. Al pulsar el botn Aceptar se abre la ventana Guardar archivo de hoja de estilo como en la que se escribe HojaEstilo1 en el campo Nombre: y se pulsa el botn Guardar.
Figura 5- 15: Ventanas para estilo personal
Aparece la ventana Definicin de estilo CSS para..., en la cual slo se modifican los campos Fuentes: con Times New Roman, Tamao: con 14 pix y Color: con un color azul, correspondientes a la categora Tipos.
179
Figura 5- 16: Contenidos de las cuatro primeras categoras
Al pulsar el Aceptar, se vuelve a la ventana de trabajo y se puede apreciar que tanto en el panel Diseo como en el panel Propiedades est disponible este nuevo estilo.
Figura 5- 17: Vista del panel Diseo
Figura 5- 18: Vista del panel Propiedades
Para comprobar que este estilo personal puede actuar sobre distintas etiquetas, primero se selecciona el prrafo segundo (h1) y se le aplica el estilo TextoRoman14 desde el panel Propiedades. Despus, se seleccionan los prrafos cuarto y quinto (p) y se les aplica este mismo estilo desde el panel Diseo, para ello, se selecciona el estilo, se pulsa el botn derecho del ratn y se elige la opcin Aplicar del men emergente.
180
Figura 5- 19: Nuevo aspecto de la pgina de trabajo
Notas
La redefinicin de la etiqueta h1 y el nuevo estilo TextoRoman14 de HojsEstilo1 quedan referenciados en la cabecera (head) de la pgina. El primero como cdigo en la pgina y el segundo con una referencia a un archivo. En la parte derecha de la Figura 5-20 se puede observar que el segundo estilo afecta a varios prrafos distintos con el mismo modificador.
Figura 5- 20: Vistas de los cdigos de la pgina
5.2.3 Utilizacin de una hoja de estilo El primer estilo creado estaba definido dentro de la misma pgina, mientras que el segundo estaba definido en un archivo aparte de la pgina. Si suponemos que se han diseado diversos estilos, segn estn en la propia pgina o estn en otro archivo, se dir que se trata de hojas de estilo internas o externas. Evidentemente las hojas de estilo
181
externas son de mayor utilidad para el diseador de una web, pues puede utilizar esta misma hoja para distintas pginas. Si los estilos estn definidos en la misma pgina se pueden exportar a una hoja de estilos externa, para ello basta seleccionar la opcin Archivo del men principal y, de su submen, la opcin Exportar, y del nuevo submen se elige la opcin Estilos CSS. Aparece la ventana Exportar estilos como archivo CSS en la que se escribe miHojaEstilos en el campo Nombre: y se pulsa el botn Guardar.
Figura 5- 21: Ventana Exportar estilos
Esta hoja de estilo puede ser editada con cualquier editor de texto, pero tambin puede ser editada con este mismo programa. Para ello slo hay que abrir el archivo mHojaEstilos.CSS. Evidentemente slo se ha exportado el estilo correspondiente a h1.
Figura 5- 22: Vista del archivo miHojaEstilos.CSS
Si se copia el bloque correspondiente a esta definicin, ste puede ser pegado en la hoja externa que utilizamos en el Apartado 5.2.2. Se pega una primera vez y otra ms cambiando la expresin h1 por h2 (como otro modificador de etiquetas HTML).
182
Figura 5- 23: Vista de las modificaciones en HojaEstilo1.CSS
Basta guardar estos cambios y abrir de nuevo la pgina para ver el nuevo aspecto.
Figura 5- 24: Aspecto final de la pgina
183
6.1 Pginas dinmicas En general, la informacin suele ser esttica en una pgina web, es decir, al usuario se le presenta la informacin tal y como la ide el autor de la pgina. En cualquier pgina web se puede incorporar uno o varios efectos dinmicos que la dotan de una cierta interactividad con el usuario. Este efecto se puede conseguir con algn tipo de botn, alguna imagen o alguna capa, de esta manera se logra modificar el aspecto de la pgina en relacin con la actuacin del ratn del usuario navegante. En esencia, la informacin no deja de ser esttica en una pgina de este tipo, es decir, la informacin no cambia. Sigue ocurriendo que dicha informacin es la que se introdujo en el momento de su creacin o ltima modificacin. Se hace necesario editar dicha pgina para actualizar nuevamente toda la informacin. Un caso distinto es el de aquellas pginas que al ser accedidas con el navegador, se reconstruyen automticamente con informacin procedente de distintas fuente. En realidad el navegador no accede a la pgina que el administrador dise. Se accede a una pgina que el servidor recompone temporalmente utilizando como modelo la pgina supuestamente accedida. Concretamente, el servidor crea y enva una pgina no almacenada en el servidor. Para ello utiliza la informacin obtenida o generada a partir de alguna aplicacin o programa. Como ejemplo pensemos en el acceso (va web) a una biblioteca en busca de los libros disponibles de un autor. El servidor de pginas de la biblioteca enviar como respuesta cualquier solicitud, una pgina con los registros de libros de existentes en esa biblioteca relativos al autor solicitado. Estableciendo alguna marca sobre aquellos libros que estn disponibles para el usuario en ese momento. Evidentemente, si una consulta no dispone de datos obtenidos en tiempo real, el acceso a la base de datos de libros de la biblioteca no tendr ninguna utilidad. A una pgina de este tipo que permite dar respuesta a problemas similares al de la consulta bibliotecaria, es lo que nos referimos como pgina dinmica.
Tema
Bases de datos
En este tema se presenta un ejemplo que nos permite observar una forma de crear pginas que hacen uso de los datos de una base datos almacenada en un servidor de aplicaciones web.
101
6 Bases de datos
6.2 Servidor de pginas Al confeccionar una pgina dinmica se necesita introducir algn conjunto de instrucciones escritas en un cdigo adecuado dentro de la pgina (algo similar a una cierta programacin). Con independencia del lenguaje empleado para escribir las instrucciones, estas instrucciones son interpretadas por un navegador como puro texto o simplemente como comentario. Por ello, es necesario que el servidor web que enva una pgina dinmica no sea simplemente un servidor de pginas HTML, es decir, sea un servidor de este tipo de pginas. En definitiva que disponga de la facultad de interpretar las pginas antes de enviar la interpretacin de la pgina. Esta facultad se suele expresar como que el servidor web es adems un servidor de aplicaciones en el lenguaje correspondiente. Como ejemplo podemos indicar que un servidor gestionado con Internet Information Server de Microsoft permite servir pginas HTML y pginas ASP, es decir, es un servidor web y un servidor de pginas activas (Active Server Pages). Dreamweaver es un buen editor de este tipo de pginas y facilita insertar determinadas instrucciones en aquellos lugares de la pgina que se reservan para presentar los datos que se obtendrn en tiempo real. El usuario de este editor puede trabajar con facilidad haciendo uso de las herramientas correspondientes a diferentes tipos de cdigos o de lenguajes como ASP (Servidor de Pginas Activas), JSP (Servidor de Pginas Java) y otros. Crear la pgina activa es slo una parte del trabajo que hay que hacer. La otra parte es publicar esa pgina en un servidor, que no siempre depende del diseador de la pgina. Una vez diseada y editada una pgina dinmica, est debe estar disponible sobre un servidor adecuado. Si el dinamismo de las pginas se desarrolla con acceso a datos usando cdigo Javascritp, entonces el servidor web debe disponer de la capacidad de servir pginas ASP Javascritp. No sirve de nada disear pginas dinmicas y situarlas sobre un servidor que no tiene la capacidad de recomponer las pginas, pues en ese caso, quizs slo mostrara parte del cdigo en el mejor de los casos. A la hora de editar una pgina dinmica con Dreamweaver debe establecerse el sitio donde se almacenarn las pginas. Esto se puede hacer de varias formas. Una de ellas es la que mostramos usando el men principal, otras es usando el botn de texto sitio que aparecen en la ficha Depuracin del servidor del panel Resultados situado en la parte inferior de la pantalla. Una forma mas es utilizando el botn de texto sitio que aparecen en la ficha Bases de datos del panel Aplicacin cuando no hay definida ninguna base.
Figura 5- 1: Panel Resultados
Para establecer el sitio se selecciona la opcin Sitio del men principal y, de su submen, la opcin Nuevo sitio. Al aparecer la ventana Definicin del sitio para... con la ficha Avanzadas activa. La otra ficha de esta ventana, Bsicas, permite establecer el sitio siguiendo un conjunto de ventanas a modo de asistente para definir el sitio.
102
6.2 Servidor de pginas
Figura 5- 2: Ficha Bsicas para definir el sitio
Para declarar donde se almacenarn los archivos que se crearn se elige la opcin Datos locales dentro del cuadro Categora. A la derecha se muestran los campos que deben ser modificados. Escribimos MiSitio en el campo Nombre del sitio: y el nombre completo de la carpeta de almacenamiento en el campo Carpeta raz local:
Figura 5- 3: Declaracin sitio local
Para declarar donde el lugar de hospedaje en el servidor de estos archivos se elige la opcin Datos remotos dentro del cuadro Categora. A la derecha se muestran los campos que deben ser modificados. Elegimos el tipo de acceso al servidor entre los valores establecidos en el campo Acceso: y el nombre completo de la carpeta de almacenamiento
103
6 Bases de datos
en el campo Carpeta remota:
Figura 5- 4: Declaracin sitio remoto
A la hora de disear una pgina dinmica se deben hacer pruebas y ajustes de manera que se retoque aquello que no funciona correctamente o no est al gusto del editor. Esto requiere disponer de un servidor de pruebas que puede estar sobre el propio servidor. Para declarar un servidor de pruebas se elige la opcin Servidor de pruebas dentro del cuadro Categora. A la derecha se muestran los campos que deben ser modificados. Elegimos el valor ninguno en el campo Acceso: y ASPJavaScript en el campo Modelo de servidor:
Figura 5- 5: Declaracin sitio remoto
104
6.3 Edicin de una pgina dinmica
6.3 Edicin de una pgina dinmica Como ejemplo de pgina dinmica, se desarrollar una pgina activa con el acceso a la base de datos que incorpora el programa Dreamweaver al ser instalado, utilizando como cdigo de programacin el lenguaje JavaSript. Para crear una nueva pgina dinmica se selecciona la opcin Archivo del men principal y, de su submen, la opcin Nuevo. Al aparecer la ventana Nuevo Documento con la ficha General activa, se elige Pgina activa en el campo Categora:, ASP JavaSript en el campo Pgina dinmica: y se pulsa el botn Crear.
Figura 5- 6: Ventana Nuevo Documento
El control vuelve a la ventana de edicin con una pgina en blanco, supuesto que est activo el botn Mostrar vista de diseo, . Puede verse el cdigo JavaScriptal pulsar el botn Mostrar vista cdigo, .
Figura 5- 7: Vista cdigo
En esta pgina en blanco insertaremos un prrafo con el mensaje La informacin que se muestra en esta pgina est obtenida de una base de datos con el fin de recordar al navegante que la pgina que visita es una pgina activa y que se construye con los datos
105
6 Bases de datos
obtenidos de una base de datos. Al crearse la pgina de extensin asp, se despliega el panel Aplicacin, a la derecha de la ventana de edicin, sobre el cual se muestra el botn como nico botn operativo en dicho panel. Si se pulsa con el ratn sobre dicho botn, se abre un men desplegable con dos opciones. En este men elegimos la opcin Nombre de la fuente de bases de datos (DSN) para poder hacer la conexin a la base de datos.
Figura 5- 8: Panel Aplicacin
Aparece la ventana Nombre de fuentes de datos (DSN), en la cual slo se modifican los campos Nombre de conexin: con la palabra MiBase, Nombre de fuente de datos(DSN): con la base GlobalCar que debe ser buscada al pulsar el botn Definir.
Figura 5- 9: Ventana Nombre de fuente de datos
Conviene comprobar que la conexin definida est correctamente establecida. Para ello basta pulsar el botn Prueba. Una vez superada la prueba de conexin se enva un mensaje al usuario de ese hecho, se continua pulsando el botn Aceptar, con lo cual se vuelve a la ventana de edicin. Ahora, la conexin MiBase aparece (comprimida) sobre en el panel Aplicacin. Expandimos MiBase para ver las tablas, las vistas y los procedimientos que lo constituyen, y que podremos utilizar dentro de la pgina.
106
Figura 5- 10: Panel Aplicacin con una base de datos
Si se desea insertar la tabla COMMENTS visible en el nudo Tablas del panel Aplicacin dentro de nuestra pgina, basta arrastrar el icono de dicha tabla sobre la pgina. Al soltarlo aparece la ventana Juego de registros, sobre la cual se modifican los siguientes campos: - Campo Nombre: con la expresin TablaRegistros1 - Campo Columnas: con el valor excluyente Seleccionado - Se seleccionan del men de campos, los campos de la tabla COMMENT_ID, FIRST_NAME, LAST_NAME, TELEPHONE y EMAIL
Figura 5- 11: Ventana Juego de registros
Siempre conviene comprobar que la correcin del proceso establecido, pulsando el botn Prueba, con lo que se muestra la ventana Declaracin SQL de prueba.
107
6 Bases de datos
Figura 5- 12: Ventana Declaracin SQL de prueba
Una vez superada la prueba se vuelve a la ventana Juego de registros, se pulsa el botn Aceptar, apareciendo un mensaje informativo sobre
Figura 5- 13: Ventana de confirmacin del juego de registros
En la ventana de edicin se observa que se insert cdigo Javascript en la cabecera de la pgina relativo a la tabla de datos. Esto queda reflejado al ser dicha tabla en el panel Propiedades de la parte inferior de la pantalla.
Figura 5- 14: Panel Propiedades con informacin de la tabla
108
Figura 5- 15: Vista de la pgina con cdigo
Al mirar sobre en el panel Aplicacin aparece activa la ficha Vinculaciones con la referencia TablaRegistos1 (comprimida), que expandiremos para ver los campos que podremos utilizar dentro de la pgina. Una vez visibles los campos, cada uno de estos pueden ser insertado directamente en la pgina con nada ms que arrastrar el icono del campo sobre la pgina y soltarlo en ella.
Figura 5- 16: Campo insertado
Una vez terminada y guardada la pgina se puede comprobar como queda el aspecto de la pgina al acceder con el navegador pulsando la tecla F12.
Notas
Si no se tiene declarado acceso un servidor de pruebas, como es el caso, o se dispone de
109
6 Bases de datos
una ruta de acceso incorrecta a l, entonces no podr ver la pgina adecuadamente. De cualquier forma, Dreamweaver muestra una ventana informativa para que indicar si se declara en ese momento el servidor de pruebas o no.
Figura 5- 17: Mensaje sobre el servidor de pruebas
En el caso de contestar no, se muestra simplemente el cdigo.
Figura 5- 18: Vista pgina
110

Modulo I D - Dreamweaver

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Modulo I D - Dreamweaver

Încărcat de

Drepturi de autor:

Formate disponibile

Indice General

Mdulo I Editor de documentos HTML

Tema 1 Tema 2 Tema 3 Tema 4 Tema 5 Tema 6

0.0.1 Introduccin al Dreamweaver........................................1

Figura 1- 1: Pantalla de bienvenida del Dreamweaver

Figura 1- 2: Configuracin del espacio de trabajo 2

1.2 Explorando Dreamweaver

Figura 1- 3: Ventana de preferencias

Figura 1- 4: Ventana de Dreamweaver

Figura 1- 5: Barra Insertar

1.2 Explorando Dreamweaver

Figura 1- 6: Barra de Herramientas

Figura 1- 7: Inspector de propiedades

Figura 1- 8: Men Ventana

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran

Figura 1- 9: Barra de mens

1.3 Ayuda de Dreamweaver

Figura 1- 10: Men de Ayuda

Figura 1- 11: Ventana de Ayuda de Dreamweaver

Figura 1- 12: Asistente para Ayuda

El Indicio, como cualquier ndice impreso tradicional, permite consultar trminos o

1.3 Ayuda de Dreamweaver

Figura 1- 13: Ventana ndice

Figura 1- 14: Ventana Favoritos

Figura 1- 15: Icono de interrogacin

Figura 1- 16: Panel de Referencias

Crear Pginas Web

2 Crear Pginas Web

2.1 Creando un primer documento

Figura 2- 1: Men Sitio

Aparece el cuadro de dilogo Definicin del sitio. (Figura 2-2).

Figura 2- 2: Definicin del sitio

2 Crear Pginas Web

Figura 2- 3: Definicin de Sitio

2.1 Creando un primer documento

Figura 2- 4: Dialogo Definicin de Sitio

2 Crear Pginas Web

Figura 2- 5: Dialogo Definicin de Sitio

Figura 2- 6: Dialogo Definicin de Sitio

2.1 Creando un primer documento

Figura 2- 7: Ventana de Sitio

Figura 2- 8: Pgina Sumario

2 Crear Pginas Web

Figura 2- 9: Ventana de Sitio

Figura 2- 10: Ventana Sitio despus de incorporar los ficheros

2.1 Creando un primer documento

Figura 2- 11: Documento sumrio.htm

Figura 2- 12: Ventana Propiedades de la pgina

2 Crear Pginas Web

Figura 2- 13: ventana con el inspector de Propiedades

Figura 2- 14: Documento Sumario

Figura 2- 15: Botn de sangra de texto

Es fcil observar que el prrafo se ha acortado por el borde izquierdo.

2.1 Creando un primer documento

Figura 2- 16: Botn de Vista previa

2 Crear Pginas Web

Para crear la segunda pgina, como la que aparece en la Figura 2-17,

Figura 2- 17: Pgina de Mini Coches

2.1 Creando un primer documento

Figura 2- 18: Pgina con cambio de estilo de palabras

Figura 2- 19: Ventana de texto

2 Crear Pginas Web

Figura 2- 20: Pgina una vez insertad la imagen

Figura 2- 21: Pgina con las dos imgenes insertadas