Indice General

Módulo I Editor de documentos HTML

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

0.0.1 Introducción al Dreamweaver........................................1

Crear Páginas Web.........................................................11 Trabajar con Elementos Dinámicos..............................59 Capas...............................................................................79 Hojas de Estilo.................................................................89 Bases de Datos ..............................................................101

I

Tema

1

Introducción al Dreamweaver MX

En este tema se explicarán los conceptos básicos 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 dónde se desea instalarlo y qué tipo de instalación se desea. Esta decisión tendrá en cuenta las opciones que son necesarias y la cantidad de espacio libre que hay en el disco duro.

Instalación 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 más rápido 2) Windows 98, Windows 2000, Windows NT (con Service Pack 3 o posterior), Windows ME o Windows XP 3) La versión 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 resolución de 800 x 600 píxeles (se recomienda disponer de un monitor de millones de colores capaz de mostrar una resolución de 1024 x 768 píxeles)
1

1 Introducción 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 diálogo, haga clic en Instalar Dreamweaver para comenzar la instalación.

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 disposición integrada en la que todo se incluye en una sola ventana y una disposición flotante muy semejante a la de Dreamweaver 4. La primera vez que inicie Dreamweaver aparece un cuadro de diálogo que permite elegir una disposición para el espacio de trabajo. Si cambia de idea posteriormente, podrá· cambiar a otro espacio de trabajo distinto a través del cuadro de diálogo Preferencias (Figura. 1-3)

Figura 1- 2: Configuración 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 múltiples documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles están integrados en una misma ventana de aplicación, con los grupos de paneles apilados a la derecha. Recomendado para la mayoría 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 Código. Recomendado para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban código manualmente que deseen contar con una disposición del espacio de trabajo que les resulte familiar. Para elegir esta disposición, seleccione la opción Espacio de trabajo de Dreamweaver MX y luego elija la opción HomeSite/Estilo de codificador. Espacio de trabajo de Dreamweaver 4 es una disposición de espacio de trabajo similar a la utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los grupos de paneles están apilados, pero no en una ventana de aplicación de tamaño superior que los contenga. Recomendado sólo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio de trabajo que les resulte más 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 botón Inicio, elegir Programas y hacer clic en Macromedia Dreamweaver dentro de la Carpeta de Macromedia.
3

1 Introducción al Dreamweaver MX

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 configuración del espacio de trabajo para distintos fines e información 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 inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código
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 menús emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención 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 común. Para ampliar un grupo de paneles, hacer clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrástrarlo por los puntos situados en el borde izquierdo de la barra de título del grupo. El panel Sitio permite administrar los archivos y carpetas que forman el sitio. También 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

Sólo es necesario ir a 6 . El menú Ventana proporciona acceso a todos los paneles. inspectores y ventanas de Dreamweaver. además de información de referencia para diversos lenguajes. El menú Modificar permite cambiar las propiedades del elemento de página seleccionado. uno para aplicar formato al código en función de las preferencias de formato. abrir y editar sitios. El menú Texto permite aplicar formato al texto fácilmente. El menú Edición incluye comandos de selección y búsqueda. Abrir. El menú Edición también proporciona acceso a Preferencias. Guardar.1 Introducción al Dreamweaver MX aquí.9: Barra de menús El menú Archivo y el menú Edición contienen los elementos de menú estándar para estos menús.3 Ayuda de Dreamweaver Durante todas las fases del trabajo es posible obtener ayuda. El menú Insertar ofrece una alternativa a la barra Insertar para la inserción de objetos en el documento. cambiar las tablas y elementos de tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas. incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creación de extensiones para Dreamweaver. como el panel Historial y el Inspector de código. como Nuevo. El menú Sitio proporciona opciones de menú para crear. Para abrir paneles. A través de este menú. entre otros. 1. El menú Archivo también contiene otros comandos para la visualización o manipulación del documento actual. Barra de menús La barra de menús contienen todas la funciones que el programa puede proporcionar. El menú Ver permite obtener diversas vistas del documento (como la vista Diseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página y herramientas de Dreamweaver. otro para crear un álbum de fotos y otro para optimizar una imagen empleando Macromedia Fireworks. Cada menú incluye una lista de comandos relacionados con el título del menú. El menú Ayuda proporciona acceso a la documentación de Dreamweaver. puede editar los atributos de etiquetas. Figura 1. Existen varios menús colocados en la barra superior de la ventana de Dreamweaver. inspectores y ventanas de Dreamweaver. utilizar el menú Ventana. y proporciona acceso al editor de Métodos abreviados de teclado y al Editor de la biblioteca de etiquetas. El menú Comandos proporciona acceso a diversos comandos. Copiar y Pegar. como Vista previa en el navegador e Imprimir código. Cortar. como Seleccionar etiqueta padre y Buscar y reemplazar.

escribir preguntas o usar palabras clave para buscar en un índice de la Ayuda (Figura 1-18).11: Ventana de Ayuda de Dreamweaver 7 .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 opción Utilización del Dreamweaver de Ayuda o pulsando sobre la tecla F1. Existe ayuda de las formas siguientes: Figura 1.3 Ayuda de Dreamweaver Ayuda de la barra de menús.1. 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. 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. Se presenta en una ventana de dos paneles. Figura 1.

extensiones y notas técnicas. Hacer clic en las entradas de nivel superior para ver otros temas subordinados. panel o inspector. como cualquier Índice impreso tradicional. haga clic en el botón Ayuda en un cuadro de diálogo o elija Ayuda en el menú Opciones en la barra de título de un grupo de paneles.1 Introducción al Dreamweaver MX El Contenido permite ver toda la información organizada por temas. del tipo "Cómo abrir un documento en un marco" y. Seleccionando la ventana de búsqueda. Buscar permite localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de ayuda. Además proporciona acceso a tutoriales. Para ver la ayuda contextual. La ventana Contenido permite ver toda la información organizada por temas.12: Asistente para Ayuda El Indicio. a continuación. Buscar permite localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de ayuda. aparece un sistema de búsqueda contextual que permiten hacer preguntas con sus propias palabras. artículos. como cualquier Índice impreso tradicional. Figura 1. Los botones de flecha izquierda y derecha permiten acceder al tema anterior o siguiente de una sección (siguiendo el orden de los temas establecido en el contenido). Cada tema de ayuda contiene botones que se utilizan para pasar de un tema a otro. presenta una lista de los temas de Ayuda relacionados con la pregunta (Figura 1-19). La Ayuda contextual ofrece un método para abrir el tema de ayuda pertinente desde cualquier cuadro de diálogo. El Índice. Hacer clic en las entradas de nivel superior para ver otros temas subordinados. permite consultar términos o 8 . También puede hacer clic en el icono de interrogación de un inspector o cualquier otro tipo de ventana. permite consultar términos o conceptos concretos.

panel o inspector. Seleccionando la ventana Índice. presenta una lista de los temas de Ayuda relacionados con la palabra clave (Figura 1-13).14: Ventana Favoritos La Ayuda contextual ofrece un método para abrir el tema de ayuda pertinente desde cualquier cuadro de diálogo. Figura 1. También se puede hacer clic en el icono de interrogación de un inspector o cualquier otro tipo de ventana. (Figura 1-15). podrá agregar pulsando sobre el botón Agregar aquellos temas o artículos que desee guardar como favoritos (Figura 1-14). a continuación.1. Para ver la ayuda contextual. aparece un sistema de búsqueda que permite introducir palabras claves. 9 .3 Ayuda de Dreamweaver conceptos concretos. Figura 1.13: Ventana Índice Seleccionando la ventana Favoritos. del tipo “archivo” y. hacer clic en el botón Ayuda en un cuadro de diálogo o élegir Ayuda en el menú Opciones en la barra de título de un grupo de paneles.

15: Icono de interrogación Referencia Si se accede en la ayuda a la opción Referencia. Objeto o Estilo muestra la etiqueta. Aparecerá el panel Referencia.16: Panel de Referencias El menú emergente Etiqueta. que muestra una descripción de la etiqueta seleccionada.1 Introducción al Dreamweaver MX Figura 1. La selección predeterminada es Description. objetos JavaScript y estilos CSS y sus atributos. También puede seleccionar un atributo del menú para ver más información sobre el mismo. También se puede acceder a esta ayuda pulsando sobre la tecla Mayús+F1 Figura 1. 10 . el objeto o estilo seleccionado en la vista Código. en el zona de la ventana correspondiente a grupos de paneles. Ofrece una herramienta de consulta rápida de lenguajes de formato. Proporciona información sobre etiquetas. Objeto o Estilo hay otro menú que contiene la lista de atributos de la etiqueta elegida. Junto al menú emergente Etiqueta. objetos o estilos específicos con los que está trabajando en la vista Código.

En este tema se aprenderá a: • Crear documentos Web. • Manejar listas y tablas. una barra de exploración. • Visualizar y editar documentos en HTML. Mientras se modifican las páginas tal y como haría en un procesador de textos (escribiendo y dando formato al texto y agregando gráficos. Sin embargo. Dreamweaver es un editor de páginas Web en el que no es necesario tener conocimientos sobre HTML para utilizarlo. Sin embargo. Dreamweaver agrega las etiquetas HTML en segundo plano. muchas características de Dreamweaver sólo son útiles si se trabaja en un Web. • Establecer marcos 11 . Las páginas pueden formar parte de un Web o utilizarse de manera independiente. • Crear formularios. que permite al visitante del sitio explorar otras páginas de un sitio Web. La página se mostrará tal como aparecería en un explorador de Web. tablas y otros elementos a la página). Por ejemplo. no tiene sentido en el contexto de una única página. es posible mostrar las etiquetas HTML en la página y el usuario puede escribir y modificar las etiquetas HTML.Tema 2 Crear Páginas Web Las páginas son los documentos básicos del World Wide Web y se escriben en formato HTML.

se cargan en el sitio remoto. 4. lo primero que hay que hacer es crear un sitio Web. El ejemplo lo tomaremos de las páginas de La Revista del diario El Mundo..Crear enlaces a otras páginas Web y a marcadores dentro de la misma página. a continuación. La definición del sitio se crea utilizando el cuadro de diálogo Definición del sitio. Se puede usar este cuadro de diálogo en una de estas dos vistas: Básicas o Avanzadas. Un sitio remoto: archivos del servidor que componen un sitio Web desde el punto de vista del autor. sin embargo.2 Crear Páginas Web 2.Insertar figuras dentro del texto.. no del visitante. La 12 . Se editan los archivos en el disco local y.Editar texto y cambiar sus propiedades. La creación de un sitio Web suele comenzar con la planificación: se determina cuántas páginas se van a crear. por lo que no requiere mucha planificación: constará sólo de dos páginas Web con vínculos entre ellas. Para crear una página Web con Dreamweaver.1 Creando un primer documento A partir de un primer documento con dos páginas Web aprenderá a: 1. Notas En Dreamweaver.. Un sitio local: archivos del disco local que corresponden a los archivos del sitio remoto. el sitio que estamos creando es muy sencillo.Crear una página Web. 2. Por tanto. el término sitio se emplea para referirse a cualquiera de los siguientes conceptos: Un sitio Web: serie de páginas en un servidor que el visitante ve utilizando un navegador Web. 3. En esta sección. se puede omitir el proceso de planificación para este sitio y pasar a crear una definición del sitio. qué contenido aparecerá en cada página y cómo se conectarán las páginas entre sí..

que también se denomina Asistente para la definición del sitio. Si prefiere editar información del sitio sin esta orientación. Para definir un sitio: 1) Elegir Definir Sitio de Sitio. Para obtener información sobre la definición de las opciones de la versión Avanzadas. (Figura 2-2). Figura 2.2.1: Menú Sitio Aparece el cuadro de diálogo Definición del sitio. introducir un 13 . a continuación. puede hacer clic en la ficha Avanzadas en cualquier momento. En el cuadro de texto. hacer clic en la ficha Avanzadas y. El procedimiento siguiente describe cómo configurar las opciones de la versión Básicas del cuadro de diálogo.1 Creando un primer documento opción Básicas orientará paso a paso a lo largo del proceso de configuración del sitio.2: Definición del sitio Aparecerá la primera pantalla del asistente para la Definición del sitio solicitando que se introduzca un nombre para el sitio. en el botón Ayuda. (Figura 2-1). Figura 2.

Figura 2. Microsoft ASP. 3) Hacer clic en Siguiente para continuar con el paso siguiente. sin páginas dinámicas (Figura 2-3). se deberá elegir un tipo de documento dinámico ó como Macromedia ColdFusion. Seleccionar la opción con la etiqueta Editar localmente y luego cargar al servidor de prueba remoto. Si desea configurar un sitio para crear una aplicación Web. 14 . Aparecerá la siguiente pantalla del Asistente preguntando si desea trabajar con una tecnología de servidor. Aparecerá la siguiente pantalla del Asistente preguntando cómo se desea trabajar con los archivos. Microsoft Active Server Pages (ASP). 2) Hacer clic en Siguiente para continuar con el paso siguiente. En este caso lo llamaremos Mundo.3: Definición de Sitio Seleccionar la opción No para indicar que el sitio es estático por el momento.2 Crear Páginas Web nombre que identifique el sitio en Dreamweaver. Sun JavaServer Pages (JSP) o PHP: Hypertext Preprocessor (PHP). y posteriormente suministrar información sobre el servidor de aplicaciones.NET. Se puede elegir el nombre que se desee.

Aparecerá el cuadro de diálogo Elegir la carpeta raíz local para el sitio. Es más sencillo especificar un nombre de carpeta exacto utilizando Examinar en lugar de escribir la ruta. 15 . Por tanto.4: Dialogo Definición de Sitio El cuadro de texto permite especificar una carpeta del disco local donde Dreamweaver deberá almacenar la versión local de los archivos del sitio (Figura 2-4).2. comenzar accediendo a una carpeta del disco local donde almacenar todos los sitios. Elija Ninguno en el menú emergente (Figura 2-5).1 Creando un primer documento Figura 2. En el cuadro de diálogo Elegir la carpeta raíz local para el sitio. hacer clic en el icono de carpeta situado junto al cuadro de texto. 4) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecerá la siguiente pantalla del Asistente preguntándole cómo se conecta al servidor remoto.

El icono tiene la etiqueta Escritorio (Windows).5: Dialogo Definición de Sitio 5) Hacer clic en Siguiente para continuar con el paso siguiente. Aparecerá la siguiente pantalla del asistente mostrando un resumen de la configuración (Figura 2-6). El panel Sitio muestra ahora la nueva carpeta raíz local para el sitio actual y un icono que permite ver todos los discos locales en una vista jerárquica de árbol. En la ventana de Sitio aparecerá el sitio creado (Figura 2-7).6: Dialogo Definición de Sitio Hacer clic en Listo para terminar. 16 .2 Crear Páginas Web Figura 2. Figura 2.

Figura 2. Sitio actúa como administrador de archivos.2. Figura 2. pero ahora mismo el sitio no contiene ningún archivo ni carpeta.7: Ventana de Sitio Ahora vamos a crear una página que llamaremos Sumario. se creará la página de la Figura 2-5. ya que permite copiar. eliminar. En esa página que llamaremos Sumario.8: Página Sumario En primer lugar se crea una carpeta en el Sitio para guardar imágenes. a la que llamaremos Imágenes (Figura 2-9). 17 . mover y abrir archivos como si se tratara del escritorio del PC.1 Creando un primer documento El panel Sitio suele mostrar todos los archivos y las carpetas del sitio. Para ello pone el cursor sobre Sitio-Mundo y se pulsa el botón derecho del ratón y se elige del menú que aparece la opción Nueva carpeta. pegar.

Copiar los textos que hay en la carpeta Mundo del CD-Rom sobre la carpeta Textos del Sitio-Mundo (Figura 2-10). escoger las imágenes que hay en la carpeta Mundo y copiarlas sobre la Carpeta Imágenes que se ha creado.10: Ventana Sitio después de incorporar los ficheros Ahora vamos a crear un página en blanco en donde escribiremos el texto de la Figura 2-8. pulsar el botón derecho del ratón y elegir del menú que aparece la opción Nuevo archivo. Crear ahora en el Sitio-Mundo una nueva carpeta y llamarla Texto.9: Ventana de Sitio Ir a través del Escritorio de Sitio a la carpeta que esta en el CD-Rom titulada Dreamweaver Tutorial. para ello poner el cursor sobra la carpeta Sitio-Mundo.2 Crear Páginas Web Figura 2. al que denominaremos sumario. Si se pulsa sobre el archivo creado aparecerá un Documento sin Título en blanco con el nombre se Mundo/sumario. 18 . Figura 2.

A continuación. el cursor en medio del espacio en blanco.). para ello ponre el cursor sobre la ventana en blanco y pulsar el botón secundario del ratón. Se abrirá la ventana Propiedades de página y en ella. para ello hay que seguir los siguientes pasos: 1) Escribir el texto que aparece en la Figura 2-8 2) Seleccionar "2001.htm Ahora es posible cambiar el nombre de la página por “Sumario”.11: Documento sumrio.2. colocando en primer lugar.1 Creando un primer documento Figura 2. Cómo en 19 . Los pasos a seguir serán los mismos que con la figura anterior. Figura 2.gif" de Imágenes de Sitio-Mundo y arrastrarla con el ratón sobre comienzo de la palabra Generación. dentro de la etiqueta Título se escribirá la palabra Sumario. dejar cuatro líneas de espaciado entre el primer y el segundo párrafo para colocar ahí la siguiente figura. (Figura 2-12). pulsar Aceptar.12: Ventana Propiedades de la página Ahora vamos a trabajar sobre el documento sumario. elegir Propiedades de la página.

20 .14: Documento Sumario 5) Marcar el párrafo Santiago Calatrava y en ir al Inspector de propiedades y seleccionar Sangría de texto (Figura 2-13). marcar la figura e ir al Inspector de propiedades y seleccionar Alinear saldrá una venta en donde se puede elegir Derecha (Figura 2-13).2 Crear Páginas Web esta ocasión.13: ventana con el inspector de Propiedades 3) Colocar el cursor al comienzo de la línea Mini coches e insertar ahí la imagen "coche. Figura 2. 4) Figura 2.15: Botón de sangría de texto Es fácil observar que el párrafo se ha acortado por el borde izquierdo. se quiere que la figura "ilustra.gif" se situé a la derecha de la página.gif" seleccionando Izquierda en la opción de Alinear (Figura 2-12). Figura 2.

2. Existen dos partes en un enlace. Figura 2. imagen.Al trabajar con imágenes en un sitio web es importante saber que los archivos que se manejan en Internet son de dos clases: . El formato . película o sonido). se puede hallar en cualquier parte de la Internet. y gráficos con menos de 256 colores. 9) Ya se puede comprobar cómo ha quedado la página (Figura 2-8). Los documentos WWW son todos ellos documentos con enlaces. utiliza menos colores.16: Botón de Vista previa 8) Aparecerá una ventana en donde se puede escoger el explorador. del menú Archivo Notas 1. El usuario puede activar ese ancla al señalar el cursor y pulsar con el ratón. sino que utiliza colores planos.gif. 21 . Al activar el enlace cualquier cosa a la que haga referencia aparecerá en la pantalla. se puede ver como queda en el explorador seleccionando (ver Figura 2-16). El formato .1 Creando un primer documento 6) Se pueden cambiar los colores tanto del fondo como del texto para ello sólo habrá que pulsar con el botón derecho del ratón cualquier punto de la página y escoger Propiedades página. HTML consta de comandos que permiten hacer enlaces a un documento. La segunda parte de un enlace es el marcador o ancla. una imagen. También se pueden usar para fotos pero la calidad será peor. una de ellas es la referencia al elemento relacionado (que puede ser un documento. a imágenes. Además de sus comandos de descripción de documentos. que al utilizar este formato comprimido.jpeg se utiliza para fotografías. Los enlaces son simples referencias a otros documentos. 7) Lo único que queda por hacer es comprobar el resultado. elegir Guardar. ahí seleccionar la ficha Fondo y cambiar los párametros de las etiquetas Fondo y Texto (ver Figura 2-12).jpeg . a sonidos o a animaciones. Para grabar la página. se utiliza para títulos. El elemento al que se hace referencia se puede encontrar dentro del documento en curso o. etc. un grupo de palabras. Seleccionando Vista Previa de la Barra de herramientas.2. logotipos. Si el fichero no es de fotografía. por el contrario. pero no referencias estáticas sino verdaderos enlaces activos..Una de las características determinantes de cualquier documento Web son los enlaces.. El autor de un documento puede definir que el marcador sea una palabra.gif y .

Figura 2. Para crear la segunda página. Seleccionarlas e ir a Inspector de propiedades y elegir en la caja Alineación Centro. ya que al hacer esto. Para cambiar el tamaño. seleccionar la imagen y con el Inspector de Propiedades y modificarla hasta el tamaño deseado. Otro punto importante es que nunca es conveniente insertar una imagen grande. La cuestión es que un fichero de fotografía ocupa muchísimo espacio (una pantalla viene a ser 1.2 Crear Páginas Web ocupan menos aunque baja un poco la calidad. aunque sea a costa de un poco de calidad.htm. como la que aparece en la Figura 2-17. 22 . 2) Escribir las tres primeras líneas de la Figura 2-17. para luego achicarla. Cambiar el nombre del documento mediante Propiedades de página escribiendo Mini Coches. Una buena razón de compresión es de un 75 %.5 Mb) y es necesario reducirlo. se achica la imagen que se ve en pantalla pero no el tamaño del archivo.17: Página de Mini Coches habrá que realizar los siguientes pasos: 1) Crear una nuevo archivo en Sitio-Mundo con el nombre de minicoches.

18: Página con cambio de estilo de palabras 4) Ir a Sitio-Mundo del menú pulsar dos ves con el ratón sobre el fichero texto1. ir al Inspector de propiedades botón Formato y elegir Encabezados 2. Figura 2.gif". La imagen se insertará en lado izquierdo (Figura 2-20). seleccionar el texto y copiarlo.1 Creando un primer documento 3) Seleccionar la primera línea. (Figura 2-18). Seleccionar la segunda línea. Figura 2. aparecerá una ventana de documento nueva con una barra oscura en la parte inferior izquierda.2. Marcar la imagen y Seleccionar Alinear izquierda del menú Alinear del Inspector de propiedades. 23 . ir al botón Formato y elegir Encabezados 1.txt.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 párrafos e insertar en él la imagen "antecede. y hacer clic sobre el botón Cursiva. Seleccionar la tercera línea.

20: Página una vez insertad la imagen 7) Ir al final del texto y dejar una línea en blanco.gif. habrá que ir a la primera línea de la página y seleccionar allí la palabra Mini. A continuación. pulsar sobre el botón de Aceptar de esta forma se habrá creado un anclaje o marcador. Figura 2. dejando un espacio en blanco entre ellas.2 Crear Páginas Web Figura 2. seleccionar ambas imágenes y pulsar sobre el botón Alinear a la derecha en el Inspector de propiedades (Figura 2-25). 2-23). A continuación.gif y volver. elegir Punto de fijación con nombre que aparece en la Barra de insertar (Figura 2-22).22: Botón de Punto de fijación con nombre en la ventana que aparece escribir la palabra la palabra mini. Figura 2. 24 .21: Página con las dos imágenes insertadas Para crear un anclaje o marcador al principio de página y un enlace o vínculo con él al final de la misma. Insertar ahí con las imágenes top. a donde se puede ir mediante un enlace (Figura.

htm. escriba en la ventana donde aparece la carpeta minicoches. Seleccionar en el final de la página. introducir un nombre para el marcador de posición (como minicoches) y valores para el ancho y el alto.Fig. Figura 2.htm#mini (Figura 2-24). 25 . Seleccionar en Vínculo la carpeta minicoches.24: Ventana para crear vínculos 8) Para hacer un enlace o vínculo (link) con la página anterior. Para la minicoches.htm. grabar la segunda página.1 Creando un primer documento Figura 2.. 2-28). la figura TOP seleccionarla e ir a Inspector de propiedades. Seleccionar en Vínculo la carpeta sumario. introducir 120 para el ancho y 675 para el alto. para ello se crea un marcador de posición de imagen: • Situar punto de inserción al principio de la línea en blanco • Elegir Marcador de posición de imagen en Insertar • En el cuadro de diálogo Marcador de posición de imagen. para crear un enlace que irá al marcador o anclaje que se había creado anteriormente.2. 9) Por último. 10) Ahora vamos a introducir la imagen de distinta forma que en el documento anterior.23: Ventana de Punto de fijación Seleccionar en el final de la página. la figura TOP seleccionarla e ir a Inspector de propiedades. y comprobar que funcionan los dos enlaces creados en vista previa.

Agregar una imagen de un archivo Es posible agregar una imagen del sistema local de archivos. Los estándares de Internet únicamente admiten caracteres ASCII en las direcciones URL. En una intranet.Guardar una página en un sistema de archivos Es posible guardar una página como un archivo "htm" en un sistema de archivos.0 o posterior. 3. Para asegurarse de que todos los visitantes puedan seguir las direcciones URL.2 Crear Páginas Web Notas 1.Marcador de posición de imagen Hay otras formas de introducir imágenes en un documento. como en una unidad local o en una red. pero es mejor no hacerlo. Crear una página con marcos con uno de los diferentes formatos de marco. hacer clic en la ficha Vista previa.0 o posterior. 4.. se puede obtener rápidamente una vista previa de la página actual. Crear una página con un diseño específico. como es el de marcador de posición de imagen. La pagina aparecerá en pantalla si tenemos los permisos. y podremos editarla. Dreamweaver incluye una gran variedad de plantillas que permiten a crear diferentes tipos de páginas: • • • Crear una página en blanco.. también se deben utilizar caracteres ASCII en las direcciones URL de las Web. En Nombre de archivo escribir la dirección de la página de Internet que queremos abrir. Para ello. independientemente del lenguaje informático o del sistema operativo. Si la página contiene gráficos. Las imágenes pueden tener los siguientes formatos de archivo: GIF (estándar y animado). 4.Obtener la vista previa de una página en un explorador de Web Si se ha instalado Microsoft Internet Explorer versión 3. Para crear un marcador de posición de imagen hay que seguir los siguientes pasos: • Situar punto de inserción al principio de la línea en blanco • Elegir Marcador de posición de imagen en Insertar 26 . seleccionar Abrir.. como una página con varias columnas. 2. etc. archivos de sonido u otros objetos... se pueden utilizar caracteres no ASCII en los nombres de los archivos siempre que el servidor y todos los clientes utilicen la misma página de códigos del sistema. etc.Crear una página nueva Para crear una página nueva en un sitio Web o una página HTML independiente. en la vista Página. JPEG (estándar y progresivo).. Si no se ha instalado Microsoft Internet Explorer versión 3. se le pedirá que los guarde en la misma ubicación que la página.Abrir una página de la red Para abrir una página de la red que después podremos editar hay que seguir los siguientes pasos: En el menú Archivo. 2.

Explorar su sitio Web. a una mano que señala. Por ejemplo. porque cambia de apariencia. Por ejemplo. así es como debe verse un vínculo. un vínculo a un archivo AVI abre el archivo en un reproductor multimedia y un vínculo a una página muestra la página en el explorador de Web. se pueden utilizar marcadores para explorar una página larga que contenga cinco encabezados. Cuando un visitante hace clic en el vínculo. como por ejemplo. en función del tipo de destino. 7. Los exploradores de Web por lo general subrayan los vínculos de texto y los muestran con un color diferente. debe proporcionarles una forma de explorar otras páginas de su sitio Web.. Cuando el visitante hace clic en el vínculo.Hipervínculos Un hipevínculo o vínculo es una conexión de una página a otro destino como. agregar una tabla de contenido que enumere estos encabezados. 27 . Los vínculos de una imagen no siempre son visibles.2. en lugar de la parte superior de la página. pero también puede ser una imagen.. es una ubicación o texto seleccionado en una página que se ha marcado. y se abre o se ejecuta. • Hacer clic en Aceptar. un archivo multimedia o un documento de Microsoft Office) o un programa. punto de fijación de nombre o ancla. Aparecerá un cuadro gris con las dimensiones especificadas. Se trata de un marcador de posición para una imagen y se utiliza como ayuda para disponer las páginas sin necesidad de tener imágenes finales a mano. se puede agregar también efectos de HTML dinámico. Un vínculo puede ser un texto o una imagen. introducir un nombre para el marcador de posición y valores para el ancho y el alto. Cuando los visitantes abren la página principal. 6. una dirección de correo electrónico.1 Creando un primer documento • En el cuadro de diálogo Marcador de posición de imagen. El destino es con frecuencia otra página Web. Los vínculos se pueden indicar de varias formas. se mostrará la parte correspondiente de la página. Un vínculo a un marcador. que precede a la dirección URL de destino. Crear un marcador en cada encabezado y. así mismo. Un vínculo también debe proporcionar una clave visual del lugar que señala. por lo general. por ejemplo. en la parte superior de la página. Es posible. crear una tabla de contenido del sitio Web creando una lista de vínculos que vayan a las páginas más importantes. posteriormente a través del inspector de propiedades las podrá añadir. pero el visitante puede saber que una imagen tiene un vínculo colocando el puntero del ratón encima. Es posible crear un vínculo a un marcador para mostrar una determinada sección de una página al visitante. otra página o una situación diferente en la misma página. se muestra el destino en el explorador de Web. se indica mediante el signo (#). Cada entrada de la tabla de contenido es un vínculo que utiliza un encabezado con marcador como destino. Para enfatizar aun más un vínculo de texto o de imagen. cambiar la fuente del vínculo.Crear un vínculo a un marcador Un marcador. un archivo (como por ejemplo. También puede establecer efectos para que los vínculos cambien de apariencia cuando el visitante coloca el puntero del ratón encima. Muchos sitios utilizan un conjunto de botones o vínculos de texto que van a las páginas más importantes de un Web.

salvo excepciones. Si el sitio Web no es 28 .com.25: Ventana de correo electrónico 3) Hacer clic en Aceptar.2 Crear Páginas Web 8. Figura 2. El ordenador del servidor tiene su propia estructura y organiza sus propias ubicaciones. En la ventana de mensaje de correo electrónico. Para crear un vínculo de correo electrónico mediante el Inspector de propiedades: 1) Seleccionar texto o una imagen en la vista Diseño de la ventana de documento. No está en C:\Mis Documentos\Mis Web del ordenador del servidor.. mailto:jose@macromedia2. No dejar espacios entre los dos puntos y la dirección de correo electrónico. sin nada por delante. el campo Para se rellena automáticamente con la dirección especificada en el vínculo.. Si se pone esto en la casilla de Dirección URL. Por ejemplo. Pero ¿qué sucede cuando se envía al sitio Web al proveedor de Internet?.Crear un vínculo a un correo electrónico Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). 9. más que para vínculos externos: http:// . no lo es en el servidor. La página index no está en la misma ruta. Para crear un vínculo de correo electrónico utilizando el comando Insertar vínculo de correo electrónico: En la vista Diseño de la ventana de documento. Si se tienen todas las páginas del sitio Web en la misma carpeta. La dirección absoluta que era válida en el ordenador. 2) Seleccionar las opciones deseadas en el cuadro de diálogo. la dirección relativa es simplemente el nombre del fichero. Aparecerá el cuadro de diálogo Insertar vínculo de correo electrónico (Figura 2-25).. situar el punto de inserción donde se desea que aparezca el vínculo de correo electrónico o seleccionar el texto o la imagen que desea que aparezca como vínculo de correo electrónico. el vínculo funciona trabajando en su ordenador. La conclusión es: que las direcciones absolutas no deben utilizarse..Direcciones absolutas y relativas Una dirección absoluta de un fichero o una página es del estilo: C:\Mis Documentos\Mis Web\index. Realizar una de estas operaciones para insertar el vínculo: 1) Elija Vínculo de correo electrónico del menú Insertar. 2) En el cuadro de texto Vínculo del inspector de propiedades.htm (para que un vínculo que desde otra página lleve a la inicial). escribir mailto: seguido de una dirección de correo electrónico.

Crear listas en una página Web.astun. Supongamos que se conocen las direcciones URL de los puntos de información.baqueira. la dirección relativa es la ruta desde la página principal hasta la carpeta y fichero en cuestión. se están utilizando siempre direcciones relativas. 2.formigal. las direcciones relativas funcionan exactamente igual que en el ordenador. ésta puede ser la solución más aconsejable.Crear Imágenes con enlaces (Imagen map) 3. 4.valdesqui. y ponerla en forma de lista.2..Nombre de los Ficheros Para que al remitir las páginas al servidor no se produzcan errores en los vínculos. las direcciones relativas funcionarán en el proveedor perfectamente. Entonces.com http://www. supongamos que se quiere hacer una página Web con información que existe en internet sobre esquí. insistimos.es http://www.Crear tablas de disposición Crear listas en una página Web En primer lugar.2 Listas y Tablas excesivamente complejo.candanchu.. 2. es necesario que los nombres de los ficheros que se van creando no estén acentuados o ñ y no tengan espacios en blanco.com http://www. se aprenderá a: 1. (se pueden haber conseguido a través de uno de los servidores de información temáticos que existen) que pueden ser: Estación de esquí de Formigal Estación de esquí de Sierra Nevada Estación de esquí de Astún Estación de esquí de Baqueira-Beret Estación de esquí de Candanchú Estación de esquí de Valdesquí http://www. Se supone que remitirá al proveedor de Internet toda la estructura de subcarpetas a partir de la principal. Si se alojan las páginas Web en carpetas que cuelgan de la principal. la forma de crearlo es el doble clic en el fichero de la página correspondiente.Crear tablas.sierranevada. 10..com http://www. además de crear tres páginas Web.2 Listas y Tablas En esta sección.es 29 . Cuando se maneja el cuadro de diálogo crear vínculo.es http://www. Al remitirlo al proveedor de Internet..

ir al párrafo primero y pulsar el botón derecho del ratón y elegir en Estilos Subrayado. hay que seleccionar todos los nombres a la vez. A continuación.htm. y elegir en el Inspector de propiedades la Lista sin ordenar. elegir Encabezados 2 en el Inspector de propiedades. Figura 2. y dar al nuevo documento el título “Estaciones de esquí en Internet” e introducir los seis nombres de los servidores de información sobre esquí que se indican dejando una línea en blanco entre cada nombre. Después de crear el archivo estaciones. como se indica en la sección anterior. que es la que corresponde al título.28: Botón Elementos de Lista Aparecerá una ventana en donde se podrán cambiar las propiedades de la lista (Figura 2-28). 2) Después de seleccionar la primera línea del texto. Figura 2. 30 . Figura 2.26: Ventana con la lista creada 3) Para que las estaciones de esquí se formateen como una lista (Figura 2-26).27: Lista sin ordenar 4) Podrá cambiar las propiedades de la lista haciendo clic sobre el botón Elementos de lista (Figura 2-27).2 Crear Páginas Web 1) Crear un nuevo Sitio. pulsar sobre el botón Centrar.

29: Ventana de Propiedades de lista Como se habrá observado. los demás servidores y escribiendo la dirección URL asociada a cada uno. la primera dirección URL. 5) Ir seleccionando. en barra de herramientas Tipo de lista (Figura 2-29) aparecen los distintos tipos de listas que se pueden crear con el lenguaje HTML.2. como en el punto 4. Figura 2. lo que significa que se ha convertido en un enlace. Notas 31 . Para crear un enlace a cada uno de los servidores asociados (que son los que se han seleccionado al principio).2 Listas y Tablas Figura 2. vínculo o link (Figura 2-30). uno a uno.30: Documento con Vínculo Se puede observar que la línea. además de subrayada. seleccionar el primero de ellos. aparece en otro color. ir a Vínculo del Inspector de Propiedades y escribir en la etiqueta dirección URL que aparece.

y especificar diferentes estilos de lista en cada nivel. Las listas con viñetas pueden utilizar las viñetas estándar (redondas. (Figura 2-31). • Lista de menús. Muchos exploradores de Web pasan por alto este estilo.2 Crear Páginas Web Es posible crear varios tipos de listas: • Lista con viñetas. 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 página utiliza un tema. • Lista numerada. que aparece en el subdirectorio “Imágenes” que se encuentra en el segundo CD-ROM. 32 . la lista tendrá la fuente y el formato de párrafo del tema. números romanos (mayúsculas o minúsculas) o letras (mayúsculas o minúsculas). para presentar una lista de elementos en secuencia. Se puede elegir entre números.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). Para crear enlaces en una imagen (Imagen map) 1) Primero habrá que crear una página en blanco y abrir Imagen desde archivo desde el menú Insertar. Es posible crear listas con varios párrafos y niveles anidados. En la ventana que aparece abrir map. Figura 2. cuadradas). para presentar una lista desordenada de entradas cortas. para presentar una lista de elementos no ordenados.gif. para presentar una secuencia de términos cortos. • Lista de directorios.

34: Ventana de vínculo asociada a una zona activa 4) Añadir en los demás botones nuevas direcciones URL. Hacer clic sobre uno de los botones. Ventana con las zonas activas. por ejemplo.32: Barra del Inspector de propiedades para trabajar con las imágenes 2) Para crear enlaces o vínculos en una imagen seleccionar con el cursor la imagen que aparece en la pantalla. 33 . el URL a donde se desea ir al marcarlo (Figura 2-34). Figura 2. Figura 2. Elegir en la barra del Inspector de propiedades cualquiera de los tres botones que hay para seleccionar zonas activas (Figura 2-33).2 Listas y Tablas Figura 2.33: Botones para crear zonas activas 3) Ir con el cursor sobre el botón Rectangular. "Servicio de Información" en la ventana de Vínculo del Inspector de propiedades escribir en la etiqueta de Dirección URL.2. dependiendo de la forma geométrica de la zona en la que se quiere crear el enlace.

Por ejemplo. el sitio Web de un fabricante de coches puede utilizar un mapa de imágenes de sus nuevos coches: cuando el visitante hace clic en un coche. son la manera de saltarse las limitaciones que el lenguaje HTML tiene con la ubicación de los textos. el margen de las celdas. En Dreamweaver. La página de tablas del ejemplo se titulará “Estilos de texto” y tendrá dos filas y ocho columnas. El mapa de imágenes proporciona por lo general claves acerca de dónde se debe hacer clic. el destino del vínculo aparece en el explorador de Web. 34 . Figura 2. 2) Ir al menú Insertar y seleccionar Tabla. circular o polígonal. Escribir en la etiqueta Tamaño del borde 2: en Ancho 100 y en Espaciado entre celdas 1. la alineación. el número de columnas.35: Botón Tabla Aparecerá una ventana en la que se solicitan una serie de datos: el número de filas. Una zona activa es una región invisible en un gráfico a la que se le ha asignado un vínculo. el ancho de la tabla. el tamaño del borde. el espaciado entre celdas. o pulsar sobre el botón Tabla de la Barra de Insertar (Figura 2-35). aparece una página con una descripción detallada del coche. que es lo que se hará en este caso. Cuando el visitante hace clic en la región. Para crear tablas en una página es necesario: 1) Estar dentro de una página o crear una nueva en blanco.2 Crear Páginas Web Notas Es posible agregar zonas activas a gráficos como imágenes y GIF animados. el espaciado. Un gráfico con una o más zonas activas se denomina mapa de imágenes. a las zonas activas además se les puede dar forma rectangular. (Figuras 2-36 y 37). Tablas Las tablas permiten bastante juego a la hora de situar textos por la pantalla.

Teclado.2. Insertado. Subrayado. Énfasis.(Figura 2-38).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). las columnas los espaciados los colores. Eliminado. Ir a Estilo del menú Texto y dar a cada una de las palabras el estilo correspondiente (Figura 2-39). Figura 2.. Tachado. Destacado.36: Ventana de Insertar tabla Figura 2. Variable.37: Documento con Tabla 3) En el inspector de propiedades aparecen las opciones que se pueden cambiar en la tabla como son las filas. Muestra. En las siete primeras celdas de la segunda fila escribir: Código. Definición. Cursiva. etc.2 Listas y Tablas Figura 2.38: Propiedades de la Tabla 4) Escribir sobre las siete primeras celdas de la primera fila las palabras: Negrita. Cita. 35 . Figura 2. Teletipo.

también se puede especificar si desea que el texto fluya a ambos lados de la tabla.42: Botón de combinar celdas Figura 2.40: Tabla con las propiedades cambiadas 6) En la ventana Propiedades de tabla poner en Tamaño de bordes 0 (Figura 2-41).41: Tabla sin bordes 7) Seleccionar la octava celda de la primera y segunda fila. Figura 2. Por ejemplo. 36 .2 Crear Páginas Web Figura 2. Figura 2. escribir en ella la palabra Variable (Figura 2-43). Si un visitante cambia el tamaño de la ventana del explorador. Es posible. e ir en el menú Tabla sobre Combinar celdas (Figura 2-42). asimismo. las tablas se pueden alinear a la izquierda.43: Documento con tabla Notas Se puede determinar la forma de la tabla en la página estableciendo el tipo de alineación. También se puede determinar el alto y ancho de la tabla. Además. si la tabla está dentro de un marco). las dos últimas celdas se unirán en una. puede especificar cuánto espacio hay entre el borde y el texto de una celda y puede establecer la alineación horizontal y vertical del texto. Por ejemplo. definir la forma en que aparece el texto dentro de cada celda. establecer el ancho de la tabla al 80% del ancho total de la página (o el ancho del marco. derecha o centro de la página. al texto de la tabla se le puede dar formato como a cualquier otro texto (puede cambiar el estilo de fuente. En las páginas que incluyen una tabla y texto. el tamaño de la página y de la tabla cambian según corresponda.

se definen como encabezados de tabla. Para dar énfasis a ciertas celdas de la tabla. Dreamweaver ofrece la vista Disposición. También es posible cambiar el grosor del borde externo. Sin embargo se puede modificar el estilo del encabezado de la tabla y definir otras propiedades de los encabezados de las tablas. se puede establecer la disposición de una página utilizando tablas como estructura subyacente al mismo tiempo que se evitan algunos de los problemas que suelen presentarse al crear disposiciones 37 . De forma predeterminada. Por ejemplo. como sombreado. Se pueden utilizar imágenes de fondo para agregar atractivo visual a las tablas. Establecimiento de tablas de Disposición Dreamweaver le permite establecer la disposición de las páginas Web de diversas formas. También se pueden unir celdas adyacentes en una sola. Es posible definir colores e imágenes de fondo para determinadas celdas o para toda la tabla. las tablas pueden resultar difíciles de usar como método de disposición. • Definir los altos de fila y los anchos de columna para que tengan un tamaño específico en píxeles. uno claro y otro oscuro. se pueden elegir dos colores.2. etc. En la vista Disposición.2 Listas y Tablas tamaño. • Definir los altos de fila y los anchos de columna como porcentaje del tamaño total de la tabla. Una vez que se han obtenido las necesarias filas y columnas que necesita en su tabla. Sin embargo. establecer que una columna tenga el 10% del ancho total de la tabla. Se pueden crear más celdas en la tabla dividiendo una celda en dos o más. para agregar énfasis. Para optimizar el uso de tablas en el establecimiento de la disposición de páginas. Por ejemplo. color y otros atributos). • Cambiar el tamaño de filas y columnas por separado arrastrando los bordes. ya que inicialmente se crearon para mostrar datos tabulares y no para establecer la disposición de páginas Web. Los colores de fondo se pueden utilizar para sombrear columnas o filas específicas. la configuración de una celda siempre tiene prioridad. la tabla tendrá un fondo verde pero una celda será azul. si se establece que el color de fondo de una tabla sea verde y el color de una celda sea azul. Se puede poner etiquetas o títulos a las tablas agregando un título de tabla. Se puede elegir un color para el borde o. se puede establecer el color del borde de toda la tabla o un color de borde diferente para cada celda individual. puede establecer los altos de fila y los anchos de columnas cómo se deseen. un encabezado de tabla recibe formato de texto en negrita. si se desea una apariencia tridimensional. que se coloca por encima o por debajo de la tabla. Para personalizar la apariencia de los bordes en las tablas. Un método frecuente para crear la disposición de una página consiste en utilizar tablas HTML para colocar los elementos. También se puede dar formato al texto del título. • Establecer que el espaciado entre filas y columnas sea uniforme. No obstante.

en lugar de en una categoría distinta. puede utilizar las herramientas Insertar tabla y Dibujar capa que puede utilizar en la vista Estándar.) Una barra gris llamada Vista de disposición aparece a lo largo de la parte superior de la vista Diseño indicando que está en la vista de disposición. primero debe cambiar a la vista Estándar. Una celda de disposición no puede existir fuera de una tabla de disposición. Dreamweaver crea automáticamente una tabla de disposición como contenedor para la celda. Para obtener más información. Esta posibilidad ofrece mayor flexibilidad. Esta estructura simplifica la estructura de la tabla cuando las filas o columnas de una parte de la disposición no están alineadas con las filas o columnas de otra parte. Si la página contiene tablas. En la vista Disposición se pueden dibujar celdas y tablas de disposición en la página. elegir Diseño del menú Ver o ir a la pestaña Disposición de la barra Insertar. Al dibujar una celda de disposición fuera de una tabla de disposición. en la vista Disposición se pueden dibujar celdas de disposición en la página y desplazarlas al lugar en el que desea colocarlas. aparecen como tablas de disposición. Para cambiar a la vista Disposición: Si la vista Diseño no está visible. Por ejemplo. (Otra posibilidad es dibujar cada celda sólo en el momento de insertar contenido en ella. Una celda de disposición no puede existir fuera de una tabla de disposición. También se puede crear fácilmente tanto disposiciones con ancho fijo como disposiciones que se ajusten automáticamente al ancho total de la ventana del navegador. otra celda en la parte izquierda de la página para insertar una barra de navegación y una tercera celda en la parte derecha para insertar contenido. Dreamweaver crea automáticamente una tabla de disposición como contenedor para la celda. se puede dibujar una celda a lo largo de la parte superior de la página para insertar un gráfico de encabezado. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver. y permite cambiar el tamaño de las celdas o su ubicación con más facilidad. Por ejemplo. se puede establecer la distribución de la página antes de añadirle contenido. con una barra Insertar vertical. También se pueden anidar las tablas de disposición situando una nueva tabla de disposición dentro de otra existente. Notas En la vista Disposición. deja más espacio en blanco en la tabla de disposición durante más tiempo. consultar Dibujo de una tabla de disposición anidada. los elementos relacionados con la disposición aparecen en la parte inferior del panel. Para utilizar dichas herramientas. 38 . En la vista Disposición. Por ejemplo. el uso de tablas de disposición anidadas permite crear de forma sencilla una disposición de dos columnas con cuatro líneas en la columna izquierda y tres filas en la columna derecha.) Al dibujar una celda de disposición fuera de una tabla de disposición.2 Crear Páginas Web basadas en tablas con medios tradicionales.

Para cambiar el color del contorno.44: Vista de disposición Situar el puntero del ratón en la parte de la página en la que se desea que comience la celda y. La celda aparece en la página con un contorno azul. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver. El puntero del ratón se 39 . en lugar de en una categoría distinta. A continuación. El ancho de cada celda se muestra en el área de encabezado de columna en la parte superior de la columna.2. Para obtener más información sobre anchos de columna. a continuación. Para crear varias celdas sin tener que hacer clic en el botón Dibujar celda de disposición cada vez.45: Documento con tres celdas disposición Para dibujar una tabla de disposición: Situarse en la vista Disposición. hacer clic en el botón Dibujar celda de disposición en la categoría Disposición de la barra Insertar. El puntero del ratón se convertirá en un signo más (+).2 Listas y Tablas Para dibujar una celda de disposición: Situarse en la vista Disposición (Figura 2-44) y. consultar Establecimiento del ancho de columna. (este es el color de contorno predeterminado de las celdas de disposición). siempre que las fichas de tabla de disposición estén visibles (consultar Configuración de las preferencias de la vista Disposición). Figura 2. hacer clic en el botón Dibujar tabla de disposición en la categoría Disposición de la barra Insertar. arrastre para crear la celda de disposición. a continuación. consultar Configuración de las preferencias de la vista Disposición. mantener presionada la tecla Control mientras se arrastra para crear cada una de las celdas de disposición. Figura 2.). llevar a cabo una de estas operaciones: Para dibujar una tabla de disposición. los elementos relacionados con la disposición aparecen en la parte inferior del panel. con una barra Insertar vertical.

Para dibujar más de una tabla de disposición sin tener que hacer clic repetidamente en el botón Dibujar tabla de disposición. una tabla puede contener otra tabla. (este es el color de contorno predeterminado de las tablas de disposición. Sin embargo. puede dibujar una nueva tabla de disposición sólo por debajo del final del contenido existente. mantener presionado el botón Control mientras presiona el botón Dibujar tabla de disposición. Si su página ya tiene contenido. Notas No puede dibujar una tabla de disposición junto a contenido existente.46: Tabla de disposición El ancho de la tabla (expresado en píxeles o como un porcentaje del ancho de la página) se muestra en el área de encabezado de columna de la parte superior de la tabla. Una vez se haya terminado de dibujar una tabla de disposición. 40 . hay que cambiar el tamaño de la ventana de documento para crear más espacio en blanco entre el final del contenido existente y el final de la ventana. consultar Configuración de las preferencias de la vista Disposición. Coloque el puntero en la página y arrastre para crear la tabla de disposición.2 Crear Páginas Web convertirá en un signo más (+). se puede dibujar otra inmediatamente después. siempre que las fichas de tabla de disposición estén visibles (consulte Configuración de las preferencias de la vista Disposición).) Para cambiar el color del contorno. Si se intenta dibujar una tabla de disposición junto a contenido existente pero aparece un puntero distinto que el puntero de dibujo. la nueva tabla se coloca automáticamente en la esquina superior izquierda de la página. Si la página no tiene contenido. Las tablas no pueden solaparse. En la parte superior de cada tabla dibujada aparecerá una ficha Tabla de disposición que ayuda a seleccionar la tabla y distinguirla del resto de los elementos de la página. Figura 2. La tabla aparecerá en la página con un contorno verde.

2 Listas y Tablas Se puede activar la cuadrícula de Dreamweaver para utilizarla como guía visual al dibujar la distribución de la página. Así. Para añadir texto a una celda de disposición: Situar el punto de inserción en la celda de disposición en la que desea añadir texto y llevar a cabo una de estas operaciones: Escribir texto en la celda. Utilizar el comando Pegar. Se puede hacer que los elementos de la página se ajusten automáticamente a la cuadrícula cuando se muevan y cambiar la cuadrícula o controlar el comportamiento de ajuste especificando la configuración de la cuadrícula. Llevar a cabo una de las siguientes operaciones: 2) En la categoría Común de la barra Insertar. 41 . El ajuste funciona independientemente de que la cuadrícula esté visible. hacer clic en el botón Imagen. antes de poder añadir contenido.47: Celda de disposición con texto Para añadir una imagen a una celda de disposición: 1) Situar el punto de inserción en la celda de disposición en la que desea añadir la imagen. a continuación. Para cambiar la configuración de la cuadrícula: Elegir Ver > Cuadrícula > Configuración de cuadrícula. imágenes y otro contenido a las celdas de disposición de la misma forma que añadiría contenido a las celdas de tablas en la vista Estándar. Para activar o desactivar el ajuste: Elegir Ver > Cuadrícula > Ajustar a cuadrícula. Aparece el cuadro de diálogo Configuración de la cuadrícula. no en un área vacía (gris) de una tabla de disposición.2. Sólo se puede insertar contenido sólo en una celda de disposición. Hacer clic en la celda en la que desee añadir contenido y. Para mostrar u ocultar la cuadrícula: Elegir Ver > Cuadrícula > Mostrar cuadrícula. escriba el texto o insertar otro contenido. Adición de contenido a una celda de disposición En la vista Disposición puede añadir texto. Copiar texto de otro documento y pagarlo. Figura 2. hay que crear celdas de disposición . 3) Elegir Insertar > Imagen.

Tras insertar contenido en la celda. seleccionar un archivo de imagen. Aparecen manejadores de selección alrededor de la celda. 3) Presionar las teclas de flecha para mover la celda de píxel en píxel. Aparecen manejadores de selección alrededor de la tabla. de modo que se puede borrar de la tabla los altos de celdas explícitos. a continuación. Figura 2. Figura 2. hacer clic en el botón Borrar alto de fila del inspector de propiedades (Figura 2-49).49: Borrar alto de la fila del inspector Para mover una celda de disposición 1) Seleccionar una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla Control. Mantener presionada la tecla Mayús a la vez que se presiona una tecla de flecha para mover la celda de disposición de 10 en 10 píxeles. Dreamweaver especifica automáticamente un alto para que la celda se muestre con la altura que se dibujó incluso aunque la celda esté vacía. 42 . Para borrar los altos de celdas. 2) Arrastrar un manejador de selección para cambiar el tamaño de la tabla. seleccionar una tabla de disposición haciendo clic en la ficha de la parte superior de la tabla y.48: Celdas de disposición con texto y dibujo Cómo borrar los altos de celdas establecidos automáticamente Al crear una celda de disposición. es posible que ya no se necesite especificar el alto. Lleve a cabo una de las siguientes operaciones: 2) Arrastar la celda a otra ubicación dentro de su tabla de disposición.2 Crear Páginas Web 4) En el cuadro de diálogo Seleccionar origen de imagen. Para cambiar el tamaño de una tabla de disposición 1) Seleccionar una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla.

50: Ventana de imagen de espaciador Es posible insertar y quitar manualmente las imágenes de espaciador de determinadas columnas o quitar todas las imágenes de espaciador de la página. 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. Figura 2. si se prefiere. Si ya se ha establecido una imagen de espaciador para el sitio en las preferencias de Dreamweaver. Utilización de las imágenes de espaciador Una imagen de espaciador (también conocida como GIF espaciador) es una imagen transparente que se utiliza para controlar el espaciado en las tablas autoampliables.3 Visualizando y editando HTML Los bordes de la tabla se alinean automáticamente con los bordes de otras celdas y tablas. Un navegador no puede dibujar una columna de tabla más estrecha que la imagen más ancha contenida en una celda de dicha columna. Al insertar una imagen de espaciador en una columna o al establecer una columna como autoampliable. Se puede insertar y quitar manualmente las imágenes de espaciador de cada columna. 3) Presionar las teclas de flecha para mover la tabla de píxel en píxel. Las columnas que contienen imágenes de espaciador presentan una barra doble en el área de encabezado de columna.3 Visualizando y editando HTML Cuando se visualiza un documento en WWW el texto que se lee en la pantalla siempre 43 . Dreamweaver añade imágenes de espaciador automáticamente al establecer una columna como autoampliable a menos que se especifique que no se deben usar imágenes de espaciador. 2.2. Llevar a cabo una de las siguientes operaciones: 2) Arrastar la tabla a otra ubicación de la página. este cuadro de diálogo no aparecerá. Mantener mantener presionada la tecla Mayús a la vez que presiona una tecla de flecha para mover la tabla de 10 en 10 píxeles. Aparecen manejadores de selección alrededor de la tabla. aparece un cuadro de diálogo que pregunta cómo se desea configurar el archivo de imagen de espaciador (Figura 2-50). Para mover una tabla de disposición 1) Seleccionar una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Una imagen de espaciador es una imagen GIF transparente de píxel único que se ha ampliado para tener un número determinado de píxeles de ancho.

aparecerá una ventana en la que se verá el texto escrito en lenguaje HTML. etc. <I>Italic</I>.Ventana Vista Previa Dreamweaver permite también trabajar con la ventanas de Diseño y Código a la vez.<KBD>Keyboard</KBD>. 44 . Para visualizar este documento en lenguaje HTML hay que activar la ventana Código del menú Ver.<SAMP>Sa mple</SAMP>. animaciones y comandos que permiten especificar los enlaces a otros documentos. <CODE>Code</CODE>. <SUB>Subscript</SUB>.<STRONG>Strong</STRONG> y <VAR>Variable</VAR>. dentro de un documento hay texto que está marcado con varios niveles de cabeceras. Entonces. <TT>Fixed Pitch</TT>. Así por ejemplo. para ello ir a Código y diseño del menú Ver (Figura 2-52).51: Ventana de HTML Sobre la venta escribir los tag correspondientes a cada uno de los tipos de texto que se indican (véase el modulo 3): <B>Bold</B>. <SUP>Superscrip</SUP>.<CITE>Citation</CITE>. como en la Figura 2-51. y visualice le resultado en activando Diseño del menú Ver. Existen también comandos para importar imágenes. Figura 2. En Dreamweaver existe la posibilidad de editar documentos Web con comandos HTML. 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í.2 Crear Páginas Web tiene el formato adecuado. encabezamientos de páginas.<U>Underline</U>.<EM>Emphasis</EM>. sonidos.

los códigos originales de HTML de la página no se modifican ni cambian de formato a no ser que se modifiquen con Dreamweaver. escribir border="1" en la etiqueta <IMG>. De esta forma. Dreamweaver conserva automáticamente el contenido. en la etiqueta <IMG>. como por ejemplo. Figura 2. si se desea agregar un borde a una imagen.52: Documento de Código y diseño También se puede añadir códigos HTML en cualquier punto de un documento con sólo pulsar sobre el botón de la derecha y elegir insertar Insertar HTML (Figura 2-53). la sintaxis y el formato HTML de esa página.53: Insertar HTML Notas Cuando se abre una página. se asume que se conocen los atributos y valores válidos para las etiquetas de imágenes. se puede utilizar el cuadro de diálogo Propiedades de imagen para establecer el borde y Dreamweaver escribe de manera automática la configuración de borde. Sin embargo. Dreamweaver guarda cualquier formato personalizado. Cuando se guarda la página. Por ejemplo. la sangría aplicada y las mayúsculas y minúsculas de las etiquetas de cualquier código HTML. con la sintaxis apropiada y utilizando los valores válidos. incluidas las páginas creadas en otros editores.2. 45 .3 Visualizando y editando HTML Figura 2. En su lugar.

46 . que está situado en el extremo inferior izquierdo de la ventana. haciendo clic en los botones de opción y casillas de verificación y seleccionando opciones de los menús desplegables.2 Crear Páginas Web 2. Ir al menú Insertar y elegir la opción Formulario. Figura 2. Encabezado 3 y Centrarlo. hacer clic en el contorno para seleccionar el formulario o bien seleccione la etiqueta <form> en el selector de etiquetas. remarcarlo con el cursor y el Inspector de propiedades escribir en Formato. Poner el cursor dentro del recuadro que aparece y escribir varias líneas en blanco (Figura 2-54). al igual que se ha hecho en las secciones anteriores. Los visitantes rellenan un formulario escribiendo texto. Si se quiere crear un “Formulario de Inscripción en el Curso de Internet” en el que aparezcan como casillas a rellenar. se crearán las partes que aparecen en la Figuras 2-57: Crear una página nueva y escribir en la primera línea el título indicado anteriormente.54: Documento Formulario 2) En la ventana de documento. 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). las destinadas a los datos personales del alumno y a las características del equipo informático que va a utilizar. que pueden procesarse de varias formas en función del controlador de formulario definido. En esta sección se verá como se puede crear un formulario y se hará con un ejemplo. o seleccione la categoría Formularios en la barra Insertar y hacer clic en el icono Formulario.4 Creando un Formulario Un formulario es un conjunto de campos que se utiliza para reunir información sobre la gente que visita un sitio Web. los visitantes envían los datos que han introducido. Tras rellenar el formulario. se seguirán los siguientes pasos: 1) En primer lugar.

Los métodos son: POST Incrusta los datos del formulario en la petición HTTP. Si el tamaño de los datos enviados es demasiado grande. los datos se truncarán. En nuestro caso podremos POST Tenga en cuenta que el método que elija vendrá determinado por el servidor Web o de aplicaciones que utilice. en nuestro caso formulario1. la ruta al URL será similar a este ejemplo: http://www. lo que puede producir resultados de procesamiento inesperados o erróneos.mysite. GET Añade el valor a la URL que solicita la página. Normalmente el valor predeterminado es el método GET. GET no es un método seguro para transferir información. En el campo Acción del inspector de propiedades. Las URL tiene una limitación de 8. Se puede introducir la ruta completa en el campo Acción o bien hacer clic en el icono de carpeta para acceder a la carpeta que contiene el script o página de aplicación. 47 . elegir el método mediante el cual se transmitirán los datos del formulario al servidor. contraseñas. Además.2. Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario del servidor. La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de scripts como JavaScript o VBScript.55: Inspector de propiedades del formulario En el campo Nombre del formulario del inspector de propiedades. No utilice el método GET para enviar formularios largos. números de tarjetas de crédito o cualquier otro tipo de información confidencial.192 caracteres. Dreamweaver genera uno.com/application_name/process.4 Creando un Formulario Figura 2. Para obtener más información. no debe utilizar el método GET cuando envíe nombres de usuario. póngase en contacto con el administrador del servidor de su empresa. escriba un nombre exclusivo para el formulario. Si no asigna un nombre al formulario. especificar la ruta de la página dinámica o script que va a procesar el formulario. Si especifica la ruta de una página dinámica.cfm En nuestro caso como todavía no estamos conectados aun servidor pondremos que el formulario no lo envíen a nuestro correo electrónico poniendo mailto:nuestro correo electrónico En el menú emergente Método.

Figura 2. especifique el tipo MIME multipart/form-data.2 Crear Páginas Web El menú emergente Enctype permite especificar el tipo de codificación MIME de los datos remitidos al servidor para su procesamiento. En nuestro caso como lo vamos a enviar a un correo electrónico es lo mismo 3) Escribir los datos del formulario que aparecen en la Figura 2-56. Los valores de destino son: _blank abre el documento de destino en una nueva ventana sin nombre. _top abre el documento de destino en el cuerpo de la ventana actual. _parent abre el documento de destino en la ventana padre de la que muestra el documento actual. El menú emergente Destino permite especificar la ventana en la que se muestran los datos devueltos por el programa ejecutado. El valor predeterminado de application/x-www-form-urlencode se utiliza normalmente junto con el método POST (que es el que empleará ahora). Si la ventana indicada no se ha abierto aún. _self abre el documento de destino en la misma ventana en la que se envió el formulario. aparece una nueva ventana con ese nombre.56: Formulario 48 . 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. Si crea un campo de carga de archivos.

57: Formulario con campos de texto 5) A continuación se crearán las partes que aparecen en la Figura 2-58. Pentium III y Pentium IV (Figura 2-59) 49 . Para ello colocar el cursor debajo de Correo electrónico y establecer un línea horizontal mediante Regla horizontal del menú Insertar. Hacer lo mismo con los otros datos. Figura 2. Figura 2. Escribir “Datos Técnicos” en negrita y centrarlo (Figura 2-58). En el Inspector de propiedades pondrá como nombre procesadores.4 Creando un Formulario 4) Poner el cursor al final de Nombre. y en valores de lista los nombres Pentium II. Cambiar en cada uno el nombre que asocia automáticamente a cada uno el Inspector de propiedades por el nombre del campo apellidos. etc (Figura 2-57). ir a Insertar y seleccionar Campo de texto insertarlo al lado de nombre.2. ciudad.58: Ventana del Formulario 6) Escribir los otros datos que queremos introducir “Tipo de procesador” y seleccionar en Insertar del Formulario de Lista/menú .

y hacer lo mismo con "ADSL" y "Red".61: Inspector de propiedades 50 . 8) Poner el cursor debajo de “Observaciones” y elegir Área de texto en del menú Insertar. en ambos tendrá que establecer la Acción que quiere para ellos en el Inspector de propiedades (Figura 2-61). el Botón de opción.60: Documento del Formulario 9) Por último insertar al final dos botones. el botón Enviar y otro para borrar los datos introducidos que será el botón Restablecer. y cambiar el nombre en el inspector de propiedades (Figura 2-60). y cambiar en cada uno el nombre que asocia automáticamente cada uno el Inspector de propiedades por el nombre del tipo de acceso a Internet. Figura 2. uno para enviar el formulario. mediante la opción botón del menú Insertar.59: Inspector de propiedades 7) Poner el cursor delante de “Moden” y elegir en Insertar.2 Crear Páginas Web Figura 2. Figura 2.

• Obtener comentarios. Figura 2.2.4 Creando un Formulario 10) Ahora ir a la vista previa en el explorador. Los formularios tienen varias aplicaciones: • Reunir información de contacto. • Permitir que los visitantes busquen un sitio Web escribiendo una consulta. rellenar el formulario y enviarlo. • Configurar un libro de visitantes. • Recibir peticiones. 51 . En su correo electrónico aparecerá un e-mail con un fichero adjunto que podrá abrir con el bloc de notas en donde encontrará los datos enviados. envíos y facturación.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 información que se desea reunir. • Obtener información relacionada con pedidos.

3) El tercer paso en la creación de un formulario consiste en definir la manera en que se controlan los resultados del formulario. El visitante puede activar o desactivar la casilla de verificación. Los campos de formulario se utilizan para reunir información. hojas de estilo en cascada y ubicar elementos. si una opción se selecciona de forma predeterminada y definir las opciones en un menú desplegable. Para que el visitante seleccione sólo una opción de un grupo. Además. 2) Agregarle campos al formulario. por ello hay que seleccionarlos en función de la información que se desea obtener de los visitantes. por ejemplo. especificar la longitud de un cuadro de texto. Botón de comando.2 Crear Páginas Web • Pedir a los visitantes que se identifiquen en un sitio Web con nombre de usuario y contraseña. Puede configurar un menú desplegable para permitir una selección o varias. pero ocupa menos espacio en el formulario. tablas. Para presentar al visitante una lista de opciones. Menú desplegable. Los campos existentes son los siguientes: Cuadro de texto de una línea. se puede empezar con un formulario en blanco o utilizar una plantilla o asistente para que cree el formulario en su lugar. Una vez decidido el tipo de formulario a crear. Una vez situados los campos en el formulario. como comentario. para poder verlos. Este campo se desplaza para acomodar cantidades de texto variables. mostrarlos al visitante o trabajar con ellos si es necesario. como un nombre o un número Cuadro de texto con desplazamiento. borren los campos restableciendo el formulario o ejecuten las secuencias de comandos personalizadas. los resultados del formulario. que toman los resultados y llevan a cabo distintas acciones. También se puede establecer propiedades para cada uno de los campos. Para obtener una o más líneas de texto. Una vez que el visitante envía el formulario. Para obtener datos cortos. Este campo se puede sustituir por un grupo de botones de opción. Casilla de verificación. Dreamweaver proporciona varios controladores de formulario. Escribir directamente en el formulario para incluir etiquetas de campos e instrucciones. Para permitir que los visitantes envíen el formulario después de rellenarlo. Botón de opción. puede seleccionar varios elementos. Para que estos controladores funcionen es necesario que el servidor tenga la extensiones especiales . Para elementos opcionales. Además sólo se puede comprobar su funcionamiento cuando los 52 . se puede colocar en la página de la misma forma que el texto: utilizar saltos de línea. deben reunirse los datos que se han introducido. Cada tipo de campo funciona de forma diferente.

• Use Número para comprobar que el campo contiene solamente caracteres numéricos.4 Creando un Formulario formularios se envían al servidor (En la segunda parte del curso el servidor que se estudia nos permitirán comprobar si funcionan los formularios que establezcáis). comprobar el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. seleccione el mismo campo que seleccionó en la ventana de documento en la lista de Campos con nombre. o adjúntala al formulario con el evento onSubmit para evaluar varios campos de texto cuando el usuario hacer clic en el botón Enviar. Al adjuntar esta acción a un formulario se evita que éste sea enviado al servidor si alguno de los campos de texto especificados contiene datos no válidos. Para usar la acción Validar formulario: a) Para validar campos individuales conforme el usuario va rellenándolos en el formulario.2. seleccionar campo de texto y elegir Comportamientos en la ventana de Diseño. 4) El cuarto paso consiste en Validar el formulario. Adjuntar esta acción a campos de texto individuales con el evento onBlur para validar los campos conforme el usuario vaya rellenando el formulario. • Use Dirección de correo electrónico para comprobar si el campo contiene un símbolo arroba (@). f) Elegir una de las siguientes opciones Aceptar: • Use Cualquier cosa si el campo es obligatorio pero no tiene que contener ningún tipo de dato determinado. c) Seleccione Validar formulario en el menú emergente Acciones. • Si está validando múltiples campos. seleccione un campo de texto en la lista de Campos con nombre. hacer clic en la etiqueta <form> en el selector de etiquetas. y elija Comportamientos en la ventana de Diseño. d) Realice una de estas operaciones: • Si está validando campos individuales. situado en el ángulo inferior izquierdo de la ventana de documento. (Si no está seleccionado Obligatorio. 53 . esta opción carece de sentido (es lo mismo que si la acción Validar formulario no se hubiera adjuntado al campo). e) Seleccione la opción Obligatorio si el campo debe contener algún dato. b) Para validar múltiples campos cuando el usuario envía el formulario. • Use Número del para comprobar que el campo contiene solamente caracteres numéricos dentro de un rango determinado.

cada marco puede mostrar una página diferente. 54 . Se hará desarrollando un ejemplo. seleccione onBlur o onChange en el menú desplegable Eventos.5 Trabajando con Marcos Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en varias zonas denominadas marcos.2 Crear Páginas Web g) Si se validan múltiples campos. comprobar que el evento predeterminado sea onBlur u onChange. en el menú emergente Eventos aparecerá automáticamente el evento onSubmit. y La Vanguardia en el otro las páginas Web de estos diarios. puede volver al formulario y rellenarlo nuevamente. Cualquiera de estos dos eventos desencadena la acción Validar formulario cuando el usuario abandona el campo. i) Si se valida múltiples campos cuando el usuario envía el formulario. La página de confirmación puede mostrar un mensaje de "agradecimiento" y el contenido de uno o más campos del formulario. k) En caso de que no lo sea. si es necesario. La diferencia entre ellos estriba en que onBlur tiene lugar independientemente de que el usuario haya escrito algo en el campo. 2. para que en uno aparezcan cuatro diarios nacionales ABC. 1) En primer lugar. Si se quiere crear una página con dos marcos. 5) El último paso en la creación de un formulario consiste en definir una página de confirmación. Se seguirán los siguientes pasos. que es la que verán los visitantes una vez que hayan enviado un formulario. repetir los pasos anteriores para cada uno de los campos que se desee validar. El evento onBlur es preferible si ha configurado el campo como obligatorio. h) Hacer clic en Aceptar. El País. mientras que onChange sólo tiene lugar si el usuario ha cambiado el contenido del campo. En esta sección se verá como se puede crear una página con frames o marcos. j) Si se validan campos individuales. El visitante puede confirmar que la información se introdujo correctamente y. El Mundo. En la ventana que aparece se elige Conjunto de marcos y dentro de ella se selecciona Izquierda fijo (Figura 2-63). ir al menú Archivo y elegir dentro de él Nuevo Documento.

5 Trabajando con Marcos Figura 2. y La Vanguardia. para que la dirección se abra en la ventana de la derecha seleccionar en Destino mainframe (Figura 2-66). Figura 2.es. En la ventana en blanco que aparecerá la izquierda escribir los nombre de los diarios ABC.2.64: Ventana con dos marcos 2) Marcar la palabra ABC y crear un vínculo en el Inspector de propiedades a http://www.abc. El Mundo. Figura 2.63: Ventana de páginas de marcos pulsar sobre Crear y aparece la ventana con dos marcos. Figura 2-64.65: Inspector de Propiedades 55 . El País.

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.lavanguardia.68: Propiedades de un marco 56 .es 4) Establecer la ventana de Vista previa y ver como aparecen los vínculos en el marco de la derecha (Figura 2-66) .es. también se puede hacer. www.elmundo..Para crear una página con marcos.67: Insertar marcos 2.66: Pagina con marcos Notas 1.(Figura 2-68). escogiendo marcos en la barra de insertar y en ella escoger el tipo de marco que queremos (Figura 2-67) Figura 2. www.elpais.Para visualizar y configurar de las propiedades de un marco utilizar el inspector de propiedades. Figura 2..es. Figura 2.2 Crear Páginas Web 3) Poner la dirección URL a los otros diarios escribiendo: www.

69: Propiedades de un conjunto de marcos 4. Hacer clic en el borde que rodea a un conjunto de marcos en el panel Marcos. Esto suele deberse a que encontraron sitios que utilizaban los marcos incorrecta o innecesariamente (por ejemplo. Entre las ventajas de utilizar marcos se incluyen: El navegador de un visitante no tendrá que volver a cargar los gráficos de navegación para cada página. permitiendo al visitante desplazarse por los marcos de forma 57 . Por ejemplo. simplemente. Sin embargo. 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 Diseño de la ventana de documento.) Hay muchos diseñadores Web profesionales que prefieren no utilizar marcos y muchas personas que navegan por la Web a las que no les gustan. No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden experimentar dificultades para navegar por páginas con marcos. utilice el cuadro de diálogo Propiedades de la página o el campo Título de la barra de herramientas de la ventana de documento (Figura 2-67). un conjunto de marcos que vuelve a cargar el contenido de los marcos de navegación cada vez que el visitante hace clic en un botón de navegación). Si lo desea. puede incluir también un vínculo a una versión sin marcos del sitio para los visitantes con navegadores que no admitan marcos o que no deseen utilizarlos. pueden resultar muy útiles. ((Dreamweaver le ayuda a crear varias páginas con la misma disposición con las Plantillas de Dreamweaver. incluir la barra de navegación en todas las páginas del sitio.5 Trabajando con Marcos 3. si desea que la barra de navegación aparezca a la izquierda. el diseño con marcos puede resultar complicado y. las páginas Web que no los incluyen logran prácticamente los mismos objetivos. Cuando se utilizan bien los marcos (por ejemplo.. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. Figura 2. Por eso. puede reemplazar la página por un conjunto de marcos o. en ocasiones.El uso más común de los marcos es la navegación.Para visualizar y configurar de las propiedades de un conjunto de marcos. Para establecer el título del conjunto de marcos seleccionado. si los utiliza. incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos.2. Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana).. para incluir controles de navegación estáticos en un marco permitiendo al mismo tiempo que cambie el contenido de otro). utilizar el inspector de propiedades para ver y establecer las propiedades de un conjunto de marcos.

58 . Los URL de las páginas con marcos no se muestran en el navegador. por lo que puede resultar complicado para un visitante marcar una página concreta (salvo que incluya código de servidor que le permita cargar la versión con marcos de una determinada página). si la barra de navegación se encuentra en otro marco. cuando el visitante se ha desplazado al final de una página de contenido muy grande en un marco no será necesario volver al principio de la página para acceder a la barra de navegación. (Por ejemplo.) Entre los inconvenientes de utilizar marcos se incluyen: Lograr un alineamiento gráfico preciso de los elementos en distintos marcos puede resultar difícil.2 Crear Páginas Web independiente. Comprobar las opciones de navegación puede llevar mucho tiempo.

a continuación. JavaScript y Flash que después se pueden incorporar a las página Web mediante Dreamweaver. Aunque el segundo cuatrismestre del curso esta dirigido esencialmente a crear este tipo de efectos o páginas dinámicas mediante distintas herramientas de los lenguajes de programación Java. a textos. Las imágenes de sustitución están automáticamente configuradas para que respondan al evento onMouseOver. marquesinas y otros. En algunos casos en esencia consiste en relacionar el efecto a un evento que desencadena la animación para que se produzca el dinamismo oportuno. Él mismo tiene dentro del propio programa una gran capacidad para crear elementos dinámicos como veremos en este Tema. Introducir la imagen de sustitución mediante uno de estos métodos: 59 .3. Una imagen de sustitución consta en realidad de dos imágenes: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Para crear una imagen de sustitución: En la ventana de documento. Tema 3 Trabajar con Elementos Dinámicos En una página se pueden aplicar efectos de animación de HTML dinámicos a cualquier elemento de una página. es decir. botones. párrafos.1 Imagen de sustitución Una imagen de sustitución es una imagen que. presione F12 para obtener una vista previa de la imagen en un navegador y. imágenes. sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución. No es posible ver el efecto de una imagen de sustitución en la ventana de documento de Dreamweaver. Si tienen tamaños distintos. Dreamweaver cambia automáticamente el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera. cambia cuando el puntero pasa sobre ella. Si desea ver el efecto de sustitución. al visualizarse en un navegador. pase el puntero por la imagen.

la imagen de sustitución dejará de funcionar.jpg). En la barra Insertar. Se abre el cuadro de diálogo Insertar imagen de sustitución (Figura 3-1). 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 sustitución. Elegir Archivo > Vista previa en el navegador o presione F12. (opcional) En el campo Al hacerse clic. En el navegador. seleccionar Común. hacer clic en Examinar y seleccionar la imagen que se desea que aparezca al cargarse la página o introducir la ruta del archivo de imagen en el cuadro de texto (anaya. para ello: En el campo Nombre de la imagen. Dreamweaver insertará un vínculo nulo (#) en el código HTML relativo al comportamiento de sustitución. En el cuadro de texto Imagen de sustitución. desplazar el puntero sobre la imagen original. Debe aparecer la imagen de sustitución (Figura 3-2). En el cuadro de texto Imagen original. Si se desea que las imágenes se carguen previamente en el caché del navegador. Elegir Insertar > Imágenes interactivas >Imagen de sustitución. hay que seleccionar la opción Carga previa de imagen de sustitución (seleccionarla).3 Trabajar con Elementos Dinámicos En la barra Insertar. Si se elimina el vínculo nulo.jpg). para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen. Figura 3. introducir un nombre para la imagen de sustitución (Editoriales). introducir un texto que describa la imagen para los usuarios que utilicen un navegador no gráfico. Hacer clic en Aceptar para cerrar el cuadro de diálogo Insertar imagen de sustitución. 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. 60 . ir a URL. Si no establece un vínculo para la imagen. seleccionar Común y luego hacer clic en el icono Imagen de sustitución.1: Ventana de insertar imagen de sustitución Vamos crear una imagen de sustitución con dos imagenes que aparecen en la carpeta Imagenes del Tutorial del Dreamweaver del segundo CD. En Texto alternativo. arrastre el icono Imagen de sustitución hasta la posición deseada de la ventana de documento.

3: Ventana de cambio de evento 3.) Un elemento de la barra de navegación puede tener cuatro estados: Arriba: la imagen que aparece cuando el usuario aún no ha hecho clic o interactuado 61 .2: Ventana del navegador Aunque las imágenes de sustitución están automáticamente configuradas para que respondan al evento onMouseOver.2 Barra de navegación Figura 3. le lleva a otra página. (hay que considerar el elemento de la barra de navegación como si fuera un botón. ya que cuando el usuario hace clic en él. Es posible cambiar el evento grupo de paneles pulsando sobre la pestaña Diseño>Comportamiento (Figura 3-3) Figura 3.3. Antes de usar el comando Insertar barra de navegación.2 Barra de navegación Una barra de navegación se compone de una imagen o un conjunto de imágenes cuya visualización cambia según las acciones que realice el usuario. Las barras de navegación proporcionan a menudo una forma fácil de desplazarse por las páginas y los archivos de un sitio. crear un conjunto de imágenes para los estados de visualización de cada elemento de navegación.

Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la imagen Abajo después de hacer clic en el elemento. utilizarla con marcos y editar los comportamientos de la página para mostrar distintos estados a medida que se accede a las páginas. Sobre: la imagen que aparece cuando el puntero pasa sobre la imagen Arriba.fue. los estados Arriba y Abajo. se carga una página nueva y la barra de navegación sigue mostrándose. y 3 de la carpeta de Imagenes del Tutorial. Aparecerá el cuadro de diálogo Insertar barra de navegación. copiarla en otras páginas del sitio. 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.es). 62 . Para crear una barra de navegación hay que realizar las siguientes operaciones: Elegir Insertar > Imágenes interactivas > Barra de navegación. el elemento aparece atenuado o gris. Abajo: la imagen que aparece después de hacer clic en el elemento.uned. La apariencia del elemento cambia (por ejemplo.3 Trabajar con Elementos Dinámicos con el elemento. Por ejemplo. Inserción de una barra de navegación Al insertar una barra de navegación. a continuación. 2. Por ejemplo. Es posible crear una barra de navegación. por ejemplo. Seleccionar la ficha Común de la barra Insertar y.es) y otro para ir a FUE (www. No es necesario incluir imágenes de barra de navegación para los cuatro estados. Seleccionar las opciones deseadas en el cuadro de diálogo. poner las direcciones web asociadas (Figura 3-4). Quizá sólo se necesiten. 2 y 3 y fue1. puede ponerse más clara) para que los usuarios sepan que pueden interactuar con él. pero el elemento se oscurece para indicar que está seleccionado. Utilizar las imagenes uned1. Vamos a crear un barra de navegación con dos botones uno para ir a la UNED (www. hacer clic en el botón Insertar barra de navegación. hay que asignar nombres a los elementos de la barra y seleccionar imágenes para ellas. cuando un usuario hace clic en un elemento.

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 poniendo en Borde el número 2 y como color del borde blanco (Figura 3-5).4: Insertar barra de navegación Hacer clic en Aceptar. Cambie las propiedades del los vínculos poniendo en Destino la opción _blank (Figura 3-6). Figura 3.6: Propiedades celda 63 .3. Figura 3.2 Barra de navegación Figura 3. 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.

visualizar en vista previa y hacer clic en cada uno de los botones (Figura 3-6). a continuación. para determinar qué archivo se abre cuando se hace clic en un elemento. seleccionar Medio y. hacer clic en el icono Botón Flash. se pueden añadir o quitar imágenes de la barra utilizando el comando Modificar barra de navegación. color de fondo y vínculos con otros archivos. Se puede personalizar un objeto de botón Flash añadiéndole texto. Para insertar un objeto de botón Flash en la ventana de documento.3 Botón Flash El objeto de botón Flash es un botón actualizable basado en una plantilla Flash. Los botones Flash pueden insertarse mientras se trabaja en la vista Diseño o en la vista Código. Aparecerá el cuadro de diálogo Modificar barra de navegación. para seleccionar otra ventana o marco para abrir un archivo o para reordenar las imágenes. Figura 3.7: Vista previa Modificación de una barra de navegación Una vez creada una barra de navegación para un documento. realice una de las siguientes operaciones: • En la barra Insertar. 3. Para abrir el cuadro de diálogo Insertar botón Flash. colocar el punto de inserción en el lugar en el que desea insertar el botón Flash. También se puede emplear este comando para cambiar una imagen o un conjunto de imágenes.3 Trabajar con Elementos Dinámicos Por último. Para modificar una barra de navegación: Elegir Modificar > Barra de navegación. 64 .

escribir el texto que se quiere mostrar. o a la ventana de vista Código si se está trabajando en el código. aunque se puede hacer clic en Aplicar para insertar el botón en la página y ver la apariencia que tendrá el texto.8: Insertar botón Flash • En el campo Vínculo (opcional). Si la fuente predeterminada de un botón no está disponible en el sistema. • Este campo sólo acepta cambios si el botón seleccionado tiene definido el parámetro {Button Text}. • Seleccionar el estilo de botón que se desea en la lista Estilo. Aparecerá el cuadro de diálogo Insertar botón Flash. • En el campo Tamaño. 65 . Esto se puede observar en el campo Muestra. introducir un valor numérico para el tamaño de la fuente.3 Botón Flash • En la barra Insertar. seleccionar la fuente que se desea utilizar. seleccionar Medio y arrastar el icono Botón Flash a la ventana de documento. • En el menú emergente Fuente. Elegir Insertar > Imágenes interactivas > Botón Flash. introducir un vínculo absoluto o relativo al documento para el botón.3. seleccionar otra fuente en el menú emergente. El texto que se escriba reemplazará {Button Text} al obtener una vista previa del archivo. • En el campo Texto del botón (opcional). Figura 3. No se verá la fuente seleccionada en el campo Muestra.

como su ancho. hay que guardarlo en el mismo directorio que el documento HTML actual para mantener los vínculos relativos al documento. especificar la ubicación en la que se abrirá el documento vinculado. • Hacer clic en Obtener más estilos para pasar al sitio Macromedia Exchange y descargar más estilos de botón. Se puede utilizar el inspector de propiedades para modificar los atributos HTML del botón. hacer clic en el objeto de botón Flash para seleccionarlo.9: Botón Flash Modificación de un objeto de botón Flash.swf) o escribir uno nuevo. alto y color de fondo. Para ello hay que escribir en la ventana del botón Flash las opciones que aparecen el Figura 3-8. introducir un nombre de archivo para guardar el nuevo archivo SWF. Como ejemplo. vamos a crear un botón para ir a la Web del curso de Internet. • En el campo Guardar como. y apararecerá la ventana del documento con el botón creado (Figura 3-9). Para modificar un objeto de botón Flash. 66 . • El inspector de propiedades muestra las propiedades del botón Flash. Figura 3. button1. Utilizar el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF).3 Trabajar con Elementos Dinámicos • En el campo Destino (opcional). Puede utilizar el nombre de archivo predeterminado (por ejemplo. Los marcos sólo aparecen en la lista si el objeto Flash se edita mientras se encuentra en un conjunto de marcos. Se puede seleccionar una opción de marco o ventana en el menú emergente. • Abrir el inspector de propiedades si es que no está abierto aún. Si el archivo contiene un vínculo relativo al documento. establecer el color del fondo de la película Flash. En la ventana de documento. • En el campo Color de fondo (opcional). • Hacer clic en Aplicar o Aceptar para insertar el botón Flash en la ventana de documento.

5) En el campo Color de sustitución. 3) Especifique los atributos de estilo. Aparecerá el cuadro de diálogo Insertar texto Flash. como negrita o cursiva. Utilice el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF). Introducir un tamaño de fuente (de puntos) en el campo Tamaño. Figura 3.4 Texto Flash El objeto de texto Flash permite crear e insertar un texto en formato Flash. establecer el color que aparece cuando el puntero pasa sobre el objeto de texto Flash.3. Esto permite crear un pequeño gráfico vectorial con fuentes de diseño y el texto elegido. Para crear un texto Flash hay que seguir los siguientes pasos: 1) Abrir el cuadro de diálogo Insertar texto Flash y realizar una de las siguientes operaciones: • En la barra Insertar. establecer el color del texto utilizando el selector de color o introduciendo un valor hexadecimal para la Web (como #FFFFFF). seleccionar Medio y hacer clic en el icono Texto Flash. • Elegir Insertar > Imágenes interactivas > Texto Flash.10: Insertar texto Flash 6) Introducir el texto deseado en el campo Texto. o a la ventana de vista Código si está trabajando en el código. 4) En el campo Color. 67 . 2) Seleccionar una fuente en el menú emergente Fuente. Este menú muestra todas las fuentes TrueType cargadas actualmente en el sistema. • En la barra Insertar. y el alineamiento del texto haciendo clic en los botones apropiados.4 Texto Flash 3. seleccionar Medio y arrastar el icono Texto Flash a la ventana de documento.

elegir un color de fondo para el texto. 11) Hacer clic en Aplicar o Aceptar para insertar el texto Flash en la ventana de documento. Puede utilizar el nombre de archivo predeterminado (por ejemplo. 9) En el campo Color de fondo. Para modificar o reproducir el objeto de texto Flash. tex1. para ello escriba en la ventana del botón texto Flash las opciones que aparecen el Figura 3-10. un comportamiento se añade a una página especificando en primer lugar una acción y. el evento que desencadena esa acción.5 Utilización de comportamientos Los comportamientos de Dreamweaver introducen en los documentos código JavaScript que permite a los visitantes interactuar con la página Web para modificarla de diversas maneras o para que se realicen determinadas tareas. y apararecerá la ventana del documento con el texto creado (Figura 3-11). vamos a crear un texto Flash para ir a la Web de Macromedia. seguir el mismo procedimiento utilizado para el botón Flash. 68 . introducir un vínculo absoluto o relativo al documento en el campo Vínculo. el campo Destino permite especificar el marco o la ventana de destino en la que se desea que se cargue el vínculo. Por ejemplo.11: Documento con el texto Flash Si se hace clic en Aplicar. Figura 3. 8) Si se ha introducido un vínculo. 10) En el campo Guardar como. 3. Un comportamiento es una combinación de un evento con una acción que desencadena ese evento. introducir un nombre para el archivo. a continuación. el cuadro de diálogo permanecerá abierto y se podrá obtener una vista previa del texto en el documento. Si el archivo contiene un vínculo relativo al documento.3 Trabajar con Elementos Dinámicos 7) Si desea asociar un vínculo con el objeto de texto Flash. En el panel Comportamientos. deberá guardarlo en el mismo directorio que el documento HTML actual para mantener los vínculos relativos al documento. Utilizar el selector de color o escribir un valor hexadecimal para la Web (como #FFFFFF).swf) o escribir uno nuevo.

el navegador llama la acción (el código JavaScript) que se ha asociado con ese evento. cada vez que se produce el evento especificado para ese elemento. Después de adjuntar un comportamiento a un elemento de página. si se adjunta la acción Mensaje emergente a un vínculo y se especifica que el evento onMouseOver desencadena esa acción. Por ejemplo. significa que no hay ningún comportamiento adjunto al elemento actualmente seleccionado. Los distintos elementos de la página tienen definidos diferentes eventos. en la mayoría de los navegadores onMouseOver y onClick son eventos asociados a vínculos. Un mismo evento puede desencadenar varias acciones distintas. Las acciones que incorpora Macromedia Dreamweaver MX han sido cuidadosamente desarrolladas por los ingenieros de Dreamweaver para proporcionar la máxima compatibilidad con los distintos navegadores. mientras que onLoad es un evento asociado a imágenes y a la sección body del documento. es decir. Las acciones constan de código JavaScript ya definido que realiza una tarea específica. Los comportamientos que ya se han adjuntando al elemento de página actualmente seleccionado aparecen en la lista de comportamientos (el área principal del panel).) Por ejemplo. Por ejemplo. no en los servidores. Utilización del panel Comportamientos Para abrir el panel Comportamientos. el navegador genera un evento onMouseOver para ese vínculo. (Los eventos que puede utilizar para desencadenar una acción determinada varían en función del navegador de que se trate. se ejecuta en los navegadores. en orden alfabético por eventos.5 Utilización de comportamientos El código del comportamiento es código JavaScript del lado del cliente. mostrar u ocultar una capa. las acciones se ejecutarán en el orden en que aparecen en la lista. A continuación. reproducir un sonido o detener una película Shockwave. Dreamweaver MX incluye unas 24 acciones de comportamiento. cada vez que un visitante pase el puntero del ratón sobre ese vínculo en el navegador aparecerá el mensaje en un cuadro de diálogo. y se puede especificar el orden en que esas acciones tienen lugar. Si hay varias acciones para un mismo evento. como abrir la ventana de un navegador. Si en la lista de comportamientos no aparece ningún comportamiento. Los eventos son mensajes generados por los navegadores que indican que un visitante de la página ha hecho algo. Se pueden encontrar otras acciones en el sitio Web de Macromedia Exchange. elegir Ventana > Comportamientos.3. Las opciones del panel Comportamientos son las siguientes: Acciones (+) Es un menú emergente de las acciones que se pueden adjuntar al elemento 69 . comprueba si hay código JavaScript (especificado en la página mostrada) al que deba llamar cuando se genere ese evento para ese vínculo. cuando un visitante mueve el puntero sobre un vínculo.

aparece un cuadro de diálogo en el que se pueden especificar los parámetros correspondientes a la acción. Cuando se selecciona una acción de esta lista. En código HTML. por ejemplo. puesto que sólo se mostrarán aquellos eventos que estén disponibles en todos los navegadores requeridos. si selecciona 3. Notas Mostrar eventos para (el submenú del menú Eventos) especifica los navegadores en los que deberá funcionar el comportamiento actual. se puede cambiar el orden en que se producen varias acciones para el evento onLoad. que se encuentra en la parte inferior izquierda de la ventana de documento. en la mayoría de los casos. Por ejemplo. pero todas las acciones onLoad permanecen juntas en la lista de comportamientos. el vínculo nulo se especifica de la siguiente forma: a href="javascript:.) Compruebe también que ha seleccionado el navegador o navegadores correctos en el submenú Mostrar eventos para.3 Trabajar con Elementos Dinámicos seleccionado actualmente. Este menú solamente se ve cuando hay un evento de la lista de comportamientos seleccionado. (Para seleccionar una etiqueta determinada. hay que asegurar que se está seleccionado la etiqueta o el elemento de página correcto. Aparecerán distintos eventos dependiendo del objeto seleccionado. menos eventos se mostrarán. Los botones de flecha están desactivados para las acciones que no se pueden desplazar arriba o abajo de la lista. Al seleccionar uno de estos nombres de eventos se añade automáticamente un vínculo nulo al elemento de la página seleccionado y se adjunta el comportamiento a ese vínculo en lugar de adjuntarse al propio elemento. significa que el elemento seleccionado no puede generar ningún evento. Eventos (el menú que aparece al hacer clic en el botón 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 acción.0 y posteriores. El orden de las acciones se puede cambiar solamente para un evento concreto. Botones de flechas arriba y abajo Desplazan la acción seleccionada hacia arriba o hacia abajo en la lista de comportamientos. usar el selector de etiquetas. cuanto más general sea el navegador de destino elegido.0 en adelante. Si todas las acciones aparecen atenuadas. 70 . Eliminar (-) Elimina la acción y el evento seleccionados de la lista de comportamientos. los únicos eventos que podrá seleccionar son aquellos que estén disponibles en todas las versiones de Netscape Navigator y Microsoft Internet Explorer desde la 3. La selección que se realiza en este menú determina los eventos que aparecerán en el menú emergente Eventos. lo que representa una lista de eventos muy reducida. Los navegadores antiguos generalmente admiten menos eventos que los más modernos y. Los nombres de eventos entre paréntesis solamente están disponibles para vínculos. Las acciones para un evento determinado se ejecutan en el orden especificado.". Si no aparecen los eventos esperados.

5 Utilización de comportamientos Aplicación de un comportamiento Se pueden adjuntar comportamientos al documento completo (es decir. Por ejemplo. algunos eventos (como onMouseOver) aparecen entre paréntesis. El navegador de destino que se elija determinará los eventos posibles para un elemento dado.0. borrará el comportamiento. pero si borra el vínculo JavaScript sin sustituirlo por otro vínculo. 5) Introducir los parámetros de la acción y hacer clic en Aceptar. Para adjuntar un comportamiento: 1) Seleccionar un elemento de la página. por ejemplo. en el cuadro de texto Vínculos del inspector de propiedades. Dreamweaver ajusta una etiqueta a alrededor de la imagen para definir un vínculo nulo. 71 . Para adjuntar un comportamiento a la página completa.0 y posteriores. 2) Elegir Ventana > Comportamientos para abrir el panel de comportamientos. la acción Reproducir línea de tiempo se mostrará atenuada si el documento no tiene líneas de tiempo. Internet Explorer 4.0 de cualquier otro navegador. hacer clic en la etiqueta <body> en el selector de etiquetas.es.3. Puede cambiar el valor del vínculo si desea convertirlo en un vínculo real con otra página. en este caso http://www.anaya. aparecerá un cuadro de diálogo en el que se mostrarán los parámetros e instrucciones de la acción. No se puede adjuntar un comportamiento a texto normal. Si no hay eventos para el objeto seleccionado. Estos eventos solamente están disponibles para vínculos. Cuando se elige uno de ellos. 3) Hacer clic en el botón de signo más (+) y elegir una acción del menú emergente Acciones. elementos de formulario o cualquier otro elemento HTML.0 o que la versión 3.jpg de la carpeta de Imagenes del Tutorial. Como ejemplo vamos a instalar un comportamiento que al pasar el ratón sobre una imagen aparecerá una ventana aparte con el contenido de una dirección URL:. Algunas acciones no funcionan en los navegadores antiguos. 6) Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la versión 4. No se pueden seleccionar las acciones que aparecen atenuadas en el menú. 4) Cuando se elige una acción. Al adjuntar un comportamiento a una imagen. para ello: 1) Seleccionar la imagen anaya . tiene una gama de eventos para cada elemento mucho más amplia que Navigator 4. El vínculo nulo es representado por javascript:. todas las acciones aparecerán atenuadas. como una imagen o un vínculo. imágenes. a la etiqueta body) o a vínculos. y la acción Controlar Shockwave o Flash aparecerá atenuada si el documento no contiene películas Shockwave o Flash. Es posible que se muestren atenuadas porque no existe un objeto específico en el documento actual.

Hacer clic en el botón de signo más (+) y elegir una acción Abrir ventana del navegador (Figura 3-12). Figura 3.12: Menú + 3) Aparecerá un cuadro de diálogo en el que se mostrarán los parámetros e instrucciones de la acción.13: Ventana del Navegador 4) Introducir los parámetros que aparecen en la figura 3-13 y hacer clic en Aceptar.3 Trabajar con Elementos Dinámicos 2) Elegir Ventana > Comportamientos para abrir el panel de comportamientos. 5) Elegir ahora en Eventos el evento onMouseOver 72 . Figura 3.

3. adjuntar el comportamiento al vínculo. Sin embargo. sí se puede adjuntar un comportamiento a un vínculo. el texto tendrá apariencia de vínculo. Comportamientos y texto No se puede adjuntar un comportamiento a texto normal. a continuación.5 Utilización de comportamientos Figura 3.14: Ventana de Eventos 6) En el panel de Diseño aparece el evento y la acción (Figura 3-16). Se puede cambiar el color del vínculo y eliminar el subrayado si no se desea que parezca un vínculo. Figura 3. Las etiquetas como p y span no generan eventos en los navegadores. Para adjuntar un comportamiento al texto seleccionado: 73 .15: Panel de Diseño 7) Por último. si bien. Por ello. de esta manera los visitantes del sitio no se darán cuenta de que hay una razón para hacer clic en ese texto. Hay que tener en cuenta que al hacerlo. por lo que no es posible desencadenar una acción a partir de esas etiquetas. comprobar en Vista previa del explorador el comportamiento. la manera más fácil de adjuntar un comportamiento a texto consiste en añadir un vínculo nulo (que no señala a nada) al texto y.

en el campo Vínculo. Figura 3. 3) Con el texto todavía seleccionado. Hacer clic en el vínculo nulo de JavaScript no produce efecto alguno en la página. introducir javascript:. Para ello: 1) Escriba en un documento nuevo la palabras Curso de Internet. 2) Con el texto todavía seleccionado. Asegurarse de incluir tanto los dos puntos como el punto y coma. Como ejemplo. El problema de usar un signo de almohadilla es que cuando un visitante hace clic en un vínculo. abrir el panel Comportamientos (Ventana> Comportamientos) y elegir Mostrar menú emergente (Figura 3-17). 1) Marcarlas y en el inspector de propiedades. Es necesario de incluir tanto los dos puntos como el punto y coma. Figura 3.3 Trabajar con Elementos Dinámicos 1) En el inspector de propiedades. 3) Elegir una acción en el menú emergente Acciones. algunos navegadores pueden saltar a la parte superior de la página. en el campo Vínculo.16: Ventana Propiedades 2) Guardar el documento. Si se desea. por lo que la solución de JavaScript suele ser la preferible.17: Ventana de comportamientos 74 . introducir los parámetros de la acción y seleccionar un evento que desencadene la acción. vamos a instalar un comportamiento que al pasar el ratón sobre una imagen haga aparecer una ventana aparte con un menú. introducir javascript:. como alternativa se puede usar un signo de almohadilla (#) en el campo Vínculo. abrir el panel Comportamientos (Ventana> Comportamientos).

comprobar en Vista previa del explorador el comportamiento (Figura 3-19). color:black". se desactiva el subrayado y el color del texto se establece en negro.3. Figura 3. use ese color en lugar del negro.5 Utilización de comportamientos 4) Crear un menú con las palabras Preguntas. Cambiar los parámetros de la acción (Figura 3-18). Al incluir este atributo.) 75 .18: Ventana menú emergente 5) Por último. si el texto contiguo es de un color distinto. Figura 3. (Por supuesto. Noticias. Buscar el vínculo En la etiqueta a href del vínculo. insertar este atributo: style="text-decoration:none. Reuniones.19: Vista previa Notas Para cambiar el aspecto de texto vinculado de modo que no parezca un vínculo: Abrir la vista Código en la ventana de documento eligiendo Ver > Código.

(Para descargar comportamientos es necesario estar conectado a la Web. vamos a instalar un comportamiento que nos permite crear un reloj o un calendario en una página web. (Figura 3-20). 4) Descargar e instalar el paquete de extensiones que se desee. Para descargar e instalar nuevos comportamientos desde el sitio Exchange: 1) Abrir el panel Comportamientos y elegir Obtener más comportamientos en el menú emergente Acciones (+).20: Acciones 76 . Figura 3. 1) Abrir el panel Comportamientos y elegir Obtener más comportamientos en el menú emergente Acciones (+). Como ejemplo.3 Trabajar con Elementos Dinámicos Descarga e instalación de comportamientos de otros proveedores Una de las características más interesantes de Dreamweaver es su capacidad de ampliación. Muchos de estos usuarios han decidido compartir sus extensiones con otros usuarios enviándolas al sitio Web Macromedia Exchange for Dreamweaver. Es decir. ofrece a aquellos usuarios que disponen de suficientes conocimientos de JavaScript la oportunidad de escribir código JavaScript y ampliar así las posibilidades de Dreamweaver.) 3) Examine o busque los paquetes. 2) Se abrirá su navegador principal y aparecerá el sitio Exchange.

3. en este ejemplo escoger el paquete que ya se habrá obtenido de la web denominado LiveClock. Figura 3. Aparecerá una ventana que indicará que ya está instalado el paquete (Figura 3-22).22: Ventana de Extension Manager 5) Para trabajar con el paquetes sólo hay que ir a Comandos y seleccionarlo (Figura 3-23) 77 . (Para descargar comportamientos es necesario estar conectado a la Web.5 Utilización de comportamientos 2) Se abrirá el navegador principal y aparecerá el sitio Exchange.) (Figura 3-21) Figura 3.21: Sitio Exchange 3) Examinar o buscar los paquetes.mxp que esta en la carpeta de Imágenes del Tutorial. 4) Instalar el paquete de LiveClock.mxp pulsando dos veces con el ratón sobre el archivo.

23: Menú de Comandos 6) Al seleccionarlo se abrirá una ventana donde se podrán cambiar las propiedades del reloj y calendario que se quieran instalar (Figura 3-24).24: Ventana de paramentros de LiveClock 78 .3 Trabajar con Elementos Dinámicos Figura 3. Figura 3.

5 y Nescape 4. Se sitúa el cursor de texto en la celda superior izquierda. Con la versión 4. se escribe el nombre del archivo informacion.jpg en el campo Nombres: y al pulsar el botón Aceptar se vuelve a la página donde aparece la celda con la imagen. En este tema se construye una página con una cierta distribución espacial utilizando tablas y otra análoga utilizando capas. es decir anidar tablas. no todos los navegadores reconocen esta versión. Se utilizarán los imágenes de la carpeta Graficos. y puede ocurrir que el diseñador componga una página que el navegador distorsionará geométricamente según el tamaño de la ventana del navegador y la capacidad de reconocer códigos. En el entorno Web no se dispone de la flexibilidad que esos programas poseen.4. o bien del menú principal se selecciona la opción Insertar y de su submenú la opción Imagen. Para insertar una imagen se pulsa el botón . Se repite esta operación con las restantes celdas y se modifican los ajustes de los contenidos de las celdas hasta formar la configuración de la Figura 4-1. se selecciona la carpeta Graficos en el campo Buscar en:. o bien en el menú principal se selecciona la opción Insertar y de su submenú la opción Tabla. o si es necesario. En este apartado se parte de que se ha creado una página en blanco. un documento que contiene cuadros de texto y cajas de imágenes en el procesador de texto Word. 79 Tema 4 Capas Los usuarios de procesador de textos y de programas de edición están acostumbrados a disponer los distintos objetos. como texto y gráficos.1 Paginas diseñadas con tablas Una forma de conseguir que los objetos estén situados en una estructura fija entre sí. por ejemplo. Aparece la ventana Seleccionar origen de imagen. si bien. . aunque Explorer 4. utilizar incluso en tablas dentro de tablas. dentro de cajas con una determinada distribución geométrica de dichas cajas de manera que se imprima lo diseñado. Aparece la ventana Insertar Tabla. se escribe un tres en el campo Filas: y un tres en el campo Columnas: y al pulsar el botón Aceptar se vuelve a la página donde aparezca la tabla vacía. Para insertar una tabla se pulsa el botón . consiste en insertar dichos objetos dentro de las celdas de una tabla.x o superiores versiones si la reconocen.0 de HTML se dispone del objeto Capa que solventa este hecho.

y Esp. imágenes.1: Diseño de página con una tabla de opciones Una vez seleccionada la tabla. En cualquier caso las celdas son conexas unas con otras. Una capa es pues una caja rectangular posicionada en una página donde pueden situarse los objetos 80 . Si se pulsa la tecla F12 se abre la página con el navegador establecido por defecto como se muestra en la Figura 4-2.2: Vista de la página con una tabla de opciones Sólo quedaría definir sobre esas imágenes los enlaces a las páginas que abrirían cada uno de los servicios.. con un cinco. en cada una de las celdas de una tabla se pueden insertar texto. celda.. con un cero. 4. así un conjunto de capas es algo similar a un conjunto de celdas que son independientes unas de otras. de la forma habitual. aunque las celdas pueden llegar a tener un tamaño distinto gracias a la unión o la división de éstas y otras modificaciones. . celda con otro cinco. Evidentemente. Dos capas pueden superponerse. Una capa es algo similar a una celda que se sitúa donde el usuario desea el usuario.4 Capas Figura 4. enlaces. pero puede ocurrir que una tape a la otra. Figura 4. consiste en insertar cada uno de dichos objetos dentro de una capa distinta. Otra forma de conseguir que los objetos estén situados en una estructura fija entre sí.2 Paginas diseñadas con capas Toda tabla en HTML posee una forma rectangular con celdas del mismo tamaño. se modifican en la ventana Propiedades (situada debajo de la ventana de edición) los campos Borde. Rell.

se desplaza el puntero hasta llegar al otro vértice que queda definido al liberar el botón.3: Ejemplo de capa en una página Conviene recordar que un rectángulo queda definido por su vértice superior izquierdo y su vértice inferior derecho y. Figura 4. Figura 4.4: Vista con el navegador del ejemplo de capa Una capa situada en una página puede tapar la información de dicha página como si a una hoja de texto se le pegara una nota tipo post-it.4.2 Paginas diseñadas con capas habituales de las páginas web. Pulsando el botón izquierdo de éste se marca un vértice y. Para insertar una capa se pulsa el botón y el usuario define directamente dentro de la 81 . ahora se parte de una página en blanco en la que se insertará una capa.5: Códigos HTML del ejemplo de capa Análogamente. Figura 4. que suele generarse con el ratón. manteniendo dicho botón pulsado.

Dicha capa (capa activa) es de unas dimensiones preestablecidas. Aparece la ventana Seleccionar origen de imagen. o bien del menú principal se selecciona la opción Insertar y de su submenú la opción Imagen. Sus bordes ahora son negros. se escribe el nombre del archivo informacion. Además. o bien selecciona la opción Insertar del menú principal y. basta situar el cursor del ratón y pulsar el botón izquierdo para que dicha capa se active y aparezca el cursor de texto sobre la capa.jpg en el campo Nombres: y al pulsar el botón Aceptar se vuelve a la página donde aparece la capa con la imagen. entonces sus bordes aparecen color gris. aparece el símbolo de una capa en el lugar de la página donde estuviera el cursor de texto. El panel Propiedades situado en la parte inferior de la pantalla muestra las características de dicha capa. Para insertar una imagen se pulsa el botón . la opción Capa. o sobre el símbolo de capa. El traslado de capas y su redimensión se realiza de la forma análoga a como se desplazan y redimensionan las ventanas en Windows.7: Página con capas con cuadrícula visible 82 . Al utilizar esta segunda opción.4 Capas página el rectángulo que forma la capa. de su submenú. con el cursor del ratón y pulsar el botón de la izquierda del ratón. Cuando no se está editando sobre una capa. sin embargo. Figura 4. Es el usuario quien debe situar el puntero del ratón sobre la pestaña anexa al rectángulo de la capa para desplazar la capa a la posición que desee. Tan sólo queda ajustar el tamaño de la capa a la imagen redimensionando la capa. se selecciona la carpeta Graficos en el campo Buscar en:. Figura 4. para modificar los valores de la capa simplemente hay que situarse sobre el borde activo.6: Ventana Propiedades con las propiedades de una capa Se sitúa el cursor de texto en la capa y se inserta la imagen adecuada.

3 Trabajo con capas y tablas Se puede repetir esta operación con las restantes capas y modificar los ajustes de los contenidos de las celdas hasta formar la configuración de la Figura 4-7. del submenú de ésta la opción Convertir y. de su submenú. Empecemos con la página de la sección 4. la apariencia de esta página ante el diseñador puede ser distinta que ante el usuario. Las tablas pueden estar diseñadas para que su tamaño se ajuste porcentualmente al tamaño de la ventana del navegador (principalmente si contiene texto. Además hay otra diferencia notable relativa al tamaño de la ventana del navegador que abre dichas páginas. Evidentemente. Sólo quedaría definir sobre esas imágenes los enlaces a las páginas que abrirían cada uno de los servicios. Para ello.3 Trabajo con capas y tablas Si se parte de una página diseñada con tablas y se quiere tener otra disposición geométrica de los elementos de dicha tabla. imágenes.8: Vista de la página con capas con el navegador Notas La diferencia principal entre las dos páginas anteriores es la distinta distribución espacial de las imágenes que sirve de menú inicial de navegación. Se selecciona del menú principal la opción Modificar. tablas. no es necesario rediseñar una nueva página puesto que se dispone de la opción de convertir las celdas de la tabla en capas. la opción Tabla en capas.1..4. Figura 4. Aparece la ventana Convertir tabla a capas donde se puede seleccionar 83 . enlaces. en cada una de las capas se pueden insertar texto. 4. se selecciona la opción Ver del menú principal y. Se recomienda cambiar de tamaño la ventana del navegador. las capas poseen un tamaño y posición invariable ante el navegador y no se reajustan al tamaño de la ventana de éste. de la forma habitual. pues con las imágenes no actúa así). del nuevo submenú. Conviene mostrar la cuadrícula si se están utilizando varias capas con el fin de que resulte más fácil la colocación de cada caja en la hoja. Si embargo. la opción Cuadrícula y del nuevo submenú se activa la opción Mostrar cuadrícula.. por lo tanto. .

2.10: Vista de la página una vez convertida la tabla en capas Análogamente. y se pulsa el botón Aceptar.11: Ventana Convertir capas en tabla 84 . la opción Convertir y. Figura 4. Partamos de la página de la sección 4. si se dispone de una página diseñada con capas.9: Ventana Convertir tabla a capas Figura 4. del nuevo submenú.4 Capas distintos campos. la opción Capas a tabla. Se selecciona del menú principal la opción Modificar. se puede conseguir que las capas se transformen en una tabla. en este caso todos. Aparece la ventana Convertir capas en tabla donde se puede seleccionar distintos campos y se pulsa el botón Aceptar. del submenú de ésta. Figura 4.

se selecciona la carpeta Graficos en el campo Buscar en:.4 Creación de capas con imagen de rastreo Figura 4. se escribe el nombre del archivo MAP. por ello.4. del submenú de ésta. Esta imagen puede ser situada en otra posición. puede ser eliminada. Para ello basta seleccionar Ver + 85 . Con este editor se disponer de la posibilidad de insertar una imagen en el fondo de la página.12: Vista de la página una vez convertidas las capas en tabla Notas Una capa es un objeto análogo a los otros que se utilizan en el editor. para poder distribuir las distintas capas con facilidad para no superponerlas. del nuevo submenú. Al pegar una capa (Ctrl+C o Edición + Pegar) aparece superpuesta con la inicial. la opción Cargar. por ello queda tapada salvo que sea trasladada a otro sitio. Se selecciona del menú principal la opción Ver.4 Creación de capas con imagen de rastreo El diseño de páginas puede ser tan complejo y con contenidos solapados en capas que puede ser bastante costoso su edición. que sólo es visible en plena edición e invisible al abrirla con el navegador. Aparece la ventana Seleccionar origen de imagen.GIF en el campo Nombres: y al pulsar el botón Aceptar se vuelve a la página donde aparece con la imagen en el fondo. la opción Imagen de rastreo y. 4. copiada y pegada. Se parte de una página en blanco. del submenú de ésta. Eliminar (copiar) una capa implica tenerla seleccionada y pulsar la tecla Del (Ctrl+C) o bien usar la opción Edición del menú principal y. Esta posibilidad se llama Imagen de rastreo. la subopción Borrar (Copiar).

Figura 4. del submenú.14: Vista de la página una vez convertida la tabla en capas Se repite la acción con las otras capas y basta pulsar la tecla F12 para que el navegador abra la página. Si se desea que ya no sea visible la imagen de rastreo basta seleccionar Ver + Imagen de rastreo y. se escribe 50 en el campo Y: y al pulsar el botón Aceptar se muestra la página donde la imagen está en su nueva posición. sin que se vea la imagen de rastreo. y se escribe 50 en el campo X:. en concreto a la parte de información. del submenú. Aparece la ventana Ajustar selección de la imagen de rastreo.4 Capas Imagen de rastreo y. 86 . la opción Mostrar. la opción Ajustar posición. Figura 4.13: Ventana Ajustar selección de la imagen de rastreo A continuación se inserta una capa de la forma descrita anteriormente y se ajusta a una parte de la imagen de rastreo.

16: Panel Disposición avanzada 87 .4. del nuevo submenú. Para ello. Aparece el panel en el vértice inferior derecho de la pantalla. la opción Otros y.15: Vista de la página al ocultar la imagen de rastreo Notas Se puede activar el panel Disposición avanzada donde se puede ver la lista de capas. de submenú de ésta. la opción Capas.4 Creación de capas con imagen de rastreo Figura 4. Figura 4. se selecciona del menú principal la opción Ventana.

Por ejemplo. el procesador de texto Word dispone de la definición de estilos que el usuario puede aprovechar e incrementar.. párrafos y aspectos que el usuario puede utilizar para darle la apariencia que desee al documento de texto que edita.5. pero la página editada puede no ser reconocida por el navegador que se utilice. cada vez que se abra con el navegador. Puede ocurrir que el navegador utilice los valores predefinidos para el texto. Figura 5. Estas características son apreciables en el panel Propiedades. En este tema se presenta la creación de nuevos estilos de texto y de una hoja de estilos CSS. Con la versión 4. capas.. es del estilo HTML Encabezado2 y está centrado (Heading2. Una hoja de estilo permite redefinir el aspecto de aquellos elementos de una página tales como párrafos. Las etiquetas HTML de los correspondientes párrafos se muestran en la siguiente figura.1 Formato de páginas con estilos HTML En esta sección se definirán varios estilos de párrafos y de bloques de texto que se usarán en una página ya confeccionada con anterioridad en este tutorial (Figura 5-3).0 de HTML se aceptan las hojas de estilo en cascada (CSS) que aparecieron con Internet Explorer 4. con la palabra Mini. h1) e igualmente está centrado. el tercero es un párrafo normal que está centrado y los restantes son párrafos normales (p). . listas. e incluso crear nuevos estilos almacenados en un único archivo que se asocia a la página. 172 . El primer párrafo. h2). celdas. Los editores de páginas suelen disponer de iguales características.1: Panel Propiedades del primer párrafo El segundo es Encabezado1 (Heading1. Los estilos para texto y párrafos en el entorno Web son standard y no se dispone de la flexibilidad de los procesadores. Tema 5 Estilos y Hojas de estilo Los procesadores de textos más comunes poseen distintos tipos de fuentes.5.

la opción Estilos HTML. En esta sección nos decantamos por esta segunda forma. caben dos posibilidades: cambiar a mano esas características cada vez que se quiera modificar. Esto mismo se puede hacer al pulsar el botón situado en la barra inferior del panel Diseño o al pulsar el botón derecho del ratón cuando el cursor está en zona blanca de este 173 . Como se trabajará con estilos HTML. entonces se activa la ficha correspondiente en ese panel.4: Panel Diseño Para crear un nuevo estilo HTML se selecciona la opción Texto del menú principal y.5 Estilos y Hojas de estilo Figura 5. Figura 5.3: Página utilizada Cuando se trabaja con estilos conviene abrir el panel Diseño que se sitúa en el vértice superior derecho de la pantalla.2: Etiquetas de los primeros párrafos Si ahora se desea cambiar la apariencia del texto de esta página. y del nuevo submenú se elige la opción Nuevo. o definir estilos de usuario de forma que nuevas modificaciones sólo requieran modificar dichos estilos. de su submenú. Figura 5.

• Normal: Arial en campo Fuente:. aparece el nuevo estilo en el panel Diseño. Estas acciones se pueden realizar igualmente usando el menú principal. Texto. Al seleccionar el resto de párrafos y pulsar el estilo Normal.5.6: Etiquetas de los nuevos estilos. 3 en campo Tamaño:. Figura 5. Para cambiar el aspecto de la página basta situar el cursor de texto en el primer párrafo y pulsar el estilo Cabecera2 que hay en el panel Diseño.5: Ventana Definir estilo HTML A continuación se definen nuevos estilos de párrafos: • Cabecera1: Análogo al anterior estilo pero con un 7 en el campo Tamaño: y un color verde en el campo Color:. tercer párrafo y estilo NormalCentrado. Igual con el segundo párrafo y el estilo Cabecera1. Figura 5. 174 . la página queda modificada. Cualquier otra modificación de aspecto de esta página consistirá en editar cada uno de los estilos creados y hacer las oportunas modificaciones. Estilos HTML y el estilo adecuado.1 Formato de páginas con estilos HTML mismo panel y elegir la opción 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 botón Aceptar. izquierda en el campo Alineación: y un color azul oscuro e el campo Color:. • NormalCentrado: Análogo al normal pero con centrado en el campo Alineación: e I en el campo Estilo:.

es decir. como que no son interpretadas totalmente por los navegadores 3. Como se ha mostrado en la sección anterior. También tiene algún inconveniente. . Notas Si la caja de aplicación automática de estilos de la barra inferior del panel Diseño no estuviese marcada. los estilos son definidos esencialmente para texto. se definirá un estilo personalizado o 175 . Aparece nuevamente la ventana Definir estilo HTML sobre la que se realizan los cambios. En esta sección se redefinirá una etiqueta HTML.x ni por Netscape 4. pulsar el botón derecho del ratón y elegir la opción Editar del menú emergente. Sin embargo. En estas hojas de estilo se pueden asignar nuevos estilos a las etiquetas existentes (etiquetas HTML) y crear nuevas etiquetas con su nuevo estilo. entonces el cambio de estilo requiere la acción de aplicar. 5.7.5 Estilos y Hojas de estilo Figura 5. Al tener separados estos dos componentes resulta más fácil realizar modificaciones en la forma de presentar los contenidos pues sólo hay que actuar sobre la hoja de estilos. incluso puede definir clases de etiquetas sobre las que definir un nuevo estilo creado por el usuario. y que las muchas páginas diseñadas con codificación HTML deberían ser rediseñadas pues no utilizan esta tecnología.7: Nueva apariencia de la página Para editar un estilo basta con situar el cursor del ratón sobre el nombre del estilo en el panel Diseño. o pulsar el botón derecho del ratón y elegir la opción Aplicar del menú emergente.2 Hojas de estilo CSS Las hojas de estilo son una solución más al deseo creciente de separar en una página web la parte que constituye su contenido de la parte que indica como se presentan dichos contenidos. las hojas de estilos tienen más aplicaciones pues se pueden definir distintos aspectos de los enlaces y la disposición de una página sin usar capas. seleccionar el estilo y pulsar el botón Aplicar de la mencionada barra.

en la cual el primer párrafo es Encabezado2 y centrado.2. y del nuevo submenú se elige la opción Nuevo estilo CSS.5.9: Vistas del panel Propiedades Si el cursor de texto estaba situado en el párrafo Encabezado1. el segundo es Encabezado1 y centrado. Figura 5. entonces aparece la ventana Definir estilo HTML tal y como aparece en la Figura 5-10. y el resto es párrafo común.8: Vistas del panel Diseño con la ficha Estilos CSS Se parte de la página mostrada en la Figura 5-3. Para estas acciones se dispondrá del panel Diseño con la ficha Estilo CSS activa. entonces sólo hay que modificar los campos para que queden como en la mencionada figura. Igualmente.1 Redefinición de una etiqueta HTML en una página Para redefinir la etiqueta h1 se selecciona la opción Texto del menú principal y. Esto también se puede hacer al pulsar el botón situado en la barra inferior del panel Diseño o al pulsar el botón derecho del ratón cuando el cursor está en la zona blanca de este mismo panel y elegir la opción Nuevo estilo CSS. abrir el campo de elección múltiple anexo y optar por la opción Nuevo estilo CSS. la opción Estilos CSS. el tercero es un párrafo común centrado. 5. 176 . Si estaba situada en otro lugar. de su submenú. esto se puede hacer actuando sobre el panel Propiedades al pulsar el botón existente al lado del campo Formato de dicho panel. Figura 5.2 Hojas de estilo CSS clase y un estilo relativo a un enlace.

177 . Figura 5.11: Contenidos de las cuatro primeras categorías Las siguientes categorías no se modifican. Al pulsar el botón Aceptar. Se modifican los campos con los contenidos que aparecen en las cuatro figuras siguientes.10: Ventana Nuevo estilo CSS En este caso esta modificación sólo afectará a esta página.5 Estilos y Hojas de estilo Figura 5.. aparece la ventana Definición de estilo CSS para... en la cual hay distintos campos clasificados en ocho categorías.

13: Nuevo aspecto de la página de trabajo Notas Esta redefinición de la etiqueta h1. Editar hoja de estilos. Para ello se selecciona Texto + Estilos CSS y.14: Ventana Editar hoja de estilos 178 . se puede editar. del nuevo submenú. Figura 5.12: Categorías 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.5.2 Hojas de estilo CSS Figura 5.

5. de su submenú.2 Crear un estilo personal en una hoja de estilos Un estilo personal es aquél que puede ser aplicado a distintas etiquetas. es decir un modificador de etiqueta.. abrir el campo de elección múltiple anexo y optar por la opción Nuevo estilo CSS.15: Ventanas para estilo personal Aparece la ventana Definición de estilo CSS para. (clase). y del nuevo submenú se elige la opción Nuevo estilo CSS.2. Tamaño: con 14 pix y Color: con un color azul. esto se puede hacer con el panel Propiedades al abrir el campo de elección múltiple anexo al campo Formato y elegir por la opción Editar estilo CSS. Para definir un estilo personal se selecciona la opción Texto del menú principal y. que será el nombre de la clase.5 Estilos y Hojas de estilo Esto también se puede hacer al pulsar el botón de la barra inferior del panel Diseño o al pulsar el botón derecho del ratón cuando el cursor está en la zona blanca de ese panel y elegir la opción Editar hoja de estilos. esto se puede hacer actuando sobre el panel Propiedades al pulsar el botón existente al lado del campo Formato de dicho panel. Igualmente. Figura 5. Esto también se puede hacer al pulsar el botón situado en la barra inferior del panel Diseño o al pulsar el botón derecho del ratón cuando el cursor está en la zona blanca de este mismo panel y elegir la opción Nuevo estilo CSS. la opción Estilos CSS. este tipo de estilo es una clase que modifica cada etiqueta HTML sobre la que actúa. en la cual sólo se modifican los campos Fuentes: con Times New Roman.. el campo Tipo: con el valor Crear estilo person. y el campo Definir en: con Nuevo archivo de hoja de estilos. Aparece la ventana Definir estilo HTML y se modifican los campos Nombre: con la expresión TextoRoman14.. En realidad. 179 . Al pulsar el botón 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 botón Guardar. Igualmente. correspondientes a la categoría Tipos.

se vuelve a la ventana de trabajo y se puede apreciar que tanto en el panel Diseño como en el panel Propiedades está disponible este nuevo estilo. se seleccionan los párrafos cuarto y quinto (p) y se les aplica este mismo estilo desde el panel Diseño. primero se selecciona el párrafo segundo (h1) y se le aplica el estilo TextoRoman14 desde el panel Propiedades. se pulsa el botón derecho del ratón y se elige la opción Aplicar del menú emergente.5. para ello.17: Vista del panel Diseño Figura 5.2 Hojas de estilo CSS Figura 5. Figura 5. Después. se selecciona el estilo.16: Contenidos de las cuatro primeras categorías Al pulsar el Aceptar. 180 .18: Vista del panel Propiedades Para comprobar que este estilo personal puede actuar sobre distintas etiquetas.

según estén en la propia página o estén en otro archivo. En la parte derecha de la Figura 5-20 se puede observar que el segundo estilo afecta a varios párrafos distintos con el mismo modificador. mientras que el segundo estaba definido en un archivo aparte de la página.2.5 Estilos y Hojas de estilo Figura 5.19: Nuevo aspecto de la página de trabajo Notas La redefinición de la etiqueta h1 y el nuevo estilo TextoRoman14 de HojsEstilo1 quedan referenciados en la cabecera (head) de la página. Figura 5. El primero como código en la página y el segundo con una referencia a un archivo. se dirá que se trata de hojas de estilo internas o externas.20: Vistas de los códigos de la página 5. Si suponemos que se han diseñado diversos estilos.3 Utilización de una hoja de estilo El primer estilo creado estaba definido dentro de la misma página. Evidentemente las hojas de estilo 181 .

para ello basta seleccionar la opción Archivo del menú principal y.CSS. 182 . Si los estilos están definidos en la misma página se pueden exportar a una hoja de estilos externa.CSS Si se copia el bloque correspondiente a esta definición.21: Ventana Exportar estilos Esta hoja de estilo puede ser editada con cualquier editor de texto. pero también puede ser editada con este mismo programa. Aparece la ventana Exportar estilos como archivo CSS en la que se escribe miHojaEstilos en el campo Nombre: y se pulsa el botón Guardar.2 Hojas de estilo CSS externas son de mayor utilidad para el diseñador de una web. Se pega una primera vez y otra más cambiando la expresión h1 por h2 (como otro modificador de etiquetas HTML). de su submenú. la opción Exportar. Figura 5. Para ello sólo hay que abrir el archivo mHojaEstilos. Figura 5.2. Evidentemente sólo se ha exportado el estilo correspondiente a h1.2.22: Vista del archivo miHojaEstilos.5. y del nuevo submenú se elige la opción Estilos CSS. éste puede ser pegado en la hoja externa que utilizamos en el Apartado 5. pues puede utilizar esta misma hoja para distintas páginas.

Figura 5.24: Aspecto final de la página 183 .CSS Basta guardar estos cambios y abrir de nuevo la página para ver el nuevo aspecto.23: Vista de las modificaciones en HojaEstilo1.5 Estilos y Hojas de estilo Figura 5.

es lo que nos referimos como página dinámica. En realidad el navegador no accede a la página que el administrador diseñó. si una consulta no dispone de datos obtenidos en tiempo real. Este efecto se puede conseguir con algún tipo de botón. al usuario se le presenta la información tal y como la ideó el autor de la página. la información no deja de ser estática en una página de este tipo. En esencia. el acceso a la base de datos de libros de la biblioteca no tendrá ninguna utilidad. es decir. Se hace necesario editar dicha página para actualizar nuevamente toda la información. Como ejemplo pensemos en el acceso (vía web) a una biblioteca en busca de los libros disponibles de un autor.6. una página con los registros de libros de existentes en esa biblioteca relativos al autor solicitado. Estableciendo alguna marca sobre aquellos libros que están disponibles para el usuario en ese momento. la información suele ser estática en una página web. Evidentemente. En cualquier página web se puede incorporar uno o varios efectos dinámicos que la dotan de una cierta interactividad con el usuario. El servidor de páginas de la biblioteca enviará como respuesta cualquier solicitud. Para ello utiliza la información obtenida o generada a partir de alguna aplicación o programa. A una página de este tipo que permite dar respuesta a problemas similares al de la consulta bibliotecaria. 101 . Tema 6 Bases de datos En este tema se presenta un ejemplo que nos permite observar una forma de crear páginas que hacen uso de los datos de una base datos almacenada en un servidor de aplicaciones web. es decir. alguna imagen o alguna capa. Un caso distinto es el de aquellas páginas que al ser accedidas con el navegador.1 Páginas dinámicas En general. el servidor crea y envía una página no almacenada en el servidor. se reconstruyen automáticamente con información procedente de distintas fuente. Concretamente. de esta manera se logra modificar el aspecto de la página en relación con la actuación del ratón del usuario navegante. Se accede a una página que el servidor recompone temporalmente utilizando como modelo la página supuestamente accedida. la información no cambia. Sigue ocurriendo que dicha información es la que se introdujo en el momento de su creación o última modificación.

Una forma mas es utilizando el botón de texto sitio que aparecen en la ficha Bases de datos del panel Aplicación cuando no hay definida ninguna base. Esto se puede hacer de varias formas. Esta facultad se suele expresar como que el servidor web es además un servidor de aplicaciones en el lenguaje correspondiente. es necesario que el servidor web que envía una página dinámica no sea simplemente un servidor de páginas HTML.2 Servidor de páginas Al confeccionar una página dinámica se necesita introducir algún conjunto de instrucciones escritas en un código adecuado dentro de la página (algo similar a una cierta programación). es decir. quizás sólo mostraría parte del código en el mejor de los casos. la opción Nuevo sitio.. JSP (Servidor de Páginas Java) y otros. entonces el servidor web debe disponer de la capacidad de servir páginas ASP Javascritp. permite establecer el sitio siguiendo un conjunto de ventanas a modo de asistente para definir el sitio. Crear la página activa es sólo una parte del trabajo que hay que hacer.1: Panel Resultados Para establecer el sitio se selecciona la opción Sitio del menú principal y. Figura 5. Con independencia del lenguaje empleado para escribir las instrucciones. En definitiva que disponga de la facultad de interpretar las páginas antes de enviar la interpretación de la página. sea un servidor de este tipo de páginas.. El usuario de este editor puede trabajar con facilidad haciendo uso de las herramientas correspondientes a diferentes tipos de códigos o de lenguajes como ASP (Servidor de Páginas Activas). de su submenú. pues en ese caso.6 Bases de datos 6. Una vez diseñada y editada una página dinámica. otras es usando el botón de texto sitio que aparecen en la ficha Depuración del servidor del panel Resultados situado en la parte inferior de la pantalla. con la ficha Avanzadas activa. es un servidor web y un servidor de páginas activas (Active Server Pages). es decir. Al aparecer la ventana Definición del sitio para. Como ejemplo podemos indicar que un servidor gestionado con Internet Information Server de Microsoft permite servir páginas HTML y páginas ASP. está debe estar disponible sobre un servidor adecuado. No sirve de nada diseñar páginas dinámicas y situarlas sobre un servidor que no tiene la capacidad de recomponer las páginas. Si el dinamismo de las páginas se desarrolla con acceso a datos usando código Javascritp. La otra ficha de esta ventana. Una de ellas es la que mostramos usando el menú principal. Básicas. A la hora de editar una página dinámica con Dreamweaver debe establecerse el sitio donde se almacenarán las páginas. que no siempre depende del diseñador de la página. 102 . estas instrucciones son interpretadas por un navegador como puro texto o simplemente como comentario. Dreamweaver es un buen editor de este tipo de páginas y facilita insertar determinadas instrucciones en aquellos lugares de la página que se reservan para presentar los datos que se obtendrán en tiempo real. Por ello. La otra parte es publicar esa página en un servidor.

6.2 Servidor de páginas

Figura 5- 2: Ficha Básicas para definir el sitio

Para declarar donde se almacenarán los archivos que se crearán se elige la opción Datos locales dentro del cuadro Categoría. 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 raíz local:

Figura 5- 3: Declaración sitio local

Para declarar donde el lugar de hospedaje en el servidor de estos archivos se elige la opción Datos remotos dentro del cuadro Categoría. 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: Declaración sitio remoto

A la hora de diseñar una página dinámica 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 opción Servidor de pruebas dentro del cuadro Categoría. 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: Declaración sitio remoto

104

6.3 Edición de una página dinámica

6.3 Edición de una página dinámica Como ejemplo de página dinámica, se desarrollará una página activa con el acceso a la base de datos que incorpora el programa Dreamweaver al ser instalado, utilizando como código de programación el lenguaje JavaSript. Para crear una nueva página dinámica se selecciona la opción Archivo del menú principal y, de su submenú, la opción Nuevo. Al aparecer la ventana Nuevo Documento con la ficha General activa, se elige “Página activa” en el campo Categoría:, “ASP JavaSript” en el campo Página dinámica: y se pulsa el botón Crear.

Figura 5- 6: Ventana Nuevo Documento

El control vuelve a la ventana de edición con una página en blanco, supuesto que esté activo el botón Mostrar vista de diseño, . Puede verse el código JavaScriptal pulsar el botón Mostrar vista código, .

Figura 5- 7: Vista código

En esta página en blanco insertaremos un párrafo con el mensaje “La información que se muestra en esta página está obtenida de una base de datos” con el fin de recordar al navegante que la página que visita es una página activa y que se construye con los datos
105

106 . Si se pulsa con el ratón sobre dicho botón. Una vez superada la prueba de conexión se envía un mensaje al usuario de ese hecho. se abre un menú desplegable con dos opciones. en la cual sólo se modifican los campos Nombre de conexión: con la palabra MiBase. Ahora. En este menú elegimos la opción Nombre de la fuente de bases de datos (DSN) para poder hacer la conexión a la base de datos.6 Bases de datos obtenidos de una base de datos. a la derecha de la ventana de edición. Figura 5. se despliega el panel Aplicación. Al crearse la página de extensión asp. Figura 5. y que podremos utilizar dentro de la página. la conexión MiBase aparece (comprimida) sobre en el panel Aplicación. Nombre de fuente de datos(DSN): con la base GlobalCar que debe ser buscada al pulsar el botón Definir.9: Ventana Nombre de fuente de datos Conviene comprobar que la conexión definida está correctamente establecida. las vistas y los procedimientos que lo constituyen. con lo cual se vuelve a la ventana de edición. sobre el cual se muestra el botón como único botón operativo en dicho panel. Para ello basta pulsar el botón Prueba.8: Panel Aplicación Aparece la ventana Nombre de fuentes de datos (DSN). se continua pulsando el botón Aceptar. Expandimos MiBase para ver las tablas.

sobre la cual se modifican los siguientes campos: • . pulsando el botón Prueba. con lo que se muestra la ventana Declaración SQL de prueba.6.Campo Columnas: con el valor excluyente Seleccionado • . Al soltarlo aparece la ventana Juego de registros.Campo Nombre: con la expresión TablaRegistros1 • .Se seleccionan del menú de campos. FIRST_NAME. TELEPHONE y EMAIL Figura 5.3 Edición de una página dinámica Figura 5. los campos de la tabla COMMENT_ID. basta arrastrar el icono de dicha tabla sobre la página. 107 . LAST_NAME.11: Ventana Juego de registros Siempre conviene comprobar que la correción del proceso establecido.10: Panel Aplicación con una base de datos Si se desea insertar la tabla COMMENTS visible en el nudo Tablas del panel Aplicación dentro de nuestra página.

se pulsa el botón Aceptar.12: Ventana Declaración SQL de prueba Una vez superada la prueba se vuelve a la ventana Juego de registros. apareciendo un mensaje informativo sobre Figura 5.14: Panel Propiedades con información de la tabla 108 . Esto queda reflejado al ser dicha tabla en el panel Propiedades de la parte inferior de la pantalla.13: Ventana de confirmación del juego de registros En la ventana de edición se observa que se insertó código Javascript en la cabecera de la página relativo a la tabla de datos. Figura 5.6 Bases de datos Figura 5.

3 Edición de una página dinámica Figura 5.6. cada uno de estos pueden ser insertado directamente en la página con nada más que arrastrar el icono del campo sobre la página y soltarlo en ella. que expandiremos para ver los campos que podremos utilizar dentro de la página. Una vez visibles los campos.15: Vista de la página con código Al mirar sobre en el panel Aplicación aparece activa la ficha Vinculaciones con la referencia TablaRegistos1 (comprimida).16: Campo insertado Una vez terminada y guardada la página se puede comprobar como queda el aspecto de la página al acceder con el navegador pulsando la tecla F12. o se dispone de 109 . Notas Si no se tiene declarado acceso un servidor de pruebas. como es el caso. Figura 5.

entonces no podrá ver la página adecuadamente. De cualquier forma.18: Vista página 110 .17: Mensaje sobre el servidor de pruebas En el caso de contestar no. Figura 5. Figura 5. Dreamweaver muestra una ventana informativa para que indicar si se declara en ese momento el servidor de pruebas o no.6 Bases de datos una ruta de acceso incorrecta a él. se muestra simplemente el código.