Nombre Alumno

Año Escolar

INFWEB141100
 Dreamweaver CS4

CONTENIDO

UNIDAD 1. CONCEPTOS BÁSICOS DE DREAMWEAVER CS4............1

1.1. Qué es Dreamweaver CS4.........................................................................1
1.2. Novedades de Dreamweaver CS4..............................................................1
1.3. Editar páginas web......................................................................................3
1.4. Cómo tener una página en Internet.............................................................4
1.5. Arrancar y cerrar Dreamweaver CS4..........................................................5
1.6. Abrir y guardar documentos........................................................................6
1.7. Mi primera página........................................................................................8

UNIDAD 2. EL ENTORNO DE DREAMWEAVER CS4.........................15

2.1. La pantalla inicial.......................................................................................15
2.2. Las barras..................................................................................................16
2.3. Inspectores y paneles................................................................................19
2.4. Vistas de un documento............................................................................25
2.5. La ayuda....................................................................................................28

UNIDAD 3. CONFIGURAR UN SITIO LOCAL......................................29

3.1. Introducción...............................................................................................29
3.2. Crear o editar un sitio web sin conexión a Internet...................................30
3.3. Abrir un sitio...............................................................................................33
3.4. Ver el sitio..................................................................................................33
3.5. Subir archivos al servidor..........................................................................35
3.6. Propiedades del documento......................................................................37
3.7. Los colores................................................................................................43

UNIDAD 4. EL TEXTO: PROPIEDADES Y FORMATO........................45

4.1. Características del texto............................................................................45
4.2. Listas.........................................................................................................49
4.3. Caracteres especiales...............................................................................50
4.4. Estilos CSS. Introducción..........................................................................52
4.5. Crear un estilo personalizado....................................................................53
4.6. Definir o editar un estilo.............................................................................56
4.7. Aplicar un estilo.........................................................................................62

-i-
 Dreamweaver CS4

4.8. Hojas de estilos.........................................................................................63

UNIDAD 5. HIPERENLACES.................................................................67
5.1. Introducción...............................................................................................67
5.2. Tipos de referencia....................................................................................67
5.3. Crear enlaces............................................................................................70
5.4. Destino del enlace.....................................................................................73
5.5. Formato del enlace....................................................................................74
5.6. Enlace a correo electrónico.......................................................................76
5.7. Vínculos rotos............................................................................................77

UNIDAD 6. IMÁGENES..........................................................................81
6.1. Introducción...............................................................................................81
6.2. Insertar una imagen...................................................................................83
6.3. Propiedades de una imagen.....................................................................85
6.4. Cambiar el tamaño de una imagen...........................................................93
6.5. Imagen de sustitución. Rollover................................................................96
6.6. Barra de navegación.................................................................................97
6.7. Objetos inteligentes...................................................................................99

UNIDAD 7. TABLAS............................................................................101
7.1. Introducción.............................................................................................101
7.2. Insertar una tabla.....................................................................................102
7.3. Rellenar las celdas..................................................................................103
7.4. Seleccionar elementos de una tabla.......................................................104
7.5. Formato de tabla.....................................................................................107
7.6. Formato CSS...........................................................................................108
7.7. Cambiar tamaño de tabla y celdas..........................................................110
7.8. Añadir y eliminar filas y columnas...........................................................111
7.9. Anidar, dividir y combinar celdas.............................................................112
7.10. Modos de tabla......................................................................................114
7.11. Adaptar webs a distintas resoluciones..................................................115

UNIDAD 8. MARCOS...........................................................................119
8.1. Introducción.............................................................................................119

- ii -
 Dreamweaver CS4

8.2. Crear marcos...........................................................................................120

8.3. Seleccionar marcos.................................................................................123
8.4. Guardar....................................................................................................123
8.5. Configurar marcos...................................................................................124
8.6. Contenido del marco...............................................................................126

UNIDAD 9. FORMULARIOS................................................................129
9.1. Introducción.............................................................................................129
9.2. Elementos de formulario.........................................................................130
9.3. Crear formularios.....................................................................................133
9.4. Validar formularios...................................................................................134

UNIDAD 10. MULTIMEDIA..................................................................137

10.1. Películas Flash (SWF)...........................................................................137
10.2. Sonido....................................................................................................140
10.3. Vídeos....................................................................................................142

UNIDAD 11. LAS PLANTILLAS..........................................................145

11.1. Introducción...........................................................................................145
11.2. Crear plantillas.......................................................................................146
11.3. Establecer regiones editables en una plantilla......................................148
11.4. Basar páginas en una plantilla..............................................................150

UNIDAD 12. HTML DESDE DREAMWEAVER...................................155

12.1. Etiquetas................................................................................................155
12.2. Entidades HTML....................................................................................156
12.3. El inspector de código...........................................................................157
12.4. Completar las etiquetas.........................................................................159
12.5. Contraer y expandir código...................................................................162
12.6. Errores en el código..............................................................................163
12.7. Buscar y reemplazar..............................................................................166

UNIDAD 13. OTROS ELEMENTOS.....................................................171

13.1. Marquesinas..........................................................................................171
13.2. Fecha.....................................................................................................172

- iii -
 Dreamweaver CS4

13.3. Regla horizontal.....................................................................................173

13.4. Código de otras páginas.......................................................................174

UNIDAD 14. CAPAS............................................................................177

14.1. Introducción...........................................................................................177
14.2. Insertar una capa...................................................................................178
14.3. Formato de una capa............................................................................180
14.4. Capas prediseñadas..............................................................................182

UNIDAD 15. COMPORTAMIENTOS...................................................185

15.1. Introducción...........................................................................................185
15.2. Insertar un comportamiento..................................................................186
15.3. Mostrar-Ocultar elementos....................................................................188
15.4. Llamar JavaScript..................................................................................190

UNIDAD 16. COMPORTAMIENTOS AVANZADOS............................193

16.1. Mensajes emergentes...........................................................................193
16.2. Texto de la Barra de Estado..................................................................194
16.3. Carga Previa de Imágenes....................................................................196
16.4. Abrir Ventana del Navegador................................................................198
16.5. Cambiar propiedades CSS....................................................................200
16.6. Comprobar Plug-ins...............................................................................201
16.7. Menús de Salto......................................................................................202

UNIDAD 17. ESTILOS CSS AVANZADOS.........................................205

17.1. Aplicar estilos CSS................................................................................205
17.2. Sintaxis CSS..........................................................................................208
17.3. Selectores compuestos.........................................................................210
17.4. Selectores de atributo...........................................................................212
17.5. Pseudo-clases y Pseudo-elementos CSS............................................213
17.6. Orden de aplicación de los estilos CSS................................................214
17.7. Controles de fuente...............................................................................216
17.8. Espaciado y alineación..........................................................................219
17.9. Apariencia del texto...............................................................................221
17.10. Controles de ratón...............................................................................222

- iv -
 Dreamweaver CS4

17.11. Controles de lista.................................................................................223

17.12. Controles de fondo..............................................................................226
17.13. Controles de margen interior y exterior...............................................228
17.14. Bordes.................................................................................................233
17.15. Elementos flotantes.............................................................................235
17.16. Controles de elementos de bloque y en línea.....................................241
17.17. Controles de posición..........................................................................244
17.18. Controles de visibilidad.......................................................................248

-v-
 Dreamweaver CS4

Unidad 1.
Conceptos básicos de Dreamweaver CS4

1.1. Qué es Dreamweaver CS4

Dreamweaver CS4 es un software fácil de usar que permite crear páginas web
profesionales.

Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente

diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código
HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin
salir del programa.

1.2. Novedades de Dreamweaver CS4

En este punto comentaremos las características que aporta esta nueva versión sobre
la anterior.

 Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite
cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y
cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe, como
Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada
ocasión (clásico, programador, diseñador, etc.) pero también tenemos la posibilidad de
crear el nuestro propio de forma muy sencilla.

 Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como
veríamos la página en un navegador. Si hemos incluido elementos interactivos en

-1-
 Dreamweaver CS4

nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc,
podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en
un navegador.

 Navegador de código. La función de Navegador de código muestra las fuentes de

código que afectan a la selección que tengamos activa, pueden ser CSS (hojas de
estilos en cascada), funciones JavaScript externas, plantillas de Dreamweaver, archivos
de origen de iFrame, etc.

 La nueva barra de Archivos relacionados muestra todos los archivos que de una
forma u otra contribuyen al diseño final de nuestra página, como hojas de estilo css,
archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivo a
otro cómodamente y tener una visión mucho más clara de todos los archivos con los que
estamos trabajando en nuestro sitio web.

 Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda

dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste
último nos permite crear y editar nuestros estilos de forma cómoda y sencilla.

 Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crear

objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las páginas
web, de forma que el archivo original de Photoshop y la imagen optimizada en
Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiar
características de los objetos inteligentes de imagen directamente desde Dreamweaver.

 Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones

editables. De esta forma los usuarios previamente habilitados podrán actualizar el
contenido de estas regiones de la página web directamente desde el navegador, sin
necesidad de tener un editor de páginas web instalado.

 Software Subversion. Subversion es uno de los más usados sistemas de control de

versiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con
el repositorio de versiones, facilitando el trabajo a los profesionales que empleen este
sistema.

-2-
 Dreamweaver CS4

 Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas de

forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad
de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones
dinámicas con la tecnología Spry.

1.3. Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario
crear los documentos con la extensión HTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en
Windows para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo
utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada
uno de los elementos de la página, al mismo tiempo que es más complicado crear una
apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados
con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y
sobre todo al principio, nos ayudará a aprenderlo rápidamente.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más
utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es
Adobe Dreamweaver.

-3-
 Dreamweaver CS4

Además de Dreamweaver, existen otra serie de buenos editores de páginas web,

como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta
Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna
empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas
del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa,
del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones:
poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay
que tener también en cuenta que estas empresas deben generar ingresos de alguna forma,
por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad
que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de

una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un

dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un
dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar
repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas.
Es posible registrar un mismo nombre con distintas terminaciones, como por
ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya

que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el

número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de
una base de datos para poder acceder a ella a través de programación vía Web, aunque
esto último será útil sólo para usuarios avanzados.

-4-
 Dreamweaver CS4

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy
sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que
luego querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que
subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los
archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos
y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará
fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o
eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te
asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de
los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta

escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan linux)
distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la
imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas
perdidas buscando fallos.

1.5. Arrancar y cerrar Dreamweaver CS4

 Veamos las dos formas básicas de arrancar Dreamweaver CS4.

 Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la

pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú.
Al colocar el cursor sobre Todos los programas aparece otra lista con los
programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y
haz clic sobre él para arrancar el programa.
 Desde el icono de Dreamweaver CS4 del Escritorio.

-5-
 Dreamweaver CS4

 Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes

operaciones:

 Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier

ventana de Windows.
 Pulsar la combinación de teclas Alt + F4.
 Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar

Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

 Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

 Hacer clic en el botón abrir de la barra de herramientas estándar (si está

visible).
 Pulsar la combinación de teclas Ctrl + O.
 Hacer clic sobre el menú Archivo y elegir la opción Abrir.
 Hacer doble clic sobre el archivo en la ventana del sitio.
 Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción
Abrir con → Adobe Dreamweaver CS4.

 Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes

operaciones:

 Hacer clic en el botón nuevo de la barra de herramientas estándar (si está

visible).
 Pulsar la combinación de teclas Ctrl + N.
 Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

-6-
 Dreamweaver CS4

Después de esto aparecerá una nueva ventana, en la que deberás elegir la

Categoría Página en blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños

ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno.
A continuación pulsamos el botón Crear.

 Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

 Hacer clic en el botón Guardar de la barra de herramientas estándar. 

 Pulsar la combinación de teclas Ctrl + S.
 Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando

simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de
hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes
operaciones.

-7-
 Dreamweaver CS4

 Hacer clic en el botón Guardar todo de la barra de herramientas estándar. 

 Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones

hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo,
ya que en ocasiones es posible no desear guardar los cambios en todos los documentos
modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta
que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay
cambios sin guardar aparece un * tras el nombre del documento.

1.7. Mi primera página

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a
crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra
página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con
los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca
has hecho una página web, este es el momento para descubrir lo fácil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en el apartado
anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página
básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.

Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

-8-
 Dreamweaver CS4

Una vez introducido el texto, vamos a modificar el título y el color de fondo del
documento.

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción
Propiedades de la página.

Entonces se abrirá una ventana como la que aparece a continuación:

-9-
 Dreamweaver CS4

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará
a ser de color azul.

Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera

página.

Para aplicar los cambios, pulsa sobre el botón Aceptar.

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la
carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta
dedicada a las imágenes.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al
hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se
abre una ventana con una opción similar a Guardar imagen como... (dependiendo del
navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco
duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los
derechos de autor de la imagen.

- 10 -
 Dreamweaver CS4

Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer

lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla
Enter). Después nos dirigimos al menú Insertar, opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que

la habías guardado, seleccionarla y pulsar Aceptar.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el
inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y
que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a través del menú Ventana, opción

Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está
contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

- 11 -
 Dreamweaver CS4

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y

aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro
Formato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando
el icono CSS a la izquierda.

Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a las

propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una página web, HTML se encarga de estructurar el

contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el
formato adecuado.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto

mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el
diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para

aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial,
Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen
siguiente:

- 12 -
 Dreamweaver CS4

Observa que hemos centrado el texto pulsando en el botón .

Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea
>, marca los botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar
es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de
las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.

Ahora, centra el párrafo como hemos visto hasta ahora, pulsando en .

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el
panel de Propiedades a las propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la

imagen:

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú
Archivo, desde la opción Guardar.

- 13 -
 Dreamweaver CS4

Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html.
Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma
carpeta que la imagen descargada.

Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.

- 14 -
 Dreamweaver CS4

Unidad 2.
El entorno de Dreamweaver CS4
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS4, la pantalla, las
barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos
cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por
si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto
estaremos en disposición de empezar a crear páginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus
componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y
será más fácil entender el resto del libro. La pantalla que se muestra a continuación (y en
general todas las de este libro) puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada
momento y dónde, como veremos más adelante.

- 15 -
 Dreamweaver CS4

2.2. Las barras

 La barra de la aplicación.

La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventana

maximizada veremos todos los elementos de la barra ocupando una sola línea, si no,
ocuparán dos líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte
inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y
una caja de búsquedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de
derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones
que se pueden añadir, o al administrador de sitios, que ya veremos.

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un

desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su
disposición) que podemos guardar y cargar.

Los menús, están agrupados en categorías.

- 16 -
 Dreamweaver CS4

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los
diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de
Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los
paneles.

 Las pestañas de documento.

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que
nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que
ese archivo tiene cambios sin guardar. Podemos cerrar cada documento haciendo clic en el
aspa, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros
archivos.

Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los
archivos que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc.
pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

 La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da información

sobre el mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar

etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de
Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el
tamaño de la página o su codificación.

Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras
que podemos ver u ocultar desde el menú Ver → Barras de herramientas.

- 17 -
 Dreamweaver CS4

 La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más
habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir,
explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar,
Pegar, Deshacer y Rehacer.

 La barra de herramientas de documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar

entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la
página, o realizar las distintas opciones de validación que nos ofrece el programa.

 La barra de representación de estilos.

- 18 -
 Dreamweaver CS4

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en
distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.

Como veremos al personalizar el entorno, algunos paneles, como Insertar nos

permiten colocarlo como otra barra de herramientas.

2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que

se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en
general, la apariencia y opciones de un inspector cambian dependiendo del objeto
seleccionado, mientras que el panel nos da acceso a opciones generales.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar

cada uno de los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades


El inspector de Propiedades muestra las opciones propias del objeto o texto

seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos
más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una
imagen, mostrará su ubicación, dimensiones, peso, clase, etc.

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos
aplicar a los diferentes elementos de la página Web que estemos diseñando.

- 19 -
 Dreamweaver CS4

El panel Insertar.


En el panel Insertar, encontramos todos los elementos que podemos encontrar en el

menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imágenes, es posible configurar este panel para verlo como
menú, como panel flotante o como una barra de herramientas integrada en la ventana de
trabajo.

Personalizar el área de trabajo

Abrir y cerrar paneles

Todos los paneles son accesibles a través del menú Ventanas.

Para cerrar un panel, basta con hacer clic derecho sobre su pestaña y elegir Cerrar
del menú.

- 20 -
 Dreamweaver CS4

Un comando que puede resultarnos útil es la tecla F4. Al pulsarla, todos los paneles
se ocultan. Para mostrarlos, la volvemos a pulsar.

Acoplar y desacoplar paneles

A la derecha (por defecto) encontramos la pila de paneles.

Algunos paneles aparecen acoplados. Eso quiere decir que se muestran como
pestañas, pudiendo ver el que queramos haciendo clic, pero sin poder ver dos a la vez.

Para desacoplarlos, basta con hacer clic sobre la pestaña y arrastrar.

Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en

otros lugares (zonas de colocación), que aparecerán resaltados en azul (imagen anterior).
Esto nos permite intercambiar paneles entre grupos acoplados o dejarlos como flotantes si
los sacamos fuera.

Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra
de herramientas.

- 21 -
 Dreamweaver CS4

Cambiar el aspecto del panel insertar

Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo
hasta la barra de menús para que tome un aspecto de fichas, como se aprecia en la
siguiente imagen:

Pero también puede tener este otro aspecto, en menú:

Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el menú y
seleccionamos la opción Mostrar como Fichas o Mostrar como menú, según el caso.

Cambiar los métodos abreviados de teclado

Los métodos abreviados de teclado son las combinaciones de teclas que permiten
acceder a algunas opciones sin la necesidad de moverse a través de los menús. Para
modificar las combinaciones de teclas hay que dirigirse al menú Edición, a la opción
Métodos abreviados de teclado.

- 22 -
 Dreamweaver CS4

En esta nueva ventana es necesario seleccionar un comando y una de las

combinaciones de la lista de Métodos abreviados, situar el cursor en el campo Pulse tecla,
seguidamente pulsar la combinación de teclas deseada, y por último hacer clic sobre el
botón Cambiar.

Es posible que no se permita modificar las combinaciones de teclas del conjunto

seleccionado, por ser combinaciones que provienen de fábrica, por lo que se pedirá
confirmación para crear una copia modificable del conjunto.

Hay que tener también en cuenta que no se permite asignar a un comando una
combinación de teclas que ya está asignada a otro diferente.

Color de los iconos

Por defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el

cursor por encima, se muestran de color.

- 23 -
 Dreamweaver CS4

Podemos hacer que todos los iconos se muestren de color. Para ello no tenemos
más que elegir la opción Iconos de colores del menú Ver.

Espacios de trabajo

Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo

se mantendrá nuestra configuración. Pero a la larga iremos haciendo cambios, abriendo
paneles que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy
útil guardar nuestra configuración y poder restaurarla cuando queremos.

A esta configuración del entorno, se le denomina Espacio de trabajo. Y podemos

guardar nuestra configuración actual desde el menú Ventana → Diseño del espacio de
trabajo → Nuevo espacio de trabajo... y darle un nombre.

- 24 -
 Dreamweaver CS4

Como vemos en la imagen, Mi Espacio es un espacio personalizado. Además vemos

que Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para
cargarlo, basta con seleccionarlo en el menú.

Otra opción muy interesante que encontramos en este menú es la de Restablecer

'espacio'. Esto lo volverá a cargar, muy útil cuando lo hemos desorganizado.

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la
barra de documento:

La vista Diseño


La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

- 25 -
 Dreamweaver CS4

La vista Código


La vista Código se utiliza para poder trabajar en un entorno totalmente de

programación, de código fuente. No permite tener directamente una referencia visual de
cómo va quedando el documento según se va modificando el código.

El código que vemos es el que genera Dreamweaver al editar el contenido en la vista

Diseño.

La vista Dividir


La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona
superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio
en alguna de las zonas, este cambio se aplica directamente sobre la otra.

- 26 -
 Dreamweaver CS4

La vista en Vivo


La vista en Vivo es otra de las novedades que trae Dreamweaver CS4. Nos ofrece
una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite
editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con
el navegador.

La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que

pequeños cambios se previsualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la página con los principales navegadores
del mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del libro
verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de
diseño, en la vista en vivo o en el navegador.

La vista Código en vivo



Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la
vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar
partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.

- 27 -
 Dreamweaver CS4

2.5. La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

 Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar
por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o
simplemente pulsando F1.
 Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un
resumen de esta herramienta.
 Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas
HTML.
 Acceder a Dreamweaver Support Center en la web.
 Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir

los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

- 28 -
 Dreamweaver CS4

Unidad 3.
Configurar un sitio local
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo
modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un

diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de
crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local.
Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear
nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los
archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio

remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local
es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio
remoto.

La organización de los archivos en un sitio permite administrar y compartir archivos,

mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el
servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html,

ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con
ese nombre.

- 29 -
 Dreamweaver CS4

Por ejemplo, si escribiéramos la dirección genérica http://www.dominio.es en el

navegador, éste intentaría cargar la página http://www.dominio.com/index.htm, por lo que
se produciría un error en el caso de que no existiera ninguna página con el nombre
index.htm, y no se podría navegar por el sitio a no ser que se escribiese exactamente
http://www.dominio.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo
menos la carpeta raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o
directamente a Nuevo sitio.

Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los
sitios definidos.

También podemos acceder desde el icono de acceso rápido de la barra de la

aplicación a la opción Administrar sitios o Nuevo sitio...

- 30 -
 Dreamweaver CS4

En el caso de haber seleccionado la opción Administrar sitios, aparece una

ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará

la misma ventana en la que definir o modificar las características del sitio.

- 31 -
 Dreamweaver CS4

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte
izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la

lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categoría Datos locales, que será
lo único que empleemos de momento.

 Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la
lista de sitios.
 La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.
La carpeta puede contener ya archivos o no.

Estas dos características son las imprescindibles para definir un sitio local. El resto
son opcionales, y de momento no nos interesan.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo
el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio
remoto.

Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas

y minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows,
muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo
hará.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que
seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

- 32 -
 Dreamweaver CS4

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción
Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en

el menú desplegable Archivos.

3.4. Ver el sitio

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles
más importantes de Dreamweaver, ya que nos da acceso a los archivos del sito.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm,
paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imagenes y
varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar

de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del
panel y de la ventana.

- 33 -
 Dreamweaver CS4

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto
(el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el
servidor de pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a

la derecha) con nuestros archivos.

Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se

relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde
Dreamweaver, automáticamente actualizará todas las referencias a ese archivo
(enlaces desde otras páginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas

no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya
que Dreamweaver simplemente no encontrará la página.

Al modificar algún objeto que es referenciado por algún otro documento, se muestra
una ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto,
y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

- 34 -
 Dreamweaver CS4

Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si
tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual
podemos establecer desde el menú Edición, opción Preferencias, categoría General.

3.5. Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet deberás subir los archivos al sitio que
hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que
deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este
proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura
tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarán
correctamente, y es posible que algunas imágenes no se muestren.

Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará
tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en

algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.

Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el
Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos.

Uno de los programas gratuitos más utilizados es FileZilla, desde su página web
podrás descargarte el programa y su traducción a tu idioma.

- 35 -
 Dreamweaver CS4

Una vez instalado, abre el programa y haz clic en Archivo → Gestor de sitios y
luego en Nuevo sitio para configurar un nuevo sitio FTP.

Aquí deberás introducir los datos que te facilitó el servidor dónde vas a alojar tus
páginas: Servidor, Usuario y Contraseña.

Rellena los campos y haz clic en Conectar. Se conectará automáticamente y podrás

ver una carpeta donde podrás copiar los archivos que hayas creado.

La parte central de la pantalla estará dividida en dos columnas. A la izquierda, la

marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de
nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el
servidor FTP.

Ahora no tenemos más que arrastrar los archivos del sitio local al remoto para
subirlos, o del remoto al local, para descargarlos al equipo.

Verás como el programa empieza a copiar la información de tu disco a Internet.

Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la

barra de direcciones de tu navegador (Firefox, Internet Explorer...) ¡y verás el sitio en
Internet!

- 36 -
 Dreamweaver CS4

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar

con el servidor. Busca la carpeta public_html y sube tus archivos allí.

3.6. Propiedades del documento

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un
mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo
Propiedades de la página.

Este cuadro se puede abrir de tres modos diferentes:

 Pulsar la combinación de teclas Ctrl + J.

 Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
 Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final
del menú contextual la opción Propiedades de la página.

Se abrirá el cuadro de diálogo siguiente:

- 37 -
 Dreamweaver CS4

Las propiedades están organizadas en categorías.

En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las


propiedades:

 Fuente de página: es el tipo de letra que le aplicaremos al texto.

 Tamaño: es el tamaño de la fuente que aplicaremos al texto.
 Color del texto: es el color de la fuente.
 Color del fondo: permite especificar un color de fondo para el documento, pero
dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de
fondo.
 Imagen de fondo: permite especificar una imagen de fondo para el documento.
Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo
tener en cuenta que según los colores de la imagen será necesario establecer unos
u otros colores para el texto, así como que no es conveniente tener un gif animado
como fondo.
 Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si
no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se
repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos
que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que
se repita en vertical, entonces seleccionamos repeat-y.
 Márgenes: permiten establecer márgenes en el documento, es decir, la distancia
entre donde empieza el contenido de la página y la ventana del navegador.

En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos


las propiedades:

- 38 -
 Dreamweaver CS4

 Imagen de fondo: permite especificar una imagen de fondo para el documento.

Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo
tener en cuenta que según los colores de la imagen será necesario establecer unos
u otros colores para el texto, así como que no es conveniente tener un gif animado
como fondo.
 Fondo: permite especificar un color de fondo para el documento, pero dicho color
solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
 Texto: es el color de la fuente.
 Vínculos: es el color que mostrará el texto de los vínculos.
 Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
 Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón
hace clic sobre el mismo.
 Márgenes: permiten establecer márgenes en el documento, es decir, la distancia
entre donde empieza el contenido de la página y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La

diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que
HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se
tiende a limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.

- 39 -
 Dreamweaver CS4

 En la categoría Vínculos (CSS) encontramos las propiedades:

 Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.

 Tamaño: es el tamaño del texto de los vínculos.
 Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre
el texto normal y los vínculos que sirven de enlace a otras páginas.
 Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al
usuario si unos vínculos ya han sido visitados o no.
 Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón
encima del vínculo.
 Vínculos activos: es el color de los vínculos activos.
 Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el
texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por
ejemplo para que no aparezca subrayado.

- 40 -
 Dreamweaver CS4

En la categoría Encabezados (CSS) encontramos la propiedad:



 Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño
y color que queremos aplicar a cada tipo de encabezado.

En la categoría Título/Codificación encontramos la propiedad:



 Título: es el título del documento, que aparecerá en la barra de título del navegador
y de la ventana de documento de Dreamweaver

 En la categoría Imagen de rastreo encontramos las propiedades:

 Imagen de rastreo: permite establecer una imagen como fondo del documento, pero
que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un
navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el
documento.
 Transparencia: permite establecer la opacidad de la imagen de rastreo.

- 41 -
 Dreamweaver CS4

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en
el navegador. Para ver cómo comprobar el tamaño de los documentos.

Comprobar tamaño para optimizar la carga

Si las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes,
posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es
nada recomendable, ya que los usuarios pueden perder la paciencia, y no visitar más
nuestra página.

Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy
elevado.

Dreamweaver permite calcular automáticamente el tiempo de descarga de las

páginas. Para ello hay que dirigirse al menú Edición, a la opción Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar la Categoría
Barra de estado.

- 42 -
 Dreamweaver CS4

En ella habrá que establecer una Velocidad de conexión.

La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que

se conectaban lo módems telefónicos. Actualmente, las conexiones de ADSL y cable llegan
a cifras mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la
conexión media de la región de los usuarios a los que va destinada la web.

Una vez establecida una velocidad de conexión, y aceptados los cambios,

Dreamweaver calculará el tamaño y el tiempo de descarga de la páginas a partir de esa
velocidad de conexión.

Hay que tener en cuenta que el tamaño de descarga de una página no solo se
calcula a partir del tamaño de esa página en disco, sino que hay que considerar también el
tamaño de las imágenes que aparecen en ella, y del resto de elementos.

Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se

mostrarán su tamaño y su tiempo de descarga en la barra de estado.

3.7. Los colores

Para asignar colores es posible desplegar una paleta de colores como ésta. Al
seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte
superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros

para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador
bajo cualquier sistema operativo.

Esto no quiere decir que sólo podamos utilizar estos colores. Podemos
personalizarlos a través del botón de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones: .

- 43 -
 Dreamweaver CS4

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos,

y también en algunas ventanas que permiten especificar propiedades (sobre todo
propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la
página, que vimos en este tema.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo
directamente el número hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el

color azul con valor #39F, el botón quedaría del siguiente modo: .

En la web, los colores se representan por la cantidad que contienen de los colores
primarios aditivos (Rojo, Verde y Azul).

Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van
del 0 a la F (A=10, B=11,..., F=16).

El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su
intensidad total.

Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del
código.

Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde
al rojo, el segundo al azul y el último al verde.

En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En

este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores
#FF22AA y #F2A son el mismo.

- 44 -
 Dreamweaver CS4

Unidad 4.
El texto: propiedades y formato
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a
crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros
mismos, no predefinidos.

4.1. Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú
Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se
nos ofrecen a través del inspector de propiedades, que están clasificadas en dos
categorías HTML y CSS.

Comenzamos viendo las propiedades HTML



Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto
en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean
exactamente como queramos.

Formato:


Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para
establecer títulos dentro de un documento. El formato predeterminado sirve para que
el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato

- 45 -
 Dreamweaver CS4

predeterminado se respetará que hayan varios espacios en lugar de solo uno. El

texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos,
como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor

el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te
preocupes por cómo se muestran esos encabezados, recuerda que siempre
podremos personalizarlo.

Estilo:


El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se

muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve
en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que
encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no
aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a
que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el
usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en
desuso.

Lista:


Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué
son las listas en el siguiente apartado.

Sangría:


Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una
especie de margen que se establece a ambos lados del texto. En este caso los
botones se refieren a sangría a la izquierda del texto.

- 46 -
 Dreamweaver CS4

Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta

<blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha.
En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

 Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten
formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde
propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un
bloque se muestre en una posición determinada o que un elemento cambie al pasar el
cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la
creación de páginas web.

Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS4 nos

proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en
cascada.

 Regla de destino:

Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo
hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto
antes de acabar el tema.

 Editar regla:

Mediante este botón accedemos a las opciones para la creación o modificación de

estilos CSS, de la regla seleccionada.

- 47 -
 Dreamweaver CS4

 Panel CSS:

Este botón abre el panel CSS si no lo tuviéramos abierto.

 Fuente:

Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar

de una sola, ya que es posible que al establecer una única fuente el usuario no la
tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el
caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo,
si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial,
pero si esta no existe se verá en Helvetica.

 Estilo:

Estos botones ponen el texto en negrita y cursiva respectivamente.

 Alineación:

A través de estos botones es posible establecer la alineación del texto de una de

estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear,
por ejemplo sobre un párrafo.

- 48 -
 Dreamweaver CS4

 Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas

unidades, en píxeles, porcentajes del tamaño base, etc.

 Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en

las propiedades de la página. Si no se ha establecido ningún color en las
propiedades de la página ni aquí, el color del texto por defecto será el negro.

4.2. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con
viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una

lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente,
ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que
la lista numerada (ordenada) se selecciona a través del botón .

 Ejemplo de lista numerada (ordenada):

1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador

- 49 -
 Dreamweaver CS4

 Ejemplo de lista con viñetas (sin ordenar):

o Perro
o Gato
o Aves
 Canario
 Loro
o Hámster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es
necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar
parte de la lista anidada.

A través del menú Formato, opción Lista, es posible acceder a las propiedades de la
lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en
algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con

números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad
Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

4.3. Caracteres especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo

editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos
incluir caracteres como á, ê, ì, ö, ç... de forma rápida. Pero si quieres poner dos espacios en

- 50 -
 Dreamweaver CS4

blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos
veces utilizando la opción que vamos a ver a continuación. Lo mismo ocurrirá con los
caracteres que no tenemos en el teclado.

Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la

imagen inferior.

Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida
de los caracteres más utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y
aparecerá en la vista de Diseño.

Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una
ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:

- 51 -
 Dreamweaver CS4

4.4. Estilos CSS. Introducción

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como
pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno
a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes
del texto.

También permiten, como veremos más adelante, definir prácticamente cualquier

propiedad de los elementos que contendrán nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>,
<h2>...), párrafos (<p>), enlaces (<a>), etc. lo que formateará todas las apariciones de esta
etiqueta en el ámbito del estilo.

También podemos crear clases. Algo así como definir un estilo y darle un alias. El
estilo afectará a todos los elementos a los que apliquemos esa clase.

Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará
sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a
todo el sitio si la guardamos en un archivo CSS.

- 52 -
 Dreamweaver CS4

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el

aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y
control al aspecto exacto que se busca en una página, desde la posición precisa de
elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los
documentos que usan ese estilo se actualiza automáticamente.

4.5. Crear un estilo personalizado

Con Dreamweaver CS4, las características que apliquemos a un texto a través del
Inspector de propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos
que decidir a qué elementos afecta.

Veámoslo:

 Crear un estilo en línea.

Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en

un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la
propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al
elemento.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos

<Nuevo estilo en línea>.

A continuación, definimos las propiedades del estilo.

Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos
concretos.

- 53 -
 Dreamweaver CS4

 Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que
estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, en Regla de destino,

seleccionamos < Nueva regla CSS >.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En

cualquier caso nos aparecerá la siguiente ventana:

 Tipo de selector: el tipo de selector es fundamental, ya que determina a qué

elementos afectará el estilo.

- 54 -
 Dreamweaver CS4

Podemos elegir entre cuatro tipos de selector:

o Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos
de aplicarle esa clase. El nombre de la clase va precedido por un punto, y si no lo
ponemos lo hará Dreamweaver.
o ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo
identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un
elemento en cada página, al que tenga ese ID. En el selector, se escribe
precedido por #.
o Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
o Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta
únicamente a los párrafos con la clase resaltado, pero no a los encabezados con
esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los
párrafos que estén dentro de un elemento de una lista con el id menu.

 Nombre del selector: esta opción permite asignar un nombre al selector.

Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la

clase, id, etiqueta, etc. Por defecto, indicará el elemento seleccionado, pero podemos
escribir el que queramos.

 Definición de regla: esta opción nos permite guardar el estilo en el documento

actual o en un nuevo archivo .css.

- 55 -
 Dreamweaver CS4

o Si elegimos (Sólo este documento) la definición del estilo se guardará en la

cabecera de la página, por lo que sólo estará disponible dentro de ésta.
o Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos
emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de
estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los
estilos. Normalmente en la misma carpeta que las páginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos
se añadirán a ella.

4.6. Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarán el estilo.

Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino.
Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que
una vez creadas se van añadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar

regla. Se abrirá la ventana Definición de regla.

- 56 -
 Dreamweaver CS4

Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las
veremos más adelante.

Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos
que cambiar varias propiedades.

Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y

otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el
menú Ventanas o pulsando en el botón Panel CSS.

- 57 -
 Dreamweaver CS4

En la parte superior vemos las propiedades que afectan al elemento, en medio las
reglas aplicadas, y en la parte inferior las propiedades del estilo actual.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un
nombre que indique a qué tipo de texto se va a aplicar. Para ello accedemos al panel
Estilos, hacemos clic con el botón derecho sobre el estilo y seleccionamos la opción
Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo
nombre como la imagen inferior.

El Panel CSS

Veamos cómo funciona el panel CSS .

El Panel CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rápida
y sencilla, los estilos creados de esta manera se pueden guardar en nuestro documento,
pero también podemos utilizar estilos que se encuentren en hojas externas al documento.
Esta particularidad es muy útil cuando diseñamos un sitio web con varias páginas ya que
permite definir una sola hoja de estilos que utilizarán todas las páginas del sitio y así facilitar
el diseño.

Vamos a ver cómo funcionan las hojas de estilo a través del panel CSS que puede
abrirse a través del menú Ventana, opción Estilos CSS. Existen otras alternativas para abrir
este panel, una es pulsando Mayús + F11, o puedes hacer clic en el botón Panel CSS que
aparece en el Inspector de Propiedades CSS.

- 58 -
 Dreamweaver CS4

El panel tiene dos modos de visualización, representados por dos botones bajo el
nombre del panel. Veámoslos:

 El modo Actual.

Este modo nos ofrece información sobre qué estilos están afectando a la selección.

Se divide en tres secciones:

 En Resumen de la selección, se muestran las propiedades aplicadas sobre la

selección, aunque estas provengan de distintas reglas. Por ejemplo, a un texto le
pueden afectar las reglas generales de la página, las del párrafo, etc.

 La parte central muestra la sección Reglas / Acerca de, pudiendo cambiar entre
ellas con los botones .
La vista Reglas muestra las reglas que afectan a la selección.
La vista Acerca de nos dice dónde está definida la propiedad seleccionada.

 La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aquí

podemos editarlas.

- 59 -
 Dreamweaver CS4

 El modo Todo.

En este modo obtenemos información sobre los estilos disponibles en el documento

actual, independientemente de la selección.

Tenemos dos secciones:

 En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el

propio documento o en hojas de estilo enlazadas.

 En Propiedades de encontramos las propiedades de la regla seleccionada,

pudiendo editarlas.

En ambos modos, en la parte inferior encontramos las mismas opciones.

Desde los botones podrás ordenar las propiedades de diferentes

maneras. Con el primer botón mostrarás todas las propiedades ordenadas por categorías
(Fuente, Fondo, Bloque, Borde, etc.); también puedes mostrarlas ordenadas de la A a la Z
con el segundo botón.

- 60 -
 Dreamweaver CS4

En la esquina inferior derecha encontramos los controles que nos permiten gestionar
las reglas: De izquierda a derecha, estos controles nos sirven para adjuntar una
hoja de estilo, crear una regla, editar la regla seleccionada o borrarla.

Gestionar estilos CSS

Para añadir una nueva regla de estilo desde el panel, basta con pulsar el icono ,
y seguir los pasos que vimos para definir estilos desde el Inspector de Propiedades CSS.

Otra opción es ir al final de la lista de propiedades, y pulsar en Añadir propiedad.

En este caso deberemos introducir el nombre de la propiedad en la columna de la

izquierda (podremos seleccionarlo de la lista) y su valor en la columna de la derecha.

Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista

de estilos del panel y hacemos clic en el botón , se abrirá la ventana donde se puede
definir las características del estilo.

También podemos abrir esta ventana pulsando con el botón derecho sobre el estilo
en el panel CCS, y seleccionar del menú desplegable la opción Edición. O incluso
modificarlo directamente desde la lista de propiedades que se encuentra en el panel,
editando la columna derecha que contiene el valor.

Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos
vinculada, es decir, a un archivo CSS externo, todas las páginas que contengan ese estilo
serán actualizadas al instante.

Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de

estilos del panel y hacemos clic en el botón .

- 61 -
 Dreamweaver CS4

4.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, nos será necesario
aplicarla, ya que directamente se aplicarán directamente.

Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases.
Veamos cómo hacerlo:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si

situamos el punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera
etiqueta que contenga el texto (por ejemplo el párrafo).

En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el

estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino.
Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella
en la barra de estado, y seleccionar la clase deseada del menú Establecer clase.

- 62 -
 Dreamweaver CS4

Todas las reglas disponibles aparecen al desplegar el submenú Formato → Estilos

CSS.

Observa que existe una clase llamada ninguno. Lo que hace esta opción es quitar la
clase al elemento.

La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La
clase aparecerá junto al nombre de la etiqueta, separada por un punto.

4.8. Hojas de estilos

 Exportar estilos

Es frecuente que comencemos creando los estilos en la propia página, y después al

ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo.
Dreamweaver nos permite exportar estos estilos fácilmente.

Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la
vista Todo. Agrupados en <style> encontramos los estilos creados en la página.

- 63 -
 Dreamweaver CS4

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el
icono de la esquina superior derecha) seleccionamos Mover Reglas CSS....

Nos aparecerá la siguiente ventana:

Encontramos dos opciones para ubicar los estilos:

 Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se añadirán a
ella.
 Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas.
Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma
carpeta que las páginas.

Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja

de estilos.

 Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos

vincularla.

- 64 -
 Dreamweaver CS4

Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de

estilos... o desde el panel Estilos CSS. Lo único que tendremos que hacer es seleccionar
el archivo a vincular. Las hojas de estilo tienen la extensión .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier

archivo del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.

- 65 -
 Dreamweaver CS4

Unidad 5.
Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son
un elemento esencial para cualquier página web.

5.1. Introducción

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado

lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta
<a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo
en la barra de estado:

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas
referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la
ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.

 Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del

archivo, incluyendo el protocolo http://.

Por ejemplo,
http://www.misitio.com, o http://www.misitio.com/pagina/pagina1.html.

- 67 -
 Dreamweaver CS4

La referencia absoluta es independiente de la ubicación de la página que contiene el

enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción
obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

 Referencia relativa al documento (por defecto):

La ubicación del archivo enlazado se toma en relación con la ubicación del la página.
Es decir, partimos de la carpeta en la que se encuentra el documento.

Si queremos enlazar con una página o archivo dentro de la misma carpeta, no

tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el

nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo
imagenes/miimagen.gif.

Si queremos referirnos a carpetas que están por encima del nivel donde nos
encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección

http://www.misitio.com/pagina/informacion/index.html. En esta página queremos
mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo?
Fácil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un

nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo
seccion1.html.

Esta opción depende de la ubicación del archivo, y pueden no funcionar

correctamente si alteramos la estructura de carpetas.

- 68 -
 Dreamweaver CS4

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual.

 Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual.
Tomando como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.

En el ejemplo anterior si tuviésemos definido como sitio la carpeta

http://www.misitio.com/, un enlace en cualquier página del sitio a
http://www.misitio.com/pagina/secciones/seccion1.html se crearía como
/pagina/secciones/seccion1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría
independientemente de su ubicación.

Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un

servidor de pruebas como veremos más adelante, ya que Windows interpretará como raíz la
raíz del disco duro.

 Marcadores o Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro

diferente. Para ello, indicamos el nombre del punto de fijación a continuación de la ruta del
archivo (relativa o absoluta) separados por una almohadilla (#).

El formato sería nombre_de_documento.extension#nombre_de_punto.

Si el punto de fijación está en la propia página, basta con indicar únicamente el punto
en el enlace, por ejemplo #apartado2

Podemos definir el punto dentro de un documento a través del menú Insertar, opción
Anclaje con nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede

- 69 -
 Dreamweaver CS4

establecer desde el Inspector de Propiedades HTML). En cualquier caso, los nombres no

deben de estar repetidos en la página.

Deberás tener siempre en cuenta que los nombres de las rutas se correspondan
perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos
en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios,

así no tendrás problemas a la hora de referenciar tus objetos.

5.3. Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades.

Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y
seguidamente establecer el Vínculo en el inspector HTML.

Por ejemplo, aquí hay un enlace a www.google.es, que al ser un archivo externo es
de referencia absoluta, por eso contiene http://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una
almohadilla #. Veremos su utilidad más adelante.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

- 70 -
 Dreamweaver CS4

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que
explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el
cursor.

 Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá

ahí.

 Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo

deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta
para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te creará
un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita el
apartado Configurar nuevos enlaces.

 Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente

apartado.

 Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un

instante el cursor sobre el enlace.

 Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al
enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

 Índice de tabulador: Como habrás podido observar puedes saltar a través de los
enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice
indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador
es sus diferentes saltos. Por defecto, se tabularán por orden de aparición.

- 71 -
 Dreamweaver CS4

Configurar nuevos enlaces

Crear vínculos relativos automáticamente

Haciendo clic en el menú Sitio y seleccionando la opción Administrar sitios...

podemos editar la configuración del sitio. Bastará con seleccionarlo en el cuadro de diálogo
y pulsa Editar.

Se abrirá la ventana de Definición del Sitio. Allí selecciona la pestaña Avanzadas y

en la categoría Datos Locales podrás ver las siguientes opciones:

Estas opciones te ayudarán a crear los enlaces de forma relativa. Selecciona

Documento o Raíz del sitio en Vínculos relativos a: para que se creen los enlaces
relativos al documento donde se halla situado el enlace o desde la raíz del sitio.

- 72 -
 Dreamweaver CS4

Si seleccionas la opción Raíz del sitio, los enlaces se establecerán respecto a la

carpeta seleccionada en el campo Carpeta raíz local:. Pero recuerda que en nuestro sitio
local no funcionarán a no ser que instalemos un servidor de pruebas.

Seleccionar estas opciones no cambiará los enlaces existentes, sino que aplicará
esta configuración a los vínculos que se creen a partir de ese momento.

5.4. Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada,
puede variar dependiendo de si el documento está basado en marcos.

Puede especificarse en el inspector de propiedades a través de Destino, o en la

ventana que aparece a través del menú Insertar, opción Hipervínculo.

 _blank:
Abre el documento vinculado en una nueva ventana o pestaña del navegador.

 _parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el
conjunto de marcos padre. Tiene sentido si se emplean marcos.

 _self:
Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el
documento vinculado en el mismo marco o ventana que el vínculo.

 _top:
Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se
emplean marcos.

- 73 -
 Dreamweaver CS4

No te preocupes si no te queda del todo claro para qué sirve cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos.

Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos

nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.

Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los
enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería
de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere
abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una
ventana nueva, basta con hacer clic con la ruedecilla del ratón.

5.5. Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al

mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a través de
las propiedades de la página. Estos tres colores diferentes se corresponden a los tres
estados del vínculo: vínculo normal, vínculo activo (el último pulsado) o vínculo visitado.

Si has visitado un vínculo, verás que sale en un tono morado, si no sale en azul.

Recuerda que como todo en nuestra página, los vínculos tienen un formato por
defecto, pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla
de estilo para la etiqueta a.

Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes
selectores:

 a:link para los enlaces normales.

 a:visited para los enlaces visitados.

 a:active para los enlaces activos.

- 74 -
 Dreamweaver CS4

Aunque recuerda que en las propiedades del documento teníamos la categoría

Vínculos CSS que nos permite establecer estos valores.

Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie
de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una
imagen (un mapa), aparece el contorno de esa zona.

Aquí tenemos dos vínculos en una imagen:

Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro
alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en
imágenes con el fondo transparente.

Veamos como quitarlo utilizando CSS.

En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla

de destino, y pulsamos Editar regla.

En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a

img, es decir, imágenes que estén dentro de una etiqueta a (de enlace).

Se abrirá la ventana Definición de regla para a img:

- 75 -
 Dreamweaver CS4

En ella, seleccionamos la categoría Borde, y en Style seleccionamos none.

Pulsamos Aceptar.

Esta regla hará que las imágenes con enlace se muestren sin borde.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de

forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.

5.6. Enlace a correo electrónico

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil

cuando se desea que los visitantes de la web puedan contactar con nosotros.

La sintaxis del vínculo en este caso es mailto:direccióndecorreo.

Puede definirse el vínculo a través de Vínculo, del inspector de propiedades,

seleccionando previamente el texto o la imagen deseados.

También es posible a través del menú Insertar, opción Vínculo de correo

electrónico.

- 76 -
 Dreamweaver CS4

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el
texto que contendrá el vínculo de correo.

Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario
(Outlook, Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en
un ordenador público, o emplea el correo web directamente.

Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto

requerirá una página dinámica. Otra opción sería mostrar nuestra dirección de correo, para
que el usuario pueda enviarnos el correo como quiera.

5.7. Vínculos rotos

Comprobación de vínculos rotos

Los Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a
archivo que no existe.

La existencia de estos vínculos en nuestras páginas es un error, ya que no permite

navegar correctamente a los usuarios por nuestro sitio, se producen errores.

Los servidores de tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Así,

por ejemplo, si enlazas a un archivo Perros.htm puede que el servidor no lo encuentre
porque en realidad lo hayas llamado perros.htm (en minúsculas).

- 77 -
 Dreamweaver CS4

Trabajando con Windows este tipo de errores no se presentan porque no hace esta
distinción. En el ejemplo anterior Dreamweaver consideraría el enlace Perros.htm correcto
aunque no lo fuese.

Para evitar esto puedes activar la opción Usar verificación de vínculos entre
mayúsculas y minúsculas que se encuentra en la ventana de Definición del Sitio,
pestaña Avanzadas y categoría Datos Locales.

Para comprobar si nuestro sitio tiene Vínculos rotos hay que abrir el Verificador de
vínculos.

Accedemos a él desde el menú Sitio → Comprobar vínculos en todo el sitio o con

las teclas Ctrl + F8.

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen

vínculos rotos.

En la imagen vemos que no se ha encontrado una imagen.

Lo primero que hay que hacer es pulsar sobre el botón , a través del cual se
ofrece la posibilidad de elegir dónde se comprobarán los vínculos rotos. Puede ser en el

- 78 -
 Dreamweaver CS4

documento actual, en todo el sitio, o en los archivos o carpetas del sitio seleccionados
previamente.

A través de Mostrar (Mos) hay que especificar si han de mostrarse los Vínculos
rotos, los Vínculos externos o los Vínculos huérfanos.

 Los Vínculos rotos son los vínculos que no siguen una ruta válida, o que enlazan a
archivo que no existe.

 Los Vínculos externos son los vínculos a documentos que se encuentran fuera del sitio,
pero que no necesariamente son vínculos erróneos. No comprueba si estos vínculos son
correctos o no, simplemente los enumera.

 A través de Vínculos huérfanos se muestran todos aquellos archivos del sitio que no
están siendo vinculados por otros, a la vez que tampoco contienen vínculos a otros
documentos. Estos documentos, en ocasiones, pueden no estar siendo utilizados para
nada, por lo que simplemente están ocupando espacio en disco innecesariamente. Pero
en otras ocasiones, tal vez si que los empleamos, sólo que en vez de enlazarlos,
accedemos a ellos por javascript. En este caso si son necesarios, aunque se marquen
como huérfanos.

De estos tres tipos de vínculos, el que más nos interesa ahora es el de los Vínculos
rotos. En el panel se mostrarán todos los documentos que tienen un vínculo roto, y el
documento al que cada uno de esos vínculos hace referencia.

Reparación de vínculos rotos

Podemos reparar los vínculos rotos de dos formas:

Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en
la lista de archivos del panel. De este modo, dicho documento se abre. Entonces es posible
buscar dentro del documento el vínculo erróneo y modificarlo a través del Inspector de
propiedades.
La otra forma es pulsando sobre el vínculo roto, en lugar de sobre el nombre del
archivo. En este caso es posible modificar directamente el nombre del documento en el
panel, o buscarlo a través del icono con forma de carpeta que aparecerá a su derecha.

- 79 -
 Dreamweaver CS4

- 80 -
 Dreamweaver CS4

Unidad 6.
Imágenes
En este tema vamos a ver cómo insertar imágenes en un documento. También
veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los
botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

6.1. Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como

complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del
visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la
web.
Existen una serie de formatos de imagen más recomendables que otros para ser
introducidos en una página web.

Formatos de imagen para web

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, tiff, etc.
Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar
mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados para web son el GIF, el PNG y el JPG, que a pesar de
ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a
que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

 Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para dibujos con grandes
áreas de un mismo color o de tonos no continuos. También si se muestra texto.

- 81 -
 Dreamweaver CS4

Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y

animación.

En cambio, no están recomendados para fotografías, ya que se perderían colores, y al

no tener áreas de color continuo, el archivo final sería mayor que por ejemplo un JPG.

 Formato JPG:

Estas imágenes pueden contener millones de colores, en un archivo comprimido de

tamaño razonable. Por ejemplo, las imágenes que obtenemos de una cámara digital
suelen estar en este formato.

Por tanto, son especialmente indicadas para fotografías, o gráficos complejos,

obteniendo mejores resultados que el GIF.

En cambio, en gráficos con pocos colores y continuos, generará un archivo mayor que
el GIF, y podremos apreciar pérdida de calidad.

 Formato PNG:

Se trata de un formato de compresión sin perdida. Tiene varias versiones:

PNG 8 es un formato de 256 colores muy similar al GIF, que en teoría obtiene archivos
algo menores. También admite transparencias.

PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea
un archivo de tamaño algo mayor. Admite canal de transparencia alfa, lo que quiere
decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o GIF
que pueden ser totalmente transparentes o no. El resultado es el de mayor calidad, pero
también de mayor tamaño. Este formato es el más adecuado cuando necesitamos
distintos niveles de transparencia, o requerimos que una imagen muestre correctamente
todos sus colores y detalles, evitando la pérdida de calidad que puede producir JPG.

Lo habitual es utilizar GIF o PNG para pequeños gráficos, normalmente elementos

del diseño o imágenes simples, y JPG para fotografías.

- 82 -
 Dreamweaver CS4

Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores

soportan otros, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de
nuestra página pueda ver las imágenes.

Si introduces una imagen no soportada en Dreamweaver, te aparecerá un cuadrado

gris en su lugar.

Puedes cambiar el formato de las imágenes mediante la utilización de algún

programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw,
o incluso desde el propio Dreamweaver.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de

opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como
la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint
de Windows.

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen.
Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl +
Alt + I.

- 83 -
 Dreamweaver CS4

En Relativa a es posible especificar si la imagen será relativa al documento o a la

carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la
página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra

forma en el campo URL de la ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o
relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se
encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen.
Dicha imagen, llamada miimagen.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/ miimagen.jpg

- 84 -
 Dreamweaver CS4

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta
sería:

/imagenes/ miimagen.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al

documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel

Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su

nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el
contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

6.3. Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta

apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

- 85 -
 Dreamweaver CS4

 Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.

 Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la

dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino.
Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa
de imagen.

 En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede

mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer
páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas
lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el
usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No
podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el
formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual
cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el
estándar.

 En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle
alineación, bordes e incluso tamaño con sólo un clic.

Existen otros atributos que afectan al diseño de la imagen. Como ya hemos

explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos
atributos están cayendo en desuso y no deberían de ser empleados:

 Puedes asignarle un grosor de borde desde el campo Borde.

 Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.

 Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la
imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el
espacio vertical y horizontal respectivamente entre la imagen y el texto.

Además, encontramos algunos controles de Edición: El botón nos permite

optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias.

- 86 -
 Dreamweaver CS4

Por otro lado, el icono nos permite editar la imagen con un programa externo, como
Photoshop o Paint.

Mapas de imagen

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para
asignarle algún tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la

que se desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a través de los

botones del inspector de propiedades que tienen el siguiente aspecto: . Si
no te aparecen despliega el panel Propiedades para verlo completo.

Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas
pueden tener forma rectangular, circular, o libre, dependiendo del botón pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo
sobre la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre
los lugares donde se desea que comience y finalice el mapa, así como sobre el resto de
lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar

un vínculo y un texto alternativo a ese mapa como puedes ver a continuación:

- 87 -
 Dreamweaver CS4

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de un

mapa, para que el puntero recupere su forma original al situarse sobre una imagen. De este
modo, es posible mover los puntos del mapa, en el caso de que no hayan sido creados en
los sitios deseados, para ajustarlos mejor a la imagen.

Cambiar formato y crear transparencias

Cambiar el formato del archivo

Dreamweaver nos permite optimizar o editar una imagen, simplemente pulsando el

botón del Inspector de propiedades de la imagen.

Al pulsarlo, accedemos a la ventana Presentación preliminar de la imagen, similar

a la que vemos a continuación:

- 88 -
 Dreamweaver CS4

Sobre los botones de Aceptar y Cancelar, encontramos herramientas que nos

permiten desplazarnos por la imagen o el zoom. También encontramos las opciones de
visualización. Una muy útil es la que nos permite ver varias vistas de la imagen, pulsando el
icono . En la imagen anterior, vemos cuatro vistas del mismo archivo.

A cada vista podemos asignarle un formato de archivo distinto para comparar las
diferencias. No tenemos más que hacer clic en la vista, y seleccionar el formato que
queramos del desplegable Formato. En la pestaña Opciones podremos cambiar las
opciones de cada formato.

Es muy importante la información que aparece junto a cada vista, que nos indica el
formato elegido y el tamaño que ocuparía el archivo en ese formato.

Vamos a examinar el ejemplo que tenemos en la imagen. Ten en cuenta que el

resultado que obtenemos depende íntimamente de la imagen seleccionada, y si
utilizamos otra imagen podría dar un resultado totalmente opuesto:

 La primera vista, arriba a la Izquierda, es un formato PNG 32.

Podemos ver que es el resultado de mayor calidad. La transparencia se muestra

perfectamente, por ejemplo en la sombra, y que podemos ver el fondo a través de la
esfera, dando la sensación de que sea de cristal. Por contra, vemos que es el archivo de
mayor tamaño (14,59 K), mucho mayor que el resto.

Nos quedaremos con este formato, si es necesario mantener las transparencias intactas.

 La segunda vista, arriba a la derecha, utiliza el formato GIF.

El archivo ya es algo menor (5,89 K). Lo primero que llama la atención es que sólo es
transparente el fondo. Esto se debes que GIF sólo admite un color uniforme como
transparencia, no admite distintos niveles de transparencia como PNG. Podemos ver
que aunque la imagen no tiene tonos de color continuos, ya que todos son degradados,
no perdemos colores. Esto se debe a que todos están dentro de la misma gama (como
podemos ver en la paleta de la izquierda) y no sobrepasan los 255.

- 89 -
 Dreamweaver CS4

Nos quedaríamos con este formato si no estuviese la sombra, siendo todo el fondo
transparente uniforme, y pudiésemos prescindir de la transparencia de la esfera.

 En la vista de abajo a la izquierda, empleamos un JPG de alta calidad.

Podemos ver que la calidad del resultado es casi idéntica al GIF. Salvo que sin
transparencia, ya que este formato no las soporta. No obstante, sí podemos ver que
como la imagen no tiene tonos continuos de color, el JPG logra una imagen de menor
tamaño (2,95 K) que PNG y GIF.

Esta sería la mejor opción si podemos prescindir de las transparencias, por ejemplo
porque el color de fondo del documento también es blanco.

 En la vista inferior derecha tenemos un formato JPG de baja calidad.

Podemos comprobar que aunque es el archivo de menor tamaño, también es el de peor

calidad. En este caso, la pérdida de calidad no compensa el ahorro de tamaño.

Se trata, por tanto, de lograr un buen equilibrio o entre tamaño y calidad, ajustándolo
a las necesidades concretas de la imagen.

También hay que tener en cuenta que para poder elegir el formato adecuadamente
debemos de partir del formato con mayor calidad. En el ejemplo, la imagen original era un
PNG 36. Si hubiésemos partido del JPG de peor calidad, no la podríamos haber mejorado.

Y una vez más, recalcamos que estos resultados son para esa imagen en
concreto.

Transparencias

En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman
parte de una imagen. Normalmente lo que se desea hacer transparente es el fondo.

Por ejemplo, en la imagen siguiente el fondo puede desentonar con el fondo de la

página, o hacer que su apariencia sea más pobre.

- 90 -
 Dreamweaver CS4

Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen
que será transparente, haciendo que cada píxel de ese color sea transparente. Por lo que
ése color sólo debe de aparecer en las zonas que queramos cambiar. Además el fondo tiene
que estar claramente delimitado.

Los formatos que nos permitirán crear la transparencia serán PNG 8 y GIF. Si la
imagen original era JPG, el resultado no será bueno aunque lo cambiemos de formato, y
que JPG altera los tonos continuos.

Todo esto lo haremos desde la ventana Presentación preliminar de la imagen a la

que accedemos pulsando el botón del Inspector de propiedades de la imagen.

En el panel de la izquierda (recuerda que debe de ser el formato PNG 8 o GIF).

Encontramos la paleta de colores que forma la imagen.

Una forma de aplicar transparencia es a través de los botones que

podíamos ver en la imagen del apartado anterior.

Al seleccionar uno de los dos primeros botones, el cursor toma la forma de un

cuentagotas . Para hacer un color transparente, basta con hacer clic sobre el color (en la
paleta de colores o directamente sobre la imagen) con esta herramienta. Distinguiremos los
colores transparentes porque dejan ver la cuadrícula de cuadros blancos y grises:

- 91 -
 Dreamweaver CS4

La diferencia entre el primer y el segundo de los botones de cuentagotas, es que el

primero solo permite asignar transparencia a un color, mientras que el otro permite
añadírsela a varios. El último botón se utiliza para quitar la transparencia de algún color.

Al hacer transparente el fondo azul, el resultado final es el siguiente:

La existencia de transparencia permite mejorar notablemente la estética de nuestras

páginas, integrando mejor las imágenes con el diseño.

Programas de edición de imágenes

Elegir un programa de edición

Dreamweaver nos permite abrir un programa para editar la imagen, simplemente

pulsando el botón .

Lo primero que tenemos que hacer, es elegir un programa como predeterminado

para cada formato de imagen. Para ello, accedemos al menú Edición → Preferencias.... En
la ventana de Preferencias, seleccionamos la categoría Tipos de archivo/editores.

- 92 -
 Dreamweaver CS4

Para la extensión seleccionada en la lista Extensiones, encontramos los editores

asociados en la lista de Editores.

Por tanto, vamos seleccionando las extensiones que emplearemos (PNG, JPG y
GIF). Para cada una, añadimos editores pulsando en el icono sobre la lista de editores.
Al hacerlo, se abrirá el diálogo del sistema operativo, en el que tenemos que elegir el
archivo ejecutable (acabado en .exe) de la aplicación.

Podemos añadir los que queramos. La lista de editores asociados nos aparecerá al
hacer clic derecho sobre la imagen, en el submenú Editar con.

El editor que se abrirá al pulsar en será el que tengamos establecido como

principal. Para establecerlo, no hay más que seleccionar el editor de la lista y pulsar en
Convertir en principal.

6.4. Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

- 93 -
 Dreamweaver CS4

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho
cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el
tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación

de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop,
etc.

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que
es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el
tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de
los recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos Ancho o

Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá

resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al
tamaño original haciendo clic sobre ella.

- 94 -
 Dreamweaver CS4

Como hemos comentado, este cambio de tamaño se produce alterando los atributos
de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario
deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño

grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de
200x150px) esta sería una mala solución, porque el usuario se estaría descargando el
archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de

propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en
la pestaña Archivo.

En la sección escala, podemos establecer un porcentaje del tamaño original.

El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir

directamente el nuevo tamaño.

Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y

seleccionando el área de la imagen en la previsualización de la derecha (no se ve en la
imagen anterior).

- 95 -
 Dreamweaver CS4

Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente el archivo.

El resultado es bastante bueno, aunque siempre será mejor con herramientas

especializadas, como Photoshop o GIMP.

6.5. Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre
ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a
través de distintas páginas.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la
opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original
y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si

se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se
evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que
aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o
el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda
ser mostrada en el navegador.

- 96 -
 Dreamweaver CS4

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers.
Puede hacerse a través del campo Alt del inspector de propiedades de la imagen
seleccionada.

6.6. Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como

opciones de menú para navegar dentro de una web. Una página web solo puede contener
una única barra de navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos
de imagen, a la opción Barra de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno
de los botones, el vínculo para cada uno de ellos, etc.

A través de los botones superiores de la ventana es posible crear y eliminar botones

de la barra de navegación, así como reordenarlos. Con se crea un botón nuevo, con

- 97 -
 Dreamweaver CS4

se elimina el botón seleccionado, y con se puede modificar la posición del botón

seleccionado.

En Imagen Arriba indicamos la imagen que quieres mostrar inicialmente (cuando

todavía no se ha hecho clic).

En Sobre imagen, pones la imagen que se mostrará cuando el usuario coloque el

cursor sobre el botón y éste estaba mostrando la imagen asignada en Imagen Arriba.

En Imagen abajo, indicamos la imagen a mostrar después de que el usuario haya

hecho clic en la imagen.

En Sobre mientras imagen abajo, indicamos la imagen a mostrar cuando el usuario

mueva el puntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen
Abajo.

De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón
que ha sido pulsado (el que tiene Imagen Abajo).

Observa el campo Texto alternativo (es lo mismo que el campo Alt). Cobra especial
importancia en los elementos de navegación. Si no lo ponemos, el usuario no podrá navegar
si la carga de la imagen falla.

El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos
está activo, cosa que con un simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de

navegación van a aparecer de forma horizontal o vertical dentro de la página.

Sólo podemos tener uno de estos menús por página, así que si intentamos insertar
uno nuevo, editaremos el existente.

Tanto la imagen de sustitución como la barra de navegación se apoyan en

JavaScript, una tecnología que permite cambiar el contenido de la página dinámicamente.

- 98 -
 Dreamweaver CS4

Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son
más utilizados. Básicamente consiste en cambiar la imagen de fondo de un elemento.

6.7. Objetos inteligentes

Los objetos inteligentes son imágenes que obtenemos directamente desde un

archivo de Photoshop (.psd).

Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de

Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una página web.
Por eso, lo que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras
abrirlo, Dreamweaver nos pedirá que elijamos uno de los formatos gif, png o jpg y lo
guardemos, con las mismas opciones que encontrábamos al pulsar el botón del
Inspector de propiedades.

¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda

del objeto inteligente encontrarás un icono como éste . Las dos flechas verdes indican

que el archivo está sincronizado, es decir, la imagen está generada a partir del último
archivo de Photoshop.

Pero puede que en cualquier momento queramos modificar la imagen. Podemos

hacerlo abriendo el archivo .psd, o pulsando el icono del Inspector de
propiedades, que abrirá el archivo fuente de Photoshop.

- 99 -
 Dreamweaver CS4

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha

cambiado, mostrando ahora una flecha roja: . Esto indica que la imagen que estamos

viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha
modificado. Podemos volverla a generar pulsando el icono Actualizar
desde origen.

Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que
editar frecuentemente.

- 100 -
 Dreamweaver CS4

Unidad 7.
Tablas
En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas,
insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.

7.1. Introducción

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de
un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y

organizada, dividiéndolos en filas y columnas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas.
Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y
repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no
fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al
analizar nuestra web con herramientas automáticas, como los bots que indexan el contenido
para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear capas
(div) y CSS.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y

columnas. A continuación tienes un ejemplo de tabla.

- 101 -
 Dreamweaver CS4

7.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que

tendrá la tabla, así como el Ancho de la tabla.

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno
y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de
la ventana del navegador en la que se visualice la página, en cambio, el ancho en
Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al
tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le
asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y

los bordes de éstas.

- 102 -
 Dreamweaver CS4

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por ejemplo

para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con
celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los
usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla
y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la
tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la

tabla.

En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla

leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

7.3. Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
intersección entre una fila y una columna.

- 103 -
 Dreamweaver CS4

C
O
imagen y texto L
U
Texto dentro de una celda M
N
A
CELDA

FILA

Para poder insertar algún elemento en una celda, ya sea texto o imágenes,
simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic.
El elemento lo insertaremos como hemos visto hasta ahora.

Si queremos insertar elementos ya existentes en la celdas, tenemos que crear

primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la
celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacíamos, por
ejemplo, con las listas.

7.4. Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú
Modificar estando el punto de inserción en la tabla, o desplegando el menú contextual
de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción
Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.

- 104 -
 Dreamweaver CS4

También es posible seleccionar una pulsando con el ratón sobre el borde exterior
que la rodea, o pulsando <table> que aparece en la barra de estado de la ventana de
documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte
de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada
columna. Junto a los anchos se encuentran unos menús desplegables (menú de
encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten
acceder rápidamente a determinados comandos relacionados con la tabla.

- 105 -
 Dreamweaver CS4

Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes

activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o
también desplegando de la barra de menús, el menú Ver → Ayudas visuales → Anchos
de tabla. De la misma forma se desactiva su visualización.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene

un ancho especificado. Si aparecen dos números, el primer número corresponde al ancho
especificado en las propiedades de la tabla o columna y el segundo número es el ancho el
ancho visual que aparece en la vista de diseño; por ejemplo en la tabla anterior la primera
columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero
al contener una imagen que necesita más espacio, la columna ocupará realmente 142
píxeles (ancho visual de la columna tal como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el código (propiedades) se

cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción Igualar todos
los anchos del menú desplegable de encabezado de tabla.

En este menú vemos que también tenemos las opciones para Borrar o Igualar los
anchos.

Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar

filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes
las distintas formas y elijas la que más te gusta. Estas son las formas de selección:

- 106 -
 Dreamweaver CS4

 Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna

(zona verde de anchos) esto sólo es válido para seleccionar una columna.

 Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s

completamente.

 También puede hacerse situando el cursor junto al borde superior o izquierdo de la

columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha
negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.

 En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de
la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para
seleccionar la celda.

Para seleccionar celdas:

 Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón
mientras se arrastra sobre las celdas deseadas.

 Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener
pulsada la tecla Control mientras se hace clic sobre las celdas.

7.5. Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de

propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos
valores, como el ancho, los podemos especificar mediante CSS.

- 107 -
 Dreamweaver CS4

A través del inspector de propiedades se pueden modificar los valores que se

especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser
el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la
pantalla), el borde de la tabla (en Borde) o los valores de relleno y espaciado de la celda.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de

propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades nos permite alternar entre las
propiedades HTML, que en este caso sirven para especificar las propiedades del texto que
se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir
los estilos.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el
color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en
horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no
queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos
convertirla en un encabezado, basta con marcar la opción Enc..

7.6. Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo

propiedades CSS.

 Los selectores.

Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si

es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.

- 108 -
 Dreamweaver CS4

Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla?
Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de inserción en una
celda:

Vemos que con el selector table nos referimos a la tabla completa. Con el selector
tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas.
Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa
que no hay un selector para referenciar a las columnas enteras.

Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda
que podemos emplear selectores compuestos. Así para referirnos a las filas de una tabla
con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td
para referirnos sus celdas.

Nota: Si al crear una página definimos las propiedades del texto empleando las
Propiedades de la página, Dreamweaver crea una regla con el selector body,td,th. Es
decir, aplica el mismo estilo a la página, a las celdas y a los encabezados. Esto hará que por
ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la
generada por Dreamweaver, por ser más concreta. Esto puede entrar muchas veces en
conflicto. Para evitarlo, lo mejor es editar el selector dejándolo sólo como body. Recuerda
que para editar un selector, hacemos clic derecho sobre la regla en el panel Estilos CSS, y
elegimos Editar selector en el menú contextual.

 Propiedades.

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas,

filas y columnas: fuente, tamaño, color, imagen de fondo.

Existen algunas propiedades CSS específicas de las tablas, como el borde

colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, así que los
veremos más adelante.

- 109 -
 Dreamweaver CS4

Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello,
debemos editar los márgenes izquierdo y derecho (categoría Cuadro), estableciendo el
valor auto para ambos.

Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo,
no tenemos más que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla
a filas alternas.

7.7. Cambiar tamaño de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como
Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado
por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no
la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario

especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se
mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la
ventana.

No solo puede establecerse el tamaño de las tablas y de las celdas a través del
inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre
alguno de los bordes, arrastrándolo hacia la posición deseada.

- 110 -
 Dreamweaver CS4

7.8. Añadir y eliminar filas y columnas

Existen varias formas de añadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando
varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o
bien abrir el menú Modificar. En ambos casos aparece la opción Tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar
mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar
fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que

la columna se inserta a su izquierda.

También tenemos una opción más completa, la opción Insertar filas o columnas....
Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se
insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde
se insertarán.

- 111 -
 Dreamweaver CS4

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o
columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado

(Del o Supr)

7.9. Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama
anidar tablas.

A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera

celda de una tabla se ha insertado otra tabla.

- 112 -
 Dreamweaver CS4

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres
insertar la nueva tabla e insertarla como ya hemos visto.

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que
dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos
puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla,
normalmente más ancho. En este caso habría que combinar todas las celdas de la primera
fila en una sola.

Mientras que dividir celdas consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a través del inspector de

propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del

inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel
Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como
ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del
menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya
combinación pueda dar como resultado otra celda, es decir, que su combinación de como
resultado un rectángulo. No podemos combinarlas para formar una "L". Por ejemplo, en la
siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas
combinaciones no dan como resultado una celda.

- 113 -
 Dreamweaver CS4

Podemos combinar celdas en vertical y horizontal:

Para dividir una celda hay que pulsar sobre el botón del inspector de
propiedades, o sobre la opción Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la
celda se va a dividir en filas o columnas, y el número de éstas.

7.10. Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de

visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a
seguir trabajando con él, pero se puede pasar a los otros modos a través del menú Ver
opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar o el
Modo de tablas expandidas.

- 114 -
 Dreamweaver CS4

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda

a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición.
Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de
inserción de forma precisa e introducir contenido pero en este modo no vemos la página
como quedará exactamente.

En este libro nos limitaremos al modo estándar, aunque puedes emplear el Modo de
tablas expandidas cuando lo creas útil.

7.11. Adaptar webs a distintas resoluciones

Siempre que se crea una página web hay que tener en cuenta que va a ser visitada
por usuarios con monitores de distintos tamaños y con distintas resoluciones. Desde las
pequeñas pantallas de los portátiles de bajo coste, hasta monitores panorámicos en alta
resolución.

Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en

nuestra página: el diseño fijo y el diseño elástico.

 El diseño fijo especifica las medidas en píxeles. Por lo que el contenido siempre se
mostrará del mismo tamaño, lo que facilita mucho el diseño. Por contra, se
desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll"
horizontal en monitores muy pequeños.

 El diseño elástico especifica las medidas en porcentajes. Esto hace que el contenido
se adapte al tamaño de la ventana en la que se visualiza, lo que nos permite
aprovecharla completamente. Por contra, en diseños elaborados, es más complicado

- 115 -
 Dreamweaver CS4

hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o

estrecha.

Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en

porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del
mismo modo independientemente del tamaño de la ventana del navegador. En cambio,
cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño del
elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar.

En una página con tablas de tamaño fijo, en píxeles. Imagina que la página ha sido
diseñada para visualizarse correctamente en un monitor pequeño de baja resolución. Si
modificas el tamaño de la ventana, verás que la tabla es siempre del mismo tamaño. Esto
tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que
equivaldría a visualizar la página en un monitor grande con alta resolución), a los lados de la
tabla aparecerá un gran espacio vacío.

En una página con tablas de tamaño variable, en porcentaje. Si modificas el tamaño

de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene
también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás
claramente cómo el contenido de las tablas se descuadra, quedando demasiado estirado, lo
que dificulta su lectura.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo,
aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores
con alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes
salvar el inconveniente del descuadre de la página y así definir páginas con tamaño en
porcentaje que aprovechen el ancho cuando el monitor de más grande.

No solo puede establecerse el tamaño de la tabla, también es posible establecer el

tamaño de las celdas.

- 116 -
 Dreamweaver CS4

El tamaño de la celda a través del inspector de propiedades estará especificado

por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no
la altura.

Los valores An. y Al. de una celda siempre están en Píxeles. En la imagen anterior,
la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente
de de 200 píxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura
fuera del 25 por ciento de la tabla, en An. habría que escribir 25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué
contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a la
izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la página en
monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante
similar, o al menos que la distribución del contenido de la tabla no se vea muy afectado por
el cambio de tamaño de la ventana del navegador.

- 117 -
 Dreamweaver CS4

Unidad 8.
Marcos
Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo
insertar un marco sencillo en una página, y cómo trabajar con él.

8.1. Introducción

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que
permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad,
pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por
ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco izquierdo
contiene el documento menu.htm y el derecho el documento inicio.htm. Para poder
visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es
la página que contiene los marcos agrupados.

- 119 -
 Dreamweaver CS4

Es posible editar los documentos contenidos en los marcos desde la página que
contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de
cómo quedará la página al final, cosa que no es posible si se editan individualmente cada
uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al
principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente
algunos conceptos básicos y ejemplos sencillos.

Actualmente los marcos están cayendo en desuso. Aunque son realmente prácticos,
crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente
indexado y posicionado es crucial para una web.

Por ejemplo, si vemos el código fuente de una página con marcos, vemos que
realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay
nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella
directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda
acceder a los elementos de navegación de nuestro sitio.

La pega más común al no usar marcos es tener que repetir los elementos comunes,
como el menú y logo en cada página, con la complicación correspondiente a la hora de
hacer un cambio. No obstante, esto es fácilmente solucionable si empleamos PHP o
JavaScript en nuestra página.

Por lo tanto, si piensas colgar tu página en internet para uso público, no te

recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el trabajo
emplear marcos.

8.2. Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de
ellas.

- 120 -
 Dreamweaver CS4

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo
o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede
elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento

actual.

- 121 -
 Dreamweaver CS4

Como puedes ver en la imagen, aparece una línea que divide el documento en dos.
El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el

que contiene el grupo de marcos. El de la derecha es el documento que teníamos
inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar
sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se
haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco

vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la

derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la

derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos
inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este
caso el marco padre será el de la izquierda.

- 122 -
 Dreamweaver CS4

El marco padre siempre es el marco en el que se encuentra el documento inicial,

sobre el que se han insertado el resto de marcos.

8.3. Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos,
que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos
pulsando la combinación de teclas Mayúsculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se

puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse
la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más
grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos
contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades específicas

de cada uno de ellos.

8.4. Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada
uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto
en cada uno de ellos, a excepción del marco que contiene la página original.

- 123 -
 Dreamweaver CS4

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes,
como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada una
de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo
, ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos
contengan alguna página ya existente, ya que en ese caso el único documento al que habrá
que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo
previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el
cursor en ellos antes de pulsar sobre Guardar .

8.5. Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus
propiedades a través del inspector de propiedades.

 Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de
marco. El nombre no puede contener espacios en blanco.

 En Origen aparece el nombre del documento HTML que está contenido en el marco.

- 124 -
 Dreamweaver CS4

 En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de
marcos. En el caso de que se muestre el borde, se puede especificar un color para éste
a través de Color borde.

 Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento

del marco no pueda visualizarse completamente.

 Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las
medidas del marco desde el navegador.

 El Ancho del margen y el Alto del margen indican la separación que habrá entre el
contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector

de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí
y puede especificarse un color para este a través de Color del borde. También es posible
establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.)
sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la
ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el
que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se
ajuste a la ventana del navegador.

- 125 -
 Dreamweaver CS4

8.6. Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a través del campo
Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en

cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de
otros ha de poder variar.

A través del campo Origen del inspector de propiedades, sólo es posible especificar
el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este
documento por otro a través de vínculos.

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los

enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para
que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te serán más
fáciles de entender.

 _blank: Abre el documento vinculado en una ventana nueva del navegador.

 _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o
en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que
se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

 _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o

ventana que el vínculo.

 _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere
decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.

- 126 -
 Dreamweaver CS4

Además de estos destinos para los enlaces, también aparecerán los nombres de los
distintos marcos de la página.

Podemos añadir todos estos destinos a cualquier elemento de la página que

contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash,
etc.

Gracias a todo esto podremos hacer que las barras de navegación y el resto de
enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los
marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy
buenos resultados finales.

- 127 -
 Dreamweaver CS4

Unidad 9.
Formularios
Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué
elementos puede contener y cómo pueden validarse los datos introducidos en él.

9.1. Introducción

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir
para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de
los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se
arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el

formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se
necesitan nociones de programación, ya sea en PHP, en JavaScript o en otro lenguaje de
programación, y esto no entra en los objetivos del libro.

A continuación tienes un ejemplo de formulario simple.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto,
menús desplegables, y botones.

- 129 -
 Dreamweaver CS4

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú
Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos,
desde el panel Insertar en la sección Formularios.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario
que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar
parte de un formulario, así como algunas de sus propiedades.

 Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una
línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de

propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las
letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la
imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos.

A través del inspector de propiedades es posible asignar también el Ancho del

cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

- 130 -
 Dreamweaver CS4

 Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones:

Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o
Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

También es posible cambiar el texto del botón, a través de la propiedad Valor del
inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible
para enviar los datos. Además le suele acompañar un botón Restablecer formulario para
hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.

 Casilla de verificación

Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido

una opción o no.

Puede asignársele el Estado inicial como Activado o como Desactivado.

 Botón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del
mismo formulario con el mismo nombre, sólo puede haber uno activado. Cuando se activa

- 131 -
 Dreamweaver CS4

uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir
una opción.

 Lista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de
opciones.

Los elementos se añaden a través del botón Valores de lista... del Inspector de
propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se
trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse
que se seleccionen varios simultáneamente.

 Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el

usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además, al estar

- 132 -
 Dreamweaver CS4

asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy práctico en
casillas de verificación y botones de opción.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los
datos, a través del nombre sabremos qué control los envía.

9.3. Crear formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un

formulario. Los elementos los introduciremos dentro de él, ya que cuando lo demos a enviar,
sólo se enviarán los datos de los elementos de dentro del formulario.

Puedes crear formularios a través del menú Insertar → Formulario, opción

Formulario, o desde el panel Insertar.

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como

un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.

Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el

formulario final.

Entre las propiedades del formulario, encontramos el campo Acción. En él indicamos

a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.

- 133 -
 Dreamweaver CS4

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como
ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel
Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios.
Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que
facilita su comprensión y mejora su apariencia.

Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos
emplear el selector form.

9.4. Validar formularios

La validación de formularios sirve para hacer que JavaScript valide el formulario

antes de que se envíe, avisando al usuario para que corrija los errores, como campos
obligatorios sin rellenar. Esto es mucho más eficaz que enviar la página y validarla sólo en el
servidor.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel
se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús +
F4. Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botón y pulsar sobre la opción Validar
formulario, deberás haber seleccionado el formulario previamente.

- 134 -
 Dreamweaver CS4

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los
elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar
los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y

si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección
de correo electrónico, etc.

- 135 -
 Dreamweaver CS4

Unidad 10.
Multimedia
Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo
insertar una animación Flash, un sonido y un vídeo, que son los más empleados.

10.1. Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es
frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los
usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia más
empleado en las páginas web.

Estas películas pueden crearse mediante el programa Flash también de Adobe.

Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el
plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el
navegador.

Las películas Flash pueden insertarse en una página a través del menú Insertar →
Media, opción Flash, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Común,

pulsando sobre la opción SWF que aparece al desplegar el menú Media.

- 137 -
 Dreamweaver CS4

Veamos las opciones más importantes que nos ofrece el inspector de propiedades
cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y
alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

 Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el

archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para
editarlo, bastará con pulsar Editar.

 La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el
principio.

 La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica
que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta
opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película
hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se
desea que la reproducción sea activada por algún comportamiento.

 La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene
dejarla en Alta para verlo tal cual se creó.

 La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son
del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del
objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En
cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de
fondo.

- 138 -
 Dreamweaver CS4

 Alinear funciona como con las imágenes, y nos permite alinear la película en relación
con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el
contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

 Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el

Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se
haya especificado un color de fondo en el Flash).

 El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente

aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos

archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta
Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los
archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

- 139 -
 Dreamweaver CS4

10.2. Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios
suelen estar escuchando su propia música cuando navegan en Internet, por lo que el
escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página,

puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad
de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de
la página puedan desactivarlo.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3,

el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que
también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho
espacio, y que no por ello sea de mala calidad.

Para insertar un archivo de audio en un documento tienes que dirigirte al menú

Insertar, Medía, opción Plug-in.

Pueden ocurrir dos cosas:

Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se

mostrará un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no está instalado, el navegador ofrecerá la

posibilidad de hacerlo, como en esta imagen de Firefox.

Un plugin es un añadido al navegador, que nos permite realizar funciones extra,

como en este caso, reproducir un archivo de música. Al insertar un elemento como plug-in lo

- 140 -
 Dreamweaver CS4

que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns
que tenga para tal fin. Por eso, si no lo tiene, nos invitará a instalarlo.

En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son
insertados como plugin aparecen representadas dentro de Dreamweaver por una imagen
como la siguiente.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que

se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de

los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el
sonido en la página, pero que no se muestren los controles de audio, los campos Al y An
deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen

solamente una vez. Estos valores no pueden definirse como propiedades a través del
inspector de propiedades, pero si los conocemos podemos empelar el botón Parámetros....

Por ejemplo, para que el archivo se reproduzca continuamente se hemos añadido

loop="true".

Si no queremos que se reproduzca automáticamente, podemos añadir también

autostart="false".

- 141 -
 Dreamweaver CS4

La línea de código del archivo de audio nos quedaría del siguiente modo:

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner música de fondo en una página web, sin que aparezcan los
controles de audio, puedes escribir este código directamente en la vista Código.

<bgsound src="cancion1.wav" loop="-1">

Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir

cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo
continuo).

No obstante, insistimos en que no es recomendable poner música sin controles de

reproducción.

Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que
no se necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear los
controles personalizados.

10.3. Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que
tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto,
precisan de mucho tiempo para descargarse.

En este apartado nos referimos a inserta vídeo de un archivo alojado en nuestro sitio.
No a mostrar vídeos de sitios especializados, como youTube.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el
MOV.

Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú

Insertar, Medía, opción Plug-in.

- 142 -
 Dreamweaver CS4

El inspector de propiedades para los archivos de vídeo insertados de esta forma es

el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Hay que prestar especial atención al ancho y alto. Por defecto, si Dreamweaver
no puede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver un vídeo. Es
mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si conocemos el tamaño
del vídeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el
tamaño de los controles de reproducción, que depende de cada navegador.

Los vídeos también se reproducen automáticamente al cargarse la página, y se

reproducen solamente una vez. Estos valores pueden cambiarse a través botón
Parámetros, del mismo modo que en el caso de los archivos de audio, añadiendo
autostart="false" y loop="true".

Como ya hemos dicho, todos los objetos insertados a través de la opción Plug-in
precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para
reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo
vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede

establecerse en el campo URL plg una página en la que pueda encontrarlo. No será
necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos cargar un
archivo más raro.

- 143 -
 Dreamweaver CS4

Unidad 11.
Las plantillas
En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar
documentos en ellas.

11.1. Introducción

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que
las páginas deben seguir un formato uniforme.

Además del formato, es frecuente tener elementos que se repiten en cada página,
como el logo o el menú.

La mayoría de nosotros solemos hacer copias de los documentos ya creados, y

trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma más
sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas
previamente.

Las plantillas son una especie de copia de la página en la que van a estar basadas
el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas
zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.

No es posible modificar las propiedades de una página que está basada en una
plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo,
diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y
basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada
una.

Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas
basadas en ella. Esto nos puede ahorrar mucho trabajo.

- 145 -
 Dreamweaver CS4

Las plantillas son archivos con la extensión DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña
Activos.

La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con
las plantillas.

Los botones inferiores del panel Activos son similares a los del panel
Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista,
el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o
eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón . Si el botón está
desactivado, pulsa con el botón derecho del ratón sobre el área de plantilla y elige Nueva
Plantilla).

- 146 -
 Dreamweaver CS4

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al

que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que
se crea automáticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar
como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la imagen.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a

través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va
a guardar.

Al guardar la plantilla la página cambia de carpeta, a Templates, como ya hemos

dicho. Si contenía enlaces o imágenes se nos ofrecerá la opción de Actualizar vínculos. Si
lo hacemos, la plantilla se verá con normalidad y podremos emplearla para crear páginas en
cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imágenes u hojas de

- 147 -
 Dreamweaver CS4

estilo, ya que la ruta no será la correcta, y sólo nos servirá para crear páginas en la misma
carpeta que el archivo desde el que creamos la plantilla.

Ahora solo nos quedaría cambiar los elementos variables por regiones editables.

11.3. Establecer regiones editables en una plantilla

Todos los elementos de una plantilla están bloqueados por defecto, no se pueden
modificar.

Es necesario establecer las zonas para que puedan ser editadas en las páginas que
se basen en dicha plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a
través del panel Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando
sobre el botón como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a través de la

ventana Propiedades de la página.

Como recordarás, para abrir esta ventana puedes:

 Pulsar la combinación de teclas Ctrl + J.

 Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
 Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú
contextual que aparece seleccionar la opción Propiedades de la página.

Para insertar una región editable hay que situar el puntero en el lugar en el que se
desea insertar, y después dirigirse al menú Insertar, Objetos de plantilla, opción Región
editable, o pulsar la combinación de teclas Ctrl + Alt + V.

En la nueva ventana hay que establecer un Nombre para la región editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.

- 148 -
 Dreamweaver CS4

Posteriormente puede modificarse el nombre a través del inspector de propiedades

de la región editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro

con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona
editable, podrán ser modificados en las páginas.

La región editable se ajustará al tamaño del contenido. Por lo que aunque parezca
pequeña cuando aún no tiene nada no limitará lo que queramos introducir.

Todos los objetos que se encuentren fuera de estas zonas editables aparecerán
también en las páginas, pero no podrán ser modificados.

En este caso, la imagen aparecería en todas las páginas que se basaran en esta
plantilla, mientras que todo lo que insertáramos dentro de la zona editable
FormularioCorreoElectronico podría ser modificado.

- 149 -
 Dreamweaver CS4

11.4. Basar páginas en una plantilla

La opción más simple, consiste en elegir una Página de plantilla al crear un Nuevo
documento.

- 150 -
 Dreamweaver CS4

Como vemos en la imagen anterior, al seleccionar la categoría Página de plantilla,

aparece un listado con los sitios. Seleccionando el que queramos, aparecerá otro listado con
las plantillas del sitio, y una vista previa de la seleccionada a la derecha.

Bastaría con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo

documento estará basado en la plantilla, y solo tendremos que modificar las regiones
editables.

El uso de las plantillas puede resultar un poco más complicado si queremos aplicar la
plantilla sobre un documento existente. Vamos a ver cómo basar una página vacía en una
plantilla, ya que por el hecho de estar vacía resulta más sencillo.

Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas,
opción Aplicar plantilla a página.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se
encuentra abierto en Dreamweaver es el mismo en el que vamos a guardar el documento, y
el mismo en el que se encuentra la plantilla en la que queremos basarlo.

Después de pulsar sobre la opción Aplicar plantilla a página aparece una ventana
como la siguiente, en la que hay que seleccionar una de las plantillas de la lista Plantillas:
del sitio.

- 151 -
 Dreamweaver CS4

Es recomendable activar la casilla Actualizar página cuando cambie la plantilla,

para que la página se actualice automáticamente en el caso de modificar la plantilla en la
que se basa.

A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la

plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y la
plantilla. En ese caso se muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la región del
documento vacío con el nombre de alguna región de la plantilla.

En este ejemplo, la región del documento vacío que no coincidía con el nombre de
ninguna región de la plantilla era la región Document body.

- 152 -
 Dreamweaver CS4

A través de Mover contenido a la nueva región: se puede seleccionar una región

de la plantilla, para establecer así la correspondencia que se necesitaba.

Después de establecer las correspondencias necesarias, se carga la plantilla en el

documento vacío.

Observa que la página aparece enmarcada en amarillo, y en la esquina superior

derecha nos informa de que se emplea la plantilla ejemplo.

En este caso no es posible cambiar el color de fondo, que está definido en la

plantilla, pero sí es posible cambiar todos los elementos de texto y el formulario, ya que se
encuentran dentro de una zona definida en la plantilla como editable.

Sí se podría cambiar el estilo del texto, insertar más elementos de formulario, tablas,
etc.

Para que una página deje de estar basada en una plantilla hay que dirigirse al menú
Modificar, Plantillas, opción Separar de plantilla.

Cuando se separa una página de una plantilla, el contenido de la página sigue siendo
el mismo que el que tenía cuando aún estaba basada en la plantilla, pero sin las
restricciones establecidas por la plantilla, ni las ventajas al editar la plantilla original.

- 153 -
 Dreamweaver CS4

Unidad 12.
HTML desde Dreamweaver
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver
para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la
vista diseño.

En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar
algunos reajustes directamente en el código estando dentro de Dreamweaver.

12.1. Etiquetas

Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin
de cada elemento de la página Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código
HTML de una página para darle un título. Consistía simplemente en escribir el título deseado
entre las etiquetas <title> y </title>.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La
primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele
denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del

elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible
cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo
CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor,
quedando <p class="miclase"> y </p>.

También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un
May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas

- 155 -
 Dreamweaver CS4

etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar

XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior
se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes
<img/>, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automáticamente las etiquetas necesarias para construir la

página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras
posibilidades para trabajar directamente sobre el código.

12.2. Entidades HTML

HTML también dispone de códigos especiales para representar caracteres

especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino
internacional, signos de puntuación o tipográficos y símbolos especiales que presenten un
problema en HTML como < ó >, que podrían malinterpretarse por el inicio de una etiqueta.

Estos códigos pueden mostrarse como un código numérico o con un nombre de

entidad. Ambos métodos son igualmente aceptables, pero ambos deberán ir encerrados
entre los símbolos & y ;.

De este modo, < se escribirá como &lt; o &#60;

Usar este método es muy aconsejable, de esta forma los navegadores que estén
configurados para visualizar juegos de caracteres que no contengan letras como la ó o la ñ
podrán ver el sitio correctamente. En caso contrario estos caracteres se mostrarían de forma
extraña si no elegimos la codificación adecuada.

En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú

Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluían en el
listado de Dreamweaver y que podrás insertar escribiendo sus entidades en la vista de
Código.

Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML
numérica y de nombre de entidad:

- 156 -
 Dreamweaver CS4

Entidad con Entidad Entidad con Entidad

Carácter Carácter
nombre numérica nombre numérica
á &aacute; &#225; Á &Aacute; &#193;
é &eacute; &#233; É &Eacute; &#201;
í &iacute; &#237; Í &Iacute; &#205;
ó &oacute; &#243; Ó &Oacute; &#211;
ú &uacute; &#250; Ú &Uacute; &#218;
ü &uuml; &#252; Ü &Uuml; &#220;
ñ &ntide; &#241; Ñ &Ntilde; &#209;

¿ &iquest; &#191; α &alpha; &#945;

¡ &iexc; &#161; β &beta; &#946;
– &ndash; &#8211; © &copy; &#169;
→ &rarr; &#8594; ® &reg; &#174;
← &larr; &#8592; € &euro; &#8364;

< &lt; &#60; espacio &nbsp; &#160;

> &gt; &#62;
& &amp; &#38;

Si escribes más de un espacio en el código de Dreamweaver, cuando lo visualices

en un Navegador sólo veras uno. Esto es debido a que en HTML las palabras separadas por
más de un espacio se visualizan separadas de uno.

Para saltarte esta norma puedes escribir tantas veces como quieras &nbsp; y se
visualizarán tantos espacios como elementos de entidad hayas introducido.

Antes de abusar de este tipo de espacios, piensa si no convendría más añadirle

margin o padding CSS.

- 157 -
 Dreamweaver CS4

12.3. El inspector de código

Recordarás que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista
Diseño, vista Código y vista Dividir (Código y Diseño).

Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el código independientemente de la vista

aplicada en el documento. Este panel es el llamado Inspector de código y puede abrirse a
través del menú Ventana, opción Inspector de código. También podemos abrir el
Inspector de código pulsando F10.

- 158 -
 Dreamweaver CS4

El Inspector de código muestra el código HTML de la misma forma que lo hacen la

vista Código y la vista Dividir (Código y Diseño), pero puede resultar más cómodo
trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita
sólo al espacio del documento. Por ejemplo, si disponemos de una pantalla panorámica,
podemos tener a un lado el diseño y a otro el código.

12.4. Completar las etiquetas

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente

sobre el código HTML es la de completar las etiquetas mientras se van introduciendo. Esto
se produce tanto en el Inspector de código como en las vistas de código.

Imaginemos que deseamos introducir en nuestra página un enlace a una página

cualquiera, que ha de abrirse en una ventana nueva. En este caso deberíamos introducir la
etiqueta <a href="http://www.mipagina.es" target="_blank">Visitar mi pagina</a>, con
lo que obtendríamos el siguiente enlace:

Visitar mi pagina

Vamos a ver cómo funciona el mecanismo de completar etiquetas a través de este

ejemplo.

- 159 -
 Dreamweaver CS4

Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero

que debemos insertar es el símbolo <.

Después de escribir nosotros este símbolo, Dreamweaver mostrará una lista con
todos los comandos que pueden aparecer después él. Para elegir uno de ellos hay que
pulsar dos veces sobre él con el puntero del ratón, o bien, estando seleccionado, pulsar
INTRO.

En este caso tenemos que elegir a, después de lo cual desaparecerá la lista. En el

código tendremos .

Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista

cuando sea visible. Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro. En
este caso, como la etiqueta de enlace sólo tiene una letra, no necesitamos de esta opción.

Después de <a hay que introducir un espacio en blanco. Nada más teclear el espacio
en blanco aparecerá otra lista de elementos, que son los que pueden escribirse después de
la a, los atributos de la etiqueta.

- 160 -
 Dreamweaver CS4

Tenemos que elegir href. Para hacerlo, podemos optar por seleccionarlo de la lista
con doble clic, pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.

Una vez seleccionado, el código quedará como:

En el caso de atributos en los que hay que indicar la ubicación de un archivo, nos
aparecerá la opción Examinar... que abre el cuadro de diálogo para elegir el archivo.
También podemos continuar escribiendo la dirección.

En lugar de cerrar ya la etiqueta con el símbolo >, queremos primero indicar que el
vínculo ha de abrirse en una ventana nueva. Para ello tenemos que introducir un nuevo
espacio, para que se nos muestre otra lista.

En ella hay que elegir target. Entonces el cursor aparecerá entre las nuevas comillas
dobles, y se mostrará una lista en la que es posible elegir el destino del enlace. Cuando un
atributo puede tomar unos valores concretos, estos nos aparecerán como opciones.

- 161 -
 Dreamweaver CS4

Como queremos que el enlace se abra en una página nueva, seleccionamos _blank.

Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el

símbolo >

Ahora podemos introducir el contenido de la etiqueta. Pero es recomendable cerrarla

ya y luego introducir el contenido, para que no se nos olvide. Para cerrar la etiqueta basta
con escribir </ y automáticamente se completará la etiqueta de cierre (</a>).

También podemos configurar Dreamweaver para que introduzca la etiqueta de cierre

al cerrar la de apertura. Esto lo hacemos desde el menú Edición → Preferencias →
Sugerencias para el código → Cerrar etiquetas.

Ahora podemos completar la etiqueta con el texto que servirá de enlace.

12.5. Contraer y expandir código

Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos

de código y contraerlos para facilitar su legibilidad.

- 162 -
 Dreamweaver CS4

Por ejemplo, podemos seleccionar el trozo de código correspondiente a una tabla,

como se ve en la siguiente imagen, aunque podemos seleccionar cualquier código:

Con el texto seleccionado, pulsamos en uno de los iconos junto a los números de
línea o el icono Contraer selección . El ejemplo anterior se contraería quedando:

De esta forma podríamos ocultar el código que no nos interesa y dejar el resto del
código más legible.

Para volver a la situación inicial basta hacer clic en el icono expandir , o en el

signo que aparece al lado del código contraído.

Otro botón que nos ayudará será el icono Seleccionar etiqueta padre . Este
botón selecciona toda la etiqueta que contiene al punto de inserción. A medida que los
sigamos pulsando, irá seleccionado las etiquetas en orden jerárquico, aumentando la
selección.

El icono contraer etiqueta completa contrae la etiqueta que contiene al punto de

inserción, sin necesidad de seleccionarla primero.

Una pega que encontramos es que esto no se guarda, y la próxima vez que abramos
el documento aparecerá todo el código expandido.

- 163 -
 Dreamweaver CS4

12.6. Errores en el código

Al volver al modo gráfico es posible ver si hay algunos errores en el código HTML,
como puede ser una etiqueta incompleta. El código erróneo aparecerá en amarillo:

Si volvemos al código podremos encontrar el error fácilmente. Para que los errores
se resalten, debe de estar pulsado el icono .

En el ejemplo anterior nos hemos comido el cierre de la etiqueta de apertura.

Otra forma de detectar errores en el código es fijándonos en los colores. Por ejemplo,
si no hemos cerrado una etiqueta o las comillas de un atributo, veremos que los colores del
código no son como deberían.

No todos los errores son visibles a simple vista, por ejemplo escribir mal el nombre
de un atributo.

Otra forma de detectar errores en nuestra página es a través del menú Comprobar
navegadores de destino en la barra de herramientas Documento.

Para ver los errores que tiene nuestra página, desplegamos el menú y elegimos
la opción Validar documento actual.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

- 164 -
 Dreamweaver CS4

A continuación se abrirá el panel Resultados con las lista de los errores

encontrados.

En esta lista aparece el grado de importancia del error representado mediante un

icono, el globo de palabras indica un mensaje informativo (señala código que no es
compatible con un navegador pero que no tiene ningún efecto visible), el icono de signo de
exclamación con fondo rojo indica error (indica código que puede causar un problema
visible grave en un navegador concreto, como hacer desaparecer partes de una página) y el
icono de signo de exclamación con fondo amarillo indica advertencia (señala una parte de
código que no se visualizará correctamente en un navegador concreto, pero eso no causará
ningún problema grave de visualización).

A continuación tenemos la página y número de línea donde está el error y una

descripción del mismo. Podemos hacer doble clic para ir al código correspondiente.

A veces la descripción es un texto largo que no se puede visualizar completamente

para ello puedes utilizar el botón Más info .

Como ya sabrás los distintos navegadores y sus distintas versiones hacen que un
error lo sea o no, debemos realizar la comprobación eligiendo las versiones de los
navegadores que consideremos sean las más utilizadas entre nuestros navegantes.

Para comprobar la compatibilidad de la página web que hayas creado puedes utilizar
el desplegable Comprobar página. Despliégalo y haz clic sobre la opción Comprobar
compatibilidad con navegadores:

- 165 -
 Dreamweaver CS4

Se abrirá la ventana de resultados con todos los posibles problemas o

incompatibilidades que se presenten para cada uno de los navegadores y sus respectivas
versiones.

Si haces clic en la opción Configuración se abrirá un cuadro de diálogo como éste:

Donde podrás indicar que navegadores y a partir de qué versión quieres que se
tengan en cuenta cuando Dreamweaver realiza la comprobación de compatibilidad.

12.7. Buscar y reemplazar

En ocasiones es posible querer buscar dentro de un sitio web todas aquellas páginas
que contengan un texto en concreto, una etiqueta en concreto, o parte de estos elementos.
Tal vez los queramos buscar porque deseemos trabajar sobre esas páginas y no
recordábamos cuál de ellas era, o tal vez porque queramos cambiar ese texto o etiqueta por
otros.

- 166 -
 Dreamweaver CS4

Imaginemos que una persona ha creado un sitio web, en el que la mayoría de las
páginas tiene al comienzo un texto que hace referencia al nombre del sitio, por ejemplo,
todas esas páginas comienzan con PerrosGatos, y tiene la seguridad de que no existe ese
texto en ninguna parte de las páginas que no sea al comienzo. Ahora imaginemos que esta
persona ha creado una imagen de un perro y un gato, y que quiere cambiar en todas las
páginas que contienen el texto PerrosGatos dicho texto por la imagen.

En este caso no es necesario que abra una por una todas las páginas que contienen
dicho texto, ni tampoco que modifique una por una dichas páginas para cambiar el texto por
la imagen. Para realizar esta tarea resulta más sencillo utilizar la herramienta de Buscar y
reemplazar.

Puedes abrirla a través del menú Edición, opción Buscar y reemplazar, o pulsando
Ctrl + F.

Mediante Buscar en puede especificarse en qué documentos buscar. Podemos

buscar sólo en el documento actual, en todo el sitio (sitio actual completo), o en los
archivos seleccionados del sitio (habiendo seleccionado dichos archivos previamente), en
los abiertos o en una carpeta en concreto.

A través de Buscar se especifica si hay que buscarlo en el texto (en la ventana

diseño), o en el código HTML (código fuente). También podemos emplear el texto
avanzado, por ejemplo si queremos buscar sólo texto en determinadas etiquetas, o etiqueta
específica, que nos permite, por ejemplo, buscar etiquetas de determinado tipo y que
tengan determinado atributo.

- 167 -
 Dreamweaver CS4

Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay

que indicar el texto o el código que se desea buscar.

En Reemplazar hay que especificar el texto o el código por el que se desea cambiar
el texto o código buscado. Si queremos borrar basta con dejarlo vacío. Si no vamos a
reemplazar no es necesario.

En Opciones encontramos las opciones de búsqueda: si el texto debe coincidir en

mayúsculas y minúsculas, si se omitirán los espacios en blanco, si la palabra a buscar
debe ser una palabra completa o puede formar parte de otra, o si el texto introducido es un
patrón de expresión regular.

El reemplazo puede hacerse de varias formas, siempre a través de los botones de la

derecha de la ventana. Una de ellas es buscar uno por uno cada uno de los documentos
que contengan el código o texto a buscar, y reemplazar cuando se desee. Para ello se
utilizan los botones Buscar sig. y Reemplazar.

Si se desean buscar todos los documentos que contengan dicho texto o código, y
reemplazar en todos ellos, se utilizan los botones Buscar todos y Reemp. todos. O
podemos reemplazarlos todos directamente.

Cuando se utiliza la opción Buscar sig., se abre la página en la que se encuentra el

texto coincidente, resaltando en el código fuente la línea en la que éste se encuentra. De
este modo podemos decidir uno por uno los cambios a realizar. Cuando estemos seguros de
querer reemplazar pulsaremos sobre Reemplazar, y cuando no deseemos reemplazar
volveremos a pulsar sobre Buscar sig..

Cuando se utiliza la opción Buscar todos se cierra la ventana de Buscar y

reemplazar y se abre un nuevo panel en el que aparecen todos los documentos en el que
coincide el texto o el código buscado.

Pulsando sobre el botón vuelve a abrirse la ventana de Buscar y reemplazar.

Desde dicha ventana podemos reemplazar en los documentos encontrados, uno por uno,
con el botón Reemplazar, o bien reemplazar directamente en todos los documento
encontrados, pulsando sobre el botón Reemp. todos.

- 168 -
 Dreamweaver CS4

En el panel, cuando se haya reemplazado en algún documento, éste volverá a

aparecer en la lista junto con un círculo verde, que indica que ya ha sufrido reemplazo.

En ocasiones podemos equivocarnos, al buscar y reemplazar texto o código

erróneos. Hay que tener mucho cuidado al utilizar esta herramienta, ya que no es posible
deshacer los cambios en los documentos que están cerrados durante la búsqueda y el
reemplazo.

En el ejemplo anterior, la persona quería buscar el texto PerrosGatos, y

reemplazarlo por una imagen. En este caso concreto, lo que se desea sustituir es texto por
el código de una imagen, por lo que en Buscar no podríamos elegir la opción Texto, habría
que elegir la opción Código fuente.

En Reemplazar con, habría que especificar la etiqueta HTML completa para insertar
la imagen. En este caso la etiqueta sería <img scr="imagenes/logo_animales.gif"
alt="PerrosGatos" />, teniendo en cuenta que la imagen se llama logo_animales.gif y que
se encuentra dentro del sitio en la carpeta imagenes.

Como el texto a reemplazar siempre está escrito igual, hemos marcado la opción
Coincidir Mayúsculas y Minúsculas para asegurarnos de que si en otra parte aparece el
texto perrosgatos, no sea reemplazado.

- 169 -
 Dreamweaver CS4

Unidad 13.
Otros elementos
Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como
pueden ser las marquesinas, las reglas horizontales y la fecha.

13.1. Marquesinas

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que
pueden desplazarse de un lado a otro de la ventana en forma de línea.

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver,

es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <marquee> y
</marquee>. Entre dichas etiquetas han de introducirse los elementos que se desea que
aparezcan en la marquesina.

También es posible especificar algunas características de la marquesina. La

marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo
deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee
behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.

Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente

de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si
rebotara en los extremos, tal y como ocurrirá en el ejemplo siguiente:

<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>

- 171 -
 Dreamweaver CS4

No conviene abusar de estos elementos, que ya que distraen la atención del

visitante. Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se
suele utilizar Flash que nos ofrece mucha más personalización.

13.2. Fecha

Dreamweaver permite insertar fácilmente la fecha de última modificación de las

páginas.

Cuando se modifica una página en la que se ha insertado este tipo de fecha, se

actualizará automáticamente con la fecha del sistema.

Conviene insertar la fecha de modificación cuando la página ha de contener

información actualizada cada poco tiempo, para que los usuarios puedan saber cuándo fue
la última vez que se actualizaron los datos. Pero en el caso de que la página no se actualice
hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación, ya que puede
dar sensación de abandono. No obstante hay contenidos en los que es imprescindible
informar al usuario de cuando fue redactado, sobre todo aquellos que se refieren a temas
(como informática) que pueden haber quedado obsoletos.

Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.

En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea

que se actualice o no automáticamente al modificar y guardar la página de nuevo.

- 172 -
 Dreamweaver CS4

13.3. Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma página
es la regla horizontal. Una regla horizontal no es más que una línea que cruza
horizontalmente al elemento que la contiene.

Para insertar una regla hay que dirigirse al menú Insertar, opción HTML, luego la
opción Regla horizontal.

Si queremos insertarla desde el código, podemos hacerlo con la etiqueta <hr />.

El inspector de propiedades para las reglas es el siguiente.

A través de sus campos es posible modificar en cierta medida la apariencia de las

reglas. A continuación tienes cuatro ejemplos de reglas horizontales.

Estas reglas sólo se diferencian en las opciones Al (altura) y Sombreado. Las dos
primeras, por ejemplo, no tienen activada la opción Sombreado, mientras que las otras dos
sí.

Podemos cambiar su color mediante CSS, con la propiedad color (como el color del
texto).

- 173 -
 Dreamweaver CS4

13.4. Código de otras páginas

En ocasiones nos gustaría incluir en nuestras páginas cosas que hemos visto en
otras páginas que están publicadas en Internet.

Por una parte, tenemos páginas que nos ofrecen ese código para que lo incluyamos
en nuestra web, como banners o contenido multimedia, como pueden ser los vídeos del
portal youTube.

En la mayoría de estos casos, lo único que tendremos que hacer será copiar ese
código y pegarlo en nuestro código fuente, en el lugar que queramos mostrar el elemento.

En otras ocasiones puede que no se trate de un elemento pensado para que lo

copiemos. Simplemente es una parte de una página que nos gustaría tener o que sentimos
curiosidad por cómo estará hecho.

En estos casos, lo mejor es ver el código fuente. Puedes visualizar el código fuente
de dichas páginas con cualquier navegador, normalmente a través del menú Ver opción
Código fuente, o bien mostrar el menú contextual de la página pulsando con el botón
derecho sobre ella, y pulsando después sobre la opción Ver código fuente. De este modo
podemos ver su código y emplearlo en nuestras páginas.

Visualizar el código fuente resulta útil para ver cómo se ha estructurado la página, el
uso de los comportamientos (que aparecen programados en código JavaScript), y otra serie
de rutinas JavaScript.

- 174 -
 Dreamweaver CS4

A veces este código no es demasiado complicado, y podrás casi sin problemas

añadirlo a tus páginas.

Pero en muchas ocasiones puede costar entender el código, sobre todo si no se

tienen nociones de ningún lenguaje de programación. Si no entiendes el código, puedes
cometer el error de copiar código JavaScript erróneo, copiarlo de forma incompleta,
insertarlo en una zona incorrecta del código html, etc.

- 175 -
 Dreamweaver CS4

Unidad 14.
Capas
Vamos a ver algunas de las características básicas sobre las capas, para luego
poder trabajar con ellas y aplicarles algún comportamiento.

14.1. Introducción

Las capas no son más que unos recuadros, elementos de bloque, destinados a
contener y agrupar otros elementos, igual que los párrafos son elementos de bloque
destinados a contener texto.

Las capas, también llamadas layers o divisiones, se crean con la etiqueta

<div></div>.

Al ser elementos contenedores, son muy útiles para organizar nuestros elementos. Si
esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos
permite colocar los elementos donde queramos en nuestra página, obtenemos los
elementos ideales para maquetar nuestra página, es decir, distribuir el contenido en
bloques.

En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris.

- 177 -
 Dreamweaver CS4

Cuando convertimos una capa en un elemento con posición absoluta (elemento PA),
se muestra así en Dreamweaver:

Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el
recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

También pueden ser redimensionadas pulsando sobre los recuadros negros, y

arrastrándolos hasta conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,

animaciones flash, y todos los elementos que puede contener un documento HTML.

Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.

Las capas, combinadas con JavaScript pueden dotar a una página de verdadero
dinamismo.

14.2. Insertar una capa

Las capas pueden insertarse en una página a través del menú Insertar, opción
Objeto de diseño, donde encontramos Etiqueta Div (división simple) y Div PA (Capa con
Posición Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opción.

- 178 -
 Dreamweaver CS4

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay
que seleccionarla primero.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el
icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un
mismo documento, ya que todas las capas tienen asociada una imagen igual a ésta, y no es
fácil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a

través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú
Ventana opción Elementos PA. También puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el
documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el
nombre en el panel.

- 179 -
 Dreamweaver CS4

14.3. Formato de una capa

Las propiedades de la capa se especifican a través de su inspector de

propiedades.

Elemento CSS-P es el nombre o ID de la capa. Desde aquí podemos asignarle otro

ID, pero si lo hacemos perderá las propiedades que hayamos indicado para este elemento.
SI lo que queremos es cambiar el ID por otro más descriptivo, podemos hacer clic derecho
sobre el borde de la capa y elegir ID... en el menú contextual. También puede ser cambiado
a través del panel Elementos PA, haciendo doble clic sobre él.

El resto de campos se refieren a las propiedades CSS que definen la posición y

tamaño de la capa.

Izq y Sup indican la distancia en píxeles (también podemos introducir un valor en

porcentaje) que hay entre los límites izquierdo y superior del documento y los lados superior
e izquierdo de la capa respectivamente.

Por defecto se toman los lados del documento, a no ser que creemos una Capa PA
dentro de otra capa posicionada. En este caso, la distancia se referirá a los lados de la capa
padre, independientemente de su posición en el documento.

Si queremos que la posición se tome con respecto al elemento padre, pero este no
tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando
CSS (En las propiedades de Posición del editor CSS, estableciendo position como
relative). Esto no afectará a la posición del elemento padre si no cambiamos las
propiedades left, top, right o bottom.

Truco: Si queremos centrar una capa con respecto al elemento que la contiene
podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado

- 180 -
 Dreamweaver CS4

izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la
mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, añadiríamos por
CSS margin-left: -100px;.

An y Al indican la anchura y la altura

Índice Z es el número de orden de colocación de las capas. Este valor también

puede cambiarse a través del panel Elementos PA. Una capa será solapada por aquellas
capas cuyo índice Z sea mayor que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

o Default (visibilidad según el navegador),

o Inherit (se muestra la capa mientras la página a la que pertenece también se
esté mostrando),
o Visible (muestra la capa, aunque la página no se esté viendo) y
o Hidden (la capa está oculta).

La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando
sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la
capa.

Desb. (Desbordamiento). Hasta ahora, los elementos que veíamos se ajustaban a su

contenido. En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede
que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cómo
aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de
la capa.

o Visible indica que el contenido adicional se muestra, excediendo los límites

de la capa.
o Hidden (oculto) especifica que el contenido adicional no se mostrará en el
navegador.

- 181 -
 Dreamweaver CS4

o Scroll (desplazamiento) especifica que el navegador deberá añadir barras de

desplazamiento a la capa tanto si se necesitan como si no.
o Auto (automático) hace que el navegador muestre barras de desplazamiento
para la capa cuando sean necesarias (es decir, cuando el contenido de la
capa supere sus límites).

Todo lo que hemos definido de la capa, aparece como propiedades CSS en la

cabecera de la página, utilizando como selector el ID o nombre de la capa. Por eso, si
queremos emplear una capa en la misma posición en distintas páginas, podemos exportar
ese estilo a una hoja de estilos, y en cada página crear una capa y darle el mismo ID.
Recuerda que el ID ha de ser único en la página, pero puede repetirse en páginas distintas.

Podemos editar estas propiedades con el editor CSS en la categoría Posición. Ahí
verás, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez del
izquierdo como hacíamos hasta ahora. O la distancia con el lado inferior (bottom). Aunque
podemos hacerlo de varias formas, lo recomendable es indicar la distancia con uno de los
lados y el ancho, y la distancia con el lado superior o inferior y el alto.

14.4. Capas prediseñadas

Al crear un nuevo documento, habrás visto que aparece la columna Diseño.

- 182 -
 Dreamweaver CS4

Estos diseños, que podemos elegir, están basados en capas.

Lo que harán será dividir nuestra página en las filas y columnas que elijamos, con
anchos fijos o variables.

El nombre es bastante descriptivo, y además están acompañadas de gráficos que

representan el diseño, por lo que no necesitan más explicación.

Una vez seleccionado un diseño, sólo tendremos que reemplazar el texto de ejemplo
por el contenido que queramos.

- 183 -
 Dreamweaver CS4

Unidad 15.
Comportamientos
En este tema vamos a ver las características básicas de los comportamientos, así
como un par de ejemplos de entre sus posibles aplicaciones.

15.1. Introducción

Los comportamientos son acciones que suceden cuando los usuarios realizan
algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar
sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como código HTML, se programan en JavaScript.

Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es
necesario escribir ninguna línea de código JavaScript para programarlos.

Podemos tener una imagen como la que aparece a continuación con un

comportamiento asociado. Al situar el puntero sobre ella aparece un cuadro con texto que se
oculta al quitar el puntero de la imagen.

Para ello, la imagen tiene asociados dos comportamientos para mostrar y ocultar la
capa. Este tipo de comportamiento lo veremos más adelante.

Otros comportamientos que ya has visto son los que se aplican sobre las imágenes
de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es

- 185 -
 Dreamweaver CS4

necesario introducir este conjunto de comportamientos a través del panel

Comportamientos.

Para validar formularios ya viste algunas características del panel

Comportamientos. Vamos a recordar las que necesitamos para poder insertar
comportamientos más tarde.

El panel Comportamientos se puede abrir a través del menú Ventana, opción

Comportamientos. También pulsando Mayús+F4.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar
eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a que en el pasado,
los comportamientos solían ser diferentes dependiendo del navegador.

En la actualidad, los navegadores tienden a seguir el estándar, lo que hace que ya

no tengamos problemas de compatibilidad. Sólo habremos de cambiarlo si hacemos páginas
específicas para navegadores más viejos, ya en desuso.

15.2. Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectará el comportamiento.

Esto lo podemos hacer desde el inspector de propiedades.

Después seleccionamos el objeto que activa el comportamiento, como puede ser una
imagen, un fragmento de texto, etc.

- 186 -
 Dreamweaver CS4

El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no.

Al desplegar el botón del panel Comportamientos aparece la lista de todas las

acciones posibles.

Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir

unas acciones, mientras que otras no.

En este caso la acción Validar formulario no puede seleccionarse porque no existe

ningún formulario en la página.

Después de elegir alguna acción, el comportamiento correspondiente aparece en el

panel Comportamientos. En este caso se han insertado dos comportamientos.

Como puedes ver, cada comportamiento tiene asociados un evento y una acción.

- 187 -
 Dreamweaver CS4

Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo
se debe de realizar la acción.

Para eliminar un comportamiento, hay que seleccionarlo en el panel

Comportamientos y pulsar sobre el botón . También es posible cambiar el orden de los
comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los
botones .

15.3. Mostrar-Ocultar elementos

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar

elementos. Lo más común es emplearlo con capas, que han de haber sido creadas antes,
pero podemos hacerlo con cualquier elemento que tenga un ID asignado. Lo que hace este
comportamiento es alternar entre las propiedades de visibilidad visible y hidden.

Al principio del tema teníamos un ejemplo de este tipo. Vamos a ver qué eventos y
acciones hay que establecer para que se produzca dicho comportamiento.

Después de seleccionar el elemento que producirá el evento (en ése ejemplo, la

imagen del perro) hay que seleccionar una acción de la lista, pulsando sobre el botón .
En este caso la acción tiene que ser la de Mostrar-Ocultar elementos.

Tras elegir la acción, se mostrará un cuadro de diálogo en el que aparecen listados

todos los elementos de la página que podemos ocultar o mostrar:

- 188 -
 Dreamweaver CS4

Hay que especificar qué elementos han de mostrarse u ocultarse para el evento.

Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la

visibilidad inicial (Predeterminada).

Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas

una por una, indicando su visibilidad a través de los botones inferiores de la ventana.

No es necesario aplicar una visibilidad diferente a todas las capas de la página,

solamente a las que se desea que cambien al producirse el evento.

Si se desea eliminar una visibilidad establecida para alguna de las capas,

simplemente hay que volver a pulsar sobre el botón correspondiente a la visibilidad que ya
tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa apDiv1 habría que
volver a pulsar sobre el botón Mostrar.

Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero
sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen,
la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la
acción Mostrar-Ocultar elementos. Uno de ellos mostrará la capa para el evento
onMouseOver (cuando el ratón esté sobre), mientras que el otro la ocultará para el evento
onMouseOut (cuando el ratón esté fuera).

- 189 -
 Dreamweaver CS4

15.4. Llamar JavaScript

Otro de los comportamientos que puede aplicarse sobre algún objeto es el de Llamar
Javascript. Este comportamiento permite insertar código JavaScript dentro del código del
documento.

Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre
un objeto. Para ello hay que insertar la línea JavaScript "window.close();".

Al igual que para el ejemplo de las capas, lo primero que hay que hacer es
seleccionar el objeto sobre el que se desea aplicar el comportamiento. Seguidamente hay
que seleccionar la acción Llamar Javascript a través del botón .

Entonces aparece una nueva ventana en la que hay que introducir la línea
JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que

establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se produzca al
pulsar una vez sobre el objeto.

- 190 -
 Dreamweaver CS4

Pulsando dos veces sobre la acción vuelve a abrirse la ventana anterior, y es posible
modificar la línea de código.

Según nuestras necesidades elegiremos un evento u otro.

Eventos disponibles en Dreamweaver CS4

En el panel Comportamientos podemos seleccionar cualquiera de estos eventos.

Por sus características, no todos funcionan en todos los elementos.

Evento Se produce cuando...

onBlur Un elemento (normalmente un campo de formulario) pierde el foco
onClick Se hace clic en el elemento
onDblClick Se hace doble clic en el elemento
onFocus Un elemento (normalmente un campo de formulario) recibe el foco
onKeyDown El usuario pulsa una tecla
onKeyPress El usuario mantiene pulsada una tecla
onKeyUp El usuario libera una tecla
onLoad El navegador termina de cargar la página o imagen
onMouseDown El usuario pulsa un botón del ratón
onMouseMove El usuario mueve el cursor
onMouseOut El cursor abandona el elemento
onMouseOver El cursor se coloca sobre el elemento
onMouseUp El usuario libera un botón del ratón
Eventos no incluidos en el panel Comportamientos, pero que podríamos emplear:
onDragDrop El usuario arrastra y suelta un objeto en la ventana
onError Se produce un error al cargar (onLoad)
onChange El valor de un campo de formulario cambia
onMove Se mueve el elemento
onReset Se limpian los campos del formulario (botón réset)
onResize Se cambia el tamaño de una ventana o marco
Se selecciona el texto del campo texto o área de texto de un
onSelect
formulario
onSubmit Se va a enviar el formulario

- 191 -
 Dreamweaver CS4

onUnload El usuario abandona una página

Si observas el panel comportamientos, al principio aparecen los mismos eventos,

precedidos por la etiqueta <A>. La diferencia es que si seleccionamos estos eventos, se
creará un enlace alrededor del elemento y se aplicará el comportamiento al enlace. Si no, se
aplicará directamente al elemento.

Esto es muy común. Así, al crear un enlace, el usuario sabe que es algo que se
puede pulsar, porque al pasar por encima el cursor toma forma de mano, o porque tienen el
estilo propio de los enlaces.

- 192 -
 Dreamweaver CS4

Unidad 16.
Comportamientos avanzados
En el tema anterior vimos algunos de los comportamientos básicos, en este tema
veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta
característica de Dreamweaver para crear diversas funcionalidades automáticamente.

16.1. Mensajes emergentes

Este comportamiento te permitirá crear avisos emergentes.

Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta
que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos,
utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario.
Mientras se muestre el mensaje, la ventana del navegador quedará bloqueada.

Para crear un mensaje emergente deberás seleccionar el elemento al cual irá

asociado el mensaje, en el ejemplo es un enlace de texto.

Una vez seleccionado vete al panel Comportamientos (Mayus + F4) pulsa el botón
y selecciona la opción Mensaje emergente.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar
cuando hayas acabado y estará listo.

- 193 -
 Dreamweaver CS4

El mensaje se mostrará con un aspecto similar al siguiente (dependiendo del

navegador utilizado):

Es aconsejable que asocies este comportamiento al evento onClick (cuando el

usuario hace clic). Es más intuitivo para el usuario que si, por ejemplo, asocias el mensaje a
un evento onMouseOver (cuando se pase el ratón por encima) el usuario no sabrá muy
bien porque se ha generado el mensaje de aviso. Y resultaría muy molesto tener que ir
"esquivando" los enlaces por si aparecen mensajes emergentes.

En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de
respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick
es el más indicado para este caso.

16.2. Texto de la Barra de Estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de

personalizar una página web. Aunque no funciona en algunos navegadores.

Si observas esta barra cuando navegas verás que va cambiando su texto según te
encuentres sobre un enlace o no. Normalmente, las páginas que no tratan la Barra de
Estado no muestran ninguna información. Únicamente cuando posicionas el puntero sobre
un enlace, el texto de la Barra cambia para mostrar la dirección a la que éste se dirige.

Cambiar el Texto de la Barra de Estado significaría modificar el texto que aparece

en ese momento cuando realizamos un evento sobre un elemento en particular.

- 194 -
 Dreamweaver CS4

Este comportamiento es a veces útil para personalizar más la página y mostrar

información que de otra forma no sería posible. Pero si ocultamos la dirección real a la que
apuntan los enlaces puede resultar molesto para muchos usuarios. De hecho, como esto
nos permite "engañar" al usuario, ya que podemos indicar una URL falsa cuando en realidad
le enviamos a otra, muchos navegadores impiden como medida de seguridad cambiar el
texto de la barra de estado, a no ser que el usuario lo habilite expresamente.

Para crear este comportamiento selecciona el elemento al cual quieres asociar este
comportamiento. Abre el panel Comportamientos (Mayus + F4) y pulsa el botón .

Luego selecciona la opción Establecer texto y haz clic en Establecer texto de la

barra de estado.

Aquí deberás escribir el texto que quieres que aparezca en el cuadro Mensaje, luego
pulsa Aceptar y listos.

¿Dónde y cómo asociar el texto en una página? es sencillo. Una de las opciones que
te da este comportamiento es poder asociar un texto en concreto a la página en sí.

Es decir, que cuando abras una página se muestre inmediatamente (y

permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje
asociado al body de la página (para ello tendrás que insertar el comportamiento sin
seleccionar ningún elemento para que se asocie con toda la página) y lanzándolo en el
evento onLoad (en la carga del documento). De esta forma cuando se abra la página se
mostrará el mensaje en la barra de estado y permanecerá allí hasta que se produzca un
cambio (por ejemplo, que se posicione el cursor sobre un enlace).

- 195 -
 Dreamweaver CS4

Ahora veamos cómo debemos actuar al establecer texto para los enlaces. En este
caso será necesario que introduzcamos dos comportamientos.

El primero, asociado al evento onMouseOver (cuando el ratón se encuentra encima)

que mostrará el mensaje que queramos.

El segundo deberá ir asociado al evento onMouseOut (cuando el ratón deja de estar

encima) que deberá limpiar la barra de estado para que recupere su estado anterior.

En el caso de que hubiésemos establecido un mensaje para el body de la página, al

salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que
siga mostrándose.

En el caso de que la página no tuviese un mensaje personalizado, deja el cuadro

Mensaje en blanco para que la barra de estado recupere su estado natural.

Observa que si no estableces el segundo comportamiento, cuando posiciones el

ratón sobre el enlace (o imagen, párrafo..., da igual) el texto de la barra de estado
cambiará. Pero cuando el ratón deje de estar sobre el elemento no habrá ninguna orden
para que el texto vuelva a cambiar y se mantendrá fijo con el mensaje del anterior
comportamiento.

16.3. Carga Previa de Imágenes

Este comportamiento te será muy útil para mejorar la visualización de tus páginas
web en determinados casos.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador

a descargar las imágenes con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el

usuario verá la estructura completa de la página con las imágenes incluidas ya cargadas y
mostrándose.

- 196 -
 Dreamweaver CS4

Este método se diferencia del tradicional en que si no establecemos este

comportamiento, la página se carga (sólo texto) y se visualiza antes de que las imágenes
estén cargadas por completo, aunque respetando su hueco. Ten en cuenta que ésta es la
opción más aconsejada en la mayoría de los casos.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes.
Por lo que hay unos momentos en los que la página no se muestra tal y como fue
concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de
altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en cuenta
hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic

sobre el botón , selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones
, podrás indicar su ubicación pulsando el botón Examinar.

¿Qué imágenes debemos de cargar? Aquellas que son imprescindibles en el diseño

de la página o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos
un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el
cursor esté encima esa imagen cambie. Hemos de entender que las imágenes se cargan
cuando se necesitan. Por tanto, la imagen de fondo no se cargará hasta que no pasemos el

- 197 -
 Dreamweaver CS4

cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner
el cursor la imagen desaparezca pero la de sustitución aún no se haya cargado. En este
caso, es conveniente precargar esa imagen.

La imagen de sustitución que ya explicamos incluye la carga previa de imágenes.

Por su puesto, resulta contraproducente cargar imágenes que no vayamos a

emplear.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el

navegador se detenga durante unos segundos mientras realiza la carga, es posible que el
usuario al ver que tu página tarda demasiado en cargarse la abandone.

16.4. Abrir Ventana del Navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te
ayudará a crear enlaces mucho más personalizados.

Asociaremos este comportamiento normalmente a un enlace, o como mucho a una

imagen o un botón. Pero siempre lo haremos asociado al evento onClick de estos
elementos.

Otra opción es asociarlo al evento onLoad del body para que cuando se cargue el
documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que
queramos.

En esencia este comportamiento es un creador de pop-ups o ventanas

emergentes, así que si el usuario dispone de un bloqueador es posible que no se pueda
llevar a cabo la apertura de la nueva ventana. De todas formas, no es nada recomendable
llenar nuestro sitio de estos elementos, salvo si realmente aportan información importante.

Pero veamos qué debemos hacer para poder abrir una ventana de este modo.

Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos

es que se asocie al body de la página haremos clic en una área vacía del documento.

- 198 -
 Dreamweaver CS4

Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botón para

desplegar la lista.

Selecciona la opción Abrir ventana del navegador y verás el siguiente cuadro de

diálogo:

Veamos las opciones que podemos seleccionar aquí.

En Mostrar URL: escribiremos la URL de la página que queremos abrir.

En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos

especificar su tamaño en píxeles.

El cuadro Nombre de la ventana: te permitirá darle un nombre a la nueva ventana.

Así, más tarde, utilizando JavaScript, podríamos referenciarnos a ella utilizando este
nombre.

En Atributos: marca las casillas para que los elementos como la barra de estado o
la barra de menús aparezcan en la nueva ventana.

Si dejas todos desmarcados, la ventana se abrirá sin ningún elemento y aparecerá

únicamente rodeada de un marco de página.

- 199 -
 Dreamweaver CS4

16.5. Cambiar propiedades CSS

Este comportamiento nos resultará muy útil, ya que nos permite cambiar las
propiedades CSS de un elemento al producirse un evento.

Para poder identificar al elemento al que cambiaremos sus propiedades, hemos de

asignarle un ID.

Luego seleccionamos el elemento asociado, sobre el que se producirá el evento.

Abrimos el panel Comportamientos (Mayus + F4) y pulsamos el botón para desplegar
la lista.

En este caso seleccionamos el comportamiento Cambiar propiedad. Aparecerá un

diálogo como el siguiente:

Lo primero es identificar al elemento. Seleccionamos un Tipo de elemento del

desplegable. En ID de elemento se cargaran todos los IDs del tipo seleccionado.
Seleccionamos el que nos interese.

A continuación, seleccionamos una propiedad del desplegable Seleccionar o la

escribimos en el campo Introducir. E indicamos el valor que tomará en el campo Nuevo
valor:.

La pega de este sistema es que nos permite cambiar sólo una propiedad.

- 200 -
 Dreamweaver CS4

Recuerda que comentamos la existencia de pseudoclases CSS. Empleando el

selector selector:hover, podemos definir un estilo completo que se mostrará cuando el
elemento tenga el cursor encima.

16.6. Comprobar Plug-ins

Un comportamiento que tiene que ver con la comprobación de las características del
navegador del usuario es la opción Comprobar Plug-ins.

Si haces clic sobre ella verás el siguiente cuadro de diálogo:

Este comportamiento nos dará la posibilidad de comprobar si el navegador tiene

instalados los plug-ins (o añadidos) necesarios para que pueda ver archivos de tipo Flash,
Quicktime, Shockwave, RealPlayer, etc.

Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra
página se visualice correctamente, en el caso de que no se encuentre en el desplegable
Seleccionar: deberemos escribir su nombre en el cuadro de texto Introducir: (aunque esto
ocurrirá en contadas ocasiones).

Rellena los campos de URL siguientes. El primero indicará la ruta de la página que
quieres que se muestre si el plug-in existe en el navegador del usuario. Déjalo en blanco si
quieres que se quede en la página en la que está.

- 201 -
 Dreamweaver CS4

Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el

navegador en caso de que no tuviese el plug-in instalado. Aquí tienes dos opciones, o bien
redirigir al usuario a la página donde descargarse el plug-in para poder visualizar la tuya
correctamente, o redirigirlo a una página que hayas creado para aquellos que no cumplan
los requisitos mínimos del sitio.

Este comportamiento también deberá ir asociado al evento onLoad del body para
que pueda ejecutarse en la carga de la página.

Ése comportamiento está cayendo en desuso, ya que los navegadores actuales

detectan automáticamente los plugins faltantes y nos ofrecen la posibilidad de instalarlos.

16.7. Menús de Salto

Aunque este comportamiento se encuentra en el listado del panel Comportamientos

vamos a aprender a insertarlo desde otro lugar ya que te será más fácil.

Un menú de salto no es más que un menú desplegable desde el que puedes saltar
de una página a otra con sólo seleccionar la opción correspondiente en el menú.

Insertarlo es muy sencillo, sólo tienes que hacer clic en Insertar, seleccionar la
opción Formulario y en el desplegable elegir Menú de salto.

Se abrirá este cuadro de diálogo:

- 202 -
 Dreamweaver CS4

Para crear el menú deberás introducir los elementos (opciones) que lo forman. Para
ello escribe en Texto el título de la página y en Al seleccionarse, ir a URL la ruta de la
página que se tiene que abrir si el usuario selecciona esta opción del menú.

Una vez rellenados estos campos, haz clic en el botón .

Luego repite el proceso tantas veces como elementos en el menú quieras insertar.

Cuando hayas acabado decide en qué ventana quieres abrir los enlaces en Abrir
URL en: y dale un nombre al menú (para reconocerlo mejor más tarde) en Nombre del
menú.

Luego puedes marcar la opción Seleccionar primer elemento tras el cambio de

URL para que cuando se abra la ventana el elemento del menú que se muestre sea el
primero.

Déjalo desmarcado si quieres que se muestre el de la página que se está

visualizando.

Luego marca la opción Insertar botón Ir tras el menú para que se añada un botón
al formulario.

- 203 -
 Dreamweaver CS4

Si escoges esta opción verás que se crea un menú como el que tienes justo sobre
este párrafo.

El funcionamiento de este menú de salto es muy parecido al anterior, sólo que una
vez seleccionada la página que mostrar hay que pulsar el botón para que se efectúe el salto.

- 204 -
 Dreamweaver CS4

Unidad 17.
Estilos CSS Avanzados
En temas anteriores vimos cómo funcionaba el Panel CSS y cómo crear hojas de
estilos para poder utilizarlas en tus páginas web.

Hasta ahora hemos ido empleando las propiedades CSS más comunes, aunque no
las hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qué es
CSS.

A lo largo del libro, hemos orientado nuestras páginas para que sigan los
fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta
metodología exige que el archivo HTML solamente muestre datos organizados y
estructurados con etiquetas de marcación HTML, mientras que la parte de formato recaería
sobre los estilos CSS única y exclusivamente. Ya que aunque no las hemos empleados,
existen etiquetas (como <font> o <b>) y atributos (como bgcolor) que nos permiten definir
el aspecto del elemento, pero sin emplear CSS.

Para poder lograr esto deberemos dominar en profundidad CSS para poder
posicionar, modificar o adornar la página de un modo eficiente.

En este tema aprenderemos controles que nos ayudarán a presentar el texto e

imágenes de nuestras páginas de una forma mucho más limpia y cómoda.

17.1. Aplicar estilos CSS

Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto
etiquetas que introducían estilos CSS en ellas.

Por defecto, cuando creábamos una < Nueva regla de estilo > desde el inspector de
propiedades, se definía la regla únicamente para la página actual. Esto generaba un código
similar al siguiente en el <head> de la página (por supuesto, cambiando las propiedades
según el caso).

- 205 -
 Dreamweaver CS4

<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}

//->
</style>

Este método se emplea para incrustar el código directamente en la página. Los

estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas <style
type="text/css"> y </style>.

La base del CSS es lograr un estilo homogéneo y fácil de modificar para todo nuestro
sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada página. En nuestros
sitios de ejemplo, hemos optado por exportar los estilos a una hoja de estilos (un archivo
de extensión .css). Esta opción nos resultaba mucho mejor, ya que nos permite centralizar
el estilo en un sólo archivo que aplicaremos a todas las páginas.

Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja

directamente. En este caso deberemos crear un archivo CSS (Archivo → Nuevo y
seleccionando CSS). En él escribiremos las reglas de estilo del con la misma sintaxis que
hemos visto más arriba pero eliminado el componente HTML. Este sería el contenido de
nuestra hoja definiendo el mismo estilo que arriba:

@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;

- 206 -
 Dreamweaver CS4

background: url('imagenes/fondo.gif') repeat-x bottom;

}

Las dos primeras líneas generadas por Dreamweaver no son imprescindibles.

Este código está guardado en un archivo con extensión .css (por ejemplo,
miestilo.css). Luego deberíamos vincularlo en la página HTML utilizando la etiqueta <link
/> dentro del <head> de la página:

<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />

Otra opción que nos permitía el Inspector de propiedades CSS era crear un Estilo
en línea. Este estilo sólo afectaba al elemento en cuestión, ya que lo que realmente
estamos haciendo es definir las propiedades CSS empleando el atributo style del
elemento:

<p style="color: red; font-size: 30px;">

Este texto está en rojo y con un tamaño de 30 píxeles</p>

El estilo en línea es más desaconsejado porque es más difícil de modificar al tener

que buscarlo por el texto y modificándolo uno a uno.

Una página puede contener todos estos tipos de estilos CSS, o incluso tener varias
hojas de estilo asociadas. Entonces ¿cuándo empleamos cada uno?

 Emplearemos hojas de estilos para todos los estilos comunes a las páginas del sitio.

 Emplearemos estilos incrustados en la página para los estilos que se emplean en

únicamente en esa página, y que ya no serían útiles si borrásemos la página. Por
ejemplo, para definir el la apariencia de una tabla en concreto.

 Emplearemos estilos en línea cuando el estilo solo tenga sentido por estar en esa
posición en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar más
margen a un párrafo por tener una imagen en concreto, pero que no tendría sentido si
cambiásemos la imagen.

- 207 -
 Dreamweaver CS4

La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos
código repitas en tus páginas, más fácil será luego de modificar o exportar.

17.2. Sintaxis CSS

Un archivo CSS tiene una estructura muy bien definida, por lo que bastará con que
nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creación.

Su estructura siempre es la siguiente:

El formato a seguir para definir una propiedad es: selector { propiedad:

valor;} o selector {propiedad: valor1 valor2 valor3;} si puede tener varios
valores. Aunque como lo habitual es escribir varias propiedades para un selector, se suele
emplear la sintaxis:

selector {
propiedad1: valor;
propiedad2: valor1 valor2;
propiedad3: valor;
propiedad4: valor;
}

Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas CSS
como queramos, siempre una después de otra.

Entre llaves se encierra la definición del estilo, que viene dada por una lista de
propiedades y sus valores separados por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definición del estilo CSS.

Recordarás que al crear una nueva regla, Dreamweaver nos permitía elegir entre
cuatro tipos de selectores:

 Etiqueta HTML

- 208 -
 Dreamweaver CS4

 Clase
 Identidad
 Compuesto

Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier
elemento de una página puede ser modificado genéricamente para que tome un mismo
aspecto, por ejemplo:

p {font: 13px bold Arial;}

Hace que todos los párrafos (la etiqueta p) tendrán la fuente de un tamaño de 13
píxeles, estará en negrita y será del tipo Arial.

Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo
del navegador. Por eso vemos los párrafos con margen, los enlaces subrayados o los
encabezados de mayor tamaño. Haciendo esto reescribimos las propiedades de esa
etiqueta.

Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros
decidamos, por ejemplo:

.rojo {color: red;}

Hemos creado una clase, que hace que los elementos a los que se la asignemos
muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto
delante.

Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos. No hay
más que emplear el atributo class para indicar la clase asignada.

<p class="rojo">Éste es un texto en rojo.</p>

<div class="rojo">
<p>Este texto también es rojo.</p>
<p>Y también éste.</p>
</div>

- 209 -
 Dreamweaver CS4

En este ejemplo estaríamos creando un párrafo y todo su texto sería rojo. En el caso
del bloque, todo el texto que contenga será rojo, a no ser que los párrafos tengan definido
otro color en la hoja de estilo.

Los selectores de clase deben estar siempre escritos con caracteres alfanuméricos y
sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores,
recomendamos también escribirlos siempre en minúsculas.

Por último encontraríamos los selectores de identidad. Estos selectores identifican al

elemento por su ID. Por lo tanto, sólo afectarán a un elemento en concreto de la página, por
lo que son muy empleados para definir el estilo de las capas PA.

#contenedor {width: 600px;}

Observa que este tipo de selector va precedido por una almohadilla (#).

Más tarde en el código podremos encontrar:

<div id="contenedor">Este es un bloque que contiene texto</div>

En el código deberá establecerse la regla CSS asociándosela al atributo ID.

Este atributo (id) recoge el nombre del elemento que se ha creado con la etiqueta
HTML.

A partir de ese momento se podría referenciar a ese cuadro de texto como

contenedor utilizando JavaScript.

17.3. Selectores compuestos

Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de
combinarlos para producir hojas de estilo más complejas. A esta combinación de selectores
se les llama selectores compuestos.

- 210 -
 Dreamweaver CS4

Ahora veremos estos tipos de combinación:

 Agrupación: Los selectores se pueden agrupar separados por comas para asignarles
las mismas propiedades, por lo que:

p { background-color: #003; }
.resaltado { background-color: #003; }
#cabecera { background-color: #003; }

Puede escribirse como:

p, .resaltado, #cabecera { background-color: #003; }

 Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que
esté dentro de otro. Por ejemplo:

#contenido {
color: #0000FF;
background-color: #FFC;
}
.resaltado { background-color: #FFC; }

Esto hará que tanto el elemento #contenido como los elementos con la clase
.resaltado tengan el mismo color de fondo. ¿Pero qué ocurre si queremos resaltar algo
dentro de #contenido? Como no se verá ¿tenemos que crear otra clase? No es necesario,
podemos indicar propiedades distintas que afecten a la clase .resaltado sólo cuando se
encuentre dentro del elemento #contenido. Lo hacemos escribiendo lo selectores en orden
jerárquico y separados por espacios:

#contenido .resaltado { background-color: #06F; }

Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se
verán con otro color de fondo.

- 211 -
 Dreamweaver CS4

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar
dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por
ejemplo:

#contenedor p .derecha { float: right; }

En este caso todas las etiquetas con la clase derecha que se encuentren dentro de
un párrafo dentro del elemento definido como contenedor flotarán a la derecha.

17.4. Selectores de atributo

Hasta ahora hemos visto que los selectores se pueden combinar de bastantes
formas. Veamos que el poder de CSS no sólo se queda ahí si no que avanza un poco más
para ayudarnos a establecer estilos según el tipo de atributos que tenga una etiqueta.

Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en:

<a href="http://www.dominio.es" target="_blank">Enlace</a>

a es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos.
Veamos cómo hacerlo:

 Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados

atributos definidos, por ejemplo:

a[href] { font-family: Arial, Helvetica; }

En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo
href cambie su tipo de letra a Arial o Helvética.

- 212 -
 Dreamweaver CS4

 Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor
en un atributo, por ejemplo:

a[target="_blank"] { font-weight: bold; }

Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva
ventana al hacer clic, distinguiéndolos de los enlaces que navegan por el sitio.

17.5. Pseudo-clases y Pseudo-elementos CSS

Por último, y para terminar con los selectores veremos las pseudo-clases, elementos
que añadiremos a los selectores para evidenciar algún estado.

Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy
sencillos.

Primero veremos 4 tipos diferentes de pseudo-clases. Son: :link, :visited, :hover y

:active.

Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el

modo en el que se visualizarán lo elementos, aunque donde más usadas son es en los
enlaces.

Veamos el siguiente ejemplo:

a:link { color: red; }

a:visited { color: blue; }
a:hover { color: green; }
a:active { color: yellow; }

Esto hará que los enlaces se muestren de color rojo (red) en nuestra página. Es el
estado link. Por lo tanto, esta propiedad sólo tiene sentido en enlaces.

Cuando ya hayan sido visitados por el usuario se quedarán de color azul (blue). Es
el estado visited. Este estado se renovará dependiendo del navegador utilizado y se

- 213 -
 Dreamweaver CS4

mostrará durante un tiempo determinado (una sesión, etc.). Esta propiedad sólo tiene
sentido en enlaces.

En el momento en que coloques el ratón sobre él se mostrará de color verde

(green). Es el estado hover. Podemos aplicarlo a la mayoría de elementos.

Y finalmente en el momento que se haga clic sobre él, y mientras tenga el foco se
verá de color amarillo (yellow). Es el estado active. Puede resultarnos útil en campos de
formulario, para destacar el campo que se está editando.

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.

#menu a:hover { text-decoration: none; }

a.volver:hover { background-image: url(flecha_atras.png); }
#menu:hover a { text-decoration: underline; }

La primera regla afectará a los enlaces que estén dentro del elemento #menu
cuando tengan el cursor encima. La segunda regla, afectará a los enlaces con la clase
volver cuando tengan el cursor encima. El orden es muy importante. En el tercer ejemplo, a
cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el elemento #menu
tenga el cursor encima.

Luego tenemos dos pseudo-elementos que actuarán sobre el texto del documento,
son: :first-letter y :first-line (primera letra y primera línea respectivamente).

p:first-letter { font-size: 26px; }

p:first-line { font-variant: small-caps; }

17.6. Orden de aplicación de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica?

Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad,
el estilo final de un elemento será la suma de todos los estilos que afecten al elemento.

- 214 -
 Dreamweaver CS4

Pero ¿qué ocurre si repetimos una propiedad? Como norma general, prevalecerá el
estilo más concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo establecemos
el texto de los párrafos en rojo, y en la cabecera de la página definimos el color de los
párrafos en azul, prevalecerá éste último, ya que es más concreto, se refiere sólo a los
párrafos de esa página. Y si en un párrafo de la página, en el atributo style indicamos el
color de texto verde, prevalecerá éste por ser el más concreto de todos.

Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p,
ya que se refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya
que se refiere directamente a un determinado párrafo. Lo mismo ocurre al anidar los
selectores, p.inicio span es más concreto que poner sólo span.

En caso de empate, por ejemplo si definimos varias veces la misma propiedad en

una hoja de estilo, se tomará en cuenta la última, que machacará a las anteriores. Por
ejemplo, poner p {margin: 20px; margin-bottom: 5px;} sería como poner p
{margin: 20px 20px 5px;}.

En cualquier momento podemos saltarnos el orden de prioridad de los estilos,

añadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el
resto. Por ejemplo, en este ejemplo:

p { color: blue !important;

color: red;
}

El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin
embargo, al poner !important, hace que el texto sea rojo.

Además, los elementos hijos heredan las propiedades. Así, si definimos el color rojo
para el texto de una capa, todos los elementos de la capa mostrarán el texto en color rojo, a
no ser que tengan otro estilo definido.

Por todo esto, a veces podemos no saber dónde hemos definido la propiedad que
hace que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qué
propiedades afectan al estilo y dónde están definidas desde el panel Estilos CSS.

- 215 -
 Dreamweaver CS4

17.7. Controles de fuente

Ya hemos visto cómo manejarnos con los selectores, ahora veremos cómo
deberemos crear las definiciones de los estilos.

Empezaremos viendo los controles de modificación de fuentes:

 font-family: indica la familia de fuente en la que se mostrará el texto, puede tomar los
valores serif, sans-serif, cursive, fantasy y monospace:

Aunque esta propiedad también soporta que nombres un listado de diferentes

fuentes. El navegador las buscará de izquierda a derecha en el equipo del usuario, y
mostrará la primera que encuentre. Al final, es recomendable indicar una de las fuentes
del ejemplo de arriba, que son las fuentes genéricas (familias).

p { font-family: Arial, Helvetica, sans-serif; }

- 216 -
 Dreamweaver CS4

Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles

(p. ej. "Times New Roman")

 font-style: indica el estilo de la fuente (básicamente, nos permite ponerla en cursiva),

puede tomar los valores italic y oblique.

Algunas fuentes están hechas especialmente para tener una variante en italic
(cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique que
hace que el navegador incline automáticamente la fuente para mostrarla en cursiva. La
mayoría de navegadores no distinguen entre estos valores, y aplican siempre oblique,
por lo que éste es la valor más recomendado. Para mostrar el texto normal, le damos el
valor normal.

 font-variant: establece la variante de la fuente. Puede tomar el valor small-caps

(versales). Esto muestra las minúsculas como mayúsculas de menor tamaño. El valor
normal hará que se muestre el estado por defecto de la fuente.

Observa que Dreamweaver no muestra correctamente este estilo.

 font-weight: indica el peso de la fuente, es decir, nos sirve para ponerla en negrita. Los
valores más utilizados son: bolder, bold y lighter. También puedes utilizar valores del
100 al 900, siendo el primero la fuente más ligera y el último el más pesado.

Aunque en teoría podemos indicar distintos grosores, en la práctica la mayoría de

navegadores solo aplican normal y bold.

 font-size: establece el tamaño de la fuente. Puedes utilizar lo valores predefinidos

smaller, larger, xx-small, x-small, small, medium, large, x-large y xx-large. Los dos
primeros valores establecen el tamaño de la fuente en comparación a la definida en el
elemento padre donde se encuentra, así se mostrará más pequeña (smaller) o más
grande (larger).

También es posible establecer el tamaño del texto utilizando porcentajes (%) o

em. Que también mostrará el texto en relación a su elemento padre (100% = 1em).

- 217 -
 Dreamweaver CS4

Éste es el tipo más recomendado. Ya que con sólo cambiar el tamaño de la

fuente base, todos los elementos se ajustarán a ésta manteniendo la proporción.

Existen otras unidades relativas puntos (pt), píxeles (px)... El sistema de

puntos (pt) varía un poco según los sistemas operativos, mientras que el valor en
píxeles (px) depende de la resolución de pantalla.

Incluso podemos emplear valores concretos, como centímetros (cm).

a { font-size: 12em; }
p { font-size: 14px; }
.nota { font-size: 0.90%; }

Es posible definir todos estos estilos que hemos visto en una sola definición. Para
ello utilizaremos sólo la propiedad font:.

Así, una retahíla de reglas como ésta:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: large;
font-family: monospace;
}

Puede escribirse como:

p { font: italic small-caps bold large monospace; }

Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y
family.

Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:

- 218 -
 Dreamweaver CS4

p { font: bold sans-serif; }

17.8. Espaciado y alineación

Continuando con los controles de texto tenemos la propiedad word-spacing que

establece la separación entre las palabras de un texto.

También podemos utilizar la propiedad letter-spacing para establecer la separación

entre los caracteres del texto:

vertical-align establece la alineación vertical del texto. Puede tomar los valores
baseline, sub, super, top, text-top, middle, bottom, text-bottom.

Observa como los valores sub, super, text-bottom y text-top toman como
referencia el tamaño del texto, mientras que top, middle y bottom toman como referencia el
alto del párrafo completo.

Estas propiedades se suelen aplicar a las imágenes para alinearlas con respecto al
texto:

Esta propiedad no nos sirve para centrar verticalmente el contenido de un elemento.

line-height indica el alto de línea del texto, igual que el resto de propiedades
puedes establecer esta altura en píxeles, ems, puntos u otras unidades.

- 219 -
 Dreamweaver CS4

Si estableces simplemente valores numéricos podrás indicar el alto respecto a su

tamaño normal. Por ejemplo:

p { line-height: 2; }

Esta línea muestra el texto con un interlineado doble. Si hubiésemos escrito 1.5 el
interlineado sería un 50% más alto de lo normal.

Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene
el texto.

Truco: Si tienes un elemento de alto específico, puedes centrar el texto

verticalmente dándole al elemento un line-height igual que el alto. Esto sólo tiene sentido si
tenemos una única línea de texto.

text-align establece la alineación horizontal del texto. Sus valores ya te deben ser
familiares: left, right, center y justify.

- 220 -
 Dreamweaver CS4

Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

text-indent indica el tamaño de sangrado (o sangría) del texto, es decir la

separación de la primera línea con el borde lado izquierdo. Tomará valores en puntos,
píxeles o ems, como prefieras.

Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

white-space, esta propiedad es muy útil para evitar que el ancho del navegador
modifique el ancho de las líneas del texto.

Puede tomar el valor nowrap para que el texto se muestre en una sola línea sin
insertar saltos no deseados:

También puedes establecer esta propiedad al valor pre. En este caso todos los
espacios insertados en el texto se mostrarán y no se convertirán en uno sólo como ocurre
normalmente. Además, si en el código hay saltos de línea, también se mostrarán:

Este último valor no funciona correctamente en Internet Explorer así que es

recomendable utilizar la entidad HTML (&nsbp;) para mostrar más de un espacio.

17.9. Apariencia del texto

text-decoration establece si el texto llevará decoración o no. Principalmente la

emplearemos para el subrayado. Esta propiedad es muy útil para modificar el estilo de los
enlaces. Los valores que puede tomar esta propiedad son none, underline, overline, line-
through, blink.

- 221 -
 Dreamweaver CS4

El valor blink hace que el texto parpadee. Este valor sólo funciona en determinados
navegadores (no en Internet Explorer).

Con la propiedad text-transform puedes indicar la transformación del texto (cambiar

mayúsculas / minúsculas) de la siguiente forma. Capitalize cambia la primera letra de
cada palabra a mayúsculas. Uppercase y lowercase cambian el texto a mayúsculas o
minúsculas respectivamente.

Por último veremos la propiedad color que establece el color del texto.

Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de

colores del tema 3).

De modo que simplemente haría falta especificar el color de este modo:

p { color: #060; }

También existe la posibilidad de utilizar unas palabras reservadas para nombrar unos
cuantos colores básicos.

El modo en el que se definiría el estilo sería el mismo:

p { color: red; }

Aunque en este caso en vez de introducir su equivalente hexadecimal,

referenciaríamos directamente su nombre.

17.10. Controles de ratón

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la

apariencia del ratón cuando se sitúa sobre una etiqueta afectada por esta propiedad CSS.

- 222 -
 Dreamweaver CS4

Puedes aplicarla sobre párrafos, enlaces o incluso sobre el body mismo (así el
cursor tendrá una forma personalizada en toda la página).

El modo en el que se utiliza es igual que el resto, pero empleando la propiedad

cursor:

p { cursor: pointer; }

Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-
resize, se-resize, sw-resize, w-resize, nw-resize, text, wait y help.

También podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis:

p { cursor: url(graficos/micursor.cur), auto; }

Para que funcione en IE, debemos empelar imágenes de cursor (extensión .cur).

17.11. Controles de lista

Hemos visto muchas propiedades que afectan al modo en el que se muestran los
textos de nuestras páginas.

Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar
estilo a nuestras listas.

 list-style-type permite establecer el tipo de viñeta utilizada en las listas, puede tomar
los valores disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha y none.

 disc 1 o circle 1  square 1

 disc 2 o circle 2  square 2
 disc 3 o circle 3  square 3

- 223 -
 Dreamweaver CS4

i. lower-roman I. upper-roman
1 1
1. decimal 1
ii. lower-roman II. upper-roman
2. decimal 2
2 2
3. decimal 3
iii. lower-roman III. upper-roman
3 3

A. upper-alpha
1
a. lower-alpha 1 none 1
B. upper-alpha
b. lower-alpha 2 none 2
2
c. lower-alpha 3 none 3
C. upper-alpha
3

Este estilo debe ir asociado a la etiqueta li, ul o ol.

 list-style-image permite mostrar una imagen en lugar de una viñeta.

La forma en la que lo haremos será la siguiente:

ul { list-style-image: url(graficos/lista.gif); }

Así declararemos el estilo. Luego bastará con escribir una lista desordenada,
pues hemos utilizado el selector ul para marcar el estilo.

elemento 1
elemento 2
elemento 3
elemento 4

Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o
relativa a la hoja de estilos. No al documento donde se aplica.

- 224 -
 Dreamweaver CS4

 list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores
outside (fuera, opción por defecto) e inside (dentro).

Veamos un ejemplo mostrando bordes en los elementos que lo ilustrará

perfectamente:

Como puedes ver el valor inside alinea la viñeta con el principio del texto del
elemento anterior. Outside alinea la viñeta del elemento en la posición predefinida. Utiliza
este último valor para destacar listas definidas como inside.

Por último, como en los controles de fuente, existe un modo en el que podemos
escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la
propiedad list-style.

De este modo el siguiente bloque:

ol {
list-style-type: upper-alpha;
list-style-position: outside;
list-style-image: url(imagenes/bullet.gif);
}

Puede escribirse como:

ol {
list-style: upper-alpha outside url(imagenes/bullet.gif);
}

- 225 -
 Dreamweaver CS4

Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna
de ellas, simplemente omítela.

17.12. Controles de fondo

En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.

Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas,
párrafos, capas, el body de la página, etc.

 background-color permite establecer el color de fondo. Utiliza los mismos códigos

hexadecimales o los nombres de color que vimos en la propiedad color del texto.

La sintaxis es igual a la que hemos visto hasta ahora:

td.rojo {
background-color: red;
}

 background-image establece una imagen de fondo para el elemento.

body {
background-image: url(imagenes/fondo.jpg);
}

Por defecto, las imágenes se posicionarán en la esquina superior izquierda y en

mosaico. Si la imagen tiene zonas transparentes, se verá el color de fondo detrás de
ella.

 background-repeat indica el modo de repetición de la imagen establecida para el

fondo.

Puede tomar los siguientes valores:

- 226 -
 Dreamweaver CS4

 repeat: la imagen se repite a modo de mosaico hasta ocupar la página completa.

 repeat-x: la imagen se repite a lo largo del eje horizontal.
 repeat-y: la imagen se repite a lo largo del eje vertical.
 no-repeat: la imagen no se repite.

Por omisión, el valor que se toma es repeat, por lo que se genera un mosaico
con la imagen del fondo.

Deberás declarar la URL de la imagen para poder utilizar esta propiedad:

#menu {
background-image: url(imagenes/menu.gif);
background-repeat: repeat-x;
}

 background-attachment se utiliza para indicar si la imagen de pantalla es fija o se

desplaza con el movimiento de las barras de desplazamiento.

Esta opción se usa sobre todo para las imágenes del body.

Puede tomar los valores fixed y scroll. El primer valor dejará la imagen fija, el
segundo hará que la imagen se desplace junto con las barras.

 background-position permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores top, center, bottom y left, center, right.

En este caso podremos combinar dos de los valores, por ejemplo:

.cita {
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-position: right top;
}

- 227 -
 Dreamweaver CS4

Aunque puedes omitirlos, pero recuerda que si lo haces por omisión los valores
serán top y left.

Igual que en algunos de los apartados anteriores (observa que siempre son las
propiedades con guiones) puedes utilizar la propiedad background para resumir las reglas
CSS.

Así el siguiente bloque:

.cita {
background-color: gray;
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
}

Puede ser escrito de la siguiente forma:

.cita {
background: gray url(imagenes/quote.gif) no-repeat
scroll right top;
}

Recuerda mantener el orden color, image, repeat, attachment y position.

Y ya sabes, si no quieres alguno, sáltatelo.

17.13. Controles de margen interior y exterior

Ahora veremos unas cuantas reglas que afectarán a los bordes y márgenes de los
elementos.

- 228 -
 Dreamweaver CS4

Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra. En el
ejemplo, la zona en gris, es el margen de la caja interior, que se toma con respecto a la
caja que lo contiene. Iremos cambiando los valores de ese margen para ver el efecto.

 margin-top, margin-right, margin-bottom y margin-left establecen el margen a cada

lado del elemento.

El margen establece la distancia que queda entre el borde exterior del elemento y el
interior del elemento que lo contiene, o entre él y el siguiente elemento.

El margen no forma parte del elemento, por lo que no mostrará sus propiedades, por
ejemplo el color de fondo.

Puedes utilizar píxeles o porcentajes para indicar estas distancias.

Por ejemplo, en la siguiente caja se le ha dado al bloque interior la siguiente clase:

.bloque_interior {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: -10px;
}

Los márgenes superiores e inferiores se pueden ver en las franjas verdes (arriba la
mayor, de 20px y abajo de 5px).

- 229 -
 Dreamweaver CS4

Observa cómo el margen 0 del lado derecho hace que los bordes queden pegados,
mientras que un valor negativo hace que el bloque salga de la caja.

 La propiedad margin te permite unificar varias propiedades en una sola. Así, la regla
anterior podría quedar como:

.bloque_interior {
margin: 20px 0px 5px -10px;
}

Recuerda que deberás seguir el orden top, right, bottom y left.

 
En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha
(left y right) sean iguales entre sí se puede escribir en dos valores, como:

.bloque_interior {
margin: 20px 5px;
}

En este formato, el primer valor (20px) indica los márgenes superior e inferior y el
segundo (5px) corresponde a los márgenes izquierdo y derecho.

En le aso de haber tres valores, corresponderían a arriba, izquierda-derecha y abajo

respectivamente.

En caso de que quieras que todos los margenes tengan la misma distancia basta
escribirlo sólo una vez:

.bloque_interior {
margin: 20px;
}

Ahora todos los márgenes serán de 20 píxeles.

- 230 -
 Dreamweaver CS4

También se pueden establecer estas propiedades a auto. Esta propiedad resulta

muy útil para centrar horizontalmente bloques en los que hemos definido el ancho. En los
ejemplos anteriores, el bloque exterior tenía asignada esta propiedad. De lo contrario,
aparecería a la izquierda de la página.

.bloque_exterior {
width: 150px;
margin: auto;
}

Cuando los elementos son contiguos, si ambos tienen margen, estos márgenes se
solapan, quedando como margen la distancia mayor. Veamos el siguiente ejemplo:

.bloque_interior {
margin: 20px;
}

En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de 20px.
Si los márgenes se sumasen, la distancia entre ellos sería de 40px. En cambio al solaparse
queda la misma distancia que arriba o abajo, 20px.

 padding-top, padding-left, padding-bottom y padding-right establecerán la distancia

del borde de un elemento con su contenido.

En los siguientes ejemplos, mostramos el padding con el color gris más claro:

Lo entenderás mucho mejor con el siguiente ejemplo:

- 231 -
 Dreamweaver CS4

.bloque_interior {
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
margin: 5px;
}

En el ejemplo anterior vemos el contenido de la caja en blanco. Vemos que en vez

de comenzar en el mismo borde como antes, queda alejado, lo que vemos coloreado en gris
claro. Esto es el padding. Como puedes ver la distancia del contenido a los bordes derecho
e inferior es de 5px. En cambio, la distancia con el lado superior es mayor, de 20px y con el
lado izquierdo de 10.

Y lo mismo pasa con los márgenes superior (20px) e izquierdo (10px).

Observa que además existe un margen exterior (en gris).

Igual que con los márgenes podemos abreviar las reglas CSS utilizando la propiedad
padding. Podemos los padding distintos en una misma regla (arriba, derecha, abajo,
izquierda), definir los pares de padding (arriba-abajo, izquierda-derecha) o asignarles el
mismo valor a todo.

.bloque1 {
padding: 20px 15px 15px 20px;
}
.bloque2 {
padding: 10px 5px;
}
.bloque3 {
padding: 15px;
}

Si un elemento tiene margen, y el elemento que lo contiene tiene padding, se suman.

Veamos un ejemplo:

- 232 -
 Dreamweaver CS4

.bloque_exterior {
padding: 10px;
}
.bloque_interior {
margin: 10px 0;
padding: 5px;
}

Como vemos el bloque exterior deja un padding de 10px. Como el interior tiene un
margen superior e inferior de otros 10px, se suman y queda una separación entre los lados
de 20px.

Por defecto, muchos elementos suelen tener margen. La mayoría no tienen padding.
Muchas veces, los valores del margen son distintos en distintos navegadores, lo que hace
que los elementos no se vean igual. Por eso es recomendable establecer siempre nuestros
márgenes, y no dejar el que muestra por defecto el navegador.

17.14. Bordes

También tenemos las propiedades de borde. El borde forma un marco que rodea al
elemento. Fuera de él queda el margin, mientras que el padding queda dentro.

 La primera es border-width que indica el ancho o grosor de un borde.

Puede tomar los valores medium, thin y thick. Aunque también se aceptan valores
en píxeles (los más empleados) y porcentajes que son más fáciles de manejar a la hora de
crear bordes con una anchura exacta.

En este caso hemos utilizado:

.borde1 {

- 233 -
 Dreamweaver CS4

border-width: 1px;
}
.borde2 {
border-width: 5px;
}

 border-style muestra el borde del elemento de una forma determinada, existen varios
tipos:

 border-color establece en forma hexadecimal o con nombre el color del borde de un

elemento.

.borde {
border-color: blue;
}

Como en el resto de propiedades, utilizaremos la propiedad border para resumir

estas tres últimas.

De modo que el siguiente bloque:

.borde {
border-width: 10px;
border-style: groove;
border-color: black;
}

- 234 -
 Dreamweaver CS4

Podría escribirse más fácilmente:

.borde {
border: 10px groove black;
}

En este caso podemos cambiar el orden de las propiedades, aunque te

recomendamos que sigas siempre el mismo.

También podemos definir independientemente las propiedades de cada lado:

.borde {
border-top-width: 10px;
border-top-style: groove;
border-top-color: black;
border-bottom: 5px blue solid;
}

Y podemos emplear el mismo sistema que con márgenes y padding para referirnos a
los cuatro lados:

.borde {
border-width: 5px;
border-color: blue green;
border-style: solid dotted double groove;
}

17.15. Elementos flotantes

Tenemos la propiedad float, que permite que cualquier elemento flote en un lado
determinado de la pantalla mientras el resto sigue el flujo natural.

Observa estos ejemplos:

- 235 -
 Dreamweaver CS4

Hemos utilizado los valores left y right respectivamente. En estos casos a los
párrafos que contienen el símbolo de copyright se les han aplicado la propiedad CSS float:

<p style="float:left; font-size: 25px; border: 1px solid black;

margin:3px;">&copy;</p>
<p style="float:right; font-size: 25px; border: 1px solid
black; margin:3px;">&copy;</p>

Pero si vemos detenidamente esta propiedad veremos que encontramos un

problema:

¿Cómo evitamos que el elemento flotante quede a la derecha del segundo párrafo?

Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el
ajuste que se esté realizando por una etiqueta anterior marcada con float.

- 236 -
 Dreamweaver CS4

Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda,
derecha o ambos respectivamente.

Por lo que si le aplicamos un clear: right; al segundo párrafo este se mostrará sin
verse afectado por el float:

El código que hemos utilizado es el siguiente: <p style="clear: right;">

Observa que al hacer esto, el segundo párrafo no comienza hasta que no acaba el
elemento flotante.

Del mismo modo esta propiedad nos ayudará en este caso, donde tenemos dos
elementos flotantes a la izquierda:

Observa también que el elemento flotante sobresale del bloque, ya que no se tienen
en cuenta para calcular el alto.

Queremos que los dos bloques estén flotando a la izquierda pero uno debajo del
otro.

- 237 -
 Dreamweaver CS4

Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el
comportamiento del primer elemento que ya estaba flotando, y aparezca a continuación
style="float: left; clear: left;".

Y obtendríamos lo siguiente:

Ahora combinando los márgenes y los elementos flotantes podemos crear

columnas de una forma muy sencilla:

La forma es la siguiente:

1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial a no
ser que queramos darle un alto fijo, pero hemos preferido añadir unos bordes y
paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).

- 238 -
 Dreamweaver CS4

2. Luego creamos otro bloque utilizando divs.

3. A este último bloque le asignamos la propiedad float: left; para que se encuentre
flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).

4. Luego creamos un tercer elemento que contendrá la segunda columna.

5. A este elemento deberemos darle un margin-left del mismo tamaño que la anchura de
la primera columna. Así nos aseguramos de que se encuentren en el mismo nivel

- 239 -
 Dreamweaver CS4

(porque el elemento de la izquierda está flotando) pero no vuelva a tomar el flujo

normal cuando el bloque de la izquierda haya acabado.

6. Finalmente añadimos un nuevo bloque que utilizaremos como pie de página.

7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento
flotante no le afecte en caso de que el contenido fuese demasiado corto.

- 240 -
 Dreamweaver CS4

No es la única forma de conseguir este efecto. Podemos hacer las dos columnas
flotantes, empelar Divs PA, etc...

17.16. Controles de elementos de bloque y en línea

Ahora veremos cómo posicionar los elementos y darles el tamaño que nos convenga
para representarlos.

Antes de empezar deberíamos hacer una distinción entre las etiquetas HTML.

Podemos clasificar las etiquetas en dos grupos: de bloque o en línea.

Las etiquetas de bloque son aquellas que causan un salto de línea antes y después
de ellos, y ocupan todo el ancho del elemento que las contienen. Por ejemplo las etiquetas
p, div, table, hr, body, etc... Se emplean para organizar el contenido.

La etiqueta de bloque más genérica es div, que puede contener cualquier etiqueta.
Por ejemplo, un párrafo no debe contener a otro párrafo.

Sin embargo luego encontramos otro tipo de etiquetas (en línea) que no producen
saltos en el flujo de la página, como pueden ser las etiquetas a, strong, em, span, etc. Se
emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc.

Las etiquetas de bloque pueden contener a otras etiquetas de bloque y a etiquetas

en línea. Las etiquetas en línea, pueden contener a otras etiquetas en línea, pero nunca a
un elemento de bloque.

Teniendo esto siempre en mente verás que es más sencillo trabajar y moldear las
páginas utilizando CSS.

 Primero veremos las propiedades de tamaño height (altura) y width (anchura).

Puedes especificarlas en cualquier elemento de bloque (no en elementos en línea) y

establecerán su alto y su ancho en píxeles o porcentaje.

- 241 -
 Dreamweaver CS4

#contenedor {
width: 300px;
height: 50px;
}

 Finalmente tenemos la propiedad display, que establece cómo se muestra el tipo de

elemento con el que estamos tratando.

Esta propiedad es muy útil por ejemplo para transformar las etiquetas de bloque a
en línea y viceversa.

Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inline-
table, table-row-group, table-header-group, table-footer-group, table-row, table-
column-group, table-column, table-cell, table-caption, none o inherit.

Los dos primeros valores hablan por sí mismos. Puedes asociarle el estilo display:
block; a una etiqueta a para que cree un salto de línea antes y después de ella o poder
darle un alto y ancho. Esto se emplea mucho en los menús, normalmente formados con
listas.

Esto lo logramos convirtiendo el enlace en un bloque y haciendo que ocupe todo el

alto (al ser un bloque, ya ocupa todo el ancho):

.boton a {
display: block;
height: 100%;
}

- 242 -
 Dreamweaver CS4

Del mismo modo, podrás hacer que una etiqueta de bloque (como p o div) se
convierta en un elemento en línea utilizando display: inline; y puedan ser mostradas una al
lado de otra:

En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.

Simplemente les hemos dado el estilo:

.tabla {
display: inline;
}

Aunque si disminuyes el ancho de la ventana verás que al tratarse de elementos en

línea se adaptan a su tamaño, y al final cuando no quepan, saltan de línea.

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que
vimos en el apartado de Controles de texto: white-space.

Introduciendo estas tres tablas en un elemento de bloque como un div y asignándole

la propiedad white-space: nowrap; conseguiríamos que las tres tablas permaneciesen en
línea sin saltos de pantalla a pesar de la anchura de la ventana.

- 243 -
 Dreamweaver CS4

Comentaremos que esta propiedad también puede tomar el valor list-item.

De este modo, los elementos que se vean afectados por el estilo display: list-item;
se mostrará como si formasen parte de una lista.

Observa el siguiente ejemplo:

p.lista {
display: list-item;
list-style-type: square;
}

Si aplicamos este estilo sobre unos párrafos veremos esto:

Otro valor muy interesante de display es none. Esto hace desaparecer el elemento
del flujo de la página, no como al usar visibilty: hidden; que lo oculta pero mantiene su
espacio. Esta propiedad es muy empleada en comportamientos JavaScript.

17.17. Controles de posición

En este apartado veremos cómo posicionar el contenido de la página web utilizando

únicamente estilos CSS.

Existen unas propiedades CSS que combinadas con las siguientes nos ayudarán a
mover el contenido de la página.

Estas son top, left, bottom y right.

- 244 -
 Dreamweaver CS4

Con estas propiedades podremos establecer la distancia a los bordes de la ventana

del navegador, o del elemento que lo contenga.

Recordemos que top equivale a la parte superior.

Left al lado izquierdo.

Bottom al borde inferior.

Y finalmente right al derecho.

Normalmente daremos valores a estas propiedades utilizando píxeles o

porcentajes.

Veamos ahora cómo las utilizaremos. Para ello deberemos declarar también la
propiedad position (posicionamiento).

Esta es sin duda la más compleja de este apartado así que la veremos con
detenimiento.

Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed.

Vayamos uno a uno.

El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la

página y no puede ser modificado utilizando las propiedades top/bottom y left/right.

p {
position: static;
}

Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana

con sólo darle las coordenadas (las CapasPA emplean este posicionamiento).

- 245 -
 Dreamweaver CS4

Así deberíamos declarar la posición utilizando un par de propiedades top/bottom y

left/right. Lo habitual es indicar también el alto y ancho, aunque si no lo hacemos estos
valores se ajustarán al contenido.

Un ejemplo podría ser este:

#capa_flotante {
position: absolute;
top: 100px;
left: 300px;
width: 30px;
height: 125px;
}

Esta declaración de estilos es muy habitual en las capas. Se posiciona

absolutamente el objeto y luego se le da un ancho y un alto.

El valor relative también nos permite mover el elemento. Éste, en principio, ocupa su
lugar en el flujo normal de la página y utilizaremos las propiedades top/bottom y left/right
para desplazarlo tomando como referencia ese lugar y no los bordes de la página. El hueco
reservado para el elemento quedará en el flujo normal.

Por ejemplo:

p.especial {
position: relative;
top: 20px;

- 246 -
 Dreamweaver CS4

left: 20px;
}

Esta regla hará que los párrafos marcados con la clase especial se desplacen 20
píxeles hacia abajo y hacia la derecha de su posición normal en el flujo de la página.

Piensa que lo que estamos diciendo en la definición de la regla es que va a haber un

desfase de 20 píxeles desde la parte superior de donde se encontraba en un principio,
y lo mismo con la parte izquierda, por lo que el elemento se verá desplazado en diagonal.

Finalmente encontramos el valor fixed. Asignándole este valor a la propiedad

position podemos hacer que un elemento se quede fijo en la ventana aunque se muevan
las barras de desplazamiento. Un comportamiento muy útil para los menús o algunos
gráficos que queramos que permanezcan siempre a la vista. Hemos de tener en cuenta que
al desplazar la página puede que tapen otros elementos.

También acepta los pares top/bottom y left/right para definir la posición en la que
se mostrará fijo.

Por ejemplo:

#menu {
position: fixed;
top: 0px;
right: 0px;
}

- 247 -
 Dreamweaver CS4

Esta regla de estilo posicionaría un elemento con identidad menu en la esquina

superior derecha de la ventana y aunque utilicemos el scroll (las barras de desplazamiento)
permanecerá allí fijo.

Este valor no funciona en IE 6, aunque sí en las siguientes versiones.

17.18. Controles de visibilidad

Por último en este apartado veremos unas cuantas propiedades que tienen que ver
con la forma en la que se visualizan los elementos en pantalla.

La primera propiedad que veremos será z-index.

Esta propiedad decide el orden de profundidad de los elementos que se

encuentran solapados.

En el apartado anterior vimos cómo mover los elementos en la pantalla. Imagina,

ahora, que al mover dos capas una nos queda por encima de la otra.

¿Cómo podemos decidir cuál quedará por detrás? ¿Y al frente?

Utilizaremos esta propiedad para ello.

Z-index acepta números positivos o negativos, y establece que el elemento con

un valor mayor se mostrará por delante del resto.

Esto tiene sentido en elementos posicionados, que pueden solapar otros elementos.

Veamos un ejemplo:

- 248 -
 Dreamweaver CS4

Para utilizar esta propiedad basta con declararla:

.rojo {
position: relative;
top: 100px;
left: 20px;
z-index: 0;
}

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility.

Puede tomar los valores visible y hidden (visible y escondida respectivamente).

Recuerda que esta propiedad la empleábamos con las capas.

Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan
en la pantalla.

Muy útil para ocultar estadísticas o para crear animaciones complejas combinando
esta propiedad con JavaScript.

#estadisticas {
visible: hidden;
}

Finalmente nos encontramos con otra propiedad llamada overflow.

Esta propiedad establece como ha de tratarse el contenido dentro de un elemento.

- 249 -
 Dreamweaver CS4

El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo

que sólo actúa en aquellos casos en los que el continente se queda demasiado pequeño
para mostrarlo todo.

Puede tomar los valores visible, hidden, scroll y auto.

El valor visible hace que se ignore el tamaño del continente para mostrar todo el
contenido. Es el valor por omisión en la mayoría de los navegadores.

Utilizando hidden se oculta el contenido que no cabe y no muestra barras de

desplazamiento. El tamaño del continente no se verá afectado.

Si le das el valor scroll se introducirán las barras de desplazamiento necesarias para

que el contenido pueda visualizarse correctamente. El tamaño del continente no se verá
afectado. Las barras siempre serán visibles.

Finalmente, con el valor auto aparecerán las barras de desplazamiento cuando sean
necesarias.

Veamos unos ejemplos:

En este ejemplo hemos introducido 5 etiquetas div que contienen un texto que a
veces no cabe.

El bloque marcado con overflow: visible; muestra el texto saliendo de él (el texto
excedente está fuera del flujo de la página). Al contrario que el que está definido como
hidden que esconde el resto del texto.

- 250 -
 Dreamweaver CS4

El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea

necesaria, y auto hace que el navegador introduzca únicamente la horizontal pues es la que
es necesaria en este caso.

- 251 -