Tutorial DreamWeaver

Unidad 1.
Conceptos bsicos de Dreamweaver CS6 (I)
1.1. Qu es Dreamweaver CS6

Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la
necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Adems 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 versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de
30 das, pero seguro que te dar tiempo a entenderlo y decidir si quieres adquirir la versin completa de este fantstico programa.
Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene
ninguna relacin con Adobe.
Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.
1.2. Novedades de Dreamweaver CS6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
Plantillas diseo fluido. El acceso a la web a travs de todo tipo de dispositivos est experimentando un aumento importante. Ahora
es habitual acceder a internet desde el telfono mvil y desde las tabletas. Esto complica el diseo de los sitios web porque los dispositivos
son de diferentes dimensiones.
Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace que la pgina se adapte automticamente a
las dimensiones del dispositivo. Este tipo de diseo utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo
correctamente. Sin embargo, existen librerias de Javascript que solucionan este inconveniente.
Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido que veremos en la unidad 18.
Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Con
transiciones se pueden lograr vistosos efectos de animaciones.
Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseos de pginas web.
En esta versin, Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla.
Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para telfonos mviles en las plataformas
ms utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .
Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver,
mediante suscripcin mensual o anual, de esta forma se tiene acceso ms rapido a las actualizaciones y se puede disponer de los archivos
de trabajo en cualquier ubicacin con acceso a internet.
Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como la insercin de etiquetas HTML 5 desde el
panel Insertar, la compatibilidad con Edge Animate o la bsqueda dinmica en Mac.
Unidad 1. Bsico: HTML bsico
Las pginas que vemos en Internet estn 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 pgina Web.
Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <title> y </title>. Como ves, ambas etiquetas consisten en
poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <table
border="1"> indica que la que se trata de una tabla, y que tendr un borde de grosor 1.
Una pgina HTML bsica tendra el siguiente aspecto:
<html>
<head>
<title> Mi primera pgina web </title>
</head>
<body>
<p><a href="http://www.aulaclic.es/"> Haz clic aqu para ir a aulaClic</a>
y aprender ms sobre pginas web.</p>
</body>
</html>
El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte del texto enlaza con la web de aulaClic. Puedes probarlo
copiando el cdigo y pegndolo en un archivo de texto, que debes guardar con la extensin .htm.
Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas unas dentro de otras.
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 pgina el servidor Web enva la pgina al navegador y este
interpreta las etiquetas para dar la pgina correctamente formateada.
Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta
automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico. Esto nos
facilita muchsimo el trabajo.
Unidad 1. Conceptos bsicos de Dreamweaver CS6 (II)
1.3. Editar pginas web
Cualquier editor de texto permite crear pginas web. Para ello slo
es necesario crear los documentos con la extensinHTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede
utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms laborioso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico
cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia
profesional para la pgina, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el cdigo
nos da ms control sobre l, y sobre todo al principio, nos ayudar a entender lo que estamos haciendo y podremos aprender HTML
rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las
numerosas funciones que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Expresion Web, Amaya,
Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
1.4. Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla
accesible desde Internet las 24 horas del da. 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
pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo
que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina
personal, sobre todo al comienzo.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet de forma gratuita en forma de blog.
Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como una
pgina web a la hora del diseo.
Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.
En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero por el usuario, sin restircciones de diseo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la
propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. 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. La terminacin hace referencia al pais (.es para Espaa, .com.mx para
Mxico, .pe para Per, ...) o al tipo de pgina (.com para comerciales, .org para organizaciones, .mobi para telfonos mviles o celulares, ...)
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro
de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que
pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web.
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 querrs que se encuentre a disposicin de todo el
mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local.
Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la
organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco en los nombres de
archivos o carpetas. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los
archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos
servidores (los que utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la
imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
Unidad 1. Conceptos bsicos de Dreamweaver CS6 (III)
1.5. Arrancar y cerrar Dreamweaver CS6
Veamos las dos formas bsicas de arrancar Dreamweaver CS6.
Desde el botn Inicio

situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic
sobre el botn 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 CS6 y haz clic sobre l para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes
Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes
compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aqu.
Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas Alt + F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
, en la esquina superior derecha, como en cualquier ventana de Windows.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin 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 botn abrir
de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir....
Hacer clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos archivos abiertos.
Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el programa Brigde que muestra las carpetas y
archivos de forma grfica.
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 opcin Abrir con Adobe Dreamweaver CS6.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botn nuevo
Pulsar la combinacin de teclas Ctrl + N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
de la barra de herramientas estndar (si est visible).
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que podemos elegir, para nuestro primer
ejemplo elegimos en Diseo ninguno. A continuacin pulsamos el botn Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar
Pulsar la combinacin de teclas Ctrl + S.
de la barra de herramientas estndar.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, poder guardar todos de
golpe, sin la necesidad de hacerlo uno por uno. Paraguardar todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar todo
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.
de la Barra de herramientas estndar.
Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho
cuidado al utilizar la opcin 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 opcin, al menos hasta que te hayas habituado a manejar el programa.
De
todas
formas,
observa
que
cuando
hay
cambios
documento
sin
guardar
aparece
un
tras
el
nombre
del
Unidad 1. Bsico: Compaginar dos sesiones
Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con Dreamweaver CS6.
1. Abre la sesin con el curso en tu navegador habitual.
2. Abre la sesin de Dreamweaver CS6.
3. Pulsar con el botn derecho sobre cualquier parte vaca 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 botn Inicio.
4. Elegir la opcin 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 tamao adecuado, basta hacer clic con el ratn para pasar de la una a la otra.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar
Esto va bien con monitores habituales (de 17" o ms pulgadas), sobre todo si son panormicos. Con monitores pequeos como los de
las Netbooks, quizs prefieras dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las
teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la
barra de tareas en la ltima lnea de la pantalla.
1.7. Mi primera pgina

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de
texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos
bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo
fcil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abre un documento
nuevo y selecciona la Categora Pgina bsica, HTML, en la columna Diseo dejamos la opcin 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 ttulo y el color de fondo del documento.
Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece a continuacin:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina.
Unidad 2. El entorno de Dreamweaver CS6 (I)
Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para saber diferenciar
entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en
algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas
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 ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (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 dnde, como veremos ms adelante.
En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta imagen por los nmeros en azul del 1 al
9.
1.- Las barras.
2.- Las pestaas de documentos.
3.- La barra de estado.

4.- El panel de propiedades.
5.- rea de paneles.
6.- Paneles y ventanas.
7.- Lnea inferior de pestaas.
8.- Vista diseo del documento.
9.- Vista cdigo del documento.
2.2. Las barras

1.- La barra de la aplicacin.
La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los
elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de la aplicacin,
el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda on line.
Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseo
o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios, que ya veremos.
Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuracin
del entorno (paneles visibles y su disposicin) que podemos guardar y cargar. Lo veremos ms adelante.
Los mens, estn agrupados en categoras.
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 travs de los mens, aunque en ocasiones nos enven a los paneles.
2.- Las pestaas de documento.
Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro fcilmente. 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 botn derecho, como Cerrar otros archivos.
Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo
acceder a ellos con un clic. Esto nos ahorrar bastante tiempo.
3.- La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos
las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres
tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el tamao de la ventana, el tamao de la pgina o su
codificacin.
Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el
men Ver Barras de herramientas.
La barra de herramientas estndar.
La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a
derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo 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 edicin y la vista en vivo, vistas previa en multipantalla, acceder
cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa.
La barra de representacin 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. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor est
sobre un elemento.
La barra de navegacin con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestro sitio, aunque slo tiene sentido
con la Vista en vivo, como ya veremos.
Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de
herramientas.
2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles (ventanas) 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 fijas.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. A continuacin
vamos a ver el inspector de Propiedades y ms adelante veremos el panel Insertar.
4.- El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se
convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como
sucede en la imagen que puedes ver, mostrar su ubicacin, dimensiones, peso, clase, etc...
En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la pgina Web que estemos diseando.
5.- rea de paneles.
En la parte derecha de la pantalla tenemos el rea o pila de paneles.
Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos que queramos. Para
quitar un elemento del rea de paneles basta hacer clic con el botn derecho sobre su nombre para que aparezca un men con la
opcin Cerrar. Para aadir un elemento al rea de paneles hay que ir al men Ventana y hacer clic en el elemento que queramos aadir, si
el elemento se abre en una ventana flotante, bastar arrastrarlo al rea de paneles.
6.- Paneles.
Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o desplegarlos de tres formas.
1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de paneles pulsando el botn de la parte
superior derecha
, a continuacin, basta hacer clic en cada panel para que se abra dentro del rea de paneles. Para cerrar el panel hacer
doble clic.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles. Se pueden abrir varios paneles a la vez y
ajustar sus tamaos colocando el cursor en el borde inferior y arrastrndolo.
2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin expandir, y al pulsar en un panel, este se
abrir pegado al lado, como vemos en la siguiente figura.
3. Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel fuera del rea de paneles, el panel se
puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se
contrae pero sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el
panel Archivos flotando y epandido.
Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en categoras. Podemos
emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men (imagen anterior), como panel flotante o como una
barra de herramientas integrada en la ventana de trabajo (imagen siguiente)
.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado
7. Lnea inferior de pestaas.
En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar, Validacin , ... )
Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.
Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de paneles. Es decir, se pueden aadir y
quitar, convertir en flotantes, etc.
Unidad 2. Avanzado: Personalizar el rea de trabajo (I)
Abrir y cerrar paneles

Todos los paneles son accesibles a travs del men Ventanas.
Para cerrar un panel, basta con hacer clic derecho sobre su pestaa y elegir Cerrar del men.
Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se ocultan. Para mostrarlos, la volvemos a pulsar.
Acoplar y desacoplar paneles

A la derecha (por defecto) encontramos la rea o pila de paneles.
Algunos paneles aparecen acoplados. Eso quiere decir que se muestran como pestaas, pudiendo ver el que queramos haciendo clic,
pero sin poder ver dos a la vez.
Para desacoplarlos, basta con hacer clic sobre la pestaa y arrastrar.
Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares (zonas de colocacin), que aparecern
resaltados en azul (imagen anterior). Esto nos permite intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los
sacamos fuera.
Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de herramientas.
Cambiar el aspecto del panel insertar

Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta la barra de mens para que tome un aspecto
de fichas, como se aprecia en la siguiente imagen:
Pero tambin puede tener este otro aspecto, en men:
Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el men y seleccionamos la opcin Mostrar como Fichas o
Mostrar como men, segn el caso.
2.4. Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:
8.- La vista Diseo

La vista Diseo permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
9.- La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener
directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.
El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista
Diseo.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra el cdigo 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 Diseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan correctamente en
el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado que sern los que emplearn nuestros
visitantes. De hecho, a lo largo del curso vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en
la vista en vivo o en el navegador. Tambin es conveniente comprobar la pgina con los distintos tamaos de pantalla, telfono mvil, tablet
y PC.
- La vista Cdigo 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 cdigo. Lo
que hace es que al seleccionar partes de la web en laVista en vivo, se seleccione su correspondiente cdigo fuente y refleja los cambios
dinmicamente al interactuar con la pgina. Si adems pulsamos el botn
podremos ver los estilos asociados a cada
elemento. Por ejemplo, al colocar el cursor sobre un prrafo podemos ver sus mrgenes, como se aprecia en la siguiente imagen.
2.5. La ayuda
A travs del men
Ayuda puedes ir a varias opciones, veamos algunas de ellas:
Si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda en lnea de Adobe Community Help
donde puedes buscar por temas o por bsqueda de palabras clave, .
Ayuda de Business Catalyst que es un sistema de alojamiento de pginas web con funciones adicionales. Es de Adobe y hay diferentes
opciones de pago al mes.
Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.
Referencia abre un panel en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder al Centro de soporte de Dreamweaver en la web.
Dreamweaver Exchange es un sistema para compartir extensiones.
Acceder al Foros en lnea de Adobe.
Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de la bsqueda y buscar, iremos a la
ayuda online de Adobe.
Unidad 3. Configurar un sitio local (I)
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como
puede ser el color de fondo.
3.1. Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario
disear y planificar el sitio web antes de crear las pginas 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 imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas
carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce
como sitio local.
Despus se podrn 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 organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica,
utilizar FTP para cargar el sitio local en el servidor, etc.
La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica,
el servidor devuelve la pgina con ese nombre.
Por
ejemplo,
si
escribiramos
la
direccin
genrica http://www.aulaclic.es en
el
navegador,
ste
intentara
cargar
la
pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el
nombre index.htm, y no se podra 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 conexin a Internet
Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos
Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la imagen.
Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones
permiten borrar un sitio, editarlo, duplicarlo y exportarlo.
que nos
A continuacin tenemos otros cuatro botones:

- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.
- Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.
- Nuevo sitio. A continuacin explicaremos esta opcin.
- Nuevo sitio de Business Catlyst.
En la parte inferior derecha tenemos el botn Listo que nos abrir el sitio seleccionado.
Unidad 3. Configurar un sitio local (II)
Tanto si se pulsa el botn Nuevo sitio, como si se elige el botn Editar, se mostrar la misma ventana en la que definir o modificar las
caractersticas del sitio.
Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento son las nicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categora 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 caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.
Las dems 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.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y
pulsar sobre el botn Listo.
Tambin 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
ms adelante.
Unidad 3. Ejercicio: Crear un sitio web local
Objetivo
Practicar las operaciones que hay que realizar para crear un sitio sin conexin a Internet.
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden,
sin saltarte ninguno. Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin
haber hecho los anteriores puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.
Nota: Si es la primera vez que realizas los ejercicios, recuerda que encontrars todos los archivos necesarios en la carpeta de ejercicios.
Esta carpeta se incluye con los cursos de pago, pero tambin puede ser descargada gratuitamente por cualquier usuario registrado en
aulaClic.
Ejercicio
1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando.
Llmala mis_sitios.
2. Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.
3. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
4. Haz clic sobre el men Sitio.
5. Elige la opcin Administrar sitios. Se abrir una nueva ventana.
6. Pulsa el botn Nuevo....
7. Se abrir una nueva ventana, selecciona la opcin Sitio.
8. En Nombre del sitio escribe Cocina.
9. En Carpeta del sitio local busca la carpeta cocina que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios.
Seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
10. Pulsa el botn Guardar y el sitio estar listo.
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que aparece si pulsas aqu.
3.4. Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya que nos da
acceso a los archivos del sitio.
En
este
caso
vemos
todos
los
documentos
creados
en
nuestro
sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imagenes y varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el
botn
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. Tambin el servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con nuestros archivos.
Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el
nombre de un archivo o su carpeta desde Dreamweaver,automticamente actualizar todas las referencias a ese archivo (enlaces
desde otras pginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern
imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina.
Al modificar algn objeto que es referenciado por algn 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 botn Actualizar, aunque esto depender de si tenemos configurada la opcin Mensaje al actualizar
vnculos si movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin Preferencias, categora General.
3.5. Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas
contratado o conseguido gratuitamente.
Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers 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 funcionarn correctamente, y es posible que algunas imgenes no se
muestren.
Para subir los archivos va web debers 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.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es
mucho ms til para subir los archivos.
Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs descargarte el programa.
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 debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Servidor, Usuario y Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos
que hayas creado.
La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la
estructura de archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.
Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo.
Vers como el programa empieza a copiar la informacin de tu disco a Internet.
Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet
Explorer...) y vers el sitio en Internet!
3.6. Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el m ismo color
de fondo, de fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de
la pgina.
Se abrir el cuadro de dilogo siguiente:
Las propiedades estn organizadas en categoras.

En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
Fuente de pgina: es el tipo de letra que le aplicaremos al texto.
Tamao: es el tamao 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 segn 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
opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se
repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la
ventana del navegador.
En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:
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 segn 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.
Vnculos: es el color que mostrar el texto de los vnculos.
Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuracin utilizando
reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a lim itar el HTML
al contenido, y no al diseo. Por eso, te desaconsejamos su uso.
Unidad 3. Avanzado: Comprobar tamao para optimizar la carga
Si las pginas tienen muchos elementos (imgenes, 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 ms nuestra pgina.
Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.
Dreamweaver permite calcular automticamente el tiempo de descarga de las pginas. Para ello hay que dirigirse al men Edicin, a la
opcin Preferencias.
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso nos interesa la de Tamaos de
vantanas.
En ella habr que establecer una Velocidad de conexin.
La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se conectaban lo mdems telefnicos. 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 conexin
media de la regin de los usuarios a los que va destinada la web.
Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el tamao y el tiempo de descarga de
la pginas a partir de esa velocidad de conexin.
Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del tamao de esa pgina en disco, sino
que hay que considerar tambin el tamao de las imgenes que aparecen en ella, y del resto de elementos.
Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su tamao y su tiempo de descarga en
la barra de estado.
Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 39K, y se presupone un tiempo de descarga de 1 segundos
(para una conexin ADSL), ya que en la barra de estado de la ventana de documento aparecen estos datos entre el tamao 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 slo podamos utilizar estos colores. Podemos personalizarlos a travs del botn
paleta.
Los colores pueden asignarse a travs de los botones:
de la parte superior de la
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin 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 pgina,
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 nmero hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #39F, el botn quedara 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 nmeros hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).
El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.
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 observars muchas veces que se emplean slo tres valores. En este caso, se interpreta que los valores de los pares
estn repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.
Unidad 3. Ejercicio: Crear nuevo documento y modificar sus propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la pgina.
Ejercicio
2. Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn
de la barra de herramientas.
3. Selecciona Pgina en blanco en Categora.

4. Selecciona HTML en Tipo de pgina.
5. Haz clic sobre el botn Crear.
6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de
diseo
7. Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual.
8. Elige la opcin Propiedades de la pgina en el men contextual y selecciona la categora Apariencia (CSS).
9. En Color de texto: escribe #585858.
10. En Color de fondo: escribe #FEFEFE.
11. Haz clic en la categora Vnculos CSS.
12. En Color de vnculos: escribe #DFA01B.
13. En Vnculos visitados: escribe #F9CA69.
14. En Vnculos activos: escribe #FFB900.
15. Haz clic en la categora Ttulo/codificacin.
16. En Ttulo, escribe Cocina.
17. Haz clic sobre el botn Aceptar.
18. Haz clic sobre el botn Guardar
de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la
carpeta mis_sitios/cocina que habrs creado en ejercicio anterior.
Ejercicios unidad 3: Configurar un sitio local
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin
saltarte ninguno. Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin haber
hecho los anteriores puede que no veas un resultado muy coherente.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
A partir de este momento vamos a realizar todos los ejercicios en la vista Diseo, a no ser que se indique lo contrario. Haz clic sobre el
botn Mostrar vista de diseo
Ejercicio 1: Deportes.
1. Copia la carpeta deportes que encontrars en la carpeta ejercicios a la carpeta mis_sitios (creada en los ejercicios paso a paso del
tema). Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la
carpeta mis_sitios.
2. Abrir el documento index.htm.
3. Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000 y nunca se encuentren subrayados.
4. Asgnale la imagen fondo-logo.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin.
5. Haz que la fuente del documento sea Verdana, Arial, sans-serif 18px, y de color #535D6F.
6. Haz que el ttulo de la pgina sea Tu tienda de deportes.
7. Guardar todos los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.
Ejercicio 2: Animales.
1. Copia la carpeta animales que encontrars en la carpeta de ejercicios a la carpeta mis_sitios, creada en el primer ejercicio paso a
paso de la unidad.
2. Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la
carpeta mis_sitios, copiada en el paso anterior.
3. Abre el documento consultas.htm y modifica sus propiedades, para que su ttulo sea Consultas.
4. Abre el documento gatos.htm y modifica sus propiedades, para que su ttulo sea Gatos.
5. Abre el documento perros.htm y modifica sus propiedades, para que su ttulo sea Perros.
6. Abre el documento index.htm y modifica sus propiedades, para que su ttulo sea Inicio.
7. Guarda los cambios y cierra los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
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. Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del inspector de propiedades.
Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, que estn clasificadas en dos
categoras 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 prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los
encabezados se utilizan para establecer ttulos 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, debera ir siempre en prrafos,
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 cmo se muestran esos encabezados, recuerda que siempre podremos
personalizarlo.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra
entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo,
subrayar el texto. Esta opcin no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vnculos
aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Adems, emplea
etiquetas que estn en desuso.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados
del texto. En este caso los botones se refieren a sangra 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.
4.2. Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.
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 opcin de lista correspondiente, ya sea a travs delinspector de propiedades, o a travs del men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn

del botn
, mientras que la lista numerada (ordenada) se selecciona a travs
Ejemplo de lista numerada (ordenada):

1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con vietas (sin ordenar):
o
Perro
Gato
Aves
Canario
Loro
Hmster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la
lista que se desee que pasen a formar parte de la lista anidada.
A travs del men Formato, opcin 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 algn lugar de la lista para que se active este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se
utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
Unidad 4. Ejercicio: Convertir texto en una lista
Objetivo
Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.
Ejercicio
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior a partir de archivos de la
carpeta Ejercicios.
4. Haz doble clic sobre el documento postresemana.htm, que aparece en los archivos desplegados en el panel Archivos.
Se abrir el documento en Dreamweaver.
5. Si no aparece el Inspector de propiedades HTML, brelo a travs del men Ventana, opcin Propiedades.
6. Haz clic en la primera lnea Postre de la semana.
7. En el desplegable Formato, elige Encabezado 1.
8. Haz clic en la segunda lnea Boniatos a la mallorquina.
9. En el desplegable Formato, elige Encabezado 2.
10. Selecciona las tres lneas de texto desde 1kg de boniatos hasta Abundante aceite.
11. Haz clic sobre el botn Lista sin ordenar
del Inspector de propiedades HTML.
12. Selecciona las lneas desde Mondar los boniatos hasta el final.
13. Haz clic sobre el botn de Lista ordenada
del inspector de propiedades.
14. Haz clic sobre la barra de herramientas, para cambiar el Ttulo, e introduce Postre de la semana.
de la barra de herramientas. Si esta barra no aparece visible, pulsa Ctrl + S.
4.3. Caracteres especiales

A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy
sencilla utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida. Pero si quieres poner dos espacios en blanco y
los introduces por teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin.
Lo mismo ocurrir con los caracteres que no tenemos en el teclado.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen inferior.
Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser
introducidos mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres
entre una lista bastante ms amplia:
4.4. Estilos CSS. Introduccin
Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea
necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto.
Tambin permiten, como veremos ms adelante, definir prcticamente cualquier propiedad de los elementos que contendrn nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), prrafos (<p>), enlaces (<a>), etc... lo
que formatear todas las apariciones de esta etiqueta en el mbito del estilo.
Tambin 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 lnea (afectar slo al elemento seleccionado) o crear una regla, que
puede afectar a toda la pgina, o a todo el sitio si la guardamos en un archivo CSS.
Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos
CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el
diseo de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un
estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.
4.5. Crear un estilo personalizado

Con Dreamweaver CS6, las caractersticas que apliquemos a un texto a travs del Inspector de propiedades CSS crearn
automticamente estilos CSS. Aunque tenemos que decidir a qu elementos afecta.
Vemoslo:
Crear un estilo en lnea.

Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un caso puntual, podemos crearlo como un estilo en
lnea. 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 lnea>.
A continuacin, definimos las propiedades del estilo.

Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos concretos, cuando el estilo no se repita, y no tenga
sentido mantenerlo si borramos esa etiqueta concreta.
4.6. Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarn el estilo.
Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el
desplegable y la seleccionamos, ya que una vez creadas se van aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir la ventana Definicin de regla.
Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms adelante.
Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar varias propiedades.
Para pequeos 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 botn Panel CSS.
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.
Tambin 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 botn derecho sobre el estilo y seleccionamos la opcin Cambiar
nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.
Si quieres aprender ms sobre el panel Estilos CSS, puedes hacerlo aqu
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Ms adelante
detallaremos qu hacen las propiedades existentes. No obstante, sabiendo un poco de ingls resultan muy intuitivas.
Unidad 4. Ejercicio: Redefinir el estilo de una etiqueta
Objetivo
Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz
doble
clic
sobre
el
documento postresemana.htm,
que
aparece
en
el
panel Archivos.
5. Haz clic sobre cualquier texto, sin seleccionar.

6. En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sans-serif.
7. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta, en Nombre de selector elige body, y en Definicin de
regla deja Slo este documento.
8. Pulsa Aceptar. Observars como cambia toda la tipografa de la pgina.
9. Haz clic en la primera lnea Postre de la semana.
10. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
11. Cambia el valor de Tamao a 140%.
12. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegrate de que ya pone h1.
13. Pulsa Aceptar.
14. Vamos a editar la regla. Haz clic en el botn Editar regla.
15. En la categora Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar.
16. Haz clic en la segunda lnea Boniatos a la mallorquina.
17. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
18. Pulsa en el icono
para poner el texto en cursiva.
19. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegrate de que ya pone h2.
20. Pulsa Aceptar.
21. En el desplegable Fuente, elige Verdana, Geneva, sans-serif.
22. Haz clic en el desplegable de color e introduce #6F9DBE.
23. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body.
24. Pulsa el botn Editar regla.
25. En la categora Fondo, en background-image elige la imagen fondococina.png que encontrars en la carpeta imagenes del sitio.
Pulsa Aceptar.
26. Haz clic sobre el botn Guardar todo
de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.
Unidad 4. Avanzado: El panel Estilos CSS (I)
Veamos cmo funciona el panel Estilos CSS
El panel Estilos CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rpida y sencilla, los estilos creados de esta manera se
pueden guardar en nuestro documento, pero tambin podemos utilizar estilos que se encuentren en hojas externas al documento. Esta
particularidad es muy til cuando diseamos un sitio web con varias pginas ya que permite definir una sola hoja de estilos que utilizarn
todas las pginas del sitio y as facilitar el diseo.
Vamos a ver cmo funcionan las hojas de estilo a travs del panel CSS que puede abrirse a travs del men Ventana, opcin Estilos
CSS. Existen otras alternativas para abrir este panel, una es pulsando Mays + F11, o puedes hacer clic en el botn Panel CSS que aparece
en el Inspector de Propiedades CSS.
El panel tiene dos modos de visualizacin, representados por dos botones bajo el nombre del panel. Vemoslos:
El modo Actual.
Este modo nos ofrece informacin sobre qu estilos estn afectando a la seleccin.
Se divide en tres secciones:
En Resumen de la seleccin, se muestran las propiedades aplicadas sobre la seleccin, aunque estas provengan de distintas reglas.
Por ejemplo, a un texto le pueden afectar las reglas generales de la pgina, las del prrafo, etc.
La parte central muestra la seccin Reglas / Acerca de, pudiendo cambiar entre ellas con los botones
La vista Reglas muestra las reglas que afectan a la seleccin.
La vista Acerca de nos dice dnde est definida la propiedad seleccionada.
La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aqu podemos editarlas.
Una opcin muy interesante del panel es que nos permite activar/desactivar propiedades solo con hacer clic a la izquierda de su nombre.
Esto nos permite comprobar rpidamente cmo afectan los estilos a nuestra pgina.
El modo Todo.
En este modo obtenemos informacin sobre los estilos disponibles en el documento actual, independientemente de la seleccin.
Tenemos dos secciones:
En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento o en hojas de estilo enlazadas.
En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas.
En ambos modos, en la parte inferior encontramos las mismas opciones.
Desde los botones
podrs ordenar las propiedades de diferentes maneras. Con el primer botn mostrars todas las
propiedades ordenadas por categoras (Fuente, Fondo, Bloque,Borde, etc.); tambin puedes mostrarlas ordenadas de la A a la Z con el
segundo botn.
En la esquina inferior derecha encontramos los controles que nos permiten gestionar las reglas:
De izquierda a derecha,
estos controles nos sirven para adjuntar una hoja de estilo, crear una regla, editar la regla seleccionada o borrarla.
Unidad 4. Avanzado: El panel Estilos CSS (I)
Veamos cmo funciona el panel Estilos CSS
El panel Estilos CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rpida y sencilla, los estilos creados de esta manera se
pueden guardar en nuestro documento, pero tambin podemos utilizar estilos que se encuentren en hojas externas al documento. Esta
particularidad es muy til cuando diseamos un sitio web con varias pginas ya que permite definir una sola hoja de estilos que utilizarn
todas las pginas del sitio y as facilitar el diseo.
Vamos a ver cmo funcionan las hojas de estilo a travs del panel CSS que puede abrirse a travs del men Ventana, opcin Estilos
CSS. Existen otras alternativas para abrir este panel, una es pulsando Mays + F11, o puedes hacer clic en el botn Panel CSS que aparece
en el Inspector de Propiedades CSS.
El panel tiene dos modos de visualizacin, representados por dos botones bajo el nombre del panel. Vemoslos:
El modo Actual.
Este modo nos ofrece informacin sobre qu estilos estn afectando a la seleccin.
Se divide en tres secciones:
En Resumen de la seleccin, se muestran las propiedades aplicadas sobre la seleccin, aunque estas provengan de distintas reglas.
Por ejemplo, a un texto le pueden afectar las reglas generales de la pgina, las del prrafo, etc.
La parte central muestra la seccin Reglas / Acerca de, pudiendo cambiar entre ellas con los botones
La vista Reglas muestra las reglas que afectan a la seleccin.
La vista Acerca de nos dice dnde est definida la propiedad seleccionada.
La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aqu podemos editarlas.
Una opcin muy interesante del panel es que nos permite activar/desactivar propiedades solo con hacer clic a la izquierda de su nombre.
Esto nos permite comprobar rpidamente cmo afectan los estilos a nuestra pgina.
El modo Todo.
En este modo obtenemos informacin sobre los estilos disponibles en el documento actual, independientemente de la seleccin.
Tenemos dos secciones:
En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento o en hojas de estilo enlazadas.
En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas.
En ambos modos, en la parte inferior encontramos las mismas opciones.
Desde los botones
podrs ordenar las propiedades de diferentes maneras. Con el primer botn mostrars todas las
propiedades ordenadas por categoras (Fuente, Fondo, Bloque,Borde, etc.); tambin puedes mostrarlas ordenadas de la A a la Z con el
segundo botn.
En la esquina inferior derecha encontramos los controles que nos permiten gestionar las reglas:
De izquierda a derecha,
estos controles nos sirven para adjuntar una hoja de estilo, crear una regla, editar la regla seleccionada o borrarla.
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.
Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de insercin, pero sin seleccionar, el
estilo se aplicar a la primera etiqueta que contenga el texto (por ejemplo el prrafo).
En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al
desplegar el cuadro Regla de Destino. Desde las propiedades HTML tambin 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 estan accesibles desde el men Formato Estilos CSS.
Observa que existe una clase llamada ninguna. Lo que hace esta opcin 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.
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. Ejercicio: Crear y aplicar una clase
Objetivo
Ejercicio
4. Haz
doble
clic
sobre
el
documento postresemana.htm,

5. Haz doble clic sobre la palabra Comensales para seleccionar la palabra completa.
que
aparece
en
el
panel Archivos.
6. En el Inspector de propiedades CSS, pulsa el icono
para poner el texto en cursiva.
7. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido Clase.
8. En Nombre de selector, escribe info, y en Definicin de regla deja Slo este documento.
9. Pulsa Aceptar.
10. En el selector de color, escribe #678090.
11. Selecciona el texto Tiempo de reparacin.
12. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige info.
13. Selecciona el texto Tiempo de coccin, y repite el paso anterior.
14. Haz doble clic sobre Ingredientes para seleccionar el texto.
15. En el Inspector de propiedades CSS, pulsa el botn Editar regla.
16. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Clase. En Nombre de selector, escribe instrucciones.
17. Pulsa Aceptar.
18. En la categora Tipo, en Font-weight, selecciona bold.
19. En Color introduce #678090.
20. Pulsa Aceptar.
21. Haz doble clic sobre Preparacin para seleccionar el texto.
22. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige instrucciones.
El aspecto de la pgina postresemana.htm, con los cambios que hemos realizado hasta este ejercicio es el que puedes ver aqu.
Unidad 4. Ejercicio: Modificar el estilo de una lista
Objetivo
Ejercicio
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Recuerda que este archivo lo creamos en ejercicios
anteriores.
5. Inserta
Quines
Plato
Postre
Tu Receta
los
6. Selecciona todos los prrafos y pulsa el botn

propiedades HTML.
siguientes
prrafos:
somos
Semana
Semana
para convertirlo en una lista no ordenada. Debes hacerlo desde el Inspector de
7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista.
8. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
9. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido Clase.
10. En Nombre de selector, escribe .menu, y en Definicin de regla deja Slo este documento.
11. Pulsa Aceptar.
12. En la categora Tipo, en Font-weight, selecciona bold, y en Font-size 12px.
13. En la categora Cuadro, en Width introduce 100px. Padding, deja marcado Igual para todo e introduce 0 en Top. En Margin,
desmarca Igual para todo e introduce auto en Left y Right.
14. En la categora Lista, en List-style-type selecciona none.

15. Pulsa Aceptar.
16. Aplcale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML.
17. Haz clic en el primer elemento de la lista.
19. Observa que aparece el selector compuesto .menu li. Es decir, el estilo afectar a los elementos de lista que estn dentro de una lista
con la clase menu. Pulsa Aceptar.
20. En la categora Fondo, en background-color introduce #FFF, en background-image pulsa Examinar y elige fondo-menu.png de la
carpeta imagenes.
21. En Background-repeat elige repeat-x y en background-position (Y) elige bottom.
22. En la categora Bloque, en Text-align, selecciona center.
23. En la categora Cuadro, en Margin, desmarca Igual para todo e introduce 10 en Bottom.
24. En la categora Borde, en Style, deja marcado Igual para todo y elige solid en Top. En Width introduce 1. Desmarca Igual para
todo en Color e introduce, de arriba a abajo, #999, #333,#333, #999.
25. Pulsa Aceptar.
26. Haz clic en el primer elemento de la lista.
28. Observa que aparece el selector compuesto .menu li. Compltalo para que quede .menu li:hover (cuando el cursor est sobre el
elemento). Pulsa Aceptar.
29. En la categora Fondo, en background-color introduce #FFEDCF y pulsa Aceptar.
4.8. Hojas de estilos

Exportar estilos
Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que los necesitaremos en otras pginas del sitio,
los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fcilmente.
Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo. Agrupados en <style> encontramos los
estilos creados en la pgina.
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 aadirn a ella.
Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas. Deberemos de indicar dnde queremos guardar el
archivo, normalmente en la misma carpeta que las pginas.
Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de estilos.
Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, 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 extensin .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 4. Ejercicio: Exportar y vincular hojas de estilo
Objetivo
Practicar las operaciones necesarias para unificar los estilos declarados en distintas pginas en una nica hoja de estilos y vincularla
al resto de pginas.
Ejercicio 1: Exportar estilos

4. Haz
doble
clic
sobre
el
documento menu.htm,
que
aparece
en

5. Ve al men Ventana y elige Estilos CSS. Se abrir el panel.
6. Haz clic en el botn Todo.
7. Selecciona las reglas que cuelgan de style.
8. Haz clic derecho sobre ellas y elige Mover reglas CSS....
9. Marca Una nueva hoja de estilos... y pulsa Aceptar.
10. Asegrate de tener elegida la carpeta del sitio Cocina, escribe el nombre estilococina y pulsa Guardar.
11. Ve al men Archivo y elige Guardar todo.
el
panel Archivos.
12. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
13. Repite los pasos 5 a 8 para exportar sus estilos.
14. En la ventana Mover hoja de estilos externa, pulsa Examinar... y elige el archivo estilococina.css.
15. Pulsa Aceptar.
16. Nos advertir de que hay dos reglas con el mismo nombre. Pulsamos S para mantener ambas.
17. Ve al men Archivo y elige Guardar todo.
Ejercicio 2: Vincular hojas de estilo

2. Haz doble clic sobre el documento platosemana.htm, que aparece en el panel Archivos.
3. Ve
al
men Formato Estilos
Se abrir la hoja Vincular hoja de estilos externa.
CSS y
elige Adjuntar
hoja
de
estilos...
4. Pulsa Examinar y elige la hoja estilococina.css.

5. En Aadir
como deja Vincular y
pulsa Aceptar.
Observa cmo ha cambiado todo el diseo. Ten en cuenta que las clases info e instrucciones ya estaban aplicadas a los textos
correspondientes.
6. Haz
clic
sobre
el
botn Guardar
de
la
barra
de
herramientas
7. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
8. Ve al men Ventana y elige Estilos CSS. Se abrir el panel.
9. Haz clic en el botn Todo.
10. Selecciona <style>.
11. Pulsa el botn
, en la esquina inferior derecha, para borrar los estilos incrustados.
12. Pulsa el botn
para adjuntar una hoja de etilos.
pulsa Ctrl + S para
guardar
los
cambios.
13. Se abrir la hoja Vincular hoja de estilos externa con las opciones ya seleccionadas. Si no, sigue el paso 4.
14. Pulsa Aceptar.
Ejercicios unidad 4: El texto: propiedades y formato
1. Abrir el sitio Deportes.
3. Edita el estilo de la pgina. Asigna la propiedad margen a 20px para todos los lados. El fondo debe ser posicionado en el centro en el
eje horizontal y arriba en el eje vertical.
4. Crea una regla de estilo para la etiqueta HTML. En ella debes de cambiar las propiedades para que muestre la
imagen fondo.png como fondo, ocupando la parte superior de la pgina, y estableciendo como #E0E5EF color de fondo. La regla slo
afectar a la pgina actual.
5. Crea una regla de estilo para el elemento con ID menu. Debes de establecer las siguientes propiedades: En propiedades de Cuadro,
ancho 600px, y los mrgenes superior: 80px, inferior 10px y laterales auto. Adems en propiedades de Tipo, el color del texto ha de
ser #EFF4FF y
estar
en negrita a 18px.
En
las
propiedades
de Bloque,
centra
el
texto.
Selecciona la tabla (etiqueta table). Es el primer texto, el que aparece con un marco punteado. Asgnale el ID menu.
Edita la regla body,th,td cambiando su selector a slo body.
6. Que los encabezados 1 tengan el color #738098.
7. Exporta las reglas a una nueva hoja de
pginas donde.htm, instalaciones.htm, y reservas.htm.
estilos
llamada estilodeportes.css.
Vincula
esa
hoja
8. En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las instalaciones en una lista desordenada.
las
9. Guardar los cambios y cerrar el documento.
Si no tienes muy claro las operaciones a realizar para resolver este ejercicio, Aqu te lo explicamos.
1. Abrir el sitio Animales.
2. Abrir el documento perros.htm.
3. Convertir la primera lnea Perros a un encabezado 1.
4. Asignarle un estilo cursiva, con un tamao de fuente de 36px. Definir la regla solo en este documento.
5. Al prrafo Cuidados Postnatales asignarle un tamao de fuente de 18px, en cursiva y negrita.
6. Guarda el estilo como titulo. Definir la regla solo en este documento.
7. Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de color #EFEFD1.
8. Mueve estas Reglas CSS a una nueva hoja que vinculars a este documento. Llmala estiloanimales.css.
9. Abrir el documento index.htm y asignarle la hoja de estilos estiloanimales.css.
10. Convertir la primera lnea de texto a un encabezado 1.
11. Abrir el documento consultas.htm y asignarle la hoja de estilos estiloanimales.css.
13. Abrir el documento gatos.htm y asignarle la hoja de estilos estiloanimales.css.
15. Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo.
16. Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la segunda lnea.
17. Guardar los cambios y cerrar los documentos.
Si no tienes muy claro las operaciones a realizar para resolver este ejercicio, Aqu te lo explicamos.
Unidad 5. Hiperenlaces (I)
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.
5.1. Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o
archivo.
Es posible asignar un vnculo 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 podrs observarlo en la barra de estado:
5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan a los enlaces, se comportarn
igual cuando indiquemos la ubicacin 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.
La referencia absoluta es independiente de la ubicacin de la pgina que contiene el enlace, y ser vlida siempre que no cambie la
ubicacin del archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
Referencia relativa al documento (por defecto):

La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la pgina. Es decir, partimos de la carpeta en la que se
encuentra el documento.
Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no tenemos ms que utilizar su nombre. Por
ejemplo, pagina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms 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 estn por encima del nivel donde nos encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina
queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos
hacerlo? Fcil. 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 sera 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 opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas.
Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual para enlazar archivos dentro del sitio.
5.3. Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el
objeto que va a servir de enlace, y seguidamente establecer el Vnculo 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://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir
en Vnculo nicamente una almohadilla #. Veremos su utilidad ms adelante.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar
en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah.
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers 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 pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la
tecla Alt ms la tecla de acceso indicada.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo
podrs 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 tabularn por orden de aparicin.
Unidad 5. Avanzado: Configurar nuevos enlaces
Crear vnculos relativos automticamente
Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos editar la configuracin del sitio. Bastar
con seleccionar el sitio y hacer doble clic en el cuadro de dilogo, o seleccionar el sitio y pulsar en el icono Editar.
Se abrir la ventana de Configuracin del Sitio. All selecciona la categora Informacin local dentro del grupo Configuracin
avanzada, y podrs ver las siguientes opciones:
Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz del sitio en Vnculos relativos a: para
que se creen los enlaces relativos al documento donde se halla situado el enlace o desde la raz del sitio.
Si seleccionas la opcin Raz del sitio, los enlaces se establecern respecto a la carpeta seleccionada en el campo Carpeta raz local:.
Pero recuerda que en nuestro sitio local no funcionarn a no ser que instalemos un servidor de pruebas.
Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta configuracin a los vnculos que se creen a
partir de ese momento.
5.4. Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de si el documento est
basado en marcos.
Puede especificarse en el inspector de propiedades HTML a travs de Destino, o en la ventana que aparece a travs del
men Insertar, opcin Hipervnculo.
_blank:
Abre el documento vinculado en una nueva ventana o pestaa del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Tiene sentido si se
emplean marcos.
_self:
Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.
_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 volvern a ver en el tema
de Marcos.
Si la pgina no usa marcos (lo habitual hoy en da) 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 pginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia
dice que una pgina nunca debera de abrir nuevas ventanas, y que debe de ser el usuario el que decida qu enlaces quiere abrir en
ventanas nuevas. En la mayora de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratn.
5.5. Formato del enlace

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes
que pueden especificarse a travs de las propiedades de la pgina. Estos cuatro colores diferentes corresponden a los tres estados del
vnculo: vnculo normal, vnculo activo (el ltimo pulsado), vnculo visitado o vnculo de sustitucin (cuando el cursor est sobre el vnculo).
Aqu tienes dos vnculos de ejemplo:
www.aulaclic.es www.elpais.com
Si has visitado alguno, vers que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra pgina, los vnculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para
ello, basta con crear una Regla de estilo para la etiquetaa.
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.
Aunque recuerda que en las propiedades del documento tenamos la categora Vnculos CSS que nos permite establecer estos valores.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est
definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aqu tenemos dos vnculos en una imagen:
Como puedes ver, la primera imagen que hace de vnculo contiene un recuadro alrededor. Este es el formato por defecto, pero no suele
quedar bien, sobre todo en imgenes con el fondo transparente.
Las ltimas versiones de los navegadores Chrome (v.24) y Firefox (v.18) ya no dibujan el contorno de la imagen, IE 9 si lo dibuja.
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, imgenes que estn dentro de una
etiqueta a (de enlace).
Se abrir la ventana Definicin de regla para a img:
En ella, seleccionamos la categora Borde, y en Style seleccionamos none. Pulsamos Aceptar.

Esta regla har que las imgenes con enlace se muestren sin borde.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la
apariencia de una mano sealando.
Unidad 5. Ejercicio: Crear un hiperenlace
Objetivo
Practicar cmo crear un hiperenlace.
Ejercicio
5. Se abrir el documento en Dreamweaver.
6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades.
7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn
para desplegar sus propiedades ms avanzadas.
8. Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella.
9. En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.es.
10. En Dest selecciona la opcin _blank.
11. Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios.
12. Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn encima de la imagen, el puntero del ratn cambia
de aspecto (normalmente toma forma de mano con el dedo ndice sealando) esto te indica que asociado a la imagen hay un
hiperenlace
y
en
la
barra
de
estado
puedes
ver
la
pgina
a
la
que
enlaza.
Observa tambin que la imagen muestra un recuadro naranja alrededor, que no queda demasiado bien con su fondo transparente.
13. Cierra la ventana del navegador.
14. Vamos a quitar el borde de la imagen. En el Inspector de propiedades CSS, en Regla de destino, elige Nueva regla, y pulsa el
botn Editar regla.
15. En Tipo de selector elige Compuesto.
16. En Nombre del selector, escribe a img.
17. En Definicin de regla selecciona la hoja estilococina.css.

18. Pulsa Aceptar.
19. Ve a la categora Borde. En Border-style elige none y pulsa Aceptar.
20. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
21. Para cada elemento de la lista, selecciona el texto y crea el enlace a la pgina correspondiente del sitio. No pongas nada en Destino.
22. Con el cursor en un elemento de la lista, en el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva
regla CSS> y pulsa en Editar regla.
23. Observa que aparece el selector compuesto .menu li a. Pulsa Aceptar.
24. En la categora Tipo, en color introduce #000 y en Text-decoration selecciona none.
25. En la categora Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top.
26. En la categora Bloque, en Display, selecciona Block. Esto har que el enlace ocupe todo el elemento de la lista.
27. Pulsa Aceptar.
29. Observa que aparece el selector compuesto .menu li a. Compltalo para que quede .menu li a:hover (cuando el cursor est sobre el
elemento). Pulsa Aceptar.
30. En la categora Tipo, en Color introduce #DB8C15 y pulsa Aceptar.
31. Haz clic en el men Archivo Guardar todo.
5.6. Enlace a correo electrnico

Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de la web puedan
contactar con nosotros.
La sintaxis del vnculo en este caso es mailto:direccindecorreo.
Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.
Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de correo.
Lo que hace esta opcin depende del navegador que estemos utilizando, tericamente, el navegador debera abrir el cliente de correo
predeterminado del usuario (Outlook, Firebird...). Pero en la prctica cada navegador se comporta de una forma distinta, sobre todo si no
tenemos instalado un cliente de correo electrnco y vemos el correo con webmail (Gmail, Hotmail, ...)
Por ejemplo, con las versiones disponbles a la hora de escribir esto, IE9 da un mensage de error diciendo que no hay ningn cliente de
correo instalado, Firefox saca una ventana ofreciendo abrir un correo webmail y Chrome no hace nada.
Por lo tanto usar mailto es una opcin que puede no ser prctica si el usuario no tiene instalado un cliente de correo (Outlook, Firebird...),
tamoco si se conecta en un ordenador pblico, o si utiliza un telfono mvil o una tableta.
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir una pgina dinmica como veremos a lo largo del
curso. Otra opcin sera mostrar nuestra direccin de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos
nuestra direccin en la web es mejor hacerlo como una imagen, o escribindola de forma que la pueda entender un humano (por
ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearn para el envo de correo no deseado.
Unidad 5. Ejercicio: Crear un vnculo de correo electrnico
Objetivo
Practicar cmo crear un vnculo de correo electrnico.
Ejercicio
3. Selecciona el sitio Cocina en el panel Archivos
4. Haz
doble
clic
sobre
el
documento quienes.htm,
que
aparece
en
el
panel
desplegable
de Archivos.
6. Al final del todo, en una nueva lnea, escribe el texto Buscamos cocinero. Si quieres trabajar con nosotros, envanos tu CV aqu..
7. Selecciona la palabra aqu que acabas de escribir.
8. En Vnculo, del inspector de propiedades, escribe mailto:trabajo@aulaclic.es (es una direccin ficticia. Puedes emplear la tuya para
comprobar si funciona).
9. Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo cambio.
10. Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el texto se abre tu aplicacin de correo (si la tienes
instalada en tu ordenador) preparada para que escribas el texto del mensaje que quieres enviar, en la direccin de destino habr
puesto trabajo@aulaclic.com.
11. Cierra tu aplicacin de correo.

Ejercicios unidad 5: Hiperenlaces
1. Abrir el sito Deportes.
2. Abrir los documentos index.htm, donde.htm, instalaciones.htm y reservas.htm.
3. Observa que al principio de cada uno se repite el mismo men. Para cada palabra, crea los siguientes enlaces:
o
Crear un hiperenlace a index.htm en el texto Quines.
Crear un hiperenlace a donde.htm en el texto Dnde.
Crear un hiperenlace a instalaciones.htm.
Crear un hiperenlace a reservas.htm en el texto Reservas.
No crees el enlace que lleva a la pgina actual.

1. Abrir el sito Animales.

3. Crear un hiperenlace a www.aulaclic.es en la imagen de aulaClic.
4. Hacer que el enlace se abra en una ventana nueva del navegador.
5. Hacer que las imgenes con enlaces no muestren bordes.
Unidad 5. Avanzado: Vnculos rotos
Comprobacin de vnculos rotos

Los Vnculos rotos son vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe.
La existencia de estos vnculos en nuestras pginas es un error, ya que no permite navegar correctamente a los usuarios por nuestro sitio,
adems del efecto negativo que causa.
Los servidores de tipo UNIX/Linux distinguen entre maysculas y minsculas. As, por ejemplo, si enlazas a un archivo Perros.htm puede
que el servidor no lo encuentre porque en realidad lo hayas llamado perros.htm (en minsculas).
Trabajando con Windows este tipo de errores no se presentan porque no hace esta distincin. En el ejemplo anterior Dreamweaver
considerara el enlace Perros.htm correcto aunque no lo fuese.
Para evitar esto puedes activar la opcin Comprobacin de vnculos con distincion entre maysculas y minsculas que se encuentra
en la ventana deConfiguracin del Sitio, dentro deConfiguracin avanzada en la categora Informacin local.
Configuracin del Sitio. All selecciona la categora Informacin local dentro del grupo Configuracin avanzada
Para comprobar si nuestro sitio tiene Vnculos rotos hay que abrir el Verificador de vnculos.
Accedemos a l desde el men Sitio Comprobar vnculos en todo el sitio o con las teclas Ctrl + F8.
Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos.
En la imagen vemos que no se ha encontrado un archivo enlazado, posiblemente porque el nombre est mal escrito, y una imagen.
Lo primero que hay que hacer es pulsar sobre el botn
, a travs del cual se ofrece la posibilidad de elegir dnde se comprobarn los
vnculos rotos. Puede ser en el documento actual, entodo el sitio, o en los archivos o carpetas del sitio seleccionados previamente.
A travs de Mostrar hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos externos o Archivos hurfanos.
Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe.
Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero que no necesariamente son vnculos
errneos. No comprueba si estos vnculos son correctos o no, simplemente los enumera.
A travs de Vnculos hurfanos se muestran todos aquellos archivos del sitio que no estn siendo vinculados por otros, a la vez que
tampoco contienen vnculos a otros documentos. Estos documentos, en ocasiones, pueden no estar siendo utilizados para nada, por lo
que simplemente estn ocupando espacio en disco innecesariamente. Pero en otras ocasiones, tal vez si que los empleamos, slo que
en vez de enlazarlos, accedemos a ellos por javascript u otros medios. En este caso s son necesarios, aunque se marquen como
hurfanos.
De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el panel se mostrarn todos los
documentos que tienen un vnculo roto, y el documento al que cada uno de esos vnculos hace referencia.
Reparacin de vnculos rotos
Podemos reparar los vnculos rotos de dos formas:
Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de archivos del panel. De este modo, dicho
documento se abre. Entonces es posible buscar dentro del documento el vnculo errneo y modificarlo a travs del Inspector de propiedades.
La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este caso es posible modificar directamente el
nombre del documento en el panel, o buscarlo a travs del icono con forma de carpeta que aparecer a su derecha.
Unidad 6. Imgenes (I)
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales,
como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.
6.1. Introduccin
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la informacin o parte del diseo, la hacen mucho
ms atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarn mucho el tamao final de la web.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin
puedes consultarla aqu
6.2. Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen
a travs de la nueva ventana. Cuando te acostumbres, te ser ms cmodo acceder con la combinacin de teclas Ctrl + Alt + I.
En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa
al Documento, ya que si cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
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 raz del sitio o relativa al
documento.
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el
que deseamos insertar la imagen. Dicha imagen, llamadaaulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecer as
que el enlace al archivo est roto.
En ese caso, la imagen que aparecer en el navegador ser similar a sta:
indicando
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector
propiedades, que explicaremos a continuacin.
Unidad 6. Ejercicio: Insertar una imagen
Objetivo
Practicar las operaciones que hay que realizar para insertar una imagen.
Ejercicio
6. Crea un prrafo antes de la lista.
7. Haz clic sobre el men Insertar.
8. Elige la opcin Imagen.
9. Selecciona la imagen logotipo.gif, que se encuentra dentro de la carpeta imagenes del sitio.
10. En Relativa a: selecciona la opcin Documento.
12. En el Inspector de propiedades, escribe Cocina en el campo Alt.
13. Pulsa fuera de la imagen para que deje de estar seleccionada y se apliquen todos los cambios.
de
14. Selecciona la etiqueta <body> en la barra de estado.

15. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nuevo estilo en lnea>
16. Pulsa el botn Centrar
17. Pulsa Vista en vivo para cmo sera el resultado.

Unidad 6. Avanzado: Formatos de imagen para web
Formatos de imagen
Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, tiff, etc. Pero no todos estos formatos son adecuados para
una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.
Los formatos ms utilizados para web son el GIF, el PNG y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes
BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos formatos:
Formato GIF:
Utilizan un mximo de 256 colores, y son recomendables para dibujos con grandes reas de un mismo color o de tonos no continuos.
Tambin si se muestra texto.
Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones.
En cambio, no estn recomendados para fotografas, ya que se perderan colores, y al no tener reas de color continuo, el archivo final
sera mayor que por ejemplo un JPG.
Formato JPG:
Estas imgenes pueden contener millones de colores, en un archivo comprimido de tamao razonable. Por ejemplo, las imgenes que
obtenemos de una cmara digital suelen estar en este formato.
Por tanto, son especialmente indicadas para fotografas, o grficos complejos, obteniendo mejores resultados que el GIF.
En cambio, en grficos con pocos colores y continuos, generar un archivo mayor que el GIF, y podremos apreciar prdida de calidad.
Formato PNG.
Se trata de un formato de compresin sin perdida. Tiene varias versiones:
PNG 8 es un formato de 256 colores muy similar al GIF, que en teora obtiene archivos algo menores. Tambin 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 tamao 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 tambin de mayor tamao. Este formato es el ms
adecuado cuando necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus
colores y detalles, evitando la prdida de calidad que puede producir JPG. Tambin resulta especialmente indicado para imgenes con
degradados de color.
Lo habitual es utilizar GIF o PNG para pequeos grficos, normalmente elementos del diseo o imgenes simples, y JPG para fotografas,
sean del tamao 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 pgina pueda ver las imgenes.
Si introduces una imagen no soportada en Dreamweaver, te aparecer un cuadrado gris
en su lugar.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, 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 imgenes. Para realizar
modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
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:
Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la direccin en el campo Vnculo, y decidir en qu
ventana se abre con el campo Destino. Origen contiene el path (cmino) de la imagen.
En el campo Alt escribimos el texto que remplazar a la imagen si sta no puede mostrarse. Es un atributo muy importante que
deberamos incluir siempre para hacer pginas accesibles. Por ejemplo, el texto que se escribe ser ledo 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 cdigo fuente con el
formato title="Texto a mostrar". Internet Explorer en versiones anteriores a la versin 9, mostraba Alt como ayuda contextual
cuando la imagen no lleva title, pero el resto de navegadores no lo harn, respetando el estndar.
An. y Al. son las dimensiones de la imagen, ancho y alto. Dreamweaver las pondr directamente.
En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un
clic.
El ID es un identificador opcional para usarlo con CSS o Javascript.
Podemos hacer que cada zona de la imagen tenga un vnculo 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.
Adems, encontramos algunos controles de Edicin: El botn

formato o creando transparencias como puedes ver aqu
nos permite optimizar la imagen desde Dreamweaver, cambiando el
. Por otro lado, el icono
externo, como Photoshop o Paint. Puedes ver cmo cambiar el programa de edicin aqu
nos permite editar la imagen con un programa

.
Unidad 6. Ejercicio: Crear Mapas de imagen
Objetivo
Practicar las operaciones que hay que realizar para insertar mapas de imagen.
Ejercicio
4. Haz
doble
clic
sobre
el
documento menu.htm,
que
aparece
en
el
panel Archivos.
5. Si no aparece el Inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades.
6. Selecciona la imagen, haciendo clic sobre ella.
7. Si el Inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn
avanzadas.
8. Haz clic sobre el botn Herramienta Zona interactiva poligonal
para desplegar sus propiedades ms
, del inspector de propiedades .
9. Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la izquierda.
10. Haz clic sobre el botn Herramienta Puntero de zona interactiva
mapa.
, del inspector de propiedades para terminar de delimitar el
11. Haz clic sobre el botn Herramienta Zona interactiva poligonal
, del inspector de propiedades .
12. Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la derecha.
13. Haz clic sobre el botn Herramienta Puntero de zona interactiva
, del inspector de propiedades.
14. Haz clic sobre el mapa del gorro de la izquierda.

15. En Vnculo, del inspector de propiedades, escribe platodelasemana.htm.
16. En Alt, escribe Plato de la semana.
17. Haz clic sobre el mapa del gorro de la derecha.
18. Haz clic sobre el icono de la carpeta que aparece junto al campo Vnculo.
19. En el dilogo, busca y selecciona el archivo postredelasemana.htm. Pulsa Aceptar.
20. En Alt, escribe Postre de la semana.
21. Pulsa fuera del mapa para que deje de estar seleccionado y se le aplique el ltimo cambio.
23. Pulsa F12 para ver el resultado en tu navegador. Comprueba que cuando posicionas el puntero del ratn sobre los gorros, en la barra
de estado aparece el enlace a la pgina web correspondiente.
24. Haz clic cobre alguno para comprobar que se abre la pgina correspondiente.
Unidad 6. Avanzado: Mapas de imagen
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn tipo de comportamiento.
Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear el mapa, y abrir el inspector de
propiedades de dicha imagen.
Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de propiedades que tienen el
siguiente aspecto:
. Si no te aparecen despliega el panel Propiedades para verlo completo.
Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma rectangular, circular, o libre,
dependiendo del botn pulsado.
Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya es posible dibujar el
mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en
orden) que se desea que recorra el mapa en el caso de forma libre.
Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo y un texto alternativo a ese mapa como
puedes ver a continuacin:
El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el puntero recupere su forma original
al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios
deseados, para ajustarlos mejor a la imagen.
Aqu tienes un ejemplo de mapa de imagen. Sita el puntero sobre la cabeza del perro, y vers que es la nica parte de la imagen que
contiene un enlace.
Unidad 6. Avanzado: Cambiar formato y crear transparencias (I)
Cambiar el formato del archivo

Dreamweaver nos permite optimizar una imagen, simplemente pulsando el botn
del Inspector de propiedades de la imagen.
Al pulsarlo, accedemos a la ventana Optimizacin de imgenes, similar a la que vemos a continuacin:
En el desplegable Preestablecido podemos elegir entre varias opciones:

PNG 24 para fotos (detalles ntidos).
JPEG para fotos (tonos contnuos)
PNG 8 para logotipos y texto.
JPEG alto para obtener la mxima compatibilidad..
GIF para imgenes de fondo (patrones).
PNG 32 para imgenes de fondo (degradados).
Para cada una de las anteriores opciones encontraremos unas posibilidades de optimizacin. Por ejemplo, segn se muestra en la
imagen, para GIF podemos elegir Color de 256, 128, 64, ... segn queramos obtener ms o menos calidad de imagen. Tambin podemos
decidir que cantidad de Perdida deseamos, a ms perdida memos calidad y menos tamao de la imagen.
Si partimos de una imagen de calidad alta, por ejemplo, PNG 32, podemos convertirla en una imagen GIF de baja calidad y poco peso en
Kb. En este caso nos pedir que guardemos la imagen con la nueva extensin .gif.
Esto tiene sentido si tenemos una imagen que son, por ejemplo, unas letras con un fondo homogneo y que no necesita mucha resolucin
para verse bien. Si por el contrario, tenemos una imagen de un paisaje con bastantes detalles y colores degradados en el cielo, al subir
mucho el parmetro de Perdida la imagen quedar bastante mal.
Lo que se pretende es bajar la calidad para lograr un buen equilibrio o entre tamao y calidad, ajustndolo a las necesidades concretas
de la imagen.
Unidad 6. Avanzado: Programas de edicin de imgenes
Elegir un programa de edicin

Dreamweaver nos permite abrir un programa para editar la imagen, simplemente pulsando el botn
Lo primero que tenemos que hacer, es elegir un programa como predeterminado para cada formato de imagen. Para ello, accedemos al
men Edicin Preferencias.... En la ventana dePreferencias, seleccionamos la categora Tipos de archivo/editores.
Para la extensin 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, elegiremos uno o varios editores de
la lista. Podemos aadir ms editores pulsando en el icono + sobre la lista de editores. Al hacerlo, se abrir el dilogo del sistema operativo,
en el que tenemos que elegir el archivo ejecutable (acabado en .exe) de la aplicacin.
La lista de editores asociados nos aparecer al hacer clic derecho sobre la imagen, en el submen Editar con.
Es convinente establecer un editor como principal pulsando en Convertir en principal. Una vez establecido un editor principal para un
tipo de archivo, el icono
ser sustituido por el icono de dicho programa, por ejemplo, para Photoshop
Al pulsar sobre dicho icono se abrir el programa correspondiente que hemos establecido como principal.
6.4. Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes.
Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero dicho cambio de tamao no se aplica directamente sobre
el archivo de imagen, que conservar el tamao original.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola 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 tamao de
varias formas diferentes:
Tamao original
Con tamao modificado

El resultado puede ser ms o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en
ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamao.
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 travs de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecern en el inspector
cuando est seleccionada alguna imagen.
Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha
circular que permite volver al tamao original haciendo clic sobre ella.
Como hemos comentado, este cambio de tamao se produce alterando los atributos de anchura y altura, pero no cambiando el tamao
real del archivo, por lo que el usuario deber descargarse el archivo completo con su tamao original.
Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un tamao grande (por ejemplo 2592x1944px), y queremos mostrar
una miniatura (por ejemplo, de 200x150px) esta sera una mala solucin, porque el usuario se estara descargando el archivo completo, y no
una miniatura real que ocupara mucho menos tamao.
Dreamweaver tambin nos permite cambiar el tamao real del archivo de imagen abriendo un editor de imagen.
Para hacerlo, seleccionamos la imagen, y pulsamos en el icono
del Inspector de propiedades. Se abrir la ventana del editor de
imagen que hayamos definido como predeterminado (como vimos en el tema avanzado Cambiar el programa de edicin), si no lo hemos
hecho nos preguntar que programa de edicin queremos utilizar.
6.5. Imagen de sustitucin. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o
en los botones para desplazarnos a travs de distintas pginas.
Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes
Hemos creado el siguiente rollover. Sita 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 opcin Imagen de sustitucin. En la nueva ventana
hay que especificar la imagen original y la de sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se
carga la pgina, 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 algn motivo sta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs 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 ms utilizados. Bsicamente consiste en cambiar la
imagen de fondo de un elemento. Puedes ver un ejemplo de barra de navegacin utilizando CSS en este avanzado
Unidad 6. Ejercicio: Crear Rollovers
Objetivo
Practicar las operaciones que hay que realizar para crear botones Flash.
Ejercicio
4. Haz
doble
clic
sobre
el
documento menu.htm,
que
aparece
en
el
panel Archivos.
5. Inserta dos lneas en blanco bajo la lista que forma el men (pulsando Intro) y sita el cursor al final.
7. Elige la opcin Objetos de Imagen.
8. Elige la opcin Imagen de sustitucin. Se abrir una nueva ventana.
9. En Nombre de imagen escribe Correo.
10. En Imagen original pulsa el botn Examinar y selecciona la imagen email1.gif que se encuentra dentro de la carpeta imagenes del
sitio.
11. En Imagen de sustitucin pulsa el botn Examinar y selecciona la imagen email2.gif que se encuentra dentro de la
carpeta imagenes del sitio.
12. Activa la casilla Carga previa de imagen de sustitucin.

13. En Texto alternativo escribe e-mail.
14. En Al hacerse clic, ir al URL escribe mailto:cocineros@aulaclic.es. Esta direccin es ficticia, puedes poner cualquiera.
16. Pulsa Vista en vivo para ver el resultado.
17. Pasa el cursor sobre la imagen para comprobar que cambia.
de la barra de herramientas o pulsa Ctrl + S.
Unidad 6. Avanzado: Men CSS
Objetivo
Vamos a crear el siguiente men inspirado en el de Windows Vista, utilizando imgenes y CSS:
Inicio
Pgina 1
Pgina 2
Pgina 3
Pgina 4
En la carpeta ejercicios\menuCSS encontrars los archivos necesarios para crear este men.
Observa que tienes las distintas imgenes que se muestran en los elementos del men.
Nota: Para crear este men utilizaremos propiedades CSS y elementos HTML que todava no hemos visto. No vamos a entrar en detalles
de cada uno, ya que esto lo haremos ms adelante. nicamente queremos ilustrar lo que podemos lograr con CSS.
Crear el men
1. Desde el men Archivo, haz clic en Abrir y busca el archivo menu.htm que encontrars en la carpeta ejercicios\menuCSS.
Observa
que
tenemos
varios
los
distintos
elementos
del
men
como
prrafos
distintos.
Lo habitual es crear los mens a partir de listas. Por tanto vamos a convertirlo.
2. Selecciona los prrafos, y pulsa el botn
para convertirlos en una lista.
3. Si
te
fijas
en
la
barra
de
estado,
vers
una
etiqueta <div>.
Haz
Ahora le vamos a signar un ID, para distinguirlo del resto de elementos que podra tener nuestra pgina.
4. En
el
desplegable
ID
Vamos ahora a crear las reglas CSS para los distintos elementos.
5. En el Inspector de propiedades CSS, haz clic en el botn Nueva regla.
de
div,
clic
sobre
ella.
escribe menu.
6. Elige
7. Ahora
el Tipo
definimos
las
de
selector
ID,
distintas
propiedades.
En
la
como Nombre #menu,
categora Tipo hemos
definido
el
aspecto
pulsa Aceptar.
del
texto:
8. En Fondo hemos
repetido
la
imagen fondo.png horizontalmente:
9. A parte, hemos cambiado en Cuadro, Height a 30px;.

10. Pulsamos Aceptar. ya tenemos esta regla completa.
11. Creamos una nueva regla a que afecte a la lista. Para ello elegimos el selector Compuesto #menu ul. Esto lo limita a las listas que
estn dentro del elemento con ID men, lo que evita que se aplique a otras listas que pudisemos tener en nuestra pgina.
12. En
la
categora Cuadro,
hemos
establecido
las
siguientes
propiedades:
Nota: Hemos puesto la propiedad Width (ancho) a un valor fijo, porque en nuestro caso tenemos 5 elementos que crearemos con
tamao concreto. Si aadimos o quitamos elementos, habra que variar este tamao.
13. En Lista, hemos cambiado la propiedad list-style-type a none, para que no se muestren las vietas junto a los elementos.
14. Hemos acabado con esta regla, pulsamos Aceptar.
15. Creamos una nueva regla para los elementos de la lista, empleando el selector Compuesto #menu li.
16. Hemos cambiado las siguientes propiedades: En la categora Tipo, Line-height a 30px; en Bloque, Text-align a center; y en Cuadro,
les hemos asignado un tamao fijo (el de la imagen) como puedes ver en el siguiente grfico:
17. Pulsamos Aceptar para guardar esta regla.

18. Creamos una nueva regla para los enlaces del men, empleando el selector Compuesto #menu a.
19. En la categora Tipo, ajustamos las propiedades Color a #CCC y Text-decoration a none.
20. En
la
21. Para
categora Fondo es
acabar
donde
con
estableceremos
esta
regla,
las
imgenes
de
fondo
de
en Bloque establecemos
los
la
elementos
del
men:
propiedad Display a block.
Si lo pruebas, vers que se muestran los elementos en una lnea y con la imagen de fondo. Ahora crearemos las reglas para que
cambien segn el estado del enlace.
22. Creamos una nueva regla para los enlaces del men cuando tienen le cursor encima, empleando el selector Compuesto #menu
a:hover.
23. En Tipo, cambiamos el Color del
a blackmenu_hover.png.
texto
a #FFF,
en Fondo cambiamos
la
imagen
de
fondo
(background-image)
24. Hemos acabado con esta regla, pulsamos Aceptar.

25. Creamos una nueva regla para los enlaces del men cuando son pulsados, empleando el selector Compuesto #menu a:active.
26. En Tipo, cambiamos el Color del
a blackmenu_active.png.
27. Hemos
acabado
texto
a #FFF,
con
en Fondo cambiamos
esta
la
imagen
regla,
de
fondo
(background-image)
pulsamos Aceptar.
Puedes probar la pgina (F12) o con la Vista en vivo, y comprobar qu ocurre al pasar el ratn por un elemento y al hacer clic sobre l.
Imaginemos que nuestro sitio tiene un men como ste, repetido en cada pgina. Lo normal sera que el elemento que lleva a la pgina
actual ya aparezca pulsado. Esto lo haremos creando una clase, y en cada pgina le daremos la clase al enlace correspondiente.
28. Creamos una nueva regla para el enlace pulsado, empleando el selector Compuesto #menu .pulsada ,#menu .pulsada:hover.
29. En Fondo, cambiamos la imagen de fondo (background-image) a blackmenu_pulsada.png.
30. Pulsa Aceptar.
31. Selecciona una etiqueta de enlace (a) y en el desplegable Clase del Inspector de propiedades HTML, asgnale la clase pulsada.
Crear un men de este tipo es mucho ms personalizable que crear una barra de navegacin desde Dreamweaver, pero tambin requiere
que conozcamos las propiedades CSS. Profundizaremos en ella ms adelante.
6.6. Objetos inteligentes
Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo de Photoshop (.psd).
Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.
Pero una archivo .psd no es un archivo que podamos mostrar en una pgina web. Por eso, lo que har Dreamweaver es convertirlo a un
formato estndar. 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 encontrbamos al pulsar el botn
del Inspector de propiedades.
Qu ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente encontrars 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 imgenes que tengamos que editar frecuentemente.
Ejercicios unidad 6: Imgenes

2. Abrir el documento instalaciones.htm.
3. Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio, en una lnea centrada entre el
ttulo Nuestras instalaciones y la lista.
1 Abrir el sito Animales.
2 Abrir el documento index.htm.
3 Sita el punto de insercin detrs del encabezado Inicio.
Insertar un rollover al lado del ttulo Inicio, cuya imagen original sea esta:
y la imagen de sustitucin esta:
(pata1.gif),
(pata2.gif).
Puedes encontrarlas en la carpeta imagenes del sitio.

La imagen de sustitucin no debe tener ninguna direccin web vinculada.
El fondo de las imgenes ha de ser transparente.
4 Crea, para esa imagen en concreto, una regla en la hoja de estilo que haga que quede centrada verticalmente en la lnea (en las reglas
de Bloque, la propiedad Vertcal-align con valor middle).
5 Guardar los cambios y cerrar el documento.

Unidad 7. Tablas (I)
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o
columnas y cambiar el tamao del borde.
7.1. Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en
columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran difciles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y columnas.
Hasta hace poco, y todava hoy es fcil encontrar diseos 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 prctica recomendable, ya que las tablas no fueron
pensadas para ello, y no crean una estructura clara, adems, si no estn bien anidadas pueden ocasionar problemas al analizar nuestra web
con herramientas automticas, como los bots(robots) que indexan el contenido para los buscadores. Para maquetar nuestras pginas, lo
recomendado es emplear los nuevos tags de HTML5 (<article>, <section> ... ), capas (div) y CSS.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.
7.2. Insertar una tabla
Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el
Ancho de la tabla.
El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en
Pxeles es siempre
el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el ancho
en Porcentaje indica el porcentaje de la pgina o del elemento contenedor) y se ajustar al tamao 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 pxeles, 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.
Tambin se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas.
Aunque podramos lograr el mismo diseo 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 informacin de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla.
En Resumen: podemos indicar una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no
aparece en el navegador del usuario.
7.3. Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una columna.
imagen y texto
Texto dentro de una celda
C
O
L
U
M
N
A
CELDA
FILA
Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el punto de insercin 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 vaca, y despus seleccionar y arrastrar los
elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacamos, 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 travs del men Modificar estando el punto de insercin en la
tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla, a
travs de la cual se puede elegir la opcin Seleccionar tabla.
Tambin es posible seleccionar una pulsando con el ratn 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 mens desplegables (men de encabezado de la tabla y
men de encabezado de la columna). Estos mens permiten acceder rpidamente a determinados comandos relacionados con la tabla.
Unidad 7. Ejercicio: Crear y rellenar una tabla
Objetivo
Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas.
Ejercicio
6. Sita el punto de insercin al final el primer prrafo, y pulsa Intro para crear un nuevo prrafo. Escribe Tenemos sedes en: .
8. Elige la opcin Tabla.
9. En Filas: escribe 6.
10. En Columnas: escribe 4.
11. En Ancho de tabla: selecciona Pxeles y escribe 500.
12. En Grosor de borde: escribe 2.
13. Si en Relleno de celda: aparece algo escrito, brralo.
14. En Espacio entre celdas: escribe 2.
15. Selecciona el encabezado Izquierda.
17. Rellena la tabla para que quede del siguiente modo:
Sedes de
cocina
Ciudad
Valencia
Barcelona
Direccin
Horario
Especialidad
Reservas
Avda. Constitucin
Gran Va, 162
34
Av. Diagonal,
23
10:00 - 16:30
20:30 - 00:00
12:00 - 17:00
20:30 - 00:30
20:30 - 01:00
Casera y de
Creacin
Castellana y de
Mercado
Creativa
No
7.5. Formato de tabla

Las propiedades de la tabla se especifican a travs de su inspector de propiedades. En este caso, se crearn atributos para la tabla.
Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.
A travs 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.
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 alineacin del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamao (An. y Al.) (en Fnd). Si no queremos que
el tamao se ajuste al contenido, marcamos la opcin No aj. y si queremos convertirla en un encabezado, basta con marcar la opcin 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 aplicrsela 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? Fijmonos en el aspecto de la barra de estado cuando
tenemos el punto de insercin 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 mtodo empleando etiquetas
<col />, es ms 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 pgina definimos las propiedades del texto empleando las Propiedades de la pgina, Dreamweaver crea una regla
con el selector body,td,th. Es decir, aplica el mismo estilo a la pgina, 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 ms concreta. Esto puede
entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejndolo slo 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 mayora de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamao, color, imagen de
fondo.
Existen algunas propiedades CSS especficas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos
con los asistentes, as que los veremos ms adelante.
Un estilo muy til es el que nos permite centrar la tabla en la pgina. Para ello, debemos editar los mrgenes izquierdo y
derecho (categora Cuadro), estableciendo el valor auto para ambos.
Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos ms que crear una clase que, por
ejemplo, cambie el color de fondo, y aplicarla a filas alternas.
Unidad 7. Ejercicio: Modificar las propiedades de la tabla
Objetivo
Practicar cmo modificar las propiedades de una tabla y de sus celdas.
Ejercicio

8. Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable del encabezado de tabla
y seleccionar la opcin Seleccionar tabla.
9. En Rell. celda, introduce el valor 5.
10. Haz clic en la segunda celda de la segunda fila (la de las ciudades), y arrastra hasta la ltima celda.
11. Con las celdas seleccionadas, en el desplegable Horiz. elige Centro.
Unidad 7. Ejercicio: Modificar el estilo de la tabla
Objetivo
Practicar cmo definir las propiedades de estilo de una tabla y de sus celdas.
Ejercicio
5. Se
abrir
el
documento
en
Dreamweaver.
Lo primero que vamos a hacer ser editar el selector body,td,th creado por Dreamweaver para que no se produzcan conflictos.
6. Abre el panel Estilos CSS (men Ventana Estilos CSS).
7. Haz clic en la vista todo. Selecciona el selector body,th,td. Haz clic derecho sobre l y elige Editar selector. Cmbialo por slo body.
8. Si no aparece el inspector de propiedades CSS, brelo a travs del men Ventana, opcin Propiedades.
9. En le desplegable Regla de destino del Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar
regla.
10. En Tipo de Selector selecciona clase.
11. En nombre escribe sedes.
12. Y en Definicin de regla selecciona Slo en este documento. Si pensamos emplear este mismo estilo en tablas de otras pginas,
entonces lo guardaramos en la hoja de estilos.
13. En la categora Tipo, cambia font-size a 80% y color #333.
14. En la categora Fondo, cambia background-color a #82C7F8.
15. En la categora Bloque, cambia text-align a center;
16. En la categora Cuadro, en Margin, desmarca Igual para todo, y en Left y Right selecciona auto.
17. Pulsa Aceptar para guardar los cambios.
18. Selecciona la tabla haciendo clic sobre su borde, y en el desplegable Clase elige sedes.
19. Haz clic sobre una celda. En la barra de estado, haz clic sobre <tr> para seleccionar la fila.
20. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla para definir el estilo de las filas.
21. Observa que ya aparece el selector compuesto .sedes tr. Pulsa Aceptar.
22. En la categora Fondo, en background-image elige la imagen fondo-sedes.png de la carpeta imagenes.
23. En Background-repeat elige repeat-x y en background-position (Y) elige top. Pulsa Aceptar.
24. Haz clic sobre la celda donde pone Sedes de cocina.
26. Observa que aparece el selector compuesto .sedes tr th. Compltalo para que quede .sedes tr th.titulo y pulsa Aceptar.
27. En Tipo, cambia el tamao de la fuente a 16px y su color a #7F5717.
28. En fondo, haz que el color sea #F8C982 y que se muestre la imagen imagenes/fondo-sedes-tit.png, repitindose en horizontal (x) y
colocada arriba. Pulsa Aceptar.
29. Si no se ha aplicado la clase, selecciona la celda y en el Inspector de propiedades HTML, en clase elige titulo.
30. Haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
32. Observa que aparece el selector compuesto .sedes tr td. Compltalo para que quede .sedes tr td.ciudad y pulsa Aceptar.
33. En Tipo, cambia el color a #069 y font-weight a bold.
34. En fondo, haz que el color sea #BDE2FC y que se muestre la imagen imagenes/fondo-sedes-ciudad.png, repitindose
en horizontal (x) y colocada arriba. Pulsa Aceptar.
35. Si se han deseleccionado, haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
36. Con las celdas seleccionadas, en el Inspector de propiedades HTML, en clase elige ciudad.
37. Haz clic en el borde izquierdo de la fila Horario para seleccionarla completa.
38. En el Inspector de propiedades CSS, selecciona <Nueva estilo en lnea>.
39. En el Inspector de propiedades CSS, pulsa el icono Cursiva
de la barra de herramientas, o pulsa Ctrl + S.
El aspecto que te debe de haber quedado debe de ser el siguiente:
La completaremos en los siguientes ejercicios.
7.7. Cambiar tamao de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del inspector
de propiedades estar especificado por los valores deAn (anchura) y Al (altura). Normalmente slo se especifica la anchura, no la altura.
Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a
no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana.
No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible hacerlo
manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.
Para practicar puedes realizar el Ejercicio paso a paso Ajustar el tamao de la tabla.
Unidad 7. Ejercicio: Ajustar el tamao de la tabla
Objetivo
Practicar cmo ajustar el tamao de las celdas.
Ejercicio
5. Haz clic entre el borde que separa la primera y segunda columna, haciendo la columna ms estrecha, hasta que llegue
a 85px (aparece indicado arriba).
6. Ahora todas las columnas tienen un ancho fijo. Como slo buscamos esto para la primera, para cada columna haz clic en su men y
selecciona Borrar ancho de columna.
7. Guarda la pgina (Ctrl + S), la completaremos el siguiente ejercicio.
7.8. Aadir y eliminar filas y columnas

Existen varias formas de aadir 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 botn derecho sobre ella, o bien abrir el menModificar. En ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.
Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde
es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde se insertarn.
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar
fila o Eliminar columna del men Tabla.
Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
7.9. Anidar, dividir y combinar celdas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.
Para anidar tablas slo 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 ms celdas en una sola por lo que dejar de haber borde de separacin entre una celda
y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el ttulo de la tabla, normalmente
ms ancho. En este caso habra 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 travs del inspector de propiedades.
Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn
del inspector de propiedades (lo encontrars en la parte
inferior izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como ya has visto puedes
dirigirte a ella a travs del men contextual de la tabla y a travs del men Modificar.
Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como resultado otra celda, es
decir, que su combinacin d como resultado un rectngulo. No podemos combinarlas para formar una "L". Por ejemplo, en la siguiente tabla
no podran combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.
1
Podemos combinar celdas en vertical y horizontal:
Para dividir una celda hay que pulsar sobre el botn

opcin Tabla.
del inspector de propiedades, o sobre la opcin Dividir celda de la
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 nmero
de stas.
Unidad 7. Ejercicio: Combinar celdas
Objetivo
Practicar las operaciones necesarias para combinar celdas.
Ejercicio
4. Haz
doble
clic
sobre
el
que
aparece
en
el
panel Archivos.

7. Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila,
y haciendo clic cuando el puntero adquiera la forma de flecha.
8. Hacer clic sobre el botn Combinar las celdas seleccionadas
, del inspector de propiedades.
9. Selecciona la segunda y la tercera celda de la segunda fila (la que pone Valencia y la que queda en blanco). Puedes hacerlo pulsando
con el ratn sobre una de las celdas, y mantenindolo pulsado mientras lo arrastras sobre la otra.
10. Haz clic sobre el botn Combinar las celdas seleccionadas
11. Modifica el tamao de las columnas para que se ajusten mejor al contenido. Puedes hacerlo manteniendo pulsado el ratn sobre los
bordes de las columnas, arrastrndolos hacia las posiciones deseadas. Recuerda que la apariencia real es la que se ve en el
navegador.
7.10. Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualizacin. Nosotros hemos trabajado en todo el
tema con el modo estndar, y vamos a seguir trabajando con l, pero se puede pasar a los otros modos a travs del
men Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo estndar o el Modo de tablas expandidas.
El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes
de las tablas para facilitar la edicin. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de insercin de
forma precisa e introducir contenido pero en este modo no vemos la pgina como quedar exactamente.
En este curso nos limitaremos al modo estndar, aunque puedes emplear el Modo de tablas expandidas cuando lo creas til.
7.11. Adaptar webs a distintas resoluciones

Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaos y con
distintas resoluciones. Desde las pequeas pantallas de los porttiles de bajo coste, hasta monitores panormicos en alta resolucin.
Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra pgina: el diseo fijo y el diseo elstico.
El diseo fijo especifica las medidas en pxeles. Por lo que el contenido siempre se mostrar del mismo tamao, lo que facilita
mucho el diseo. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en
monitores muy pequeos. Un ejemplo de este diseo sera la home de aulaClic.
El diseo elstico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamao de la ventana en la que
se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseos elaborados, es ms complicado hacer que la
pgina no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseo es la pgina de este curso.
Como recordars, el tamao de las tablas puede ser definido en pxeles o en porcentaje. Cuando el tamao de la tabla sea definido
en pxeles, la tabla se ver del mismo modo independientemente del tamao de la ventana del navegador. En cambio, cuando el tamao de
la tabla sea definido en porcentaje, la tabla se ajustar al tamao del elemento que la contiene, lo cual implica que el contenido de la tabla
se puede descuadrar.
Pulsa aqu para ver una pgina con tablas de tamao fijo, en pxeles. Imagina que la pgina ha sido diseada para visualizarse
correctamente en un monitor pequeo de baja resolucin.
Si modificas el tamao de la ventana, vers que la tabla es siempre del mismo tamao. Esto tiene un gran inconveniente, ya que si
maximizas la ventana del navegador (lo que equivaldra a visualizar la pgina en un monitor grande con alta resolucin), a los lados de la
tabla aparecer un gran espacio vaco.
Pulsa aqu para ver una pgina con tablas de tamao variable, en porcentaje.
Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar tablas con tamao variable tiene tambin un gran
inconveniente, ya que si maximizas la ventana del navegador apreciars claramente cmo el contenido de las tablas se descuadra,
quedando demasiado estirado, lo que dificulta su lectura.
En un principio puede parecer ms conveniente utilizar tablas con tamao fijo, aunque esto implique que aparezca el hueco vaco a la
derecha, en el caso de los monitores con alta resolucin. Pero con un poco de prctica a la hora de manejar las tablas, puedes salvar el
inconveniente del descuadre de la pgina y as definir pginas con tamao en porcentaje que aprovechen el ancho cuando el monitor de ms
grande.
No solo puede establecerse el tamao de la tabla, tambin es posible establecer el tamao de las celdas.
El tamao de la celda a travs 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 estn en Pxeles. En la imagen anterior, la celda no tiene una anchura concreta, se ajusta al
contenido. Si la queremos exactamente de de 200 pxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura fuera del 25
por ciento de la tabla, en An. habra que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu contiene cada una de ellas (imgenes, texto alineado a la
derecha, texto alineado a la izquierda, texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en monitores de distintos
tamaos y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribucin del contenido de la tabla no se vea
muy afectado por el cambio de tamao de la ventana del navegador.
Ejercicios unidad 7: Tablas
2. Abrir el documento reservas.htm.

3. Modificar
la segunda
tabla de
la
pgina
para
que
quede
similar
la
primera,
con
el
aspecto
siguiente:
4. Crea una tabla con el ancho total de la pgina, sin bordes, que contenga en una celda el primer prrafo y la primera tabla, y en la
segunda el segundo prrafo y la segunda tabla.
Si no tienes muy claro las operaciones a realizar en este ejercicio, Aqu te lo explicamos.
1 Abrir el sitio Animales.
2 Abrir el documento index.htm.
3 Crea una tabla con las siguientes medidas:
4 Coloca la tabla en el centro de la pgina, y rea una clase CSS llamada contenido asigne a la tabla el color de fondo #D6E7DB.
5 Utilizando clases CSS, crea las clases necesarias para hacer que:
La celda de la esquina superior-izquierda tenga como fondo la imagen arriba-izq.png.
La celda de la esquina superior-derecha tenga como fondo la imagen arriba-der.png.
El lado superior tenga como fondo la imagen arriba.png repetida en horizontal.
El lado izquierdo tenga como fondo la imagen izquierda.png repetida en vertical.
El lado derecho tenga como fondo la imagen derecha.png repetida en vertical.
La celda de la esquina inferior-izquierda tenga como fondo la imagen abajo-izq.png.
La celda de la esquina inferior-derecha tenga como fondo la imagen abajo-der.png.
El lado inferior tenga como fondo la imagen abajo.png repetida en horizontal.
Todas las celdas tendrn el color de fondo de la pgina (#EFEFD1). Las imgenes estn en la carpeta de imgenes.
Guarda las reglas de estilo en la hoja de estilos estiloanimales.css.
El resultado debe quedar como el siguiente:
5 Inserta la imagen logo_animales.gif en la segunda celda de la segunda fila.

6 Y define la alineacin celdas centrales de la segunda fila como centro (en horizontal) y medio (en vertical).
7 Corta el texto que haba en el archivo antes de insertar la tabla y pgalo tal y como estaba en la segunda celda de la cuarta fila.
8 Abre el archivo botones.htm y copia los botones de navegacin formados por una lista, debers pegarlos en la tercera celda de la
segunda fila. Aade el estilo de los botones a la hojaestiloanimales.css.
9 Define el alineamiento de esa celda como derecha (en horizontal) y superior (en vertical).
10 Guarda los cambios.
11 Debers hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.
Si no tienes muy claro las operaciones a realizar en este ejercicio, Aqu te lo explicamos.
Unidad 8. Marcos (I)
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo
trabajar con l.
Lo primero que hay que decir es que los marcos prcticamente ya no se usan, sobre todo desde que no son soportados por el nuevo
HTML 5.
Sin embargo, puede ser til conocer como funcionan por si tienes que retocar alguna pgina antigua que contenga marcos.
8.1. Introduccin
Los marcos o frames sirven para distribuir los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el
logotipo y la barra de navegacin, mientras que otras s pueden cambiar.
Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una
pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar
la pgina de este modo, hemos tenido que abrir el documento index.htm, que es la pgina que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el trabajo, ya
que es ms fcil hacerse una idea de cmo quedar la pgina 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 m ucho en el
tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.
Como deciamos antes, actualmente los marcos han caido en desuso. Crean problemas a la hora de ser indexados por los buscadores, y
estar correctamente indexado y posicionado es crucial para una web. Resultan confusos a la hora de utilizar los botones Atrs y Adelante de
los navegadores. Con los Favoritos o Marcadores tambin resultan poco claros. Si no se define correctamente el destino de los enlaces
pueden presentar problemas de anidamientos, ya que toda la pgina se abrir en una parte del marco.
Por ejemplo, si vemos el cdigo fuente de una pgina con marcos, vemos que realmente no hay ms que las llamadas a las pginas
correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una pgina, puede que el visitante llegue a ella
directamente, no a travs del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegacin del sitio.
La pega ms comn al no usar marcos es tener que repetir los elementos comunes, como el men y logo en cada pgina, con la
complicacin correspondiente a la hora de hacer un cambio. No obstante, esto es fcilmente solucionable si empleamos PHP o JavaScript
en nuestra pgina.
Por lo tanto, si piensas colgar tu pgina en internet para uso pblico, no te recomendamos su uso.
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 algn documento. Puede ser uno nuevo o uno ya existente.
Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin 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 lnea que divide el documento en dos. El documento de
partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el
documento que tenamos 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 lnea 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 vaco 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 tenamos 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.
8.3. Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a travs del men Ventana.
Tambin puedes abrir el panel Marcos pulsando la combinacin de teclas Maysculas + F2.
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en
el panel. Tambin puede seleccionarse la pgina de marcos pulsando sobre el borde que rodea a los marcos (el que aparece ms 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 especficas de cada uno de ellos.
8.4. Guardar
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos. Es por esto que al crear algn marco, se
cargan pginas nuevas por defecto en cada uno de ellos, a excepcin del marco que contiene la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las pginas que estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin Guardar todo
a los nuevos documentos.
, ya que podemos equivocarnos al dar los nombres
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna pgina 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 travs del panel Marcos, pueden establecerse sus propiedades a travs del inspector de
propiedades.
Cada marco tiene asignado un nombre, que puede cambiarse a travs 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 lnea separando el marco del resto de marcos. En el caso de que se muestre el
borde, se puede especificar un color para ste a travs de Color borde.
Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse
completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco y sus bordes izquierdoderecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es algo diferente.
En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse un color para este a travs
de Color del borde. Tambin es posible establecer un grosor para el borde a travs de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para especificar el tamao del marco, que puede
ser en Pxeles, Porcentaje (de la ventana) o Relativo(proporcional al resto de marcos).
Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la barra de navegacin, y el otro
marco con tamao Relativo, para que se ajuste a la ventana del navegador.
8.6. Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector de propiedades.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los
marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se cargar inicialmente en el
marco, pero hemos de poder cambiar este documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent,
_self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern ms fciles 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 vnculo 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 opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern
al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin aparecern los nombres de los distintos marcos de la pgina. Por ejemplo leftFrame
y mainFrame. Si abrimos el conjunto del marco en uno de estos destinos se producir un anidamiento.
Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una imagen, un mapa
de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras
pginas 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.
Unidad 8. Ejercicio: Crear y configurar marcos
Objetivo
Practicar las operaciones necesarias para crear y configurar marcos.
Ejercicio
4. Haz
doble
clic
sobre
el
que
aparece
en
el
panel Archivos.


8. Elige la opcin HTML y luego Marcos.
9. Elige
la
Deben de tener los nombres leftFrame y mainFrame que te vienen por defecto.
opcin Izquierda.
10. Si no aparece el panel Marcos, brelo a travs del men Ventana, opcin Marcos.
11. Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos.
12. En Ttulo:, que aparece en la barra de documento, escribe Cocina.
13. En Bordes, del inspector de propiedades, selecciona No.
14. En Ancho escribe 0.
15. En Seleccin Fila Col. pulsa sobre la columna de la izquierda.
16. En Columna selecciona Pxeles y escribe 270.
17. En Seleccin Fila Col. pulsa sobre la columna de la derecha.
18. En Columna selecciona Relativo y escribe 1.
de la carpeta cocina.
de la barra de herramientas o Ctrl + S. Guarda el documento con el nombre index.htm, dentro
21. Pulsa sobre el marco izquierdo en el panel Marcos.

22. En Origen escribe menu.htm.
23. En Desplaz selecciona No.
24. En Bordes selecciona No.

25. Activa la casilla Mismo tamao.
26. Pulsa sobre el marco derecho en el panel Marcos.
27. En Desplaz selecciona No.
28. En Bordes selecciona No.
29. Desactiva la casilla Mismo tamao.
31. En el caso de haber insertado mapas de imagen en la imagen del logotipo, selecciona cada uno de ellos
elige mainFrame en Destino, que aparece en el inspector de propiedades.
32. Edita tambin los enlaces del men para cambiar En Destino a mainFrame.
33. En Destino: selecciona mainFrame.
34. Haz clic sobre el botn Guardar todo
35.
de la barra de herramientas y prubalo en el navegador.
Unidad 9. Formularios (I)
36.
37. Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo pueden validarse los
datos introducidos en l.
38.
9.1. Introduccin
39.
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.
40. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el
tratamiento correspondiente.
41. Aqu vamos a ver cmo 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 programacin, ya sea en PHP, en JavaScript o en otro lenguaje de programacin,
y esto no entra en los objetivos del curso.
42. A la derecha tienes un ejemplo de formulario simple.
43. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.
44.
45.
9.2. Elementos de formulario
46. Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario,
47.
48. o lo que es ms cmodo si vamos a insertar varios elementos, desde el panel Insertar en la seccin Formularios.
49.
50. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina.
51. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus
propiedades. Antes de insertar estos elementos debemos crear el propio formulario tal y como veremos en el siguiente punto.
52.
Campo de texto y rea de texto
53. Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir
varias.
54. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la opcin Una lnea o Multi
lnea respectivamente.
55. Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por
un carcter como podrs ver en la imagen siguiente.
56. A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Campo de text
**********
57. A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto, el nmero mximo de lneas o
caracteres, y el valor inicial del cuadro.
58.
59.
Botn
60. Es el botn tradicional de Windows. El botn 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).
61. Tambin es posible cambiar el texto del botn, a travs de la propiedad Valor del inspector de propiedades.
62.
63. Como mnimo tiene que haber un botn del tipo Enviar formulario, imprescindible para enviar los datos. Adems le suele acompaar
un botn Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.
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, slo se enviarn los datos de los elementos de dentro del formulario.
Puedes crear formularios a travs del men Insertar Formulario, opcin Formulario, o desde el panel Insertar.
Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas naranjas
discontinuas, similar al de la imagen siguiente.
Estas lneas son ayudas visuales al trabajar en diseo, pero no se vern en el formulario final.
Entre las propiedades del formulario, encontramos el campo Accin. En el indicamos a dnde se envan los datos. Normalmente, una
pgina PHP que se encara de tratarlos.
Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs del men Insertar,
opcin Formulario o desde el panel Insertar.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin
de los elementos del formulario, lo que facilita su comprensin 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 validacin de formularios sirve para hacer que JavaScript valide el formulario antes de que se enve, avisando al usuario para que
corrija los errores, como campos obligatorios sin rellenar. Esto es mucho ms eficiente y rpido que enviar la pgina y validarla slo en el
servidor.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a travs del men Ventana,
opcin Comportamientos, o pulsando Mays + F4.Comportamientos forma parte del panel Inspector de etiquetas.
En este panel hay que desplegar el botn
y pulsar sobre la opcin Validar formulario, debers 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.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numrico (Nmero) y si ha
de estar en un rango, una Direccin de correo electrnico, etc.
Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de formulario.
Unidad 9. Ejercicio: Insertar elementos de formulario
Objetivo
Practicar las operaciones necesarias para insertar y configurar algunos elementos de formulario.
Ejercicio
4. Haz
doble
clic
sobre
el
documento tureceta.htm,
que
aparece
en
el
panel Archivos.

avanzadas.
para desplegar sus propiedades ms
7. No es necesario insertar el formulario, ya est creado. Dentro de l hay dos tablas. Sita el cursor dentro de la ltima celda de la
primera fila de la primera tabla. Observa que le hemos definido un estilo, como a cualquier otro elemento.
8. Abre el panel Insertar. Si no lo encuentras, puedes acceder a l desde el men Ventanas.
9. Elige la opcin Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos.
10. Pulsa sobre Campo de texto en el panel Insertar.
11. Se abrir un cuadro de dilogo. En ID introduce el nombre que le daremos, en este caso nombre. En Etiqueta marca No hay etiqueta
de rtulo, pues ya tenemos los textos insertados. PulsaAceptar. (Si no te ha aparecido este dilogo, introduce el nombre desde
el inspector de propiedades).
12. Haz clic sobre el campo de texto para seleccionarlo.
13. En Campo de texto, del inspector de propiedades, veras el nombre. Si lo habas introducido antes, puedes hacerlo.
14. En Cars mx escribe 50 para limitar el nmero mximo de caracteres.
15. En Tipo estar seleccionado Una lnea.
16. Sita el cursor dentro de la ltima celda de la segunda fila de la primera tabla.
17. Repite los pasos del 10 al 15, pero con las siguientes diferencias:
18. En Campo de texto escribe email.
19. En Cars mx escribe 40.

20. Sita el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
22. En Campo de texto escribe receta.
23. En Cars mx escribe 25.
24. Sita el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
25. Elige la opcin Seleccionar (Lista/men) en el panel Insertar.
26. En el cuadro de dilogo, introduce tipo en el campo ID.
27. Haz clic sobre el objeto de lista/men para seleccionarlo.
28. En Tipo selecciona Men.
29. Haz clic sobre el botn Valores de lista.
30. Escribe Plato en Etiqueta de elemento.
31. Pulsa sobre el botn
para insertar nuevos elementos en la lista. Aade la etiqueta Postre.

33. Selecciona Plato en Seleccionado inicialmente.
34. Sita el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
35. Pulsa en la opcin rea de texto en el panel Insertar.
36. Se abrir un cuadro de dilogo. Escribe como ID ingredientes y pulsa Aceptar.
37. Haz clic sobre el rea de texto para seleccionarlo.
38. En Tipo selecciona Varas lneas.
39. En Ancho car escribe 30.
40. En Lneas nm escribe 5.
41. Sita el cursor en la celda que hay debajo de la que pone Preparacin:.
43. En ID escribe preparacion.
44. En Ancho car escribe 20.
45. En Lneas nm escribe 8.
46. Sita el cursor en la ltima celda de la segunda tabla.
47. Elige la opcin Botn en el panel Insertar.
48. En el dilogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen
datos.
49. Sita el cursor a la derecha del botn.
50. Repite los pasos 47 y 48 para insertar otro botn.
51. Selecciona el nuevo botn.
52. En Accin selecciona Restablecer formulario.
53. En Valor, escribe Borrar.
54. Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro.
55. Para que el formulario tenga sentido, hemos de enviar los datos a una pgina capaz de tratarlos. Selecciona todo el formulario, y en el
campo
Accin
copia
la
siguiente
direccin:
http://www.aulaclic.es/dreamweaver-cs4/ejemplos/sitios/cocina/recibirreceta.php
56. En el campo Destino elige _blank para que se abra en una ventana nueva.
58. Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador o en la Vista en vivo y
rellena los campos. Si pulsas en Enviar, se enviarn los datos a la pgina indicada en el campo accin.
Ejercicios unidad 9: Formularios
2. Abrir el documento reservas.htm.
3. Insertar un campo de texto a la derecha del texto Hora:, que tenga 5 como ancho de caracteres. Dale como nombre hora.
4. Insertar un men a la derecha del texto Centro:, llamado centro, cuyos elementos sean:
1. Don Benito
2. Madrid
3. Silla
5. Seleccionar inicialmente el elemento Don Benito del men.
6. Insertar un botn para restablecer el formulario, a la derecha del botn Enviar.
2. Abrir el documento consultas.htm.
3. Insertar un men a la derecha del texto Animal:, en la celda vaca, cuyos elementos sean:
1. --- Elige opcin --2. Perro
3. Gato
4. Otros
4. Seleccionar inicialmente el elemento --- Elige opcin --- del men.
5. Insertar un rea de texto a la derecha del texto Consulta:, en la celda vaca, que tenga 50 como ancho de caracteres, 10 como
nmero de lneas, y que su valor inicial sea Escribe aqu tu consulta.
6. Insertar un botn de Enviar, a la izquierda del botn Restablecer.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te ayudamos.
Unidad 10. Multimedia (I)
Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo,
que son los ms empleados. Utilizaremos dos mtodos, usando las nuevas etiquetas de HTML 5 y mediante los plug-in.
10.1. Pelculas Flash (SWF)
Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web,
a modo de presentacin hacia los usuarios, como banners publicitarios, como botones... Flash todavia es uno de los elementos multimedia
ms empleados en las pginas web, aunque su uso est decreciendo con la llegada de HTML 5 y el vdeo en mp4.
Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para poder ser visualizado en el navegador, y necesitan
que el usuario tenga instalado el plug-in de Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el navegador. Sin
embargo en los telfonos mviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.
Las pelculas Flash pueden insertarse en una pgina a travs del men
Insertar Media, opcin SWF, o pulsando Ctrl
+ Alt +
F.
Tambin pueden insertarse empleando el panel Insertar en la categora Comn, pulsando sobre la opcin
SWF que aparece al
desplegar el men Media.
Veamos las opciones ms importantes que nos ofrece el inspector
de propiedades cuando tenemos seleccionado el archivo Flash:
Como en otros elementos, como las imgenes, podemos asignarle el ancho ( An.) y alto ( Alt.). En
Archivo, indicamos la ruta hasta el
archivo SWF.
Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), podremos
editarlo con pulsar en Editar.
La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio.
La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina
comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la
pelcula hasta que el usuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada
por algn comportamiento.
La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla en Alta para verlo tal cul se cre.
La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del tamao exacto del contenido, pueden
tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En
cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo.
Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el texto. Si queremos centrarla
horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un prrafo) 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 botn Reproducir nos permite ver la pelcula.
Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:
Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir los elementos,
normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se
vern. De todas formas, Dreamweaver nos avisar cuando incluya archivos.
10.2. Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando
navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Las pginas que
contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la
pgina puedan desactivarlo. Siempre es mejor que que el usuario abandone la pgina.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes
que tambin pueden utilizarse (MIDI). Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala
calidad.
Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in.
1. Nueva etiqueta <audio>
Hasta hace poco la nica forma de insertar audio en una pgina web era mediante plug-in pero desde que apareci HTML5 los
navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estndar sin necesidad de
plug-in.
La etiqueta <audio> slo funcionar en los navegadores compatibles con HTML 5, IE a partir de la versin 9 y las versiones de Firefox
3.5, Chrome 3.0 y Safari 3.0, adems de algunos otros.
Si tienes acceso Creative Cloud podrs insertar el tag <audio> desde Insertar, Comn, Media, opcin HTML 5 Audio, en otro caso debes
hacerlo en la vista de cdigo. En la unidad 12 explicaremos con ms detalle cmo escribir cdigo HTML desde la vista cdigo.
La forma de la etiqueta es la siguiente:
<audio>
<source src="archivo sonido" type="MIME-type"/>
</audio>
No todos los navegadores reconocen los formatos de archivos de sonido ms utilizados, en la siguiente tabla podemos ver la
compatibilidad entre formatos y navegadores, as como sus correspondientes mime-types (en marzo 2013):
Navegador
MP3
WAV
OGG
Internet Explorer 9+
si
no
no
Chrome 6+
si
si
si
Firefox 3.6+
no
si
si
Safari 5+
si
si
no
Tipo MIME
audio/mpeg
audio/wav
audio/ogg
Por ejemplo, el siguiente cdigo se reproducir en todos los navegadores citados menos Firefox:
<audio
<source
Este
navegador
</audio>
no
puede
src="media/audio.mp3"
reproducir
este
archivo
de
sonido.
controls>
type="audio/mpeg"/>
Actualice
el
navegador
Si tu navegador no es Firefox deberas ver el reproductor de sonido a continuacin.

Se suele aadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el
volumen.
Tambin es bueno aadir un texto para que avise al usuario que su navegador no reconoce la etiqueta.
Podemos repetir la instruccin source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducir
en ms navegadores.
Por ejemplo
<audio
<source
<source
Este
navegador
</audio>
no
puede
src="media/audio.mp3"
src="media/audio.ogg"
reproducir
este
archivo
de
sonido.
controls>
type="audio/mpeg"/>
type="audio/ogg"/>
Actualice
el
navegador.
De esta forma el navegador Firefox intentar reproducir el primer archivo y como no es capaz de ello, lo intentar con el segundo archivo.
Ahora desde Firefox si se reproducir el sonido.
10.3. Vdeos
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho
espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
En este apartado nos referimos a insertar vdeo de un archivo alojado en nuestro sitio. No a mostrar vdeos de sitios especializados, como
youTube.
Para insertar un archivo de vdeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.
1. Vdeo con HTML 5.
El formato bsico de la etiqueta <video> es el siguiente.

<video>
<source src="archivo vdeo" type="MIME-type"/>
</video>
La instrucin tpica para reproducir vdeo sera, por ejemplo:

<video
width="160" height="120" controls>
<source src="media/cotorra.mp4" type="video/mp4"/>

<source src="media/cotorra.ogv" type="video/ogv"/>
Este navegador no puede reproducir este archivo de vdeo. Actualice el navegador.
</video>
Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamao del vdeo (witdth, height). Tampoco todos
los navegadores son capaces de reproducir todos los tipos de vdeo, por lo cual es conveniente colocar el vdeo en ms de un formato. La
compatibilidad de los tipos de vdeo con los navegadores ms usados se muestra en la siguiente tabla (en marzo 2013).
Navegador
MP4
WebM
OGG
Internet Explorer 9+
si
no
no
Chrome 6+
si
si
si
Firefox 3.6+
no
si
si
Safari 5+
si
no
no
Tipo MIME
video/mp4
video/webm
video ogv
A continuacin se ejecutar el cdigo del ejemplo que estamos viendo, vers un reproductor de vdeo si ests utilizando un navegador
compatible:
La etiqueta <vdeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes:
- autoplay. Hace que el vdeo comience a reproducirse al cargarse la pgina.
- loop. Para que se reproduzca una vez tras otra, sin parar.
- preload. Para que se cargue al hacelo la pgina especificaremos preload="auto", para que se cargue al pulsar play, preload="none".
Tambin es posible utilizar otros reproductores y controlar la reproduccin del vdeo mediante Javascript.
Si tienes acceso Creative Cloud podrs insertar la etiqueta <video> desde Insertar, Comn, Media, opcin HTML 5 Video, en otro caso
debes hacerlo en la vista de cdigo.
Hemos visto varios tipos de archivos de vdeos fijndonos en su extensin (.mp4, .ogv, ...) pero hay algo ms que lo complica un poco.
Dentro de cada uno de estos tipos de archivos el vdeo puede estar codificado de distinta forma, es lo que se conoce como Codecs. Es decir,
podemos tener un archivo de vdeo ejemplo.mp4 codificado con el codec H.264 y otro archivo con el mismo nombre ejemplo.mp4 pero
codificado con el codec mpeg-2. Algo similar ocurre con los archivos de audio.
Debido a esto, en ocasiones, nuestro navegador puede ser capaz de reproducir un tipo de archivo y otras ocasiones no poder hacerlo. En
internet hay pginas para descargarse codecs e instalarlos en el navegador. Tambin hay pginas que transforman un formato en otro, por
ejemplo http://www.online-convert.com/, es interesante convertir los vdeos mp4 en ogv y colocarlos en los dos formatos para que se vean
desde Firefox y desde la mayora de los navegadores.
Unidad 11. Las plantillas (I)
En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.
11.1. Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme.
Adems del formato, es frecuente tener elementos que se repiten en cada pgina, como el logo o el men.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su
contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen
la posibilidad de establecer unas zonas editables yotras zonas que sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea que
existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las
pginas en una u otra plantilla, segn el color de fondo que se desee para cada una.
Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella. Esto nos puede ahorrar mucho
trabajo.
Las plantillas son archivos con la extensin 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 pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos, que se puede abrir a travs del men Ventana,
opcin Activos.
Una vez abierto el panel hay que seleccionar el botn
, para poder trabajar con las plantillas.
Los botones inferiores del panel Activos
son similares a los del panel Estilos CSS.
El nico botn 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 botn
. Si el botn est desactivado, pulsa con el botn derecho del ratn sobre
el rea de plantilla y elige Nueva Plantilla).

Cuando se pulsa ese botn 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 botn
Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y despus guardarlo como plantilla a travs del
men Archivo, opcin Guardar como plantilla.
Cuando se pulsa dicha opcin, 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 travs 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 pgina cambia de carpeta, a Templates, como ya hemos dicho. Si contena enlaces o imgenes se nos ofrecer
la opcin de Actualizar vnculos. Si lo hacemos, la plantilla se ver con normalidad y podremos emplearla para crear pginas en cualquier
carpeta. Si no lo hacemos, la plantilla se mostrar sin las imgenes u hojas de estilo, ya que la ruta no ser la correcta, y slo nos servir para
crear pginas en la misma carpeta que el archivo desde el que creamos la plantilla.
Ahora solo nos quedara cambiar los elementos variables por regiones editables.
11.3. Establecer regiones editables en una plantilla

Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar.
Es necesario establecer las zonas para que puedan ser editadas en las pginas que se basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos, pulsando dos veces sobre
ella, o estando seleccionada pulsando sobre el botn
como ya hemos visto.
Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que aparece seleccionar la
opcin Propiedades de la pgina.
Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea insertar, y despus dirigirse al
men Insertar, Objetos de plantilla, opcin Regin editable, o pulsar la combinacin de teclas Ctrl + Alt + V.
En la nueva ventana hay que establecer un Nombre para la regin editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin editable.
Las zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa. En la etiqueta
aparece el nombre de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos documentos que se basen en la plantilla. Estos
objetos, al estar dentro de la zona editable, podrn ser modificados en las pginas.
La regin editable se ajustar al tamao del contenido. Por lo que aunque parezca pequea cuando an no tiene nada no limitar lo que
queramos introducir.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas, pero no podrn ser modificados.
En este caso, la imagen con el logotipo de aulaClic aparecera en todas las pginas que se basaran en esta plantilla, mientras que todo lo
que insertramos dentro de la zona editableFormularioCorreoElectronico podra ser modificado.
11.4. Basar pginas en una plantilla

La opcin ms simple, consiste en elegir una Pgina de plantilla al crear un Nuevo documento.
Como vemos en la imagen anterior, al seleccionar la categora Pgina 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.
Bastara 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 ms complicado si queremos aplicar la plantilla sobre un documento existente. Vamos a ver
cmo basar una pgina vaca en una plantilla, ya que por el hecho de estar vaca resulta ms sencillo.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar plantilla a pgina.
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.
Despus de pulsar sobre la opcin Aplicar plantilla a pgina 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 pgina cuando cambie la plantilla, para que la pgina se actualice automticamente en el
caso de modificar la plantilla en la que se basa.
Unidad 12. HTML desde Dreamweaver (I)
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no
nicamente sobre el editor grfico de la vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo estando
dentro de Dreamweaver.
En muchas ocasiones veremos que para hacer pequeas correcciones, nos resultar ms cmodo y rpido si lo hacemos directamente
desde el cdigo 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 pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo. Consista
simplemente en escribir el ttulo deseado entre las etiquetas <title> y </title>.
Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye
el smbolo /, indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo dentro
de la etiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus caractersticas predeterminadas, como
puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habra que aadir el atributo y su valor,
quedando <p class="miclase"> y </p>.
Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del cdigo HTML equivale a la
etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estndar XHTML que obliga a
que todas las etiquetas se cierren. Por tanto el salto de lnea anterior se escribira <br />. Otras etiquetas que se cierran sobre s mismas son
las imgenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.
Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el
editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.
12.2. Entidades HTML

HTML tambin dispone de cdigos especiales para representar caracteres especiales como pueden ser letras con acentos o no
pertenecientes al alfabeto latino internacional, signos de puntuacin o tipogrficos y smbolos especiales que presenten un problema en
HTML como < >, que podran malinterpretarse por el inicio de una etiqueta.
Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de entidad. Ambos mtodos son igualmente aceptables, pero
ambos debern ir encerrados entre los smbolos & y ;.
De este modo, < se escribir como < o <
Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn configurados para visualizar juegos de caracteres que no
contengan letras como la o la podrn ver el sitio correctamente. En caso contrario estos caracteres se mostraran de forma extraa si no
elegimos la codificacin adecuada.
En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar. Ahora te mostraremos otra forma para escribir
caracteres que no se incluan en el listado de Dreamweaver y que podrs insertar escribiendo sus entidades en la vista de Cdigo.
Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de nombre de entidad:
Carcter
Entidad con
nombre
Entidad
numrica
Carcter
Entidad con
nombre
Entidad
numrica
á
á
Á
Á
é
é
É
É
í
í
Í
Í
ó
ó
Ó
Ó
ú
ú
Ú
Ú
ü
ü
Ü
Ü
&ntide;
ñ
Ñ
Ñ
¿
¿
α
α
&iexc;
¡
β
β
–
–
©
©
→
→
®
®
←
←
€
€
<
<
<
espacio

>
>
>
&
&
&
Si escribes ms de un espacio en el cdigo de Dreamweaver, cuando lo visualices en un Navegador slo veras uno. Esto es debido a
que en HTML las palabras separadas por ms de un espacio se visualizan separadas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarn tantos espacios como elementos de entidad
hayas introducido.
Antes de abusar de este tipo de espacios, piensa si no convendra ms aadirle margin o padding CSS.
Unidad 12. Avanzado: Listado de Entidades HTML (I)
Caracteres Alfabticos Propios y

Alfabeto Griego
Smbolos
Carcter
Entidad con
nombre
Entidad numrica
•
•
…
…
′
′
″
″
&oline;
‾
&frasl;
⁄
€
€
&weierp;
℘
&image;
ℑ
&real;
ℜ
™
™
&alefsym;
ℵ
←
←
↑
↑
→
→
↓
↓
↔
↔
&crarr;
↵
⇐
⇐
&uArr;
⇑
⇒
⇒
&dArr;
⇓
⇔
⇔
∀
∀
∂
∂
∃
∃
∅
∅
∇
∇
∈
∈
∉
∉
&ni;
∋
Carcter
Entidad con
nombre
Entidad numrica
∏
∏
∑
∑
−
−
&lowast;
∗
√
√
&prop;
∝
∞
∞
Otros Smbolos
&ang;
∠
&and;
∧
&or;
∨
∩
∩
∪
∪
∫
∫
&there4;
∴
&sim;
∼
&cong;
≅
≈
≈
≠
≠
&equiv;
≡
≤
≤
≥
≥
⊂
⊂
⊃
⊃
&nsub;
⊄
&sube;
⊆
&supe;
⊇
&oplus;
⊕
&otimes;
⊗
&perp;
⊥
⋅
⋅
&lceil;
⌈
&rceil;
⌉
&lfloor;
⌊
&rfloor;
⌋
&lang;
〈
&rang;
〉
&loz;
◊
&spades;
♠
&clubs;
♣
&hearts;
♥
&diams;
♦
Caracteres Tipogrficos
Carcter
Entidad con
nombre
Entidad numrica
espacio

¡
¡
¢
¢
£
£
¤
¤
¥
¥
¦
¦
§
§
¨
¨
©
©
ª
ª
«
«
¬
¬

®
®
¯
¯
°
°
±
±
²
²
³
³
´
´
µ
µ
¶
¶
·
·
¸
¸
¹
¹
º
º
»
»
¼
¼
½
½
¾
¾
¿
¿
12.3. El inspector de cdigo
Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y
Diseo).
Todas estas vistas se aplican directamente sobre la ventana del documento.
Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el documento. Este panel es el
llamado Inspector de cdigo y puede abrirse a travs del menVentana, opcin Inspector de cdigo. Tambin podemos abrir
el Inspector de cdigo pulsando F10.
El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la vista Dividir (Cdigo y Diseo),
pero puede resultar ms cmodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita slo al espacio
del documento. Por ejemplo, si disponemos de una pantalla panormica, podemos tener a un lado el diseo y a otro el cdigo.
12.4. Completar las etiquetas

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el cdigo HTML es la de completar las
etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector < de cdigo como en las vistas de cdigo.
Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de aulaClic, que ha de abrirse en una ventana nueva. En
este caso deberamos introducir la etiqueta <a href="http://www.aulaclic.es" target="_blank">Visitar aulaClic</a>, con lo que
obtendramos el siguiente enlace:
Visitar aulaClic
Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este ejemplo.
Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el smbolo < .
Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos los comandos que pueden aparecer despus l.
Para elegir uno de ellos hay que pulsar dos veces sobre l con el puntero del ratn, o bien, estando seleccionado, pulsar INTRO.
En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el cdigo 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 slo tiene una letra, no necesitamos de esta opcin.
Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio en blanco aparecer otra lista de elementos, que
son los que pueden escribirse despus de la a, los atributos de la etiqueta.
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 cdigo quedar como:
En el caso de atributos en los que hay que indicar la ubicacin de un archivo, nos aparecer la opcin Examinar... que abre el cuadro de
dilogo para elegir el archivo. Tambin podemos continuar escribiendo la direccin.
En lugar de cerrar ya la etiqueta con el smbolo >, queremos primero indicar que el vnculo 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 aparecern como opciones.
Como queremos que el enlace se abra en una pgina nueva, seleccionamos _blank.
Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el smbolo >
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 automticamente se completar la etiqueta de cierre (</a>).
Tambin podemos configurar Dreamweaver para que introduzca la etiqueta de cierre al cerrar la de apertura. Esto lo hacemos desde el
men Edicin Preferencias Sugerencias para el cdigo Cerrar etiquetas.
Ahora podemos completar la etiqueta con el texto que servir de enlace.
12.5. Contraer y expandir cdigo

Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de cdigo y contraerlos para facilitar su legibilidad.
Por ejemplo, podemos seleccionar el trozo de cdigo correspondiente a una tabla, como se ve en la siguiente imagen, aunque podemos
seleccionar cualquier cdigo:
Con el texto seleccionado, pulsamos en uno de los iconos
junto a los nmeros de lnea o el icono Contraer seleccin
. El ejemplo
anterior se contraera quedando:
De esta forma podramos ocultar el cdigo que no nos interesa y dejar el resto del cdigo ms legible.
Para volver a la situacin inicial basta hacer clic en el icono expandir
Otro botn que nos ayudar ser el icono Seleccionar etiqueta padre
, o en el signo + que aparece al lado del cdigo contrado.
. Este botn selecciona toda la etiqueta que contiene al punto
de insercin. A medida que los sigamos pulsando, ir seleccionado las etiquetas en orden jerrquico, aumentando la seleccin.
El icono contraer etiqueta completa
contrae la etiqueta que contiene al punto de insercin, sin necesidad de seleccionarla primero.
Una pega que encontramos es que esto no se guarda, y la prxima vez que abramos el documento aparecer todo el cdigo expandido.
12.6. Errores en el cdigo

Al volver al modo grfico es posible ver si hay algunos errores en el cdigo HTML, como puede ser una etiqueta incompleta. El cdigo
errneo aparecer en amarillo:
Si volvemos al cdigo podremos encontrar el error fcilmente. 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 cdigo es fijndonos en los colores. Por ejemplo, si no hemos cerrado una etiqueta o las comillas de
un atributo, veremos que los colores del cdigo no son como deberan.
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 pgina web que hayas creado puedes utilizar el desplegable Comprobar pgina
Despligalo y haz clic sobre la opcin 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 opcin Configuracin se abrir un cuadro de dilogo como ste:
Donde podrs indicar que navegadores y a partir de qu versin quieres que se tengan en cuenta cuando Dreamweaver realiza la
comprobacin de compatibilidad.
12.7. Buscar y reemplazar

En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas 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 pginas y no recordbamos cul
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 mayora de las pginas tiene al comienzo un texto que hace referencia
al nombre del sitio, por ejemplo, todas esas pginas comienzan con PerrosGatos, y tiene la seguridad de que no existe ese texto en ninguna
parte de las pginas 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 pginas que contienen el texto PerrosGatos dicho texto por la imagen.
En este caso no es necesario que abra una por una todas las pginas que contienen dicho texto, ni tampoco que modifique una por una
dichas pginas para cambiar el texto por la imagen. Para realizar esta tarea resulta ms sencillo utilizar la herramienta de Buscar y
reemplazar.
Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o pulsando Ctrl + F.
Mediante Buscar en puede especificarse en qu documentos buscar. Podemos buscar slo en el documento actual, en todo el sitio
(sitio actual completo), o en los archivos seleccionadosdel sitio (habiendo seleccionado dichos archivos previamente), en los archivos
abiertos o en una carpeta en concreto o en el texto seleccionado.
A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo HTML (cdigo fuente). Tambin
podemos emplear el texto avanzado, por ejemplo si queremos buscar slo texto en determinadas etiquetas, o etiqueta especfica, 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 cdigo que se desea buscar.
En Reemplazar hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo buscado. Si queremos borrar basta
con dejarlo vaco. Si no vamos a reemplazar no es necesario.
En Opciones encontramos las opciones de bsqueda: si el texto debe coincidir en maysculas y minsculas, si se omitirn los
espacios en blanco, si la palabra a buscar debe ser unapalabra completa o puede formar parte de otra, o si el texto introducido es un
patrn de expresin regular.
El reemplazo puede hacerse de varias formas, siempre a travs 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 cdigo 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 cdigo, y reemplazar en todos ellos, se utilizan los
botones Buscar todos y Reemp. todos. O podemos reemplazarlos todos directamente.
Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el texto coincidente, resaltando en el cdigo fuente la
lnea 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 opcin 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 cdigo buscado.
Pulsando sobre el botn
vuelve a abrirse la ventana de Buscar y reemplazar. Desde dicha ventana podemos reemplazar en los
documentos encontrados, uno por uno, con el botnReemplazar, o bien reemplazar directamente en todos los documento encontrados,
pulsando sobre el botn Reemp. todos.
En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer en la lista junto con un crculo verde, que indica
que ya ha sufrido reemplazo.
En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos. Hay que tener mucho cuidado al utilizar esta
herramienta, ya que no es posible deshacer los cambios en los documentos que estn cerrados durante la bsqueda y el reemplazo.
En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y reemplazarlo por una imagen. En este caso concreto, lo que se
desea sustituir es texto por el cdigo de una imagen, por lo que en Buscar no podramos elegir la opcin Texto, habra que elegir la
opcin Cdigo fuente.
En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la imagen. En este caso la etiqueta sera <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 opcin Coincidir Maysculas y Minsculas para asegurarnos
de que si en otra parte aparece el texto perrosgatos, no sea reemplazado.
Existen mtodos de bsqueda mucho ms 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 smbolos que unidos pueden definir un patrn para identificar una cadena de caracteres.
Antes de comenzar a verlas deberamos tener bien claro cmo acta la bsqueda normal.
Por ejemplo, si buscamos la cadena aula, los resultados que encontrsemos podran ser aulaclic, miaula, aula, etc...
Utilizaremos las Expresiones Regulares para decidir cules sern el resto de los caracteres.
Para utilizar estos smbolos especiales tendremos que marcar la casilla Utilizar expresin regular en el cuadro de dilogo de Buscar y
Remplazar:
Una vez tengamos la casilla marcada, todo lo que escribamos en el cuadro de bsqueda se tomar como una expresin regular, as que
empecemos a ver los smbolos que podemos utilizar:
Smbolo Significado
^
Utiliza este smbolo para buscar cadenas al principio de un documento.
Esta expresin regular no es muy til, pues normalmente los documentos HTML empiezan con la especificacin de las cabeceras lo que,
normalmente, no pertenece a nuestro objetivo de bsqueda.
Utilizando este smbolo podramos encontrar documentos buscando por
^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Esto nos dara 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 apareceran.
En este ejemplo se estn buscando archivos que sigan el formato XHTML, los documentos despreciados seran
aquellos que sigan HTML.
$
Utiliza este smbolo para buscar cadenas al final de un documento.
Igual que la anterior, esta expresin regular no nos ser de mucha ayuda cuando utilicemos la herramienta Buscar y Reemplazar. Slo
podremos buscar documentos que terminen de determinada manera.
Por ejemplo, podemos buscar archivos que terminen con
</html>$
Esta bsqueda nos devolvera todos aquellos documentos que se han cerrado correctamente, los que terminen, por ejemplo en </body> no
se mostraran.
*
Ahora ya entramos con expresiones regulares mucho ms tiles.
El asterisco te ayudar a buscar un carcter que aparezca una vez, varias o ninguna. Veamos un ejemplo, si hacemos la bsqueda por
a*u
Los resultados que podemos encontrar seran aula, aaula, aaaaula o incluso uno o cuello, porque el asterisco implica que el carcter no
tiene porque aparecer.
+
Casi ocurre lo mismo con esta expresin regular.
El signo + buscar coincidencias de un carcter una vez o varas. En este caso se despreciarn aquellas en las que no aparezca.
Por ejemplo, si buscamos
a+u
Los resultados podran ser aula, aaula o aaaula, pero no ni uno ni cuello porque este smbolo obliga a que el carcter se encuentre al
menos una vez.
?
Veamos ahora qu ocurre con el signo de interrogacin.
Este smbolo es el contrario del anterior, slo busca coincidencias una sola vez o ninguna, de modo que buscando
au?la
Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic.
Es decir, este smbolo nos sirve para marcar caracteres opcionales.
.
El punto es un smbolo muy til. Podemos utilizarlo para sustituir cualquier carcter, por ejemplo, en la bsqueda de
de.a
Podramos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea (aunque s deaa). En definitiva, este smbolo sustituye
a un carcter ni ms ni menos.
Llegados a este punto podras realizar bsquedas ms complejas combinando varias expresiones que hemos visto, por ejemplo,
de.?a
Encontrara dela, desa, deia, dera, de9a e incluso dea pues al escribir ? a la derecha del punto hemos indicado que ese carcter puede
aparecer o no.
uno|otro
El smbolo | se utiliza para representar la conjuncin lgica OR, es decir, uno u otro.
Podemos buscar
99|ade
Y encontraramos resultados tan variados como adecuado, cadena, 1099, 9900, etc...
Piensa que ahora podemos complicar mucho ms las bsquedas combinando todos los smbolos vistos, con esta bsqueda:
de.?a|de?a
Encontraramos resultados como dela, desarmado, dea (que cumple ambas condiciones) o da (que cumple la segunda).
{n}
Los smbolos de llave indican repeticin.
Nos ayudarn a establecer el nmero de veces que se repite el carcter al cual precede. Por ejemplo, buscando
cas{2}a
Encontrara nicamente las palabras que contengan cassa (como cassa, micassa, ocassa7a, recassaa...).
Sin embargo, la bsqueda de
cas{2}
Podra encontrar cassa, casssa, micassssa, etc... Pues buscar una cadena que contenga ca seguida de 2 eses.
{n,m}
Este sera otro caso de smbolo de llave, pero en este caso introduciremos dos nmeros.
Estos nmeros indicarn la repeticin que puede tener el carcter al cual preceden. Por ejemplo, la bsqueda:
m{2,4}
Encontrara coincidencias con cadenas que contuviesen al menos 2 m o hasta como mximo 4.
Posibles resultados seran mm, mmm o mmmm. La cadena ummmm s que se encontrara, mientras que en ummmmm slo encontrara
las 4 primeras emes.
En esta expresin regular podemos obviar la segunda parte para conseguir algo como esto:
m{2,}
El resultado ahora sera cualquier cadena que contenga al menos 2 m y sin mximo de repeticin.
Las cadenas umm, ummmmmmm o ummmmmmmmmmm se encontraran sin problemas.
Remplazar:
Smbolo Significado
^
$
</html>$
se mostraran.
*
a*u
+
a+u
menos una vez.
?
au?la
.
de.a
de.?a
aparecer o no.
uno|otro
Podemos buscar
99|ade
de.?a|de?a
{n}
cas{2}a
cas{2}
{n,m}
m{2,4}
m{2,}
Existen mtodos de bsqueda mucho ms precisos que los que hemos visto, si quieres conocerlos visita el avanzado de Expresiones
Regulares
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Buscar y reemplazar.
Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo visita el avanzado de Bsqueda en Etiquetas
La unin de todos estas tcnicas de bsqueda y reemplazo es realmente potente y til, puede ahorrar mucho trabajo en la tarea de
mantener un sitio web. Desde la experiencia podemos decir que una de las cosas que justifica el uso de Dreamweaver para un webmaster
es la potencia de estas herramientas.
Unidad 12. Ejercicio: Buscar y reemplazar
Objetivo
Practicar el uso de la herramienta Buscar y reemplazar para buscar y reemplazar un texto por otro.
Ejercicio
4. Haz
doble
clic
sobre
el
documento buscar.htm,
que
aparece
en
el
panel Archivos.
5. Haz clic sobre el men Edicin.

6. Elige la opcin Buscar y reemplazar. Se abrir una nueva ventana.
7. En Buscar en: selecciona Documento actual.
8. En Buscar selecciona Texto y escribe Recetas.
9. En Reemplazar con: escribe aulaClic.
10. Haz clic sobre el botn Reemp. todos. Aparecer un aviso indicando que se han encontrado y sustituido 10 elementos.
11. Pulsa sobre alguna parte de la pgina para que se aplique el ltimo cambio.
Unidad 12. Avanzado: Bsqueda en Etiquetas
En el cuadro de dilogo Buscar y Reemplazar podrs encontrar otros tipos de bsqueda que todava no hemos visto.
Para ello debers seleccionarlos en el desplegable Buscar:
El primer mtodo que veremos ser la opcin Texto (avanzado).
Como puedes ver en la imagen, este cuadro de bsqueda es muy similar al que estamos acostumbrados a utilizar, slo que tiene un
espacio entre los campos Buscar y Reemplazar que nos darn la oportunidad de trabajar con etiquetas.
Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu texto (o no, segn hayas seleccionado en el
primero).
Ahora estars listo para realizar bsquedas en etiquetas especficas.
Pero an hay ms. Puedes hacer clic en el botn
para ver cmo aparecen ms opciones:
Puedes incluir ms opciones sobre el tipo de atributos que tenga (e incluso en los desplegables de la derecha incluir un valor para el
atributo) o seguir buscando por otras opciones.
Vers que en seguida te hars con el mtodo de bsqueda.
Lo que tenemos que destacar es que esta forma te ayudar a modificar el texto que se encuentre dentro de una etiqueta.
Pero qu pasa si lo que queremos es buscar o modificar una etiqueta especifica con unas circunstancias igual de especficas?
Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta especfica.
Vers el siguiente cuadro de dilogo:
En este caso tenemos dos secciones Buscar: y Accin:.

Obviamente para realizar la segunda tendremos que rellenar los datos correctos en la primera. As que veamos qu nos podemos
encontrar.
En el desplegable de al lado de Etiqueta especifica deberemos indicar el tipo de etiqueta que estamos buscando.
Luego en la lnea siguiente podremos indicar si tiene algn tipo de atributo (y con qu valor) o si se encuentra dentro de otra etiqueta.
Estas ltimas opciones son muy parecidas a las que se utilizaron en el mtodo de Texto (avanzado).
Recuerda que puedes usar el botn
para seguir aadiendo condiciones.
Finalmente y cuando la bsqueda funcione correctamente podremos utilizar la opcin Accin:
Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la etiqueta con otra o cambiar alguno de sus atributos
como aadir algo antes o despus de sta.
Por ejemplo, si quisisemos quitar todos los enlaces de una pgina podramos utilizar la opcin Etiqueta especfica para ello,
bastar con que indiques las opciones que puedes ver en la siguiente imagen:
Ejercicios unidad 12: HTML desde Dreamweaver
Ejercicio 1: Deportes
2. Abrir el documento buscar.htm.

3. Reemplazar el texto deportes (en minsculas) por el texto aulaClic, utilizando la herramienta Buscar y reemplazar.
Ejercicio 2: Animales
1. Abrir el sitio Animales.
2. Abrir el documento buscar.htm.
3. Reemplazar la imagen logoaulaclic.png por la imagen logo_animales.gif, utilizando la herramienta Buscar y reemplazar.
Remplazar:
Smbolo Significado
^
$
</html>$
se mostraran.
*
a*u
+
a+u
menos una vez.
?
au?la
.
de.a
de.?a
aparecer o no.
uno|otro
Podemos buscar
99|ade
de.?a|de?a
{n}
cas{2}a
cas{2}
{n,m}
m{2,4}
m{2,}
Unidad 12. Avanzado: Bsqueda en Etiquetas
En el cuadro de dilogo Buscar y Reemplazar podrs encontrar otros tipos de bsqueda que todava no hemos visto.
Para ello debers seleccionarlos en el desplegable Buscar:
El primer mtodo que veremos ser la opcin Texto (avanzado).
Como puedes ver en la imagen, este cuadro de bsqueda es muy similar al que estamos acostumbrados a utilizar, slo que tiene un
espacio entre los campos Buscar y Reemplazar que nos darn la oportunidad de trabajar con etiquetas.
Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu texto (o no, segn hayas seleccionado en el
primero).
Ahora estars listo para realizar bsquedas en etiquetas especficas.
Pero an hay ms. Puedes hacer clic en el botn
para ver cmo aparecen ms opciones:
Puedes incluir ms opciones sobre el tipo de atributos que tenga (e incluso en los desplegables de la derecha incluir un valor para el
atributo) o seguir buscando por otras opciones.
Vers que en seguida te hars con el mtodo de bsqueda.
Lo que tenemos que destacar es que esta forma te ayudar a modificar el texto que se encuentre dentro de una etiqueta.
Pero qu pasa si lo que queremos es buscar o modificar una etiqueta especifica con unas circunstancias igual de especficas?
Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta especfica.
Vers el siguiente cuadro de dilogo:
En este caso tenemos dos secciones Buscar: y Accin:.

Obviamente para realizar la segunda tendremos que rellenar los datos correctos en la primera. As que veamos qu nos podemos
encontrar.
En el desplegable de al lado de Etiqueta especifica deberemos indicar el tipo de etiqueta que estamos buscando.
Luego en la lnea siguiente podremos indicar si tiene algn tipo de atributo (y con qu valor) o si se encuentra dentro de otra etiqueta.
Estas ltimas opciones son muy parecidas a las que se utilizaron en el mtodo de Texto (avanzado).
Recuerda que puedes usar el botn
para seguir aadiendo condiciones.
Finalmente y cuando la bsqueda funcione correctamente podremos utilizar la opcin Accin:
Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la etiqueta con otra o cambiar alguno de sus atributos
como aadir algo antes o despus de sta.
Por ejemplo, si quisisemos quitar todos los enlaces de una pgina podramos utilizar la opcin Etiqueta especfica para ello,
bastar con que indiques las opciones que puedes ver en la siguiente imagen:
Unidad 13. Otros elementos (I)
Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las fuentes web, las marquesinas, las
reglas horizontales y la fecha.
13.1. Fuentes web
Esta versin de Dreamweaver permite usar fuentes web de forma rpida y sencilla. En la web hay sitios como, Google
Webfonts, FontsSquitrel etc. donde podemos obtener nuevas fuentes para nuestras pginas web. Usar estos nuevos tipos de letra puede dar
un toque de originalidad a nuestros sitios.
Para trabajar con las fuentes web debemos ir al men Modificar, Fuentes Web ... y veremos la siguiente ventana.
Si pulsamos en el botn Aadir fuente ... veremos esta ventana.
En esta ventana tenemos que indicar en qu carpeta tenemos el archivo que contiene la nueva fuente (que prevamente hemos
descargado) y pulsar Aceptar. Las fuentes pueden estar en uno de los cuatro formatos que aparecen en la ventana, EOT, WOFF, TIF y
SVG. Hay que leer las condiciones de uso de la fuente y aceptarlas. A partir de este momento ya podemos usar la fuente como una fuente
ms. Por ejemplo, al definir nuevos estilos aparecer en el desplegabe Fuentes.
Esta lnea esta escrita con la fuente web Galindo regular.
Para conseguir nuevos ficheros de fuentes web simplemente hay que visitar una de las webs que los ofrecen y descargarse el fichero con
la fuente. Vamos a mostar un ejemplo con Googlewebfonts. Al acceder a su web veremos una pantalla como esta en la que podemos
seleccionar la fuente que nos guste pulsando el botn Add to collection.
A continuacin hacemos clic en el botn Use de la parte inferior derecha y veremos la siguiente pantalla:
Aqu debemos pulsar en Download your Collection para descargar el archivo en nuestro disco duro, a partir de ah ya podemos aadir la
fuente como acabamos de ver.
13.2. Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en
forma de lnea. A continuacin tienes un ejemplo de marquesina.
Las marquesinas se utilizan cada vez menos ya que no estn incluidas en los estndares web y en ocasiones pueden resultar un poco
molestas. Adems el usuario no puede hacer nada para detener el movimiento.
Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo.
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.
Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda
indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. 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 cdigo puedes ver a
continuacin:
<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 atencin del visitante. Cada vez se emplea menos este elemento, ya que
si se quiere animar texto, se suele utilizar Flash que nos ofrece mucha ms personalizacin.
13.3. Fecha
Dreamweaver permite insertar fcilmente la fecha de ltima modificacin de las pginas.

Cuando se modifica una pgina en la que se ha insertado este tipo de fecha, se actualizar automticamente con la fecha del sistema.
Conviene insertar la fecha de modificacin cuando la pgina ha de contener informacin actualizada cada poco tiempo, para que los
usuarios puedan saber cundo fue la ltima vez que se actualizaron los datos. Pero en el caso de que la pgina no se actualice hasta que
pase cierto tiempo, es preferible no incluir la fecha de modificacin, ya que puede dar sensacin 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 informtica)
que pueden haber quedado obsoletos.
Para insertar la fecha hay que dirigirse al men Insertar, a la opcin Fecha.
En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automticamente al modificar y
guardar la pgina de nuevo.
Para practicar puedes realizar el Ejercicio paso a paso Insertar fecha .
13.4. Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Una regla horizontal no es
ms que una lnea que cruza horizontalmente al elemento que la contiene.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla horizontal.
Si queremos insertarla desde el cdigo, podemos hacerlo con la etiqueta <hr />.
El inspector de propiedades para las reglas es el siguiente.
A travs de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuacin tienes cuatro ejemplos de reglas
horizontales.
Estas reglas slo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo, no tienen activada la
opcin Sombreado, mientras que las otras dos s.
Podemos cambiar su color mediante CSS, con la propiedad color (como el color del texto).
Unidad 13. Ejercicio: Insertar la fecha de ltima actualizacin
Objetivo
Practicar cmo insertar la fecha de ltima actualizacin.
Ejercicio
4. Haz
doble
clic
sobre
el
que
aparece
en
5. Sita el punto de insercin a la derecha de la ltima lnea de texto y pulsa Intro.

6. Escribe el texto Fecha ltima modificacin:.
7. ve al men Insertar, opcin Fecha. Se abrir una nueva ventana.
8. En Formato de da: selecciona [sin da].
9. En Formato de hora: selecciona [sin hora].
10. En Formato de Fecha: selecciona 7 Marzo, 1974. Si no aparece este formato, seleccionar el ms parecido.
el
panel Archivos.
11. Activar la casilla Actualizar automticamente al guardar.

12. Hacer clic sobre el botn Aceptar.
13. Desde la barra de estado, selecciona la etiqueta <p>.
14. En el Inspector de propiedades CSS, selecciona <Nuevo estilo en lnea>.
15. Alinea el texto a la derecha y cambia su tamao a un 80% en cursiva.
de la barra de herramientas y cierra la pgina.
13.5. Cdigo de otras pginas

En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras pginas que estn publicadas en Internet.
Por una parte, tenemos pginas que nos ofrecen ese cdigo para que lo incluyamos en nuestra web, como banners o contenido
multimedia, como pueden ser los vdeos del portal youTube.
En la mayora de estos casos, lo nico que tendremos que hacer ser copiar ese cdigo y pegarlo en nuestro cdigo 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 pgina que
nos gustara tener o que sentimos curiosidad por cmo estar hecho.
En estos casos, lo mejor es ver el cdigo fuente. Puedes visualizar el cdigo fuente de dichas pginas con cualquier navegador,
normalmente a travs del men Configuracin, o bien mostrar el men contextual de la pgina pulsando con el botn derecho sobre ella,
y pulsando despus sobre la opcin Ver cdigo fuente. De este modo podemos ver su cdigo y emplearlo en nuestras pginas.
Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el uso de los comportamientos (que aparecen
programados en cdigo JavaScript), y otra serie de rutinasJavaScript.
Pero en muchas ocasiones puede costar entender el cdigo, sobre todo si no se tienen nociones de ningn lenguaje de programacin. Si
no entiendes el cdigo, puedes cometer el error de copiar cdigo JavaScript errneo, copiarlo de forma incompleta, insertarlo en una zona
incorrecta del cdigo html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las lneas
<head> ... <script language="JavaScript">
y
//--> </script> ... </head>
Ejercicios unidad 13: Otros elementos
<!--
2. Abrir el documento donde.htm.
3. Convertir la ltima lnea de texto (Para ms informacin...) en una marquesina.
2. Abrir los documentos consultas.htm, gatos.htm, perros.htm e index.htm.
3. Insertar una regla horizontal en la segunda celda de la tercera fila de la tabla en todos los documentos.
Unidad 14. Capas (I)
Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn
comportamiento.
14.1. Introduccin
Las capas no son ms que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los prrafos
son elementos de bloque destinados a contener texto.
sta es una capa con borde verde
Las capas, tambin 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 pgina, obtenemos los elementos ideales
para maquetar nuestra pgina, es decir, distribuir el contenido en bloques.
En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador,
vers que pueden llegar a solaparse.
Cuando convertimos una capa en un elemento con posicin absoluta (elemento PA), se muestra as en Dreamweaver:
Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola
hacia la nueva posicin.
Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, 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 tambin la capa.
Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero dinamismo.
14.2. Insertar una capa
Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, donde encontramos Etiqueta
Div (divisin simple), Etiqueta Div de diseo de cuadrcula fluida y Div PA (Capa con Posicin Absoluta). Para lo que vamos a comentar,
nos quedamos con la segunda opcin.
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 fcil
seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Elementos PA del panel CSS,
que puede abrirse a travs del men Ventana opcinElementos PA. Tambin 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.
14.3. Formato de una capa

Las propiedades de la capa se especifican a travs 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 ms descriptivo, podemos hacer clic derecho sobre el
borde de la capa y elegir ID... en el men contextual. Tambin puede ser cambiado a travs del panel Elementos PA, haciendo doble clic
sobre l.
El resto de campos se refieren a las propiedades CSS que definen la posicin y tamao de la capa.
Izq y Sup indican la distancia en pxeles (tambin podemos introducir un valor en porcentaje) que hay entre los lmites 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 posicin en el documento.
Si queremos que la posicin se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un
posicionamiento relativo empleando CSS (En las propiedades de Posicin del editor CSS, estableciendo position como relative). Esto no
afectar a la posicin del elemento padre si no cambiamos las propiedades left, top, right o bottom.
Truco: Si queremos centrar una capa con respecto al elemento que la contiene podemos hacerlo empleando CSS. Para ello, en Izq.
ponemos 50%. Para que el lado 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, aadiramos por CSS margin-left: -100px;.
An y Al indican la anchura y la altura
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs 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 segn el navegador),
Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
Hidden (la capa est oculta).
La visibilidad tambin puede cambiarse a travs del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible,
y el ojo cerrado indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento). Hasta ahora, los elementos que veamos 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 cmo aparecen las
capas en un navegador cuando el contenido excede el tamao especificado de la capa.
o
Visible indica que el contenido adicional se muestra, excediendo los lmites de la capa.
Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador.
Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan
como si no.
Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir,
cuando el contenido de la capa supere sus lmites).
visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. ste s cabe.
scroll. ste s cabe.
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 pgina, utilizando como selector el ID o
nombre de la capa. Por eso, si queremos emplear una capa en la misma posicin en distintas pginas, podemos exportar ese estilo a una
hoja de estilos, y en cada pgina crear una capa y darle el mismo ID. Recuerda que el ID ha de ser nico en la pgina, pero puede repetirse
en pginas distintas.
Podemos editar estas propiedades con el editor CSS en la categora Posicin. Ah vers, por ejemplo, que podemos indicar la distancia
con el lado derecho (right) en vez del izquierdo como hacamos 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.
Unidad 14. Ejercicio: Insertar una capa
Objetivo
Practicar las operaciones que hay que realizar para insertar una capa y modificar sus propiedades.
Ejercicio
4. Haz
doble
clic
sobre
el
documento index.htm,
que
aparece
en
el
Se abrir el documento en Dreamweaver. Haz clic sobre el frame de la izquierda para editar el archivo menu.htm.
panel Archivos.
6. Sita el punto de insercin a continuacin de la imagen de sustitucin de email que habamos incluido en el marco izquierdo.

8. Elige la opcin Objetos de diseo, luego elige la opcin Div PA.
9. Haz clic derecho sobre la esquina superior izquierda (el recuadro blanco), y en el men contextual elige ID...
10. Escribe sugerencia como nuevo ID y pulsa Aceptar.
11. Sita el punto de insercin dentro de la capa.
12. Escribe el texto no olvides mandarnos tus dudas y sugerencias.
13. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda.
14. Utilizando los controles para redimensionar y mover la capa, haz que quede debajo de la imagen, centrada, y que todo el texto quepa
dentro. Si lo prefieres, puedes introducir los valores:
o
En Iz escribe 56px.
En An escribe 150px.
En Al escribe 52px.
15. Haz clic en el contenido y ve al Inspector de propiedades CSS.

16. Asegrate que est seleccionada como Regla de destino el nombre de la capa (por defecto #apDiv1, pero lo hemos cambiado
a #sugerencia), y pulsa el botn Editar regla.
17. Edita las propiedades CSS para darle un fondo blanco, un borde gris (#666) de 1px slido, reducir el tamao de la fuente a un 90% y
darle un padding de 5px. Acepta los cambios del editor de estilo.
18. Comprueba que la capa ha quedado debajo de la imagen de sustitucin, si no haz clic en el cuadrado blanco de su esquina superiorizquierda y arrstralo hasta que quede centrado en el marco y bajo la imagen de email. Comprueba tambin que el tamao permite leer
todo el texto.
19. Guarda y visualzalo en el navegador.
20. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda.
21. En Vis selecciona hidden.
22. Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el ltimo cambio.
24. Comprueba en el navegador que la capa ya no se muestra.
Ejercicios unidad 14: Capas
3. Insertar una capa con el nombre oferta.
4. Modificar la capa para que sea similar a la de la imagen (imagen de IE 8):
5. La capa debe de quedar posicionada debajo de los enlaces del men, a un 30% de distancia del lado izquierdo.
6. Hacer que la capa sea visible.

2. Abrir el documento gatos.htm.
3. Insertar una capa con el nombre gatosemana.
4. Modificar
la
capa
para
que
quede
como
en
la
siguiente
imagen:
Para ello dispones de las imgenes gato1.gif, fondo_gatosemana.png y cerrar_gatosemana.png en la carpeta de imgenes del
sitio.
5. Coloca la capa en la esquina superior derecha de la celda central, y haz que siempre se muestre en esa posicin respecto a la celda
aunque se redimensione la ventana.
6. Hacer que la capa est oculta.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu
Unidad 15. Comportamientos (I)
En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de ejemplos de entre sus posibles
aplicaciones.
15.1. Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede ser
mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del
panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento. Sita 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 ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que ya
estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos para poder
insertar comportamientos ms tarde.
El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos. Tambin pulsando Mays+F4.
En este panel hay que desplegar el botn
pulsando sobre l, y en Mostrar eventos elegir HTML 4.1. Es la opcin por defecto. Esta
opcin se debe a que en el pasado, los comportamientos solan ser diferentes dependiendo del navegador.
En la actualidad, los navegadores tienden a seguir el estndar, lo que hace que ya no tengamos problemas de compatibilidad. Slo
habremos de cambiarlo si hacemos pginas especficas para navegadores ms viejos, ya en desuso.
15.2. Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectar el comportamiento. Esto lo podemos hacer desde el inspector de
propiedades.
Despus 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 botn
del panel Comportamientos aparece la lista de todas las acciones posibles.
Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas acciones, mientras que otras no.
En este caso la accin Validar formulario no puede seleccionarse porque no existe ningn formulario en la pgina.
Despus de elegir alguna accin, 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 accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la accin.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn
cambiar el orden de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante los botones
15.3. Mostrar-Ocultar elementos
. Tambin es posible
.
Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar elementos. Lo ms comn es emplearlo con capas,
que han de haber sido creadas antes, ero 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 tenamos un ejemplo de este tipo. Vamos a ver qu eventos y acciones hay
que establecer para que se produzca dicho comportamiento.
Despus de seleccionar el elemento que producir el evento (en se ejemplo, la imagen del gatito) hay que seleccionar una accin de la
lista, pulsando sobre el botn
. En este caso la accin tiene que ser la de Mostrar-Ocultar elementos.
Tras elegir la accin, se mostrar un cuadro de dilogo en el que aparecen listados todos los elementos de la pgina 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 accin, en el
panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la que puede indicarse la variacin 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 travs de los
botones inferiores de la ventana.
No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las que se desea que cambien al producirse
el evento. Por ejemplo, en este caso a la capa gatomesno se le ha aplicado ninguna visibilidad diferente, ya que no se desea que vare al
producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botn
correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habra que
volver a pulsar sobre el botn 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
accin Mostrar-Ocultar elementos. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn est sobre), mientras que
el otro la ocultar para el evento onMouseOut (cuando el ratn est fuera).
15.4. Llamar JavaScript

Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar Javascript. Este comportamiento permite insertar
cdigo JavaScript dentro del cdigo 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 lnea
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 accin Llamar Javascript a travs del botn
Entonces aparece una nueva ventana en la que hay que introducir la lnea 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 accin vuelve a abrirse la ventana anterior, y es posible modificar la lnea de cdigo.
Segn nuestras necesidades elegiremos un evento u otro. Puedes ver una descripcin de cada evento en este avanzado:
Unidad 15. Ejercicio: Crear comportamiento
Objetivo
Practicar las operaciones que hay que realizar para crear comportamientos para mostrar y ocultar capas.
Ejercicio
7. Si no aparece el panel Comportamientos, brelo a travs del men Ventana, opcin Comportamientos.
8. Haz clic sobre la imagen de sustitucin de email para seleccionarla.
9. Haz clic sobre el botn
del panel Comportamientos.
10. Elige la opcin Mostrar-Ocultar elementos.

11. En Elementos: selecciona la capa div sugerencia.
12. Haz clic sobre el botn Mostrar.
13. Haz clic sobre el botn Aceptar. En el panel Comportamientos aparecer el nuevo comportamiento.
14. Haz clic sobre el comportamiento en el panel.
, que aparece a la derecha del evento.
16. Selecciona el evento onMouseOver (cuando se poner el cursor encima).
del panel Comportamientos.
18. Elige la opcin Mostrar-Ocultar elementos.

19. En Elementos: selecciona la capa div sugerencia.
20. Haz clic sobre el botn Ocultar.
21. Haz clic sobre el botn Aceptar. En el panel Comportamientos aparecer el nuevo comportamiento.
22. Haz clic sobre el comportamiento en el panel.
, que aparece a la derecha del evento.
24. Selecciona el evento onMouseOut (cuando se quita el cursor).

25. Selecciona la capa sugerencia (puedes usar el panel Elementos PA). En el Inspector de propiedades, cambia el valor de visibilidad
(Vis.) a hidden (oculto).
27. Visualiza la pgina en tu navegador y comprueba los comportamientos que has definido.
Con esto hemos acabado el sitio cocina. Abre en tu navegador la pgina index.htm y comprala con la que aparece si pulsas aqu.
Ejercicios unidad 15: Comportamientos

3. Insertar un comportamiento que oculte la capa al hacer clic sobre el enlace Cerrar [x].
Abre el documento index.htm de Deportes en un navegador, y compara la pgina que has creado con la que aparece si pulsas aqu.
2. Abrir el documento gatos.htm.
3. Insertar un comportamiento que muestre la capa gatosemana al hacer clic sobre la imagen del gato que se encuentra a la izquierda.
4. Insertar un comportamiento que oculte la capa al hacer clic en la imagen con el icono de cerrar.
Abre el documento inicio.htm de Animales en un navegador, y compara la pgina que has creado con la que aparece si pulsas aqu.
Unidad 15. Avanzado: Eventos
Eventos disponible en Dreamweaver CS6

En el panel Comportamientos podemos seleccionar cualquiera de estos eventos. Por sus caractersticas, no todos funcionan en todos los
elementos.
Evento
Se produce cuando...
onBlur
Un elemento (normalmente un campo de formulario) pierde el foco
onClick
Se hace clic en el elemento
onDblClick
Se hace doble clic en el elemento
onFocus
Un elemento (normalmente un campo de formulario) recibe el foco
onKeyDown
El usuario pulsa una tecla
onKeyPress
El usuario mantiene pulsada una tecla
onKeyUp
El usuario libera una tecla
onLoad
El navegador termina de cargar la pgina o imagen
onMouseDown
El usuario pulsa un botn del ratn
onMouseMove
El usuario mueve el cursor
onMouseOut
El cursor abandona el elemento
onMouseOver
El cursor se coloca sobre el elemento
onMouseUp
El usuario libera un botn del ratn
Eventos no includos en el panel Comportamientos, pero que podramos emplear:

onDragDrop
El usuario arrastra y suelta un objeto en la ventana
onError
Se produce un error al cargar (onLoad)
onChange
El valor de un campo de formulario cambia
onMove
Se mueve el elemento
onReset
Se limpian los campos del formulario (botn rset)
onResize
Se cambia el tamao de una ventana o marco
onSelect
Se selecciona el texto del campo texto o rea de texto de un formulario
onSubmit
Se va a enviar el formulario
onUnload
El usuario abandona una pgina
Si observas el panel comportamientos, al principio aparecen los mismos eventos, precedidos por la etiqueta <a>. La diferencia es que si
seleccionamos estos eventos, se crear un enlace alrededor del elemento y se aplicar el comportamiento al enlace. Si no, se aplicar
directamente al elemento.
Esto es muy comn. As, al crear un enlace, el usuario sabe que es algo que se puede pulsar, porque al pasar por encima el cursor toma
forma de mano, o porque tienen el estilo propio de los enlaces.
Unidad 16. Comportamientos avanzados (I)
En el tema anterior vimos algunos de los comportamientos bsicos, en este tema veremos otros comportamientos y veremos cmo
utilizarlos y aprovecharnos de esta caracterstica de Dreamweaver para crear diversas funcionalidades automticamente.
16.1. Mensajes emergentes

Este comportamiento te permitir crear avisos emergentes como en el siguiente ejemplo.
Haz clic aqu.

Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que no debers abusar de ellos, pues a la larga pueden
resultar un poco incmodos, utilzalos con un objetivo concreto y no porque quieras atraer la atencin del usuario. Mientras se muestre el
mensaje, la ventana del navegador quedar bloqueada.
Para crear un mensaje emergente debers 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 botn
y selecciona la opcin
Mensaje emergente.
Se abrir el siguiente cuadro de dilogo:
Aqu debers 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 ms intuitivo para el usuario que si,
por ejemplo, asocias el mensaje a un eventoonMouseOver (cuando se pase el ratn por encima) el usuario no sabr muy bien porque se ha
generado el mensaje de aviso. Y resultara muy molesto tener que ir "esquivando" los enlaces por si aparecen mensajes emergentes.
En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que
espera el usuario), el evento onClick es el ms indicado para este caso.
16.2. Carga previa de imgenes

Este comportamiento te ser muy til para mejorar la visualizacin de tus pginas web en determinados casos.
Al cargar previamente las imgenes contenidas en la pgina obligamos al navegador a descargar las imgenes con prioridad sobre el
resto del documento.
As cuando la pgina finalmente se visualiza (porque ha terminado la carga) el usuario ver la estructura completa de la pgina con las
imgenes incluidas ya cargadas y mostrndose.
Este mtodo se diferencia del tradicional en que si no establecemos este comportamiento, la pgina se carga (slo texto) y se visualiza
antes de que las imgenes estn cargadas por completo, aunque respetando su hueco. Ten en cuenta que sta es la opcin ms
aconsejada en la mayora de los casos.
Una vez terminada esta carga, el navegador empieza la descarga de las imgenes. Por lo que hay unos momentos en los que la pgina
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 imgenes contenidas (el texto se dispondra sin tenerlas en cuenta hasta que se descargasen).
Para evitar esto utilizaremos la Carga Previa de Imgenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botn
previa de imgenes.
Se abrir el siguiente cuadro de dilogo:
, selecciona, entonces, la opcin Carga
Aqu debers incluir las imgenes que quieras que se carguen utilizando los botones
, podrs indicar su ubicacin pulsando el
botn Examinar.
Qu imgenes debemos de cargar? Aquellas que son imprescindibles en el diseo de la pgina 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 imgenes se cargan cuando se necesitan. Por tanto, la imagen de fondo no se
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 sustitucin an no se haya cargado. En este caso, es conveniente precargar esa imagen.
La imagen de sustitucin que ya explicamos incluye la carga previa de imgenes.
Por su puesto, resulta contraproducente cargar imgenes que no vayamos a emplear.
Si cargas previamente imgenes 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 pgina tarda demasiado en cargarse la abandone.
16.3. Abrir nueva ventana del navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudar a crear enlaces mucho ms personalizados.
Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botn. Pero siempre lo haremos asociado
al evento onClick de estos elementos.
Otra opcin 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 informacin importante.
Por ejemplo, si haces clic en la siguiente lnea se abrir una ventana con la pgina principal de aulaClic.
Nueva ventana
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 pgina haremos clic
en una rea vaca del documento.
Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botn
para desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de dilogo:
Veamos las opciones que podemos seleccionar aqu.

En Mostrar URL: escribiremos la URL de la pgina que queremos abrir.
En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamao en pxeles.
El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana. As, ms tarde, utilizando JavaScript, podramos
referenciarnos a ella utilizando este nombre.
En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de mens aparezcan en la nueva ventana.
Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer nicamente rodeada de un marco de pgina.
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.5. Comprobar Plug-ins

Un comportamiento que tiene que ver con la comprobacin de las caractersticas del navegador del usuario es la opcin Comprobar
Plug-ins.
Si haces clic sobre ella vers el siguiente cuadro de dilogo:
Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o aadidos) 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 pgina 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 pgina que quieres que se muestre si el plug-in existe en el
navegador del usuario. Djalo en blanco si quieres que se quede en la pgina 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 pgina donde descargarse el plug-in para poder visualizar la tuya
correctamente, o redirigirlo a una pgina que hayas creado para aquellos que no cumplan los requisitos mnimos del sitio.
Este comportamiento tambin deber ir asociado al evento onLoad del body para que pueda ejecutarse en la carga de la pgina.
se comportamiento est cayendo en desuso, ya que los navegadores actuales detectan automticamente los plugins faltantes y nos
ofrecen la posibilidad de instalarlos.
16.5. Comprobar Plug-ins

Un comportamiento que tiene que ver con la comprobacin de las caractersticas del navegador del usuario es la opcin Comprobar
Plug-ins.
Si haces clic sobre ella vers el siguiente cuadro de dilogo:
Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o aadidos) 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 pgina 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 pgina que quieres que se muestre si el plug-in existe en el
navegador del usuario. Djalo en blanco si quieres que se quede en la pgina 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 pgina donde descargarse el plug-in para poder visualizar la tuya
correctamente, o redirigirlo a una pgina que hayas creado para aquellos que no cumplan los requisitos mnimos del sitio.
Este comportamiento tambin deber ir asociado al evento onLoad del body para que pueda ejecutarse en la carga de la pgina.
se comportamiento est cayendo en desuso, ya que los navegadores actuales detectan automticamente los plugins faltantes y nos
ofrecen la posibilidad de instalarlos.
16.6. Mens 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 ms fcil.
Seccin 1
Un men de salto no es ms que un men desplegable desde el que puedes saltar de una pgina a otra con slo seleccionar la opcin
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 tendra este tipo de mens.
Insertarlo es muy sencillo, slo tienes que hacer clic en Insertar, seleccionar la opcin Formulario y en el desplegable elegir Men de
salto.
Se abrir este cuadro de dilogo:
Para crear el men debers introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el ttulo de la pgina y en Al
seleccionarse, ir a URL la ruta de la pgina que se tiene que abrir si el usuario selecciona esta opcin del men.
Una vez rellenados estos campos, haz clic en el botn
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 ms tarde) en Nombre del men.
Luego puedes marcar la opcin 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.
Djalo desmarcado si quieres que se muestre el de la pgina que se est visualizando.
Luego marca la opcin Insertar botn Ir tras el men para que se aada un botn al formulario.
Seccin 1
Si escoges esta opcin vers que se crea un men como el que tienes justo sobre este prrafo.
El funcionamiento de este men de salto es muy parecido al anterior, slo que una vez seleccionada la pgina que mostrar hay que pulsar
el botn para que se efecte el salto.
6.7. Transiciones
Aunque las transiciones no son comportamientos las hemos incluimos en este tema porque tienen cierto parecido.
Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Por ejemplo, si partimos
de una imagen de un ancho de 540 px. y pasamos a un ancho de 320 px. al aplicarle una transicin el cambio no ser instantneo, sino de
forma gradual durante un tiempo que podemos especificar, por ejemplo un segundo. De forma que al realizar esta transicin parecer que el
elemento se mueve.
Con transiciones se pueden lograr vistosos efectos de animaciones.
Por ejemplo, si haces clic sobre la siguiente imagen y mantienes el botn apretado un tiempo, vers como la imagen se hace ms
pequea. Al soltar el botn vuelve a su tamao inicial. En la transicin hemos definido que el ancho y el alto de la imagen disminuyan
gradualmente.
En navegadores antiguos (Intenet Explorer ) no funcionan las transiciones.
Para manejar las transiciones vamos al men Ventana Transiciones CSS y se abrir una ventana similar a esta.
Para crear una transicin nueva pulsaremos el botn +, en caso de querer modificar una pulsamos el botn editar
cuadro de dilogo similar al siguiente.
y aparecer un
Para crear una transicin tenemos que definir dos cosas fundamentales, sobre qu elemento la aplicamos y qu propiedad vamos a usar.
En el ejemplo del diplodocus el elemento es la imagen del diplodocus y las propiedades son la anchura y altura de la imagen. En el caso
representado en la figura, el elemento es un encabezado con un identificador llamado #h2_transicin y las propiedades el font-size y el
color.
El elemento sobre el que se aplican las transiciones se define en Regla de destino y puede ser genrico, por ejemplo <h2>, o especfico,
una regla o clase. En el primer caso la transicin se aplicara a todos los encabezados <h2> mientras que en el segundo caso slo a los
encabezados con un ID asignado previamente, en el caso que se muestra en la imagen #h2_transicin. Si pasas el puntero del ratn sobre
el ttulo de este punto "Transiciones" vers la transicin que hemos creado para este encabezado <h2> concreto.
La propiedad sobre la que se realiza la transicin se especifica en el cuadro Propiedad, al pulsar en el botn + se abre un desplegable
con las propiedades susceptibles de ser animadas. En este caso hemos animado dos propiedades, font-size y color.
Hay combinaciones que no tienen sentido, por ejemplo si en Regla de destino hemos indicado una imagen, no es lgico asignarle la
propiedad font-size, aunque Dreamweaver no realiza validaciones, la transicin no hara nada.
A la derecha de la Propiedad aparece el campo para especificar el Valor final, segn el tipo de propiedad ser el tipo de dato, por
ejemplo, si la propiedad es Color, aparecer un desplegable para elegirlo, si la propiedad es Background-image aparecer un icono para
seleccionar el archivo de imagen. La transicin ir desde el valor inicial definido en la hoja de estilo hasta el valor final que pongamos aqu.
Por ejemplo, en nuestro caso el color inicial ser el marrn, definido para las etiquetas <h2> y el color final el verde #090.
Transicin con, en este desplegable aparece una lista con las situaciones en las que se arrancar la transicin. Los ms usados
son Hover (cuando el cursor est encima) y Active ( al hacer clic), tambin Cheked, Focus, Enable, ...
Los tres campos siguientes indican cmo se realiza la transicin en cuanto a la Duracin, el tiempo en arrancar o Demora y la Funcin
de temporizacin que indica si el efecto es lineal o ms rapido al inicio, o al final. Si en Duracin ponemos un cero no habr transicin
gradual, ser brusca.
Estos tres campos pueden ser iguales para todas las propiedades o diferentes para cada propiedad segn elijamos el desplegable Usar la
misma transicin para todas las propiedades o no.
Puedes consultar los valores concretos para cada propiedad en la web del WC3.
Si colocas el cursor sobre "Ms datos" vers una transicin. En este video tienes explicado cmo realizarla.
Ejercicios unidad 16: Comportamientos avanzados
Ejercicio 1: Blog.
1. Crear una nueva carpeta llamada blog en tu carpeta de mis_sitios, donde has guardando los sitios que hemos ido creando. Define en
Dreamweaver el sitio Blog con raz en esa carpeta.
2. Crear una nueva plantilla PHP llamada blog dentro del sitio (al final, el archivo
Utilizamos un archivo PHP porque ms adelante, mostraremos datos del servidor en nuestras pginas.
se
llamar blog.dwt.php).
3. Crear un men de salto en la pgina con un botn de Ir asociado a este men. Introdcele 3 elementos Seccin 1, Seccin
2 y Seccin 3. Las tres debern tener como vnculo la direccin #.
Unidad 17. Estilos CSS Avanzados (I)
En temas anteriores vimos cmo funcionaba el panel Estilos CSS y cmo crear hojas de estilos para poder utilizarlas en tus pginas web.
Hasta ahora hemos ido empleando las propiedades CSS ms comunes, aunque no las hemos explicado detalladamente. En esta unidad
intentaremos explicar mejor qu es CSS.
A lo largo del curso, hemos orientado nuestras pginas para que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web
Consortium). Esta metodologa exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de
marcacin HTML, mientras que la parte de formato recaera 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 pgina de un modo
eficiente.
En este tema aprenderemos controles que nos ayudarn a presentar el texto e imgenes de nuestras pginas de una forma mucho ms
limpia y cmoda.
17.1. Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto etiquetas que introducan estilos CSS en ellas.
Por defecto, cuando crebamos una < Nueva regla de estilo > desde el inspector de propiedades, se defina la regla nicamente para la
pgina actual. Esto generaba un cdigo similar al siguiente en el <head> de la pgina (por supuesto, cambiando las propiedades segn 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>
Este mtodo se emplea para
incrustar el cdigo directamente en la pgina. 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 homogneo y fcil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo
estilo en cada pgina. En nuestros sitios de ejemplo, hemos optado por exportar
los estilo a una hojas de estilos (un archivo de
extensin .css). Esta opcin nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un slo archivo que aplicaremos a todas
las pginas.
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 ms arriba pero
eliminado el componente HTML. Este sera el contenido de nuestra hoja definiendo el mismo estilo que arriba:
@charset "iso-8859-1";
/* CSS Document */
body {
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Las dos primeras lneas generadas por Dreamweaver no son imprescindibles.

Este cdigo est guardado en un archivo con extensin .css (por ejemplo, miestilo.css). Luego deberamos vincularlo en la pgina HTML
utilizando la etiqueta <link /> dentro del <head> de la pgina:
<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
Otra opcin que nos permita el Inspector de propiedades CSS era crear un Estilo
en lnea. Este estilo slo afectaba al elemento en
cuestin, 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 tamao de 30 pxeles</p>
El estilo en lnea es el ms desaconsejado porque es ms difcil de modificar al tener que buscarlo por el texto y modificndolo uno a uno.
Una pgina puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces cundo
empleamos cada uno?
Emplearemos hojas de estilos para todos los estilos comunes a las pginas del sitio.
Emplearemos estilos incrustados en la pgina para los estilos que se emplean en nicamente en esa pgina, y que ya no seran tiles
si borrsemos la pgina. Por ejemplo, para definir el la apariencia de una tabla en concreto.
Emplearemos estilos en lnea cuando el estilo solo tenga sentido por estar en esa posicin en concreto, y no se suela repetir en el sitio.
Por ejemplo, si queremos dar ms margen a un prrafo por tener una imagen en concreto, pero que no tendra sentido si cambisemos
la imagen.
La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto menos cdigo repitas en tus pginas, ms fcil ser luego de
modificar o exportar.
Unidad 17. Ejercicio: Crear una hoja de estilo CSS
Objetivo
Practicar las operaciones que hay que realizar para crear una hoja de estilo.
Ejercicio
A partir de ahora, en los ejercicios paso a paso iremos creando el sitio Librera. En la carpeta ejercicios del curso, encontrars la
carpeta librera con los archivos que necesitars para crear el sitio. Cpiala a la carpeta mis_sitios en la que has ido creando los sitios de
ejemplo, y define el nuevo sitio Librera en Dreamweaver.
Si necesitas ayuda con las operaciones anteriores, consulta los ejercicios propuestos o paso a paso de la unidad 3.
2. Abre el sitio libreria.

3. Crea un nuevo archivo CSS desde Archivo Nuevo Pgina en blanco CSS.
4. Gurdalo
(CTRL + S)
Ahora vamos a vincularla a la plantilla del sitio.
llmalo estilolibreria.css.
5. Abre la plantilla libreria.dwt.php que encontrars en la carpeta Templates del sitio.

6. Ve al men Formato Estilos CSS Adjuntar hoja de estilos...
7. Busca el archivo estilolibreria.css que acabamos de crear y selecciona la opcin Vincular.
8. Pulsa Aceptar.
A lo largo de la unidad, iremos modificando la hoja de estilo hasta que la pgina se muestre as.
Este documento es la plantilla que emplearemos en las pginas del sitio Librera. Vamos a echarle un vistazo para familiarizarnos con su
estructura:
Al principio tenemos un div "cabecera". En el tenemos los elementos que mostraremos en la parte superior de la pgina. Adems, ser
donde incluyamos el logo.
A continuacin encontramos el div "menu". En l encontramos una lista con los elementos que formarn el men de navegacin. Adems
vers que hay una sublista, que convertiremos en un men desplegable.
Lo siguiente que encontramos es el div "contenedor" donde agrupamos la estructura central de la pgina. Esta estructura se divide en
otras dos divisiones: div "anuncios" donde tenemos la publicidad que mostrar nuestra web, y div "contenido", donde se mostrar el
contenido de las distintas pginas. Es aqu donde encontramos la regin editable de la plantilla.
Para acabar, cerramos la pgina con el div "pie" en el que mostramos el pie de pgina.
17.2. Sintaxis CSS
Un archivo CSS tiene una estructura muy bien definida, por lo que bastar con que nos aprendamos unas cuantas reglas para poder
empezar a familiarizarnos con su creacin.
Su estructura siempre es la siguiente:
El
formato
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 podramos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una despus de otra.
Entre llaves se encierra la definicin 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 definicin del estilo CSS.
Recordars que al crear una nueva regla, Dreamweaver nos permita 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 pgina puede ser modificado
genricamente para que tome un mismo aspecto, por ejemplo:
p {font: 13px bold Arial;}
Hace que todos los prrafos (la etiqueta p) tendrn la fuente de un tamao de 13 pxeles, 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 prrafos con
margen, los enlaces subrayados o los encabezados de mayor tamao. Haciendo esto reescribimos las propiedades de esa etiqueta.
Una clase es un selector que afectar slo 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 podramos aplicar este estilo sobre cualquier etiqueta que queramos. No hay ms 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 tambin es rojo.</p>
<p>Y tambin ste.</p>
</div>
En este ejemplo estaramos creando un prrafo y todo su texto sera rojo. En el caso del bloque, todo el texto que contenga ser rojo, a no
ser que los prrafos tengan definido otro color en la hoja de estilo.
Los selectores de clase deben estar siempre escritos con caracteres alfanumricos y sin utilizar espacios (utiliza el subrayado _ para
separar palabras). Para evitar errores, recomendamos tambin escribirlos siempre en minsculas.
Por ltimo encontraramos los selectores de identidad. Estos selectores identifican al elemento por su ID. Por lo tanto, slo afectarn a un
elemento en concreto de la pgina, 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 (#).
Ms tarde en el cdigo podremos encontrar:
<div id="contenedor">Este es un bloque que contiene texto</div>
En el cdigo deber establecerse la regla CSS asocindosela 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 podra referenciar a ese cuadro de texto como contenedor utilizando JavaScript.
Los selectores compuestos los veremos en el siguiente punto.
17.3. Selectores compuestos

Aunque slo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo ms complejas. A
esta combinacin de selectores se les llama selectores compuestos.
Ahora veremos estos tipos de combinacin:
Agrupacin: 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 slo 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 slo cuando se encuentre dentro del elemento#contenido. Lo hacemos escribiendo
lo selectores en orden jerrquico y separados por espacios:
#contenido .resaltado { background-color: #06F; }
Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se vern 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:
#contenedor p .derecha { float: right; }
En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un prrafo dentro del elemento definido
como contenedor flotarn a la derecha.
17.4. Selectores de atributo

Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no slo se queda ah
si no que avanza un poco ms para ayudarnos a establecer estilos segn el tipo de atributos que tenga una etiqueta.
Un atributo es una parte de la descripcin 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 cmo hacerlo:
Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo:
a[href] { font-family: Arial, Helvetica; }
En esta lnea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvtica.
Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo:
a[target="_blank"] { font-weight: bold; }
Esta lnea har que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic, distinguindolos de los enlaces
que navegan por el sitio.
Interesante, verdad?
17.5. Pseudo-clases y Pseudo-elementos CSS

Por ltimo, y para terminar con los selectores veremos las pseudo-clases, elementos que aadiremos a los selectores para evidenciar
algn estado.
Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy sencillos.
Primero
veremos
tipos
Son: :link, :visited, :hover y :active.
diferentes
de pseudo-clases,
que
habamos
ido
comentando
alguna
vez.
Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarn lo elementos, aunque
donde ms 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 pgina. Es el estado link. Por lo tanto, esta propiedad slo tiene
sentido en enlaces.
Cuando ya hayan sido visitados por el usuario se quedarn de color azul (blue). Es el estado visited. Este estado se renovar
dependiendo del navegador utilizado y se mostrar durante un tiempo determinado (una sesin, etc...). Esta propiedad slo tiene sentido en
enlaces.
En el momento en que coloques el ratn sobre l se mostrar de color verde (green). Es el estado hover. Podemos aplicarlo a la mayora
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 estn 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 actuarn sobre el texto del documento, son: :first-letter y :first-line (primera
letra y primera lnea respectivamente).
p:first-letter { font-size: 26px; }
p:first-line { font-variant: small-caps; }
Puedes ver un ejemplo de cmo actuaran estos pseudo-elementos en la siguiente lnea. Agranda y estrecha la ventana para ver qu
ocurre:
Esto es una Prueba, la primera lnea est en versales y la primera letra tiene un tamao de 26px.
Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudo-elementos y clases.
Unidad 17. Ejercicio: Utilizando pseudo-elementos y clases
Objetivo
Practicar el uso de pseudo-elementos y pseudo-clases.
Ejercicio:
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2 Abre el sitio libreria.
3 Abre el archivo estilolibreria.css.
4 Aade el siguiente estilo para que los enlaces dentro del bloque con id menu no muestren subrayado y sean de color negro.
Para el evento hover (cuando el ratn se encuentra sobre l) haremos que vuelva a aparecer el subrayado:
#menu a {
text-decoration: none;
color: black;
#menu a:hover {
text-decoration: underline;
color: black;
}
5 Aade el siguiente estilo para que la primera letra del los enlaces dentro del bloque con id menu se muestre en negrita:
#menu a:firstletter {
font-weight: bold;
}
6 Tenemos un caso especial. Los no queremos que los enlaces del submen (una lista dentro de un elemento de lista) aparezca
subrayado al poner el cursor encima. Aade el siguiente estilo:
#menu li ul a:hover {
text-decoration: none;
}
17.6. Orden de aplicacin de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento cul 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 ms concreto sobre el ms genrico. Por
ejemplo, si en la hoja de estilo establecemos el texto de los prrafos en rojo, y en la cabecera de la pgina definimos el color de los prrafos
en azul, prevalecer ste ltimo, ya que es ms concreto, se refiere slo a los prrafos de esa pgina. Y si en un prrafo de la pgina, en el
atributo style indicamos el color de texto verde, prevalecer ste por ser el ms concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es ms concreto que p, ya que se refiere slo a los prrafos con esa clase.
Y p#titulo sera an ms concreto, ya que se refiere directamente a un determinado prrafo. Lo mismo ocurre al anidar los
selectores, p.inicio span es ms concreto que poner slo span.
En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomar en cuenta la ltima, que
machacar a las anteriores. Por ejemplo, poner p{margin: 20px; margin-bottom: 5px;} sera como poner p {margin: 20px
20px 5px;}.
En cualquier momento podemos saltarnos el orden de prioridad de los estilos, aadiendo !important al final de una propiedad. Esto
hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:
p
{
color:
color:
blue
!important;
red;
El prrafo debera de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea
rojo.
Adems, los elementos hijos heredan las propiedades. As, si definimos el color rojo para el texto de una capa, todos los elementos de la
capa mostrarn el texto en color rojo, a no ser que tengan otro estilo definido.
Por todo esto, a veces podemos no saber dnde 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 dnde estn definidas desde el panel
Estilos CSS.
17.7. Controles de fuente

Ya hemos visto cmo manejarnos con los selectores, ahora veremos cmo deberemos crear las definiciones de los estilos.
Empezaremos viendo los controles de modificacin de fuentes:
font-family: indica la familia de fuente en la que se mostrar el texto, puede tomar los valores serif, sansserif, cursive, fantasy y monospace:
serif, sans-serif, fantasy, cursive, monospace...

Aunque esta propiedad tambin 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 genricas (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 (bsicamente, nos permite ponerla en cursiva), puede tomar los
valores italic, oblique y normal.
italic, oblique, normal

Algunas fuentes estn 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 automticamente la fuente para mostrarla en cursiva.
La mayora de navegadores no distinguen entre estos valores, y aplican siempre oblique, por lo que ste es el valor ms
recomendado. Para mostrar el texto normal, le damos el valor normal.
font-variant: establece la variante de la fuente. Puede tomar el valor small-caps (versales). Esto muestra las minsculas
como maysculas de menor tamao. 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 ms utilizados
son: bolder, bold y lighter. Tambin puedes utilizar valores del 100 al 900, siendo el primero la fuente ms ligera y el ltimo el
ms pesado.
bolder, bold, lighter

Aunque en teora podemos indicar distintos grosores, en la prctica la mayora de navegadores solo aplican normal y bold.
font-size: establece el tamao de la fuente. Puedes utilizar los valores predefinidos smaller, larger, xx-small, xsmall, small, medium, large, x-large y xx-large. Los dos primeros valores establecen el tamao de la fuente en comparacin a la
definida en el elemento padre donde se encuentra, as se mostrar ms pequea (smaller) o ms grande (larger).
xx-small, x-small,
small, medium, large,
x-large, xx-large
Tambin es posible establecer el tamao del texto utilizando porcentajes (%) o em. Que tambin mostrar el texto en relacin a
su elemento padre (100% = 1em).
ste es el tipo ms recomendado. Ya que con slo cambiar el tamao de la fuente base, todos los elementos se ajustarn a sta
manteniendo la proporcin.
Existen otras unidades relativas puntos (pt), pxeles (px) ... El sistema de puntos (pt) vara un poco segn los sistemas
operativos, mientras que el valor en pxeles (px) depende de la resolucin de pantalla. El valor em se define segn el amcho de la
letra M mayscula de la fuente
Incluso podemos emplear valores concretos, como centmetros (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 definicin. Para ello utilizaremos slo la propiedad font:.
As, una retahla 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.
Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:
p { font: bold sans-serif; }
Pg. 17.7
17.8. Espaciado y alineacin
Continuando con los controles de texto tenemos la propiedad word-spacing que establece la separacin entre las palabras de un
texto.
Este texto tiene una separacin de 18 pxeles entre sus palabras.
Este, sin embargo, tiene una separacin de -5 pxeles.
Tambin podemos utilizar la propiedad letter-spacing para establecer la separacin entre los caracteres del texto:
Este
texto
tiene
una
separacin
de
pxeles
entre
sus
letras.
Este,sinembargo,tieneunaseparacinde-2pxeles.
vertical-align establece
la alineacin
vertical del
texto.
Puede
tomar
los
valores baseline, sub, super, top, text-
top, middle, bottom, text-bottom.

baseline, sub,
Observa
super,
como
top,
text-top, middle, bottom, text-bottom
los
valores sub, super, text-bottom y text-top toman
como
referencia
que top, middle y bottom toman como referencia el alto del prrafo completo.
Estas propiedades se suelen aplicar a las imgenes para alinearlas con respecto al texto:
el
tamao
del
texto,
mientras
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 lnea del texto, igual que el resto de propiedades puedes establecer esta altura en pxeles, ems, puntos u
otras unidades.
Este texto tiene un alto de lnea de 30 pxeles. Puedes ver que la separacin entres estas lneas es mayor que la definida por defecto.
Este texto tiene un alto de lnea de 10 pxeles. Puedes ver que la separacin entres estas lneas es menor que la definida por defecto.
Si estableces simplemente valores numricos podrs indicar el alto respecto a su tamao normal. Por ejemplo:
p { line-height: 2; }
Esta lnea muestra el texto con un interlineado doble. Si hubisemos escrito 1.5 el interlineado sera un 50% ms 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 especfico, puedes centrar el texto verticalmente dndole al elemento un line-height igual que el alto.
Esto slo tiene sentido si tenemos una nica lnea de texto.
text-align establece la alineacin 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 mrgenes del texto tocarn los bordes. Si es necesario estirar las lneas se har.
Esta propiedad la aplicaremos al elemento de bloque que contendr el texto.
text-indent indica el tamao de sangrado (o sangra) del texto, es decir la separacin de la primera lnea con el borde lado izquierdo.
Tomar valores en puntos, pxeles o ems, como prefieras.
Prrafo
identado
24px.
Primera
lnea
Segunda lnea.
Prrafo
identado
48px.
Primera
lnea
Segunda lnea.
Prrafo
identado
72px.
Primera
Segunda lnea.
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 lneas del texto.
lnea
Puede tomar el valor nowrap para que el texto se muestre en una sola lnea sin insertar saltos no deseados:
Este texto no tiene saltos de lnea, as que se mostrar en toda su anchura aunque la ventana sea ms estrecha.
Tambin puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto se mostrarn y no se
convertirn en uno slo como ocurre normalmente. Adems, si en el cdigo hay saltos de lnea, tambin se mostrarn:
En este
texto podemos
introducir
tantos espacios
como queramos. Da
igual si
son ms de uno, se
mostrarn
igualmente.
Este ltimo valor no funciona correctamente en Internet Explorer as que es recomendable utilizar la entidad HTML (&nsbp;) para
mostrar ms de un espacio.
17.9. Apariencia del texto

text-decoration establece si el texto llevar decoracin 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, linethrough, blink.
none, underline, overline, line-through, blink

El valor blink hace que el texto parpadee. Este valor slo funciona en determinados navegadores (no en Internet Explorer).
Con la propiedad text-transform puedes indicar la transformacin del texto (cambiar maysculas / minsculas) de la siguiente
forma. Capitalize cambia la primera letra de cada palabra a maysculas. Uppercase y lowercase cambian el texto a maysculas o
minsculas respectivamente.
Este Texto Tiene El Valor Capitalize, Las Primeras Letras Sern En Maysculas, El Resto Se Mostrar En
Minsculas Automticamente
ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE EST ESCRITO EN MINSCULAS SE CAMBIAR A
MAYSCULAS
este texto tiene el valor lowercase, aunque est escrito en maysculas se cambiar a minsculas
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 hara falta especificar el color de este modo:
p { color: #060; }
Unos ejemplos seran los siguientes (aunque disponemos de ms de 16 millones):

#060
#0F0
#039
#3C9
#6CF
#0CC
#900
#990
#F93
#969
#CF3
#CF9
Tambin existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores bsicos.
El modo en el que se definira el estilo sera el mismo:
p { color: red; }
Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaramos 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.
Unidad 17. Ejercicio: Controles de Fuente
Objetivo
Practicar el uso de controles de fuente y formato del texto.
Ejercicio

4 Aade el siguiente estilo para que toda la pgina muestre una fuente de tipo Verdana (en caso de que no estuviese instalada se
buscaran por este orden las siguientes fuentes: Arial, Helveticay finalmente cualquiera que entre dentro de la categora sans-serif).
Tambin haremos que su tamao sea de 12 pxeles:
body {
font-size: 12px;
}
5 Para el texto dentro del bloque con id menu aumentaremos el tamao de la fuente a 13 pxeles y haremos que las letras estn un poco
ms separadas:
#menu {
font-size: 13px;
letter-spacing: 1px;
}
6 Ms tarde introduciremos un formulario en el men. Queremos que el elemento input de cualquier formulario tenga un tamao de fuente
de 9 pxeles:
input {
font-size: 9px;
}
7 En el bloque con id contenido queremos que haya una clase llamada primera_palabra que sea de 16 pxeles de tamao y en negrita:
#contenido .primera_palabra {
font-size: 16px;
font-weight: bold;
}
8 Crea un estilo para una clase llamada precio que tenga un tamao de fuente de 16 pxeles, en negrita y de color rojo:
.precio {
font-size: 16px;
color: red;
font-weight: bold;
}
9 Finalmente haremos que el bloque con id pie tenga un tamao de fuente que sea el 70% del original.
#pie {
font-size: 70%;
}
10 Vamos a centrar verticalmente (vertical-align) las imgenes que aparecen en la lista del bloque #cabecera.
#cabecera li img {
vertical-align: middle;
}
11 Por ltimo, crearemos una lista para mostrar los detalles del libro. Dentro de ella, distinguiremos dos elementos distintos: uno en negrita
y maysculas para el ttulo, y otro en cursiva para el autor.
ul.detallelibro .titulo {
font-weight: bold;
text-transform: uppercase;
}
ul.detallelibro .autor {
font-style: oblique;
17.10. Controles de ratn

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratn cuando se sita sobre una etiqueta
afectada por esta propiedad CSS.
Puedes aplicarla sobre prrafos, enlaces o incluso sobre el body mismo (as el cursor tendr una forma personalizada en toda la pgina).
El modo en el que se utiliza es igual que el resto, pero empleando la propiedad cursor:
p { cursor: pointer; }
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. Sita el ratn sobre ellos para ver el efecto:
auto
crosshair
pointer
move
text
wait
help
n-resize
ne-resize
e-resize
se-resize
sw-resize
w-resize
nw-resize
Tambin podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis:
p { cursor: url(graficos/micursor.cur), auto; }
Para que funcione en IE, debemos emplear imgenes de cursor (extensin .cur).
17.11. Controles de lista

Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos de nuestras pginas.
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
vieta utilizada
en
las
valores disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha ynone.
disc 1
circle 1
square 1
disc 2
circle 2
square 2
disc 3
circle 3
square 3
listas,
puede
tomar
los
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.
C. upper-alpha 3
none 3
lower-alpha 3
Este estilo debe ir asociado a la etiqueta li, ul o ol.
list-style-image permite mostrar una imagen en lugar de una vieta.

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, opcin 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 vieta con el principio del texto del elemento anterior. Outside alinea la vieta del elemento en
la posicin 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 omtela.
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, prrafos, capas,el body de la pgina, etc.
background-color permite establecer el color de fondo. Utiliza los mismos cdigos hexadecimales o los nombres de color que vimos
en la propiedad color del texto.
La sintaxis es igual a la que hemos visto hasta ahora:
td.rojo {
background-color: red;
}
background-image establece una imagen de fondo para el elemento.

body {
background-image: url(imagenes/fondo.jpg);
}
Por defecto, las imgenes se posicionarn en la esquina superior izquierda y en mosaico. Si la imagen tiene zonas transparentes, se ver
el color de fondo detrs de ella.
background-repeat indica el modo de repeticin de la imagen establecida para el fondo.

Puede tomar los siguientes valores:
repeat: la imagen se repite a modo de mosaico hasta ocupar la pgina 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 omisin, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo.
Debers declarar la URL de la imagen para poder utilizar esta propiedad:
#menu {
background-image: url(imagenes/menu.gif);
background-repeat: repeat-x;
}
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
background-attachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de las barras de
desplazamiento.
Esta opcin se usa sobre todo para las imgenes 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 pgina).
17.13. Controles de margen interior y exterior

Ahora veremos unas cuantas reglas que afectarn a los bordes y mrgenes de los elementos.
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 pxeles 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 mrgenes superiores e inferiores se pueden ver en las franjas verdes (arroba la mayor, de 20px y abajo de 5px).
Observa cmo 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 podra quedar como:
.bloque_interior
margin: 20px
{
0px 5px
-10px;
Recuerda que debers seguir el orden top, right, bottom y left.
En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre s se puede escribir en
dos valores, como:
.bloque_interior
margin: 20px
{
5px;
En este formato, el primer valor (20px) indica los mrgenes superior e inferior y el segundo (5px) corresponde a los mrgenes izquierdo
y derecho.
En le aso de haber tres valores, corresponderan a arriba, izquierda-derecha y abajo respectivamente.
En caso de que quieras que todos los mrgenes tengan la misma distancia basta escribirlo slo una vez:
.bloque_interior {
margin: 20px;
}
Ahora todos los mrgenes sern de 20 pxeles.
Tambin 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 tena asignada esta propiedad. De lo contrario, aparecera a la
izquierda de la pgina.
.bloque_exterior {
width: 150px;
margin: auto;
}
Cuando los elementos son contiguos, si ambos tienen margen, estos mrgenes se solapan, quedando como margen la distancia mayor.
Veamos el siguiente ejemplo:
.bloque_interior {
margin: 20px;
}
20px. Si los mrgenes se sumasen, la distancia entre ellos

sera de 40px. En cambio al solaparse queda la misma distancia que arriba o abajo, 20px.
En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de
Unidad 17. Avanzado: Inspeccin de CSS
Inspeccionar elementos
En la barra de documento de Dreamweaver encontramos un botn que todava no hemos visto: el botn Inspeccionar.
Al pulsarlo, se activa la Vista en vivo y el modo de inspeccin CSS.
Con este modo activo, al pasamos el cursor sobre un elemento, ste se resaltar.
Si observas la imagen anterior, distinguirs tres colores:
El azul, sirve para resultar el elemento.
El rosa, indica el padding aplicado al elemento.
El amarillo, corresponde al margin aplicado al elemento.
Adems, la vista Actual del panel Estilos CSS nos ir mostrando las reglas que afectan al elemento. Las resaltadas con un fondo ms
oscuro, corresponden directamente al elemento.
As, en la imagen anterior, vemos que el elemento resaltado es un prrafo, con un padding de 5px, aunque le afectan reglas del body y
de #content.
17.14. Bordes
Tambin 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 tambin se aceptan valores en pxeles (los ms empleados) y porcentajes que son
ms fciles de manejar a la hora de crear bordes con una anchura exacta.
texto
En este caso hemos utilizado:

.borde1 {
texto
border-width: 1px;
}
.borde2 {
border-width: 5px;
}
border-style muestra el borde del elemento de una forma determinada, existen varios tipos:
none
double
dotted
groove
dashed
ridge
solid
inset
border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.
outset
.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;
}
Podra escribirse ms fcilmente:

.borde {
border: 10px groove
black;
En este caso podemos cambiar el orden de las propiedades, aunque te recomendamos que sigas siempre el mismo.
Tambin 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 mrgenes y padding para referirnos a los cuatro lados:
.borde {
border-width: 5px;
border-color: blue green;
border-style: solid dotted double groove;
texto
Unidad 17. Ejercicio: Controles de Mrgenes y Borde
Objetivo
Practicar el uso de controles de mrgenes y borde.
Ejercicio
4 Queremos lograr un diseo centrado con una columna central. Esto lo haremos aadiendo loo siguiente al body. Ms adelante le
daremos un ancho fijo.
body {
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x
bottom;
margin-left: auto;
margin-right: auto;
}
5 Cambiamos la alineacin de la cabecera a la derecha.

#cabecera {
background-image: url(imagenes/cabecera.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: right;
}
6 Al bloque con id menu le aplicaremos unas cuantas propiedades para que tenga una separacin exterior en la parte inferior
de 20 pxeles.
Tambin estableceremos el padding de todos los lados (la separacin de los bordes con el contenido).
Y crearemos dos bordes, uno en la parte superior de color gris y de 1 pxel de ancho, el otro de color rojo y con 5 pxeles de ancho.
#menu {
font-size: 13px;
letter-spacing: 1px;
background: url(imagenes/fondo_menu.gif) repeat-x;
text-align: left;
margin-bottom: 20px;
padding: 3px 0px 3px 0px;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
}
7 Quitaremos los mrgenes y padding por defecto de la lista del men:

#menu ul {
margin: 0;
padding: 0;
}
8 Tambin estableceremos los paddings para los elementos del lista dentro del bloque con id menu:
#menu li {
padding: 3px 12px 3px 12px;
}
9 El bloque con id anuncios deber tener un margen inferior de 15 pxeles.

Tambin le aadiremos unos paddings a izquierda y derecha.
Tambin centraremos el texto utilizando text-align.
#anuncios {
padding-right: 5px;
padding-left: 5px;
text-align: center;
}
10 Separaremos los distintos anuncios con un margen inferior de 10 pxeles. Son los div dentros del bloque #anuncios:
#anuncios div {
}
11 Al bloque con id contenido le daremos un padding izquierdo y superior:

#contenido {
padding-left: 5px;
padding-top: 15px;
}
12 Ms tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga un margen superior de 30 pxeles y un padding
inferior tambin de 30.
#listado {
margin-top: 30px;
padding-bottom: 30px;
}
13 La clase item dentro del bloque con id listado deber tenter un margen izquierdo de 60 pxeles.
#listado .item {
margin-left: 60px;
}
14 La clase borde_inferior deber tener un borde inferior de 1 pxel de ancho de color negro:
.borde_inferior {
border-bottom: 1px solid black;
}
15 Aadiremos al bloque con id pie un margen inferior de 15 pxeles, centraremos el contenido, unos paddings superior e inferior y
un borde superior rojo de 5 pxeles de ancho:
#pie {
font-size: 70%;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
border-top: 5px solid #E35331;
16 Por ltimo quitaremos el borde que se muestra en la imgenes cuando estn en un enlace:
a img {
border-style: none;
}
17 Ahora vamos con los estilos que formarn el submen. A la sublista, le damos un pequeo borde superior del mismo color de fondo,
para que quede alineado con el color rojo. Lo hacemos con borde para evitar un comportamiento errneo de IE.
#menu li ul {
border-top: #BDFCF2 2px solid;
}
18. Ajustamos el padding de los elementos de lista delsubmen y de sus enlaces:

#menu li li {
background-color: #E35331;
padding: 3px;
}
#menu li ul a {
padding: 0 9px;
}
19. Damos mrgenes los id con la clase detalle que tendremos dentro de contenido:
#contenido .detalle {
margin-left: 60px;
}
20. Y aadimos algo de margen a los elementos de la lista que mostrar el detalle del libro:
ul.detallelibro li {
margin: 5px;
}
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.

Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
Este texto tiene un elemento flotante a la derecha.

Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
Hemos utilizado los valores left y right respectivamente. En estos casos a los prrafos que contienen el smbolo de copyright se les han
aplicado la propiedad CSS float:
<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:

Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a l.
Como este prrafo que ocupa toda la anchura del bloque div padre.
Cmo evitamos que el elemento flotante quede a la derecha del segundo prrafo?
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 prrafo este se mostrar sin verse afectado por el float:

Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a l.
Como este prrafo que ocupa toda la anchura del bloque div padre.
El cdigo que hemos utilizado es el siguiente: <p style="clear: right;">

Observa que al hacer esto, el segundo prrafo 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:
Este texto tiene dos elementos flotantes a la izquierda.

Observa tambin que el elemento flotante sobresale del bloque, ya que no se tienen en cuenta para calcular el alto.
Queremos que los dos bloques estn flotando a la izquierda pero uno debajo del otro.
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 continuacin style="float:left; clear: left;".
Y obtendramos lo siguiente:
Este texto tiene dos elementos flotantes a la izquierda.

Ahora uno se encuentra debajo del otro, y el texto fluye tenindolos en cuenta a ambos.
Aunque puede llegar un prrafo que deje de verse afectado.
Como ste!
17.16. Controles de elementos de bloque y en lnea

Ahora veremos cmo posicionar los elementos y darles el tamao que nos convenga para representarlos.
Antes de empezar deberamos hacer una distincin entre las etiquetas HTML.
Podemos clasificar las etiquetas en dos grupos: de bloque o en lnea.
Las etiquetas de bloque son aquellas que causan un salto de lnea antes y despus 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 ms genrica es div, que puede contener cualquier etiqueta. Por ejemplo, un prrafo no debe contener a
otro prrafo.
Sin embargo luego encontramos otro tipo de etiquetas (en lnea) que no producen saltos en el flujo de la pgina, 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 lnea. Las etiquetas en lnea, pueden
contener a otras etiquetas en lnea, pero nunca a un elemento de bloque.
Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las pginas utilizando CSS.
Primero veremos las propiedades de tamao height (altura) y width (anchura).

Puedes especificarlas en cualquier elemento de bloque (no en elementos en lnea) y establecern su alto y su ancho en pxeles o
porcentaje.
300x50
#contenedor {
width: 300px;
height: 50px;
}
Finalmente tenemos la propiedad display, que establece cmo 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 lnea y viceversa.
Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-headergroup, 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 lnea antes y despus de ella o poder darle un alto y ancho. Esto se emplea mucho en los mens, normalmente formados con
listas. Observa estos dos "botones" formados por un div y un enlace:
Pulsa aqu
Pulsa aqu
Notars que el primero slo 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%;
}
Pg. 17.19
17.17. Controles de posicin

En este apartado veremos cmo posicionar el contenido de la pgina web utilizando nicamente estilos CSS.
Existen unas propiedades CSS que combinadas con las siguientes nos ayudarn a mover el contenido de la pgina.
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 pxeles o porcentajes.
Veamos ahora cmo las utilizaremos. Para ello deberemos declarar tambin la propiedad position (posicionamiento).
Esta es sin duda la ms 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 pgina 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 slo darle las coordenadas (las CapasPA
emplean este posicionamiento).
As deberamos declarar la posicin utilizando un par de propiedades top/bottom y left/right. Lo habitual es indicar tambin el alto y
ancho, aunque si no lo hacemos estos valores se ajustarn al contenido.
Un ejemplo podra ser este:
#capa_flotante {
position: absolute;
top: 100px;
left: 300px;
width: 30px;
height: 125px;
Esta declaracin de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un ancho y un alto.
top:
left: 0;
0;
bottom:
left: 0;
0;
top:
left: 50%;
50%;
bottom:
right: 50%;
50%;
top:
right: 0;
50%;
top:
left: 100px;
70px;
top:
right: 25%;
25%;
Pg. 17.21
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 cmo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una nos queda por
encima de la otra.
Cmo podemos decidir cul quedar por detrs? Y al frente?
Utilizaremos esta propiedad para ello.
Z-index acepta nmeros 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:
z-index: 0
z-index: 2
z-index: 1
z-index: 2
z-index: 0
z-index: 1
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 emplebamos con las
capas.
Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla.
Muy til para ocultar estadsticas o para crear animaciones complejas combinando esta propiedad con JavaScript.
#estadisticas {
visible: hidden;
Finalmente nos encontramos con otra propiedad llamada overflow, que ya habamos 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 slo acta en aquellos casos en los que el
continente se queda demasiado pequeo para mostrarlo todo.
Puede tomar los valores visible, hidden, scroll y auto.
El valor visible hace que se ignore el tamao del continente para mostrar todo el contenido. Es el valor por omisin en la mayora de los
navegadores.
Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamao del continente no se ver
afectado.
Si le das el valor scroll se introducirn las barras de desplazamiento necesarias para que el contenido pueda visualizarse correctamente.
El tamao del continente no se ver afectado. Las barras siempre sern visibles.
Finalmente, con el valor auto aparecern las barras de desplazamiento cuando sean necesarias.
Veamos unos ejemplos:
visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. ste s cabe.
scroll. ste s cabe.
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 pgina). 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.
Unidad 17. Ejercicio: Controles de Posicin y visibilidad
Objetivo
Practicar el uso de posicin y visibilidad.
Ejercicios
Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

3 Conforme est ahora, el submen podra ser tapado por el contenido de la pgina. Para evitarlo, vamos a aumentar su z-index. Como
slo podemos aplicar este valor e elementos posicionados, le daremos un posicionamiento relativo, pero sin variar su posicin:
#menu li:hover ul {
display: block;
position: relative;
z-index: 10;
}
Si ves el aspecto de la pgina en el navegador, debe de haberte quedado como sta.
Ejercicios unidad 17: Estilos CSS Avanzados (I)
Crearemos los estilos necesarios para que la plantilla se vea as.
Antes de comenzar con los ejercicios, y si no lo hiciste al crear el sitio, copia todos los archivos de la carpeta blog que encontrars en la
carpeta de ejercicios, a la carpeta blog que debes de haber creado en la carpeta mis_sitios con la que estamos trabajando.
Ejercicio 1: Crear una hoja de estilos.

1 Abre el sitio Blog.
2 Crea un archivo CSS llamado estiloblog.css.
3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php creada en la unidad anterior.
4 Copia la carpeta imagenes que podrs encontrar en la carpeta de ejercicios dentro de blog a la carpeta del sitio.
Modifica la plantilla blog.dwt.php de la siguiente forma:
5 Crea un bloque div de identificador contenido y que contenga una seccin editable de plantilla.
6 Encierra tambin el men de salto en un bloque de identificador seccion.
7 Dentro de ese bloque aade un prrafo con el texto Categoras delante del men de salto.
8 Despus del men de salto y dentro del bloque seccion aade una lista como sta:
Principal
Administracin
Enlaces
Cada palabra tendr un vnculo a las pginas .../index.php, .../admin.php y .../enlaces.php respectivamente.
Nota: Los tres puntos los ponemos porque estamos trabajando sobre una plantilla.
9 A continuacin coloca estos dos bloques (contenido y seccion) dentro de un bloque con Id contenedor.
Ejercicio 2: Controles de Fuente.

1 Abre el archivo estiloblog.css, creado en el ejercicio anterior.
2 Aade un estilo para el body para que se muestre el tipo de fuente Tahoma, de 14
pxeles de tamao, 1 pxel de
separacin entre caracteres y de color negro.

3 Crea un estilo para una clase llamada titulo que establezca un tamao
de fuente de 18 pxeles.
4 Crea un estilo para una clase llamada datos que establezca que el texto est alineado
a la derecha, de 12 pxeles de
tamao, en cursiva y con un alto de lnea de 0.2.

5 Haz que todos los enlaces
dentro de un prrafo o un elemento de lista no tengan subrayado y sean de color
negro.
6 Por ltimo, haz que los elementos
de lista dentro del bloque seccin no muestre vietas.
Los ejercicios continan en la pgina siguiente.
18.1. Maquetar una pgina web
La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa en una pgina web cualquiera. Seguro que distingues
algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de pgina.
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso poda
resultar sencillo, aunque si no se dominaban las tablas, poda convertirse en algo tedioso. El problema de las tablas es que generaban un
pgina muy encorsetada, y el cdigo se volva complejo de entender. Adems, algunos buscadores encontraban problemas al analizar la
estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza utilizando capas (<div>), tambin llamadas divisiones o
contenedores. La colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite, por ejemplo, que podamos pasar de un
diseo con un men lateral a otro con el men en la parte superior, slo cambiando la hoja de estilos.
En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay que decir que existen diversas formas de conseguir una
misma maquetacin.
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 pgina y en el men Insertar, opcin Objeto de diseo, elegimos Etiqueta Div.
Tambin veremos que Dreamweaver nos ofrece una serie de plantillas de maquetacin, de las que podremos partir, adaptndolas a
nuestras necesidades.
18.2. Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque. Normalmente divisiones, pero tambin lo podemos hacer con
prrafos, 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 tamao: ancho (width) y alto (height).
Los valores para estas medidas, pueden ser expresados en las medidas habituales:
Tamaos absolutos, utilizando px, cm, etc...
Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%).
Tamaos relativos a la fuente, utilizando em.
El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.
En algunos elementos, como los Divs PA, nos permiten cambiar su tamao desde el Inspector de propiedades. Pero en la mayora,
tendremos que hacerlo desde el cdigo o desde las propiedades CSS de Cuadro y Posicionamiento.
Por ejemplo, hemos definido el tamao para el siguiente prrafo:

<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 dndole al margen (margin) derecho e izquierdo el valor auto. Recuerda que las propiedades de margen se encuentran
tambin con las propiedades de Cuadro.
<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">
Nota: En la vista de Diseo de Dreamweaver, esta propiedad no se muestra correctamente.

Con slo esto, podramos maquetar una pgina web que contenga una columna central, con un ancho fijo o relativo, centrada en la
Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mnimo, estas reglas CSS:
#container {
width: 960px;
margin: 0 auto;
}
Puedes ver un ejemplo de una pgina muy simple maquetada de esta forma aqu.

Tutorial DreamWeaver

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial DreamWeaver

Hochgeladen von

Copyright:

Verfügbare Formate

Unidad 1.

Conceptos bsicos de Dreamweaver CS6 (I)

1.1. Qu es Dreamweaver CS6

1.2. Novedades de Dreamweaver CS6

Unidad 1. Bsico: HTML bsico

Unidad 1. Conceptos bsicos de Dreamweaver CS6 (II)

1.3. Editar pginas web

1.4. Cmo tener una pgina en Internet

Unidad 1. Conceptos bsicos de Dreamweaver CS6 (III)

1.5. Arrancar y cerrar Dreamweaver CS6

Veamos las dos formas bsicas de arrancar Dreamweaver CS6.

Desde el botn Inicio

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes

Hacer clic en el botn cerrar

Pulsar la combinacin de teclas Alt + F4.

Hacer clic sobre el men Archivo y elegir la opcin Salir.

, en la esquina superior derecha, como en cualquier ventana de Windows.

1.6. Abrir y guardar documentos

Hacer clic en el botn abrir

de la barra de herramientas estndar (si est visible).

Pulsar la combinacin de teclas Ctrl + O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir....

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic en el botn nuevo

Pulsar la combinacin de teclas Ctrl + N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.

de la barra de herramientas estndar (si est visible).

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

Hacer clic en el botn Guardar

Pulsar la combinacin de teclas Ctrl + S.

de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar.

Hacer clic en el botn Guardar todo

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

de la Barra de herramientas estndar.

Unidad 1. Bsico: Compaginar dos sesiones

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

1.7. Mi primera pgina

Entonces se abrir una ventana como la que aparece a continuacin:

Unidad 2. El entorno de Dreamweaver CS6 (I)

2.1. La pantalla inicial

3.- La barra de estado.

2.2. Las barras

La barra de herramientas estndar.

2.3. Inspectores y paneles

5.- rea de paneles.

En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

Unidad 2. Avanzado: Personalizar el rea de trabajo (I)

Abrir y cerrar paneles

Acoplar y desacoplar paneles

Cambiar el aspecto del panel insertar

Pero tambin puede tener este otro aspecto, en men:

2.4. Vistas de un documento

8.- La vista Diseo

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista

- La vista Cdigo en vivo

podremos ver los estilos asociados a cada

A travs del men

Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.

Acceder al Centro de soporte de Dreamweaver en la web.

Dreamweaver Exchange es un sistema para compartir extensiones.

Acceder al Foros en lnea de Adobe.