Dreamweaver

Unidad 1.
Conceptos básicos de Dreamweaver CS5 (I)

1.1. Qué es Dreamweaver CS5
Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS5 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.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la
versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir
la versión completa de este fantástico programa.
Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa. Los logotipos de
Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no
tiene ninguna relación con Adobe.
Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas
aquí.
Unidad 1. Básico: HTML básico

Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text Markup
Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin de cada elemento de la página
Web.
Por ejemplo, el título de la página Web se escribe entre las etiquetas <title> y </title>. Como ves, ambas
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.
Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan. Por
ejemplo, <table border="1"> indica que la que se trata de una tabla, y que tendrá un borde de grosor 1.
Una página HTML básica tendría el siguiente aspecto:
<html>
<head>
<title> Mi primera página web </title>
</head>
<body>
<p><a href="http://www.aulaclic.es/"> Haz clic aquí para ir a aulaClic</a>
y aprender más sobre páginas web.</p>
</body>
</html>
El ejemplo anterior mostraría una página con un sólo párrafo en el que parte del texto enlaza con la web de
aulaClic. Puedes probarlo copiando el código y pegándolo en un archivo de texto, que debes guardar con la
extensión .htm.
Observa que cada etiqueta tiene una apertura y un cierre, y que están anidadas unas dentro de otras.
1
Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en
un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde Internet solicita ver una
página el servidor Web envía la página al navegador y este interpreta las etiquetas para dar la página
correctamente formateada.
Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto.
Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y
contenido definidos en el editor gráfico. Esto nos facilita muchísimo el trabajo.
1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management
System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web.
Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndos crear nuestras
páginas con la estructura adecuada.
Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al
elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos
padre.
Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, que nos permite
comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari,
bajo los sistemas operativos de Windows o Mac OS.
2
Este servicio es fácilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su
página web.
Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya
que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco
importantes.
Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los
comandos y funciones propios de los distintos CMS soportados.
Unidad 1. Conceptos básicos de Dreamweaver CS5 (II)

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.
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.
3
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.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
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.
Unidad 1. Conceptos básicos de Dreamweaver CS5 (III)

1.5. Arrancar y cerrar Dreamweaver CS5
Veamos las dos formas básicas de arrancar Dreamweaver CS5.
4
 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ú. Puedes comenzar a
escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas
y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe
Dreamweaver CS5 y haz clic sobre él para arrancar el programa.
 Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .
Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los
ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas
Dreamweaver, como te explicamos aquí.
Unidad 1. Básico: Compaginar dos sesiones
Aquí te explicaremos cómo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con
Dreamweaver CS5.
1. Abre la sesión con el curso en tu navegador habitual.

2. Abre la sesión de Dreamweaver CS5.
3. Pulsar con el botón derecho sobre cualquier parte vacía de la barra de tareas, en la parte inferior de la
ventana de Windows (del escritorio). Es la barra en la que se encuentra el botón Inicio.
4. Elegir la opción Mosaico ventanas en paralelo.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
5. Una vez tenemos las dos sesiones con el tamaño adecuado, basta hacer clic con el ratón para pasar de la
una a la otra. Para volver a dejar las ventanas con su tamaño normal, hacer clic en el botón Maximizar .
Esto va bien con monitores habituales (de 17" o más pulgadas), sobre todo si son panorámicos. Con
monitores pequeños como los de las Netbooks, quizás prefieras dejar las ventanas con su tamaño normal e ir
pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla
tabulador) o pulsando el botón correspondiente a la sesión en la barra de tareas en la última línea de la
pantalla.
5
Para cerrar Dreamweaver CS5, 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 CS5.
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.
 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.
6
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.
 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
Unidad 1. Conceptos básicos de Dreamweaver CS5 (IV)

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 la página 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:
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:
7
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.
Unidad 1. Conceptos básicos de Dreamweaver CS5 (V)

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.
Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos
creando. Guárdala en la carpeta dónde vas a guardar la página que acabas de crear.
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.
8
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.
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 CS5 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.
9
Unidad 1. Conceptos básicos de Dreamweaver CS5 (VI)
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 <Nuevo 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:
 Observa que hemos centrado el texto pulsando en el botón .

 Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo 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, en Regla de destino selecciona <Nuevo estilo en línea> y 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.
10
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.
Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos
anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.
Unidad 2. El entorno de Dreamweaver CS5 (I)

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, 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 curso. La pantalla que se muestra a continuación (y en general todas las de este curso) 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.
Unidad 2. El entorno de Dreamweaver CS5 (II)

2.2. Las barras
La barra de la aplicación.
11
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. 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. Lo
veremos más adelante.
Los menús, están agrupados en categorías.

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 clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic
con el botón derecho, como Cerrar otros archivos.
Debajo de las pestañas encontramos los archivos a 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.
12

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. Esta barra puede ser
muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado ( Ctrl + G para
guardar, Ctrl + C para copiar, etc.)
La barra de herramientas de documento.
La 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.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si
estamos utilizando hojas distintas que dependan del eso. En esta nueva versión se han añadido más opciones,
como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un
elemento.
La barra de navegación con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro
sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.
13
Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.
Unidad 2. El entorno de Dreamweaver CS5 (III)

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.
El panel Insertar.
14
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 es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado
Unidad 2. El entorno de Dreamweaver CS5 (IV)

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.
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.
15
El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.
Unidad 2. El entorno de Dreamweaver CS5 (V)

La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el
código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio
se aplica directamente sobre la otra.
La Vista en vivo
La vista en Vivo es una mejora reciente de Dreamweaver. 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.
16
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 curso 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.
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.
17
Unidad 3. Configurar un sitio local (I)
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.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría

cargar la página http://www.aulaclic.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.aulaclic.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.
18
 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...
 En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista
de sitios locales definidos
 Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Unidad 3. Configurar un sitio local (II)

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.
19
 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.
 Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento
son las únicas que cambiaremos:
 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 del sitio 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.
-Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
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.
Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este ejercicio,
configuraremos un sitio que iremos completando más adelante.
Unidad 3. Configurar un sitio local (III)

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 archivo 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.
20
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.
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.
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.
21
Unidad 3. Configurar un sitio local (IV)
3.5. Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) 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 tu idioma.
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 donde 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.
22
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!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la
carpeta public_html y sube tus archivos allí.
Unidad 3. Configurar un sitio local (V)

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.
23
 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:
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:
24
 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.
Unidad 3. Configurar un sitio local (VI)

En la categoría Vínculos (CSS) encontramos las propiedades:
25
 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.
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.
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, pulsa aquí .
26
Unidad 3. Avanzado: 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 una Categoría. En este caso nos interesa
la de Barra de estado.
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.
27
Por ejemplo, esta página que estás viendo tiene un tamaño de descarga de 39K, y se presupone un tiempo de
descarga de 1 segundos (para una conexión ADSL), ya que en la barra de estado de la ventana de documento
aparecen estos datos entre el tamaño de la ventana de documento y el panel de propiedades, representados
por 70K/10 s.
Unidad 3. Configurar un sitio local (VII)

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: .
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.
28
Unidad 4. El texto: propiedades y formato (I)
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 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:
29
 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.
 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.
Unidad 4. El texto: propiedades y formato (II)

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 CS5 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.
 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
30
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. Pero en este caso, generan un estilo css
en línea.
 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.
 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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.
Unidad 4. El texto: propiedades y formato (III)

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
Ejemplo de lista con viñetas (sin ordenar):
o Perro
o Gato
o Aves
 Canario
31
 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.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
Unidad 4. El texto: propiedades y formato (IV)

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 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.
32
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:
33
Unidad 4. El texto: propiedades y formato (V)
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.
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 CS5, 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.
34
Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos, cuando el estilo
no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.
Unidad 4. El texto: propiedades y formato (VI)

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.
Podemos elegir entre cuatro tipos de selector:
35
 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.
 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 #.
 Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
 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.
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.
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 ella.
Unidad 4. El texto: propiedades y formato (VII)

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.
36
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.
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.
37
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.
Si quieres aprender más sobre el panel Estilos CSS, puedes hacerlo aquí .
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente
cada una. Más adelante detallaremos qué hacen las propiedades existentes. No obstante, sabiendo un poco de
inglés resultan muy intuitivas.
Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de una
etiqueta.
Unidad 4. El texto: propiedades y formato (VIII)

4.7. Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que directamente
afecta a todas las etiquetas de ese tipo.
38
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.
Todas las reglas disponibles aparecen al desplegar el submenú Formato → Estilos CSS.
Observa que existe una clase llamada ninguna. 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.
39

Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso a paso
Modificar el estilo de una lista.
Unidad 4. El texto: propiedades y formato (IX)

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.
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.
40

Vincular una hoja de estilos.
Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos vincularla.
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.
Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y vincular hojas de
estilo.
Unidad 5. Hiperenlaces (I)
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.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.
41
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.
Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del
sitio.
Unidad 5. Hiperenlaces (II)

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.
42
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 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.
Unidad 5. Hiperenlaces (III)

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, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo externo es de
referencia absoluta, por eso contiene http://
43
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.
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 este avanzado .
 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.
Unidad 5. Hiperenlaces (IV)

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 HTML a través de Destino, o en la ventana que aparece a
través del menú Insertar, opción Hipervínculo.
44
_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.
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.
Unidad 5. Hiperenlaces (V)

5.5. Formato del enlace
En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede
adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos
cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el
último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo).
Aquí tienes dos vínculos de ejemplo:
www.aulaclic.es www.elpais.es
Si has visitado alguno, 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.
 a:hover para los enlaces con el cursor encima.
45
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:
46
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.
Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.
Unidad 5. Hiperenlaces (VI)

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.
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.
47
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
como veremos a lo largo del curso. Otra opción sería mostrar nuestra dirección de correo, para que el
usuario pueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejor hacerlo
como una imagen, o escribiéndola de forma que la pueda entender un humano (por ejemplo
micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearán para el envío de correo
no deseado.
Para practicar puedes realizar el Ejercicio paso a paso Crear vínculo de correo electrónico.
En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vínculos rotos. Si no sabes lo
qué son o cómo solucionarlos, consúltalo aquí .
Unidad 6. Imágenes (I)

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. Esta información puedes consultarla aquí .
Unidad 6. Avanzado: 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.
48
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.
Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones.
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. También resulta especialmente indicado para imágenes con degradados de color.
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, sean del tamaño que sean.
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,
como veremos en el siguiente avanzado.
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
49
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.
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 aulaclic.jpg, se
encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/aulaclic.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.
50
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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.
Unidad 6. Imágenes (II)

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:
 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. Puedes ver su uso en este avanzado . Y con lo
aprendido, realizar el Ejercicio paso a paso Crear mapas 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. No obstante, los explicaremos para que entiendas su función:
51
 Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border.
 Puedes seleccionar su alineación con respecto al texto desde el campo Alinear. En CSS, existe el atributo
vertical-align.
 Por último las opciones Espacio V y Espacio H te serán ú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. En CSS, podemos hacerlo con el margin.
Además, encontramos algunos controles de Edición: El botón nos permite optimizar la imagen desde
Dreamweaver, cambiando el formato o creando transparencias como puedes ver aquí . Por otro lado, el
icono nos permite editar la imagen con un programa externo, como Photoshop o Paint. Puedes ver cómo
cambiar el programa de edición aquí .
Unidad 6. Avanzado: Cambiar formato y crear

transparencias (I)
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:
52
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
53
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.
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.
Unidad 6. Avanzado: 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.
54
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.
Unidad 6. Imágenes (III)

6.4. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.
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..
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y
modificamos su tamaño de varias formas diferentes:
55
Tamaño original
Con tamaño modificado
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.
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.
56
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).
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.
Unidad 6. Imágenes (IV)

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.
Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes
Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.
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.
57
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.
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.
Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.
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. Puedes ver un ejemplo de barra de navegación
utilizando CSS en este avanzado .
Unidad 6. Imágenes (V)

6.6. 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.
58
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.
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.
Unidad 7. Tablas (I)

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.
59
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.
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.
60
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.
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.
Unidad 7. Tablas (II)

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.
C
O

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

61
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.
Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla.
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.
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
62
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.
Unidad 7. Tablas (III)

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:
63
 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.
Unidad 7. Tablas (IV)

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.
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 (en Col. 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.
64
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..
Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la tabla.
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.
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,
aunque sí existe un método empleando etiquetas <col />, es más avanzado y no lo veremos en este curso.
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.
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.
65
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.
Para practicar puedes realizar el Ejercicio paso a paso Modificar el estilo de la tabla.
Unidad 7. Tablas (V)

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.
Para practicar puedes realizar el Ejercicio paso a paso Ajustar el tamaño de la tabla.
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.
66
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.
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.
67
También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
Unidad 7. Tablas (VI)

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.

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.
68
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 dé 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.
1 2
3 4
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.
Para practicar esto, puedes realizar el Ejercicio paso a paso Combinar celdas.
Unidad 7. Tablas (VII)

69
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.
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 curso 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. Un ejemplo de este diseño
sería la home de aulaClic.
 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 hacer que la página no se descuadre, sobre todo cuando es demasiado ancha
o estrecha. Un ejemplo de este diseño es la página de este curso.
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.
Pulsa aquí para ver 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.
70
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.
Pulsa aquí para ver 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.
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.
Unidad 8. Marcos (I)

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.
71
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 quienes.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.
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 del 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.
72
Unidad 8. Marcos (II)
8.2. Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
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.
Como puedes ver en la imagen, aparece una línea que divide el documento en
dos. El documento de partida era uno nuevo.
73
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.
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.
Unidad 8. Marcos (III)

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.
74
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.
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.
75
 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.
 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.
Unidad 8. Marcos (IV)

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.
76
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.
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.
Para practicar puedes realizar el Ejercicio paso a paso Crear y configurar marcos.
77
Unidad 9. Formularios (I)
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 curso.
A la derecha tienes un ejemplo de formulario simple.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y
botones.
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
78
 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. Puedes escribir en ellos para ver su
funcionamiento.
Área de texto
Campo de texto **********
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.
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.
UNIDAD 9. FORMULARIOS (II)
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.
 Deseo recibir información

 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 uno, automáticamente se desactivan los
demás. Esto obliga al usuario a sólo poder elegir una opción.
Superman
Spiderman
Seleccionar (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.
79
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 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.
Sin etiqueta. Hay que pulsar sobre la casilla.
Con etiqueta. Podemos pulsar en el texto.
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.
UNIDAD 9. FORMULARIOS (III)

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 el indicamos a dónde se envían
los datos. Normalmente, una página PHP que se encara de tratarlos.
80
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
eficiente y rápido 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.
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.
81
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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de formulario.
UNIDAD 10. MULTIMEDIA (I)

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 iníciales 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 SWF, 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.
Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos
seleccionado el archivo Flash:
82
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 cuál 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.
 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.
83
Unidad 10. Multimedia (II)
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. Siempre es mejor
que que el usuario abandone la página.
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.
 A continuación, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo
pulsando sobre los controles (recuerda encender los altavoces, si los tienes).
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 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 representados dentro de Dreamweaver por una imagen como la de la
izquierda.
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.
84
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"
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.
Otras páginas de Internet, como goear nos permiten insertar en nuestra web un reproductor con música del
sitio, que nuestros visitantes podrán escuchar.
UNIDAD 10. MULTIMEDIA (III)

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.
 Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:
85
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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.
UNIDAD 11. LAS PLANTILLAS (I)

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.
86
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta
llamada Templates. Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con
Dreamweaver.
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, que 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).
 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.
87
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 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.
UNIDAD 11. LAS PLANTILLAS (II)

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.
 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.
88
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 con el logotipo de aulaClic 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.
Unidad 11. Las plantillas (III)

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.
89
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.
90
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.
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.
UNIDAD 11. LAS PLANTILLAS (IV)

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.
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.
91
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.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear
una plantilla.
UNIDAD 12. HTML DESDE DREAMWEAVER (I)

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. En muchas ocasiones veremos que para hacer pequeñas correcciones, nos
resultará más cómodo y rápido si lo hacemos directamente desde el código que recurriendo a asistentes.
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.
92
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 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.
Unidad 12. HTML desde Dreamweaver (II)

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 < o <
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:
Entidad con Entidad Entidad con Entidad

Carácter Carácter
nombre numérica nombre numérica
á á á Á Á Á
é é é É É É
í í í Í Í Í
ó ó ó Ó Ó Ó
ú ú ú Ú Ú Ú
93
ü ü ü Ü Ü Ü
ñ &ntide; ñ Ñ Ñ Ñ
¿ ¿ ¿ α α α
¡ &iexc; ¡ β β β
– – – © © ©
→ → → ® ® ®
← ← ← € € €
< < < espacio
> > >
& & &
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 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.
Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado de Listado de
Entidades HTML .
Unidad 12. Avanzado: Listado de Entidades

HTML (I)
Caracteres Alfabéticos Propios y

Alfabeto Griego
Símbolos
Carácter Entidad con nombre Entidad numérica
• • •
… … …
94
′ ′ ′
″ ″ ″
‾ &oline; ‾
⁄ &frasl; ⁄
€ € €
℘ &weierp; ℘
ℑ &image; ℑ
ℜ &real; ℜ
™ ™ ™
ℵ &alefsym; ℵ
← ← ←
↑ ↑ ↑
→ → →
↓ ↓ ↓
↔ ↔ ↔
↵ &crarr; ↵
⇐ ⇐ ⇐
⇑ &uArr; ⇑
⇒ ⇒ ⇒
⇓ &dArr; ⇓
⇔ ⇔ ⇔
∀ ∀ ∀
∂ ∂ ∂
∃ ∃ ∃
95
∅ ∅ ∅
∇ ∇ ∇
∈ ∈ ∈
∉ ∉ ∉
∋ &ni; ∋
Otros Símbolos
∏ ∏ ∏
∑ ∑ ∑
− − −
∗ &lowast; ∗
√ √ √
∝ &prop; ∝
∞ ∞ ∞
∠ &ang; ∠
∧ &and; ∧
∨ &or; ∨
∩ ∩ ∩
∪ ∪ ∪
∫ ∫ ∫
∴ &there4; ∴
∼ &sim; ∼
≅ &cong; ≅
≈ ≈ ≈
96
≠ ≠ ≠
≡ &equiv; ≡
≤ ≤ ≤
≥ ≥ ≥
⊂ ⊂ ⊂
⊃ ⊃ ⊃
⊄ &nsub; ⊄
⊆ &sube; ⊆
⊇ &supe; ⊇
⊕ &oplus; ⊕
⊗ &otimes; ⊗
⊥ &perp; ⊥
⋅ ⋅ ⋅
⌈ &lceil; ⌈
⌉ &rceil; ⌉
⌊ &lfloor; ⌊
⌋ &rfloor; ⌋
⟨ &lang; 〈
⟩ &rang; 〉
◊ &loz; ◊
♠ &spades; ♠
♣ &clubs; ♣
♥ &hearts; ♥
97
♦ &diams; ♦
Caracteres Tipográficos
espacio
¡ ¡ ¡
¢ ¢ ¢
£ £ £
¤ ¤ ¤
¥ ¥ ¥
¦ ¦ ¦
§ § §
¨ ¨ ¨
© © ©
ª ª ª
« « «
¬ ¬ ¬

® ® ®
¯ ¯ ¯
° ° °
± ± ±
² ² ²
³ ³ ³
´ ´ ´
98
µ µ µ
¶ ¶ ¶
· · ·
¸ ¸ ¸
¹ ¹ ¹
º º º
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
¿ ¿ ¿
Unidad 12. HTML desde Dreamweaver (III)

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.
99
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.
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.
Unidad 12. HTML desde Dreamweaver (IV)

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.
100
Imaginemos que deseamos introducir en nuestra página un enlace a la página de aulaClic, que ha de abrirse
en una ventana nueva. En este caso deberíamos introducir la etiqueta <a href="http://www.aulaclic.es"
target="_blank">Visitar aulaClic</a>, con lo que obtendríamos el siguiente enlace:
Visitar aulaClic
Vamos a ver cómo funciona el mecanismo de completar etiquetas a través de este ejemplo.
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.
101
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.
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.
102
Unidad 12. HTML desde Dreamweaver (V)
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.
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.
103

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.
Unidad 12. HTML desde Dreamweaver (VI)

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.
Pero ten en cuenta que no todos los errores son visibles a simple vista, por ejemplo escribir mal el nombre
de un atributo.
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:
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:
104
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.
Unidad 12. HTML desde Dreamweaver (VII)

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.
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.
105
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.
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.
106
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.
Existen métodos de búsqueda mucho más precisos que los que hemos visto, si quieres conocerlos visita el
avanzado de Expresiones Regulares .
Unidad 12. Avanzado: Expresiones Regulares (I)

Las Expresiones Regulares son un conjunto de símbolos que unidos pueden definir un patrón para identificar
una cadena de caracteres.
Antes de comenzar a verlas deberíamos tener bien claro cómo actúa la búsqueda normal. Por ejemplo, si
buscamos la cadena aula, los resultados que encontrásemos podrían ser aulaclic, miaula, aula, etc...
Utilizaremos las Expresiones Regulares para decidir cuáles serán el resto de los caracteres. Para utilizar
estos símbolos especiales tendremos que marcar la casilla Utilizar expresión regular en el cuadro de diálogo
de Buscar y Remplazar:
107
Una vez tengamos la casilla marcada, todo lo que escribamos en el cuadro de búsqueda se tomará como una
expresión regular, así que empecemos a ver los símbolos que podemos utilizar:
Símbolo Significado ^
Utiliza este símbolo para buscar cadenas al principio de un documento.
Esta expresión regular no es muy útil, pues normalmente los documentos HTML empiezan con la
especificación de las cabeceras lo que, normalmente, no pertenece a nuestro objetivo de búsqueda.
Utilizando este símbolo podríamos encontrar documentos buscando por
^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Esto nos daría como resultados los documentos que empiecen por <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML, por lo que los documentos que empiecen por <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML no aparecerían.
En este ejemplo se están buscando archivos que sigan el formato XHTML, los documentos despreciados
serían aquellos que sigan HTML.
Utiliza este símbolo para buscar cadenas al final de un documento. $

Igual que la anterior, esta expresión regular no nos será de mucha ayuda cuando utilicemos la herramienta
Buscar y Reemplazar. Sólo podremos buscar documentos que terminen de determinada manera. Por
ejemplo, podemos buscar archivos que terminen con
</html>$
Esta búsqueda nos devolvería todos aquellos documentos que se han cerrado correctamente, los que
terminen, por ejemplo en </body> no se mostrarían.
Ahora ya entramos con expresiones regulares mucho más útiles. *

El asterisco te ayudará a buscar un carácter que aparezca una vez, varias o ninguna. Veamos un ejemplo, si
hacemos la búsqueda por ejemplo si buscamos.
a*u
Los resultados que podemos encontrar serían aula, aaula, aaaaula o incluso uno o cuello, porque el asterisco
implica que el carácter no tiene porque aparecer.
Casi ocurre lo mismo con esta expresión regular. +

El signo + buscará coincidencias de un carácter una vez o varías. En este caso se despreciarán aquellas en las
que no aparezca. Por ejemplo, si buscamos
a+u
Los resultados podrían ser aula, aaula o aaaula, pero no ni uno ni cuello porque este símbolo obliga a que el
carácter se encuentre al menos una vez.
Veamos ahora qué ocurre con el signo de interrogación. ?

Este símbolo es el contrario del anterior, sólo busca coincidencias una sola vez o ninguna, de modo que
buscando
au?la
108
Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic.
Es decir, este símbolo nos sirve para marcar caracteres opcionales.
. El punto es un símbolo muy útil. Podemos utilizarlo para sustituir cualquier carácter, por ejemplo, en la
búsqueda de
de.a
Podríamos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea (aunque sí deaa). En
definitiva, este símbolo sustituye a un carácter ni más ni menos. Llegados a este punto podrías realizar
búsquedas más complejas combinando varias expresiones que hemos visto, por ejemplo,
de.?a
Encontraría dela, desa, deia, dera, de9a e incluso dea pues al escribir ? a la derecha del punto hemos
indicado que ese carácter puede aparecer o no.
uno|otro
El símbolo | se utiliza para representar la conjunción lógica OR, es decir, uno u otro. Podemos buscar
99|ade
Y encontraríamos resultados tan variados como adecuado, cadena, 1099, 9900, etc...
Piensa que ahora podemos complicar mucho más las búsquedas combinando todos los símbolos vistos, con
esta búsqueda:
de.?a|de?a
Encontraríamos resultados como dela, desarmado, dea (que cumple ambas condiciones) o da (que cumple la
segunda).
Los símbolos de llave indican repetición. {n}

Nos ayudarán a establecer el número de veces que se repite el carácter al cual precede. Por ejemplo,
buscando
cas{2}a
Encontraría únicamente las palabras que contengan cassa (como cassa, micassa, ocassa7a, recassaa...). Sin
embargo, la búsqueda de
cas{2}
Podría encontrar cassa, casssa, micassssa, etc... Pues buscará una cadena que contenga ca seguida de 2 eses.
Este sería otro caso de símbolo de llave, pero en este caso introduciremos dos números. {n,m}
Estos números indicarán la repetición que puede tener el carácter al cual preceden. Por ejemplo, la
búsqueda:
m{2,4}
Encontraría coincidencias con cadenas que contuviesen al menos 2 m o hasta como máximo 4. Posibles
resultados serían mm, mmm o mmmm. La cadena ummmm sí que se encontraría, mientras que en
ummmmm sólo encontraría las 4 primeras emes.
109

En esta expresión regular podemos obviar la segunda parte para conseguir algo como esto:
m{2,}
El resultado ahora sería cualquier cadena que contenga al menos 2 m y sin máximo de repetición. Las
cadenas umm, ummmmmmm o ummmmmmmmmmm se encontrarían sin problemas.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Buscar
y reemplazar.
Unidad 13. Otros elementos (I)

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. A continuación tienes un ejemplo de marquesina.

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 ocurre
en el ejemplo anterior, cuyo código puedes ver a continuación:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>
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.
Unidad 13. Otros elementos (II)

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.
110
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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar fecha .
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.
111
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).
Unidad 13. Otros elementos (III)

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.
Por ejemplo, pulsa aquí para abrir una página en la que aparece un efecto en la barra de estado del
navegador, que muestra una marquesina, cuyo texto es CÓDIGO JAVASCRIPT - Curso Dreamweaver CS5
- aulaClic .
Si miras el código fuente de esa página podrás ver el código javascript que utiliza para conseguir ese efecto
en la barra de estado. El código es el siguiente:
112
<script language="JavaScript">

</script>
Dicho código tiene que ir entre las etiquetas <head> y </head>, y añadir onload ="
scrollBarraEstado() ;return true;" dentro de la etiqueta <body>, de modo que ésta queda del siguiente modo:
<body onload ="scrollBarraEstado(); return true;">
Este código no es demasiado complicado, y podrías casi sin problemas añadirlo a tus páginas, para que
mostrasen los mensajes que quisieras.
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. Lo importante
que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las líneas
<head> ... <script language="JavaScript">  </script> ... </head>
Unidad 14. Capas (I)

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.
Ésta es una capa con borde verde
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.
113
En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la
ventana del navegador, verás que pueden llegar a solaparse.
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.
Unidad 14. Capas (II)

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.
114
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.
Unidad 14. Capas (III)

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.
115
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 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.
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).
Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.
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.
116
UNIDAD 15. COMPORTAMIENTOS (I)
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. La imagen que aparece a continuación tiene asociado un comportamiento.
Sitúa el puntero sobre ella para ver qué es lo que ocurre.
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 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.
117
UNIDAD 15. COMPORTAMIENTOS (II)
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. 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.
 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 .
118
UNIDAD 15. COMPORTAMIENTOS (III)
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 la e elemento que producirá el evento (en ése ejemplo, la imagen del gatito) 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:
Hay que especificar qué elementos han de mostrarse u ocultarse para el evento. Para ello hay que pulsar dos
veces sobre la acción, en el panel Comportamientos.
 Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la página, en la que puede
indicarse la variación que se va a producir sobre la visibilidad
 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. Por ejemplo, en este caso a la capa gatomes no se le ha aplicado
ninguna visibilidad diferente, ya que no se desea que varíe al producirse el evento.
119
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 gatosemana 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).
UNIDAD 15. COMPORTAMIENTOS (IV)

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.
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. Puedes ver una descripción de cada evento
en este avanzado: Para practicar puedes realizar el Ejercicio paso a paso Crear comportamiento.
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (I)

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 como en el siguiente ejemplo. Haz clic aquí.
120
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 ves 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.
 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.
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (II)

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 (por ejemplo, esta) 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. Observa este ejemplo, si haces clic sobre él te llevará a la página
principal de aulaClic.
121
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. Por ejemplo: aulaClic.es
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).
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.
122
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (III)
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.
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 nos e cargará hasta
que no pasemos el 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.
123
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (IV)
16.4. ABRIR NUEVA 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.
 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.
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (V)

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.
124
Las siguientes capas cambiarán su color si hacemos clic sobre ellas:
 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.
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. Veremos
esto en la siguiente unidad.
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:
125
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á.
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.
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (VI)

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ú. Encima de este apartado tienes un ejemplo (no es
funcional pero puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendría este tipo de
menús.
 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:
126
 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.
 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.
UNIDAD 17. ESTILOS CSS AVANZADOS (I)

En temas anteriores vimos cómo funcionaba el panel Estilos 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 curso, 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).
<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>
127
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 estilo a una hojas 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;
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 el 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.
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.
Para practicar realiza el Ejercicio Paso a Paso de Creación de una Hoja de Estilo.
UNIDAD 17. ESTILOS CSS AVANZADOS (II)

17.2. Sintaxis CSS
128
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
 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>
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.
129
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.
 Los selectores compuestos los veremos en el siguiente avanzado:
Unidad 17. Estilos CSS Avanzados (III)

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.
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.
 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:
130
#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.
UNIDAD 17. ESTILOS CSS AVANZADOS (IV)

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.aulaclic.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.
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.
UNIDAD 17. ESTILOS CSS AVANZADOS (V)

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, que habíamos ido comentando alguna vez.
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 mostrará durante un tiempo determinado (una
sesión, etc...). Esta propiedad sólo tiene sentido en enlaces.
131
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 útiles en campos de formulario, para destacar el campo que
se está editando.
Prueba este enlace
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; }
Puedes ver un ejemplo de cómo actuarían estos pseudo-elementos en la siguiente línea. Agranda y estrecha
la ventana para ver qué ocurre:
Esto es una Prueba, la primera línea está en versales y la primera letra tiene un tamaño de 26px.
Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudo-elementos y
clases.
UNIDAD 17. ESTILOS CSS AVANZADOS (VI)

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.
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.
132
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.
UNIDAD 17. ESTILOS CSS AVANZADOS (VII)

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:
serif, sans-serif, fantasy, cursive, 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; }
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, oblique y normal.
italic, oblique, normal

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 el valor más recomendado. Para mostrar el texto normal, le damos el
valor normal.
133
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.
SMALL-CAPS, Normal
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.
bolder, bold, lighter

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 los 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).
xx-small, x-small, small, medium, large, x-large, xx-large

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).
É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;
}
p { font: italic small-caps bold large monospace; }
Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y family.
134
Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:
p { font: bold sans-serif; }
UNIDAD 17. ESTILOS CSS AVANZADOS (VIII)

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.
Este texto tiene una separación de 18 píxeles entre sus palabras.
Este, sin embargo, tiene una separación de -5 píxeles.
También podemos utilizar la propiedad letter-spacing para establecer la separación entre los caracteres
del texto:
Este texto tiene una separación de 5 píxeles entre sus

letras.
Este,sinembargo,tieneunaseparaciónde-2píxeles.
vertical-align establece la alineación vertical del texto. Puede tomar los valores baseline, sub, super, top,
text-top, middle, bottom, text-bottom.
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:
baseline sub super top text-top middle
bottom text-bottom
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.
Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres estas líneas es mayor que
la definida por defecto.

Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entres estas líneas es menor que
la definida por defecto.
Si estableces simplemente valores numéricos podrás indicar el alto respecto a su tamaño normal. Por
ejemplo:
p { line-height: 2; }
135
 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.
Este texto está alineado a la izquierda con left.

Este texto está alineado a la derecha con right.
Este texto está alineado al centro con center.
Este texto está justificado (justify), ambos márgenes del texto tocarán los bordes. Si es necesario estirar
las líneas se hará.
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.
Párrafo identado 24px. Primera línea

Segunda línea.

Segunda línea.

Segunda línea.
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:
 Este texto no tiene saltos de línea, así que se mostrará en toda su anchura aunque la ventana sea más
estrecha.
 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:
En este texto
podemos introducir tantos espacios como queramos. Da igual si
son más de uno, se mostrarán igualmente.
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.
136
UNIDAD 17. ESTILOS CSS AVANZADOS (IX)
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.
none, underline, overline, line-through, blink
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.
Este texto tiene el valor capitalize, las primeras letras serán en mayúsculas, el resto se
mostrará en minúsculas automáticamente
ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE ESTÉ ESCRITO EN

MINÚSCULAS SE CAMBIARÁ A MAYÚSCULAS
Este texto tiene el valor lowercase, aunque esté escrito en MAYÚSCULAS se cambiará a
minúsculas
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; }
Unos ejemplos serían los siguientes (aunque disponemos de más de 16 millones):
#3C
#060 #0F0 #039 #6CF #0CC
9
#900 #990 #F93 #969 #CF3 #CF9
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. Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C.
Para practicar realiza el Ejercicio Paso a Paso de Controles de Fuente.
137
UNIDAD 17. ESTILOS CSS AVANZADOS (X)
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.
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.
Aquí tienes un ejemplo de cada uno de los cursores. Sitúa el ratón sobre ellos para ver el efecto:
auto crosshair pointer move text wait help
n- e- se- sw- w- nw-

ne-resize
resize resize resize resize resize resize
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 emplear imágenes de cursor (extensión .cur).
UNIDAD 17. ESTILOS CSS AVANZADOS (XI)

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

1. decimal 1 i. lower-roman 1 I. upper-roman 1

2. decimal 2 ii. lower-roman 2 II. upper-roman 2
3. decimal 3 iii. lower-roman 3 III. upper-roman 3
a. lower-alpha 1 A. upper-alpha 1  none 1

b. lower-alpha 2 B. upper-alpha 2  none 2
c. lower-alpha 3 C. upper-alpha 3  none 3
Este estilo debe ir asociado a la etiqueta li, ul o ol.
138
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.
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:
 elemento 1
 elemento 2 con valor outside
 elemento 3
 elemento 4 con valor inside
 elemento 5
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);
}
ol { list-style: upper-alpha outside url(imagenes/bullet.gif); }
Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente
omítela. Para practicar realiza el Ejercicio Paso a Paso de Controles de Lista.
UNIDAD 17. ESTILOS CSS AVANZADOS (XII)

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:
139
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:
 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.
140
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 (como el fondo de esta página).
UNIDAD 17. ESTILOS CSS AVANZADOS (XIII)
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;
}
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. Para practicar realiza el Ejercicio Paso a Paso de Controles de Fondo.
UNIDAD 17. ESTILOS CSS AVANZADOS (XIV)

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.
141
Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra. En el ejemplo, la zona en verde, 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 (arroba la mayor, de 20px y
abajo de 5px).
 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;
}
142
 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 el caso de haber tres valores, corresponderían a arriba, izquierda-derecha y abajo respectivamente.
 En caso de que quieras que todos los márgenes 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.

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.
UNIDAD 17. ESTILOS CSS AVANZADOS (XV)
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 un color naranja:

 Lo entenderás mucho mejor con el siguiente ejemplo:
.bloque_interior { Texto
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
143
padding-left: 10px;
margin: 5px;
}
En el ejemplo anterior vemos el contenido de la caja en azul. Vemos que en vez de comenzar en el mismo
borde como antes, queda alejado, lo que vemos coloreado en naranja. 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 verde).
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:
.bloque_exterior {
padding: 10px;
}
.bloque_interior {Texto
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.
144
Una forma muy cómoda de ver qué márgenes afectan a un elemento es usando la vista Inspeccionar. Puedes
verla en este avanzado .
UNIDAD 17. ESTILOS CSS AVANZADOS (XVI)

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.
texto texto
En este caso hemos utilizado:
.borde1 {
border-width: 1px;
}
.borde2 {
border-width: 5px;
}
border-style muestra el borde del elemento de una forma determinada, existen varios tipos:
none dotted dashed solid
double groove ridge inset outset
border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.
.borde {
texto 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;
}
Podría escribirse más fácilmente:
.borde {
border: 10px groove black;
145
}
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; texto
border-style: solid dotted double groove;
}
Para practicar, realiza el Ejercicio Paso a Paso de Controles de Márgenes y Bordes.
UNIDAD 17. ESTILOS CSS AVANZADOS (XVII)

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:
Este texto tiene un elemento flotante a la izquierda.

Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.
Este texto tiene un elemento flotante a la derecha.
Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.
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:
146
<p style="float:left; font-size: 25px; border: 1px solid black; margin:3px;">©</p>
<p style="float:right; font-size: 25px; border: 1px solid black;
margin:3px;">©</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.
 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.

147
 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:
UNIDAD 17. ESTILOS CSS AVANZADOS (XVIII)

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).
2. Luego creamos otro bloque utilizando divs.
148
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 (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. No es la única forma de conseguir este
efecto. Podemos hacer las dos columnas flotantes, emplear Divs PA, etc...
149
UNIDAD 17. ESTILOS CSS AVANZADOS (XIX)
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.
300x50
#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
150
en los menús, normalmente formados con listas. Observa estos dos "botones" formados por un div y un
enlace:
 Notarás que el primero sólo funciona si pulsamos justo sobre el texto. En cambio en el segundo podemos
pulsar en cualquier parte del div.
 Esto lo hemos logrado 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%;
}
UNIDAD 17. ESTILOS CSS AVANZADOS (XX)
Del mismo modo, podrás hacer que una etiqueta de bloque (como p o
div) se convierta en un elemento en 1 2 3 4 línea utilizando display: inline; y
puedan ser mostradas una al lado de otra:
1 2 3 4 6 7 8
6 7 8 24 5 9 10 11
24 5 9 10 11 23 12
23 12 22 21 20 13
25
22 21 20 13 19 14
25
19 14 18 17 16 15
18 17 16 15

1 2 3 4
6 7 8
24 5 9 10 11
23 12
22 21 20 13
25
19 14
18 17 16 15
En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.
Simplemente les hemos dado el estilo:
151
.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.
1 2 3 4
1 2 3 4
6 7 8
6 7 8
24 5 9 10 11
24 5 9 10 11
23 12
23 12
22 21 20 13
22 21 20 13 25
25 19 14
19 14
18 17 16 15
18 17 16 15

1 2 3 4
6 7 8
24 5 9 10 11
23 12
22 21 20 13
25
19 14
18 17 16 15
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.
152
Observa el siguiente ejemplo:
p.lista {
display: list-item;
list-style-type: square;
}
Si aplicamos este estilo sobre unos párrafos veremos esto:
Esto es un párrafo que se muestra en forma de elemento de lista.
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. Para practicar realiza el Ejercicio Paso a Paso de Controles de Bloque.
UNIDAD 17. ESTILOS CSS AVANZADOS (XXI)

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.
 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).
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:
153
#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.
UNIDAD 17. ESTILOS CSS AVANZADOS (XXII)

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;
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:
154
#menu {
position: fixed;
top: 0px;
right: 0px;
}
Esta regla de estilo posicionaría un elemento con identidad menú 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.
UNIDAD 17. ESTILOS CSS AVANZADOS (XXIII)

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:
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;
}
155
Finalmente nos encontramos con otra propiedad llamada overflow, que ya habíamos comentado.
 Esta propiedad establece como ha de tratarse el contenido dentro de un elemento.

 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.
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. Para practicar
realiza el Ejercicio Paso a Paso de Controles de Posición y visibilidad.
UNIDAD 18. DISEÑO DE PÁGINA. MAQUETACIÓN WEB (I)

18.1. MAQUETAR UNA PÁGINA WEB
La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera.
Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un
pie de página.
Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas ( <table>). Una vez
entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en
algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía
complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la
página.
Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también
llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto
permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.
En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen
diversas formas de conseguir una misma maquetación.
156
Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div alrededor de
contenido ya existente desde Dreamweaver, seleccionamos la parte de la página y en el menú Insertar,
opción Objeto de diseño, elegimos Etiqueta Div.
También veremos que Dreamweaver nos ofrece una serie de plantillas de maquetación, de las que podremos
partir, adaptándolas a nuestras necesidades.
18.2. Tamaño
Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también
lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan
todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.
Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y
alto (height).
Los valores para estas medidas, pueden ser expresados en las medidas habituales:
 Tamaños absolutos, utilizando px, cm, etc...

 Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
 Tamaños relativos a la fuente, utilizando em.
 El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un
alto ajustado al contenido.
En algunos elementos, como los Divs PA, nos permiten cambiar su tamaño desde el Inspector de
propiedades. Pero en la mayoría, tendremos que hacerlo desde el código o desde las propiedades CSS de
Cuadro y Posicionamiento.
157
Por ejemplo, hemos definido el tamaño para el siguiente párrafo:
<p style="width:200px; height:100px; border: red 2px solid">
Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo
anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto.
Recuerda que las propiedades de margen se encuentran también con las propiedades de Cuadro.
<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">
Nota: En la vista de Diseño de Dreamweaver, esta propiedad no se muestra correctamente.
Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o
relativo, centrada en la ventana del navegador.
Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mínimo, estas
reglas CSS:
#container {
width: 960px;
margin: 0 auto;
}
Puedes ver un ejemplo de una página muy simple maquetada de esta forma aquí.
Unidad 18. Diseño de página. Maquetación web

(II)
18.3. Desbordamiento
Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del
contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del
elemento (texto, imágenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar
desde el estilo con la propiedad overflow. Podemos darle estos valores:
 visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los
elementos que haya a continuación.
 hidden. Lo que no quepa en el elemento, queda oculto.
 auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
 scroll. Siempre muestra las barras de desplazamiento.
Si el desbordamiento es visible, puede tapar a los elementos que haya después.
En el editor de propiedades CSS, encontramos el desbordamiento en la categoría Posición.

158
Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo directamente sobre el
Inspector de propiedades.

(III)
18.4. Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.
Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de bloque,
como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le
denomina estático.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos.
Existen cuatro tipos de posicionamiento:
 static. Es el normal.
 relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí,
podemos desplazar el elemento, permaneciendo el hueco de su posición original.
 absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al
elemento que lo contiene.
 fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda
fijo en la pantalla, aunque utilicemos barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que un
elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos
asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de otro con un z-index
menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index:
10;, lo que hace que se vean por encima del resto.
159
El z-index sólo afecta a los elementos con un posicionamiento distinto de static. Los elementos posicionados
siempre se verán por encima de otros elementos no posicionados, y entre ellos se verá encima el de mayor z-
index, o en su defecto, el que se haya generado en último lugar.
Truco: Para que un elemento sin posicionamiento se vea por encima de otro posicionado, podemos darle
posicionamiento relativo, lo que no afectará a su apariencia si no lo desplazamos, y un z-index mayor que el
del elemento posicionado.
En el editor CSS encontramos las estas propiedades agrupadas bajo posición.
18.5. Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo desplaza la
distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su posición normal.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.
Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para
hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un
elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;.
Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom
para hacerlo hacia abajo.
Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común
asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere
posicionamiento, como puede ser z-index.
160
(IV)
18.6. Posicionamiento absoluto
Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.
Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento
absoluto no deja un hueco en la página. Podemos decir que el resto de elementos lo ignoran, y se colocan
como si no existiese.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.
La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El
elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se
utilizará el body.
Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del elemento
posicionado y el borde superior del elemento contenedor. Por lo tanto left será la distancia entre los lados
izquierdos, right entre los lados derechos y bottom entre los lados inferiores.
Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top
o bottom) y un punto en horizontal (right o lef). En el siguiente elemento, todas las cajas tienen position:
absolute; witdth: 60px; height: 60px y un borde. Para cada una hemos cambiado la posición.
Además, a la caja que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen
su posición a partir de ella.
Como vimos en el tema relacionado con capas, Dreamweaver nos permite tratar los divs con
posicionamiento absoluto de forma especial, a través de los Divs PA.
Podemos insertar una capa con posicionamiento absoluto directamente a través del menú Insertar, opción
Objeto de diseño, Div PA.
161
Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se muestra así si están
seleccionados:
Esto nos permite establecer su tamaño y posición simplemente arrastrándolos o estirando de sus bordes,
directamente sobre la vista de diseño. Además, todas estas propiedades aparecerán en el inspector de
propiedades.

(V)
Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo,
podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la
suma de sus anchos sea el total de la página. Por ejemplo:
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
162
top: 0;
height: 100%;
width: 50%;
}
Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las
contenga).
Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra
forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo
que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y
con el lado derecho de 0, en vez de indicar el ancho.
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}
Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el
ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.
No obstante, como veremos, para obtener una columna fija, y la otra líquida, es mejor hacerlas flotantes.
Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos
dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la que damos la
propiedad overflow: auto;. Esto hará que nos podamos desplazar por el contenido de la página
manteniendo el menú siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de
desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}.
Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos
dentro de ella, utilizando el mismo sistema.
Puedes ver un ejemplo de página maquetada con posicionamiento absoluto aquí.
Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que
hemos visto, colocábamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un
encabezado, en vez de comenzar arriba del todo, debemos de dejar una separación igual al alto del
encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deberá de ser del
100% - el alto del encabezado. En vez de eso, resulta más claro si en vez del alto de las columnas, indicamos
la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como
mejor lo veremos será con un ejemplo:
163
div#encabezado {
position: absolute;
top:0; left: 0;
height:10%;
width:100%;
background-color:RoyalBlue;
}
position: absolute;
top:10%; left: 0;
height: 90%;
width:20%;
background-color:SandyBrown;
}
position: absolute;
top:10%; right: 0;
bottom: 0;
width: 80%;
background-color:LightGreen;
}
Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del
elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para
cualquier cosa.

(VI)
18.7. Posicionamiento flotante
164
El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad position, si no
con la propiedad float. Puede tomar estos valores:
 left : flotante a la izquierda (float: left;).

 right : flotante a la derecha (float: right;).
 none : sin flotante.
En Dreamweaver, encontramos esta propiedad junto a las propiedades de Cuadro:
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la dirección indicada,
hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos
los elementos fluyan alrededor de él.
Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo,
todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>). Sólo cambia el
float de la imagen.
Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no

aparecen varias líneas de texto junto a la imagen.
Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que
aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo,
rebasando la imagen. Así, la imagen se integra mejor en el documento.
Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite
que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que
continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el
documento.
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no
hay más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.
Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro
flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y
vemos que si la imagen es flotante, "se sale".
165
Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar tres
valores:
 left: impide el flotamiento a la izquierda.

 right: impide el flotamiento a la derecha.
 both: impide el flotamiento por ambos lados.
En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo párrafo le hemos
dado la propiedad de estilo clear: right;.
Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En el
siguiente ejemplo, hemos utilizado capas, todas con float:left; y un pequeño margen para que no se
peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:
166
De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento.
Basta con que la suma del ancho de las capas que harán de columnas quepa en el ancho de elemento
contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del
100%, para algunos tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque
esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco
menor, por ejemplo del 99% o 99.5%.
De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:
float: left;
width: 30%;
height: 100%;
}
float: left;
width: 69.5%;
height: 100%;
}
Para añadir una cabecera al principio, no hay más que poner una capa antes de las columnas, con todo el
ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después de las columnas, y rompiendo el
flotamiento con clear:both;.
167
div#cabecera {
width: 99.5%;
height: 10%;
background-color:RoyalBlue;
}
float: left;
width: 30%;
height: 80%;
}
float: left;
width: 69.5%;
height: 80%;
}
div#pie {
clear: both;
width: 99.5%;
height: 10%;
background-color:Violet;
}
La principal diferencia con el posicionamiento absoluto es que al flotante sí le afectan los márgenes, propios
y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos
establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustaría al contenido del
elemento.
La maquetación más común es la que se realiza con elementos flotantes.

(VII)
168
18.8. Posicionamiento fijo
El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las
propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se
refiere siempre a la ventana del navegador, independientemente de que el elemento posicionado esté dentro
de otro elemento con posicionamiento, como pasaba con el absoluto. Además, el elemento siempre se
muestra en la misma posición, aunque la página sea larga y nos desplacemos hacia abajo o hacia un lado.
Por ejemplo, usando el posicionamiento, podemos tener el menú de la página siempre visible a un lado, útil
en páginas con texto muy largas.
En el este ejemplo, puedes ver una página maquetada con posicionamiento fijo. En ella. verás un
encabezado y dos columnas que siempre aparecen visibles.
Una de las propiedades de este posicionamiento es que si imprimimos la página web y ocupa varias páginas
en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede resultar útil para pies y
encabezados.
Nota: Internet Explorer 6 no soportaba este posicionamiento.
18.9. Ancho de la página, líquido o elástico

Al crear el diseño de una web, básicamente existen dos tendencias: que la página ocupe todo el ancho de la
ventana del navegador (diseño líquido), o que ocupe sólo una columna con un ancho fijo (diseño fijo).
No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:
Diseño fijo.
En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxel. Esto facilita el diseño,
sobre todo si está compuesto por imágenes divididas en trozos que deben casar perfectamente, ya que
podemos posicionar todo de forma exacta. También nos permite controlar el ancho de los elementos de
texto, no creando columnas ni demasiado largas ni demasiado pequeñas.
Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un usuario la
ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de la página no
quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho, la mayor
parte del espacio estará desaprovechado.
Como ejemplo de diseño fijo, tenemos la página de inicio de aulaClic.
Diseño líquido.
En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño de la ventana. Esto hace
que la página sea más flexible a los distintos dispositivos de visualización.
Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque hay que
pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque todo al cambiar de
tamaño. También puede producir líneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario
siempre tiene la opción de hacer más pequeña su ventana.
Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo max-width
(ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-height (alto mínimo).
169
Un ejemplo de diseño líquido puede ser la página de este curso.
Diseño elástico.
Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los objetos,
no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en em), dando al
usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los elementos. Aunque permite
que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difícil controlar las imágenes.
Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más elaborado.
Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica, que se adapta a la
pantalla, y columnas con un ancho fijo, para menús o para la publicidad.

(VIII)
18.10. Maquetación prediseñada en Dreamweaver
Como habrás observado, al crear un nuevo documento de Dreaweaver podemos partir de una maquetación
prediseñada.
170
Podemos dividir estos diseños en dos grandes grupos, diseños de maquetación fija o de maquetación líquida
(las que pone como flotantes).
En la previsualización de la derecha, los diseños fijos, de tamaño en píxeles se representan con un candado.
En cambio, los diseños líquidos aparecen con un muelle.
Básicamente, para cada grupo de diseño, podemos elegir si queremos una única columna principal central,
columnas a los lados, pie o encabezado.
Hay que tener en cuenta que esto generará gran cantidad de estilos CSS. Por defecto se añadirá al head de la
página, pero en el desplegable Diseño CSS en podemos elegir si colocarlo en una hoja nueva, o en una
existente.
Al elegir un diseño u otro, llegaremos se mostrará de forma parecida a este, en tonos verdes-marrones si el
diseño es fijo, o azulado si es elástico.
171
Partiendo de esta página, podemos modificarla como nuestros contenidos y estilo.
Si accedes su código fuente, verás que tiene incluidos una gran cantidad de comentarios. En ellos se explica
por qué se ha puesto tal propiedad, o cosas que podemos cambiar. Una vez acabada nuestra página,
deberíamos borrar estos comentarios.
En los videotutoriales que encontrarás en el siguiente apartado, podrás ver cómo empleamos una de estas
plantillas para maquetar nuestro sitio web.
18.11. Videotutoriales. Creando un sitio web completo

Con lo que hemos visto hasta ahora en el curso, ya podemos crear un sitio web completo.
Puedes ver un cómo creamos este sitio web en los siguientes videotutoriales:
Parte 1: Definiremos un nuevo sitio web, y comenzaremos creando la maquetación general del sitio,
personalizando una de las plantillas prediseñadas de Dreamweaver.
Parte 2: Modificaremos cada elemento hasta conseguir la maqutación que nos interesa para el sitio.
Parte 3: Una vez completada la maquetación, la convertiremos en una plantilla en la que basaremos
todas nuestras futuras páginas. En una de las páginas, usaremos comportamientos de javascript para alterar
algunos elementos, como las imágenes.
Parte 4: Para acabar, crearemos las últimas páginas, mostrando tablas con información, un formulario
de contacto, y una presentación de imágenes embebida.
Unidad 19. Sitios remotos (I)

En el tema 3 vimos cómo crear y trabajar con un sitio local.
Esta unidad está dedicada a los Sitios Remotos, veremos cómo crearlos y cómo utilizarlos.
172
Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de
comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez
con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados
en el servidor, en Internet.
El modo en el que veremos que el programa se comunica con tu servidor será FTP, ya que es prácticamente
el más utilizado y muy pocos utilizan otras alternativas.
Lógicamente, antes de realizar estos pasos, deberemos de haber contratado un sitio, o habernos registrado en
uno gratuito.
19.1. Configurar un Sitio Remoto
Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver
se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificación que creamos en su día del sitio con el que estamos
trabajando.
Así que haz clic en el menú Sitio y selecciona Administrar sitios.
Selecciona el sitio con el que quieras establecer comunicación remota (o crea uno nuevo para el caso) y
pulsa Editar.
Verás que se abre el cuadro de diálogo de Definición del Sitio.
173
La categoría que buscamos es Servidores, en el listado de la izquierda.
Para configurar un nuevo servidor, pulsa el icono +.
Ahora en el desplegable Conectar usando selecciona el método de acceso que deberá utilizar Dreamweaver
para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.
Se mostrarán las siguientes opciones:
El Nombre de servidor es el nombre que le podemos asignar para identificarlo.
Aquí deberás rellenar los datos que te facilitó el servicio de hosting que contrataste. Si no recuerdas los
datos o has perdido el correo electrónico que seguramente te enviaron, pídeles de nuevo la información.
174
Los datos que necesitas son los siguientes:
Dirección FTP o host es la dirección a la que se dirigirá Dreamweaver para conectarse a tu servidor será
del tipo ftp.servidor.com o también podrás encontrar algunas que están formadas en forma de dirección IP
(como por ejemplo, 192.186.1.1)
En Nombre de usuario y Contraseña escribe el nombre de usuario y el password para poder conectar con
el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contraseña.
Una vez introducidos estos datos puedes pulsar el botón Prueba para ver si son correctos y Dreamweaver
puede crear una conexión con el servidor remoto.
En el campo Directorio raíz podremos establecer una carpeta contenida en el servidor donde queramos
subir las páginas. Por ejemplo, es común que por FTP podamos acceder a muchas carpetas del servidor, pero
hay una en concreto en la que hemos de ubicar las páginas. Imagina que dentro de la estructura de carpetas
del servidor remoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podríamos
indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicación.
En el campo URL Web podemos introducir la dirección web de la raíz del sitio, y así probar nuestras
páginas dinámicas.
Una vez hayas terminado Guarda todas las pantallas hasta volver a la vista de trabajo y estaremos listos.
Unidad 19. Sitios remotos (II)

19.2. El panel Archivos
Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de forma fácil y rápida.
En este apartado veremos qué pasos debemos seguir para completar unas cuantas acciones que nos serán
bastante útiles.
A primera vista el panel Archivos muestra este aspecto:
175
Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.
El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te permite cambiar la
vista de ese sitio.
Esta última opción es muy útil para ver el contenido que se encuentra subido en Internet. Una vez hayas
configurado las opciones del Servidor Remoto podrás desplegar esta opción y seleccionar Vista remota, se
mostrarán todos los archivos que en ese momento se encuentran en el servidor.
Ahora veremos para qué sirven los botones:
El botón Conectar te permitirá establecer una conexión con el servidor. De forma predeterminada
Dreamweaver se desconecta del servidor cada 30 minutos.
El botón Actualizar actualiza las listas de las vistas local y remota. Así podrás ver el contenido exacto
en cada momento de cada uno de los sitios, se utiliza sobre todo cuando varias personas tienen acceso al
sitio remoto para cambiar las páginas.
Utiliza el botón Obtener para descargar al servidor local archivos que hayas seleccionado en el panel
Archivos en la vista remota. Estos archivos se copiarán en tu sitio local, y en caso de ya existir se
sobreescribirán.
El botón Colocar actúa de forma contraria. Sube los archivos seleccionados en la vista local al
servidor, se copiarán y si existen se sobreescribirán.
Luego los dos siguientes botones podrán ser utilizados si has activado la Protección del sitio en el cuadro de
diálogo de opciones Avanzadas al configurar el sitio remoto.
176
Utiliza el botón Proteger para realizar la acción anterior de Obtener pero protegiendo el archivo que se
encuentra en el servidor convirtiéndolo en sólo lectura. De esta forma si alguien con acceso al servidor
intenta modificar el archivo le será imposible hasta que lo desprotejas.
Del mismo modo, el botón Desproteger actúa del mismo modo que el botón Colocar pero cuando sube
el archivo al servidor lo desprotege para que pueda ser modificado por otras personas.
Unidad 19. Sitios remotos (III)

19.3. Sincronizar Sitios
Ésta es una de las opciones más útiles en cuanto a Sitios Remotos.
Esta opción permite hacer un estudio de los archivos situados en el sitio local y remoto y establecer el modo
en el que se deberán copiar, borrar y sobreescribir los archivos para conseguir un objetivo: al final de la
sincronización, los archivos en el sitio remoto y el sitio local deben ser iguales.
Para realizar una sincronización haz clic derecho sobre cualquier zona en el panel Archivos y selecciona la
opción Sincronizar....
177
Verás que aparece un cuadro de diálogo como éste:
Éste es el paso más importante en la sincronización, pues decidiremos de qué modo se va a realizar.
En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales seleccionados
solamente o Todo el sitio. Dependiendo de qué opción elijas se copiarán sólo unos archivos o todos los que
forman el sitio.
En el desplegable Dirección: estableceremos las pautas que se deben seguir durante la sincronización.
Si seleccionas Colocar archivos más nuevos en remoto cuando se comparen ambos sitios, se sobreescribirán
aquellos en el sitio remoto que tengan una fecha de modificación menor a la que exista en el local. De esta
forma copiarás en dirección Local a Remoto.
Si seleccionas la opción Obtener archivos más nuevos de remoto se copiarán aquellos archivos que se
encuentren en el sitio remoto que tengan una fecha de modificación mayor que la del local. En este caso
estaremos copiando en dirección Remoto a Local.
La última opción, Obtener y colocar archivos más nuevos, se refiere a la sincronización como tal. Evalúa los
archivos en el sitio remoto y local y copia los más nuevos en el que contiene los más viejos. En este caso la
Sincronización es Bidireccional.
Marca la opción Eliminar archivos remotos no existentes en la unidad local si quieres que los archivos que
se encuentren en el remoto que no estén en el local se borren.
Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, sólo nos quedará aceptarlo.
178

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqué tener acceso a un servidor
remoto no realizaremos ningún ejercicio sobre este tema. Si quieres establecer una conexión con tu servidor
remoto sólo tendrás que seguir los pasos explicados en la teoría.
Prueba evaluativa de la Unidad 19
Unidad 20. Servidor de Pruebas (I)

20.1. Introducción a PHP
Hasta ahora hemos aprendido cómo mostrar contenido estático en nuestras páginas web.
Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas ocasiones nos es
necesario darle un poco más de dinamismo al contenido del sitio.
Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse automáticamente, o
incluso que se repartan en varias páginas.
Es posible que también necesites que el contenido se actualice periódicamente y tengas demasiadas páginas
como para ir modificándolas una a una.
O incluso te gustaría crear una página individual para cada elemento que aparezca un listado y resulta muy
laborioso crear una página individual para cada uno de ellos.
Muy bien. Sin dejar de lado HTML, comenzaremos a crear páginas más versátiles utilizando PHP.
179
PHP es un lenguaje de programación. Pero no te preocupes, Dreamweaver contiene las suficientes
herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código.
Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilízalo para crear prácticamente lo que te
venga a la cabeza. Aunque eso se encuentra fuera de este curso.
Nosotros veremos lo que es posible hacer utilizando las herramientas de que dispone Dreamweaver.
Como decíamos PHP es un lenguaje de programación, así que deberemos aprender antes cómo funciona.
Hasta ahora nosotros creábamos páginas con extensión HTML, este tipo de archivos, cuando son requeridos
por un navegador se descargan automáticamente del servidor y se visualizan tal y como son en el cliente (el
ordenador del usuario que está viendo la página).
PHP actúa de forma diferente.
Un archivo con extensión PHP, cuando es requerido por el cliente se ejecuta en el servidor y genera una
página web con código HTML, y es este código HTML el que se envía y se visualiza en el navegador del
usuario.
De esta forma, el contenido del archivo PHP es completamente transparente al usuario (además de serle
imposible ver el contenido del archivo) y sólo podrá ver el resultado de la petición que ha creado (es decir,
lo que genera el archivo PHP según convenga en cada momento).
Verás que esto es más fácil de entender cuando vayamos avanzando en la unidad.
Una de las utilidades de las páginas PHP es que PHP es capaz de buscar en una base de datos mientras se
está ejecutando en el servidor y mostrar los datos obtenidos en código HTML para que el navegador del
cliente los pueda visualizar:
180
Como puedes ver PHP puede ser muy útil a la hora de recuperar datos almacenados lo que te será muy útil si
decides guardar en forma de tablas información relativa a tus productos, elementos sobre los que estés
trabajando, entradas de blog, etc...
Si no sabes muy bien qué es una base de datos visita este tema básico sobre Bases de datos.
Unidad 20. Servidor de Pruebas (II)

20.2. Estructura PHP
Si abres un archivo PHP verás que tiene cierto parecido a un archivo HTML.
Esto es debido a que el código PHP se incrusta dentro del código HTML. Únicamente será necesario
introducir un par de marcas para establecer el principio del código y el final.
Veamos un ejemplo:
<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin título</title>
</head>
<body>
<?php
echo "<p>¡Hola mundo!</p>";
?>
</body>
</html>
Este código podría pegarse en un archivo PHP, guardarse en un servidor que soporte PHP y ejecutarse.
El resultado que nos mostraría sería una página web con un párrafo en el que se podría leer ¡Hola mundo! (la
instrucción echo escribe texto en pantalla).
Sin embargo, aunque se trate de un archivo PHP puedes ver que se parece muchísimo a un HTML. Sólo que
en el momento de agregar código de programación hemos añadido dos etiquetas (una de apertura y otra de
cierre ) para indicar que lo que se encuentra entre ellas es código PHP y debe ser ejecutado.
181
Estas etiquetas son <?php y ?>, aunque también es posible encontrar su forma abreviada <? y otra de cierre ?
> por lo que el código anterior se podría sustituir por:
<?
echo "<p>¡Hola mundo!</p>";
?>
Lo recomendable es escribirla de forma completa, para evitar posibles problemas con la configuración del
servidor. No vamos a entrar en más detalle, pues Dreamweaver se encargará de generar todo esto
automáticamente.
Pero te será bastante útil cuando empecemos a programar páginas para poder localizar con un vistazo el
código que se haya creado.
Unidad 20. Servidor de Pruebas (III)

20.3. Instalar un servidor local con WampServer
No podemos ejecutar una página PHP en nuestro equipo y verla como lo hacíamos como un página HTML,
ya que nuestro navegador no puede ejecutar su código, así que mostrará todo. Requerimos verla a través de
un servidor que sea capaz de ejecutar este código, y de consultar una base de datos si es necesario.
Para poder continuar con el curso, necesitamos instalar un servidor local o servidor de pruebas en nuestro
equipo que sea capaz de realizar todo lo anterior. Vamos a emplear WampServer (antes conocido como
WAMP). Es un servidor gratuito, sencillo de instalar y de usar.
Para ello necesitarás descargar WampServer 2.0 (aprox. 15 MB), un paquete auto-instalable que te ofrece la
posibilidad de utilizar Apache (para correr PHP) y utilizar MySQL (bases de datos).
Trabajaremos con la versión 2.0i, la última en el momento de creación del curso (2010). Puede que
descargues una versión posterior, pero no debería haber demasiadas diferencias.
Nota: WampServer puede ejecutar PHP. Existen otros lenguajes para páginas dinámicas, como ASP o Java,
que requieren de otro tipo de servidores, y que no veremos en este curso.
En este curso seguiremos los pasos que hacen falta para instalar este paquete, pero existen muchísimos de
ellos.
Vamos a ver paso por paso lo que deberás hacer.
Una vez tengas el archivo ejecutable en tu ordenador (en nuestro caso se llama WampServer2.0i.exe, haz
doble clic sobre él para empezar la instalación.
Se mostrará la siguiente pantalla:
182
Aquí nos dan la bienvenida así que simplemente haz clic en Next > para continuar.
Esta es la pantalla de acuerdo de licencia. Deberás aceptarlo haciendo clic en la opción I accept the
agreement y pulsar el botón Next >.
Unidad 20. Servidor de Pruebas (IV)

183
Continuamos con la instalación.
En esta ventana nos preguntan dónde queremos que se guarde el programa.
La opción por defecto es en la raíz del sistema (c:). Si empleas Windows XP, puedes instalarlo con el resto
de programas, en C:\Archivos de programa, y así lo tendrás todo más ordenado. En cambio, si empleas
Windows Vista o Windows 7, no te recomendamos esta opción, porque se pueden producir problemas con
los permisos de seguridad que Vista aplica a esa carpeta. Si tienes otra partición de disco, para datos u otros
programas, puedes instalarlo ahí.
En cualquier caso puedes navegar por las carpetas pulsando en Browse....
Si no sabes muy bien qué hacer, deja la opción por defecto.
Una vez elegida la ubicación, pulsamos Next >.
184
En la siguiente pantalla marcamos si queremos crear un acceso directo en el Escritorio (Create a Desktop
icon) o en el menú de inicio rápido (Create a q Quick Launch icon) junto la botón de inicio. Si no marcas
ninguna opción, tendrás que ejecutar el programa desde el menú de Inicio → Todos los programas.
Una vez elegidas nuestras opciones, pulsamos Next >.
Unidad 20. Servidor de Pruebas (V)

Ya casi hemos terminado. En la siguiente pantalla podemos revisar los datos elegidos
185
Hacemos clic en Install para comenzar con la instalación, que tardará unos segundos.
Una vez instalado, tendremos que configurar algunas opciones. La primera es el navegador predeterminado.
Detectará el que tenemos como predeterminado y sólo tendremos que pulsar en Sí. Si queremos cambiarlo,
pulsamos en No y elegimos otro.
En la siguiente ventana, deberíamos de introducir la configuración para poder enviar emails con PHP.
186
Como no la conocemos, no tenemos instalado un servidor de correo, dejamos las opciones de ejemplo y
pulsamos Next >.
Hemos terminado de instalar el programa, se mostrará la siguiente ventana:
Marca la casilla si quieres que se ejecute (Launch) cuando cerremos el instalador.
Haz clic en Finish para finalizar.
187
Unidad 20. Servidor de Pruebas (VI)
20.4. Configuración inicial
Vamos a arrancar la aplicación. Para ejecutar el programa sólo tenemos que ir a Inicio → Todos los
programas → WampServer y finalmente en start WampServer, o utilizar su acceso directo, si lo creaste
durante la instalación.
El programa no abre ventanas. La única referencia que tenemos de él es su icono en el área de

notificación (junto al reloj).
Cambiar el idioma.
WampServer está disponible en una gran cantidad de idiomas. Para seleccionar uno, basta con hacer clic
derecho sobre el icono, y seleccionarlo desde la opción Language, del menú contextual.
Las capturas que mostraremos a partir de ahora, serán en español. Ten en cuenta que si usas otra versión,
algunos nombres de comandos pueden variar según la versión de la traducción.
Localhost
¿Qué es el localhost? ¿Para qué sirve?
Hemos estado hablando de crear un servidor. Un servidor remoto (el que se encuentra en Internet y requiere
de una conexión FTP para subir archivos) tiene una dirección asociada.
Puede ser una dirección formada por un nombre de dominio, como www.aulaclic.es, o por una dirección IP
(conjunto de 4 números del 0 al 255 separados por puntos, como 213.188.129.143). Realmente, el nombre
en texto siempre está asociado a una IP, pero se utiliza para ser más fácil de recordar.
Este es el modo en el que accedemos a un servidor remoto, dando su nombre ya sea por dominio o por IP.
Pues bien, localhost se corresponde con el nombre de dominio del servidor local.
Verás que una vez instalado WAMP podremos acceder a nuestro servidor local escribiendo en la barra de
direcciones del navegador http://localhost/. Se mostrará una pantalla parecida a ésta, con información sobre
la versión:
188
También podríamos hacerlo escribiendo http://127.0.0.1/ que es la dirección IP de nuestro propio ordenador.
Lo que estamos haciendo es acceder a la carpeta que tiene WampServer por defecto establecida como
localhost. Esta carpeta se encuentra dentro de la carpeta de instalación, en una subcarpeta llamada www. Los
documentos que tengamos ahí serán accesibles por el servidor.
Para poder acceder a los documentos que hemos ido creando, tenemos varias opciones:
 Podríamos copiar nuestros archivos allí. Por ejemplo, si copiamos dentro de www la carpeta del sitio
animales, podríamos acceder al sitio escribiendo http://localhost/animales en la barra de direcciones del
navegador. Esta no es la mejor solución, sobre todo si hemos instalado WampServer en Archivos de
programa.
 Podemos cambiar la ubicación de localhost a la carpeta que queramos. Para ello deberíamos de editar el
archivo httpd.conf (clic sobre el icono Apache → httpd.conf). Se abrirá un archivo de texto. En él buscamos
las dos apariciones del DocumentRoot (basta con buscar www), que mostrará la ruta actual (por ejemplo
"c:/wamp/www" o "c:/program files/wamp/www") y cambiarla por la que queramos. Además, debemos de
copiar el contenido de www a la nueva carpeta. Para que funcione, tenemos que reiniciar el servidor.
 Otra opción es crear un alias. De forma que al escribir http://localhost/miswebs accedamos a los
documentos de una carpeta que no esté realmente dentro de www. Vamos a realizar esto último por ser lo
más cómodo, creando un alias llamado sitios.
Para crear una alias, sique el ejercicio paso a paso Crear un alias en WampServer.
Unidad 20. Crear un alias en WampServer

Objetivo
Crear un alias para acceder fácilmente a la carpeta donde tenemos nuestros sitios.
Ejercicio
Vamos a crear un alias a la carpeta mis_sitios, donde tenemos las carpetas de los distintos sitios creados
durante el curso. Si has empleado otra carpeta, tenlo en cuenta.
189
Antes de realizar el ejercicio, debes de haber descargado e instalado WampServer. Para ello, sigue los pasos
explicados en la teoría.
1. Lo primero es saber la ruta completa de nuestra carpeta. Para ello, abrimos la carpeta y hacemos clic en la
barra de direcciones. Se mostrará la ruta completa, algo parecido a esto:
Lógicamente la ruta cambiará para cada usuario, según donde hayas ubicado la carpeta. Ten la dirección
visible, ya que tendrás que escribirla.
2. Haz clic sobre el icono de WampServer del área de notificación, y en el menú emergente de la aplicación
elige Apache → Directorios Alias → + Agregar un alias.
3. Se abrirá una ventana de consola. Lo primero que tenemos que hacer es indicar el nombre el alias. Lo
vamos a llamar sitios.
Escribe sitios y pulsa Intro. Si optas por otro nombre ten en cuenta que a lo largo del curso, nos referiremos
a él.
4. Ahora, deberemos de indicar la ruta a la carpeta que contiene los archivos.
190
Escribimos la ruta que muestra la barra de direcciones de Windows pero cambiando las contrabarras (\) por
barras (/), y añadiendo una barra al final (como en la última línea de la imagen). Cuando lo tengamos
pulsamos Intro.
Si todo ha ido bien, se mostrará un mensaje indicando que se ha creado el alias. Si por ejemplo, hemos
escrito mal la dirección, tendremos que volver a empezar.
Si ahora vas a la dirección http://localhost/sitios/animales deberías de acceder al sitio animales creado en los
ejercicios del curso (a no ser que hayas llamado a la carpeta del sitio de otra forma).
En cualquier momento podemos editar o eliminar nuestro alias.
Independientemente de la opción que elijamos, tenemos que tener claro que sólo podremos acceder a los
archivos que estén dentro de la carpeta definida como Carpeta del servidor o a la identificada con un alias.
Unidad 20. Servidor de Pruebas (VII)

20.5. Trabajar con un servidor local WampServer
Para ejecutar el programa sólo tenemos que ir a Inicio → Todos los programas → WampServer y finalmente
en start WampServer, o utilizar su acceso directo, si lo creaste durante la instalación.
En el área de notificación aparecerá un nuevo icono: . (Puede que el diseño de estos iconos varíen un
poco según la versión que hayas instalado).
191
Como ya hemos dicho, WAMP se encarga de ejecutar principalmente dos servicios: Apache (para correr
PHP) y MySQL (para trabajar con bases de datos).
El icono de la barra de tareas tiene varios estados que dependen de cómo se encuentren estos servicios:
 Este icono indica que ambos servicios están ejecutándose correctamente.

 Si se muestra este otro icono significa que únicamente uno de los servicios se encuentra ejecutándose
en este momento, el otro se encuentra suspendido o no está instalado.
 Si ves este icono significará que ninguno de los servicios se encuentra ejecutándose en estos momentos.
Si haces clic izquierdo sobre cualquiera de estos iconos se mostrará el menú de WampServer (a la derecha).
Nos centraremos, ahora, en la parte inferior que se encuentra bajo el título de Quick Admin.
Aquí podrás encontrar 3 comandos que tienen que ver con el estado de los servicios:
 Iniciar los Servicios (Start All Services) intentará lanzar los dos servicios (Apache y MySQL).
 Detener los servicios (Stop All Services) parará los servicios que se estén ejecutando, por lo que el estado del
icono en la barra de tareas cambiará a .
 Reiniciar los servicios (Restart All Services) parará los servicios e intentará ejecutarlos de nuevo. Utiliza esta
opción cuando se te presente algún problema en su funcionamiento, o hayas cambiado algo en los archivos
de configuración.
Por defecto, el servidor de WampServer está apagado (off-line). Esto quiere decir qué sólo desde ése equipo
se puede ver el contenido del localhost.
Si pulsamos en Encender (Put Online) hacemos público este contenido y otras personas pueden verlo. Esto
no quiere decir que alguien buscando en Google pueda llegar a visitarnos. Sólo estará disponible para
quienes conozcan nuestra IP pública. Si quieres conocer la tuya, puedes encontrar muchas páginas que te la
muestran, como Cuál es mi IP.
Nota: Si te conectas a Internet a través de un router o cortafuegos, deberás de configurarlo para que permita
el acceso a localhost. Normalmente basta con abrir el puerto 80.
Cuando el servidor está apagado (off-line) los iconos muestran un pequeño candado: , y .
192
Para volver de nuevo al estado cerrado podrás seleccionar la opción Apagar (Put Offline) que aparecerá en
vez de Encender.
Podemos trabajar con cada servicio independientemente, desde Apache → Service o MySQL →Service.
No vamos a detallar cada opción. Explicaremos las comunes.
Las opciones Iniciar/Continuar Servicio, Detener Servicio y Reiniciar Servicio son los equivalentes a los que
vimos en el menú principal pero tratados individualmente para cada uno de los servicios.
Observa las dos últimas opciones Install Service y Remove Service, te servirán para instalar y desinstalar el
servicio. Al instalar el servicio este se iniciará con Windows, por lo que no tendremos que ejecutar
WampServer cuando queramos usarlo.
Finalmente veremos las opciones que vamos a utilizar de momento que se encuentran en la parte superior..
 Localhost abre una nueva ventana del navegador mostrando el contenido raíz del localhost. Por defecto
verás una página creada por WAMP desde donde podrás navegar por el contenido de las carpetas.
De todas formas también puedes abrir una nueva ventana y escribir http://localhost/carpeta/ para ver el
contenido de una carpeta que se encuentre en el directorio que asignaste al localhost o acceder a un alias.
 WWW Directory abre en una ventana del Explorador de Windows la carpeta que asignaste al localhost.
Desde aquí podrás trabajar con los ficheros como hacíamos hasta ahora. Copiándolos, moviéndolos o
borrándolos cuando sea necesario.
 Por último la opción phpMyAdmin nos llevará a una página web desde donde podremos controlar, gestionar
y crear nuestras bases de datos.
Recuerda, que a no ser que instales los servicios, cada vez que arranques el equipo deberás de arrancar
también WampServer para comenzar a trabajar con él.
Unidad 20. Servidor de Pruebas (VIII)

20.6. Configurar un servidor de pruebas
Una vez instalado WampServer tendremos listo un servidor local capaz de correr PHP sin ningún tipo de
problemas.
Ahora podemos combinar esta aplicación con Dreamweaver para probar las páginas dinámicas que vayamos
creando en nuestro sitio.
No tendremos más que declarar un Servidor de prueba en Dreamweaver.

193
Para ello deberás editar la configuración del sitio, haz clic en Sitio y luego en Administrar sitios....
Selecciona el sitio que quieras modificar y pulsa Editar.
Se abrirá el cuadro de diálogo de Configuración del sitio.
Selecciona la categoría de Servidores.
Para configurar un nuevo servidor, pulsa el icono +.
En las opciones, en Conectar usando tenemos que elegir Local/red, ya que el servidor está en nuestro propio
equipo (equipo local).
Las opciones cambiarán y se mostrarán así:
Ahora deberás rellenar los datos del servidor de pruebas.
En Carpeta de servidor deberemos seleccionar una carpeta dentro del localhost donde guardaremos los
archivos que queramos probar. Pueden ocurrir dos cosas:
 Si nuestros archivos están ya en localhost (o accesibles con un alias), podemos indicar la misma carpeta en la
que está definido el sitio en Dreamweaver.
 Si no están en localhost, debemos de crear una carpeta allí para el sitio. Al vincular esa carpeta con el sitio,
Dreamweaver irá copiando allí los archivos necesarios.
En nuestro caso nuestro localhost lo hemos definido un alias (sitios) para la carpeta que contiene los sitios
con los que estamos trabajando. Por lo tanto en Carpeta de servidor, dejamos la misma carpeta del sitio en
Dreamweaver. Insistimos en que si tienes la carpeta de servidor en otra ubicación, debes indicarla aquí.
Y finalmente escribe el URL del sitio de pruebas. Siempre comenzaremos por http://localhost/. Si sólo
tenemos un sitio, lo normal es definirlo directamente ahí. Si tenemos varios, debemos de indicar la
subcarpeta correspondiente o su alias. En nuestro caso tenemos hemos definido el alias sitios. Por lo tanto,
aquí indicaremos http://localhost/sitios/carpeta_del_sitio/
Pulsa Guardar y se aplicarán los cambios.

194
Ahora en el listado de servidores, seleccionamos el recién creado como un Servidor de pruebas.
A partir de este momento, cada vez que, trabajando sobre un archivo PHP, pulses la tecla F12 para
visualizarlo en el navegador se mostrará gracias a nuestro localhost.
Pero antes nos mostrará el siguiente mensaje:
Si la carpeta local y la carpeta del servidor de pruebas no es la misma, debemos de decir que Sí, para que
Dreamweaver copie los archivos necesarios al servidor. En nuestro caso, como es la misma carpeta,
podemos decir que No.
Nota: recuerda que para poder visualizar los archivos en localhost deberás tener WAMP ejecutando al
menos el servicio de Apache (que es el que se ocupa de correr PHP).
Para practicar la creación de servidores de prueba realiza el Ejercicio Paso a Paso de Servidores de
Prueba.
Unidad 20. Servidor de Pruebas (IX)

20.7. Introducción a phpMyAdmin
En este curso no vamos a explicar en profundidad el uso de phpMyAdmin debido a su extensión. Pero sí
daremos unas cuantas directrices para que puedas empezar a manejarte con él y a dar tus primeros pasos en
el uso de las bases de datos.
Para abrir phpMyAdmin, haz clic en la opción phpMyAdmin del menú de WampServer que se obtienen al
hacer clic sobre su icono. O accede a la dirección http://localhost/phpmyadmin/.
Se abrirá una ventana del navegador y mostrará la ventana principal de la aplicación:
195
Desde aquí podremos crear nuevas bases de datos, tablas y usuarios con sus respectivos privilegios.
Pero, vayamos paso a paso.
Nota: Algunos iconos y menús pueden variar ligeramente si empleas una versión posterior a la del curso,
aunque la funcionalidad debería ser la misma.
20.8. Crear una base de datos en phpMyAdmin

Para crear una nueva base de datos en phpMyAdmin basta con escribir el nombre de la nueva base de datos
en el cuadro de texto que aparece bajo Crear nueva base de datos en la página principal y pulsar el botón
Crear.
La nueva base de datos se creará automáticamente.
Puedes seleccionar un juego de caracteres en el desplegable Cotejamiento, si lo dejas en blanco se tomará el

valor por defecto que variará según la configuración de cada servidor.
Es recomendable que escojas la opción utf-8_spanish_ci para maximizar la compatibilidad con todos los
caracteres especiales del alfabeto en castellano y para que la salida en cualquier navegador sea correcta.
196
Una vez creada la base de datos podrás acceder a ella desde el menú de la izquierda. Despliega el listado
Base de datos y selecciona la base de datos que quieras modificar:
Para practicar la creación bases de datos realiza el Ejercicio Paso a Paso de creación de Bases de Datos.
Unidad 20. Servidor de Pruebas (X)

20.9. Crear una tabla en phpMyAdmin
Cuando selecciones una Base de Datos en phpMyAdmin verás una nueva pantalla desde donde podrás ver
todas las opciones para poder trabajar en ella:
En este caso en la pantalla principal encontraremos muy poca cosa porque no contiene ninguna tabla por
ahora.
Para crear una tabla lo único que debes hacer es escribir su Nombre y especificar su Número de campos
(luego puedes seguir añadiendo campos).
Cuando hayas terminado pulsa el botón Continuar y verás una pantalla como ésta:
197
Aquí deberás establecer la configuración de cada uno de los campos de la tabla.
Rápidamente definiremos las propiedades más frecuentemente utilizadas:
 Campo: El nombre del campo.

 Tipo: El tipo del valor del campo: texto (varchar o text), número entero (int), decimal (decimal), etc...
 Longitud/Valores Tamaño máximo del campo. Un texto de tamaño 15 sólo podrá tener 15 caracteres.
 Predeterminado: Un valor predeterminado para el campo, si al crear el registro no se le asigna otro valor.
 Cotejamiento: Juego de caracteres que utilizará el campo.
 Atributos: Dependientes del tipo de dato. Por ejemplo, que un numérico solo sea positivo.
 Nulo: Si el campo permite valores nulos, o debe rellenarse obligatoriamente.
 Índice: Indica si el campo está indexado. Puede ser clave principal, valores únicos, etc...
 A_I: Si el campo es un auto-incremento, que se establecerá automáticamente al crear nuevos registros.
 Comentarios: Nos permite agregar comentarios descriptivos del campo o su contenido.
Pulsa el botón Grabar cuando hayas acabado y la tabla se creará.
Cada vez que realicemos una modificación se mostrará un mensaje similar a éste si todo ha ido bien:
O parecido a esto si no se ha podido realizar la acción:
Ahora el aspecto de la ventana de la base de datos será diferente pues mostrará el listado de tablas
contenidas con sus propiedades.
198
Haciendo clic en el botón al lado del nombre de la tabla o haciendo clic sobre ella en el menú de la
izquierda podrás acceder a la vista en detalle de sus campos y propiedades. Para ello, asegúrate de que estás
en la pestaña Estructura.
En esta última vista puedes hacer clic en la pestaña Examinar para ver el listado de todos los registros.
Utiliza la pestaña Buscar para filtrar el listado por los valores de algún campo.
Para practicar la creación tablas realiza el Ejercicio Paso a Paso de creación de Tablas.
Unidad 20. Servidor de Pruebas (XI)

20.10. Insertar datos en una tabla
Rellenar tablas desde phpMyAdmin es muy sencillo.
Si no tienes ninguna base de datos seleccionada, selecciona previamente la que contiene la tabla a utilizar
desde el desplegable que encontrarás en la parte superior izquierda de la pantalla.
Luego selecciona la tabla con la que quieres trabajar y haz clic en la pestaña Insertar.
En seguida se abrirá una ventana desde donde podrás añadir una fila (o registro) a la tabla indicando el valor
de cada campo:
En la columna Valor escribe el valor del Tipo de Cada campo y pulsa Continuar cuando hayas acabado.
Otro modo de rellenar una tabla es importando datos que tengamos en un archivo proveniente de otra base
de datos o hecho por nosotros mismos.
Para ello, tendrás que hacer clic en la pestaña Importar en el mismo menú donde encontraste la opción
anterior:
199
Se abrirá una ventana desde donde deberás especificar qué archivo quieres importar:
Observa que deberás indicar la localización del archivo que contiene los datos que queremos importar.
Y sobre todo, lo más importante, el Juego de caracteres que utiliza el archivo para que los datos que se
introduzcan en la tabla se puedan adaptar de forma correcta y mantener la coherencia del texto.
Una vez introducidos estos datos bastará con que pulses el botón Continuar y los registros (si no hubo
ningún fallo en el archivo) se añadirán automáticamente.
Para practicar realiza el Ejercicio Importar Datos a una Tabla.
Unidad 20. Servidor de Pruebas (XII)

20.11. Modificar la estructura de la tabla
Una vez tengas creada una tabla en la base de datos es posible editarla para modificar la configuración de
algún campo o incluso añadir uno nuevo.
Para ello deberemos ir a la vista de la tabla haciendo clic en ella en el menú que encontramos en la izquierda
de la página una vez seleccionada la base de datos.
200
Esto hará que se nos muestre la tabla en la ventana. Si la tabla está vacía, veremos directamente su
estructura. Si ya contiene datos, los veremos. En este caso, pulsa sobre la pestaña Estructura.
El modo en que podremos modificarla será muy fácil.
Observa la ventana:
Para añadir nuevos campos a la tabla sólo tienes que escribir el número de campos que vas a crear en el
campo Añadir ..... campo(s).
Luego selecciona la posición donde se añadirán, Al final de la tabla, Al comienzo de la tabla o Después de..
y pulsa el botón Continuar.
Se abrirá la ventana de definición de campos que vimos en el apartado anterior y sólo deberás rellenarla
como ya hemos visto.
Modificar campos ya existentes tampoco es muy complicado, sólo tendrás que utilizar los botones que se
encuentran en la columna acción del campo correspondiente.
 El botón Modificar te permitirá modificar la configuración del campo. Podrás cambiar todas las
opciones que viste cuando lo creaste.
 El botón Eliminar borrará el campo y todos los valores almacenados en cada registro que le
correspondan.
 El botón Clave Principal establece que el campo se marque como clave principal de la tabla.
 El botón Índice crea un nuevo índice en la tabla con el campo seleccionado.
 Finalmente el botón Único establece el campo seleccionado como campo con valor único, es
decir, no puede contener valores repetidos.
Si queremos realizar la misma acción sobre varios campos a la vez, podemos marcarlos con las casillas de
verificación que se encuentran en el extremo izquierdo y luego pulsar el icono correspondiente a la acción a
realizar en la fila donde dice Para los elementos que están marcados:
Unidad 20. Servidor de Pruebas (XIII)

20.12. Modificar datos de una tabla
201
También una vez insertados datos en una tabla de una base de datos, podremos modificarlos.
Esto es posible accediendo al contenido de la tabla desde la pestaña Examinar que encontrarás en la parte
superior de la ventana, aunque por es la vista que se muestra por defecto al abrir la tabla:
Hacer clic en ese elemento hará que puedas visualizar el contenido de la tabla.
Y al mismo tiempo te dará la posibilidad de editar o eliminar el contenido de cada registro, además del
registro completo.
Desde esta vista podremos ver la información almacenada en la tabla.
Podemos utilizar los botones de la primera columna para modificar los datos.
 El botón Modificar te permitirá modificar el contenido del registro. Púlsalo e irás a la ventana que
vimos en el apartado de Insertar datos.
 El botón Eliminar borrará el registro completo. Esta acción no es reversible así que ten cuidado
cuando la utilices.
Si quieres borrar varios registros de golpe, marca las casillas de esos registros y pulsa el botón Eliminar de la
línea Para los elementos que están marcados.
Unidad 20. Servidor de Pruebas (XIV)

20.13. Establecer privilegios en phpMyAdmin
Entendamos primero qué son los usuarios. Cuando una página en PHP se conecta a una base de datos, lo
hace a través de una conexión, indicando un usuario y una clave. Por lo tanto, sólo se puede conectar a
aquellas bases de datos de las que conozca estos datos.
Al conectarse lo hace a través de un usuario. Y ese usuario puede realizar determinadas acciones sobre la
base de datos. Es decir, tiene determinados permisos.
Podemos hacer que las conexiones creadas cuando un visitante llegue a nuestra página emplee un usuario
distinto del que empleamos nosotros cuando nos conectamos para administrar nuestra base de datos. Desde
el punto de vista de la seguridad, esos usuarios no deberían de poder realizar las mismas acciones, es decir,
202
deben de tener privilegios distintos. Por ejemplo, que sólo puedan ver determinadas tablas o no puedan
borrar registros.
En cualquier momento puedes utilizar el botón para volver a la pantalla principal de phpMyAdmin.
Aquí encontraremos un enlace a la sección de Privilegios que es la que nos ocupa en este
apartado.
Haz clic sobre él y verás una ventana similar a la siguiente:
Desde aquí podemos crear los distintos usuarios que se conectarán a la base de datos, y darle distintos
privilegios a cada uno.
Para crear un nuevo usuario sólo tienes que hacer clic en Agregar un nuevo usuario.
En la siguiente ventana tendrás que introducir los valores que definirán la cuenta:
203
En Servidor selecciona Local porque es el único modo con el que vamos a trabajar en estos momentos. Esto
quiere decir que se conecta desde el mismo servidor en el que está la base de datos.
El resto puedes configurarlo a tu gusto.
Más abajo encontrarás estas opciones:
Aquí podrás seleccionar los privilegios del usuario en forma global, las opciones que marques aquí se
aplicarán sobre todas las bases de datos del sistema.
204
Puedes especificar también un límite de recursos (conexiones, peticiones, etc...). 0 indica sin límite.
Cuando estés listo pulsa Continuar.
Unidad 20. Servidor de Pruebas (XV)

Ahora verás la pantalla con las opciones del nuevo usuario que acabas de crear. Verás que algunas ya las
conoces, como los privilegios globales.
Lo que nos interesa en este momento son unas opciones que encontrarás más abajo, los privilegios
específicos. Es decir, privilegios enfocados a una única base de datos:
Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de texto. Luego pulsa
Continuar.
Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar.
Verás que en la misma página más abajo tienes una opción muy parecida a la que acabamos de ver pero
actuando únicamente sobre una tabla de la base de datos.
205
Estableciendo los privilegios de este modo recortaríamos muchísimo más la actuación del usuario sobre la
base de datos.
Los privilegios más comunes son los siguientes:
 SELECT: permite al usuario realizar una consulta de selección para poder leer los datos de una tabla.
 INSERT: permite al usuario realizar una consulta de creación de registro para introducir nuevos datos en una
tabla.
 UPDATE: permite al usuario actualizar los valores de una tabla.
 DELETE: permite al usuario eliminar registros de una tabla.
 CREATE: permite al usuario crear tablas en la base de datos.
 DROP: permite al usuario eliminar una tabla o la base de datos completa.
Si conoces un poco SQL estos privilegios ya te serán familiares.
Para practicar la creación de privilegios realiza el Ejercicio Paso a Paso de Asignación de Privilegios.
En este tema no realizaremos ejercicios sobre la creación de la base de datos del sitio Blog, en temas
posteriores veremos qué tablas específicas deberemos crear y las crearemos entonces.
Unidad 21. Páginas dinámicas (I)

21.1. Introducción
En esta unidad vamos a ver cómo utilizar Dreamweaver para crear páginas PHP y acceder a datos
almacenados en una base de datos.
Como vimos en el tema anterior, las páginas dinámicas se almacenan en el servidor y cuando son requeridas
se ejecutan y devuelven una salida de código HTML al cliente que lo visualizará en su navegador.
Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexión a una base de datos y extraer o
guardar información en ella.
Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el código que introduzcamos en
nuestras páginas y permita la creación de bases de datos para almacenar información pasaremos a crear
nuestras propias páginas dinámicas de acceso a datos.
Una vez instalado WampServer empezaremos a crear nuestras primeras páginas para mostrar información
específica y personalizada.
Para ello nos apoyaremos siempre en la sección Datos del panel Insertar:
206
Recuerda que Dreamweaver es muy personalizable, y puede que este panel lo estés viendo como una barra
de herramientas:
Y en el grupo de paneles de Base de datos, que puedes abrir desde el menú Ventana → Bases de datos.
Unidad 21. Páginas dinámicas (II)

21.2. Crear una conexión a la base de datos
Como puedes ver en el panel Base de datos los requisitos necesarios para empezar a trabajar con bases de
datos ya los hemos cubierto en los temas anteriores del curso:
207
1. Hemos creado un sitio.
2. Estamos trabajando con un tipo de documento dinámico PHP (Archivo → Nuevo... → Tipo de página: PHP).
3. Hemos instalado un servidor local y configurado el servidor de prueba.
El último paso que nos quedaría para poder empezar a crear páginas será definir una conexión para que
Dreamweaver establezca los parámetros en los que se realizará la comunicación entre los archivos PHP y los
datos de nuestras tablas.
En otras palabras deberemos decirle a Dreamweaver dónde está la base de datos, su nombre y un usuario
(con su contraseña) con suficientes privilegios como para poder, al menos, visualizar los datos almacenados.
Para ello nos dirigimos a la pestaña Bases de datos en el panel Aplicación y hacemos clic sobre el botón .
Selecciona la opción Conexión MySQL para crear la conexión que necesitamos.
Se abrirá el siguiente cuadro de diálogo:
Aquí deberás colocar los datos correspondientes a tu base de datos.
En Nombre de conexión escribiremos un nombre significativo para poder reconocer la conexión más
adelante.
208
En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de datos está alojada en
nuestro propio equipo. En otro caso habría que introducir la dirección del servidor donde se encuentre
almacenada la información.
Escribe un Nombre de usuario y Contraseña con privilegios suficientes para acceder a la base de datos (al
menos parcialmente).
Y finalmente selecciona (pulsando el botón Seleccionar) o escribe el nombre de la base de datos a la cual
nos vamos a conectar.
Puedes hacer una prueba de conexión pulsando el botón Prueba, así te asegurarás de que se puede establecer
comunicación entre Dreamweaver y el servidor correctamente con los datos facilitados.
Una vez hayas acabado pulsa Aceptar y la conexión estará lista para utilizarse.
Observa que ahora, en el sitio, tienes la carpeta Connections. En ella guardará Dreamweaver las conexiones
del sitio. No la renombres, y no olvides copiarla con el resto de archivos si copias o mueves el sitio.
Para practicar la creación de conexiones realiza el Ejercicio Paso a Paso Crear una conexión a base de
datos.
Unidad 21. Páginas dinámicas (III)

21.3. Juegos de registros o RecordSets
Una vez creada nuestra conexión empezaremos a crear páginas dinámicas.
Ahora podemos insertar en cualquier página información almacenada en la base de datos, sólo tenemos que
decidir qué datos vamos a mostrar.
Crearemos un juego de registros (también llamado RecordSet) donde almacenaremos durante el tiempo en el
que se esté ejecutando el archivo PHP los datos que queremos mostrar.
De esta forma podremos seleccionar determinada información y mostrarla en la página.
Antes que nada recuerda que los datos dinámicos sólo pueden mostrarse en una página dinámica. Por lo que
si intentas crear un juego de registros en una página codificada como HTML el programa no te dejará.
Así que abre una nueva página PHP y empieza a practicar.
Para crear un juego de registros puedes hacer clic en el botón en el panel Insertar,
sección de Datos:
209
Aquí deberemos especificar qué información queremos obtener, es decir qué registros de qué tabla.
Utilizar este cuadro de diálogo es muy sencillo, aunque puede complicarse bastante si sacamos el máximo
provecho de todas sus opciones.
Iremos viendo poco a poco la forma en la que podremos trabajar con los juegos de registros.
El primer paso será comenzar dando un Nombre significativo al juego, por ejemplo podríamos llamarlo
articulos_en_stock si lo que va a contener el juego de registros son los datos de una tabla de artículos que
tienen existencias.
Luego especificaremos la Conexión que deberá utilizarse para que sea posible acceder a la información.
Aquí deberás de seleccionar una que hayas creado anteriormente o puedes hacer clic en el botón Definir...
para crear una nueva tal y como vimos en el apartado anterior. Lo normal es que te aparezca seleccionada
directamente al crear el juego.
Una vez seleccionada la conexión deberemos seleccionar la Tabla de la que queremos sacar los registros.
Finalmente decidiremos qué Columnas queremos mostrar. Al seleccionar una tabla, sus columnas
aparecerán en el cuadro de columnas. Selecciona la opción Todas para que todos los campos de la tabla
estén disponibles o marca la opción Seleccionado: para elegir una o más de las existentes (utiliza la tecla
Ctrl para realizar selecciones múltiples).
Pulsando el botón Prueba en cualquier momento verás un ejemplo de qué datos contendrá el juego de
registros, es incluso aconsejable que lo veas antes de Aceptar el cuadro de diálogo para asegurarte de que
estás sacando la información que necesitas.

210
Para practicar la creación de juegos de registros realiza el Ejercicio Paso a Paso creación de un Recordset.
Nota: Puedes crear tantos juegos de registro en una página como necesites.
Unidad 21. Páginas dinámicas (IV)

21.4. Mostrar datos dinámicos
Una vez se cree un Juego de Registros podremos empezar a mostrar los datos en nuestra página.
Como podrás ver en el panel Vinculaciones ahora podemos ver las columnas contenidas en el Recordset:
Añadir, por ejemplo, el Titulo del libro a la página es tan fácil como arrastrar el elemento desde el panel a su
lugar en la página.
Aunque también podemos utilizar la opción Texto dinámico, agrupada en Datos dinámicos:
Al utilizar esta opción se abrirá un cuadro de diálogo:
211
Como puedes ver en la imagen, deberás seleccionar el Campo que quieres mostrar en la página, además
Dreamweaver te ofrece la posibilidad de aplicarle un formato determinado, para ello sólo deberás
seleccionarlo de la lista.
Por ejemplo, la opción May./min. - Primera letra en mayúsculas transformará el texto del registro y lo
pondrá en minúsculas excepto la primera letra que se verá transformada a mayúsculas.
Nota: En la versión empleada para realizar este curso, los formatos May.-min. - Mayús. y May.-min. -
Minús. están intercambiados, y funcionan al revés. Tenlo en cuenta, ya que la versión que empleas puede
tener este error o estar ya corregido.
En el cuadro de texto Código verás como se modifica el código PHP que se incluirá automáticamente en la
página.
Pulsa Aceptar cuando hayas acabado y el campo del registro se incluirá en el punto donde tengas situado el
cursor.
Se representará en la vista de Diseño de la siguiente forma:
Esto nos indica que el elemento que se mostrará será el de la columna Título del recordset listado_libros.
En cualquier momento podrás volver al cuadro de diálogo anterior para modificar alguna de las opciones
(por ejemplo, el formato) desde el panel Comportamientos del servidor (Ctrl + F9).
212
En este panel se mostrarán todos los elementos dinámicos que se están utilizando en la página, haz doble
clic sobre cualquiera de ellos para modificarlos.
Un modo de vista muy útil es la Vista en vivo En este modo, se mostrarán los datos reales en vez del nombre
de registro, para que nos hagamos una idea más real del aspecto de la página.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Texto dinámico.
Unidad 21. Páginas dinámicas (V)

21.5. Repeticiones
Hemos aprendido a insertar datos en una página, pero de momento sólo logramos que se muestre el primer
registro del juego.
¿Cómo hacemos para mostrar más de uno?
Muy fácil, utilizaremos las Repeticiones.
Repetir un registro nos permitirá visualizar en una misma página más de un registro contenido en el
recordset a la vez.
Ten en cuenta que podemos repetir cualquier parte que queramos, de hecho la repetición no afecta a la
página entera sino a la zona seleccionada.
Para crear una repetición deberás seleccionar la zona a repetir (una fila de tabla, un elemento de lista, un
párrafo...) y pulsar el botón Repetir región en la en el panel Insertar Datos.
213
Aquí deberás indicar el número de registros que quieras que aparezcan (más tarde veremos cómo avanzar en
una lista de registros) o simplemente escoger Todos los registros para que se repita la información
seleccionada de todos y cada uno de los registros.
Como decíamos antes, en una página pueden existir más de un juego de registros o recordset, por lo que será
necesario especificar de cuál de ellos queremos que se realice la repetición en el desplegable Juego de
registros.
Una vez hayamos terminado pulsa el botón Aceptar, y en la vista de Diseño, la sección seleccionada tomará
este aspecto:
Esto provocará el listado de todos los títulos del recordset listado_libros.
Si colocásemos otro campo al lado de este pero sobre él no se aplicase ninguna repetición se mostraría el
listado junto a la información de un campo del primer registro.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repetición de Texto dinámico.
Dreamweaver también te da la posibilidad de crear una tabla dinámica automáticamente que mostrará todas
las columnas del número de registros que quieras.
Para ello deberás hacer clic en la opción Tabla dinámica que aparece en la barra Datos:
Automáticamente se generará una tabla con la configuración que especifiques en este cuadro de diálogo:
214
De esta forma Dreamweaver colocará los registros en una tabla con las características que hayamos
indicado.
Unidad 21. Páginas dinámicas (VI)

21.6. Orden de juegos de registros
Hasta ahora somos capaces de crear un listado personalizado de elementos almacenados en un juego de
registros.
Pero podríamos querer ordenarlos de algún modo, ¿cómo lo hacemos?
Vamos a utilizar la opción Ordenar: que se encuentra en el cuadro de diálogo Juego de Registros:
215
Puedes llegar a este cuadro de diálogo creando un nuevo Recordset o modificando el ya existente, para ello
deberás hacer doble clic sobre él en el panel Vinculaciones (Ctrl + F10).
La forma en que se podrán ordenar los registros del recordset será la siguiente, selecciona el campo por el
que quieres ordenar los registros y el modo en que quieres que lo haga.
Si el campo es de tipo numérico, se ordenará de menor a mayor (Ascendente) o de mayor a menor

(Descendente).
Si el campo es de tipo alfanumérico se ordenará alfabéticamente.
Para practicar este concepto realiza el Ejercicio Paso a Paso de Ordenación de un Recordset.
21.7. Filtrado de juegos de registros

También podemos filtrar los registros que vayan a formar parte del juego de registros eliminando aquellos
que no cumplan ciertas condiciones.
Este método también lo aplicaremos sobre el cuadro de diálogo Juego de Registros del recordset:
En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el filtro. Seleccionar en el
cuadro de lista que contiene un = si queremos que el campo sea igual, distinto, mayor, menor o que empiece
o acabe con alguna cadena determinada.
En el desplegable que encontrarás más abajo deberás seleccionar Valor introducido para poder especificar en
el cuadro de la derecha (en la imagen 0) el valor con el que comparar.
216
En apartados posteriores veremos el significado de escoger en el desplegable otra opción que no sea Valor
introducido.
Una vez hayas terminado, pulsa el botón Aceptar y el recordset contendrá únicamente los registros que
cumplan la condición indicada en el cuadro de diálogo.
Nota: recuerda que puedes utilizar el botón Prueba para previsualizar el efecto del filtro sobre la tabla
seleccionada.
Para practicar el filtrado de registros realiza el Ejercicio Paso a Paso de Filtrado de Registros.
Unidad 21. Páginas dinámicas (VII)

21.8. Paginación de Registros
Ya sabemos cómo hacer para mostrar un listado ordenado y filtrado de tantos registros como queramos.
Cuando el listado de los registros es muy largo, nos sería muy útil poder organizar esos registros en páginas
y avanzar en ese listado página por página.
Para ello utilizaremos la Paginación.
En primer lugar tendrás que definir una repetición de registros con un número limitado de registros (los que
quieres que aparezcan en cada página), si defines la repetición sobre todos los registros, la paginación no
funcionará porque todos los registros se estarán mostrando en una sola página.
A continuación crearemos enlaces que funcionen de modo automático desplazándose por las diferentes
páginas del juego de registros.
Sólo tendrás que situar el punto de inserción donde lo quieres insertar utilizando el botón que se te ofrece en
el panel Insertar Datos. Entre las opciones que encontramos, en este caso elegimos Mover a la siguiente
página.
217
Al seleccionar el enlace correspondiente se abrirá un cuadro de diálogo muy parecido a éste:
Aquí sólo tendrás que seleccionar el Juego de registros sobre el cual quieres que se establezca la paginación
y pulsar Aceptar.
En la vista de Diseño verás que aparece algo como esto:
Si utilizas el servidor de prueba (pulsando F12) podrás ver que pulsando el enlace creado avanzas por el
juego de registros.
La página permanecerá exactamente igual a cómo la diseñaste, pero el contenido será dinámico y variará
según la página que estés mostrando.
Nota: Recuerda que puedes aplicar estilos sobre estos enlaces igual que podíamos hacerlos sobre los items
que mostramos para los datos de la tabla.
Para practicar el uso de la paginación realiza el Ejercicio Paso a Paso de Paginación de Registros.
Una opción muy útil que presenta Dreamweaver son los Recuentos de registros:
Si seleccionas alguna de las tres últimas opciones se mostrará el siguiente cuadro de diálogo:
218
Selecciona aquí el Juego de registros sobre el que quieras realizar el recuento y pulsa Aceptar.
Dependiendo de la opción que escojas se añadirá un texto u otro a la página.
 Registro inicial: Visualiza el número dentro del listado total de registros, del primer elemento de la lista que
se está mostrando en la página actual.
 Registro final : Visualiza el número dentro del listado total de registros del último elemento de la lista que se
está mostrando en la página actual.
 Total de registros: Visualiza el número total de registros del juego (la suma de todos los registros de todas las
páginas).
Seleccionando la primera opción Estado de navegación de juego de registros podremos insertar un

literal que mostrará el recuento exacto de los registros que se están visualizando, se añadirá una línea como
ésta:
Que en la Vista en vivo tomaría este aspecto:
Como puedes ver, esta opción es una combinación de las tres anteriores que ilustra perfectamente el
funcionamiento del recuento de registros.
Para practicar el uso del recuento realiza el Ejercicio Paso a Paso de Recuento de Registros.
Unidad 21. Páginas dinámicas (VIII)

21.9. Mostrar/Ocultar regiones
Como hemos visto la paginación es muy útil para navegar por nuestros registros.
Pero existen determinados casos en los que nos gustaría que estos items funcionen de forma diferente.
Por ejemplo, ¿por qué debe aparecer el elemento de navegación Anterior en la primera página si en realidad
no existe una página anterior a la que podamos ir?
219
Vamos a utilizar las opciones de Mostrar región para realizar algunos cambios sobre los elementos de la
página. En nuestro caso vamos a seleccionar Mostrar si no es la primera página:
Estas opciones en realidad actúan sobre cualquier parte de la página, así que incluso podrás hacer
desaparecer una tabla o un párrafo si no se cumplen los criterios de la opción.
Cuando hagas clic en alguna de ellas verás un cuadro de diálogo como éste:
Aquí deberás especificar el Juego de registros sobre el que quieres que se efectúe la acción y luego Aceptar.
En la vista de Diseño se mostrará la opción de una forma parecida a ésta:
Para practicar ocultar y mostrar regiones realiza el Ejercicio Paso a Paso de Ocultar/Mostrar Regiones.
Combinando la técnica de ocultación y muestra de registros con las de recuento encontramos la opción Barra
de navegación de juego de registros:
Pulsando esta opción se incluirá en la página una barra de navegación para desplazarse por las páginas del
juego de registros. Se abrirá el siguiente cuadro de diálogo:
220
Desde aquí podrás seleccionar el Juego de registros sobre el que quieres que actúe la barra de navegación y
seleccionar uno de los dos modos: Texto o Imágenes.
Aquí tienes un ejemplo de cómo quedaría cada una de las opciones, en la primera línea tenemos una barra de
navegación con la opción Texto y en la segunda línea una barra de navegación con la opción Imágenes:
Por supuesto, podemos cambiar esas imágenes o aplicar estilos CSS.
Unidad 21. Páginas dinámicas (IX)

21.10. Uso de variables
Hasta ahora hemos aprendido a crear páginas dinámicas que muestren contenido disponible desde una base
de datos.
Aunque podríamos hacer mucho más dinámica la página haciendo que sea el usuario quien elija qué registro
quiere visualizar.
Imagina que quieres el listado de las ventas de un artículo en determinado mes.
Es posible acotar los resultados de una página dinámica de un modo muy sencillo, utilizando variables.
Una variable le da información a una página PHP, y el archivo puede actuar de acorde con el valor de esa
variable.
En el ejemplo anterior deberíamos abrir la página PHP indicándole que queremos que muestre el articulo X
del mes Y.
Muy bien veamos la forma de hacerlo.
Primero deberemos aprender cómo pasar las variables a una página PHP.
221
En una dirección de Internet (o URL) podemos encontrar cadenas como ésta:
http://www.misitio.com/carpeta/archivo.php?nombre=valor
¿A que lo has visto alguna vez?
Muy bien, pues en este ejemplo le estamos diciendo al archivo archivo.php que se ejecute, pero además le
estamos indicando que queremos que tome en cuenta la variable nombre con el valor valor.
Incluso si miras las páginas de la librería, puedes observar que al paginar se envían como variables la página
que se ha de mostrar.
En un ejemplo sencillo podríamos indicar mediante un enlace que queremos que se muestre el detalle de un
artículo con determinado número de identificación de la siguiente forma:
detalle.php?id=99
De esta forma estaremos abriendo la página detalle.php pasando en la variable id el valor 99 para que la
página muestre el detalle del artículo 99.
¿Cómo podemos desde Dreamweaver crear enlaces con paso de variables?
Si el valor del parámetro es fijo, se puede escribir directamente en la referencia del vínculo, por ejemplo en
el enlace a la página detalle.php pondríamos en el cuadro Vínculo del panel Propiedades detalle.php?id=99.
Pero también podemos utilizar textos dinámicos para indicar el valor del parámetro a pasar. En este caso en
vez de escribir 99 deberíamos indicar que el valor lo tiene que sacar del texto dinámico de la siguiente
manera:
Nos posicionamos sobre el enlace a la página detalle.php y desde la vista Código arrastramos el campo
dinámico desde el panel Vinculaciones (Ctrl + F10) hasta el vínculo para formar la URL del enlace:
detalle.php?id=<?php echo $row_libros_usados['Id']; ?>
El código quedaría de la siguiente forma:
Cuando pases los parámetros ayudándote de un formulario, no olvides fijarte en el método de envío del
formulario:
222
Al utilizar parámetros recibidos de un formulario, lo usaremos de la siguiente manera:
Si el método del formularioes GET, los recibiremos como Parámetro URL.
Si el método del formularioes POST, los recibiremos como Variable de formulario.
Como norma general, en el curso emplearemos GET como método de envío, para tratarlo igual que los
enlaces con parámetros.
Para practicar la creación de enlaces con parámetros realiza el Ejercicio Paso a Paso de Enlaces con
Parámetros.
Unidad 21. Páginas dinámicas (X)

¿Cómo podemos desde Dreamweaver utilizar las variables recibidas?
Cuando se abre una página pasándole una serie de parámetros, esta página puede utilizar los valores de los
parámetros para lo que le haga falta.
En el ejemplo anterior (en la teoría) abrimos la página detalle.php pasándole un valor en la variable Id. Pues
esta página puede ahora utilizar este valor para visualizar únicamente los registros con ese Id en vez de
visualizar todos los registros.
Para ello deberemos modificar el Juego de registros de la página. Hacemos doble clic sobre él en el panel
Comportamientos del servidor (Ctrl + F9).
Se abrirá el cuadro de diálogo Juego de registros:
223
Aquí indicaremos que el recordset filtre los registros cuyo Id sea igual al valor recibido en el parámetro Id.
Para ello deberemos seleccionar en el desplegable de filtro la opción Parámetro URL para que el archivo
PHP tome el valor de la variable de la URL que abre la página.
En la caja de texto de al lado deberás especificar el nombre que tiene la variable en la ruta URL.
Para practicar el filtro con parámetros realiza el Ejercicio Paso a Paso de Filtro con Parámetros.
Hay muchos usos para los parámetros. Imagina que quieres mostrar mediante un enlace los libros que
cuesten más de 10 €, sólo tendrías que pasarle una variable precio_minimo a la página que genera el listado
de libros y establecer que el juego de registros filtre los resultados para mostrar sólo aquellos que tengan un
valor en el campo Precio mayor al especificado en el parámetro precio_minimo.
Unidad 21. Páginas dinámicas (XI)

21.11. Páginas Maestro-Detalle
A menudo debemos sacar datos de dos tablas que están relacionadas entre sí por un campo común a las dos,
por ejemplo para mostrar los datos de un cliente y todas sus facturas (en la factura tendré el código del
cliente), o los datos de un libro y todas las compras que tenemos de ese libro (en la tabla compras tendré el
código del libro comprado)...
Pues Dreamweaver te facilita la creación de páginas de este tipo y las denomina Maestro-Detalle porque
sacan datos de un archivo Maestro (clientes y libros en los ejemplos anteriores) y enlazan cada registro con
una página donde se visualizan los registros correspondientes del archivo Detalle (las facturas y las compras
en los ejemplos anteriores).
Para ello utilizamos la opción Juego de páginas Maestro-Detalle .
Al seleccionarla verás el siguiente cuadro de diálogo:
224
 En Juego de registros: seleccionamos el juego de registros que se visualizarán de la tabla Maestro.
 En Campos de página Maestro: indicamos los campos del maestro que queremos que se muestren en
la página.
 En Vincular con Detalle desde: indicaremos el campo del Maestro que contendrá el enlace a la
página de detalle.
 En Pasar clave exclusiva: indicaremos el campo que se utiliza para relacionar los registros.
 Luego en Mostrar: tendremos que establecer el número de registros que queremos que se muestren
en la página del Maestro.
En la sección inferior deberemos introducir la información para crear el Detalle.

 Establece un Nombre de página Detalle (si no existe la creará) y en Campos de página Detalle:
escogeremos los campos a mostrar.
Pulsamos el botón Aceptar y Dreamweaver creará automáticamente las páginas requeridas.
Luego podrás modificar su aspecto para que se ajusten al sitio que estás diseñando.
Unidad 21. Páginas dinámicas (XII)

21.12. Asistente de inserción de registros
225
Dreamweaver posee otros procesos automatizados como verás en este apartado y en los siguientes para crear
más páginas de acceso a datos.
Es capaz de generar formularios de forma sencilla para insertar, modificar o eliminar registros de una base
de datos.
Para crear un formulario de inserción de registros tendrás que hacer clic en el botón Asistente de formulario
de inserción de registros del panel Insertar Datos.
Su uso es bastante sencillo, solo tienes que indicar la Conexión y los datos se rellenarán automáticamente.
Selecciona la Tabla donde quieras insertar el nuevo registro.
También puedes indicar dónde quieres que se redirija la página una vez se haya insertado el registro.
Luego seleccionaremos los campos que deberán aparecer en el formulario. Recuerda que todos aquellos que
necesiten adoptar un valor deberán aparecer en él, si no el formulario fallará por no introducir valores en
campos que no aceptan valores nulos.
A continuación seleccionaremos cada campo y para cada uno indicaremos cómo será presentado en el
formulario.
En Etiqueta escribiremos la etiqueta que queremos para el campo.
226
En Mostrar como: indicaremos en qué tipo de elemento de formulario estará representado el campo, una caja
de texto, un botón de opción, un desplegable...
También indica cómo Enviar la información para que se guarde en la tabla, normalmente será del mismo
tipo que definiste cuando creaste la tabla.
Puedes establecer un Valor predeterminado para el campo seleccionándolo en el generador automático.
Podrás asignarle un valor existente en la página.
Esta opción te será muy útil si establecemos alguno de los campos como Campo oculto en Mostrar como.
Pulsa Aceptar y el formulario se creará automáticamente.
Para practicar la inserción de registros realiza el Ejercicio Paso a Paso de Inserción de Registros.
Realmente no bastaría con este formulario. Deberíamos de comprobar que las variables son como las
esperamos. Por ejemplo, en el caso de la librería, el número de tarjeta sólo es válido si no está vacío, si sólo
lo forman números y tiene 16 caracteres. Todas estas comprobaciones, se harían por PHP antes de insertar el
registro. Esto no lo veremos en este curso, ya que su objetivo no es programar directamente.
Unidad 21. Páginas dinámicas (XIII)

21.13. Asistente de actualización de registros
Igual que en el apartado anterior existe un asistente que te permitirá crear un formulario que primero
muestra los datos existentes en un registro de la tabla y te permitirá modificarlos y guardarlos.
Para ello, deberás hacer clic en el botón Asistente de formulario de actualización de registros .
227
El modo en el que rellenaremos los datos es el siguiente:
Seleccionaremos, primero, la Conexión con la que trabajaremos.
Luego elegiremos la Tabla a actualizar que será de donde saquemos los datos que luego modificaremos.
Como deberemos elegir registro de entre toda la tabla para modificar, deberemos indicar cuál. Para ello
deberemos seleccionar un campo (en Columna de clave exclusiva) y un juego de registros (en Seleccionar
registro de) para establecer el registro que va a mostrar la página. De esta forma vincularemos el campo del
recordset de la página y se mostrará la información que coincida con él.
El resto funcionaría igual que en el cuadro de diálogo anterior. Seleccionando los campos que se van a
mostrar, su tipo de elemento de formulario y la forma en la que se va a enviar.
En la caja de texto Valor predeterminado encontrarás la cadena que mostrará el contenido del campo en el
registro en cuestión.
No lo modifiques si quieres que muestre la información almacenada. Sólo cámbialo si quieres que aparezca
un valor fijo en vez del valor contenido en el registro, por ejemplo, ninguno, sin precio, etc... e incluso nada.
Finalmente pulsa Aceptar y el formulario se creará.
Unidad 21. Páginas dinámicas (XIV)

228
21.14. Asistente de eliminación de registros
Siguiendo con los asistentes encontramos al final el de Eliminar Registro .
Para utilizar el asistente de Dreamweaver para crear páginas de eliminación de registros deberás crear una
página especial que se dedique única y exclusivamente a eliminar el registro.
Para ello tendremos una primera página donde el usuario seleccionará el registro a borrar y dará la orden de
borrado; esta página enlazará con la página de borrado pasándole el identificativo del registro a borrar, y la
página de borrado mostrará los datos del registro a borrar y pedirá confirmación al usuario.
Con lo cual deberemos seguir este guión:
 La primera página deberá tener un enlace a la página de borrado de la forma:
borrar.php?id=99
Donde borrar.php será la página de borrado,

id el nombre del parámetro que contiene el valor de clave del registro a borrar,
y 99 es el valor de la clave del registro a borrar (en este caso queremos borrar el registro cuya clave
sea 99).
 En la página borrar.php deberás:

1. Crear un recordset que muestre la información del elemento cuya clave se ha pasado como
parámetro para que pueda ser verificado.
Para ello deberás utilizar un juego de registros filtrado por el campo clave principal y el valor
recibido como parámetro.

2. En la misma página añadiremos un formulario con un campo oculto y un botón de tipo
Submit que permita al usuario confirmar el borrado y reenvíe a la misma página de borrado.
Al campo oculto le deberemos asociar el campo clave principal del registro que se muestra,
puedes hacerlo pulsando el botón que aparece al lado de su propiedad Valor:
Deberás recordar el nombre que le das a este control de formulario porque es el que
utilizaremos para borrar el registro.

1. Luego podremos incluir el código para borrar el registro.
Haz clic en el botón Eliminar Registro en la barra de Datos, y rellena el siguiente cuadro
de diálogo:
229
La primera opción deberás dejarla en Valor de clave principal. Puedes utilizar el resto de
opciones para crear otros tipos de eliminaciones más complejas, aunque este método sea el
más utilizado.
Luego selecciona la Conexión, la Tabla donde se encuentra el registro a borrar y su Columna
de clave principal.
Por último le deberemos indicar cómo debe acceder al valor que le dará el valor de la clave
principal del registro que tiene que eliminar, indica que lo hacemos por Parámetro URL y
escribe el nombre del campo oculto del formulario que acabas de crear (es el que le pasa el
valor).
Finalmente puedes elegir a qué página redireccionar cuando se realice el borrado.
Pulsa Aceptar y habrás acabado.
Unidad 21. Páginas dinámicas (XV)

21.15. Juegos de registros avanzados
Por último en este apartado vamos a ver un modo avanzado de crear juegos de registros.
Si en el cuadro de diálogo Juegos de registros que hemos visto hasta ahora haces clic en el botón
Avanzado... verás estas otras opciones:
230
En este cuadro de diálogo puedes crear juegos de registros mucho más complejos.
El principio del cuadro es igual que la versión simple, deberás introducir un Nombre para el juego de
registros y asignarle una Conexión.
Luego deberemos introducir una sentencia SQL que indicará qué registros se van a mostrar.
Mediante las opciones y botones que veremos ahora podremos crear sentencias bastante completas, pero si
quieres aprender más sobre este lenguaje puedes visitar el curso de SQL que se encuentra en nuestra página
web.
De momento explicaremos las opciones para que puedas manejarte mejor con el programa.
Detrás de la palabra SELECT se escriben las columnas que queremos que aparezcan en el resultado, por eso
para añadir más campos a la lista sólo tienes que seleccionar el campo de la lista Elementos de base de
datos, y pulsar el botón SELECT, el campo se añadirá a la sentencia y por lo tanto aparecerá en el recordset.
En la cláusula FROM se especifica el nombre de la tabla o tablas desde donde se saca la información. En
realidad SQL nos permite cruzar distintas tablas, relacionarlas, etc...
La cláusula WHERE sirve para incluir condiciones, para filtrar los registros. El botón WHERE te ayudará a
establecer esas condiciones, una vez hayas añadido el campo con este botón en el cuadro de texto SQL
deberás completar la condición utilizando los operadores de comparación adecuados como <, >, !=.
Utiliza la zona de Variables: para insertar parámetros que podrás recibir mediante el URL, para ello haz clic
en el botón .
231
Aquí deberás establecer el Nombre de la variable, su Valor predeterminado y el Valor de tiempo de
ejecución.
Ten en cuenta que para asociar estas variables a parámetros pasados por URL deberás escribirlas en el
campo Valor de tiempo de ejecución de la siguiente forma:
$_GET['nombre_parametro']
Donde nombre_parametro es el nombre del parámetro incluido en el URL.
Finalmente puedes utilizar el botón ORDER BY para crear ordenaciones por los campos seleccionados en el
listado de la izquierda.
En la imagen más arriba puedes encontrar un ejemplo de una sentencia SQL que te podrá aclarar estos
conceptos. Esta sentencia obtiene el autor, título y editorial de la tabla Libros filtrando los registros cuyo id
sea igual al que se haya recibido como parámetro de URL, y si hubiesen varios registros los ordenaría
alfabéticamente por autor y dentro de cada autor por título.
Para practicar la creación de juegos de registros avanzados realiza el Ejercicio Paso a Paso de Utilizar
sentencia SQL.
En el tema siguiente seguiremos practicando todos los conceptos vistos en este tema completando el sitio de
Blog.
Unidad 22. Cómo crear un Blog (I)

22.1. Introducción
Hasta ahora hemos visto cómo empezar a manejarnos con páginas dinámicas de acceso a datos utilizando
PHP y un servidor MySQL.
232
La complejidad de las páginas que creemos dependerá de la profundidad de nuestros conocimientos de
ambas tecnologías, por lo que muchas veces (sobre todo al principio) nos será difícil alcanzar algunos
objetivos que nos propongamos.
Vamos a dedicar este tema a la elaboración de un proyecto algo más complejo en el que deberemos emplear
estas técnicas de un modo más completo.
Para ello crearemos un blog o bitácora y utilizaremos herramientas y procedimientos que hemos visto hasta
ahora. No te pierdas este tema, introduciremos algunos conceptos que quizá te resulten interesantes.
Un blog es una página web donde se introduce contenido periódicamente sobre un tema en particular.
Su contenido suele organizarse en entradas que se van añadiendo con una asiduidad relativa.
Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los
registrados) pueden dejar su opinión sobre la entrada o sobre el blog en general.
Para facilitar la navegación por la página estas entradas suelen estar organizadas por temas o categorías, de
modo que si te interesa poder leer todas las entradas relacionadas con un tema en concreto te sea mucho más
sencillo.
Todo blog deberá tener, del mismo modo, una parte privada desde donde el usuario dueño de la bitácora
pueda administrar y gestionar los contenidos del blog.
Desde el panel de administración, que debe estar protegido para que sólo tengan acceso aquellas personas
con privilegios suficientes, podremos añadir, modificar o eliminar entradas, comentarios y categorías.
De hecho, la función de esta parte privada es que puedas actualizar el contenido sin necesidad de tener que
recurrir a la interfaz de phpMyAdmin para insertar nuevos registros como vimos en el tema anterior.
El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque podríamos no
terminar nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una estructura cerrada que
cumpla los requisitos mínimos que un blog necesita.
El aspecto y funcionalidades finales están en tus manos, puedes añadir tantas cosas como quieras.
Así que vamos a empezar...
Unidad 22. Cómo crear un Blog (II)

22.2. Estructura de datos
Nuestro primer paso para la creación de un blog será crear la estructura de datos que contendrá la
información de las entradas y otros elementos del sitio.
En un sitio simple deberemos crear como mínimo 4 tablas: categorias, entradas, comentarios y usuarios.
 En la tabla categorías deberemos listar el nombre de las categorías en las que se dividen las entradas.
233
 En la tabla entradas deberemos almacenar el texto de la entrada con su título y fecha. Obviamente aquí
deberemos hacer referencia a qué categoría pertenece la entrada. En un blog más complejo podríamos
incluso almacenar qué integrante de la tabla de usuarios creó la entrada...
 En la tabla comentarios deberemos almacenar el texto del comentario junto con la información del autor,
como su nombre y correo electrónico, por ejemplo. Con conocimientos más profundos de PHP podríamos
guardar hasta su dirección IP.
 Finalmente en la tabla usuarios guardaremos el nombre y contraseña de los usuarios que tendrán acceso a la
edición del blog. Más adelante verás que incluso se podrían establecer niveles de privilegios entre ellos.
El punto en cuestión en este caso es el hecho de que en la forma más simplificada las tres primeras tablas se
encuentran relacionadas del siguiente modo:
Como puedes ver en la imagen en la tabla entradas existe un campo que apunta al ID de categorías, y del
mismo modo en la tabla comentarios tenemos que tener un campo que apunte a la entrada a la que pertenece
dicho comentario.
El problema nos surge, por ejemplo, cuando insertemos una página que nos ayude a eliminar entradas. ¿Qué
hacemos con los comentarios asociados a ella? ¿Deberemos crear una página más para que cuando se borre
una entrada también lo hagan sus comentarios relacionados? ¿Y repetirlo para las categorías y sus entradas?
No va a hacer falta.
Podremos utilizar una característica de la definición de la base de datos que existe en MySQL y en otros
sistemas gestores de bases de datos, el borrado y actualización en cascada.
Para poder utilizar esta característica, debemos de utilizar InnoDB como Motor de almacenamiento. Esta
opción la encontramos al definir los campos de la tabla, y por defecto está seleccionado MyISAM.
Desde el entorno de phpMyAdmin podremos definir esta característica en la vista de relaciones.
Podrás encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla que emplee InnoDB como
motor de almacenamiento:
234
Haz clic sobre él y verás una nueva ventana como ésta:
Desde aquí podremos especificar las relaciones que tiene la tabla con las demás tablas de la base de datos y
qué hacer cuando un elemento relacionado se borra o modifica.
Fíjate que en el ejemplo solamente los campos Id e Id_Categoría son susceptibles de esta opción. Eso es
debido a que hemos definido ambos como índices, el primero por ser clave primaria y el segundo porque así
lo indicamos en el momento de su creación utilizando el botón Índice o seleccionado la opción Index del
desplegable Índice.
El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado podemos
asignarle una relación con otro campo indexado de otra tabla (en el ejemplo Id_Categoria está relacionado
con el campo Id de la tabla categorias).
Deberemos decirle a phpMyAdmin qué hacer cuando se borre un elemento en la tabla relacionada categorias
(ON DELETE) o cuando se modifique el valor de clave de un elemento (ON UPDATE).
La opción que nos interesa en este caso es CASCADE que actúa aplicando los cambios en cascada. Esto es,
si borramos un elemento en la tabla categorias, se borrarán todos los registros en la tabla entradas que tengan
el mismo ID en el campo Id_Categoria.
En el caso de que modificásemos el ID en la tabla categorias también se actualizaría en todos los registros de
entradas con el mismo Id_Categoria si tenemos indicado ON UPDATE CASCADE.
Piensa que esa tabla podría estar relacionada con otra. Por tanto, al actualizar o borrar esta en cascada,
pasaría lo mismo con la tabla relacionada, y así sucesivamente.

235
Para practicar la creación de índices y relaciones realiza el Ejercicio Paso a Paso Estructura de Datos de
un Blog.
Unidad 22. Cómo crear un Blog (III)

22.3. Interfaz pública
Una vez creada la estructura podemos empezar a crear las páginas que mostrarán la información almacenada
en ella.
En este caso, los pasos a seguir serán muy parecidos a los que vimos en el tema anterior.
En principio, la página más importante será el índice. Allí deberemos mostrar un listado de un número
determinado de entradas.
Esto, como ya hemos visto, es muy fácil de conseguir, aunque ahora es posible que necesitemos mostrar
mucha más información.
Veamos un ejemplo de entrada:
Como puedes ver, incluimos el título, texto y fecha de la entrada. Eso es muy sencillo porque pertenece todo
a una misma tabla.
Pero deberemos incluir también un recuento de los comentarios asociados a esa entrada y el nombre de la
categoría a la que pertenece.
¿Cómo lograremos esto? Tendremos que utilizar sentencias de SQL avanzadas.
En los ejercicios paso a paso encontrarás la sentencia que te servirá para este ejemplo en particular. Podrás
variarla un poco en función de tus necesidades, pero te volvemos a repetir que si quieres crear juegos de
registros más complejos deberás aprender SQL, llegados a este punto no te será muy complicado.
236

También será necesaria una página que muestre las entradas filtradas por categoría. Ten en cuenta que
nuestro visitante querrá seguramente ver aquellas entradas pertenecientes a un tema en particular. De hecho
para eso hemos creado el menú de salto desplegable y los enlaces en cada una de las entradas.
Esta página deberá ser prácticamente igual que el índice, por lo que la sentencia SQL será prácticamente la
misma.
Finalmente deberemos incluir una página que muestre los comentarios de cada entrada en particular y que a
su vez permita añadir nuevos.
Esta tarea no es muy complicada porque simplemente deberemos pasarle un parámetro que indique el ID de
la entrada y mostrar los comentarios asociados a ella.
Puedes utilizar el asistente Insertar registros para crear el formulario de entrada de comentarios.
Para practicar la creación de la interfaz pública realiza el Ejercicio Paso a Paso de Interfaz pública.
Unidad 22. Cómo crear un Blog (IV)

22.4. Interfaz privada
Ahora es cuando viene la parte más laboriosa, pero que tampoco es muy complicada.
Deberemos crear la parte de administración del sitio.
Cuando tenemos un blog es mucho más cómodo poder acceder a la información y poder modificarla y
eliminarla a través de una interfaz web.
Resultaría más engorroso tener que entrar cada vez a la base de datos del servidor para insertar una nueva
entrada o modificar las existentes.
Además, crear nosotros mismos las páginas de administración nos da la libertad de crear las opciones que
queramos y de la forma en que nos sea más cómoda.
Así que nuestro primer paso será crear un índice de administración que nos muestre las opciones a las que
podemos acceder:
237
En nuestro caso hemos decidido crear el menú más sencillo posible, incluye dos grupos: la creación de
nuevos elementos y la modificación (o borrado) de los ya existentes.
Para practicar realiza el Ejercicio Paso a Paso de Creación de un Menú de Administración.
Unidad 22. Cómo crear un Blog (V)

22.5. Insertar nuevos elementos
Lo más sencillo de realizar será crear las dos páginas que nos ayudarán a crear registros.
Crear un formulario de nueva categoría sólo nos obligaría a insertar un nuevo nombre de categoría para
crear un nuevo registro.
El campo Id de la tabla, al ser autonumérico, no deberá aparecer en el formulario porque se rellenará

automáticamente.
Un poco más complicado será el formulario de creación de entradas.
Veamos un ejemplo:
238
En principio los campos de entrada serán tal cual los que nos ofrece el asistente Insertar registro.
Deberemos tener cuidado en que el campo Fecha: se envíe como de tipo fecha.
La dificultad la encontraremos en el desplegable Categoría:.
Deberemos cargar un recordset a parte donde sacaremos el listado de categorías con sus Id correspondientes.
Deberemos editar el campo desplegable de forma que el valor que se guarde sea el valor del Id, mientras
muestra el nombre de la categoría.
Para practicar realiza el Ejercicio Paso a Paso de Inserción de elementos.
Unidad 22. Cómo crear un Blog (VI)

22.6. Listado de elementos
Luego deberemos crear las páginas que se ocuparán de modificar los elementos del blog, ya sean categorías,
entradas o comentarios.
Esta parte deberemos planificarla adecuadamente para evitar crear páginas redundantes.
239
Lo más sencillo es crear una página que muestre un listado de los elementos que se encuentran en la base de
datos con enlaces creados para eliminar o modificar el registro que prefieras:
De esta forma el trabajo se reducirá a crear un listado completo de los registros de las tablas y crear enlaces
pasando como parámetro el ID del registro.
Este enlace irá dirigido a la página con la función de borrar o modificar (según cuál elijas) donde se recogerá
el parámetro de ID que utilizaremos para filtrar el recordset.
Quizás la página más complicada, debido a su extensión, sea la que deba mostrar el listado de comentarios.
Para ella, la forma más práctica sería poder localizar la entrada donde se encuentra el comentario y luego
mostrar el listado completo de los comentarios de esa entrada en concreto.
Puedes crear dos páginas para ello, aunque si lo resumimos en una única, la estructura del sitio se
beneficiará al quedar más claro qué hace cada página.
Nota: Puedes incluir campos de búsqueda como hicimos en el ejercicio de Librería del tema anterior.
Bastará con que apliques los mismos procedimientos.
Para practicar realiza el Ejercicio Paso a Paso de Listado de elementos.
Unidad 22. Cómo crear un Blog (VII)

22.7. Modificación de elementos
Las páginas de modificación de elementos deberán recoger el parámetro que envíe el listado.
De este modo, filtraremos el recordset y podremos mostrar la información de la entrada, categoría o

comentario que queramos modificar.
Es aconsejable que muestres el contenido del elemento para que antes de modificarlo tengas una vista total
de él y veas mejor qué quieres hacer en él.
240

El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no encontrarás muchas más
complicaciones.
De nuevo en el caso de la página de modificación de entrada deberemos tener especial cuidado en enviar la
fecha como tal y de mostrar los nombres de categoría en un desplegable:
Sigue con el Ejercicio Paso a Paso de Modificación de elementos.
22.8. Eliminación de elementos

Para terminar con las páginas de administración deberemos crear las páginas que recogerán el parámetro del
listado y eliminarán el elemento.
En este caso es casi indispensable que muestres el contenido del registro junto con un botón de Eliminar.
De esta forma le estaremos pidiendo confirmación al usuario y nos aseguraremos de que el registro que
estamos a punto de borrar es el que hay que borrar.
Ningún programa debería de tener un botón que borre registros sin pedir confirmación al usuario.
Nota: Sigue los pasos que explicamos en el tema anterior y no tendrás ningún problema.
Practica realizando el Ejercicio Paso a Paso de Eliminación de elementos.
Unidad 22. Cómo crear un Blog (VIII)

22.9. Restringir acceso
Como has visto hemos creado dos zonas completamente independientes en nuestro sitio: la interfaz pública
donde mostramos el contenido del blog, y la interfaz privada desde donde podemos acceder a las opciones
de administración de la base de datos.
Naturalmente, queremos que la parte privada no sea accesible por cualquiera. Únicamente nosotros y
aquellas personas autorizadas deberán poder ver las páginas de administración que hemos creado.
Es por eso que en el apartado de Estructura de datos creamos la tabla usuarios.
241
En el panel Insertar Datos encontramos la opción Autenticación de usuarios que aún no hemos utilizado:
Podemos utilizar estas páginas para crear niveles de seguridad dentro de nuestro sitio.
Restringiendo la visualización de ciertas páginas a usuarios que almacenaremos en nuestra base de datos y
que necesitarán introducir una contraseña para verificar su identidad.
El primer paso será crear una página de acceso en la que requeriremos que el usuario introduzca su nombre
y contraseña para que podamos validarla.
Para ello deberemos crear un formulario en el que colocaremos dos campos, uno para el nombre y otro para
la contraseña.
Crea un botón que active el formulario y selecciona la opción Conectar a usuario en el desplegable de la
imagen.
Se abrirá este cuadro de diálogo:
Aquí deberemos establecer la configuración de conexión a la zona privada.
242
 Deberemos indicar en la opción Obtener entrada de formulario el nombre que tiene el formulario que
hemos creado.
 En el Campo Nombre de usuario deberemos indicar cuál de las dos cajas de texto del formulario
contendrá el Nombre de usuario.
 En el Campo Contraseña seleccionaremos la caja de texto que contendrá la Contraseña.
Luego estableceremos las opciones para la comunicación con la base de datos.
 Deberemos indicar la Conexión y Tabla que vamos a utilizar para validar la entrada del usuario.
 En Columna Nombre de usuario indica cuál es el nombre del campo de la tabla que guarda los
nombres de usuario.
 En Columna Contraseña selecciona el campo que guarda en la tabla las contraseñas.
En la siguiente sección deberás establecer a qué página redirigirás si el usuario y contraseña son correctos
rellenando el campo Si la conexión es correcta, ir a:.
En Si falla la conexión, ir a escribirás la URL de la página a la que se deberá redirigir si la entrada fue
incorrecta. Sería por ejemplo una página de error.
Marca la casilla Ir a URL anterior (si existe) si en ambos casos la redirección es a la misma página.
Finalmente podrás escoger entre utilizar diferentes niveles de acceso o no.
Para ello deberás seleccionar una de las dos opciones en el cuadro Restringir acceso por:.
Ten en cuenta que si decides crear varios niveles deberás añadir un campo a la tabla para que almacene el
nivel de cada usuario. Este campo será el que indicaremos en el desplegable Obtener nivel de:.
Una vez hayas rellenado todos los datos, pulsa Aceptar y se añadirá el código necesario a la página.
Nota: El método que utiliza Dreamweaver para recordar la entrada del usuario hasta su desconexión utiliza
cookies. Así que si tu navegador o el navegador del usuario las tiene deshabilitadas esté código no podrá
realizar su función. Lo normal en el tratamiento de usuarios es emplear variables de sesión del servidor.
Unidad 22. Cómo crear un Blog (IX)

El siguiente paso será proteger cada una de las páginas que quieras que permanezcan bajo acceso privado.
Para ello sólo tendrás que abrir la página que quieras restringir y seleccionar la opción Restringir acceso a
página .
Verás el siguiente cuadro de diálogo:
243
Aquí deberás indicar si estás creando la restricción respecto a un mismo nivel o por el contrario estás usando
diferentes niveles de acceso.
Selecciona la opción que escogiste en el cuadro de diálogo de Conectar usuario, en el caso de que hubiesen
niveles, especifica el nivel que le quieres asignar a la página.
Deberás escribir una URL en Si se deniega el acceso, ir a: para que los usuarios que intenten acceder a esta
página sin haber hecho login sean redirigidos a otra ventana. Normalmente será a la ventana de inicio de
sesión.
También deberás incorporar algún enlace para que el usuario pueda desconectarse y salga del área privada
(cerrar sesión).
Para ello tienes dos opciones, al seleccionar la opción Desconectar Usuario verás el siguiente cuadro de
diálogo:
Puedes crear un enlace para que el usuario pulse sobre él para desconectarse. Para ello deberás seleccionar la
opción Vínculo en el que se ha hecho clic y seleccionar un vínculo existente en la página o seleccionar la
opción Crear nuevo vínculo: "Desconectar" para que se añada automáticamente el vínculo.
O también puedes hacer que la página sobre la que estás aplicando la opción sea una página de desconexión.
De esta manera cuando la visites te desconectará automáticamente.
244
Utiliza la opción Cargarse la página si estás en una página de desconexión.
Necesitarás crear un enlace a esta página y que un usuario lo siga para desconectarse.
Finalmente en el campo Al terminar, ir a: deberás introducir una URL a la cual se redirigirá al usuario una
vez se haya desconectado. Normalmente una URL no restringida, como el index.
Practica estos conceptos realizando el Ejercicio Paso a Paso de Accesos Restringidos.
Puedes crear una página para dar de alta nuevos usuarios para hacer crecer el número de escritores en tu
blog.
Para ello necesitarás introducir un formulario de inserción de registros que cree un nuevo registro en la tabla
usuarios.
Puedes utilizar la opción Comprobar nuevo nombre de usuario para que se chequee antes de guardar si el
usuario ya existe con ese nombre.
Lo deberás indicar en este cuadro de diálogo:
Selecciona el campo del formulario que corresponde con el nombre de usuario.
Y elige una URL a la que redirigir si el nombre ya está ocupado.
Ten en cuenta que si creas diferentes niveles de acceso puedes tener varios escritores que sólo puedan crear
nuevas entradas, mientras que el acceso al resto de páginas de administración puede estar permitido para una
única persona.
Unidad 23. XML y RSS (I)

23.1. Introducción
245
RSS son archivos que contienen información de una página web con las últimas actualizaciones que se han
hecho en ella. Este tipo de archivos es muy útil para cualquier sitio de noticias, foros, weblogs o página que
emita contenido de forma continuada.
Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho más flexible
que HTML.
Este sistema tiene un objetivo muy sencillo, el de organizar información para su almacenamiento y
distribución. De hecho, la última versión de HTML es XHTML, que no es más que HTML pero siguiendo
fielmente la estructura XML (etiquetas bien anidadas, cerradas, en minúsculas, atributos siempre entre
comillas dobles...).
Un ejemplo muy claro y básico de lo que sería un archivo XML es el siguiente:
<biblioteca>
<libro>
<titulo>Las 64 casillas</titulo>
<autor>Pablo Alvarez Castano</autor>
<editorial>Paidotribo Editorial</editorial>
<isbn>848019815X</isbn>
</libro>
<libro>
<titulo>Periodismo iconográfico</titulo>
<autor>Gonzalo Peltze</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432128082</isbn>
</libro>
<libro>
<titulo>Educación personalizada</titulo>
<autor>Víctor García Hoz</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432122882</isbn>
</libro>
<libro>
<titulo>Nuestro universo</titulo>
<autor>John R Gribbin</autor>
<editorial>Ediciones B</editorial>
<isbn>8466605657</isbn>
</libro>
</biblioteca>
En este ejemplo hemos creado un archivo en la que está almacenada la información de nuestra biblioteca.
Observa cómo las etiquetas que conforman el archivo no son más que identificadores que hemos creado para
este fin.
La finalidad de XML y RSS consiste en poder compartir información con el resto del mundo de una forma
rápida, sencilla y adaptable.
La organización de este tipo de información suele ser muy parecida de un sitio a otro.
Utilizaremos Dreamweaver para incluir fácilmente contenido de un sitio externo en nuestras páginas.
Es necesario que el servidor de pruebas soporte el manejo de este tipo de archivos para poder incluir este
tipo de información en nuestras páginas. Para eso debemos de activar una de sus extensiones (php_xls)

246
Para aprender a configurar el servidor de pruebas realiza el Ejercicio Paso a Paso de Preparando el
Servidor de Pruebas.
Unidad 23. XML y RSS (II)

23.2. Importar datos de un archivo externo
Para poder mostrar los datos almacenados en un archivo XML o RSS externo deberemos crear un archivo
XSLT.
Los archivos XSLT transforman y formatean la información para que pueda ser visualizada correctamente
en un navegador.
El primer paso para importar la información de un archivo será abrir un nuevo documento (Archivo →
Nuevo).
Puedes elegir entre crear un fragmento de archivo (que incluiremos más tarde en otro), o directamente crear
una página completa que contenga información sobre un archivo externo.
Normalmente nos será más útil crear fragmentos, pues luego son más fáciles de adaptar al resto de las
páginas.
Se abrirá el siguiente cuadro de diálogo Buscar origen XML:

247
Aquí deberemos indicar la fuente XML de la que queramos sacar los datos.
Como ves en la imagen, tienes dos posibilidades. Una de ellas es tomar el archivo XML o RSS directamente
del mismo sitio donde se encuentra la página.
La segunda opción toma el archivo de una URL en Internet. En este caso deberás asegurarte de cuando en
cuando que sigue vigente y no ha sido cambiado de lugar.
Cuando aceptemos el cuadro de diálogo verás que en el panel Vinculaciones (Ctrl + F10) aparece la
estructura del archivo:
Habitualmente los archivos liberados por los diferentes sitios en Internet suelen tener una estructura muy
similar, por lo que siempre tienen al principio del canal (así es como llaman al archivo liberado, channel en
inglés) una breve descripción de su sitio.
En este caso puedes ver como pende del elemento channel un título (title), un enlace (link), una descripción
y el lenguaje y a continuación el contenido propiamente dicho bajo el elemento item.
Nuestra forma de actuar una vez hayamos declarado la fuente XML y seamos capaces de ver su contenido
en el panel Vinculaciones será muy parecida a como lo hacíamos cuando creábamos un juego de registros de
una base de datos.
Simplemente tendremos que arrastrar el elemento que queremos que se muestre a la página y se visualizará.
248
Recuerda que para acceder a una visualización de la página puedes pulsar la tecla F12 o usar la Vista en
vivo.
Para comenzar a importar datos desde un archivo externo realiza el Ejercicio Paso a Paso de Importar
datos RSS.
Unidad 23. XML y RSS (III)

23.3. Trabajar con elementos XML
Una vez hayamos insertado los elementos del archivo XML podremos tratarlos de forma similar a como lo
hacíamos en el tema anterior.
Para crear enlaces, lo haremos como con los juegos de registros. Podemos pulsar el icono que aparece
junto al campo Vínculo en el panel Propiedades y seleccionar Fuentes de datos en el cuadro de diálogo
Seleccionar archivo:
O podemos arrastrar los valores directamente sobre el código fuente de la página, desde el panel
Vinculaciones.
Para practicar realiza el Ejercicio Paso a Paso de Enlaces con elementos.

249

Cuando estemos en una página o fragmento XSLT, el panel Insertar nos permitirá utilizar las herramientas
para trabajar con XSLT:
El primer botón nos permitirá añadir Texto dinámico, esta opción actúa del mismo modo que si arrastramos
el elemento desde el panel Vinculaciones a la página.
Luego encontraremos elementos de bucle o repetición y condicionales.
Unidad 23. XML y RSS (IV)

23.4. Crear repeticiones
Para crear una repetición que recorra todos los registros existentes en un archivo RSS deberemos utilizar el
botón Repetir Región , que encontraremos en el panel Insertar grupo XSLT. Este grupo solo aparece
visible cuando trabajamos con páginas o regiones XSLT.
Simplemente selecciona los elementos a repetir y pulsa el botón.
250
Aquí deberás seleccionar el elemento sobre el cual quieres que se produzca la repetición.
En el caso del ejemplo que estamos siguiendo en estas imágenes deberemos seleccionar item, pues
querremos que se repitan todos los elementos title y description que se encuentren en item.
También podemos insertar filtros haciendo clic en la flecha que acompaña al texto Construir filtro:
251
Utiliza los botones que se encuentran en el cuadro de diálogo para añadir condiciones a la repetición.
En la imagen podemos ver que el filtro se realiza conforme al item, donde el título debe ser distinto (!=) a
"Wikipedia, la enciclopedia libre".
¿Qué significa esto? Estamos repitiendo una región y obviando aquel item que posea un título determinado.
Piensa que podemos querer evitar los items de una categoría, un rango de precios, el idioma, etc...
También sería posible filtrar para que sólo se muestren un número determinado de items. Para ello
utilizaremos position() que recupera la posición del elemento dentro del listado:
En este caso el filtro que hemos añadido hace que sólo se muestren los 5 primeros elementos.
252
Sencillo, ¿verdad?
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repetición de elementos.
Unidad 23. XML y RSS (V)

23.5. Ordenar elementos
Ordenar elementos en Dreamweaver no es muy sencillo.
Pero como es una tarea que realizaremos a menudo explicaremos rápidamente cómo conseguirlo.
Sólo es posible ordenar elementos que se encuentren dentro de una región repetida.
Por lo que deberemos buscar en la vista de Código la zona que se encarga de la repetición:
<xsl:for-each select="rss/channel/item[position() <= 5]">

<p>Título: <xsl:value-of select="title"/></p>
<p>Descripción: <xsl:value-of select="description"
disable-output-escaping="yes"/></p>
<hr />
</xsl:for-each>
Ahora sencillamente deberemos añadir una nueva línea debajo de la que se encarga de la repetición (
xsl:for-each).
De esta forma indicaremos que este bloque se debe ordenar:

<xsl:sort select="title" />
<hr />
</xsl:for-each>
En el atributo select deberemos indicar el nombre del campo sobre el cual se realizará la ordenación.
Luego podemos añadir otros atributos como:
 order: que puede tomar los valores ascending o descending. Por omisión se toma el valor ascending.
 data-type: que indica si el valor a ordenar es un texto (text) o un número (number). Por omisión se toma el
valor text.
 case-order: que indica si se deben tomar primero las mayúsculas (upper-first) o las minúsculas (lower-first).
Así el bloque anterior se podría haber escrito como:

<xsl:sort select="title" order="descending" data-type="text" case-order="lower-first"
/>
253
<hr />
</xsl:for-each>
Para practicar realiza el Ejercicio Paso a Paso de Ordenación de elementos.
Unidad 23. XML y RSS (VI)

23.6. Sentencias condicionales
Finalmente Dreamweaver nos ofrece la posibilidad de crear bloques condicionales para que se muestren
determinados elementos si se cumple una condición.
Podremos encontrar dos tipos diferentes:
 El condicional simple : que evalúa una condición, si ésta se cumple se muestra el contenido, en
caso contrario no se mostrará.
 El condicional múltiple : que evalúa una condición, si se cumple mostrará un contenido, en caso
contrario mostrará otro.
En ambos casos el cuadro de diálogo que se mostrará será el mismo:
En el cuadro de texto Prueba se deberá escribir la condición que se probará contra los elementos del archivo
XML para decidir si se muestran o no.
Las principales formas de condición que utilizarás son las siguientes:
 Condición de nodo: donde se prueba un nodo (o campo) del elemento. Por ejemplo, precio > 200.
 Condición de atributo: donde se prueba un atributo del elemento o de un nodo del elemento.
Ejemplos: @id = 8, para que el id del elemento sea 8, o coche/@color=rojo, para que el campo coche
del elemento tenga un atributo de color rojo.
 Condición de búsqueda: puedes buscar en un nodo o atributo utilizando la función contains(). Así
podrías escribir contains(nombre, 'la') y mostraría sólo aquellos elementos que tuviesen la cadena la
en su nombre.
Una vez introducida la condición simplemente pulsa Aceptar y la región condicional se creará.
En el caso de que utilicemos la condicional múltiple verás que se crea la siguiente estructura:
254
Unidad 23. XML y RSS (VII)
23.7. Insertar un fragmento XSLT
Una vez tenemos el archivo XSLT terminado y mostrando los datos que queremos mostrar podemos pasar a
insertarlo en cualquier página dinámica.
Hacerlo es muy sencillo, sólo tendrás que abrir un archivo PHP (en nuestro caso), colocar el punto de
inserción en el lugar que quieras que aparezca la información y hacer clic en el botón Transformación XSL
que encontramos en el panel Insertar, en la sección Datos:
En Archivo XSLT deberás indicar el archivo que deberá mostrarse (el archivo de tratamiento de XML que
hemos creado).
Automáticamente se mostrará en URI de XML la dirección del archivo que hemos utilizado para crear el
archivo XSLT.
Al aceptar el cuadro de diálogo se mostrará directamente el contenido del archivo XSLT en la página PHP.
Sólo tendrás que pulsar F12 o el botón Vista en vivo y tendrás una previsualización de cómo quedará el
archivo.
255

Observa que Dreamweaver ha añadido a nuestro sitio la carpeta includes/MM_XSLTransform/. En ella están
los archivos necesarios para realizar la transformación XSLT.
Para practicar realiza el Ejercicio Paso a Paso de Añadir XML a nuestra página.
Unidad 23. XML y RSS (VIII)

23.8. Paso de parámetros
Por último veremos una característica muy útil que posee Dreamweaver: el paso de parámetros.
Podemos utilizar variables en el archivo XSLT para configurarlas más tarde según la página dinámica que
vaya a mostrarla.
Por ejemplo, en un filtro de repetición podríamos indicar lo siguiente:
En este caso estaremos diciendo que queremos que se muestren tantos elementos como indique la variable
$numero.
A partir de este momento, cuando llamemos al archivo XSLT deberemos darle un valor a este parámetro
para que tenga un valor real.
Pero, ¿cómo hacerlo?, muy sencillo.
Cuando estamos creando la transformación XSL (ver apartado anterior) deberemos incluir un parámetro
haciendo clic en el botón
En Nombre deberemos especificar el nombre del parámetro (en el ejemplo numero) y en Valor
estableceremos un valor para dicho parámetro.
256
Aceptamos el cuadro de diálogo y listo.
Ahora podremos modificar el contenido del archivo XSLT según desde qué archivo PHP lo carguemos, pues
en cada archivo PHP podremos darle un valor diferente.
Para terminar realiza el Ejercicio Paso a Paso de Paso de parámetros.
Unidad 24. Acceso a datos con Spry (I)

24.1. Introducción
Dreamweaver nos permite acceder y tratar datos XML empleando su tecnología Spry.
Spry se compone de un conjunto de archivos codificados en JavaScript que se añadirán a tu proyecto desde
el momento en que empieces a utilizarlos. Como veremos más adelante, Dreamweaver te avisará de la
creación de una nueva carpeta en tu sitio que contendrá los archivos necesarios para la ejecución de las
funciones que vamos a ver a continuación.
Todos los comandos que vamos a utilizar son accesibles desde el menú Insertar → Spry o desde el panel
Insertar seleccionado Spry:
Al utilizar spry, Dreamweaver creará la carpeta SpryAssets en la raíz del sitio.
Unidad 24. Acceso a datos con Spry (II)

257
24.2. Conjunto de datos XML
Incluir un archivo XML en tu página web es muy sencillo, ni siquiera es necesario que ésta sea una página
dinámica de tipo PHP como llevamos viendo hasta ahora, una página básica en HTML te servirá.
Por eso, si nuestra página necesita sólo de unos pocos datos, podemos guardarlos en un archivo XML en vez
de recurrir a una base de datos.
Cuando hayas decidido dónde colocar la región que contendrá los datos importados del archivo XML
deberás hacer clic en Insertar → Spry → Conjunto de datos XML de Spry y se abrirá el siguiente cuadro de
diálogo:
Deberás rellenar este cuadro de diálogo para definir el modo en que accederemos y cargaremos el archivo
XML deseado.
El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de datos para poder
distinguirlo y diferenciarlo de otros posibles conjuntos de datos que queramos cargar.
En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro propio sitio o en una
dirección concreta de internet, en este último caso deberemos indicar la ruta completa (incluyendo http://...).
258
Una vez indicado el archivo XML podemos hacer clic en el botón Obtener esquema para ver el esquema
XML del archivo.
Selecciona el Elemento de fila, es decir la etiqueta XML que contiene el conjunto de datos que queremos
cargar, este paso se realizará tal cual como vimos en la unidad anterior. Una vez seleccionado haz clic en el
botón Vista previa para ver un listado con los primeros 20 elementos (de muestra) para asegurarte del
contenido del archivo.
Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento. Podemos hacerlo
haciendo clic sobre él en el listado de Columnas del conjunto de datos y seleccionando su tipo en el
desplegable Tipo de datos. Podrás elegir entre: Cadena (de texto), Número, Fecha o Vínculo de imagen.
Este cuadro de diálogo también te permitirá ordenar los elementos del conjunto respecto a una de sus
columnas en el momento de la carga. Para ello selecciona Ordenar y elige el orden Ascendente o
Descendente en Dirección.
Para eliminar las filas duplicadas marca la opción Distinguir al cargar.
Por último marca la opción Desactivar caché de datos XML si quieres que el contenido que se muestre en tu
página se refresque cada cierto tiempo, indica este intervalo en la opción Actualizar datos automáticamente.
En caso de que esta opción no se active los datos se cargarán una vez y sólo se actualizarán si se refresca la
página.
Cuando hayas terminado de configurar el cuadro de diálogo haz clic en Aceptar y los elementos listos para
utilizar se mostrarán en el panel Vinculaciones.
Unidad 24. Acceso a datos con Spry (III)

24.3. Crear una región de Spry
Para poder mostrar datos provenientes de un conjunto Spry será necesario crear una región Spry. Para ello
simplemente haz clic en Insertar → Spry → Región de Spry.
259
Verás el siguiente cuadro de diálogo:
Selecciona el conjunto de datos creado anteriormente en Conjunto de datos Spry. Luego decide si quieres
que se cree un Contenedor de tipo DIV o SPAN, ten en cuenta que un DIV es un elemento de tipo bloque,
por tanto contiene un salto de línea antes y después de él. Si lo que te interesa es insertar el contenido XML
en línea (por ejemplo dentro de un párrafo) selecciona el elemento de tipo SPAN.
En caso de que tuvieses algún elemento de la página seleccionado las opciones Ajustar selección y
Reemplazar selección se activarán para que puedas elegir si situar la región envolviendo el elemento
seleccionado o sustituirlo por el contenedor elegido.
En principio veremos únicamente la opción de Tipo Región, en próximos apartados veremos para qué nos
servirá el tipo Región de detalle.
Pulsa Aceptar y estarás listo para arrastrar elementos del panel Vinculaciones a tu página:
24.4. Repetición de elementos

En el apartado anterior vimos como insertar elementos del archivo XML, pero de ese modo sólo seremos
capaces de visualizar la primera fila de elementos.
Dreamweaver pone a nuestra disposición la opción de Repetición de Spry para poder crear repeticiones de
nuestro diseño para cada una de las filas que compongan el conjunto de datos. Para ello haz clic en Insertar
→ Spry → Repetición de Spry y verás el siguiente cuadro de diálogo:
260
Del mismo modo que antes indicaremos el tipo de Contenedor, el Conjunto de datos Spry y si queremos que
se inserte ajustando o reemplazando el elemento HTML seleccionado.
Puedes seleccionar Repetir o Repetir hijo dependiendo del tipo de repetición que quieras conseguir.
Seleccionando Repetir hijo harás que lo que se encuentre dentro de la región se repita para cada una de las
filas del archivo, (opción muy útil para las tablas y la repetición de elementos tr (fila de la tabla)).
Pulsa Aceptar y ahora los elementos que añadas se repetirán para cada una de las filas existentes en el
archivo XML.
Unidad 24. Acceso a datos con Spry (IV)

24.5. Listas de repetición
Cuando queremos crear un listado de elementos XML sin tener en cuenta el resto de información del archivo
podemos utilizar la opción Insertar lista de repetición para generar listados de este tipo:
 Brooklyn Follies
 Crepúsculo
 El Evangelio De Judas
 El Método: Al Descubierto La Sociedad Secreta De Los Maestros De La Seducción
 El Pintor De Batallas
 El Poder Del Ahora
 El Profesor
 El Viaje A La Felicidad: Las Nuevas Claves Científicas
 La Catedral Del Mar
 La Sombra Del Viento
 La Verdadera Historia Del Club Bilderberg
 Ligero De Equipaje: La Vida De Antonio Machado
 Matanzas En El Madrid Republicano: Paseos, Checas, Paracuellos...
 Miguel Duran: Del Cielo Al Abismo
 Milagro En Los Andes
 Milenio 3: El Libro
 Seda
 Travesuras De La Niña Mala
261
 Un Lugar Llamado Nada
 Yo, Maya Plisetskaya
Para ello simplemente haz clic en Insertar → Spry → Lista de Repetición de Spry y verás el siguiente
cuadro de diálogo:
Selecciona el tipo de listado que quieres generar en Etiqueta de contenedor. Puedes elegir entre UL (lista sin
ordenar), OL (lista ordenada), DL (lista de definición) o SELECT (lista desplegable).
En las dos primeras opciones el cuadro de diálogo permanecerá tal y como ves en la imagen.
Si seleccionas DL (lista de definición) o SELECT (lista desplegable) su aspecto variará un poco debido a las
diferentes opciones que admiten estas etiquetas:
DL (lista de definición): Consta de dos campos, Columna DT que contiene el nombre el nombre a definir,
y Columna DD que contiene la definición del campo anterior.
SELECT (lista desplegable): Consta de dos campos, Columna de etiquetas que contiene el nombre que se
muestra en el desplegable, y Columna Valor que contiene el valor que se pasa cuando se envía el formulario
al que pertenece el desplegable.
<option value="8433970925">Brooklyn Follies</option>
Unidad 24. Acceso a datos con Spry (V)

24.6. Mostrar Maestro - Detalle
En el cuadro de diálogo que acabamos de ver podemos marcar una última opción: Actualizar regiones de
detalle al hacer clic en la fila.
De esta forma podremos activar una opción que dejamos atrás en apartados anteriores.
262
Recuerda que cuando vimos la opción de Insertar región de Spry podíamos incluir una región de Tipo
Región de detalle:
Combinando esta región con una tabla de datos Spry con la opción Actualizar regiones de detalle al hacer
clic en la fila activada podremos provocar lo siguiente: Al hacer clic sobre una de las filas todos los campos
situados en la región Spry (Región de detalle) se actualizarán para mostrar la información relativa a la fila
seleccionada.
Esta opción es muy sencilla y vistosa, pues permite una interacción total con el usuario a la hora de mostrar
información en pantalla.
Unidad 25. AJAX y Spry Framework (I)

25.1. Introducción
Hasta ahora hemos visto dos tipos de lenguaje de programación en nuestra web:
 Por un lado JavaScript (comportamientos). Se ejecuta en el lado del cliente, es decir, en el propio
navegador de quien visita la web, sin tener que recargar la página. Esto dota de dinamismo a la
página, ya que empleando conocimientos más avanzados, podemos crear HTML, cambiar CSS...
pero requiere que todo esto haya sido enviado al cliente al cargar la página.
 Por otro lado, hemos visto PHP. Se envía una petición al servidor, el cual genera la página, muchas
veces conectándose a la base de datos. Cuando la página está creada en el servidor, se devuelve al
usuario, quien la ve en el navegador. Si el usuario quiere cambiar el contenido, por ejemplo al
paginar en un listado, ha de volver a enviar la página, que se tiene que volver a generar y ser devuelta
al usuario.
Combinando los scripts ejecutados en el cliente y en el servidor obtenemos AJAX. Lo que conseguimos con
esto es una comunicación asíncrona, pidiendo al servidor sólo los datos que el usuario necesita, sin recargar
la página, y usando JavaScript para actualizar solo las regiones afectadas.
Por ejemplo, imaginemos el típico carrito de compra. Cuando el usuario añade un artículo, debemos
"apuntarlo" en su lista de artículos del servidor. Sin AJAX habría que enviar toda la página, volver a crearla
y traerla de vuelta. En cambio, con AJAX, sólo enviamos el ID del artículo. El servidor lo procesa, y envía
el resultado a AJAX, que al recibirlo actualiza únicamente la vista del carrito del usuario, sin recargar toda la
página. Esto hace que el usuario perciba la página como una aplicación interactiva más que como una web.
263

Para incluir comportamientos y características de AJAX en nuestras páginas deberemos tener conocimientos
de JavaScript, XML y DOM (Document Object Model). Con Spry, utilizar AJAX se hace mucho más
simple y asequible.
Como hemos visto en la unidad anterior es posible incorporar información almacenada en archivos con
formato XML y manejarla dinámicamente sin la necesidad de refrescar la página a cada petición.
Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una perspectiva menos cómoda
pero mucho más potente, pues seremos capaces de manejar el contenido dinámico de una forma total y
siempre utilizando la librería Spry que nos proporciona Adobe.
Spry es una tecnología desarrollada y propietaria de Adobe, y es la que emplea Dreamweaver. Existen otras
opciones, como jQuery, muy empleada en la web.
Unidad 25. AJAX y Spry Framework (II)

25.2. Incluir Spry
En el tema anterior hemos visto como utilizar Spry desde los menús de Dreamweaver CS5. Ahora vamos a
ver también cómo utilizar Spry manualmente, desde el código. Es bastante sencillo, y además nos dará
mayor libertad.
Para utilizar Spry, necesitamos unas bibliotecas de Adobe, que se deberán de incluir en la página. Al crear
un Conjunto de datos de Spry desde el panel Insertar, estos archivos se incluyen directamente. Aunque
también podemos descargarlos desde la web de Adobe Labs. Además, incluye algunas demostraciones y la
documentación necesaria para utilizar Spry.
Sólo te interesarán dos archivos que se encuentran en la carpeta includes: SpryData.js y xpath.js. Al crearlos
con Dreamweaver, éste los guarda en la carpeta SpryAssets.
Al utilizarlos, Dreamweaver los llamará dentro del <head>:
<script src="SpryAssets/xpath.js" type="text/javascript"></script>

<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
Si optas por emplear Spry directamente desde el código fuente, no olvides incluir estas líneas en la cabecera
de la página.
Con esto referenciamos a los scripts y los incluimos en nuestra página. A partir de ese momento estaremos
listos para utilizar Spry.
Ten en cuenta que Spry únicamente utiliza JavaScript para su funcionamiento, por lo que las páginas donde
decidas incluir este tipo de comportamientos no tendrán por qué ser páginas dinámicas (aunque se
comporten como si lo fueran).
264
Como más adelante verás, Spry utiliza sus propias etiquetas para trabajar con la información almacenada en
el archivo XML.
Debido a esto es aconsejable indicar el espacio de nombre (una dirección de Internet que contiene la
especificación de las nuevas etiquetas que se van a utilizar) para que el archivo HTML, PHP, ASP... que
estemos utilizando sea correcto y se pueda valorar positivamente.
Para indicar el nombre de espacio o namespace deberemos añadir el siguiente atributo a la etiqueta html del
documento:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
Aquí encontramos un pequeño inconveniente. Si trabajamos con una página normal, Dreamweaver añadirá
esto automáticamente a la descripción de la etiqueta. Pero si nuestro documento está basado en plantillas, no
lo hará. Así que habremos de hacerlo, añadiendo el código interior a la etiqueta html de la plantilla. Aunque
esto supone que se muestre en todas las páginas, aunque sólo tengamos una con Spry.
La mayoría de los navegadores reproducen Spry sin problemas aunque no incluyamos el espacio de nombre,
debemos de incluirla para asegurarnos de que funcione en todos.
Unidad 25. AJAX y Spry Framework (III)

25.3. Importar datos
Como comentábamos antes, Spry es capaz de acceder a datos almacenados en archivos XML ubicados en el
servidor.
Para ello, Spry guarda los datos en un dataset (algo muy parecido a un juego de registros) que es lo que nos
permitirá trabajar con la información guardada de forma dinámica.
Tomemos como ejemplo un archivo XML con la siguiente estructura:
<?xml version="1.0" encoding="UTF-8"?>

<listado atributo="aaa" >
<elemento id="1">
<propiedad>valor_1</propiedad>
</elemento>
<elemento id="2">
</elemento>
<elemento id="3">
</elemento>
</listado>
Podemos crear un dataset desde el menú (o panel) Insertar → Spry → Conjunto de datos de Spry.
265
En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le asignamos un Nombre, y
seleccionamos la ubicación del archivo pulsando en Examinar. Seleccionamos el nodo o estructura que
queremos tomar (en la imagen elemento).
Aunque este diálogo tiene más opciones si pulsamos en Siguiente, las explicaremos más adelante. Pulsamos
Listo.
Ahora, encontraremos los datos accesibles a través del panel Vinculaciones.
Desde el punto de vista del código, lo que hemos hecho es bastante simple, basta con indicar la ruta del
archivo y su estructura:
<script type="text/javascript">
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento");
</script>
Como puedes ver ya hemos generado código JavaScript en la página.
Este bloque deberá colocarse después de haber incluido los dos archivos JS necesarios para que Spry
funcione correctamente. Esto lo habrá hecho Dreamweaver automáticamente si empleamos el asistente.
Lo que hacemos es declarar un objeto (escribiendo var al principio) con el nombre que queramos.
La estructura de la creación del objeto es siempre la misma, simplemente deberemos indicar donde se
encuentra el archivo XML (bien podría tratarse de una dirección absoluta del tipo
http://www.unsitio.com/carpeta/archivo.xml, si no estuviese en nuestro servidor), y el tipo de estructura que
tiene.
Unidad 25. AJAX y Spry Framework (IV)

La declaración que puedes ver la hemos basado en el ejemplo XML anterior.
En este caso la estructura del archivo responde a listado/elemento pues estamos listando las etiquetas que
forman el archivo separadas por barras (/).
Nuestro dataset almacenaría los siguientes registros:
266
@id propiedad
1 valor_1
2 valor_2
3 valor_3
Estos tres registros se corresponden con los tres items elemento que tenemos en el archivo XML.
Observa como hemos escrito la columna que se refiere al id del elemento con un símbolo de @, esta es la
forma en la que referenciaremos a los atributos existentes en las etiquetas.
Sin embargo, los registros almacenados en el dataset dependerán de la estructura que especifiquemos al
crearlo.
Imagina que para el mismo ejemplo hubiésemos creado el dataset eligiendo el elemento superior:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado");
</script>
Ahora los registros que se guardarían serían los siguientes:
@atributo
aaa
Esto es debido a que el elemento que tomaría para crear las filas que más tarde almacenará sólo aparece una
vez y tiene un sólo valor que podamos sacar: su atributo.
Así que recuerda que deberás especificar correctamente la estructura del archivo XML para lograr almacenar
en el dataset la información que te interesa.
Para practicar la creación de datasets realiza el Ejercicio Paso a Paso Crear un Dataset.
Unidad 25. AJAX y Spry Framework (V)

25.4. Definiendo regiones Spry
Una vez definido el dataset continuaremos creando la página como hemos visto hasta ahora.
Sólo deberemos crear una zona especial donde queramos mostrar datos almacenados en el dataset.
267
Para ello definiremos una región Spry. Esta región indicará que dentro de esta etiqueta se encontrarán
etiquetas especiales (propias de Spry) que nos permitirán incluir información y comportamientos dinámicos.
Para definir una región, no tenemos más que pulsar en el panel Insertar Spry.
En el diálogo que ya conocemos, indicamos el tipo de contenedor (div para bloque o span para elementos en
línea) y el dataset.
Realmente, el código generado es muy simple: basta con indicar a la etiqueta que formará la región el
dataset que utilizará con el atributo especial spry:region.
<div spry:region="miDataSet">
El contenido de la región de Spry va aquí
</div>
Las regiones tienen solamente una excepción, no se pueden declarar en una etiqueta que pertenezca al
siguiente listado:
COL TABLE
COLGROUP TBODY
FRAMESET TFOOT
HTML THEAD
IFRAME TITLE
STYLE TR
Lo cual no significa que estas etiquetas no puedan aparecer dentro de la región. Simplemente no podrás
utilizarlas para declararla.
Lo más sencillo es utilizar la etiqueta DIV si queremos crear una región pequeña o directamente sobre la
etiqueta BODY de la página si quieres incluir datos y comportamientos indiscriminadamente y te es difícil
establecer una región específica dentro de la página.
Unidad 25. AJAX y Spry Framework (VI)

25.5. Mostrar información
268
Una vez definida la región donde utilizaremos el dataset, ya estamos preparados para poder incluir la
información guardada en él.
Para ello, sólo tenemos que arrastrar los elementos que queramos empelar desde le panel Vinculaciones.
Podemos emplear la estructura que queramos, párrafos, tablas, etc...
Desde el código fuente, resulta muy sencillo introducir estos elementos. Basta con seguir la estructura
{nombreDataSet::nombrePropiedad} para las propiedades o {nombreDataSet::@nombreAtributo} para
los atributos.
En este ejemplo podrás ver cómo definimos la región Spry. Dentro de ella creamos una tabla que mostrará el
valor del atributo id del elemento y el valor de su hijo propiedad.
<div spry:region="miDataset">
<table border="0" cellpadding="5">
<tr>
<td>{@id} </td>
<td>{propiedad}</td>
</tr>
</table>
</div>
Para mostrarlo escribimos entre llaves el nombre del dataset seguido de ::, luego indicaremos el nombre de
la columna.
Recuerda que si queremos referirnos al valor de un atributo deberemos utilizar el símbolo @.
En este caso no es necesario indicar el nombre del DataSet antes de los elementos, porque esta región
contiene un único DataSet. Más delante veremos la posibilidad de incluir varios DataSet en una región.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear una Región con Información.
Unidad 25. AJAX y Spry Framework (VII)

25.6. Crear repeticiones
Igual que hacíamos en las páginas dinámicas, Spry nos permite la repetición de elementos para mostrar el
contenido completo del dataset y así poder visualizar todos los registros.
Para ello utilizaremos el atributo spry:repeat.
Este atributo repite la etiqueta en la que está colocado tantas veces como registros pueda encontrar en el
dataset.
269
De esta forma el siguiente bloque de código reproduciría un listado desordenado con tantos items como
registros existan en el archivo XML:
Su uso es igual que spry:region. Incluiremos la repetición dentro de la región. Podemos hacerlo desde el
panel Insertar Spry pulsando o directamente desde el código, lo que nos permite
asignarlo a más etiquetas, como vemos en este ejemplo:
<ul>
<li spry:repeat="miDataSet">{@id}, {propiedad}</li>
</ul>
</div>
Sencillo, ¿verdad?
También tenemos la posibilidad de utilizar spry:repeatchildren, que al contrario que el anterior no repite la
etiqueta en la que se encuentra, sino aquellas etiquetas que estén contenidas en ella.
Por ejemplo, podríamos conseguir el mismo resultado que en el código anterior escribiendo:
<ul spry:repeatchildren="miDataSet">
<li>{@id}, {propiedad}</li>
</ul>
</div>
Esto hará que los hijos de la etiqueta ul se repitan para cada registro. Por lo que también se creará un listado
con tantos items como elementos haya en el dataset.
Recuerda, que podíamos hacer esto desde el diseño, con la opción .
Para practicar realiza el Ejercicio Paso a Paso Crear repeticiones.
Unidad 25. AJAX y Spry Framework (VIII)

25.7. Ordenar registros
Cuando creamos repeticiones es probable que queremos que nuestros registros aparezcan ordenados.
Para ello tendremos dos opciones, ordenarlos desde un principio o añadir un comportamiento para que
cuando se produzca determinado evento los registros que se están mostrando en pantalla se ordenen
automáticamente. Por ejemplo, al pulsar un encabezado.
Crear comportamientos es muy sencillo. Spry es una librería JavaScript, así que podemos emplear sus
eventos. El evento más utilizado es el onclick al ser el que más interacción tiene con el usuario (como vimos
en el tema de Comportamientos avanzados).
Ordenar un listado utilizando un comportamiento es muy sencillo.
Bastará con utilizar el método sort:

270
<table>
<tr>
<td onclick="miDataSet.sort('@id');">ID</td>
<td onclick="miDataSet.sort('propiedad');">PROPIEDAD</td>
</tr>
<tr spry:repeat="miDataSet">
<td>{@id}</td>
<td>{propiedad}</td>
</tr>
</table>
</div>
Como puedes ver en el ejemplo, este código creará una tabla con un encabezado con las palabras ID y
PROPIEDAD.
El resto de filas serán repeticiones que mostrarán los diferentes registros del dataset.
Si hacemos clic en alguno de los encabezados, los registros se reordenarán para mostrarse ordenados por el
campo que se encuentra en el encabezado pulsado. A la celda le hemos añadido un comportamiento onclick
que ejecute sobre el dataset miDataSet el método sort ordenando por el campo entre paréntesis.
Es posible especificar en qué dirección se realizará la ordenación, para ello deberás indicarlo añadiendo un
nuevo parámetro:
miDataSet.sort('propiedad', 'ascendig')
miDataSet.sort('propiedad', 'descending')
miDataSet.sort('propiedad', 'toggle')
Al asociar este método a un comportamiento podemos provocar que los registros se ordenen
ascendentemente, descendentemente o utilizar la propiedad toggle para que cada vez que se provoque el
comportamiento cambie la ordenación de ascendente a descendente y viceversa.
Como hemos dicho también es posible provocar la ordenación al cargar el dataset, de esta forma al
visualizar los datos por primera vez aparecerán ordenados de la forma en que queramos y no hará falta
esperar a que se realice un comportamiento para ordenarlos.
Ordenar un dataset en la carga requiere que se especifique en el momento en que lo definimos.
Veamos un ejemplo:
<script type="text/javascript"> var miDataSet = new

Spry.Data.XMLDataSet("archivo.xml","listado/elemento",{sortOnLoad:"propiedad",
sortOrderOnLoad:"descending"}); </script>
Aquí, en el momento de la declaración del dataset indicamos por qué campo se debe de ordenar y en qué
sentido.
Podemos ordenar por varios campos, separándolo por /. Por ejemplo sortOnLoad:propiead/@atributo.
271
La ordenación en algunos momentos puede crearnos problemas si estamos visualizando campos que
contienen números o fechas. Por ejemplo como número, 9 es menor que 10. En cambio, como texto al
ordenar alfabéticamente, '10' va antes que '9'.
Para ello utilizaremos la declaración de los tipos de columnas:
<script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml",

"listado/elemento", {sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});
miDataSet.setColumnType("propiedad", "number"); </script>
De esta forma estamos indicando que la columna propiedad es de tipo numérico, también podríamos haber
escrito date si fuese de tipo fecha.
Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenará alfabéticamente.
Unidad 25. AJAX y Spry Framework (IX)

25.8. Condicionales
Es posible crear condiciones dentro de las áreas de repetición para decidir si los elementos se deberán
mostrar o no.
Para ello nos podremos valer de diferentes métodos.
El primero que veremos será el atributo spry:test, que debe colocarse junto a un spry:repeat (o
spry:repeatchildren)
Este atributo nos permite crear una condición junto a la repetición que evaluará cada fila y la mostrará si
cumple la condición.
Por ejemplo:
<ul spry:repeatchildren="miDataSet" spry:test="{ds_RowID} <= 5;">
<li>{@id}, {propiedad}</li>
</ul>
</div>
Esta condición hará que la repetición se produzca mostrando los 6 primeros elementos (recuerda que el
conteo empieza en 0, por lo que el sexto elemento tendrá una RowID de 5). RowID, es un identificador que
asigna automáticamente Spry a cada fila o registro, comenzando por 0. No tiene nada que ver con el valor
del atributo @id.
Otra forma de crear condiciones es utilizando las expresiones regulares que comentamos en la unidad 12.
De esta forma podemos crear condiciones que evalúen el contenido de algún campo:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^An/) != -1;">
De esta forma mostraremos sólo aquellos registros cuyo campo propiedad empiece por An. != es el operador
lógico que indica distinto.
272
La función de JavaScript search evalúa la expresión regular indicada (que debe de ir delimitada por los
barras /). Si encuentra alguna coincidencia devuelve su posición (la posición 0 sería el primer carácter). Si
no la encuentra, devuelve -1.
Por tanto, si quisiésemos aquellos que no empiezan por An deberíamos escribir:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^An/) == -1;">
== es el operador lógico que indica igual.
E incluso podríamos igualar un campo para mostrar sólo aquél que tenga determinado valor. En este caso
hacemos la comparación directamente:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}' == 'valor';">
Luego podemos encontrar otros elementos de condición más complejos y flexibles.
Estos no necesitan estar al lado de un spry:repeat, pero sí dentro de una etiqueta afectada por él.
Unidad 25. AJAX y Spry Framework (X)

Podemos utilizar spry:if para decidir mostrar algo o no.
Podríamos mostrar, por ejemplo, sólo los registros que tengan un determinado atributo a 1:
<li spry:if="{@atributo} == 1;">{@id}, {propiedad}</li>
</ul>
</div>
De esta forma podemos decidir ya no sólo si mostrar registros o no, sino también ocultar algunas etiquetas,
dependiendo del valor concreto de cada uno.
Bastará con que pongas el atributo dentro de una etiqueta concreta y se evaluará para cada registro si
mostrarla o no (y con ella todo su contenido).
Otro elemento condicional que podremos utilizar, aún más completo es spry:choose.
Este condicional te permite evaluar diferentes casos y para cada uno tomar diferentes decisiones.
Por ejemplo:
<ul spry:repeatchildren="miDataSet" spry:choose="spry:choose">
<li spry:when="{ds_RowID}%2==0;" class="estilo1">{@id}, {propiedad}</li>
<li spry:when="{ds_RowID}%2!=0;" class="estilo2">{@id}, {propiedad}</li>
</ul>
</div>
273
Aquí indicamos que una región o una repetición será spry:choose. Esto indica que dentro encontraremos
elementos con spry:when, que sólo se mostrarán si ese cumple la condición.
En el ejemplo anterior calculamos el resto (%) de dividir entre 2 el id de la fila. Tenemos dos spry:when,
uno para cuando ese resto sea 0 y otro para cuando no. En cada caso, damos una clase distinta al elemento
de lista. Con eso logramos ir alternando la clase de las filas, creando un listado "cebra".
En el ejemplo anterior no puede suceder, pero ¿qué pasaría si ninguna condición se cumple? No se mostraría
ese elemento.
Podemos establecer la condición por defecto, es decir, cuando no se cumplan las anteriores, con
spry:default. En el ejemplo, podríamos cambiar la segunda condición para que sea cierta si no lo es la
primera.
<li spry:default="spry:default" class="estilo2">{@id}, {propiedad}</li>
Puedes practicar con el ejercicio paso a paso Crear condiciones.
Unidad 25. AJAX y Spry Framework (XI)

25.9. Filtros
Otra posibilidad a la hora de decidir qué registros mostrar o no son los filtros.
Un filtro se aplica sobre un dataset y descarta las filas que no lo cumpla.
Podrás aplicar un filtro dinámicamente y hacer que se aplique cuando se produzca determinado evento.
Al aplicar el filtro en un comportamiento deberemos establecer una función que contendrá las directrices
que se deberán seguir para decidir si una fila se muestra o no.
El modo en el que declararemos la aplicación de un filtro en un comportamiento dinámico es el siguiente:
<a href="#" onclick="miDataSet.filter(miFuncion);">Filtrar registros</a>
Esta función deberá ser declarada cuando se crea el dataset.
Por ejemplo:
miDataSet.setColumnType('@id', 'number');

var miFuncion = function(dataSet, row, rowNumber) {
if (row["propiedad"] == "valor") {
return row;
} else {
return null;
}
}

</script>
274
En este ejemplo podemos ver como se declara un dataset, y una de sus columnas se declara también de tipo
numérico.
Luego introducimos la función que llamaremos en el evento onclick.
onclick="miDataSet.filter(miFuncion);"
La estructura de esta función será siempre la misma. Simplemente deberás cambiar la condición que hará
que la fila se desprecie o no.
Lo único que deberás recordar es que para referenciar a una columna deberás utilizar la sintaxis
row["propiedad"].
El resto continuará completamente igual, e incluso podrás utilizar el método de búsqueda con expresiones
regulares que vimos en el apartado anterior:
var miFuncion = function(dataSet, row, rowNumber) {

if (row["propiedad"].search(^/An/) == -1) {
return row;
} else {
return null;
}
}
Cuando se produzca el evento se filtrarán los resultados.
Podrás volver a mostrar los datos originales llamando al método filter pero sin pasarle ninguna función:
<a href="#" onclick="miDataSet.filter();">Mostrar todos</a>
Esto regenerará el dataset y volverá a mostrar los registros sin filtrar.
Existe otra posibilidad que filtra el dataset destructivamente.
Es decir, el filtro que se aplica no puede ser revertido, y las filas despreciadas se borran del dataset.
Para ello deberás utilizar el método filterData de la siguiente forma:
<a href="#" onclick="miDataSet.filterData(miFuncion);">Filtrar sin vuelta atrás</a>
El funcionamiento de este filtro es exactamente igual al anterior.
También requiere de la misma función y actúa del mismo modo.
La única diferencia se encuentra en que no podrás recuperar las filas que haya quitado el filtro.
Esto puede ser útil, para agilizar el dataset, si es muy grande pero hay muchos datos que no se van a utilizar.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear un Filtro.
275
Unidad 25. AJAX y Spry Framework (XII)
25.10. Eliminar filas repetidas
Existe un último método para despreciar registros que se basa en la eliminación del dataset de los registros
repetidos.
Para ello utilizaremos el método distinct.
De nuevo, nos encontramos con que este método es destructivo, por lo que si lo ejecutas y eliminas las filas
repetidas no podrás volver a recuperarlas a no ser que cargues de nuevo el archivo XML.
Puedes utilizarlo de dos formas, dinámicamente (ligado a un comportamiento) o al crear el dataset.
Para utilizar este método con un comportamiento simplemente deberás escribir lo siguiente:
<a href="#" onclick="miDataSet.distinct();">Eliminar filas repetidas</a>
Al producirse el evento los registros repetidos se eliminan del dataset y no vuelven a aparecer.
Para cargar un dataset sin filas repetidas deberás indicarlo en la declaración del objeto dataset de este modo:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento",
{distinctOnLoad: true});
</script>
Sencillo, ¿verdad?
25.11. Actualizar la carga de un archivo XML

Hemos visto que una vez descargado el archivo XML, nuestras páginas trabajarán con el dataset cargado en
modo cliente sin tener que volver al servidor para cargar los datos cada vez.
Es posible que en determinados momentos nos sea necesario mostrar el contenido de un archivo XML que
contiene información que se actualiza en periodos muy breves.
A veces es interesante mostrar la información completamente actualizada al segundo.
Para ello deberemos utilizar el método loadInterval. Este método obliga a Spry a recargar el archivo XML
en el intervalo de tiempo que indiquemos.
La forma en la que deberemos declararlo será la siguiente:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento",
{useCache: false, loadInterval:
30000});
</script>
276
Como puedes ver en el ejemplo, establecemos que el intervalo de recarga sea de 30000 milisegundos (es
decir, 30 segundos).
También hemos añadido la propiedad useCache:false para evitar que el archivo XML se almacene en la
caché de la máquina y así obligarle a tener que volver a hacer una petición para volver a leer los datos del
archivo en su situación actual.
Este método también se puede utilizar ligado a un comportamiento, deberemos utilizar el método
startLoadInterval del siguiente modo:
<a href="#" onclick="miDataSet.startLoadInterval(30000);">Recargar XML</a>
Aunque de este modo también es recomendable mantener el uso de la propiedad useCache para evitar que se
tome la versión almacenada en caché.
El método stopLoadInterval detiene la recarga del archivo XML y deja el último que se cargó como archivo
de trabajo.
La forma de utilizarlo es igual al anterior:
<a href="#" onclick="miDataSet.stopLoadInterval();">Dejar de recargar XML</a>
Unidad 25. AJAX y Spry Framework (XIII)

25.12. Modo Maestro/Detalle
Una de las posibilidades que nos ofrece Spry es trabajar en modo maestro/detalle.
De esta forma podemos mostrar unas cuantas columnas por registro y mostrar el detalle completo si son
seleccionadas.
El uso de este método es muy aconsejable cuando la información almacenada para cada registro es muy
grande.
Para ello, además de definir una región spry:region deberemos reservar también una región para el detalle
utilizando spry:detailregion.
La forma de trabajo para este modo es muy similar a la que llevamos viendo, simplemente habrá que añadir
un nuevo elemento que hará las veces de región de detalle:
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>
</ul>
</div>

<div spry:detailregion="miDataSet">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
277
<p>{columna5}</p>
</div>
Como puedes ver hemos añadido una nueva región donde cargaremos la información completa del registro
actual, para ello hemos de generar un evento que ejecute el método que establece (set) cuál es el nuevo
registro (row) actual (current).
Lo hemos añadido en un evento onclick.
Para establecer un nuevo registro como el actual hemos utilizado el método setCurrentRow, que necesita de
un valor numérico el cual pasará como registro actual.
La región identificada como región de detalle (spry:detailregion) se actualizará automáticamente mostrando

el resto de campos que en la región maestro no se mostraban.
Recuerda que al insertar una nueva región Spry, podíamos que fuese una región de detalle.
25.13. Modo Maestro/Detalle con diferentes fuentes XML

Es posible que el detalle de un elemento no se encuentre en el mismo archivo XML, lo que nos obligaría a
cargar el XML del maestro junto con todos los archivos que contuviesen la información del detalle de cada
uno de los registros.
Esta operación se puede resolver fácilmente en Spry de la siguiente forma:
var miDataSetDetalle = new Spry.Data.XMLDataSet("{miDataSet::URL}",
"listado/detalle_elemento");
</script>
De esta forma deberemos incluir una nueva columna en el archivo XML del maestro indicando la URL del
archivo del detalle para cada uno de los registros.
Así cada vez que cambiemos de registro actual el dataset se recargará con el archivo que establece ese
campo y mostrará el detalle del registro que nos interesa.
Luego el código permanece prácticamente igual que el anterior, sólo que deberemos cambiar la sección
spry:detailregion para que apunte al dataset correspondiente:
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>
</ul>
</div>

<div spry:detailregion="miDataSetDetalle">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>
Unidad 25. AJAX y Spry Framework (XIV)

25.14. Spry y estilos CSS
278
Además de todo lo que hemos visto, Spry tiene un par de atributos que nos servirán de muchísima ayuda a la
hora de darle formato y resaltar zonas de la pantalla.
spry:hover permite aplicar a un elemento una clase CSS existente cuando el cursor esté encima.
Simplemente deberás indicar el nombre de la clase que anteriormente habrás definido y Spry hará el resto
por ti:
<style>
.resaltado { background-color: yellow; }
</style>
...
<li spry:hover="resaltado">{@id}, {propiedad}</li>
</ul>
</div>
Del mismo modo, spry:select actúa aplicando un estilo determinado cuando hacemos clic en la etiqueta
afectada por este atributo, la sintaxis es exactamente la misma.
Combinando ambos método podremos lograr una interfaz mucho más interactiva.
<style>
.resaltado { background-color: yellow; }
.seleccionado { color: red; }
</style>
...
<li spry:hover="resaltado" spry:select="seleccionado">{@id}, {propiedad}</li>
</ul>
</div>
Finalmente, Spry permite el uso de una propiedad más, spry:selectgroup.
El objetivo de este atributo es que cualquier elemento que use el mismo valor asignado a él deje de tomar la
clase aplicada cuando se haga clic sobre otro elemento con el mismo nombre de grupo.
El resto de elementos con valores diferentes en spry:selectgroup seguirán con la regla CSS aplicada hasta
que se haga clic en un elemento con el mismo nombre de grupo.
<lispry:hover="resaltado" spry:select="seleccionado" spry:selectgroup="miGrupo">{@id},

{propiedad}</li>
Unidad 25. AJAX y Spry Framework (XV)

25.15. Importar datos (II)
Volvamos ahora al asistente de Dreamweaver para importar datos.
Podemos crear un dataset desde el menú (o panel) Insertar → Spry → Conjunto de datos de Spry.
279
En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le asignamos un Nombre, y
seleccionamos la ubicación del archivo pulsando en Examinar. Seleccionamos el nodo o estructura que
queremos tomar (en la imagen elemento).
Esto ya lo conocemos. Pero encontramos más opciones que ya nos sonarán si pulsamos Siguiente:
 Lo primero que podemos elegir aquí es el tipo de dato de cada columna.

 Debajo, podemos ordenar el dataset por una columna, de forma ascendente o descendente.
280
 Encontramos también la opción de Filtrar filas duplicadas.
 Y por último las opciones de refresco: Desactivar caché y Actualizar automáticamente.
Vemos que desde aquí podemos configurar las opciones que hemos visto con un par de clics.
Además podemos generar el diseño de los datos, si pulsamos en Siguiente:
Elegir uno de estos diseños u opciones de visualización nos agilizará el trabajo. Podemos insertar tablas con
columnas reordenables y colores distintos para filas alternas, región maestro/detalle, etc.
Unidad 26. Spry y Formularios (I)

26.1. Introducción
En las anteriores unidades vimos cómo poder acceder a datos utilizando Spry. Aunque la funcionalidad de
esta librería no se limita únicamente a eso. Como hemos podido ver también éramos capaces de realizar
operaciones dinámicamente sin necesidad de realizar refrescos en la página.
281
En esta unidad y las posteriores veremos las posibilidades de Spry para crear comportamientos AJAX en
nuestro sitio.
Ahora veremos qué puede hacer Dreamweaver por nuestros formularios. Encontrarás las opciones que
utilizaremos bajo el menú Insertar → Spry o en la barra Insertar, pestaña Spry.
Como es habitual con Spry, Dreamweaver irá incluyendo archivos JavaScript a nuestro sitio, en la carpeta
SpryAssets, uno para cada tipo de control. Además, incluirá una hoja de estilo, para los estilos de los
distintos estados que veremos.
Unidad 26. Spry y Formularios (II)

26.2. Validación de campos de texto
282
La primera opción que veremos es la inserción de campos de textos dinámicos en nuestros formularios.
Utilizando la opción Insertar → Spry → Campo de texto de validación de Spry podremos insertar un campo
de texto que valide los valores que se introducen en él:
Número de teléfono:
Cuando insertamos este tipo de controles en nuestros formularios podremos ver lo siguiente en la vista de
Diseño:
El objeto de campo de texto es exactamente igual al que vimos en la unidad de formularios. Haciendo clic en
la etiqueta azul Campo de texto de Spry podrás ver las opciones de validación en el panel Propiedades:
Veamos las posibilidades que nos ofrece.
En el desplegable Tipo podemos seleccionar el tipo de valor que se va a introducir. En principio, Spry tiene
predefinidos bastantes tipos como teléfono, número de seguridad social, tarjetas de crédito, fechas, correos
electrónicos, etc... Solamente será necesario seleccionarlos y elegir el formato en el desplegable Formato.
De este modo la validación ya viene programada automáticamente y no es necesario añadir mucho más.
En el caso de que queramos añadir una validación que no existe en el desplegable Tipo deberemos
seleccionar Personalizado. Para validar la introducción deberemos, entonces, introducir un patrón contra el
que se comparará y se evaluará si es correcto o no. Para ello escribiremos en el campo Patrón una secuencia
de caracteres que imite el texto que buscamos, y marcamos la opción Aplicar patrón.
Por ejemplo, si queremos que se introduzca un número con 5 dígitos escribiremos 00000. Fácil, ¿verdad?
En cualquier caso podemos escribir en Sugerencia una ayuda para que el usuario sepa exactamente qué debe
escribir. Ten en cuenta que al validar un campo estamos obligando a que se escriba determinado tipo de
datos. Por lo tanto será necesario hacérselo saber de alguna forma.
El resto de opciones son muy sencillas. Valor min y Valor máx establecen un rango de valores al cual debe
pertenecer el valor introducido. Con Car min y Car máx podemos indicar cuantos caracteres mínimos y
máximos admite la caja de texto.
Activa la opción obligatorio si quieres que el campo no pueda dejarse en blanco.
Luego encontraremos las opciones de validación, es decir, cuando queremos que Spry compare lo que se ha
escrito y lo considere correcto o erróneo. El valor onSubmit estará siempre marcado por defecto, esto es,
cada vez que se envíe el formulario se comprobará que los datos introducidos son correctos.
283
Aunque también es posible añadir dos momentos más donde se evaluará el contenido. onBlur ejecuta la
evaluación cuando se abandona el cuadro de texto, y onChange se ejecuta cada vez que se escribe cualquier
carácter en la caja.
Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por ejemplo onChange puede resultar un
poco engorroso pues mostrará un error cada vez que escribamos hasta que se alcance el patrón correcto. De
todas formas te recomendamos que pruebes cada una de las opciones y te quedes con la que más se ajuste a
tus necesidades.
Unidad 26. Spry y Formularios (III)

26.3. Estados de validación
Una vez definido nuestro campo de validación deberemos configurar los mensajes de error que se mostrarán.
Dependiendo del tipo de control que utilicemos (como veremos más adelante) el tipo de error puede ser
diferente, pero su tratamiento es exactamente el mismo.
Veremos cómo tratarlos tomando como ejemplo la validación de campos de texto que acabamos de ver.
En el panel Propiedades podrás encontrar el desplegable Estados de vista previa:
Desde esta opción puedes pasar a la visualización de cada uno de los estados de error existentes, de cuando
es válido o del estado inicial:
En la imagen anterior, los estados corresponden a las vistas previas Inicial, Obligatorio, Formato no valido y
Válido respectivamente.
En cualquiera los casos erróneos podremos editar el mensaje de error, cambiar su apariencia mediante estilos
desde los paneles Propiedades y CSS e incluso colocarlos donde mejor nos convenga.
Recuerda que cada uno de los estados es independiente del resto, por lo que será necesario que edites cada
uno de ellos si quieres que se muestren de un modo personalizado.
26.4. Validación de campos desplegables

284
Otra de las opciones que nos proporciona Spry es la validación de controles desplegables, para ello
deberemos hacer clic en Insertar → Spry → Selección de validación de Spry. De este modo añadiremos un
control de lista desplegable tal y como vimos en la unidad de formularios.
La utilidad de esta herramienta es la posibilidad de controlar los valores que se seleccionan:
Selecciona un elemento: Seleccione un elemento válido.Ese elemento no puede ser seleccionado.
En este caso las opciones que se presentan al seleccionar el elemento Spry son las siguientes:
En este caso las opciones comunes son los Estados de vista previa y los de validación que son iguales a los
del campo de texto. Aunque en el caso de las listas desplegables es aconsejable usar el valor onChangue
para que se evalúe cada vez que se selecciona un valor, haciendo que se muestre el error nada más elegir un
elemento incorrecto.
Las opciones de validación tienen mucho que ver en este caso con el contenido de la lista de valores del
desplegable en sí:
Observa que si marcamos la opción de No permitir valores en blanco al seleccionar el valor2 (en la imagen)
se ejecutaría el mensaje de error Obligatorio.
En el caso de No permitir Valor no válido (-1, aunque puedes modificar el valor para que tome el que tú
quieras) al seleccionar -- elige una opción -- saltaría el error No válido, por tener asignado ese valor.
Unidad 26. Spry y Formularios (IV)

26.5. Grupo de opciones
Cuando tenemos que elegir una opción, en vez de una lista de selección podemos optar por un grupo de
botones de opción (o botones de radio). Al seleccionar no de ellos, se deselecciona el resto. para ello
deberemos hacer clic en Insertar → Spry → Grupo de opciones de validación de Spry.
285
Básicamente con esta opción podemos controlar que se haya elegido alguno, o valores no válidos, como en
las listas desplegables.
Opción 1 Opción 3
Opción 2 Opción X
Selecciona alguna opción Seleccione un valor válido.
La opción más interesante es Obligatorio. También podemos establecer un valor como Vacío o No válido,
que no pasará la validación.
26.6. Casillas de verificación

Desde Insertar → Spry → Campo de verificación de validación de Spry podemos crear y controlar las
casillas de verificación de nuestros formularios. Observa el ejemplo a continuación:
Selecciona entre 1 y 3 opciones:

Valor 1 Valor 4
Valor 2 Valor 5
Valor 3 Valor 6 Selecciona por lo menos una casilla.Selecciona 3 casillas como máximo.
Al crear el campo de verificación se crea únicamente una casilla. Esto es debido a que en el panel
Propiedades existe la opción de poder establecer que dicha casilla sea de selección obligatoria (Obligatorio
(casilla única)), como en el caso de formularios en los que se ha de aceptar las condiciones de determinado
contrato, etc.
Un uso más avanzado de este control es cuando combinamos más de una casilla en la misma región de Spry.
Este caso es un poco más complicado. Deberemos crear la región Spry tal y como acabamos de ver, luego
sin salirnos de la zona delimitada con el recuadro azul deberemos insertar más casillas de verificación
mediante el menú Insertar → Formulario → Casilla de verificación hasta alcanzar el número de casillas que
necesitemos:
286
En el panel Propiedades deberemos indicar que estamos trabajando con más de una casilla marcando la
opción Aplicar rango (varias casillas). De esta forma podremos indicar el máximo y mínimo de casillas de
verificación que se podrán cambiar. Para ello utiliza los campos disponibles en Nº mínimo de opciones
seleccionadas y Nº máximo de opciones seleccionadas.
Unidad 26. Spry y Formularios (V)

26.7. Áreas de texto
La última opción que veremos será la creación de Áreas de texto con validación. Puedes hacerlo desde
Insertar → Spry → Área de texto de validación de Spry.
Aquí tienes un ejemplo de cómo funciona:
Introduce el texto (máx. 50 caract.):
Llevas escritos 0 caracteres Escribe algún texto.Se ha superado el número máximo de caracteres.
Al crear el campo de validación podrás encontrar las siguientes opciones en el panel Propiedades:
A continuación pasaremos a explicarlas.
En cualquier caso siempre podremos obligar al usuario a que rellene el campo marcando la opción
Obligatorio. E incluir un texto de ejemplo escribiéndolo en Sugerencia.
Escribe en Car min y Car máx el número de caracteres mínimos y máximos que aceptará el control. Puedes
hacer que los caracteres que se escriban de más no se puedan escribir marcando la opción Bloquear
caracteres extra.
Finalmente puedes incluir un contador de caracteres marcando la opción Recuento de caracteres o

Caracteres restante para que se muestren los caracteres que se han escrito o los que faltan para alcanzar el
máximo respectivamente.
Este control es muy sencillo de utilizar y permite el control del texto introducido de una forma cómoda y
rápida.
287
26.8. Contraseñas
Muchas veces habrás observado que al registrarte en un sitio te obligan a introducir una contraseña con in
mínimo de complejidad, por ejemplo combinando letras y números, para intentar que sea una contraseña
más segura. Spry nos permite hacer esto con Insertar → Spry → Contraseña de validación de Spry:
Contraseña:
(Mín. 6 caracteres. Debe combinar letras y números) Se necesita un valor.La contraseña no es segura.Mínimo 6
caracteres.
Para ello en las propiedades del control
La mayoría de opciones ya las hemos visto. Lo única novedad es que nos permite indicar valores máximos y
mínimos para el número de letras, dígitos, letras en mayúscula y caracteres especiales que podrá contener la
contraseña.
26.9. Campo de confirmación

Cuando introducimos una contraseña en la que no vemos los caracteres, con finalidad de guardarla para un
nuevo usuario, se hace imprescindible el uso de un campo de validación, en el que el usuario pueda volver a
escribir la contraseña, para compararlas y comprobar que realmente ha escrito lo que quería. También se
emplea mucho para confirmar que no se ha equivocado al escribir una dirección de correo.
Contraseña:
Repita: Se necesita un valor. Los valores no coinciden. Se necesita un valor. La contraseña no

es segura. Mínimo 6 caracteres.
Lo único que debemos configurar en este caso es indicar en el desplegable Validar con el campo con el que
se comparará.
Unidad 27. Controles Spry Avanzados (I)

27.1. Introducción
288
En esta unidad veremos algunos controles basados en JavaScript que Dreamweaver pone a nuestra
disposición utilizando su librería Spry.
Estos controles harán que tus páginas se muestren de una forma más profesional, vistosa y ordenada.
Podrás encontrarlos bajo el menú Insertar → Spry, al final del desplegable o desde el panel Insertar,
seleccionando Spry:
Estos controles son completamente configurables y además también aceptan modificaciones en su estilo
utilizando CSS. De hecho el estilo inicial que muestran es muy básico, por lo que no deberías tener
problemas para modificarlo.
Y como siempre, Dreamweaver irá añadiendo las librerías que necesite para crear estos comportamientos a
la carpeta SpryAssets.
Unidad 27. Controles Spry Avanzados (II)

27.2. Barra de menús
289
Podemos crear menús de forma muy sencilla haciendo clic en Insertar → Spry → Barra de menús de Spry:
 Menú 1
o Submenú 1.1
 Subsub 1.1.1
 Subsub 1.1.2
o Submenú 1.2
o Submenú 1.3
 Subsub 1.3.1
 Subsub 1.3.2
 Menú 2
 Menú 3
o Submenú 3.1
 Subsub 3.1.1
 Subsub 3.1.2
o Submenú 3.2
o Submenú 3.3
 Menú 4
El primer cuadro de diálogo que encontraremos será el siguiente:
Aquí podremos seleccionar el diseño para nuestro menú, haz clic en Horizontal o Vertical y pulsa el botón
Aceptar.
Se creará automáticamente el menú, que podrás visualizar desde la vista de Diseño de esta forma:
Haciendo clic en la cabecera azul Barra de menús de Spry podremos ver en el panel Propiedades las
opciones necesarias para configurar nuestro menú:
290
La creación de elementos es bastante sencilla. Este menú admite hasta 3 niveles diferentes, así que en
principio la primera tarea será definir el primer nivel. Esto lo haremos desde el primer cuadro de listado.
Añadir y quitar elementos es tan fácil como utilizar los botones , y podemos reorganizarlos luego
utilizando las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto
que queramos, lo haremos desde las cajas de texto que encontramos a la derecha.
En Texto escribiremos el literal que queremos que se lea en el menú. Si ese elemento debe contener un
enlace (a una página o a un correo electrónico) lo haremos escribiendo en la caja de texto Vínculo. Si
trabajamos en una página con marcos podremos utilizar el campo Destino para establecer en cuál de ellos se
abrirá el enlace.
Por último, Título contendrá una ayuda contextual que se mostrará en forma de etiqueta al colocar el ratón
sobre el elemento del menú.
Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los items y
crea las opciones que se desplegarán al colocar el ratón sobre ellos. De nuevo utiliza los botones y
para gestionar los elementos en el segundo listado.
Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.
Una vez creado un elemento de segundo nivel también seremos capaces de colgar sobre éste otro elemento
de tercer nivel para ello utiliza los botones y y rellena el tercer listado de elementos.
Al final, dependiendo de lo complejo de nuestro menú, puede resultarnos muy difícil ver su estructura o
recorrer sus elementos. Además, puede que hayamos añadido algún estilo CSS que Dreamweaver no
interpreta como toca. En estos casos, resulta muy útil la opción Desactivar estilos, que nos mostrará el
HTML real del menú: una lista con enlaces.
Unidad 27. Controles Spry Avanzados (III)

27.3. Navegación por Fichas
291
Puedes crear un control como el que mostramos a continuación haciendo clic en Insertar → Spry → Paneles
en fichas de Spry:
Contenido de la primera ficha.
Puede contener los elementos que quieras.
Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegación y son
muy útiles para organizar la información y no congestionar la página ni al usuario.
Al insertarla verás que se inserta algo parecido a esto:
Seleccionando el control haciendo clic en la cabecera azul verás lo siguiente en el panel Propiedades:
Desde aquí podrás añadir tantas fichas como desees y ordenarlas utilizando los botones y .
Luego selecciona el Panel predeterminado que es el que se mostrará por delante cuando se visualice la
página en el explorador, antes de que el usuario haya pulsado alguna de las fichas.
Para modificar los títulos de ficha simplemente cambia el nombre desde la vista de Diseño.
Puedes modificar su contenido normalmente incluyendo todo tipo de tablas, imágenes o elementos que
hayamos visto hasta ahora. Para pasar del contenido de una ficha a otra sólo coloca el ratón sobre ella y haz
clic sobre el icono con forma de ojo que aparecerá:
292
Luego modifica el contenido del panel abierto.
Recuerda que el panel que se visualizará primero en la página es el que elijas como predeterminado en el
panel Propiedades.
Unidad 27. Controles Spry Avanzados (IV)

27.4. Control Acordeón
Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es el Acordeón:
Coloca el contenido que prefieras en estos contenedores.
Puedes pasar de un contenedor a otro haciendo clic sobre su nombre.
Para utilizarlo haz clic en Insertar → Spry → Acordeón de Spry. Se creará automáticamente un elemento en
tu página parecido a esto:
293
Este control es tan sencillo de configurar que en el panel Propiedades sólo encontrarás lo siguiente:
Añade y organiza las secciones utilizando los botones y . Y luego simplemente edita el contenido
de cada una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestañas para ver el contenido de una sección coloca el ratón sobre su cabecera
y haz clic sobre el icono con forma de ojo que aparecerá:
Unidad 27. Controles Spry Avanzados (V)

27.5. Panel con Contracción
294
Para terminar con los controles avanzados veremos el panel que puede contraerse de Spry. Puedes ver un
ejemplo aquí:
Este es un panel que se puede contraer.
De esta forma podrás esconder el contenido con un sólo clic.
Pruébalo pulsando sobre la cabecera.
Verás que realmente, funciona como un acordeón con una sola ficha.
Para insertar un panel de este tipo sólo tienes que hacer clic en Insertar → Spry → Panel que puede
contraerse de Spry.
En el panel Propiedades podrás ver sus opciones de configuración:
Desactivando la opción Activar animación eliminarás la animación que se produce al contraer el panel. Esta
opción sólo afecta al comportamiento de apertura o cierre y no tiene mucha más trascendencia, así que
simplemente dependerá de tu gusto y lo que se adapte mejor al diseño de tu página web.
Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la página seleccionando el estado en
el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en vista de Diseño te molesta
que esté abierto puedes cerrarlo haciendo clic en el desplegable Mostrar y seleccionando Cerrado.
Esto último también puedes hacerlo pulsando sobre el icono del ojo que aparecerá en la cabecera del panel si
sitúas el ratón sobre ella:
295
Para modificar este panel simplemente edita su contenido como en el resto de controles que hemos visto,
Nada más fácil.
27.6. Cambiar Estilos CSS

Al principio de la unidad dijimos que era posible modificar el aspecto de los controles Spry.
Esto es muy sencillo de conseguir. Cada vez que insertamos un control de este tipo se crean dos nuevos
archivos en la carpeta llamada SpryAssets en nuestro sitio. Uno de ellos es un archivo JavaScript que
contiene el código necesario para el buen funcionamiento del control, nunca modifiques este código, salvo
que realmente entiendas qué estás haciendo.
El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre el control. Encontrarás
una hoja de estilo por cada control.
Para modificar el estilo de alguno de tus controles sólo tendrás que modificar dicho archivo CSS para
adaptarlo a tus necesidades. Para ello puedes emplear el panel Estilos CSS, el Inspector de propiedades CSS,
etc...
Si ves el código fuente del Spry, o la barra de estado, verás que normalmente están formados por etiquetas
div, que tienen asociada una clase ya existiese. No tendrás más que personalizar esa clase.
Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el tema de Estilos CSS
Avanzados.
296

Dreamweaver

Cargado por

Copyright:

Formatos disponibles

Dreamweaver

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dreamweaver

Cargado por

Copyright:

Formatos disponibles

Unidad 1.

Conceptos básicos de Dreamweaver CS5 (I)

Unidad 1. Básico: HTML básico

Una página HTML básica tendría el siguiente aspecto:

1.2. Novedades de Dreamweaver CS5

Unidad 1. Conceptos básicos de Dreamweaver CS5 (II)

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (III)

Veamos las dos formas básicas de arrancar Dreamweaver CS5.

 Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .

Unidad 1. Básico: Compaginar dos sesiones

1. Abre la sesión con el curso en tu navegador habitual.

Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

1.6. Abrir y guardar documentos

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

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

Unidad 1. Conceptos básicos de Dreamweaver CS5 (IV)

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

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.

Unidad 1. Conceptos básicos de Dreamweaver CS5 (V)

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

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

jerarquía de etiquetas. Haz clic sobre p.

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

Unidad 2. El entorno de Dreamweaver CS5 (I)

2.1. La pantalla inicial

Unidad 2. El entorno de Dreamweaver CS5 (II)

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

Las pestañas de documento.

La barra de herramientas estándar.

La barra de herramientas de documento.

La barra de representación de estilos.

La barra de navegación con navegador.

Unidad 2. El entorno de Dreamweaver CS5 (III)

Unidad 2. El entorno de Dreamweaver CS5 (IV)

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

Unidad 2. El entorno de Dreamweaver CS5 (V)

La vista Código en vivo

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría

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

Unidad 3. Configurar un sitio local (II)

3.3. Abrir un sitio

Unidad 3. Configurar un sitio local (III)

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

Unidad 3. Configurar un sitio local (V)

Este cuadro se puede abrir de tres modos diferentes:

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

Las propiedades están organizadas en categorías.

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

Unidad 3. Configurar un sitio local (VI)

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

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

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

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

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

Unidad 3. Configurar un sitio local (VII)

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