Curso Dreamweaver CC

1.
Objetivo del curso: Dreamweaver es uno de los programas

ms potentes para la creacin de pginas Web.
Permite un trabajo de diseo Web muy intuitivo.
Este curso se basa en la ltima versin del programa, Dreamweaver CC, que refleja las ltimas
tendencias del diseo Web potenciando el uso de Estilos CC y la Accesibilidad de la Web. A lo largo
del curso se hace hincapi en esas tendencias al igual que en la importancia de la usabilidad de cada
elemento que insertamos en la pgina Web.
Aprender a manejar el programa Dreamweaver para disear pginas Web. A la finalizacin del
curso, el alumno ser capaz de crear sitios Web con pginas que incorporen imgenes, enlaces,
formularios y elementos multimedia.
El alumno identificar las diferentes tcnicas de maquetacin Web, desde el uso bsico de tablas
hasta las estrategias avanzadas de diseo con estilos CSS. Una vez creado el sitio Web, el alumno
ser capaz de comprobarlo, publicarlo y mantenerlo utilizando las herramientas que para tal fin
incorpora el programa.
1/2
2. Dirigido a: Diseadores grficos o Web que desean aprender
a crear pginas Web.
Es recomendable conocimiento previo sobre diseo Web, aunque no es estrictamente necesario.
2/2
1. Que es un dominio de un sitio Web?
Un dominio o nombre de dominio es el nombre que identifica un sitio Web. Cada dominio tiene que
ser nico en Internet. Por ejemplo, "www.masadelante.com" es el nombre de dominio de la pgina
Web de Masadelante. Un solo servidor Web puede servir mltiples pginas Web de mltiples
dominios, pero un dominio slo puede apuntar a un servidor.
Un dominio se compone normalmente de tres partes: en www.masadelante.com, las tres uves dobles
(WWW), el nombre de la organizacin (masadelante) y el tipo de organizacin (com).
Igual que para crear una empresa tradicional es necesario inscribirla con su nombre
correspondiente en el Registro Mercantil, para dar de alta a tu empresa en Internet tienes que llevar
a cabo el equivalente de lo anterior en la red, es decir, registrar el nombre de dominio.
Elegir el nombre de dominio para tu empresa es de suma importancia porque aportar a sta una
marca nica en Internet, un acceso a su Web y un correo electrnico personalizado.
Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendran que acceder a
cada servicio Web utilizando la direccin IP del nodo (Ej. Sera necesario utilizar
http://216.34.94.183 en vez de http://dominio.com).
http://www.arsys.es es una de las miles de empresas en todo el mundo que ofrece un servicio de
registro de dominios y alojamiento de pginas Web.
El primer paso es comprobar que tu dominio est disponible. Puedes elegir entre: es,com,org,eu,
etc................. en la pgina principal de arsys
1 / 19
2. Qu es un servidor Web? Clases de Alojamiento Web:
Alojamiento Web gratis, Alojamiento compartido, Housing o
colocation.
El trmino servidor se utiliza para referirse a una mquina cuyo propsito es proveer datos de modo
que otras mquinas puedan utilizar esos datos.
Los archivos para cada sitio de Internet se almacenan y se ejecutan en el servidor. Hay muchos
servidores en Internet y muchos tipos de servidores, pero comparten la funcin comn de
proporcionar el acceso a los archivos y servicios.
En la Web, un servidor Web es un ordenador que usa el protocolo http para enviar pginas Web al
ordenador de un usuario cuando el usuario las solicita.
Para elegir tu alojamiento Web primero necesitas analizar tus necesidades y despus conocer las
diferentes opciones disponibles. Te explicamos las distintas clases de alojamiento Web para que
puedas tomar una decisin informada.
Que es un alojamiento Web?

El alojamiento de Web te da la oportunidad de tener tu pedacito de ciberespacio donde puedes
almacenar tus datos, documentos, tu pgina o sitio Web e incluso disponer de tu propia oficina de
correos (servidor de correo).
El contenido, las fotos y todo aquello que conforma una pgina Web no son ms que un puado de
archivos, generalmente archivos .HTML, que componen lo que ves cuando visitas un sitio Web. Estos
archivos, como cualquier otro, se organizan y guardan en carpetas, y deben estar almacenados en un
servidor Web que est permanentemente conectado a la red mundial, es decir, a la WWW (World
Wide Web), mediante Internet.
Clases de Alojamiento Web
Existen diferentes tipos de alojamiento Web. Las distintas opciones de alojamiento Web dependen de
las caractersticas de nuestra Web y de nuestro presupuesto. De una manera general, podemos
hablar de los siguientes tipos de alojamiento Web:
Alojamiento Web gratis
Se pueden encontrar bastantes empresas que ofrecen alojamiento Web gratis. Generalmente te lo
ofrecen a cambio de mostrar publicidad en tu pgina mediante un banner. Este suele ser utilizado
para pginas personales o pequeos sitios Web sin muchas pretensiones. Si no te importa mostrar
un banner de publicidad en algn lugar de tu pgina, que tus usuarios intenten entrar en tu pgina y
a veces esta no este disponible y no tener a nadie a quien poder reclamar, entonces este tipo de
alojamiento Web puede ser el adecuado para ti.
Alojamiento compartido
Este es el tipo de alojamiento Web ms comn y razonablemente bien de precio. En este caso
compartes espacio con otros sitios Web en un servidor, con los inconvenientes que a veces esto
puede acarrear. Generalmente pagas por una cantidad determinada de espacio en disco y
transferencia mensual.
Alojamiento dedicado
Con un plan de alojamiento dedicado dispones de un servidor para ti slo. Esto te ofrece ms
fiabilidad y libertad para alojar ms de un sitio Web. Este tipo de alojamiento Web suele ser utilizado
por grandes sitios de comercio electrnico o sitios con un gran nmero de visitas. Aqu el precio ya
sube aunque ganas en fiabilidad.
Housing o colocation
Esto es parecido a un alojamiento dedicado, pero en este caso el servidor es tuyo, te pertenece, en
lugar de alquilarlo. Tu servidor es colocado en el datacenter o centro de datos de la empresa de
alojamiento Web y utilizas su infraestructura y su conexin a Internet de alta capacidad. Este
servicio suele ser utilizado por empresas grandes que necesitan seguridad y alta fiabilidad.
3. Resolucin de pantalla y sus diferentes tamaos: Absoluto y
relativo.
Las aplicaciones encargadas de presentar las pginas Web son los navegadores
La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores
(de mens, de direccin, etc.), una barra inferior (la barra de estado) y un espacio principal, la
ventana, en el que son presentadas las pginas Web.
La forma de esta ventana es siempre rectangular, pero su tamao vara, dependiendo del monitor y
de la tarjeta grfica. Podemos hablar de dos tamaos de pantalla diferentes:
Tamao absoluto:
Es el tamao "real" de la ventana del monitor, medido generalmente en pulgadas. Depende del
monitor.
Resolucin o tamao relativo:
Viene determinada por el nmero de pxeles que se muestran en la ventana del monitor, siendo el
pxel la unidad mnima de informacin que se puede presentar en pantalla, de forma generalmente
rectangular.
En cuanto a la resolucin, los valores ms comunes son de 1024x768 pxeles, aunque quedan todava
usuarios que trabajan a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixeles.
Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y
de la tarjeta grfica del ordenador.
La importancia de la resolucin de pantalla sobre la forma de ser visualizadas las pginas Web en la
ventana del navegador es muy importante.
A mayor resolucin se dispone de ms puntos de informacin para presentar los elementos en
pantalla, pero estos puntos son ms pequeos, con lo que los elementos de la interfaz (textos,
imgenes, objetos de formulario, etc.) se ven ms pequeos.
Si diseamos una pgina para una resolucin dada, ocupando toda la ventana del navegador,
aquellos usuarios que la visualicen a resoluciones menores no tendrn espacio en pantalla para
contener toda la pgina, por lo que se vern obligados a usar las barras de desplazamiento del
navegador.
Por el contrario, aquellos usuarios que la visualicen a resoluciones mayores tendrn demasiado
espacio en pantalla para tan poca pgina, por lo que les quedar bastante espacio vaco, sin
contenidos.
Para solucionar estas diferencias, lo normal es que se diseen las pginas Web para una resolucin
base, generalmente la ms usada en la actualidad (1024x768), y se construyan internamente
mediante tablas o capas de tamaos relativos, con anchuras definidas en %, con lo que se consigue
que al ser visualizadas en monitores de ms resolucin se "abran", ocupando todo el espacio de
pantalla disponible.
4. Lenguaje HTML: el lenguaje con el que se escriben las
pginas Web.
Hyper Text Markup Language, ms conocido como HTML es el lenguaje con el que se
escriben las pginas Web. Las pginas Web pueden ser vistas por el usuario mediante un tipo de
aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los
navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida
en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto.
Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la
introduccin de referencias a otras pginas por medio de los enlaces hipertexto
Uno de los problemas que han acompaado al HTML es la diversidad de navegadores presentes en
el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto
obliga al webmaster a, una vez creada su pgina, comprobar que esta puede ser leda
satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.
Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos
evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es
ms que un texto.
Es por ello que para programar en HTML necesitamos un editor de textos.
As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto.
Estos archivos tienen extensin .HTML o .htm (es indiferente cul utilizar). De modo que cuando
programemos en HTML lo haremos con un editor de textos o con un programa como Dreamweaver y
guardaremos nuestros trabajos con extensin .HTML, por ejemplo mipgina.html

5. Diferentes tipografas y colores en la Web
Las familias tipogrficas disponibles en cada sistema operativo son diferentes. Tipogrfica entre
ambos sistemas.
Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son:
Estas fuentes por defecto se van ampliando segn las aplicaciones instaladas posteriormente.
Buscando siempre la mxima compatibilidad entre plataformas, en el diseo de pginas Web
deberemos usar tan solo fuentes seguras, prescindiendo de las adicionales que hayan podido instalar
en los ordenadores aplicaciones complementarias o los propios usuarios.
Color en la Web
El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores, lo que hace que
la vista sea para nosotros el principal sentido que nos une con el exterior, pudindose afirmar que
alrededor del 80% de la informacin que recibimos del mundo exterior es visual.
Pintores y diseadores grficos utilizan esta capacidad humana de apreciar colores para crear obras
que profundicen en el alma y que inspiren sentimientos en los seres que las contemplan. Pero qu
podemos hacer cuando debemos expresarnos con un nmero limitado de colores?.
Hace tan slo unos pocos aos la mayora de los ordenadores de los que dispona el pblico en
general eran, con la visin que tenemos hoy en da, unos trastos grandes, lentos y con pocas
prestaciones, no slo a nivel de memorias y procesadores, si no tambin a nivel de prestaciones
grficas.
Y los perifricos eran asimismo muy limitados. Todo ello originaba que a nivel grafico estos equipos
trabajaran tan slo con 256 colores.
Actualmente los equipos informticos aumentan da a da sus prestaciones, y lo normal ahora es
trabajar con millones de colores y con monitores de altas prestaciones.
Pero a la hora de la verdad de cuantos colores disponemos para trabajar los diseadores Web?.
La respuesta a sta pregunta es desalentadora, ya que nosotros dependemos a la hora de mostrar
nuestras pginas de unos programas especficos, los navegadores o browsers, que son los
encargados de presentar en pantalla el contenido de las pginas que le llegan desde el servidor
mediante el protocolo HTTP.
Estos programas, aparte de la gran diferencia a la hora de trabajar que hay entre ellos,
interaccionan con el sistema operativo en el que corren, lo que origina al final un galimatas que
hace que los colores de nuestras pginas varen segn el ordenador usado, segn el navegador y
segn el sistema operativo en el que ste est montado.

Por todo esto, los millones de colores de los que se disponen para trabajar quedan reducidos a tan
slo unos pocos 256 a la hora de crear pginas Web.

6. Prcticas
Los archivos necesarios para la realizacin de las prcticas se encuentran en el cd.
6.1. Prctica 1: Agentes registradores acreditados.
En el siguiente ejercicio vamos a entrar en la direccin:
http://www.dominios.es/dominios/es/agentes-registradores/todos-los-agentes-registradores
Aqu podemos ver un listado de los agentes registradores acreditados que nos facilita el Ministerio
de Industria, turismo y comercio.
Selecciona cualquiera de estos agentes para ver si el dominio que te interesa esta libre
Da una vuelta por esta pgina para poder informarte sobre varias cuestiones de inters relacionada
con los dominios.
6.2. Prctica 2: Alta en alojamiento gratuito.
En el siguiente ejercicio vamos a darnos de alta en una empresa que nos ofrece alojamiento Web
gratis:
Que ofrecen alojamiento Web gratis http://miarroba.es/, para lo cual seguimos los siguientes pasos:
Pulsamos en el siguiente botn:
Rellenamos el formulario y nos llegara un correo a la cuenta que hemos puesto para poder
activar nuestros datos de usuario.

Una vez dados de alta ya podemos acceder desde la pestaa en la parte superior
Ponemos nuestro nombre de usuario y clave :
En la siguiente pantalla pulsamos en el icono 1espacio

En la siguiente pantalla pulsamos en el icono de la parte superior Nuevo espacio
Rellenamos los datos que nos piden la direccin de la pgina Web es la que pones en tu
navegador:
Ya tenemos un sitio en Internet que usaremos ms adelante
Recuerda
Un dominio o nombre de dominio es el nombre que identifica un sitio Web. Cada dominio tiene
que ser nico en Internet.
Igual que para crear una empresa tradicional es necesario inscribirla con su nombre
correspondiente en el Registro Mercantil, para dar de alta a tu empresa en Internet tienes que
llevar a cabo el equivalente de lo anterior en la red, es decir, registrar el nombre de dominio.
El trmino servidor se utiliza para referirse a una mquina cuyo propsito es proveer datos de
modo que otras mquinas puedan utilizar esos datos.
El alojamiento de Web te da la oportunidad de tener tu pedacito de ciberespacio donde puedes
almacenar tus datos, documentos, tu pgina o sitio Web e incluso disponer de tu propia oficina
de correos (servidor de correo).
Las aplicaciones encargadas de presentar las pginas Web son los navegadores
Hyper Text Markup Language, ms conocido como HTML es el lenguaje con el que se
escriben las pginas Web.
El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores, lo que hace
que la vista sea para nosotros el principal sentido que nos une con el exterior, pudindose
afirmar que alrededor del 80% de la informacin que recibimos del mundo exterior es visual.
Autoevaluacin
1. Que es un dominio?
Un servidor
Las propiedades de un sitio web
El nombre que identifica un sitio web
2. Podemos registrar un dominio a travs de:
Un abogado
Una empresa
Un programa
3. Los archivos para cada sitio remoto de internet donde se almacenan?
En nuestro ordenador
En una empresa
En un servidor
4. En un alojamiento web:
Podemos almacenar nuestros datos
Podemos disponer de un correo electrnico
Ambas respuestas son correctas
5. Con un alojamiento dedicado:
Dispones de un servidor para ti solo
Compartes servidor
Se encuentra en servidores gratuitos

1. Sitios en Dreamweaver, Presenta los pasos a seguir para
crear y configurar un sitio Web en el programa Macromedia
Dreamweaver. Explica las diferencias entre el sitio local y sitio
remoto, cmo organizarlos para albergar el contenido creado y
las distintas formas de ver los archivos en el sitio local.
Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos, como
temas relacionados, un diseo similar o un objetivo comn. Dreamweaver es una herramienta de
creacin y administracin de sitios, por lo que puede utilizarlo para crear documentos individuales y
sitios Web completos.
En Dreamweaver, el trmino sitio se emplea para referirse a una ubicacin de almacenamiento
local (en nuestro ordenador) o remota (en el servidor ) de los documentos que pertenecen a un sitio
Web.
Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio
en un servidor Web, controlar y mantener vnculos y administrar y compartir archivos. Para
aprovechar al mximo las funciones de Dreamweaver, debe definir un sitio.
Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn el entorno de
desarrollo y el tipo de sitio Web que se desarrolle:
Carpeta raz local Almacena los archivos con los que est trabajando. Dreamweaver se refiere a
esta carpeta como el "sitio local". Esta carpeta suele encontrarse en el equipo local.
Carpeta remota Almacena los archivos para pruebas, produccin, colaboracin, etc. Dreamweaver
se refiere a esta carpeta como el "sitio remoto" en el panel Archivos. En general, la carpeta remota
suele colocarse en el equipo donde se ejecuta el servidor Web. La carpeta remota incluye los
archivos a los que los usuarios acceden en Internet.
Las carpetas locales y remotas permiten transferir archivos entre el disco duro local y el servidor
Web, lo cual facilita la administracin de los archivos en los sitios de Dreamweaver.
Se trabaja en archivos en la carpeta local y se publican en la carpeta remota cuando se desea que
otras personas los puedan ver.
Carpeta de servidor de prueba La carpeta en la que Dreamweaver procesa pginas dinmicas.
Carpetas locales y remotas
Cuando desee utilizar Dreamweaver para conectar con una carpeta remota, deber especificar la
carpeta remota en la categora Datos remotos del cuadro de dilogo Definicin del sitio.
La carpeta remota que especifique (tambin conocida como "directorio del servidor") deber
corresponder a la carpeta raz local del sitio de Dreamweaver. (La carpeta raz local es la carpeta de
nivel superior del sitio de Dreamweaver).
Las carpetas remotas, al igual que las carpetas locales, pueden tener cualquier nombre, aunque los
proveedores de acceso a Internet suelen denominar las carpetas remotas de nivel superior para
cuentas de usuarios individuales public_html, pub_html o algo similar.
Si es usted el responsable de su propio servidor remoto y puede asignar a la carpeta remota el
nombre que desee, es recomendable que asigne el mismo nombre a la carpeta raz local y la carpeta
remota.
El siguiente ejemplo muestra una carpeta raz local de ejemplo a la izquierda y una carpeta remota
de ejemplo a la derecha
Al establecer inicialmente una conexin remota, la carpeta remota del servidor Web suele estar
vaca. Posteriormente, al utilizar Dreamweaver para cargar todos los archivos de la carpeta raz
local, la carpeta remota se llena con todos los archivos Web.
La estructura de directorios de la carpeta remota y la carpeta raz local siempre debe ser la misma.
(Es decir, siempre debe existir una correspondencia uno a uno entre los archivos y carpetas de la
carpeta raz local y los archivos y carpetas de la carpeta remota.)
Si la estructura de la carpeta remota no coincide con la de la carpeta raz local, Dreamweaver
cargar los archivos en un lugar incorrecto y los visitantes del sitio no podrn verlos. Adems, las
rutas de imgenes y vnculos pueden romperse fcilmente cuando las estructuras de carpetas y
archivos no estn sincronizadas.

2. Configurar un sitio Web.
Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio
Web.
La carpeta raz local es el directorio de trabajo del sitio de DW. Esta carpeta puede encontrarse en
el equipo local o en un servidor de red.
Si desea comenzar a editar archivos en su equipo (sin publicarlos), configure solamente una carpeta
local y, ms adelante, aada la informacin remota y de prueba.
Para configurar un sitio nuevo, seleccione Sitio > Nuevo sitio.
Sitio
Introduzca la informacin bsica de configuracin:
Nombre del sitio
El nombre que aparece en el panel Archivos y en el cuadro de dilogo Administrar sitios; no aparece
en el navegador.
Carpeta raz local
El nombre de la carpeta del disco local en la que se almacenan los archivos del sitio, las plantillas y
los elementos de biblioteca. Cree una carpeta en el disco duro o haga clic en el icono de carpeta
para localizar la carpeta. Cuando Dreamweaver resuelve vnculos relativos a la raz, toma como
referencia esta carpeta.

Servidores
La categora Servidores le permite especificar los servidores remoto y de prueba.
En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web.
En el panel Archivos de Dreamweaver, la carpeta remota se denomina sitio remoto. Al configurar
una carpeta remota, debe seleccionar un mtodo de conexin para que Dreamweaver cargue y
descargue archivos del servidor Web.
Haga clic en el botn Aadir (smbolo ms) nuevo servidor para aadir un nuevo servidor:
En el cuadro de texto Nombre de servidor, especifique un nombre para el nuevo servidor.
Puede elegir el nombre que desee.
Seleccione FTP en el men emergente Conectar usando.
El resto de los datos nos los da el servidor
Control de versin
Dreamweaver puede conectar con un servidor que utilice Subversion (SVN), un sistema de control
de versiones que permite a los usuarios editar y administrar archivos en colaboracin en servidores
Web remotos.
Dreamweaver no es un cliente SVN completo, pero s permite a los usuarios obtener las versiones
ms recientes de los archivos, realizar cambios y aceptarlos en los archivos.
Configuracin avanzada
Carpeta predeterminada de imgenes La carpeta en la que desea guardar imgenes para el sitio.
Introduzca la ruta de acceso a la carpeta o haga clic en el icono de carpeta para localizar la carpeta.
Dreamweaver utilizar la ruta de acceso a la carpeta cuando aada imgenes a los documentos.
Activar cach Indica si debe crearse un cach local para mejorar la velocidad de las tareas de
administracin de vnculos y sitios. Si no selecciona esta opcin, Dreamweaver volver a preguntarle
si desea utilizar un cach antes de crear el sitio. Es recomendable seleccionar esta opcin.
3. Administrar y editar sitios Web.
Utilice el cuadro de dilogo Administrar sitios para crear un nuevo sitio, editar, duplicar, eliminar un
sitio o importar o exportar la configuracin de un sitio.
Seleccione Sitio > Administrar sitios y seleccione un sitio de la lista de la izquierda y haga clic en
Listo.
Veamos las opciones del administrador de sitios:
Importar sitio
Permite seleccionar un archivo de configuracin de un sitio (*.ste).
Importar sitio de Business Catalyst
Adobe Business Catalyst es una plataforma de manejo de desarrollos Web, que incluye adems todas
las herramientas necesarias para la administracin de un negocio on-line.
Puedes crear aplicaciones dinmicas, sin necesidad de programar, pues ya desarrollaron mdulos
especiales para manejar formularios, bases de datos, etc.
Nuevo sitio
Permite crear un sitio nuevo.
Nuevo sitio de Business Catalyst
Accedemos al servidor de Business Catalyst para poder crear un sitio.
Eliminar
Elimina el sitio seleccionado; no podr deshacer esta accin.
Editar
Sirve para modificar un sitio existente.

Duplicar
Crea una copia del sitio seleccionado. La copia aparece en la ventana de lista de sitios.
Exportar
Permite exportar la configuracin de un sitio como archivo XML (*.ste).
Eliminacin de un sitio
La eliminacin de un sitio de Dreamweaver y de toda su informacin de configuracin de la lista de
sitios no elimina los archivos del sitio del equipo.
Exportacin e importacin de un sitio
Puede exportar la configuracin de un sitio como archivo XML para importarlo posteriormente en
Dreamweaver. As, podr mover sitios entre sistemas y versiones diferentes del producto o
compartir configuraciones con otros usuarios.
Seleccione Sitio > Administrar sitios.
Seleccione uno o varios sitios cuya configuracin desee exportar y haga clic en Exportar:
Para seleccionar ms de un sitio, presione Control (Windows) o Comando (Macintosh) mientras hace
clic en cada sitio. Para seleccionar un rango de sitios, presione Mays mientras hace clic en el
primer sitio y en el ltimo sitio del rango.
Si desea crear una copia de seguridad de la configuracin del sitio para usted, seleccione la primera
opcin del cuadro de dilogo Exportando sitio y haga clic en Aceptar. Dreamweaver guarda la
informacin de inicio de sesin en el servidor remoto, es decir, el nombre de usuario y la contrasea,
adems de la informacin de ruta local.

Si desea compartir la configuracin con otros usuarios, seleccione la segunda opcin del cuadro de
dilogo Exportando sitio y haga clic en Aceptar. (Dreamweaver no guarda la informacin que no
funciona con otros usuarios, como la informacin de inicio de sesin en el servidor remoto y las rutas
locales.)
Por cada sitio cuya configuracin desee exportar, vaya a la ubicacin en la que desea guardar el sitio
y haga clic en Guardar. (Dreamweaver guarda la configuracin de cada sitio como un archivo XML
con extensin de archivo .ste.)
Para importar un sitio
Haga clic en Importar sitio.
Vaya hasta el sitio o los sitios cuya configuracin desee importar y seleccinelos (definidos mediante
archivos con la extensin de archivo .ste).
Para seleccionar varios sitios, presione Control (Windows) o Comando (Macintosh) mientras hace
clic en cada uno de los archivos .ste. Para seleccionar un rango de sitios, presione Mays mientras
hace clic en el primer archivo y en el ltimo archivo del rango.
Haga clic en Abrir y, a continuacin, en Listo.
Una vez que Dreamweaver importe la configuracin de sitio, los nombres de los sitios aparecern en
el cuadro de dilogo Administrar sitios.

4. Crear y abrir documentos: Creacin de una pgina en blanco,
Creacin de una plantilla en blanco, Creacin de una pgina
basada en un archivo de muestra de Dreamweaver CC, Cmo
abrir y editar documentos existentes.
Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Adems de
documentos HTML, es posible crear y abrir una gran variedad de documentos basados en texto,
JavaScript y hojas de estilos en cascada (CSS). Tambin admite archivos de cdigo fuente, como
PHP, XML y Java.
Dreamweaver proporciona varias opciones para crear un documento nuevo.
Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tipo de archivo
principal con el que va a trabajar es el archivo HTM.
Creacin de una pgina en blanco
Seleccione Archivo > Nuevo.

En la categora Pgina en blanco del cuadro de dilogo Nuevo documento, seleccione el tipo de
pgina que desea crear en la columna Tipo de pgina. Por ejemplo, seleccione HTML para
crear una pgina HTML, PHP para crear una pgina PHP, etc.
Si desea que su nueva pgina contenga un diseo CSS, seleccione un diseo CSS.
Creacin de un diseo de cuadrcula fluida
Utilice el sistema de diseo de cuadrcula fluida y el editor HTML para disear proyectos para
smartphones, tablets y pantallas de equipos de sobremesa.
Cree complejos diseos Web sin complicarse con el cdigo. El diseo de cuadrcula fluida le ayuda a
disear proyectos que se muestran en diferentes tamaos de pantalla de dispositivos y ordenadores
de sobremesa.
Plantillas de sitio
Una plantilla es una estructura en la que hay partes no editables (que no se van a poder modificar) y
otras que son modificables para llenarse de contenido.
Desde aqu, podemos abrir una pgina Web existente y editarlos en la vista Diseo o la vista Cdigo.
Solamente tendremos que seleccionar el sitio previamente aadido, como se vio en los pasos
anteriores
5. Espacio de trabajo de Dreamweaver CC
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos.
Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que
pueda realizar cambios en los documentos rpidamente.
En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de
trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la
aplicacin de mayor tamao.
A. Barra de herramientas Documento
B. Barra de la aplicacin
C. Ventana de documento
D. Conmutador de espacios de trabajo
E. Grupos de paneles
F. Selector de etiquetas
G. Inspector de propiedades
Ventana de bienvenida Le permite abrir un documento reciente o crear un documento nuevo.
Desde la pantalla de bienvenida, tambin puede profundizar sus conocimientos sobre Dreamweaver
mediante una visita guiada o un tutorial del producto.
Barra de la aplicacin A lo largo de su parte superior, la ventana de la aplicacin contiene un
conmutador de espacios de trabajo, mens (slo Windows) y otros controles de aplicacin.
Barra de herramientas Documento Contiene botones que proporcionan opciones para diferentes
vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de
visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un
navegador.
Barra de herramientas Estndar Para mostrar la barra de herramientas Estndar, seleccione Ver
> Barras de herramientas > Estndar. La barra de herramientas contiene botones para las
operaciones ms habituales de los mens de Archivo y Edicin: Nuevo, Abrir, Examinar en Bridge,
Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer, etc...
Barra de herramientas Programacin (Slo se muestra en la vista Cdigo.) Contiene botones que
le permiten realizar numerosas operaciones de programacin estndar.
Ventana de documento Muestra el documento actual mientras lo est creando y editando.
Inspector de propiedades Le permite ver y cambiar diversas propiedades del objeto o texto
seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no est ampliado
de forma predeterminada en el diseo del espacio de trabajo del Programador.
Selector de etiquetas Situado en la barra de estado de la parte inferior de la ventana de
documento. Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier
etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.
Paneles Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel
Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su ficha.
Panel Insertar Contiene botones para la insercin de diversos tipos de objeto, como imgenes,
tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de cdigo HTML que
le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo
clic en el botn Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el men
Insertar en lugar del panel Insertar.
Panel Archivos Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio
de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos tambin
proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows
(Windows) o en el Finder (Macintosh).
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles,
inspectores y ventanas, utilice el men Ventana.

6. Vistas del documento: Cdigo, Cdigo dividida, Diseo, en
vivo.
La ventana de documento permite visualizar documentos de diferentes formas como vemos a
continuacin:
Vista Cdigo
Vemos el cdigo que compone nuestra pgina
Vista de cdigo dividida
La vista de cdigo dividida divide el documento en dos para que pueda trabajar con el cdigo y con
la vista diseo
Vista Diseo
Es la que utilizaremos a lo largo del curo y es la ms intuitiva
En vivo
Aconsejable cuando trabajemos con css
Cambio de la vista Cdigo a la vista Diseo y viceversa
Vemos como se visualizara la pgina en un navegador

Divisin vertical de las vistas
Nos ayuda mediante colores y es til para trabajar con css o con la vista dividir
7. Propiedades de la pgina: CSS, HTML
Para ver las propiedades de la pgina hemos de ir al men Modificar y elegir la opcin Propiedades
de la pgina, Entonces se abrir una ventana.
Pondremos un ttulo a nuestra pgina. Este ttulo es el que aparecer en la barra del navegador y
ayudar a los navegantes a identificar nuestro sitio y saber dnde se encuentra. Si el usuario
agregara nuestra pgina a Favoritos, sta se guardara con el ttulo que nosotros le hayamos puesto.
Para definir el ttulo de una pgina, con la ventana de Documento activa seleccionamos
Modificar/Propiedades de pgina, seleccionamos la categora y titulo. Se abrir un cuadro de dilogo
y en el campo Ttulo tipeamos el ttulo de nuestra pgina. Luego hacemos click en Aceptar.
Las propiedades estn organizadas en categoras.
En la categora Apariencia (CSS), 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: al igual que cualquier documento las pginas Web tienen un espacio determinado
entre su contenido y el limite del documento, se es el margen. Los mrgenes se aplican desde
el cuadro Propiedades de pgina.
Si dejamos estos casilleros de margen vacos el navegador siempre aplicar unos mrgenes
predeterminados que varan de un navegador a otro.
En la categora Apariencia (HTML)
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 limitar el HTML al contenido, y no
al diseo. Por eso, te desaconsejamos su uso
En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.
Tamao: es el tamao del texto de los vnculos.
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto
normal y los vnculos que sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si
unos vnculos ya han sido visitados o no.
Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del
vnculo.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto
aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no
aparezca subrayado
Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que
queremos aplicar a cada tipo de encabezado
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la
ventana de documento de Dreamweaver
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se
mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se
utiliza como plantilla grfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo
8. Prcticas.
Los archivos necesarios para la realizacin de las prcticas se encuentran en el campus virtual.
8.1. Prctica 1: Creacin de sitio
Vamos a crear un sitio para lo cual seguimos estos pasos:
Crea una carpeta en tu disco duro, llmala curso_dreamwever, dentro de esta carpeta crea otra
que llames lec_dos
Crea un sitio nuevo en Dreamweaver como nombre del sitio ponle Dreamweaver CC
A lo largo del curso trabajaremos con este sitio.
8.2. Prctica 2: Nuestro primer HTML
Vamos a crear nuestro primer HTML, para ello:
Abre el men Archivo y elige la opcin Nuevo
Selecciona Pgina en blanco en Categora.
Selecciona HTML en Tipo de pgina.
Haz clic sobre el botn Crear.
Vamos a Modificar / propiedades de la pgina
Ponemos como titulo a nuestra pgina Mi primer HTML
Le ponemos cualquier color de fondo.
Guardamos nuestro HTML como ejercicio dos dentro de la carpeta lec_dos

Recuerda
Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos,
como temas relacionados, un diseo similar o un objetivo comn.
La estructura de directorios de la carpeta remota y la carpeta raz local siempre debe ser la
misma.
Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un
sitio Web.
Dreamweaver no es un cliente SVN completo, pero s permite a los usuarios obtener las
versiones ms recientes de los archivos, realizar cambios y aceptarlos en los archivos.
Utilice el cuadro de dilogo Administrar sitios para crear un nuevo sitio, editar, duplicar,
eliminar un sitio o importar o exportar la configuracin de un sitio.
Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web.
Dreamweaver se suministra con distintos archivos de marcos de pgina y de diseo CSS
desarrollados por profesionales.
Puede crear una plantilla a partir de un documento existente o a partir de un documento nuevo
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles,
inspectores y ventanas, utilice el men Ventana.
Podemos observar que muchas propiedades HTML y CSS son similares.

Autoevaluacin
1. Un sitio de Dreamweaver permite:
Solo leer documentos web
Solo ver documentos web
Organizar y administrar todos los documentos Web
2. La carpeta raz local dnde se suele encontrar?
En un disco externo
En el equipo local
En el servidor
3. Cmo podemos seleccionar una herramienta oculta?
Haciendo doble clic sobre ella
No existen
Desplegando el tringulo que aparece junto a la herramienta visible
4. La carpeta raz remota dnde se suele encontrar?

En el servidor
En un disco externo
5. Al configurar un sitio en Dreamwever el nombre del sitio dnde aparece?
En el navegador
En el panel Archivos y en el cuadro de dilogo Administrar sitios
En el servidor
1. Insertar Texto
Insertar Texto
Se indica cmo introducir texto en las pginas Web a travs del programa Macromedia
Dreamweaver CC. Se estudia el formato del texto (fuente, tamao, color, alineacin, sangra,...), los
estilos CSS, la posibilidad de crear listas (numeradas, no numeradas o de definicin) e incluso la
revisin de la ortografa. Finalmente, tambin se describe la utilizacin de otros objetos en las
pginas, como reglas horizontales, comentarios y la fecha de la ltima modificacin de la pgina.
Para aadir texto a un documento de Dreamweaver puede escribir texto directamente en la ventana
de documento o puede cortar y pegar texto. Tambin puede importar texto de otros documentos.
Al pegar Texto en un documento de Dreamweaver, puede utilizar el comando Pegar o Pegado
especial (se encuentran en el men edicin).
El comando Pegado especial le permite especificar el formato del Texto pegado de diversas formas.
Por ejemplo, si desea pegar Texto de un documento con formato de Microsoft Word en un
documento de Dreamweaver pero desea eliminar todo el formato de manera que pueda aplicar su
propia hoja de estilos CSS al Texto pegado, puede seleccionar el Texto en Word, copiarlo al
portapapeles y utilizar el comando Pegado especial para seleccionar la opcin que le permite pegar
slo Texto.
Aada Texto al documento siguiendo uno de estos procedimientos:
Escriba Texto directamente en la ventana de documento.
Copie Texto de otra aplicacin, cambie a Dreamweaver, coloque el punto de insercin en la
vista Texto de la ventana de documento y seleccione Edicin > Pegar o Edicin > Pegado
especial.
Al seleccionar Edicin > Pegado especial, puede elegir diversas opciones de formato al pegar.
Puede establecer preferencias de pegado especial como opciones predeterminadas al utilizar
Edicin > Pegar para pegar Texto de otras aplicaciones.
Por ejemplo, si siempre desea pegar Texto como slo Texto o Texto con formato bsico, puede
establecer la opcin predeterminada en la seccin Copiar/Pegar del cuadro de dilogo Preferencias.
Las preferencias establecidas en la seccin Copiar/Pegar del cuadro de dilogo Preferencias slo
afectan a aquello que se pegue en la vista Texto.

Seleccione Edicin > Preferencias (Windows) o Preferencias de Dreamweaver (Macintosh).
Haga clic en la categora Copiar/Pegar.
Configure las opciones siguientes y haga clic en Aceptar.
Slo Texto Permite pegar Texto sin formato. Si el Texto original tiene formato, se eliminar todo el
formato, incluidos los saltos de lnea y los prrafos.
Texto con estructura Permite pegar Texto que conserve su estructura pero no el formato bsico.
Por ejemplo, puede pegar Texto y conservar la estructura de los prrafos, listas y tablas sin
conservar negritas, cursivas u otras caractersticas de formato.
Texto con estructura y formato bsico Permite pegar Texto con formato HTML estructurado y
simple (por ejemplo, prrafos y tablas, as como b, i, u, strong, em, hr, abbr o acronym).
Texto con estructura y formato completo Permite pegar Texto que conserva toda la estructura,
el formato HTML y los estilos CSS.
La opcin de formato completo no permite conservar estilos CSS procedentes de una hoja de estilos
externa ni aquellos estilos que procedan de aplicaciones en las que no se conserven los estilos al
pegar en el portapapeles.
Conservar saltos de lnea Permite conservar los saltos de lnea en el Texto pegado. Esta opcin
aparece desactivada si ha seleccionado Slo Texto.
Limpiar espaciado de prrafo de Word Seleccione esta opcin si ha seleccionado Texto con
estructura o Texto con estructura y formato bsico y desea eliminar el espacio adicional existente
entre los prrafos al pegar el Texto.
Convertir comillas tipogrficas en comillas rectas Cambia las comillas tipogrficas, tambin
denominadas "comillas curvas" por comillas rectas (' o ").

2. Importar documentos de Microsoft Word
Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por
ejemplo, archivos de Microsoft Excel o archivos de base de datos) en formato de texto delimitado.
Puede importar y aplicar formato a datos de tabla e importar texto de documentos HTML de
Microsoft Word.
Tambin puede aadir texto de documentos de Microsoft Excel a un documento de Dreamweaver
importando el contenido del archivo de Excel en una pgina Web.
Seleccione Archivo > Importar> Importar datos de tabla.
Localice el archivo deseado o introduzca su nombre en el cuadro de texto.
Seleccione el delimitador empleado cuando se guard el archivo como texto delimitado. Las
opciones disponibles son: Tabulacin, Coma, Punto y coma, Dos puntos y Otro.
Si selecciona Otro, aparecer un campo en blanco al lado de la opcin. Introduzca el carcter
empleado como delimitador.
Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarn los
datos y haga clic en Aceptar
Puede insertar contenido de un documento de Microsoft Word o Excel en una pgina Web nueva o
existente. Al importar un documento de Word o Excel, Dreamweaver recibe el HTML convertido y lo

inserta en la pgina Web. El tamao de archivo, una vez que Dreamweaver recibe el HTML
convertido, debe ser inferior a 300 KB.
Seleccione Archivo > Importar > Documento de Word, o bien Archivo > Importar > Documento
de Excel.
En el cuadro de dilogo Insertar documento, vaya al archivo que desea aadir, seleccione las
opciones de formato adecuadas en el men emergente Formato en la parte inferior del cuadro
de dilogo y luego haga clic en Abrir.
Slo texto Inserta texto sin formato. Si el texto original tiene formato, se eliminar todo el formato.
Texto con estructura Inserta texto que conserva su estructura pero no el formato bsico. Por
ejemplo, puede pegar texto y conservar la estructura de los prrafos, listas y tablas sin
conservar negritas, cursivas u otras caractersticas de formato.
Texto con estructura y formato bsico Inserta texto con formato HTML estructurado y
simple (por ejemplo, prrafos y tablas, as como texto formateado con la etiqueta b, i, u, strong,
em, hr, abbr o acronym).
Texto con estructura y formato completo Inserta texto que conserva toda la estructura, el
formato HTML y los estilos CSS.
Limpiar espaciado de prrafo de Word Elimina espacios adicionales entre prrafos al pegar
el texto si seleccion la opcin Texto con estructura o Formato bsico.
El contenido del documento de Word o Excel aparecer en la pgina.

3. Propiedades del texto: Propiedades HTML, Propiedades CSS.
Puede utilizar el inspector de propiedades para aplicar el formato HTML o de Hojas de estilos en
cascada (CSS). Al aplicar formato HTML, Dreamweaver aade propiedades al cdigo HTML en el
cuerpo de la pgina. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head
del documento o en una hoja de estilos independiente.
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.
Propiedades HTML
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado,
prrafo o formato predeterminado
Estilo:
La B aplica negrita al texto y la I aplica cursiva
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
Vnculo:
Crea un vnculo de hipertexto del texto seleccionado. Haga clic en el icono de carpeta para localizar
un archivo del sitio, escriba el URL, arrastre el icono de sealizacin hasta un archivo del panel
Archivos o arrastre un archivo desde el panel Archivos hasta el cuadro.
Ttulo
Especifica el texto de informacin sobre una herramienta para un vnculo de hipertexto.
Destino
Permite especificar el marco o la ventana donde se cargar el documento vinculado.
Propiedades CSS
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra pgina
y darle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color de
fondo, hasta cosas ms vistosas, como hacer que un bloque se muestre en una posicin determinada
o que un elemento cambie al pasar el cursor sobre l.
Profundizaremos en esto ms adelante, por ser una parte fundamental en la creacin de pginas
Web.
Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CC nos proporciona
numerosas funciones para la creacin de estilos mediante hojas de estilos en cascada.
Regla de:
Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos. Veremos
esto ms adelante
Fuente:
Cambia la fuente de la regla de destino.
Tamao:
Permite cambiar el tamao del texto
Alineacin:
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades
de la pgina
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas
distintas: izquierda, centrada, derecha y justificada.

4. Creacin de listas: Creacin de una lista nueva, de una lista
usando texto existente, de una lista anidada. Configuracin de
las propiedades de toda una lista
Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin a
partir de texto existente o de texto nuevo que escriba en la ventana de documento.
Las listas de definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y suelen
utilizarse en glosarios o descripciones. Adems, las listas se pueden anidar.
Una lista anidada es aqulla que contiene otras listas. Por ejemplo, en algunos casos puede resultar
conveniente anidar una lista ordenada o con vietas en otra numerada u ordenada.
Creacin de una lista nueva
En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea
aadir la lista
Haga clic en el botn Lista con nmeros y Lista con vietas.
Seleccione Formato > Lista y elija el tipo de lista deseado: Lista sin ordenar (con vietas), Lista
ordenada (numerada) o Lista de definicin.
El carcter inicial del elemento especificado de la lista aparecer en la ventana de documento.
Escriba el texto del elemento de la lista y presione Intro (Windows) o Retorno (Macintosh) para
crear otro elemento de la lista.
Para terminar la lista, presione dos veces Intro (Windows) o Retorno (Macintosh).
Ciudades
Pueblos
Aldeas
Barrios
Creacin de una lista usando texto existente
Seleccione una serie de prrafos para convertirlos en una lista.
En el inspector de propiedades de HTML, haga clic en el botn Lista con nmeros y Lista con
vietas, o bien seleccione Formato > Lista y seleccione el tipo de lista deseado: Lista sin ordenar,
Lista ordenada o Lista de definicin.
Creacin de una lista anidada
Seleccione los elementos de lista que desea anidar.
En el inspector de propiedades de HTML, haga clic en el botn Blockquote o seleccione Formato >
Sangra.
Dreamweaver aplicar sangra al texto y crear una lista distinta con los atributos HTML de la lista
original.
Ciudades
Madrid
Sevilla
Pueblos
Aldeas
Barrios
Configuracin de las propiedades de toda una lista
En la ventana de documento, cree al menos un elemento de lista: El nuevo estilo se aplicar
automticamente a todos los elementos que vaya aadiendo a la lista.
Coloque el punto de insercin sobre el texto del elemento de lista y seleccione Formato > Lista >
Propiedades para abrir el cuadro de dilogo Propiedades de lista.

Configure las opciones que desea definir para la lista:
Tipo de lista Especifica las propiedades de lista, mientras que Elemento de lista especifica un
elemento de la lista.
Estilo Determina el estilo de los nmeros o las vietas empleados para una lista numerada o con
vietas. Todos los elementos de la lista tendrn este estilo a menos que especifique un estilo nuevo
para determinados elementos.
Iniciar recuento Establece el valor del primer elemento en una lista numerada.
Haga clic en Aceptar para definir las opciones.

5. Caracteres especiales en HTML
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 por ejemplo: copyright (©), el signo ampersand (&) y el smbolo de
marca comercial registrada (®). , Dreamweaver no los crear, debers introducirlo utilizando la
opcin que vamos a ver a continuacin.
Lo mismo ocurrir con los caracteres que no tenemos en el teclado.
Desgraciadamente, muchos navegadores (especialmente los navegadores antiguos y los que no son
Netscape Navigator ni Internet Explorer) no muestran correctamente muchas de las entidades con
nombre.
En la ventana de documento, site el punto de insercin en el lugar donde desea insertar un
carcter especial.
Siga uno de estos procedimientos:
Seleccione el nombre del carcter en el men Insertar > Carcter > otro
Desde el panel insertar seleccionamos texto, y seleccione el carcter.

Si pulsamos al final de toda la lista en otros caracteres aparece la siguiente ventana:
6. Corregir y sustituir texto, revisin ortogrfica, bsqueda y
sustitucin de texto
Revisin ortogrfica
Utilice el comando Ortografa (comandos/ortografa) para revisar la ortografa del documento actual.
El documento debe ser una pgina Web (por ejemplo, una pgina HTML, ColdFusion o PHP). El
comando Ortografa no funciona con archivos de texto o archivos XML.
Asimismo, el comando Ortografa no tiene en cuenta las etiquetas HTML ni los valores de atributo.
Dreamweaver slo puede revisar la ortografa del archivo abierto actualmente en la ventana de
documento. No puede revisar la ortografa de todos los archivos de un sitio simultneamente.
De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados Unidos.
Para cambiar el diccionario, seleccione Edicin > Preferencias > General (Windows) o Dreamweaver
> Preferencias > General (Macintosh) y, a continuacin, seleccione el diccionario que desea utilizar
en el men emergente Diccionario ortogrfico.
Seleccione Comandos > Ortografa o presione Mays+F7.
Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de dilogo
Ortografa.
Seleccione la opcin adecuada teniendo en cuenta las discrepancias mostradas.
Aadir a personal Incorpora la palabra no reconocida al diccionario personal.
Omitir Ignora esta aparicin de la palabra no reconocida.
Cambiar Sustituye esta aparicin de la palabra no reconocida por el texto que usted
escriba en el cuadro Cambiar a o por la seleccin de la lista Sugerencias.
Omitir todo Ignora todas las apariciones de la palabra no reconocida.
Cambiar todas Reemplaza de la misma manera todas las apariciones de la palabra
no reconocida.
Bsqueda y sustitucin de texto
Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una
carpeta del panel Archivos.
Seleccione Edicin > Buscar y reemplazar.

Utilice la opcin Buscar en para especificar los archivos en los que desea buscar:
Texto seleccionado Limita la bsqueda al texto que est seleccionado en el
documento activo.
Documento actual Limita la bsqueda al documento activo.
Abrir documentos Busca en todos los documentos que estn abiertos.
Carpeta Limita la bsqueda a una carpeta especfica. Despus de seleccionar
Carpeta, haga clic en el icono de carpeta para localizar y seleccionar la carpeta que
desea buscar.
Archivos seleccionados en el sitio Limita la bsqueda a los archivos y las carpetas
seleccionados actualmente en el panel Archivos.
Sitio local actual completo Ampla la bsqueda a todos los documentos HTML, los
archivos de biblioteca y los documentos de texto del sitio actual.
Utilice el men emergente Buscar para especificar el tipo de bsqueda que desea realizar
Para buscar sin reemplazar, haga clic en Buscar siguiente o Buscar todos
Para reemplazar el texto o las etiquetas encontrados, haga clic en Reemplazar y Reemplazar
todos.
Cuando acabe, haga clic en Cerrar.

7. Crear un estilo CSS y definicin
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.
Tenemos que indicar que vamos a insertar cdigo CSS en nuestra pgina, as que en el Diseador de
CSS que se encuentra a la derecha o Ventana > Diseador de CSS, seleccionamos Definir pgina en
el apartado Fuentes.
En Selectores del Diseador de CSS indicamos que queremos crear una nueva regla seleccionando
la cruz
Otra manera de crear la regla en seleccionando el elemento al que queremos aplicrselo y en el
Inspector de propiedades CSS, en Regla de destino, seleccionamos .
Nos aparecer la siguiente ventana:

Si vamos a Selectores del Diseador de CSS y le damos al
automticamente se habr creado la regla que hemos definid anteriormente.
Una vez creado, tenemos que definir las propiedades que formarn el estilo en la siguiente pantalla,
aqu encontramos todas las propiedades CSS agrupadas por categoras. Las veremos ms adelante.
Hay otra manera de crear nuevas reglas CSS que viene de versiones anteriores de Dreamweaver,
pero en esta versin solo se puede aplicar en ciertos tipos de elementos como imgenes o Divs.
Seleccionando el elemento y pulsando con el botn derecho del ratn Estilos CSS > Nuevo
Tipo de selector: por ahora lo dejamos en clase, cuando veamos los estilos profundizaremos en este
tema.
Nombre del selector: esta opcin permite asignar un nombre al selector. Le ponemos el nombre
que aparece.
Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un
nuevo archivo .css.
Una vez creado, tenemos que definir las propiedades que formarn el estilo en la siguiente pantalla,
aqu encontramos todas las propiedades CSS agrupadas por categoras.

8. Web fonts: La tipografa es una parte esencial del diseo de
pginas Web.
Tipografas
La tipografa es una parte esencial del diseo de pginas Web, tanto desde el punto de vista
esttico como para la correcta visualizacin de los contenidos textuales, los ms importantes en una
pgina Web.
Cuando el diseador comienza a trabajar en la presentacin de los textos de una pgina Web, se
encuentra con que el navegador de cada visitante emplea las fuentes que cada sistema operativo
tiene instaladas. Los sistemas operativos ms comunes (Windows, Linux y Mac), tienen fuentes
propias que estn instaladas por defecto.
A esto hay que agregar que hay diferencias entre distintas versiones de los sistemas operativos. Por
ejemplo, Windows Vista tiene diferencias con las versiones anteriores de Windows, existen
diferencias importantes entre las distribuciones de Linux y Mac tambin muestra algunas
diferencias entre versiones.
Si bien muchos usuarios de Linux y Mac instalan paquetes de fuentes de Windows (en Linux ms del
70% de los usuarios), emplear exclusivamente fuentes de Windows para el diseo Web equivaldra a
ignorar la presencia de un grupo importante de usuarios que mantienen el uso de las fuentes
originales de sus sistemas operativos, y es de suponerse que el diseador debe presentar sus diseos
de forma tal que una cifra muy cercana al 100% de los visitantes tengan una buena visualizacin
de la pgina.
Gestin de Web fonts
Vamos a descargar de la siguiente direccin, cualquier tipografa la cual usaremos en nuestro sitio:
http://www.fontsquirrel.com/
Pulsamos sobre lo que aparece en azul:

Pulsamos sobre la tipografa que nos guste y en la siguiente pantalla pulsamos sobre lo marcado en
rojo:
A continuacin descargamos nuestra tipografa:
Descomprimimos la carpeta que contiene los archivos del tipo de letra. Vamos a modificar fuentes
Web que se encuentra en el men Modificar > Administrar fuentes:

Nos aparece la siguiente pantalla donde nos situamos en Fuentes Web Locales, y adjuntamos los
correspondientes documentos segn su extensin.

Pulsamos en agregar, despus a listo y ya podemos aplicar nuestra fuente a cualquier texto, para
ello seleccionamos el texto y buscamos la fuente:
El texto ha de tener ya creada una regla de destino si no se nos creara.
Al hacer un F12, podemos ver la nueva tipografa:

En nuestro sitio se crea la carpeta llamada webfonts:
9. Prcticas
9.1. Prctica 1: Creacin de lista
Vamos a crear una lista en un documento HTML, para lo cual creamos en nuestro sitio una carpeta
llamada lec_tres y seguimos estos pasos:
Creamos el ejercicio a partir de el siguiente documento texto.html
Creamos una lista ordenada a partir de los das de la semana:
Creamos una lista desordenada a partir del siguiente texto:
Creamos una lista anidada a partir del siguiente texto:

9.2. Prctica 2: importar desde Word.
Abrimos un documento en Dreamweaver
Importamos el siguiente documento buscar.doc
Buscamos la palabra Joomla en este documento y la sustituimos por flash
Guardamos este documento como buscar.html
9.3. Prctica 3: creacin de estilos CSS
Vamos a crear un estilo por cada prrafo del siguiente HTML estilos.html
Creamos cuatro estilos llamados parrafo1,parrafo2,parrafo3,parrafo4, a cada estilo le podemos
dar las propiedades que consideremos
Nuestro documento ha de tener un aspecto parecido a este:

Guardamos este documento con el nombre estilos
Recuerda
Es Para aadir texto a un documento de Dreamweaver puede escribir texto directamente en la
ventana de documento o puede cortar y pegar texto. Tambin puede importar texto de otros
documentos.
Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por
ejemplo, archivos de Microsoft Excel o archivos de base de datos) en formato de texto
delimitado.
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.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra
pgina y darle el diseo que queramos.
Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin
a partir de texto existente o de texto nuevo que escriba en la ventana de documento.
En la ventana de documento, cree al menos un elemento de lista: El nuevo estilo se aplicar
automticamente a todos los elementos que vaya aadiendo a la lista.
Utilice el comando Ortografa (comandos/ortografa) para revisar la ortografa del documento
actual. El documento debe ser una pgina Web (por ejemplo, una pgina HTML, ColdFusion o
PHP). El comando Ortografa no funciona con archivos de texto o archivos XML.

Autoevaluacin
1. Al pegar Texto en un documento de Dreamweaver podemos utilizar?
El comando pegar
El comando pegado especial
Ambas son correctas
2. Con el pegado especial podemos especificar:
El color del texto
El sitio del texto
El formato del texto
3. Podemos importar datos de una tabla en dreamweaver?
Si
No
Solo imgenes
4. Desde donde aplicamos las propiedades al texto?

Desde el inspector de propiedades
Con hojas de estilos
Ambas son correctas
5. Cuantos tipos de lista hay en Dreamweaver?
Uno
Dos
Tres
1. Introduccin: Explica cmo insertar hipervnculos en las
pginas Web a travs del programa Macromedia Dreamweaver:
vnculos a un lugar determinado de una pgina (a travs de un
anclaje con nombre), vnculos a otras pginas (del mismo sitio
o a cualquier pgina de Internet) y vnculos en un men de
salto. Se indican las diferencias entre rutas absolutas y
relativas, as como la administracin y modificacin de
hipervnculos en Dreamweaver. Por ltimo, se describe el uso
de comportamientos en las pginas, para ejecutar comandos en
respuesta a determinados sucesos o eventos.
Una vez que haya creado pginas HTML y haya configurado un sitio de Dreamweaver para
almacenar los documentos, deber establecer conexiones entre sus documentos y otros documentos.
Dreamweaver ofrece varios mtodos para crear vnculos con documentos, imgenes, archivos
multimedia o software transferible.
Los vnculos se pueden crear y administrar de varias formas distintas. Algunos diseadores de sitios
Web prefieren crear vnculos con pginas o archivos que todava no existen cuando estn
trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas y aadir los
vnculos ms tarde
A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento desde
el que establece el vnculo y el documento o activo con el que lo establece.
Cada pgina Web tiene una direccin exclusiva, denominada URL. Sin embargo, cuando se crea un
vnculo local (un vnculo de un documento con otro documento del mismo sitio), no suele ser
necesario especificar el URL completo del documento de destino. En este caso se especifica una ruta
relativa desde el documento actual o desde la carpeta raz del sitio.
Existen tres tipos de rutas de vnculos:

Rutas absolutas
(Como http://www.adobe.com/support/dreamweaver/contents.html).
Rutas relativas al documento (como Dreamweaver/contents.html).
Rutas relativas a la raz del sitio (como /support/Dreamweaver/contents.html).
Rutas absolutas
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo,
incluyendo el protocolo http://.
Por ejemplo, http://www.adobe.com/support/dreamweaver/contents.html. En el caso de un activo de
imagen, el URL completo podra ser
http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Rutas relativas al documento
Las rutas relativas al documento suelen ser las ms adecuadas para vnculos locales en la mayora
de los sitios Web. Resultan particularmente tiles cuando el documento actual y el documento o
activo con el que se establece el vnculo se encuentran en la misma carpeta y es probable que vayan
a permanecer juntos.
Tambin puede utilizar una ruta relativa al documento para establecer un vnculo con un documento
o activo de otra carpeta, pero especificando la ruta a travs de la jerarqua de carpetas desde el
documento actual hasta el vinculado.
Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:

Para establecer un vnculo desde contents.html hasta hours.html (ambos situados en la misma
carpeta), utilice la ruta relativa hours.html.
Para establecer un vnculo desde contents.html a tips.html (en la subcarpeta resources), utilice
la ruta relativa resources/tips.html. Con cada barra diagonal (/), bajar un nivel en la jerarqua
de carpetas.
Para establecer un vnculo desde contents.html a index.html (en la carpeta padre, un nivel por
encima de contents.html), utilice la ruta relativa ../index.html. Dos puntos y una barra diagonal
(../) le permiten subir un nivel en la jerarqua de carpetas.
Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual
Rutas relativas a la raz del sitio
Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz del sitio hasta un
documento.
Puede utilizar estas rutas si trabaja con un sitio Web grande que usa varios servidores o un servidor
que alberga varios sitios. Sin embargo, si no est familiarizado con este tipo de ruta, le resultar
ms cmodo mantener las rutas relativas al documento.

2. Crear un enlace: Rutas absolutas y relativas al documento.
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.
Seleccione texto o una imagen en la vista Diseo de la ventana de documento.
Haga clic en el icono de carpeta situado a la derecha del cuadro Vnculo para localizar y
seleccionar un archivo o escriba la ruta y el nombre de archivo del documento en el cuadro
Vnculo
En el men emergente Dest., seleccione una ubicacin para abrir el documento:
blank carga el documento vinculado en una nueva ventana sin nombre del
navegador.
_parent carga el documento vinculado en el marco padre o en la ventana padre del
marco que contiene el vnculo. Tiene sentido si se emplean marcos
_self carga el documento vinculado en el mismo marco o la misma ventana que el
vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso
especificarlo.
_top carga el documento vinculado en la ventana completa del navegador,
eliminando de esta forma todos los marcos.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hiperlink:
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://.
Destino: puede ser como vimos arriba, blank, parent, etc...
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el
cursor sobre el enlace.
Otra forma de crear vnculos es arrastrando el icono de sealizacin de archivo (icono de mira
telescpica) situado a la derecha del cuadro Vnculo del inspector de propiedades, y seale a un
anclaje visible en el documento actual, a un anclaje visible en otro documento abierto.

3. Vnculo a un correo: Creacin de un vnculo de correo
electrnico utilizando el comando Insertar vnculo de correo
electrnico, creacin de un vnculo de correo electrnico
mediante el inspector de propiedades.
Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva ventana de
mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario).
En la ventana de mensaje de correo electrnico, el cuadro Para se actualiza automticamente con la
direccin especificada en el vnculo del mensaje de correo electrnico.
Creacin de un vnculo de correo electrnico utilizando el comando Insertar vnculo de
correo electrnico
En la vista Diseo de la ventana de documento, coloque el punto de insercin donde desea que
aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea que
aparezca como vnculo de correo electrnico.
Seleccione Insertar > Vnculo de correo electrnico.
En el cuadro Texto, escriba o edite el texto del correo electrnico.
En el cuadro Correo electrnico, escriba la direccin de correo electrnico y haga clic en
Aceptar.
Creacin de un vnculo de correo electrnico mediante el inspector de propiedades
Seleccione texto o una imagen en la vista Diseo de la ventana de documento.
En el cuadro Vnculo del inspector de propiedades, escriba mailto: seguido de una direccin de
correo electrnico.
No escriba espacios entre los dos puntos y la direccin de correo electrnico.

4. Men de salto
Un men de salto es un men emergente de un documento que pueden ver los visitantes del sitio y
que ofrece vnculos con documentos o archivos.
Puede crear vnculos con documentos del sitio Web, documentos de otros sitios, correo electrnico,
grficos o cualquier tipo de archivo que se pueda abrir en un navegador.
Cada opcin de un men de salto est asociada a un URL. Cuando los usuarios eligen una opcin, se
les remite ("saltan") al URL asociado
Abra un documento y, a continuacin, site el punto de insercin en la ventana de documento.
Seleccione Insertar > Formulario > Seleccionar.
Seleccione Ventana > Comportamiento
Selecciones el la cruz y ah aparecer el men del salto.

Botones ms (+) y menos (-) Haga clic en ms para insertar un elemento; haga clic en ms de
nuevo para aadir otro elemento. Para eliminar un elemento, seleccinelo y haga clic en menos.
Botones de flecha Seleccione un elemento y haga clic en las flechas para que suba o baje puestos
en la lista.
Texto Escriba el nombre de un elemento sin nombre. Si el men incluye un mensaje de seleccin
(por ejemplo "Elija una opcin"), escrbalo aqu como primer elemento del men (si lo hace, tambin
deber activar la opcin Seleccionar primer elemento tras el cambio de URL en la parte inferior).
Al seleccionarse, ir a URL Acceda al archivo de destino o escriba su ruta.
Abrir URL en Especifique si el archivo debe abrirse en la misma ventana o en un marco. Si el marco
deseado no aparece en el men, cierre el cuadro de dilogo Insertar men de salto y asigne un
nombre al marco.
5. Widget de barra de mens: Adicin de un elemento de men
principal, Adicin de un elemento de submen, Eliminacin de
un elemento de men principal o submen
Un widget de barra de mens es un conjunto de botones de men de navegacin que muestran
submens cuando el visitante de un sitio sita el puntero del ratn sobre uno de ellos.
Las barras de mens permiten visualizar una gran cantidad de informacin de navegacin en un
espacio reducido, y ofrecen a los visitantes una idea de lo que est disponible en el sitio sin
necesidad de realizar una navegacin exhaustiva.
Para crear un men en Dreamweaver, vamos a tener que instalar una extensin necesaria, los pasos
son los siguientes:
Primero instalaremos Adobe Extension Manager, que nos ayudar a instalar las nuevas
extensiones y gestionar las que ya tenga Dreamweaver. Funciona con la mayora de las
extensiones de Creative Cloud. Este programa puede descargarlo a travs de la pgina oficial
de Adobe tanto para Windows como para Mac OS X.
http://www.adobe.com/es/exchange/em_download/
A continuacin realizaremos la descarga de la extensin que nos ayudar a realizar el men:
www.ajatix.com/downloads/com.ajatix.AdvancedCSSMenuLight_2.1.5.zxp
Si tenemos abierto Dreamweaver, hay que cerrarlo.
Abrimos Adobe Extension Manager, y seleccionamos la extensin que nos hemos descargado
anteriormente en Archivo > Instalar Extensin.

Abrimos Dreamweaver y seleccionamos el archivo al que queremos insertarle el men. Nos
dirigimos haca Insertar > Ajatix > Avanced CSS Drop Down Menu
Indicamos que queremos crear un nuevo men y nos saldrn todas las opciones posibles para
crear el men deseado.

Finalmente lo aplicamos y nos saldr un cuadro de dilogo en el que podemos gestionar los
elementos del men para poder realizar tanto elementos principales como elementos
secundarios.
Type: Indicamos si la opcin va a ser normal o va a ser con un formato de Encabezado.
Text: Para indicar el nombre del elemento.
Link: Al seleccionarlo, saldr una opcin donde puede buscar un archivo para crear un enlace.
Title: Le da un titulo a al men.
Target: Selecciona la opcin para abrir el elemento del men.
blank carga el documento vinculado en una nueva ventana sin nombre del navegador.
_parent carga el documento vinculado en el marco padre o en la ventana padre del marco que
contiene el vnculo. Tiene sentido si se emplean marcos
_self carga el documento vinculado en el mismo marco o la misma ventana que el vnculo. Este
destino es el predeterminado, por lo que normalmente no es preciso especificarlo.
_top carga el documento vinculado en la ventana completa del navegador, eliminando de esta
forma todos los marcos.
Se pueden aadir
En la opcin Style Editor del cuadro de dilogo se puede modificar el estilo CSS de nuestro men,
distingue entre Global que es el men en general, Top Menu que refiere a los elementos principales
y Submenu que hace referencia a los elementos secundarios.
Cuando pulse OK, el men se guardar en un fichero .css que podr modificar y volver a usar.
6. Comprobar vnculos: Comprobacin de vnculos del
documento actual, Comprobacin de vnculos en una parte de
un sitio local, Comprobacin de los vnculos de todo el sitio,
Reparacin de los vnculos en el panel Verificador de vnculos.
Utilice la funcin Comprobar vnculos para buscar vnculos rotos y archivos hurfanos (archivos que
todava existen en el sitio sin vnculo con ningn otro archivo del sitio). Puede buscar en un archivo
abierto, en una parte de un sitio local o en un sitio local completo.
Dreamweaver slo verifica los vnculos establecidos con documentos del sitio. Dreamweaver recopila
una lista de vnculos externos que aparecen en el documento o documentos seleccionados, pero no
los verifica.
Tambin puede identificar y eliminar archivos que ya no utilizan otros archivos del sitio
Comprobacin de vnculos del documento actual
Elija Archivo > Sitio > Comprobar vnculos en todo el sitio.
Nos vamos a una opcin
para comprobar los vnculos del documento actual o de todo el sitio.

El informe Vnculos rotos aparecer en el panel Verificador de vnculos (en el grupo de paneles
Resultados).
Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos. El
informe es un archivo temporal que se perder si no lo guarda.
Comprobacin de vnculos en una parte de un sitio local
En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales.
En la vista Local, seleccione los archivos o las carpetas que desea comprobar.
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga
clic (Macintosh) en uno de los archivos seleccionados y elija Comprobar vnculos >
Archivos/carpetas seleccionados en el men contextual.
Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.
Comprobacin de los vnculos de todo el sitio
En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales.
Elija Sitio > Comprobar vnculos en todo el sitio.
El informe Vnculos rotos aparecer en el panel Verificador de vnculos (en el grupo de paneles
Resultados).
En el panel Verificador de vnculos, seleccione Vnculos externos o Archivos hurfanos del
men emergente Ver para visualizar otro informe.
La lista de archivos correspondientes al tipo de informe seleccionado aparecer en el panel
Verificador de vnculos.
Reparacin de los vnculos en el panel Verificador de vnculos
Ejecute un informe de comprobacin de vnculos.
En la columna Vnculos rotos (no en la columna Archivos) del panel Verificador de vnculos (en el
grupo de paneles Resultados), seleccione el vnculo roto.

Aparecer un icono de carpeta junto al vnculo roto.
Haga clic en el icono de carpeta situado junto al vnculo roto y localice el archivo correcto o escriba
su ruta y nombre de archivo correctos.
Si hay otras referencias rotas a ese mismo archivo, se le pedir que repare las referencias tambin
en los otros archivos.
Haga clic en S para que Dreamweaver actualice todos los documentos de la lista que hacen
referencia al archivo. Haga clic en No si desea que Dreamweaver actualice nicamente la referencia
actual.
7. Estilos en vnculos: Link, Visited, Active
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo,
puede adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la
pgina.
Estos tres colores diferentes se corresponden a los tres estados del vnculo: vnculo normal, vnculo
activo (el ltimo pulsado) o vnculo visitado.
Los vnculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para ello,
basta con crear una Regla de estilo para la etiqueta a. Vamos a modificar propiedades de la pgina:
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
Si seleccionamos el vnculo, en el Inspector de propiedades de CSS, seleccionamos Editar Regla, en
Selectores del Diseador de CSS que se encuentra a la derecha, vemos que ha editado una regla
para poder cambiarle las propiedades.

8. Prcticas
8.1. Prctica 1: Creacin de vnculos
Lo primero que tenemos que hacer es crear una carpeta en nuestro sitio llamada lec_cuatro. A dicha
carpeta le aadimos los siguientes documentos archivos creamos un documento llamndolo
enlaces.html y le ponemos como titulo enlaces, dentro de la carpeta lec_cuatro. A este documento le
aadimos el siguiente texto:
En esta lista realizamos los siguientes vnculos:
Enlace a un documento HTML-------------- texto.html
Enlace a un documento de word-----------curso.docx
Enlace a una imagen------------------------monte.jpg
Enlace a un correo---------------------------tu correo
Enlace a un archivo comprimido-----------tortuga.zip
En las propiedades en destino ponemos blank y en las propiedades del documento podemos cambiar
el estilo de los enlaces.
En el documento texto.html, vamos a crear en la parte baja un botn que nos enlace a la parte
superior de la pgina.
8.2. Prctica 2: estilos segn el estado del botn
En este ejercicio vamos a crear cuatro estilos segn cada estado del botn.
Partimos del documento enlaces.html creado en el ejercicio anterior.

Creamos estos cuatro estilos, los cuales se aplican sobre nuestros enlaces.
Estos estilos prevalecen sobre los creados desde el panel documentos.
a:link
a:visited
a:hover
a:active
Guardamos nuestro documento como ejercicio2.HTML.
8.3. Prctica 3: creacin de una barra de mens.
Vamos a crear una barra de mens, creamos un HTML llamado barra.html y en el creamos una
barra de men vertical. Cambiamos el nombre de los enlaces y los llamamos:
Documento------------------- texto.html
Word---------------------------curso.docx
Imagen------------------------monte.jpg
Comprimido-------------------tortuga.zip
Vamos a cambiar el aspecto de la barra, para ello nos situamos en Insertar > Ajatix> Avanced CSS
Drop Down Menu Light
Nos pregunta si queremos crear un nuevo men o editar el que ya tenemos, elegimos la opcin de
Edit Menu on Page:
En la siguiente pantalla cambiamos el color de la fuente y del fondo:

Dependiendo del men que elijamos se podrn cambiar unas propiedades u otras, todas no se
pueden modificar de la misma manera.

Recuerda
Una vez que haya creado pginas HTML y haya configurado un sitio de Dreamweaver para
almacenar los documentos, deber establecer conexiones entre sus documentos y otros
documentos.
Las rutas relativas al documento suelen ser las ms adecuadas para vnculos locales en la
mayora de los sitios Web.
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades.
En la ventana de mensaje de correo electrnico, el cuadro Para se actualiza automticamente
con la direccin especificada en el vnculo del mensaje de correo electrnico.
Puede utilizar el inspector de propiedades para establecer un vnculo con una determinada
seccin de un documento creando en primer lugar anclajes con nombre.
Un men de salto es un men emergente de un documento que pueden ver los visitantes del
sitio y que ofrece vnculos con documentos o archivos.
Las barras de mens permiten visualizar una gran cantidad de informacin de navegacin en
un espacio reducido, y ofrecen a los visitantes una idea de lo que est disponible en el sitio sin
necesidad de realizar una navegacin exhaustiva.
Dreamweaver slo verifica los vnculos establecidos con documentos del sitio.
Autoevaluacin
1. Cuantos tipos de rutas de vnculos existen?
Una
Dos
Tres
2. Cules suelen ser las rutas ms adecuadas para vnculos locales?
Las rutas relativas al documento
Rutas absolutas
3. Podemos crear un enlace a travs:
Del men sitio
Del inspector de propiedades
Del men vincular
4. Podemos crear un vnculo a un correo?

Si
No
Depende del texto
5. Se puede cambiar el estilo de un vnculo cuando ya ha sido visitado?
No
S, con la propiedad hover
S, con la propiedad visited

1. Insertar una imagen: se describe el modo de incorporar
imgenes en las pginas Web a travs del programa
Macromedia Dreamweaver. Se presentan los formatos grficos
que se pueden utilizar en una pgina Web y sus diferencias, as
como la creacin de imgenes de sustitucin, mapas de imagen
y barras de navegacin.
Imgenes
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se
utilizan tres formatos de archivo grfico: GIF, JPEG y PNG.
GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la
mayora de los navegadores.
Los archivos GIF (Formato de intercambio de grficos, Graphic Interchange Format)
Los archivos GIF utilizan un mximo de 256 colores y son idneos para visualizar imgenes con
tonos no continuos o imgenes con grandes reas de color homogneo, como barras de navegacin,
botones, iconos, logotipos u otras imgenes con colores y tonos uniformes.
El formato de archivo JPEG (Grupo conjunto de expertos fotogrficos, Joint Photographic
Experts Group)
El formato de archivo JPEG es el mejor para imgenes fotogrficas o de tonos continuos, ya que
puede contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, tambin
lo hace su tamao y el tiempo que tarda en descargarse.
A menudo es posible conseguir un equilibrio adecuado entre la calidad de la imagen y el tamao de
archivo comprimiendo el archivo JPEG.
El formato de archivo PNG (Grupo de redes porttiles, Portable Network Group)
El formato de archivo PNG es un sustituto del formato GIF sin patente compatible con imgenes con
color indexado, escala de grises y color verdadero, adems de ser compatible con el canal alfa para
transparencias. PNG es el formato de archivo nativo de Adobe Fireworks.
Los archivos PNG conservan la informacin original de capa, vector, color y efectos (como por
ejemplo las sombras), y todos los elementos pueden editarse siempre que se desee. Los archivos se
deben guardar con la extensin .png para que Dreamweaver pueda reconocerlos como tales.
Insertar una imagen
Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de
imagen en el cdigo HTML. Para asegurarse de que esta referencia es correcta, el archivo de
imagen deber estar en el sitio actual. Si no lo est, Dreamweaver le preguntar si desea copiar el
archivo en el sitio.
Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que
aparezca la imagen y, a continuacin, en la categora Comn del panel Insertar, haga clic en el
icono Imagen
En el cuadro de dilogo que aparece Busque y seleccione el origen de imagen o contenido que
desee insertar. Si est trabajando en un documento que no est guardado, Dreamweaver
genera una referencia con la estructura file:// para el archivo de imagen. Al guardar el
documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta
relativa al documento.
Tambin puede insertar una imagen arrastrado la imagen desde el panel Activos (Ventana >
Activos) hasta la posicin deseada de la ventana de documento.
Desde el men Insertar > Imagen.
3. Busque y seleccione el origen de imagen o contenido que desee insertar.

2. Propiedades de la imagen: El inspector de propiedades
El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si no ve
todas las propiedades de imagen, haga clic en la flecha de ampliacin situada en la esquina inferior
derecha.
Seleccione Ventana > Propiedades para ver el inspector de propiedades para una imagen
seleccionada.
En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que
pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como
Intercambiar imagen) o cuando utilice un lenguaje de creacin de scripts como JavaScript o
VBScript.
Defina cualquiera de las opciones de imagen.
An (Ancho) y Al (Alto) El ancho y el alto de la imagen en pxeles o en %.
Dreamweaver actualiza automticamente estos cuadros de texto con las dimensiones
originales de la imagen al insertar una imagen en una pgina.
A. Si activamos el candado hacemos que al cambiar por ejemplo el ancho de la imagen el alto
cambie proporcionalmente.
B. Reestablece el tamao original.
C. Realizar tamao de la imagen.
Origen Especfica el archivo de origen para la imagen. Haga clic en el icono de carpeta para
localizar el archivo de origen o escriba la ruta correspondiente.
Vnculo Especifica un hipervnculo para la imagen. Arrastre el icono de sealizacin hasta un
archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento
del sitio o escriba el URL.
Destino Especfica el marco o la ventana donde se cargar la pgina vinculada.
Alt Especfica el texto alternativo que aparecer en lugar de la imagen.
Mapa y Herramientas de zona interactiva Permiten asignar una etiqueta y crear un mapa
de imagen
Editar Inicia el editor de imgenes que ha especificado en las preferencias de editores
externos y abre la imagen seleccionada.

Edicin de la configuracin de imagen Abre el cuadro de dilogo Vista previa de imagen y
le permite optimizar la imagen.
Editar configuracin de imagen: Edita nuestra imagen para poder cambiar determinadas
propiedades:
Actualizar desde el original: Actualiza la foto segn la original si es modificada.
Recorte Recorta el tamao de una imagen, con lo que se eliminan las reas no deseadas de la
imagen seleccionada.
Volver a muestrear Muestrea de nuevo una imagen cuyo tamao se ha cambiado, lo que
mejora su calidad en su nuevo tamao y forma.
Brillo y contraste Ajusta el brillo y el contraste de una imagen.
Perfilar Ajusta la intensidad de una imagen.
Quick Tag Editor. Utilice el Quick Tag Editor para insertar de forma rpida y editar etiquetas
HTML sin salir de la vista Diseo.
3. Alinear y redimensionar una imagen
Alinear una imagen
Existen atributos que afectan al diseo de la imagen.
La tendencia actual es utilizar CSS para todo lo relativo a diseo de una imagen.
Puedes asignarle un grosor de borde desde los CSS, existe el atributo border.
Puedes seleccionar su alineacin con respecto al texto, en CSS, existe el atributo vertical-align.
Por ltimo las opciones Espacio V y Espacio H te sern tiles para separar la imagen del texto y
as no queden demasiado pegadas a l. Estos campos indican el espacio vertical y horizontal
respectivamente entre la imagen y el texto. En CSS, podemos hacerlo con el margin.
Seleccionamos la imagen, y con el botn derecho del ratn y le damos a Estilos CSS > Nuevo..;
creamos una nueva regla con estas propiedades y pulsamos en aceptar:

Para alinear una imagen simplemente usamos el atributo CSS Float, en el cual podremos usar Left y
Right para establecer una alineacin a la derecha y a la izquierda. Podemos ponerle un margen a
nuestra imagen desde Margin y desde Padding un espacio entre la imagen y su borde en caso de
tenerlo.
Podemos darle un borde a nuestra imagen:
Para aplicar esta regla seleccionamos la foto y la aplicamos desde el panel propiedades:
Tambin podemos realizarlo desde el panel de Propiedades del Diseador de CSS.
Primero creamos el selector en Selectores del Diseador de CSS. Al crear el nombre le tenemos que
poner un punto delante para indicar que estamos creando una clase CSS que luego le aplicaremos a
la imagen.
Despus indicamos las propiedades que queremos cambiar en el men de Propiedades del Diseador
de CSS.
Por ltimo aplicamos la regla creada a la imagen. Para ello nos situamos con el cursor encima de la
imagen o seleccionamos la etiqueta correspondiente a la imagen y con el botn derecho del ratn
Estilos CSS > y aparecer el nombre de la regla que hemos creado, en nuestro caso, alinear.
Redimensionar 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..
Para cambiar el tamao de una imagen 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 seal de prohibido 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.
Cuando cambie el tamao de una imagen en Dreamweaver, puede volver a muestrearla para
adaptarla a sus nuevas dimensiones.
El nuevo muestreo aade o quita pxeles de archivos de imagen JPEG y GIF cuyo tamao se ha
cambiado a fin de que se parezcan lo mximo posible a la imagen original. Al muestrear de nuevo
una imagen, se reduce el tamao del archivo y mejora el rendimiento de la descarga.
Haga clic en el botn Restablecer tamao del inspector de propiedades de imagen.

4. Rollover: una imagen al visualizarse en un navegador
cambia.
Se pueden insertar imgenes de sustitucin en la pgina. Una imagen de sustitucin o rollover es
una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella.
Debe tener dos imgenes para crear una imagen de sustitucin: la imagen principal (la que aparece
al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el puntero sobre
la imagen principal).
Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver cambia el
tamao de la segunda imagen para que se ajuste a las propiedades de la primera.
Las imgenes de sustitucin estn automticamente configuradas para que respondan al evento
onMouseOver. Puede definir una imagen para que responda a otro evento (por ejemplo, un clic del
ratn) o cambiar una imagen de sustitucin.
En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca
la imagen de sustitucin.
En la categora Comn del panel Insertar, haga clic en el men Imgenes y seleccione el icono
Imagen de sustitucin
Establezca las opciones y haga clic en Aceptar.
Nombre de la imagen El nombre de la imagen de sustitucin.
Imagen original La imagen que desea que aparezca al cargarse la pgina. Introduzca la ruta en el
cuadro de texto o haga clic en Examinar y seleccione la imagen.
Imagen de sustitucin La imagen que desea que aparezca cuando el puntero pase por encima de
la imagen original. Introduzca la ruta o haga clic en Examinar para seleccionar la imagen.
Precargar imagen de sustitucin Realiza una carga previa de imgenes en la cach del
navegador para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la
imagen.
Texto alternativo (Opcional) Texto que describa la imagen para los usuarios que utilicen un
navegador de slo texto.
Al hacerse clic, ir a URL El archivo que desea que se abra cuando un usuario haga clic en la
imagen de sustitucin. Introduzca la ruta o haga clic en Examinar y seleccione el archivo.
Elija Archivo > Vista previa en el navegador o presione F12.
En el navegador, desplace el puntero sobre la imagen original para ver la imagen de
sustitucin.
5. Mapas de imagen
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el
usuario hace clic en una zona interactiva, se realiza una accin (se abre un archivo nuevo, por
ejemplo).
Cuando inserte un mapa de imagen, cree una zona interactiva y, a continuacin, defina un vnculo
que se abra cuando el usuario haga clic en la zona interactiva.
En la ventana de documento, seleccione la imagen.
En el inspector de propiedades, haga clic en la flecha de ampliacin, situada en la esquina
inferior derecha, para ver todas las propiedades.
En el cuadro Mapa, introduzca un nombre exclusivo para el mapa de imagen. Si utiliza
mltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.
Para definir las reas de mapas de imagen, siga uno de estos procedimientos:
Seleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona
interactiva circular. Seleccione la herramienta de rectngulo y arrastre el puntero sobre la
imagen para crear una zona interactiva rectangular. Seleccione la herramienta poligonal y
defina una zona interactiva con forma irregular haciendo clic una vez en cada esquina. Haga
clic en la herramienta de flecha para cerrar la forma. Despus de crear la zona interactiva,
aparecer el inspector de propiedades de zonas interactivas.

En el cuadro de texto Vnculo del inspector de propiedades de zonas interactivas, haga clic en
el icono de carpeta para localizar y seleccionar el archivo que desea abrir cuando el usuario
haga clic en la zona interactiva o escriba la ruta.
En el men emergente Destino, seleccione la ventana en la que deber abrirse el archivo o
escriba su nombre.
En el campo Texto alternativo, escriba el texto que desea que aparezca como texto alternativo
en los navegadores que slo admiten texto o en los que se descargan las imgenes
manualmente
Repita los pasos anteriores para definir otras zonas interactivas en el mapa de imagen.
Cuando termine de definir el mapa de imagen, haga clic en un rea en blanco del documento
para cambiar el inspector de propiedades.

6. Marcadores de posicin
Un marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est
listo para su incorporacin a la pgina Web.
Puede establecer el tamao y el color del marcado de posicin y asignarle una etiqueta de texto.
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar
el grfico del marcador de posicin.
Seleccione Insertar > Div > Nueva Regla CSS.
Indicamos si queremos o no si va a pertenecer a una clase o si va a llevar un identificador.

Para Nombre (Opcional), introduzca el texto que desea que aparezca como etiqueta del
marcador de posicin de imagen. Deje el cuadro de texto en blanco si no desea que aparezca
ninguna etiqueta. El nombre debe comenzar con una letra e incluir exclusivamente letras y
nmeros; no se permite la introduccin de espacios ni caracteres ASCII altos.
Para Ancho y Altura (Obligatorios), introduzca un nmero para establecer el tamao de la
imagen en pxeles.
Para Color, Utilice la propiedad Fondo donde podr tener siempre identificado donde se va a
encotrar su imagen.
Para Texto alternativo, introduzca un texto que describa la imagen para los usuarios que
utilicen un navegador de slo texto.
Haga clic en Aceptar. El color, los atributos de tamao y la etiqueta del marcador de posicin
se presentan del modo siguiente:

Antes de publicar el sitio, debe reemplazar todos los marcadores de posicin de imgenes que haya
aadido por archivos de imgenes aptos para la Web, como son los archivos GIF o JPEG y cambiarle
la regla CSS si es necesario.

7. 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
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
8. Prcticas
8.1. Prctica 1: combinacin de texto e imgenes
Vamos a realizar un primer ejercicio en el cual combinamos texto e imgenes, para los cual
seguimos estos pasos:
Creamos en nuestro sitio una carpeta llamada lec_cinco y dentro de esta otra llamada
ejercicio_uno
Descargamos el siguiente archivo ejercicio1 que contiene las fotos que vamos a usar en nuestro
documento y las colocamos en la carpeta ejercicio_uno
Creamos un HTML llamado ejercicio1 en la carpeta ejercicio_uno
Vamos a insertar texto en nuestro documento el cual obtendremos de la siguiente pgina
http://www.lipsum.com/
Damos un estilo a este texto
Insertamos las imgenes junto con el texto
Disponemos nuestras imgenes para que el ejercicio tenga un aspecto similar a este:
8.2. Prctica 2: vamos a crear un mapa de imagen
En este ejercicio vamos a crear un mapa de imagen a partir de una imagen que corresponde al mapa
de Espaa.
Dentro de nuestra carpeta llamada lec_cinco creamos una carpeta llamada ejercicio_dos,
dentro de esta carpeta incluimos los siguientes documentos ejercicio2.
Creamos dentro de la carpeta ejercicio_dos un HTML llamado ejercicio2
Incluimos la imagen del mapa de Espaa:
Creamos tres mapas de imagen correspondientes a las comunidades de Madrid, Galicia y
Andaluca.
Vamos a vincular cada uno de ellos con una ventana PopUp (ventana emergente), para lo cual
seleccionamos el mapa creado de Andaluca y vamos a ventana comportamientos

Pulsamos en el ms y seleccionamos abrir ventana del navegador y seleccionamos el HTML
correspondiente a cada comunidad y le damos la siguiente medida
Al cerrar la ventana hemos de asegurarnos que pone onClicK, de no ser as pulsamos sobre lo
que ponga y seleccionamos onClik

Las propiedades de la zona interactiva han de ser estas
Guardamos nuestro HTML como ejercicio2
8.3. Prctica 3: crear un men rollover
En el siguiente ejercicio vamos a crear un men rollover para lo cual seguimos estos pasos:
Dentro de nuestra carpeta llamada lec_cinco creamos una carpeta llamada ejercicio_tres,
dentro de esta carpeta incluimos los siguientes documentos ejercicio3.
Creamos dentro de la carpeta ejercicio_dos un HTML llamado ejercicio3
Hemos de crear un men de sustitucin de tres botones a partir de las imgenes que hemos
descargado
El men ha de ser similar a este:

Guardamos nuestro ejercicio como ejercicio3
Recuerda
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se
utilizan tres formatos de archivo grfico: GIF, JPEG y PNG.
Los archivos GIF utilizan un mximo de 256 colores y son idneos para visualizar imgenes con
tonos no continuos o imgenes con grandes reas de color homogneo, como barras de
navegacin, botones, iconos, logotipos u otras imgenes con colores y tonos uniformes.
El inspector de propiedades de imagen permite establecer las propiedades de una imagen.
La tendencia actual es utilizar CSS para todo lo relativo a diseo de una imagen.
Las imgenes de sustitucin estn automticamente configuradas para que respondan al
evento onMouseOver.
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas.
Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo de
Photoshop (.psd).
Autoevaluacin
1. Qu formatos de imagen son los ms usados en Internet?
PSD, JPEG
GIF, JPEG y PNG.
HTML
2. Al insertar una imagen en un documento de Dreamweaver dnde debe estar

la imagen?
En el sitio actual
En el servidor
3. Desde las propiedades de la imagen Podemos cambiar su tamao?
Si
No
Se cambia desde las propiedades generales
4. Puede alinear una imagen con:

El texto
Con otra imagen
Ambas respuestas son correctas
5. Cmo se llama la imagen que cambia cuando el puntero pasa sobre ella?
Enlace
Rollover
Botn
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019451] Tablas
1. Tablas: Explica la forma de distribuir o colocar los elementos

en las pginas Web con el programa Macromedia
Dreamweaver: la utilizacin de capas, tablas y la utilizacin del
modo de diseo, asignacin del formato, incluir el contenido,
etc.
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 imposibles 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.
Para maquetar nuestras pginas, lo recomendado es emplear 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.
A la hora de dar formato a tablas en la vista Diseo, puede definir propiedades que se apliquen a
toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una
propiedad como, por ejemplo, el color de fondo o la alineacin, para toda la tabla y otro valor para
INESEM
1 / 30
[UDI019451] Tablas
celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene
prioridad sobre el formato de tabla.
El orden de prioridad en el formato de tabla es el siguiente:
Celdas
Filas
Tabla
Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuacin, establece el
color de fondo de toda la tabla como amarillo, la celda azul no cambiar a amarillo, ya que el
formato de celda tiene prioridad sobre el formato de tabla.
INESEM
2 / 30
[UDI019451] Tablas
2. Insertar tablas
Utilice el panel Insertar o el men Insertar para crear una tabla. A continuacin, aada texto e
imgenes a las celdas de una tabla tal como lo hara fuera de una tabla.
Tambin puedes situar el punto de insercin donde desee que aparezca la tabla y pinch sobre el
icono de tabla en la barra comn.
A continuacin nos aparecer la siguiente pantalla:
INESEM
3 / 30
[UDI019451] Tablas
Filas Determina el nmero de filas de la tabla.
Columnas Determina el nmero de columnas de la tabla.
Ancho de tabla Especfica el ancho de la tabla en pxeles o como porcentaje del ancho de la
ventana del navegador.
Grosor del borde Especfica el ancho en pxeles de los bordes de la tabla.
Espacio entre celdas Determina el nmero de pxeles entre celdas de tabla contiguas.
Si no se especifican los valores de grosor del borde o espaciado y relleno de celda, la mayora
de los navegadores mostrar el grosor del borde y el relleno de celda configurado en 1 y el del
espaciado de celda configurado en 2. Para garantizar que los navegadores muestren la tabla
sin borde, relleno ni espaciado, establezca Relleno celda y Espacio celdas con el valor 0.
Relleno de celda Especfica el nmero de pxeles entre el borde y el contenido de una celda.
Ninguno No permite encabezados de columna o de fila para la tabla.
Izquierda Convierte la primera columna de la tabla en una columna para encabezados. Esto le
permite introducir un encabezado para cada fila de la tabla.
Superior Convierte la primera fila de la tabla en una fila para encabezados, lo que le permite
introducir un encabezado para cada columna de la tabla.
Ambos Le permite introducir encabezados de columna y de fila en la tabla.
Texto Proporciona un ttulo de tabla que aparece fuera de la misma.
Alinear texto Especifica el lugar en el que el texto de la tabla aparecer en relacin con la
tabla.
Resumen Ofrece una descripcin de la tabla. Los lectores de pantalla leen el texto del
resumen pero dicho texto no aparece en el navegador del usuario.
INESEM
4 / 30
[UDI019451] Tablas
3. Seleccin de elementos de la tabla
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.
Puede seleccionar toda una tabla, fila o columna al mismo tiempo. Tambin puede seleccionar una o
varias celdas individuales.
Cuando se desplaza el puntero sobre una tabla, fila, columna o celda, Dreamweaver resalta todas las
celdas de esa seleccin para que sepa qu celdas se seleccionarn. Esto puede resultar til si utiliza
tablas sin bordes, celdas que ocupan varias columnas o filas, o bien tablas anidadas.
Seleccin de una tabla entera
INESEM
5 / 30
[UDI019451] Tablas
Haga clic en la esquina superior izquierda de la tabla, en cualquier punto del borde derecho o
inferior de la tabla o en el borde de una fila o de una columna.
Cuando pueda seleccionar la tabla, el puntero se convertir en el icono de cuadrcula de tabla
(a menos que haga clic en el borde de una fila o columna).
Haga clic en una celda de la tabla y, a continuacin, seleccione la etiqueta en el selector de
etiquetas situado en la esquina inferior izquierda de la ventana de documento.
Haga clic en una celda de la tabla y, a continuacin, seleccione Modificar > Tabla >
Seleccionar tabla.
Seleccin de una o varias filas y columnas
Site el puntero en el borde izquierdo de una fila o en el borde superior de una columna.
Cuando el puntero se convierta en una flecha de seleccin, haga clic para seleccionar una fila o
columna, o arrastre para seleccionar varias filas o columnas.
Seleccin de una sola columna
Haga clic en la columna.
INESEM
6 / 30
[UDI019451] Tablas
Haga clic en el men de encabezado de columna y seleccione Seleccionar columna.
Seleccin de una sola celda
Haga clic en la celda y, a continuacin, seleccione la etiqueta en el selector de etiquetas
situado en la esquina inferior izquierda de la ventana de documento.
Presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en la celda.
Haga clic en la celda y seleccione Edicin > Seleccionar todo.
Seleccin de una lnea o un bloque rectangular de celdas
Arrastre de una celda a otra.
Haga clic en una celda, presione Control y haga clic (Windows) o presione Comando y haga clic
(Macintosh) en la misma celda para seleccionarla y, a continuacin, presione Mays y haga clic
en otra celda.
INESEM
7 / 30
[UDI019451] Tablas
Todas las celdas de la regin lineal o rectangular definida por las dos celdas quedarn
seleccionadas.
Seleccin de celdas no adyacentes
Presione Control (Windows) o Comando (Macintosh) mientras hace clic en las celdas, filas o
columnas que desea seleccionar.
Las celdas, filas o columnas que no estn todava seleccionadas se aadirn a la seleccin. Las que
ya lo estn, se eliminarn de la seleccin.
INESEM
8 / 30
[UDI019451] Tablas
4. Propiedades de la tabla: inspector de propiedades
Las propiedades de la tabla se especifican a travs de su inspector de propiedades
Seleccione una tabla.
En el inspector de propiedades (Ventana > Propiedades), cambie las propiedades que sean
necesarias.
Filas y Cols Nmero de filas y columnas que tendr la tabla.
An El ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador.
Normalmente no es preciso especificar el alto de una tabla.
CellPad Determina el nmero de pxeles entre el contenido de una celda y los lmites de la misma.
Cell Space Nmero de pxeles entre celdas de tabla contiguas.
Aling Determina dnde aparecer la tabla en relacin con otros elementos del mismo prrafo, como
por ejemplo texto o imgenes.
Izquierda alinea la tabla a la izquierda de los dems elementos (por lo que el texto del mismo prrafo
se ajusta alrededor de la tabla a la derecha); Derecha alinea la tabla a la derecha de los dems
elementos (con el texto ajustado alrededor a la izquierda); y Centro centra la tabla (con el texto
encima y/o debajo de la tabla). Predeterminado indica que el navegador debe utilizar su alineacin
predeterminada.
Border Especfica el ancho en pxeles de los bordes de la tabla.
Si no se especifican los valores de borde o espaciado y relleno de celda, la mayora de los
navegadores mostrar la tabla con los bordes y el relleno de celda configurado en 1 y el espaciado
de celda configurado en 2. Para garantizar que los navegadores muestren la tabla sin relleno ni
espaciado, establezca Borde con el valor 0 y Relleno celda y Espacio celdas con el valor 0. Para ver
los lmites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes
de tabla.
Class Establece una clase CSS en la tabla.
Borrar ancho de columna y Borrar alto de fila eliminan todos los valores especificados para el ancho
INESEM
9 / 30
[UDI019451] Tablas
de columna y alto de fila de la tabla.
Convertir ancho de tabla a pxeles y Convertir altos de tabla a pxeles establecen el ancho o el
alto de todas las columnas de la tabla en su ancho actual en pxeles (tambin establecen el ancho de
toda la tabla en su ancho actual en pxeles).
INESEM
10 / 30
[UDI019451] Tablas
5. Propiedades de las celdas
Puede utilizar el inspector de etiquetas para editar celdas y filas de una tabla.
Seleccione la columna o fila.
En el inspector de propiedades (Ventana > Propiedades), establezca las siguientes opciones:
Horiz Especfica la alineacin horizontal del contenido de una celda, fila o columna. Puede
alinear el contenido a la izquierda, a la derecha o al centro de la celda, o bien especificar que
se utilice la alineacin predeterminada del navegador (generalmente a la izquierda para celdas
normales y al centro para celdas de encabezado).
Vert Especfica la alineacin vertical del contenido de una celda, fila o columna. Puede alinear
el contenido con la parte superior, media, inferior o con la lnea de base de la celda, o
especificar que se utilice la alineacin predeterminada del navegador (generalmente al medio).
An (Ancho) y Al (Alto) Ancho y alto de las celdas seleccionadas en pxeles o como porcentaje
del ancho o alto total de la tabla. Para especificar un porcentaje, introduzca el smbolo de
porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto apropiado en
funcin del contenido de la celda, y el ancho y alto del resto de las columnas y filas, deje el
campo en blanco (el valor predeterminado).
De forma predeterminada, un navegador selecciona el alto de fila y el ancho de columna de
manera que pueda contener la imagen ms ancha o la lnea ms larga en una columna. Por esta
razn, algunas veces el ancho de una columna resulta mucho ms grande que el de otras
columnas de la tabla cuando se le aade contenido.
Fondo El color de fondo de una celda, columna o fila elegido mediante el selector de color.
Combinar celdas Combina las celdas, filas o columnas seleccionadas para crear una sola
celda. Slo pueden combinarse celdas que constituyan una bloque rectangular o lineal.
Dividir celda Divide una celda para crear dos o ms celdas. Slo puede dividirse una celda
cada vez, por lo que este botn estar desactivado al seleccionar ms de una celda.
No aj. Impide el ajuste de lnea, mantenindose todo el texto de una celda en una sola lnea.
INESEM
11 / 30
[UDI019451] Tablas
Cuando la opcin No aj. est activada, las celdas se adaptarn para incluir todos los datos a
medida que se introducen o pegan en una celda. (Habitualmente, las celdas se expanden
horizontalmente para incluir la palabra ms larga o la imagen ms grande en la celda y, a
continuacin, se expanden verticalmente cuando es necesario adaptarse a otros contenidos.)
INESEM
12 / 30
[UDI019451] Tablas
6. Tamao de tablas: Cambio del tamao de tablas, columnas y

filas
Cambio del tamao de tablas
Puede cambiar el tamao de una tabla completa o de filas y columnas individuales. Al cambiar el
tamao de toda la tabla, el tamao de todas sus celdas cambiar proporcionalmente.
Puede cambiar el tamao de una tabla arrastrando uno de sus manejadores de seleccin.
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 de An (anchura)
y Al (altura). Normalmente slo se especifica la anchura, no la altura
Cambio del tamao de columnas y filas
Puede cambiar el ancho de una columna o el alto de una fila en el inspector de propiedades o
arrastrando los bordes de la columna o fila. Si encuentra problemas para cambiar el tamao, borre
el ancho de la columna y el alto de la fila y empiece de nuevo.
INESEM
13 / 30
[UDI019451] Tablas
Eliminar aadir filas y columnas
Adicin de una sola fila o columna
Haga clic en el men del encabezado de columna y, a continuacin, seleccione Insertar columna
izquierda o Insertar columna derecha.
Adicin de varias filas o columnas
Haga clic en una celda.
Seleccione Modificar > Tabla > Insertar filas o columnas, complete el cuadro de dilogo y haga
clic en Aceptar.
INESEM
14 / 30
[UDI019451] Tablas
Insertar Indica si deben insertarse filas o columnas.
Nmero de filas o Nmero de columnas El nmero de filas o columnas que deben insertarse.
Dnde Especifica si las nuevas filas o columnas deben aparecer antes o despus de la fila o columna
de la celda seleccionada.
Eliminacin de una fila o columna
Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuacin,
seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
Seleccione una fila o columna completa y, a continuacin, seleccione Edicin > Borrar o
presione Supr.
INESEM
15 / 30
[UDI019451] Tablas
7. Copiar, pegar, combinar y anidar tablas
Copiar y pegar celdas
Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando el
formato de las celdas.
Las celdas se pueden pegar en el punto de insercin o en el lugar de una seleccin en una tabla
existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible
con la estructura de la tabla o la seleccin de la tabla en la que se van a pegar las celdas.
Seleccione una o varias celdas en una lnea contigua y en forma de un rectngulo.
En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden cortar
o copiar.
En la siguiente ilustracin, la seleccin no es un rectngulo de celdas, por lo que stas no se pueden
cortar ni copiar.
Elija dnde desea pegar las celdas:
Para reemplazar las celdas actuales por las celdas que desea pegar, seleccione un grupo de celdas
que tengan el mismo diseo que las del portapapeles. (Por ejemplo, si ha copiado o cortado un
bloque de celdas de 3 x 2, podr reemplazarlo por otro bloque de celdas de 3 x 2.)
INESEM
16 / 30
[UDI019451] Tablas
Seleccione Edicin > Pegar.
Combinar celdas
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 de como resultado un rectngulo. No
podemos combinarlas para formar una "L"
Para dividir una celda hay que pulsar sobre el botn
Del inspector de propiedades, o sobre la opcin Dividir celda de la opcin Tabla.
Anidar tablas
Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una
tabla anidada como lo hara con cualquier otra tabla; no obstante, su ancho estar limitado por el
ancho de la celda en la que aparece.
INESEM
17 / 30
[UDI019451] Tablas
Haga clic en una celda de la tabla.
Seleccione Insertar > Tabla, establezca las opciones de Insertar tabla y haga clic en Aceptar.
INESEM
18 / 30
[UDI019451] Tablas
8. Formato CSS de tablas.
Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.
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 , 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.
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.
Podemos aplicar la mayora de propiedades que ya hemos empleado a las tablas, filas y columnas:
fuente, tamao, color, imagen de fondo.
Para crear un estilo a la tabla la seleccionamos la tabla y con el botn derecho del ratn le damos a
Estilos CSS > Nuevo:
INESEM
19 / 30
[UDI019451] Tablas
En la siguiente ventana, creamos un estilo de clase que llamamos mitabla
Definimos las propiedades del estilo, solo la categora tipo, donde seleccionamos una tipografa, un
color y un tamao:
INESEM
20 / 30
[UDI019451] Tablas
Ponemos un color de fondo para la tabla y pulsamos aceptar.
Para aplicar el estilo a la tabla, teniendo esta seleccionada vamos al panel propiedades y
seleccionamos nuestra regla:
Mas adelante veremos los estilos ms a fondo.
Desde el Diseador de CSS creamos el selector.
Definimos las propiedades del estilo:
Aplicamos el estilo desde el botn derecho del ratn Estilos CSS > mitabla, o desde el panel de
propiedades.
INESEM
21 / 30
[UDI019451] Tablas
INESEM
22 / 30
[UDI019451] Tablas
9. Prcticas
9.1. Prctica 1: Creacin de tablas.
Creamos una carpeta llamada lec_seis y dentro de este un documento llamado ejercicio 1.
A modo de ejemplo vamos a insertar una tabla con 3 filas y 6 columnas y que ocupe el 80 % del
ancho, un borde de 2 pxeles y un relleno de celda de 5 pxeles:
Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado, encontraremos una
informacin similar a sta:
Son las etiquetas del lenguaje HTML que veremos ms adelante. De momento, indicar que la
etiqueta hace referencia a todo el documento que se visualiza con el navegador. La etiqueta
hace referencia a la tabla entera, la etiqueta a la fila en la que est el cursor y la etiqueta a la celda.
Observa que la ltima etiqueta est en negrita. Eso quiere decir que es la celda la que est
seleccionada.
Por debajo de esta barra de estado nos encontramos con el panel del Inspector de Propiedades que
harn referencia a la celda en la que, en ese momento, est el cursor.
Desde ese panel podramos cambiar las propiedades de la celda en cuestin.
Si, desde la Barra de Estado pulsamos la etiqueta
, se seleccionar toda la tabla.

Si ahora vemos las propiedades, stas sern las propiedades de la tabla y, desde all, podremos
INESEM
23 / 30
[UDI019451] Tablas
cambiar las propiedades de la tabla y su configuracin.
Podemos modificar el nmero de Filas en Filas, el nmero de columnas en Cols, la anchura en An, la
altura en Al, el espacio entre los bordes y el contenido en Rell.celda, el espacio entre las celdas en
Esp.celda, la alineacin en Alinear, el grosor del borde en Borde. De momento, ignoraremos los seis
iconos siguientes:
Vamos a realizar algn cambio en la tabla:
Hemos aadido una fila, alineado al centro, incrementado el grosor del borde a 5 pxeles,
establecido un color de fondo . El resultado es ste:
A partir de esta tabla, vamos a realizar varios cambios sobre ella para que nos quede algo parecido s
esto:
Guardamos este documento como ejercicio1.
9.2. Prctica 2: Tablas.
Vamos a crear un documento HTML, para lo cual nos descargamos la siguiente carpeta que contiene
el texto e imgenes que vamos a utilizar, ejercicio2, situamos esta carpeta descomprimida dentro de
INESEM
24 / 30
[UDI019451] Tablas
la carpeta lec_seis, dentro de esta carpeta creamos un documentos llamado index.html, dicho
documento ha de tener un aspecto similar a este:
Para lo cual seguimos estos pasos:
Ponemos las siguientes propiedades de pgina:
INESEM
25 / 30
[UDI019451] Tablas
Creamos una tabla centrada de dos filas y dos columnas y le incluimos el texto que hay en el
documentos texto.docx
Creamos dos vnculos, nosotros que estar vinculado al documento index y habitaciones
vinculado a un HTML llamado habitaciones, que crearemos en el siguiente ejercicio.
9.3. Prctica 3: creacin de un documento HTML
Vamos a crear un documento HTML, para lo cual nos descargamos la siguiente carpeta que contiene
las imgenes que vamos a utilizar, ejercicio3, situamos esta carpeta descomprimida dentro de la
carpeta lec_seis, dentro de esta carpeta creamos un documentos llamado habitaciones.html, dicho
documento ha de tener un aspecto similar a este:
Para lo cual seguimos estos pasos:
Ponemos las siguientes propiedades de pgina:
INESEM
26 / 30
[UDI019451] Tablas
Creamos una tabla con las siguientes propiedades y en ella incluimos imgenes y texto:
Creamos dos vnculos, nosotros que estar vinculado al documento index y habitaciones
vinculado al HTML que acabamos de crear llamado habitaciones.
INESEM
27 / 30
[UDI019451] Tablas
Recuerda
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 imposibles de realizar.
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.
Las propiedades de la tabla se especifican a travs de su inspector de propiedades
Puede cambiar el tamao de una tabla completa o de filas y columnas individuales. Al cambiar
el tamao de toda la tabla, el tamao de todas sus celdas cambiar proporcionalmente.
Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando
el formato de las celdas.
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.
Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.
INESEM
28 / 30
[UDI019451] Tablas
Autoevaluacin
1. Cmo podemos distribuir el texto en columnas en Dreamweaver?
Con las filas
Con las celdas
Con las tablas
2. Podemos darle borde a una tabla?
Solo a las celdas
No
Si
3. Podemos seleccionar celdas no adyacentes?
Si
Solo columnas
Solo filas
4. Desde dnde cambiamos las propiedades de una tabla?
INESEM
29 / 30
[UDI019451] Tablas
Desde el inspector de propiedades
Desde las preferencias
No se pueden cambiar
5. Podemos convertir ancho de tabla a pxeles?
No
Si
Depende de la tabla
INESEM
30 / 30
[UDI019452] Capas y comportamiento
1. Las capas: Explica que las capas por lo general se definen

con las etiquetas div y span y pueden contener cualquier
objeto, por ejemplo un formulario, un fragmento de texto o un
plug-in.
Las capas por lo general se definen con las etiquetas y pueden contener cualquier objeto, por
ejemplo un formulario, un fragmento de texto o un plug-in. Las capas proporcionan un control muy
potente sobre la posicin de estos objetos.
Las capas pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido
HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades
de diseo.
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.
Cuando convertimos una capa en un elemento con posicin absoluta (elemento PA ), se muestra as
en Dreamweaver:
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y
todos los elementos que puede contener un documento HTML.
La capa no solo aparece representada por el recuadro anterior, sino que tambin aparece la imagen
en el documento, cuando est abierto en Dreamweaver. Este icono sirve para seleccionar la capa al
pulsar sobre l, y al eliminarlo se elimina tambin la capa.
INESEM
1 / 25
Si no est familiarizado con la utilizacin de etiquetas div y de hojas de estilos en cascada (CSS)
para crear pginas Web, puede crear un diseo CSS basado en uno de los diseos predefinidos que
se suministran con Dreamweaver
Acerca de los elementos PA en Dreamweaver
Un elemento PA (elemento con posicin absoluta) es un elemento de pgina HTML (en concreto, una
etiqueta div o cualquier otra etiqueta) que tiene una posicin absoluta asignada.
Los elementos PA pueden contener texto, imgenes u otros contenidos que se pueden situar en el
cuerpo de un documento HTML.
Con Dreamweaver, puede emplear elementos PA para disear la pgina. Puede colocar elementos
PA delante o detrs de otros elementos PA, ocultar algunos elementos PA mientras muestra otros y
mover elementos PA por la pantalla.
Puede colocar una imagen de fondo en un elemento PA y, a continuacin, insertar un segundo
elemento PA, con texto y un fondo transparente, delante del primero.
Los elementos PA suelen ser etiquetas div con posicin absoluta. (Estos son los tipos de elementos
PA que Dreamweaver inserta de manera predeterminada.) Recuerde, no obstante, que puede
clasificar cualquier elemento HTML (por ejemplo, una imagen) como elemento PA asignndole una
posicin absoluta.
INESEM
2 / 25
2. Posiciones de las cajas: Esttica, Relativa, absoluta y fija.
Esttica
La posicin esttica ("static") es la posicin que tienen por defecto todas las cajas en HTML.
Significa que su colocacin en la pantalla ser la que indique el flujo del documento, es decir, donde
le corresponda estar en el momento que aparece en el cdigo, que en general vendr determinado
por los elementos que le preceden.
Si ninguna otra propiedad altera este estado (como los mrgenes, por ejemplo), la caja ocupar
sencillamente el lugar que le corresponde en el flujo del cdigo.
Relativa
La posicin relativa de una caja, que se asigna en la hoja de estilo mediante la propiedad "position:
relative", nos permitir entre otras cosas desplazar esa caja con arreglo a cuatro parmetros: top,
right, bottom y left (arriba, derecha, abajo e izquierda).
Estos desplazamientos son referentes a la posicin natural de la caja en el flujo del documento, y
admiten tanto valores positivos como negativos.
INESEM
3 / 25
Absoluta
La segunda manera de colocar cosas a nuestro antojo en la pgina sera mediante la posicin
absoluta (position: absolute).
La posicin absoluta tambin es colocada con arreglo a los cuatro parmetros descritos antes
(arriba, derecha, abajo e izquierda), pero en este caso no sern desplazamientos con respecto a su
posicin natural, sino a las cuatro coordenadas de la pgina.
INESEM
4 / 25
Fija
La posicin fija (position: fixed) sirve para colocar una caja en la ventana y que no se mueva de su
posicin al hacer scroll, al estilo de los "frames".
Funciona como la posicin absoluta, en cuanto a que se indica su colocacin mediante las
coordenadas top, right, bottom y left, pero a diferencia de la absoluta, siempre sus coordenadas
correspondern al rea de visin (la pantalla completa), nunca a una caja que la contenga.
INESEM
5 / 25
3. Insertar capas
En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la
etiqueta Div.
Las capas pueden insertarse en una pgina a travs del men Insertar > Div.
En la categora Comn o Estructura del panel Insertar, haga clic en el botn Insertar > Div
Defina cualquiera de las opciones siguientes:
Insertar Permite seleccionar la ubicacin de la etiqueta Div y el nombre de la etiqueta si no es
una etiqueta nueva. Clase Muestra el estilo de la clase aplicado actualmente a la etiqueta. Si
ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecern en la lista. Utilice
este men emergente para seleccionar el estilo que desea aplicar a la etiqueta.
ID Permite modificar el nombre utilizado para identificar la etiqueta div. Nueva regla CSS
Abre el cuadro de dilogo Nueva regla CSS.
Al aplicarle una Nueva regla CSS, podemos aplicarle las propiedades de capa que queramos en
la parte de Posicin donde le indicamos si queremos que nuestra capa tenga una posicin
absoluta, relativa, fija o esttica, adems podemos indicarle la posicin exacta en la pgina a
travs de Placement.
INESEM
6 / 25
Haga clic en Aceptar. La etiqueta div tendr el aspecto de un cuadro en el documento con texto
de marcador de posicin. Al desplazar el puntero sobre el borde del cuadro, Dreamweaver lo
resaltar.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla
primero.
Para seleccionar una capa puede pulsarse sobre el icono correspondiente (slo si la posicin es
absoluta), 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.
INESEM
7 / 25
Tambin puede seleccionarse pulsando con el ratn en el lugar donde se encuentra la capa.
Al pulsar sobre la capa nos aparecer a la derecha, en el Diseador de CSS las propiedades de
nuestra capa
INESEM
8 / 25
4. Propiedades de las capas: inspector de propiedades
Cuando selecciona un elemento Div, el inspector de propiedades muestra las propiedades del
elemento.
Elemento CSS-P Especifica un ID para el elemento Div seleccionado.
Utilice slo caracteres alfanumricos; no utilice caracteres especiales como espacios, guiones,
barras ni puntos. Cada elemento Div debe tener un ID exclusivo.
Izq. y Sup. (Izquierda y superior) Especifican la posicin de la esquina superior izquierda del
elemento Div con respecto a la esquina superior izquierda de la pgina o del elemento Div padre, si
el elemento Div es anidado.
An (Ancho) y Al (Alto) Especifican el ancho y alto del elemento Div.
ndice Z Determina el ndice z, u orden de apilamiento, del elemento Div. Este valor tambin puede
cambiarse a travs del panel Elementos.
Vis. Especifica si el elemento Div es visible inicialmente o no. Elija entre las opciones siguientes:
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).
Im. fondo Especifica una imagen de fondo para el elemento Div.
Haga clic en el icono de carpeta para localizar y seleccionar un archivo de imagen.
Col. fondo Especifica un color de fondo para el elemento Div.
Deje esta opcin en blanco para especificar un fondo transparente.
Clase Especfica la clase CSS utilizada para aplicar estilo al elemento Div.
Desb. Controla cmo aparecen los elementos Div en un navegador cuando el contenido desborda el
tamao especificado del elemento Div.
INESEM
9 / 25
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).
Rec Define el rea visible (recorte) de un elemento Div.
INESEM
10 / 25
5. Panel Diseador de CSS
En el Panel Diseador de CSS (Ventana > Diseador de CSS) le permite administrar los elementos
Divs del documento. Use el panel Diseador de CSS para evitar solapamientos, cambiar la visibilidad
de los elementos, anidar o apilar elementos Divs y seleccionar uno o varios elementos Divs.
Para cambiar el orden en el que aparecen los elementos Divs, puede hacerlo a travs del Diseador
de CSS, del inspector de propiedades o a travs del icono de capa en el panel de diseo y arrastrarlo
al punto donde queramos que aparezca la capa.
Seleccin de elementos Divs
INESEM
11 / 25
Haga clic en un manejador de seleccin de elemento Div.
Si el manejador de seleccin no est visible, haga clic en cualquier punto dentro del elemento
Div para hacerlo visible
Haga clic en un borde del elemento Div.
En el panel Diseador de CSS, en Selectores se encuentra la clase del elemento Div.
En la ventana Documento, presione Mays y haga clic en la parte interior o el borde de dos o
ms elementos Div.
Cambio del orden de apilamiento de elementos Divs
Utilice el inspector de propiedades o el panel Elementos Divs para cambiar el orden de apilamiento
de elementos Divs.
El elemento Div que figura en la parte superior de la lista del panel Elementos Divs es el primero en
el orden de apilamiento y aparece delante de los otros elementos Divs.
En el cdigo HTML, el orden de apilamiento o el ndice z de los elementos Divs determina el orden
en que se dibujan en un navegador.
Cuanto mayor sea el ndice z de un elemento Div, mayor ser el lugar que ocupa el elemento en el
INESEM
12 / 25
orden de apilamiento. Puede cambiar el ndice z para cada elemento mediante el inspector de
propiedades y el Diseador de CSS.
Seleccione a travs del icono de capa el Elemento Div al que le quiere cambiar el ndice Z y
cmbielo a travs del inspector de propiedades.
Arrastre un elemento hacia arriba o hacia abajo hasta el nivel deseado dentro del orden de
apilamiento.
Visualizacin y ocultacin de elementos Divs.
Seleccione la capa, en Propiedades el elemento Vis. Podemos modificarlo segn la visibilidad
que queramos.
INESEM
13 / 25
6. Capas prediseadas
Al crear un nuevo documento, habrs visto que aparece la columna Diseo:
Estos diseos, que podemos elegir, estn basados en capas.
Lo que harn ser dividir nuestra pgina en las filas y columnas que elijamos, con anchos fijos o
variables.
El nombre es bastante descriptivo, y adems estn acompaadas de grficos que representan el
diseo, por lo que no necesitan ms explicacin.
Una vez seleccionado un diseo, slo tendremos que reemplazar el texto de ejemplo por el contenido
INESEM
14 / 25
que queramos
INESEM
15 / 25
7. Comportamientos: cdigoJavaScript.
Los comportamientos de Adobe Dreamweaver CC colocan cdigo JavaScript en los documentos para
que los visitantes puedan cambiar una pgina Web de diversas formas o iniciar determinadas tareas.
Un comportamiento es una combinacin de un evento y una accin que desencadena ese evento.
En el panel Comportamientos, un comportamiento se aade a una pgina especificando en primer
lugar una accin y, a continuacin, el evento que desencadena esa accin.
Los eventos son mensajes generados por los navegadores que indican que un visitante de la pgina
ha hecho algo
El panel Comportamientos (Ventana > Comportamientos) sirve para adjuntar comportamientos a los
elementos de una pgina (ms concretamente, a las etiquetas) y para modificar parmetros de otros
comportamientos adjuntados anteriormente.
Utilizamos el inspector de comportamientos que se encuentra en Ventana/ comportamientos para
INESEM
16 / 25
asignar comportamientos a los objetos y para modificar parmetros de comportamientos
previamente asignados.
Los comportamientos se encuentran listados alfabticamente por evento.
INESEM
17 / 25
8. Aplicar un comportamiento
Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta ) o a vnculos,
imgenes, elementos de formulario o cualquier otro elemento HTML.
El navegador de destino que elija determina los eventos compatibles con un elemento determinado.
Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en el orden en
el que se enumeran en la columna Acciones del panel Comportamientos, pero puede cambiar dicho
orden.
Seleccione un elemento de la pgina, como una imagen o un vnculo.
Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta en el selector
de etiquetas, situado en la esquina inferior izquierda de la ventana de documento.
Seleccione Ventana > Comportamientos.
Haga clic en el botn ms (+) y seleccione una accin en el men Aadir comportamiento.
No se pueden seleccionar las acciones que aparecen atenuadas en el men. Pueden mostrarse
atenuadas porque no exista un objeto necesario en el documento actual. Por ejemplo, la accin
Controlar Shockwave o SWF aparece atenuada si el documento no contiene ningn archivo
Shockwave o SWF.
Cuando se selecciona una accin, aparece un cuadro de dilogo que muestra parmetros e
INESEM
18 / 25
instrucciones para dicha accin.
Introduzca los parmetros de la accin y haga clic en Aceptar.
Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores modernos.
Algunas acciones no funcionan en los navegadores antiguos, pero no provocan errores.
El evento predeterminado que desencadena la accin aparece en la columna Eventos. Si no es
ste el evento de desencadenamiento que desea, seleccione otro en el men emergente
Eventos. (Para abrir el men Eventos, seleccione un evento o una accin en el panel
Comportamientos y haga clic en la flecha negra que seala hacia abajo y que aparece entre el
nombre del evento y el nombre de la accin.)
INESEM
19 / 25
9. Prcticas
9.1. Prctica 1: Creacin de capas
Creamos una carpeta llamada lec_siete y dentro de este un documento llamado ejercicio1.HTML
Vamos a crear con las capas un documento similar a este:
Para lo cual en nuestro documento ejercicio1 insertamos la siguiente imagen de rastreo tracing, lo
cual lo hacemos desde las propiedades de la pgina:
INESEM
20 / 25
Creamos cada capa correspondiente a cada nombre de la habitacin:
El texto que escribimos lo centramos desde el panel propiedades, como vemos en el panel estilo se
crea un estilo para cada etiqueta que ya veremos ms a fondo.
9.2. Prctica 2: Propiedades
Creamos dentro de la carpeta llamada lec_siete un documento llamado ejercicio2.HTML
Ha de tener un aspecto similar a este:
Para lo cual creamos las capas necesarias:
INESEM
21 / 25
Y le incluimos el siguiente texto y las siguientes imgenes del cd.
Guardamos este documento para usarlo en el siguiente ejercicio.
INESEM
22 / 25
Recuerda
Las capas por lo general se definen con las etiquetas
y y pueden contener cualquier objeto, por ejemplo un formulario, un fragmento de texto o un
plug-in. Las capas proporcionan un control muy potente sobre la posicin de estos objetos
Los elementos PA pueden contener texto, imgenes u otros contenidos que se pueden
situar en el cuerpo de un documento HTML.
La segunda manera de colocar cosas a nuestro antojo en la pgina sera mediante la
posicin absoluta (position: absolute).
En la ventana de documento, site el punto de insercin en el lugar donde desea que
aparezca la etiqueta div.
Los elementos Div se muestran como una lista de nombres siguiendo un orden de ndice
z; de forma predeterminada, el primer elemento creado (con un ndice z de 1) aparece al
final de la lista, mientras que el elemento Div ms reciente aparece al principio.
Los comportamientos de Adobe Dreamweaver CC colocan cdigo JavaScript en los
documentos para que los visitantes puedan cambiar una pgina Web de diversas formas o
iniciar determinadas tareas.
INESEM
23 / 25
Autoevaluacin
1. Pueden contener un formulario las capas?
Si
No
Depende del formato
2. Un elemento PA:
Una etiqueta sin posicin
Una etiqueta que tiene una posicin relativa
Una etiqueta que tiene una posicin absoluta
3. Cuando existen varias capas en un mismo documento, es preferible

seleccionarlas a travs de:
El Diseador de CSS
El men capas
El panel propiedades
4. Podemos cambiar la posicin de una capa desde el panel propiedades?
INESEM
24 / 25
Si
No
En ocasiones
5. Desde dnde podemos cambiar el orden de apilamiento de elementos PA?
No se puede
Desde la ventana capas
El Diseador CSS
INESEM
25 / 25
[UDI019453] Estilos CSS I
1. Hojas de estilo: Reglas CSS. Explica que las hojas de estilos

en cascada (CSS) son un conjunto de reglas de formato que
determinan el aspecto del contenido de una pgina Web. La
utilizacin de estilos CSS para aplicar formato a una pgina
permite separar el contenido de la presentacin.
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el
aspecto del contenido de una pgina Web. La utilizacin de estilos CSS para aplicar formato a una
pgina permite separar el contenido de la presentacin.
El contenido de la pgina (el cdigo HTML) reside en el archivo HTML, mientras que las reglas CSS
que definen la presentacin del cdigo residen en otro archivo (una hoja de estilos externa) o en otra
parte del documento HTML (normalmente, en la seccin head)
La separacin del contenido y la presentacin hace que resulte mucho ms fcil mantener el aspecto
del sitio desde una ubicacin central, ya que no es necesario actualizar las propiedades de las
distintas pginas cuando se desea realizar algn cambio.
La separacin del contenido y la presentacin tambin depura y simplifica el cdigo HTML, lo que
disminuye el tiempo de carga en los navegadores y agiliza la navegacin para personas con
problemas de accesibilidad (por ejemplo, para los usuarios que utilicen lectores de pantalla).
Reglas CSS
Una regla de formato CSS consta de dos partes: el selector y la declaracin.
Selecto r sirve para eso, para seleccionar el elemento que va a obedecer a las caractersticas
determinadas por las declaraciones.
Las declaraciones se componen de una propiedad y el valor que otorgamos a esa propiedad.
Cada declaracin consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por
ejemplo, Helvetica)
El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del
INESEM
1 / 50
texto al que aplica formato (normalmente en una hoja de estilos externa o en la seccin head de un
documento HTML).
Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y, en
el caso de las hojas de estilos externas, la regla puede aplicarse a muchas etiquetas a la vez de
distintas pginas).
De este modo, CSS proporciona una capacidad de actualizacin extremadamente sencilla. Al
actualizar una regla CSS en un lugar, el formato de todos los elementos que usan ese estilo definido
se actualiza automticamente con el nuevo estilo.
En Dreamweaver, pueden definirse los siguientes tipos de estilos:
Los estilos de clase permiten aplicar propiedades a cualquier elemento o elementos de la pgina.
Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como por
ejemplo h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con
la etiqueta h1 se actualiza inmediatamente.
INESEM
2 / 50
Los estilos ID o avanzados redefinen el formato de una determinada combinacin de elementos o
de otros selectores permitidos por el CSS (por ejemplo, el selector td h2 se aplica siempre que
aparece un encabezado h2 dentro de la celda de una tabla).
Los estilos avanzados tambin redefinen el formato de las etiquetas que contienen un atributo id
especfico (por ejemplo, los estilos definidos por #miEstilo se aplican a todas las etiquetas que
contienen el par atributo-valor id="miEstilo").
Las reglas CSS pueden residir en las ubicaciones siguientes:
Hojas de estilos CSS externas Conjuntos de reglas CSS almacenados en un archivo CSS (.css)
independiente externo (no un archivo HTML). Este archivo se asocia a una o varias pginas de un
sitio Web.
Hojas de estilos CSS internas (o incrustadas) Conjuntos de reglas CSS incluidos en una etiqueta
style de la seccin head de un documento HTML.
Estilos en lnea Se definen dentro de instancias especficas de etiquetas en un documento HTML.
(No se recomienda el uso de estilos en lnea.)
INESEM
3 / 50
2. Panel estilos: permite supervisar las reglas y propiedades

CSS que afectan al elemento de pgina seleccionado
El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan al elemento de
pgina seleccionado (modo Actual) o todas las reglas y propiedades que afectan al documento (modo
Todo).
Un botn situado en la parte superior del panel permite cambiar entre estos dos modos. El panel
Estilos CSS tambin le permite modificar propiedades CSS tanto en modo Todo como en modo
Actual.
Seleccione Ventana > Diseador de CSS
INESEM
4 / 50
El panel Diseador de CSS consta de los siguientes subpaneles:
Fuentes Muestra todas las hojas de estilo asociadas al documento. Este panel permite crear un CSS
y adjuntarlo al documento, o bien definir estilos dentro de un documento.
@Medios Muestra una lista de todas las consultas de medios en el panel de Fuentes. Si no
selecciona un CSS especfico, este panel muestra todas las consultas de medios asociadas al
documento.
Selectores Muestra una lista de todos los selectores en el panel Fuentes. Si tambin selecciona una
consulta de medios, este panel limita la lista de selectores de dicha consulta de medios. Si no hay
seleccionado ningn CSS ni ninguna consulta de medios, este panel muestra todos los selectores del
documento.
Cuando se selecciona GLOBAL en el panel de @Medios, se muestran todos los selectores que no se
incluyen en la consulta de medios de origen seleccionado.
Propiedades Muestra las propiedades que puede definir par el selector especificado.
El Diseador de CSS es sensible al contexto, es decir, se pueden ver los selectores y sus propiedades
asociadas a un determinado contexto de la pgina. Asimismo, cuando se seleccione un selector, el
origen y las consultas de los medios asociados se resaltarn en los paneles correspondientes.
INESEM
5 / 50
Para ver todos los selectores, puede elegir en Toda las fuentes en el panel de Fuentes.
INESEM
6 / 50
3. Crear y adjuntar hojas de estilo
1. En el panel Fuentes del Diseador de CSS, haga clic en
y elija una de las siguientes opciones.
Crear un nuevo archivo CSS: crea un nuevo archivo CSS y lo adjunta.
Adjuntar un archivo CSS existente: Adjunta un archivo CSS existente al archivo.
Definir en Pgina: Para definir un documento CSS dentro del documento.
2. En Examinar se especifica el nombre del archivo CSS ya existente, y si por el contrario se est
creando, la ubicacin en la que desea guardar el nuevo archivo.
3. Siga uno de estos procedimientos:
Haga clic en Vnculo para vincular el documento de Dreamweaver con el archivo CSS.
Haga clic en importar para importar el archivo CSS al documento.
(Opcional) Haga clic en Uso condicional y especifique la consulta de medios que desea asociar
al archivo CSS.
Para crear un estilo personalizado que pueda aplicarse como atributo class a cualquier
elemento HTML, seleccione el elemento y con el botn derecho del ratn seleccionamos Estilo
INESEM
7 / 50
CSS > Nuevo seleccione la opcin Clase del men emergente en Tipo de selector e
introduzca un nombre para el estilo en el cuadro de texto Nombre del selector.
Nota: Los nombres de clase deben comenzar por un punto y pueden contener cualquier
combinacin alfanumrica (por ejemplo .myhead1). Si no introduce el punto inicial,
Dreamweaver lo har de forma automtica.
Tambin puede crearse directamente la Nueva Regla CSS insertando un nuevo Div al que se le
aplicar la regla.
ara definir el formato de una etiqueta que contenga un atributo ID concreto, seleccione la
opcin ID del men emergente Tipo de selector e introduzca el ID (por ejemplo, containerDIV)
en el cuadro de texto Nombre del selector.
Nota: Los ID deben comenzar por un signo de almohadilla (#) y pueden contener cualquier
combinacin alfanumrica (por ejemplo #myID1). Si no introduce la almohadilla inicial,
Dreamweaver la introducir de forma automtica.
INESEM
8 / 50
Para redefinir el formato predeterminado de una etiqueta HTML especfica, seleccione la
opcin Etiqueta del men emergente Tipo de selector y, seguidamente, introduzca una
etiqueta HTML en el cuadro de texto Nombre del selector o elija una en el men emergente.
Para definir una regla compuesta que afecte a dos o ms etiquetas, clases o ID
simultneamente, seleccione la opcin Compuesto e introduzca los selectores para la regla
compuesta. Por ejemplo, si introduce div p, la regla afectar a todos los elementos p situados
dentro de etiquetas div. Un rea de texto descriptivo explica exactamente a qu elementos
afecta la regla conforme se aaden o eliminan selectores.
En el panel de Diseador de CSS tambin puede crear las reglas del tipo que desea, si es un ID
no olvide poner una (#) delante, si se trata de una clase, lo que ir delante es un punto (.), si se
trata de una etiqueta en concreto se escribe el nombre de la etiqueta, por ejemplo body,
INESEM
9 / 50
tambin se pueden crear selectores compuestos basados en la seleccin.
INESEM
10 / 50
4. Propiedades de tipo: definicin de la configuracin bsica de

la fuente
Utilice la categora Tipo del cuadro de dilogo de definicin de reglas CSS para definir la
configuracin bsica de la fuente y del tipo de un estilo CSS.
Abra el panel Diseador de CSS (Mays + F11) si an no est abierto.
Si inserta un elemento Div, al pulsar en nueva regla, se abre el panel de Estilos CSS, o
pulsando con el botn del ratn derecho al elemento donde quiere aplicarle el estilo CSS,
Estilos CSS>Nuevo
INESEM
11 / 50
Font-family Establece la familia de fuentes (o serie de familias) del estilo. Los navegadores
muestran el texto utilizando la primera fuente de la serie que est instalada en el sistema del
usuario.
Font-size Define el tamao del texto. Puede elegir un tamao especfico seleccionando el nmero y
la unidad de medida, o bien un tamao relativo. El uso de pxeles evita que los navegadores
distorsionen el texto
Font-style Especfica normal, italic u oblique como estilo de la fuente. El valor predeterminado es
normal.
Line-height Establece el alto de la lnea en la que se coloca el texto. Este valor se conoce
tradicionalmente como interlineado. Seleccione normal para hacer que el alto de lnea del tamao
de la fuente se calcule de manera automtica, o bien introduzca un valor exacto y seleccione una
unidad de medida.
Text-decoration Aade subrayado, sobreimpresin o tachado al texto o hace que el texto parpadee.
El valor predeterminado para texto normal es ninguna. El valor predeterminado para vnculos es
underline (subrayado). Si asigna a los vnculos el valor none, puede eliminar el subrayado definiendo
una clase especial.
Font-weight Aplica una cantidad especfica o relativa de negrita a la fuente. Normal es equivalente
a 400; bold (negrita), a 700.
Font-variant Establece la variante de versales (maysculas)en el texto. Dreamweaver no muestra
INESEM
12 / 50
este atributo en la ventana de documento. El atributo variant es compatible con Internet Explorer,
pero no con Navigator.
Text-transform Convierte en mayscula la primera letra de cada palabra de la seleccin o convierte
todo en maysculas o minsculas.
Text-align Establece cmo se alinear el texto dentro del elemento.
Text-indent Especfica la cantidad de sangra que se aplica a la primera lnea de texto. Se puede
emplear un valor negativo para crear una sangra negativa, pero su visualizacin depender del
navegador
Color Establece el color del texto
Cuando haya terminado de establecer las opciones, seleccione otra de las categoras CSS que
aparecen en la parte izquierda del panel para configurar propiedades adicionales de estilo o
haga clic en Aceptar.
INESEM
13 / 50
5. Propiedades de fondo
Utilice la categora Fondo del cuadro de dilogo de definicin de regla CSS para definir la
configuracin del fondo de un estilo CSS. Puede aplicar propiedades de fondo a cualquier elemento
de una pgina Web.
Por ejemplo, crear un estilo que aada color de fondo o una imagen de fondo a cualquier elemento
de la pgina, detrs del texto, de una tabla, de la pgina, etc. Tambin puede especificar la posicin
de una imagen de fondo.
Si inserta un elemento Div, al pulsar en nueva regla, se abre el panel de Estilos CSS, o
pulsando con el botn del ratn derecho al elemento donde quiere aplicarle el estilo CSS,
Estilos CSS>Nuevo En el cuadro de dilogo de definicin de regla CSS, seleccione Fondo y, a
continuacin, configure las propiedades de estilo.
Deje en blanco cualquiera de las propiedades siguientes si no son importantes para el estilo:
INESEM
14 / 50
Background-color Establece el color de fondo del elemento.
Background-image Establece la imagen de fondo para el elemento
Background-repeat Determina si la imagen de fondo se repite y de qu forma lo hace.
No-repeat muestra la imagen una vez al principio del elemento.
Repeat forma un mosaico con la imagen en sentido horizontal y vertical detrs del elemento.
Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de imgenes.
Las imgenes se recortan para que quepan dentro de los lmites del elemento
Utilice esta propiedad para redefinir la etiqueta body y establecer una imagen de fondo que no
forma un mosaico ni se repite
Background-attachment Determina si la imagen de fondo est fija en su posicin original o se
desplaza con el contenido. Tenga en cuenta que algunos navegadores pueden considerar la opcin
fixed como scroll. Internet Explorer reconoce este atributo, a diferencia de Netscape Navigator.
Background-position (X) y Background-position (Y) Especifican la posicin inicial de la imagen
de fondo en relacin con el elemento. Pueden emplearse para alinear una imagen de fondo en el
centro de la pgina, tanto vertical (Y) como horizontalmente (X). Si la propiedad de attachment es
INESEM
15 / 50
fixed, la posicin ser relativa a la ventana de documento, no al elemento.
Background-origin Determina el origen a partir de donde se calcula posicin del fondo, es decir, el
origen de coordenadas para la propiedad background-position. Sus propiedades son:
Border-box la posicin de fondo se determina respecto al rea que incluye el borde, es decir, si
el borde es discontinuo, el fondo se podr llegar a ver por debajo de l.
Padding-box es el valor por defecto y determina la posicin del fondo respecto al rea que
incluye el padding.
Content-box el fondo se posiciona respecto al rea de contenido.
Background-size indica el tamao de la imagen de fondo.
Contain especifica que la imagen de fondo debera ser escalada lo ms grande posible mientras
se aseguran ambas dimensiones al mismo tiempo tanto en sus dimensiones son inferiores o
iguales a las dimensiones correspondientes al rea de posicionamiento de fondo.
Cover, especfica que la imagen de fondo de be ser escalada, lo ms pequeo como sea posible
asegurando al mismo tiempo tanto en sus dimensiones mayores o iguales que a las dimensiones
correspondientes al rea de posicionamiento de fondo.
INESEM
16 / 50
6. Propiedades de bloque
Utilice la categora Bloque del cuadro de dilogo de definicin de regla CSS para definir la
configuracin del espaciado y de la alineacin de las etiquetas y propiedades.
Abra el panel Estilos CSS pulsando con el botn del ratn derecho al elemento donde quiere
aplicarle el estilo CSS, Estilos CSS>Nuevo
En el cuadro de dilogo de definicin de regla CSS, seleccione Bloque y, a continuacin,
configure cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no
es importante para el estilo.)
Word-spacing Establece el espacio adicional entre las palabras. Para establecer un valor
especfico, seleccione valor en el men emergente y, a continuacin, introduzca un valor numrico.
INESEM
17 / 50
En el segundo men emergente, seleccione una unidad de medida (por ejemplo, pxeles, puntos,
etc.).
Letter-spacing Aumenta o disminuye el espacio entre letras o caracteres. Para disminuir el espacio
entre caracteres, establezca un valor negativo, por ejemplo (-4). La configuracin del espacio entre
letras anula la justificacin del texto. Internet Explorer 4 y posterior y Netscape Navigator 6
reconocen el atributo Letter-spacing.
Vertical-align Especfica la alineacin vertical del elemento al que se aplica. Dreamweaver slo
muestra este atributo en la ventana de documento cuando se aplica a la etiqueta .
Text-align Establece cmo se alinear el texto dentro del elemento.
Text-indent Especfica la cantidad de sangra que se aplica a la primera lnea de texto. Se puede
emplear un valor negativo para crear una sangra negativa, pero su visualizacin depender del
navegador.
White-space Determina de qu forma se gestiona el espacio en blanco dentro del elemento.
Display Especifica si un elemento se muestra y, si es as, cmo lo hace. None desactiva el elemento
al que se ha asignado.
Text transform Se utiliza para transformar un texto de mayscula a minscula o viceversa para
capitalizar.
INESEM
18 / 50
7. Propiedades del cuadro
Utilice la categora Cuadro del cuadro de dilogo de definicin de regla CSS para definir la
configuracin de las etiquetas y propiedades que controlan la ubicacin de los elementos en la
pgina.
Puede aplicar la configuracin en los distintos lados de un elemento al establecer el relleno y los
mrgenes o utilizar Igual para todo para aplicar la misma configuracin a todos los lados del
elemento.
Abra el panel Diseador de CSS (Mays + F11) si an no est.
O en el cuadro de dilogo de definicin de regla CSS, seleccione cuadro y, a continuacin,
INESEM
19 / 50
Width y Height Establecen el ancho y alto del elemento.
Float Determina qu lado de otros elementos, como texto, Div PA, tablas, etc., flotar alrededor de
un elemento. Otros elementos se ajustan alrededor del elemento flotante de la forma habitual.
Clear Define los lados que no permiten elementos PA. Si aparece un elemento PA en el lado libre, el
elemento con esta configuracin pasar a situarse debajo de l.
Padding Especfica la cantidad de espacio entre el contenido de un elemento y su borde (o el
margen si no hay ningn borde). Desactive la opcin Igual para todo para establecer el relleno de los
distintos lados del elemento.
Igual para todo Establece las mismas propiedades de relleno para Top, Right, Bottom y Left, es
decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se
aplica.
Margin Especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay
borde) y otro elemento. Dreamweaver slo muestra este atributo en la ventana de documento
INESEM
20 / 50
cuando se aplica a elementos de nivel de bloque (prrafos, encabezados, listas, etc.). Desactive la
opcin Igual para todo para establecer el margen de los distintos lados del elemento.
Igual para todo Establece las mismas propiedades de margen para Top, Right, Bottom y Left, es
decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se
aplica.
Min-width establece una anchura mnima de los elementos de bloque.
Max-width limita la anchura mxima de los elementos de bloque. Min-
height establece una altura mnima de los elementos de bloque. Max-height
limita la altura mxima de los elementos de bloque.
Box-sizing cambia el modelo de caja por defecto de los navegadores.
Display Especifica si un elemento se muestra y, si es as, cmo lo hace. None desactiva el elemento
al que se ha asignado.
INESEM
21 / 50
8. Propiedades del borde
Utilice la categora Borde del cuadro de dilogo de definicin de regla CSS para definir la
configuracin de los bordes que rodean a los elementos (Width, Color o Style).
Abra el panel Diseador de CSS (Mays + F11) si an no est.
O en el cuadro de dilogo de definicin de regla CSS, seleccione borde y, a continuacin,
INESEM
22 / 50
Style Establece el aspecto del estilo del borde. El aspecto del estilo puede variar en funcin del
navegador. Desactive la opcin Igual para todo para establecer el estilo del borde de los distintos
lados del elemento.
Igual para todo Establece las mismas propiedades de estilo de borde para Top, Right, Bottom y Left,
es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que
se aplica.
Width Especfica el grosor del borde del elemento. Ambos navegadores reconocen el atributo Width.
Desactive la opcin Igual para todo para establecer el ancho del borde de los distintos lados del
INESEM
23 / 50
elemento.
Igual para todo Establece el mismo borde para Top, Right, Bottom y Left, es decir, para las partes
superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.
Color Establece el color del borde. Puede especificar colores distintos para cada lado, pero su
visualizacin depender del navegador. Desactive la opcin Igual para todo para establecer el color
del borde de los distintos lados del elemento.
Igual para todo Establece el mismo color de borde para Top, Right, Bottom y Left, es decir, para las
partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.
Border-collapse Selecciona el modelo de bordes de las celdas de la tabla.
Border-spacing Establece la separacin de las celdas de la tabla.
Border-radius Aade bordes redondeados a los elementos div.
INESEM
24 / 50
9. Definir consulta de Medios
1. En el panel Diseador de CSS, haga clic en fuentes de CSS en el Panel de Fuentes.
2. Haga clic
en el panel @Medios para aadir una nueva consulta de medios. Aparecer el cuadro de dilogo
Definir consulta de medios con todas las condiciones de consulta de medios que admite
Dreamweaver.
3. Seleccione las condiciones segn sus necesidades. Asegrese de especificar valores vlidos para
las consultas que seleccione. De lo contrario, la consulta de medios correspondientes no se crearn
correctamente.
Si se agregan condiciones de consulta de medios mediante cdigo, slo se completarn las
condiciones admitidas en el cuadro de dilogo Definir consulta de medios. El cuadro de texto Cdigo
de cuadros de dilogo, sin embargo, mostrar el cdigo completamente (incluidas las condiciones no
admitidas).
INESEM
25 / 50
10. Definir selectores
1. En el Diseador de CSS, selecciones una fuente de CSS en el panel de Fuentes o consulta de
medios en el panel de @Medios.
2. En el panel Selectores. Haga clic en
. Dependiendo del elemento seleccionado en el documento, el Diseador de CSS lo identificar
automticamente y le solicitar el selector correspondiente. De forma predeterminada, el selector es
Menos especfico.
A diferencia del panel de Estilos CSS, no puede seleccionar directamente un Tipo de selector en el
Diseador de CSS. Deber escribir el nombre del selector junto con la definicin de Tipo de selector.
Por ejemplo, si especifica un ID, anteponga al nombre del selector un #
Para buscar un selector especfico, utilice el cuadro de dilogo bsqueda situado en la parte
superior del panel.
Para cambiar el nombre del selector, haga clic en el selector y escriba el nombre deseado.
Para reorganizar los selectores, arrastre los selectores hasta la posicin que desee.
Para mover un selector de una fuente a otra, arrastre el selector hasta la fuente deseada del
panel de Fuentes.
INESEM
26 / 50
Para duplicar un selector en la fuente seleccionada, haga clic con el cotn derecho del ratn en
el selector y haga clic en duplicar.
Para duplicar un selector y aadirlo a la consulta de medios, haga clic con el botn derecho con
el ratn en el selector, pase el puntero por Duplicar en consulta de medios, y a continuacin
elija la consulta de medios. Solo esta disponible esta opcin cuando la fuente del Selector
seleccionado contiene consultas de medios. No se puede duplicar un selector de una sola
fuente en la consulta de medios de otra fuente.
INESEM
27 / 50
11. Definir propiedades
Las propiedades se agrupan en las siguientes categoras y se representan mediante distintos iconos
en la parte superior del panel de Propiedades:
Diseo
Texto
Borde
Fondo
Otros (lista de propiedades solo texto y sin propiedades con controles visuales).
Seleccione la casilla de verificacin Mostrar conjunto para ver solo las propiedades establecidas.
Para ver todas las propiedades que se pueden especificar para un selector, anule la seleccin de la
casilla de verificacin Mostrar conjunto.
INESEM
28 / 50
Para definir una propiedad, por ejemplo, width o border-collapse, haga clic en las opciones
requeridas que se muestran junto a la propiedad en el panel Propiedades.
Establecer mrgenes, relleno y posicin
INESEM
29 / 50
El panel de propiedades del Diseador de CSS le permite definir rpidamente los mrgenes, el
relleno y las propiedades de posicin mediante los controles de cuadro.
Haga clic sobre los valores y escriba el valor deseado. Si desea que los cuatro valores sean iguales y
cambien simultneamente, haga clic en el icono de enlace
en el cuadro.
En cualquier momento puede deshabilitar
en valores especficos, por ejemplo, el valor del margen izquierdo conservando los valores del
derecho, superior e inferior.
INESEM
30 / 50
Desactivar o eliminar propiedades
El panel Diseador de CSS permite desactivar o eliminar cada una de las propiedades. La siguiente
imagen muestra los iconos desactivar
la propiedad width. Estos iconos son visibles al pasar el ratn por la propiedad.
Identificar los elementos de pgina asociados a un selector CSS
La mayora de las veces hay un selector CSS asociados a varios elementos de pgina. Por ejemplo, el
texto del contenido principal de una pgina, un encabezado, y un texto de pie de pgina puede
asociarse al mismo selector CSS. Cuando edite las propiedades del selector CSS, todos los elementos
asociados al selector se vern afectados, incluidos los que no van a cambiar.
Resaltado en vivo le ayuda a identificar todos los elementos asociados a un selector CSS. Si desea
cambiar un solo elemento o varios elementos, puede crear un nuevo selector CSS para dichos
elementos y luego editar las propiedades.
Para identificar elementos de la pgina asociados a un selector CSS, pase el ratn sobre el selector.
Dreamweaver resalta los elementos asociados con lneas de puntos.
Para bloquear el resaltado de los elementos, haga clic en el selector. Los elementos se resaltan con
un borde azul.
INESEM
31 / 50
Para eliminar el resaltado azul alrededor de los elementos, haga clic de nuevo en el selector.
Desactivar el resaltado en vivo
Resaltado en vivo est activado de forma predeterminada. Para desactivar Resaltado en vivo, haga
clic en opciones de Vista en la barra de herramientas Documento y haga clic en Desactivar resaltado
en vivo.
Aplicacin de degradados de Fondo
El panel de Diseador de CSS le permite aplicar degradados al fondo de su sitio Web. La propiedad
gradient (degradado) est disponible en la categora fondo.
INESEM
32 / 50
Haga clic en
para abrir el panel de degradados. Este panel permite:
Elegir los colores de diferentes modelos de color (RGBa, Hexadecimal, o HSLa). Se deben
guardar las diferentes combinaciones de color.
Para restablecer en el color original, haga clic en el color original (k).
Para cambiar el orden de las muestras, arrastre las muestras en la posicin deseada.
Para eliminar una muestra de color, arrastre la muestra fuera del panel.
Use niveles de color para crear degradados complejos. Haga clic en cualquier lugar situado
entre los niveles de color predeterminados para crear un nivel de color. Para eliminar un nivel
INESEM
33 / 50
de color, arrastre el nivel fuera del panel.
Especifique el ngulo de degradado lineal.
Para repetir patrn, seleccione Repetir.
Guarde los degradados personalizados como muestras.
A. Nivel de color.
B. Muestra de degradado.
C. Aadir muestras degradadas.
D. Repeticin lineal.
E. Modelo de color.
F. Cuentagotas.
G. Regulador de color.
H. Regulador de luminosidad
I. Regulador de opacidad.
J. Aadir muestras de color.
K. Muestra de color.
L. Color original
M. Color seleccionado
INESEM
34 / 50
N. ngulo de degradado lineal.
Una vez elegido el degradado se aade el siguiente cdigo a nuestro estilo:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00)
46.63%,rgba(255,0,0,1.00) 100%);
57deg: Indica el ngulo de degradado lineal.
rgba(255,255,255,1.00): Color para el primer nivel del color.
0%: Indica el nivel del color.
Representar degradados en navegadores web
Cuando utilice degradados como fondos, se podr configurar Dreamweaver para que represente los
degradados correctamente en los distintos navegadores. Dreamweaver lo que hace es aadir unos
prefijos de proveedores al cdigo que permite que los navegadores muestren el degradado de una
manera ms correcta.
Dreamweaver puede escribir los siguientes prefijos de proveedores junto con el formato w3c:
De forma predeterminada, Dreamweaver escribe prefijos de proveedor para Webkit y la Vista en
vivo de Dreamweaver. Puede elegir otros proveedores requeridos en el cuadro de dilogo de
Preferencias (Preferencias > Estilos CSS).
Webkit
Mozilla
Opera
Vista en vivo de Dreamweaver (formato Webkit antiguo).
Los cambios realizados en los degradados tambin se reflejan en la sintaxis del proveedor. Si abre
un archivo que contiene sintaxis especfica de un proveedor en Dreamweaver CC, asegrese de que
elige los prefijos de proveedor requeridos en Preferencias. Esto es as porque, de manera
INESEM
35 / 50
predeterminada, Dreamweaver solo actualizar el cdigo relacionado con Webkit y con la Vista en
vio de Dreamweaver al utilizar o cambiar los degradados. Por lo tanto, la sintaxis especfica del
proveedor existente en el cdigo no se actualizar.
Intercambiar imgenes de fondos y degradados
Puede cambiar el orden (en que aparece en el cdigo) de las imgenes y los degradados de fondo
con un solo clic.
Haga clic en
junto a la url o la propiedad gradient (degradado) en Diseador de CSS.
INESEM
36 / 50
INESEM
37 / 50
12. Prcticas
12.1. Prctica 1: Creacin de contenedores
Creamos una carpeta llamada lec_ocho y dentro de este un documento llamado ejercicio1.HTML
Vamos a introducir en este documento una etiqueta Div que llamaremos container y dentro de esta
etiqueta otras siete llamadas en este orden de arriba a abajo:
Titulo
part1
part2
part3
part4
part5
part6
part6
Introducimos el texto para cada etiqueta de este documento texto.docx, lo aconsejable es crear las
etiqueta y luego copiar y pegar el texto, en el texto de word se especifica cada texto a que parte
pertenece.
Al la primera frase del titulo le damos Formato encabezado1 y a la segunda encabezado dos.
A cada titulo (que aparece en rojo en el documento de word) desde part2 a part3 le damos desde las
propiedades Formato Encabezado3
12.2. Prctica 2: introduccin de reglas
Partimos del documento creado en el ejercicio anterior ejercicio1.HTML y lo guardamos como
ejercicio2.HTML
INESEM
38 / 50
Vamos a introducir en este documento una serie de reglas:
Vamos a crear una nueva hoja de estilo CSS, seleccionamos en Fuentes en el panel de
Diseador de CSS que queremos crear un nuevo archivo CSS.
Seleccionamos la etiqueta titulo
Si no tiene ID se lo introducimos manualmente en el inspector de propiedades.
Manteniendo seleccionada la etiqueta de titulo e indicando en Fuentes el archivo CSS donde se
va a almacenar el estilo, seleccionamos el
INESEM
39 / 50
de Selectores del panel de Diseador de CSS.
Damos estas propiedades para nuestra primera regla
Realizamos la misma operacin para la etiqueta part1 y le damos estas propiedades:
Creamos una nueva regla de estilo que afecte a los elementos h3 de HTML (nuestros ttulos)
INESEM
40 / 50
Le damos las siguientes propiedades
Creamos una ltima regla de clase que llamamos texto, con las siguientes propiedades y se la
aplicamos al texto
INESEM
41 / 50
Y nuestro algo similar a este:
Vemos que se nos ha creado dentro de nuestra carpeta un documento llamado estilos.css que
contiene todas las reglas que acabamos de crear.
12.3. Prctica 3: crear y modificar los estilos.
Creamos una carpeta llamada ejercicio3, en la cual incluimos una copia del ejercicio2.HTML, el cual
llamamos ahora ejercicio3, el documento estilos.css y las siguientes imgenes
INESEM
42 / 50
Abrimos nuestro documento ejercicio3.html y vamos a crear y modificar los estilos que ya tenemos.
Creamos un fondo en nuestra pgina, para lo cual creamos un nuevo estilo, tal como vemos
En la categora fondo incluimos la siguiente imagen:
INESEM
43 / 50
En la etiqueta titulo cambiamos el color del texto y lo alineamos al centro:
En la etiqueta part1, le ponemos como fondo un amarillo y las siguientes propiedades en la
categora cuadro:
INESEM
44 / 50
A cada una de las siguientes etiquetas le ponemos como fondo un amarillo, y en las
propiedades de cuadro las siguientes:
Para las imgenes que insertaremos en nuestro documento vamos a crear una regla para ellas:
INESEM
45 / 50
Con las siguientes propiedades:
Nuestro ejercicio tendr un aspecto similar a este:
INESEM
46 / 50
INESEM
47 / 50
Recuerda
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el
aspecto del contenido de una pgina Web. La utilizacin de estilos CSS para aplicar formato a
una pgina permite separar el contenido de la presentacin.
Hojas de estilos CSS internas (o incrustadas) Conjuntos de reglas CSS incluidos en una
etiqueta style de la seccin head de un documento HTML.
El panel Diseador de CSS permite supervisar las reglas y propiedades CSS que afectan al
elemento de pgina seleccionado (modo Actual) o todas las reglas y propiedades que afectan al
documento (modo Todo).
Editar regla Abre un cuadro de dilogo en el que es posible editar los estilos del documento
actual o de una hoja de estilos externa.
Utilice la categora Tipo del cuadro de dilogo de definicin de reglas CSS para definir la
configuracin bsica de la fuente y del tipo de un estilo CSS.
Utilice la categora Fondo del cuadro de dilogo de definicin de regla CSS para definir la
configuracin del fondo de un estilo CSS.
Utilice la categora Bloque del cuadro de dilogo de definicin de regla CSS para definir la
configuracin del espaciado y de la alineacin de las etiquetas y propiedades.
Puede aplicar la configuracin en los distintos lados de un elemento al establecer el relleno y
los mrgenes o utilizar Igual para todo para aplicar la misma configuracin a todos los lados
del elemento.
INESEM
48 / 50
Autoevaluacin
1. Las hojas de estilos en cascada estn compuestas por:
Archivos
Hojas
Reglas
2. Una regla de formato CSS consta de:
Tres partes
Una parte
Dos partes
3. El conjunto de reglas CSS almacenados en un archivo CSS externo Cmo se

llaman?
Hojas de estilos CSS externas
Hojas de estilos CSS
Hojas de estilos CSS interna
4. Desde dnde podemos supervisar las reglas y propiedades CSS?
INESEM
49 / 50
Desde el panel Diseador de CSS
Desde el panel CSS
No se puede
5. Para crear un estilo personalizado que pueda aplicarse a cualquier elemento

HTML Hemos de seleccionar la opcin?
ID
Clase
Etiqueta
INESEM
50 / 50
1. Propiedades lista: Aprenderemos ms reglas css para una
Web atractiva.
Utilice la categora Lista del cuadro de dilogo de definicin de regla CSS para definir la
configuracin de la lista para las etiquetas de lista (por ejemplo el tamao y el tipo de vietas).
Haga clic con el botn derecho del ratn en un elemento Estilos CSS > Nuevo
En el cuadro de dilogo de definicin de regla CSS, seleccione lista y, a continuacin, configure
cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no es
importante para el estilo.)
List-style-type Establece el aspecto de vietas o nmeros. Ambos navegadores reconocen el
atributo type.
List-style-image Permite especificar una imagen personalizada para vietas. Haga clic en
Browse (Windows) o Seleccionar (Macintosh) para buscar una imagen o escriba la ruta de la
imagen.
List-style-Position Determina si el elemento de texto de la lista se ajusta a una sangra
(outside) o si el texto se ajusta al margen izquierdo (inside).


2. Propiedades de posicin
Las propiedades de estilo Posicin determinan cmo debe colocarse el contenido relacionado con el
estilo CSS en la pgina.
Abra el panel Estilos CSS (Mays + F11) si an no est abierto.
Haga clic con el botn derecho del ratn en un elemento Estilos CSS > Nuevo
En el cuadro de dilogo de definicin de regla CSS, seleccione posicin y, a continuacin,

Position Determina cmo deber colocar el navegador el elemento seleccionado. Ofrece las
opciones siguientes:
Absolute coloca el contenido utilizando las coordenadas introducidas en los cuadros
Placement en relacin con el ascendente ms prximo con posicin absoluta o
relativa o, si no hay ningn ascendente con posicin absoluta o relativa, con la
esquina superior izquierda de la pgina.
Relative coloca el bloque de contenido utilizando las coordenadas introducidas en los
cuadros Placement en relacin con la posicin del bloque en el flujo de texto del
documento. Por ejemplo, al asignar a un elemento una posicin relativa (relative) y
coordenadas superior (top) e izquierda (left) de 20 pxeles cada una, el elemento se
desplazar 20 pxeles hacia la derecha y 20 pxeles hacia abajo de su posicin normal
en el flujo. Los elementos tambin pueden tener una posicin relativa, con o sin
coordenadas superior (top), izquierda (left), derecha (right) o inferior (bottom), para
establecer un contexto para elementos dependientes con posicin absoluta.
Fixed coloca el contenido utilizando las coordenadas introducidas en los cuadros
Placement en relacin con la esquina superior izquierda del navegador
Static coloca el contenido en su ubicacin en el flujo de texto. Esta es la posicin
predeterminada de todos los elementos HTML que pueden colocarse.

Visibility Determina el estado inicial de visualizacin del contenido. Si no se especifica una
propiedad de visibilidad, el contenido heredar el valor de la etiqueta del padre de forma
predeterminada. La visibilidad predeterminada de la etiqueta body es visible. Seleccione una de las
siguientes opciones de visibilidad.
Z-Index Determina el orden de apilamiento del contenido.
Overflow Determina lo que debe ocurrir si el contenido de un contenedor (por ejemplo, una DIV o
una P) supera el tamao de ste.
Placement Especfica la ubicacin y el tamao del bloque de contenido.
Clip Define la parte del contenido que ser visible.
Opacity ajusta el nivel de opacidad de un elemento. El nivel de opacidad describe el nivel de
transparencia, en la que 1 no transparente en absoluto, 0.5 es 50% medio y 0 es completamente
transparente.
Clear Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma
flotante, el valor inicial es none.
Left, hace que la caja sobre la que se aplica baje hasta que su borde superior est por debajo
del borde inferior de cualquier elemento flotado hacia la izquierda.
Right, hace que la caja sobre la que se aplica baje hasta su borde superior est por debajo del
borde inferir de cualquier elemento flotado a la izquierda.
Both, hace que la caja sobre la que se aplica baje hasta que su borde superior est por debajo
del borde inferior de cualquier elemento flotado a la izquierda o a la derecha.
None, es el valor por defecto que se aplica a todos los elementos y no tiene efecto sobre la
posicin de la caja.

3. Propiedades de extensiones
Las propiedades de extensiones de estilo incluyen opciones de filtros (filter), salto de pgina y
puntero (cursor).
Abra el panel Estilos CSS (Mays + F11) si an no est abierto.
Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS.
En el cuadro de dilogo de definicin de regla CSS, seleccione extensiones y, a continuacin,
Page-break-before Efecta un salto de pgina al imprimir antes o despus del objeto al que se
aplica el estilo. Seleccione la opcin que desea establecer en el men emergente.
Cursor Cambia la imagen del puntero cuando ste se encuentra sobre el objeto al que se aplica el
estilo. Seleccione la opcin que desea establecer en el men emergente.

Filter Aplica efectos especiales al objeto controlado por el estilo, incluidos desenfoque e inversin.
Seleccione un efecto en el men emergente.
En el Diseador de CSS, estas propiedades no se encuentran por defecto pero podemos aadirlo
nosotros. Por ejemplo, si queremos que al posicionarnos en un determinado elemento nuestro cursor
cambie de forma se har lo siguiente:
Creamos el elemento donde queremos que nuestro cursor cambie al pasar por encima de l.
Lo seleccionamos y con el botn derecho del ratn le indicamos que queremos aplicarle
mltiples clases. En nuestro caso le hemos llamado cursor.

Ahora creamos la regla para la clase .cursor en el Diseador de CSS.
La propiedad cursor no se encuentra en el panel de Diseador de CSS pero podemos aadirla,
as que le damos a
en Propiedades y le indicamos el nombre de la propiedad y su atributo, en nuestro caso la
propiedad seria cursor y el atributo progress.

Si pulsamos F12 vemos que situando el cursor sobre el elemento, el aspecto de ste cambia a
este:

4. Transiciones
Panel transiciones
Use transiciones CSS para aplicar cambios suaves en las propiedades de los elementos de pgina en
respuesta a eventos desencadenantes como pasar el puntero, hacer clic y enfocar.
(Un ejemplo comn es un elemento de la barra de mens que se funde de forma gradual de un color
a otro cuando se coloca el puntero sobre l.) Ahora puede crear transiciones CSS en el nuevo cuadro
de dilogo Transiciones CSS (Ventana > Transiciones CSS).
Despreocpate de recordar todos los atributos y valores para las transiciones en CSS6. El editor de
transiciones te lo va poner muy fcil.
Para crear una transicin CSS, cree una clase de transicin especificando los valores de las
propiedades de transicin del elemento.
Si se selecciona un elemento antes de crear una clase de transicin, la clase de transicin se aplica
de manera automtica al elemento seleccionado.
Vamos a crear una nueva transaccin:

Y en la siguiente pantalla creamos nuestra transicin:
Regla de destino. Introduzca un nombre para el selector. El selector puede ser cualquier
selector CSS, como, por ejemplo, una etiqueta, una regla, un ID o un selector de compuestos.
Por ejemplo, si desea aadir los efectos de transicin a todas las etiquetas
, introduzca hr.
Transicin con. Seleccione el estado al que desea aplicar la transicin. Por ejemplo, si desea
aplicar la transicin cuando el ratn pase por encima del elemento, utilice la opcin hover.
Usar la misma transicin para todas las propiedades. Seleccione esta opcin si desea
especificar los mismos valores de Duracin, Demora y Funcin de temporizacin para todas las
propiedades CSS a las que desea aplicar transicin.
Usar una transicin diferente para cada propiedad. Seleccione esta opcin si desea
especificar valores diferentes de Duracin, Demora y Funcin de temporizacin para cada una
de las propiedades CSS a las que desea aplicar transicin.
Propiedad. Haga clic en + para aadir una propiedad CSS a la que aplicar transicin.
Duracin. Introduzca una duracin en segundos (s) o en milisegundos (ms) para el efecto de
transicin.
Demora. El tiempo, en segundos o milisegundos, que debe transcurrir para que se inicie el
efecto de transicin.
Funcin de temporizacin. Seleccione un estilo de transicin entre las opciones disponibles.
Valor final. El valor final para el efecto de transicin. Por ejemplo, si desea que el tamao de
fuente aumente a 40 px al final del efecto de transicin, especifique 40 px para la propiedad
font-size.
Seleccione dnde debe crearse la transicin. Para incrustar el estilo en el documento
actual, seleccione Slo este documento.
Una vez creada la transicin esta aparece en el panel transiciones:
Editar transiciones
En el Transiciones CSS, seleccione el efecto de transicin que desea editar.
Haga clic en
Utilice el cuadro de dilogo Editar transicin para cambiar los valores introducidos
previamente para la transicin.

Para eliminar una transicin la seleccionamos y pulsamos sobre el -
5. Trabajar con Hojas de estilo
Desplazamiento/exportacin de reglas CSS
Las funciones de administracin CSS de Dreamweaver facilitan el desplazamiento o la exportacin
de reglas CSS a distintas ubicaciones. Puede mover reglas entre documentos, del encabezado de un
documento a una hoja de estilos externa, entre archivos CSS externos y mucho ms.
Si la regla que va a mover entra en conflicto con una regla de la hoja de estilos de destino,
Dreamweaver muestra el cuadro de dilogo Ya hay una regla con el mismo nombre. Si elige mover la
regla en conflicto, Dreamweaver sita la regla desplazada junto a la regla en conflicto en la hoja de
estilos de destino
Desplazamiento/exportacin de reglas CSS a una nueva hoja de estilos
Seleccione la regla o reglas que desea mover. A continuacin, haga clic con el botn derecho
del ratn en la seleccin y elija Mover reglas CSS en el men contextual. Para seleccionar
varias reglas, presione la tecla Control (Windows) o Comando (Macintosh) mientras hace clic
en las reglas que desea seleccionar.
En el cuadro de dilogo Mover a hoja de estilos externa, seleccione la opcin Una nueva hoja
de estilos y haga clic en Aceptar.

En al cuadro de dilogo Guardar archivo de hoja de estilos como, introduzca un nombre para la
nueva hoja de estilos y haga clic en Guardar.
Al hacer clic en Guardar, Dreamweaver guarda una nueva hoja de estilos con las reglas
seleccionadas y la adjunta al documento actual.
Desplazamiento/exportacin de reglas CSS a una hoja de estilos existente
Seleccione la regla o reglas que desea mover. A continuacin, haga clic con el botn derecho
del ratn en la seleccin y elija Mover reglas CSS en el men contextual. Para seleccionar
varias reglas, presione la tecla Control (Windows) o Comando (Macintosh) mientras hace clic
en las reglas que desea seleccionar.
En el cuadro de dilogo Mover a hoja de estilos externa, seleccione la opcin Hoja de estilos y
seleccione una hoja de estilos existente en el men emergente o haga clic en el botn Examinar
para localizar una hoja de estilos existente y, a continuacin, haga clic en Aceptar.
Vinculacin a una hoja de estilos CSS externa
Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se actualizarn
para reflejar los cambios. Puede exportar los estilos CSS de un documento para crear una nueva
hoja de estilos CSS, as como adjuntar o vincular dichos estilos a una hoja de estilos externa para
aplicarlos.
Puede adjuntar a las pginas las hojas de estilo que cree o copie en el sitio. Adems, Dreamweaver
se entrega con hojas de estilos prediseadas que pueden trasladarse automticamente al sitio y
adjuntarse a las pginas.
Sitese en Fuentes en el Diseador de CSS
Haga clic en el botn
Haga clic en Examinar para localizar una hoja de estilos CSS externa.
En Aadir como, seleccione una de las siguientes opciones:
Para crear un vnculo entre el documento actual y la hoja de estilos externa,
seleccione Vincular. De esta forma se crea una etiqueta de vnculo href en el cdigo
HTML que hace referencia al URL donde se encuentra la hoja de estilos
Si desea importar una hoja de estilos externa, en lugar de crear un vnculo a la
misma, seleccione Importar.
En el men emergente Media, especifique el medio de destino de la hoja de estilos.

Haga clic en Aceptar.
6. Aplicar varias clases estilos
Aplicacin de mltiples clases
Con el nuevo panel de aplicacin de mltiples clases de Dreamweaver seremos capaces de aplicar
varias clases de estilos a un elemento de una forma directa y sencilla.
Puede abrir el cuadro de dilogo Seleccin de varias clases desde varios puntos de acceso:
En el inspector de propiedades HTML (Elija Aplicar varias clases.)
Nos aparece la siguiente ventana donde seleccionamos las clases que queremos aplicar:
Nos situamos sobre el texto al que queremos aplicar el estilo y con el botn derecho Estilos
CSS > Aplicar Mltiples Clases :
El men contextual del selector de etiquetas situado en la parte inferior de la ventana de
documento (haga clic con el botn derecho del ratn en una etiqueta y elija Establecer clase >
Aplicar varias clases).

7. Hojas de estilos de muestra de Dreamweaver
Dreamweaver dispone de hojas de estilos de muestra que pueden aplicarse a las pginas o que se
pueden utilizar como puntos de partida para desarrollar estilos propios.
Pulse la combinacin de teclas (Ctrl+N) o seleccione Archivo > Nuevo y aparecer el cuadro
de dilogo.
Elige Pgina en blanco en la columna de la izquierda y el tipo de pgina HTML, PHP
Las opciones que te muestra la columna de Diseo te permite elegir un diseo prefabricado de
Dreamweaver.
Las Disposiciones de cuadriculas fluidas permiten el cambio total de la anchura de pgina para
ajustarlo al tamao de un navegador o un dispositivo.
Dreamweaver permite previsualizar cada diseo, en la esquina superior derecha del cuadro de
dilogo.
Dreamweaver te permite elegir el tipo de documento en el que quiere plasmar el estilo de
muestra.
Seleccione una ubicacin para el cdigo CSS del diseo en el men emergente Diseo CSS en.
Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se
va a crear.
Crear nuevo archivo Aade cdigo CSS para el diseo de una nueva hoja de estilos
CSS externa y la adjunta a la pgina que se va a crear.
Vincular a archivo existente Permite especificar un archivo CSS existente que ya
contiene las reglas CSS necesarias para el diseo. Esta opcin es especialmente til
cuando desea utilizar el mismo diseo CSS (las reglas CSS para el mismo se
encuentran en un nico archivo) en varios documentos.
Si ha seleccionado Aadir a Head en el men emergente Diseo CSS en, haga clic en
crear.
Si ha seleccionado Crear nuevo archivo en el men emergente Diseo CSS en, haga
clic en crear y a continuacin, especifique un nombre para el nuevo archivo externo
en el cuadro de dilogo Guardar archivo de hoja de estilos como.
Si ha seleccionado Vincular a archivo existente en el men emergente Diseo CSS
en, aada el archivo externo al cuadro de texto Adjuntar archivo CSS; para ello haga
clic en el icono Adjuntar hojas de estilos, introduzca la informacin necesaria para el
cuadro de dilogo Vincular hija de estilos externa y haga clic en Aceptar. Cuando
haya finalizado, haga clic en Crear en el cuadro de dilogo Nuevo Documento.
Tambin puede adjuntar hijas de estilos CSS a la nueva pgina (independientes del diseo CSS)
al crearla. Para ello haga clic en el icono Adjuntar hojas de estilos situados encima del panel
Adjuntar archivo CSS y seleccione una hoja de estilos CSS.

8. Diseo de pginas con CSS
Un diseo de pgina CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o
marcos HTML tradicionales, para organizar el contenido de un sitio Web. El elemento bsico del
diseo CSS es la etiqueta div, una etiqueta HTML que, en la mayora de los casos, acta como
contenedor de texto, imgenes y otros elementos de pgina.
Cuando crea un diseo CSS, coloca etiquetas div en la pgina, aade contenido a las mismas y las
sita en distintos lugares. A diferencia de las celdas de tabla, que slo pueden situarse en algn
lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una
pgina Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de
forma relativa (especificando su distancia con respecto a otros elementos de la pgina).
Tambin puede situar etiquetas div especificando elementos flotantes, rellenos y mrgenes
La creacin de diseos CSS desde cero puede ser una tarea difcil debido a la gran cantidad de
formas de hacerlo que existen. Puede crear un diseo CSS sencillo de dos columnas estableciendo
elementos flotantes, mrgenes, rellenos y otras propiedades CSS mediante un nmero casi infinito
de combinaciones.
Adems, el problema de la reproduccin en distintos navegadores hace que determinados diseos
CSS se muestren correctamente en algunos navegadores y no en otros no.

La utilizacin de los diseos CSS predefinidos que vienen con Dreamweaver es la forma ms fcil de
crear una pgina con un diseo CSS, pero tambin puede crear diseos CSS mediante los elementos
con posicin absoluta (elementos div de posicin absoluta) de Dreamweaver.
En Dreamweaver, un elemento div de posicin absoluta es un elemento de pgina HTML (en
concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posicin absoluta asignada.
Sin embargo, la limitacin de los elementos de posicin absoluta de Dreamweaver radica
precisamente en que tienen una posicin absoluta, lo que hace que sus posiciones nunca se ajusten a
la pgina en funcin del tamao del navegador.
El elemento bsico del diseo CSS es la etiqueta div, una etiqueta HTML que, en la mayora de los
casos, acta como contenedor de texto, imgenes y otros elementos de pgina. En los siguientes
ejemplos se muestra una pgina HTML que contiene tres etiquetas div independientes: una etiqueta
de "contenedor" grande y otras dos etiquetas (una de barra lateral y una de contenido principal)
dentro de la etiqueta de contenedor.

9. Prcticas
9.1. Prctica 1: Listas y estilos.
Creamos una carpeta llamada lec_nueve y dentro de este un documento llamado ejercicio1.HTML
Vamos a introducir en este documento varias listas que vamos a personalizar, escribimos dentro de
una etiqueta una lista como esta:
Uno
Dos
Tres
Cuatro
Le daremos estilos para que tenga el siguiente aspecto:

Indicamos en el Diseador de CSS que le vamos a dar estilo al documento en Fuentes:
Creamos selector en Selectores del Diseador de CSS.

En el inspector de propiedades, teniendo sealada la lista, le podemos indicar el ID que hemos
creado anteriormente lista para que se la aplique la regla CSS a l:
Ahora vamos a aadir a la regla CSS las propiedades que queramos:
Categora cuadro:
Categora borde:
Categora lista:
Categora lista, descargamos la imagen flecha:
Creamos la siguiente lista, escribimos el texto dentro de una etiqueta y creamos una nueva regla con
las siguientes propiedades:

Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos
Categora bloque:
Categora cuadro:
Categora lista:
Creamos una nueva regla:
Categora borde:
Creamos el siguiente men a partir de una lista, escribimos el texto dentro de una etiqueta, el texto
ha de ser un vnculo podemos escribir # en lugar del vnculo si no lo tenemos y de esta forma
podemos ver los efectos de los estilos, creamos una nueva regla con las siguientes propiedades:
Categora lista:
Categora bloque:
Categora cuadro:
Categora bloque
Categora bloque
Ponemos un borde
Guardamos este ejercicio como ejercicio1.HTML
9.2. Prctica 2: Lista en Men
Creamos un archivo nuevo basado en un diseo de etiquetas y guardamos este documento como
ejercicio2.HTML
Insertamos donde aparece el marcador de posicin logo el siguiente logo.
Creamos una lista para convertirla en el siguiente men:

Categora lista:
Categora bloque
Categora cuadro:
Categora posicin:
Categora borde, podemos ponerle un borde a nuestra eleccin
Guardamos este ejercicio como ejercicio2.HTML
9.3. Prctica 3: exportacin de hoja de estilos
A partir del ejercicio2.HTML, vamos a exportar su hoja de estilos para poderla usar con cualquier
documento:
Seleccionamos todas las reglas y en el men emergente al pulsar botn derecho del ratn
seleccionamos Mover reglas CSS
Marcamos la siguiente casilla:
Lo guardamos como ejercicio3.css
Creamos un nuevo documento y vinculamos la hoja de estilos que acabamos de crear,
guardamos este documento como ejercicio3.HTML
9.4. Prctica 4: Reglas de texto
A partir del ejercicio2.HTML, vamos a crear una nueva regla css, a la cual llamamos texto:
Aplicamos a nuestro primer prrafo la regla que ya tiene ms esta que acabamos de crear:
Vamos ahora a crear una transicin para aplicar sobre cualquiera de los elementos que componen
nuestra pgina y guardamos nuestro documento como ejercicio4.

Recuerda
Utilice la categora Lista del cuadro de dilogo de definicin de regla CSS o en las Popriedades
del Diseador de CSS para definir la configuracin de la lista para las etiquetas de lista (por
ejemplo el tamao y el tipo de vietas).
Las propiedades de estilo Posicin determinan cmo debe colocarse el contenido relacionado
con el estilo CSS en la pgina.
Visibility Determina el estado inicial de visualizacin del contenido. Si no se especifica una
propiedad de visibilidad, el contenido heredar el valor de la etiqueta del padre de forma
predeterminada.
Use transiciones CSS para aplicar cambios suaves en las propiedades de los elementos de
pgina en respuesta a eventos desencadenantes como pasar el puntero, hacer clic y enfocar.
Las funciones de administracin CSS de Dreamweaver facilitan el desplazamiento o la
exportacin de reglas CSS a distintas ubicaciones.
Con el nuevo panel de aplicacin de mltiples clases de Dreamweaver seremos capaces de
aplicar varias clases de estilos a un elemento de una forma directa y sencilla.
Dreamweaver dispone de hojas de estilos de muestra que pueden aplicarse a las pginas o que
se pueden utilizar como puntos de partida para desarrollar estilos propios.
Un diseo de pgina CSS utiliza el formato de hojas de estilos en cascada, en lugar de las
tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web.

Autoevaluacin
1. Las propiedades de extensiones de estilo incluyen:
Animaciones
Filtros
Imgenes
2. Podemos exportar ms de una regla de estilo?
Solo una
No
Si
3. Podemos aadir reglas a una hoja de estilos existente?
Solo una
Si
No
4. Cual de estos elementos no pertenece a la propiedad de Lista:

style-image
style-top
Style-Position
5. Dreamweaver dispone de hojas de estilos?
Solo tiene tres
Si
No
[UDI019455] Elementos multimedia y jQuery UI
1. Incluir archivos swf: Presenta elementos multimedia

dinmicos que podemos insertar en las pginas Web a travs
del programa Macromedia Dreamweaver: animaciones de Flash,
vdeos de Flash, botones y textos Flash. Tambin se describen
varias posibilidades de trabajo conjunto entre Dreamweaver y
Fireworks, como la creacin de un lbum de fotos Web o la
insercin de HTML procedente de Fireworks en una pgina
Web diseada con Dreamweaver.
Antes de utilizar Dreamweaver para insertar contenido creado con Adobe Flash, deber
familiarizarse con los siguientes tipos de archivos:
Archivo FLA (.fla) Archivo de origen de cualquier proyecto, que se crea en la herramienta de
edicin de Flash. Este tipo de archivo slo se puede abrir en Flash (no en Dreamweaver ni en
los navegadores). Puede abrir el archivo FLA en Flash y, a continuacin, publicarlo como SWF
o SWT para utilizarlo en los navegadores.
Archivo SWF (.swf) Versin compilada del archivo FLA (.fla) optimizada para la Web. Este
archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se puede editar en
Flash.
Archivo FLV (.flv) Archivo de vdeo que contiene datos codificados de audio y vdeo para
enviarlos a travs de Flash Player
En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde desea
insertar el contenido y luego:
En la categora Comn del panel Insertar, seleccione Media y haga clic en el icono SWF
INESEM
1 / 27
Seleccione Insertar > Medios > Flash SWF.
En el cuadro de dilogo que aparece, seleccione un archivo SWF (.swf).
Aparecer un marcador de posicin de archivo SWF en la ventana de documento.
El marcador de posicin presenta un contorno azul con ficha. La ficha indica el tipo de activo
(archivo SWF) y el ID del archivo SWF. La ficha tambin muestra un icono de ojo. ste acta a
modo de conmutador entre el archivo SWF y la informacin de descarga que ven los usuarios
cuando no disponen de la versin correcta de Flash Player.
Guarde el archivo.
Edicin de la informacin de descarga de Flash Player
Al insertar un archivo SWF en una pgina, Dreamweaver inserta cdigo que detecta si el usuario
INESEM
2 / 27
dispone de la versin correcta de Flash Player.
Si no dispone de ella, la pgina mostrar un contenido alternativo predeterminado que solicita al
usuario que descargue la versin ms reciente. Puede cambiar este contenido alternativo en
cualquier momento.
Este procedimiento tambin es aplicable a archivos FLV.
En la vista Diseo de la ventana de documento, seleccione el archivo SWF o el archivo FLV.
Haga clic en el icono de ojo de la ficha del archivo SWF o el archivo FLV.
Edite el contenido del mismo modo que cualquier otro contenido de Dreamweaver
Haga clic en el icono de archivo de nuevo para regresar a la vista de archivo SWF (o FLV).
INESEM
3 / 27
2. Elementos multimedia y jQuery
Propiedades de archivos SWF
Puede establecer las propiedades de los archivos SWF en el inspector de propiedades.
Seleccione un archivo SWF o una pelcula Shockwave y establezca las opciones en el inspector de
propiedades (Ventana > Propiedades). Para ver todas las propiedades, haga clic en la flecha de
ampliacin situada en la esquina inferior derecha del inspector de propiedades.
ID Especifica un ID exclusivo para el archivo SWF. Introduzca un ID en el cuadro de texto sin
ttulo que aparece a la izquierda del inspector de propiedades. A partir de la versin
Dreamweaver CS4, es necesario un ID exclusivo.
An (Ancho) y Al (Alto) Especifican el ancho y el alto de la pelcula en pxeles.
Archivo Especifica la ruta del archivo SWF o Shockwave. Haga clic en el icono de carpeta para
indicar un archivo o escriba la ruta correspondiente.
Origen Especifica la ruta del documento de origen (el archivo FLA) si estn instalados en el
equipo Dreamweaver y Flash. Para editar un archivo SWF, actualice el documento de origen de
la pelcula.
Fondo Especifica un color de fondo para la zona de la pelcula. Este color tambin aparecer
cuando la pelcula no se est reproduciendo (mientras se carga y despus de haberse
reproducido).
Editar Inicia Flash para actualizar un archivo FLA (un archivo creado en la herramienta de
edicin de Flash). Esta opcin estar desactivada si no tiene instalado Flash en el equipo.
Clase Le permite aplicar una clase CSS a la pelcula.
Bucle Hace que la pelcula se reproduzca continuamente. Si Bucle no est seleccionado, la
pelcula se reproducir una vez y se detendr.
Rep. autom. (Reproduccin automtica) Reproduce automticamente la pelcula al cargar la
pgina.
Espacio V y Espacio H Especfica el nmero de pxeles de espacio en blanco que habr por
encima, por debajo y a ambos lados de la pelcula.
Calidad Controla el antialias durante la reproduccin de la pelcula. Los valores altos mejoran
el aspecto de las pelculas. No obstante, con valores altos, las pelculas requieren un
INESEM
4 / 27
procesador ms rpido para mostrar la imagen correctamente en la pantalla. El valor Baja
favorece la velocidad sobre el aspecto, mientras que el valor Alta antepone el aspecto a la
velocidad. Baja automtica favorece la velocidad, pero mejora el aspecto siempre que resulte
posible. Alta automtica favorece ambas cualidades en un principio, aunque, si es necesario,
luego sacrifica el aspecto en pos de la velocidad.
Escala Determina cmo se ajusta la pelcula a las dimensiones establecidas por los cuadros de
texto de ancho y alto. La configuracin predeterminada hace que la pelcula se reproduzca
entera.
Alinear Determina cmo se alinear la pelcula en la pgina.
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).
Reproducir Reproduce la pelcula en la ventana de documento.
Parmetros Abre un cuadro de dilogo para introducir parmetros adicionales que se
transferirn a la pelcula. La pelcula deber estar diseada para recibir estos parmetros
adicionales.
INESEM
5 / 27
3. Insertar archivos FLV
Puede aadir fcilmente vdeo FLV a las pginas Web sin necesidad de utilizar la herramienta de
creacin de Flash. Para poder empezar, debe disponer de un archivo FLV codificado.
Dreamweaver inserta un componente SWF que muestra el archivo FLV; cuando se visualiza en un
navegador, este componente muestra el archivo FLV seleccionado, as como un conjunto de
controles de reproduccin.
Dreamweaver ofrece las opciones siguientes para mostrar vdeo FLV a los visitantes de su sitio:
Descarga progresiva de vdeo Descarga el archivo FLV en el disco duro del visitante del sitio
y lo reproduce. Sin embargo, a diferencia de los mtodos tradicionales de entrega de vdeo de
tipo "descarga y reproduccin", la descarga progresiva permite iniciar la reproduccin del
archivo de vdeo antes de que haya finalizado la descarga.
Flujo de vdeo Transfiere el contenido de vdeo y lo reproduce en una pgina Web
transcurrido un breve periodo de bfer que garantice una reproduccin fluida. Para activar el
flujo de vdeo en las pginas Web, debe tener acceso a Adobe Flash Media Server.
INESEM
6 / 27
Al igual que sucede con los archivos SWF, al insertar un archivo FLV, Dreamweaver inserta cdigo
que detecta si el usuario dispone de la versin correcta de Flash Player para ver el vdeo. Si el
usuario carece de la versin correcta, la pgina muestra contenido alternativo que solicita al usuario
que descargue la versin ms reciente de Flash Player.
Seleccione Insertar > Medios > Flash Video.
En el cuadro de dilogo Insertar FLV, seleccione Descarga progresiva de vdeo o Flujo de vdeo
en el men emergente Tipo de vdeo.
URL Especifica una ruta de acceso relativa o absoluta al archivo FLV. Para especificar una ruta
de acceso relativa (por ejemplo, miruta/mivideo.flv), haga clic en el botn Examinar, desplcese
hasta el archivo FLV y seleccinelo. Para especificar una ruta de acceso absoluta, escriba el
URL (por ejemplo, http://www.ejemplo.com/mivideo.flv) del archivo FLV.
Aspecto Especifica el aspecto del componente de vdeo. Se muestra una presentacin
preliminar del aspecto seleccionado bajo el men emergente Aspecto.
Ancho Especifica el ancho del archivo FLV en pxeles. Para que Dreamweaver calcule el ancho
exacto del archivo FLV, haga clic en el botn Detectar tamao. Si Dreamweaver no puede
calcular el ancho, deber introducir un valor de anchura.
INESEM
7 / 27
Altura Especifica el alto del archivo FLV en pxeles. Para que Dreamweaver calcule el alto
exacto del archivo FLV, haga clic en el botn Detectar tamao. Si Dreamweaver no puede
calcular el alto, deber introducir un valor de altura.
Restringir Mantiene la misma relacin de aspecto entre el ancho y el alto del componente de
vdeo. Esta opcin est activada de forma predeterminada.
Reproduccin automtica Especifica si el archivo se va a reproducir al abrir la pgina Web.
Rebobinado automtico Especifica si el control de reproduccin vuelve al punto de inicio
cuando finalice la reproduccin.
Haga clic en Aceptar para cerrar el cuadro de dilogo y aadir el archivo FLV a la pgina Web.
INESEM
8 / 27
4. Insertar sonido: Formatos de Audio, Incrustacin de un

archivo de sonido, Incrustacin de un archivo de video.
Formatos de Audio
Si lo desea, puede aadir sonido a una pgina Web. Existen distintos tipos de archivos de sonido,
como .wav, .midi y .mp3, entre otros.
Los factores que hay que tener en cuenta antes de optar por un formato y un mtodo para aadir
sonido son: su finalidad, el tipo de usuarios a los que est destinado, el tamao de archivo, la calidad
de sonido y las diferencias en los navegadores.
Cada navegador trata los archivos de sonido de una forma muy distinta. Si lo desea, puede aadir un
archivo de sonido a un archivo SWF y luego incrustar el archivo SWF para mejorar la coherencia.
La siguiente lista describe los formatos de archivo de audio ms comunes junto con algunas de sus
ventajas y desventajas en relacin con el diseo Web.
.midi o .mid (Interfaz digital para instrumentos musicales, Musical Instrument Digital
Interface) Este formato es para msica instrumental. Los archivos MIDI son compatibles con
numerosos navegadores y no precisan ningn plug-in. Aunque su calidad de sonido es muy alta,
sta puede variar en funcin de la tarjeta de sonido del visitante. Un archivo MIDI pequeo
puede contener un clip de sonido de larga duracin. Los archivos MIDI no se pueden grabar y
deben sintetizarse en un ordenador con hardware y software especiales.
.wav (Extensin de forma de onda, Waveform Extension) Estos archivos ofrecen una
buena calidad de sonido, son compatibles con numerosos navegadores y no requieren ningn
plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, a travs de un
micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin
de los clips de sonido que se pueden utilizar en las pginas Web.
.aif (Formato de archivo de intercambio de audio, Audio Interchange File Format o
AIFF) El formato AIFF, al igual que el formato WAV, ofrece buena calidad de sonido, se puede
reproducir en la mayora de los navegadores y no requiere plug-in. Tambin se pueden grabar
archivos AIFF desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran
INESEM
9 / 27
tamao de archivo limita considerablemente la duracin de los clips de sonido que se pueden
utilizar en las pginas Web.
.mp3 (Audio del Grupo de Expertos en Imgenes en Movimiento, Motion Picture
Experts Group Audio o MPEG-Audio Nivel-3) Un formato comprimido que reduce
considerablemente el tamao de los archivos de sonido. La calidad de sonido es excelente: si se
graba y comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD. La
tecnologa MP3 permite reproducir el archivo en flujo de modo que el visitante no tenga que
esperar a que se descargue todo el archivo para escucharlo. Sin embargo, el tamao del
archivo es superior al de un archivo Real Audio, por lo que una cancin entera puede tardar
bastante en descargarse en una conexin de mdem de acceso telefnico (lnea telefnica)
tpica. Para reproducir archivos MP3, los visitantes debern descargar e instalar una aplicacin
auxiliar o un plug-in como QuickTime, Windows Media Player o RealPlayer.
.ra, .ram, .rpm o Real Audio Este formato tiene un alto grado de compresin con tamaos de
archivo ms pequeos que MP3. Descarga archivos de canciones completas en un perodo de
tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde un servidor Web
normal, los visitantes pueden comenzar a escuchar el sonido antes de que el archivo se haya
descargado por completo. Los visitantes debern descargar e instalar la aplicacin auxiliar o plug-
in RealPlayer para reproducir estos archivos
.qt, .qtm, .mov o QuickTime Es un formato de audio y de vdeo desarrollado por Apple
Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo utilizan la
mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin. Los PC
tambin pueden reproducir archivos en formato QuickTime, pero requieren un controlador de
QuickTime especial. QuickTime admite la mayora de los formatos de codificacin, como
Cinepak, JPEG y MPEG..
Adems de los formatos ms comunes enumerados anteriormente, existen muchos otros formatos de
archivo de audio y vdeo que pueden utilizarse en la Web
Incrustacin de un archivo de sonido
Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido slo se reproduce
si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido.
INESEM
10 / 27
Puede incrustar archivos si desea utilizar msica de fondo o si quiere controlar el volumen, el
aspecto del reproductor en la pgina o los fragmentos de inicio y final del archivo de sonido.
Al incorporar archivos de sonido en pginas Web, medite detenidamente cul ser su uso en el sitio
Web y cmo utilizarn los visitantes del sitio estos recursos multimedia.
Proporcione siempre un control para desactivar o activar la reproduccin de sonido, por si los
visitantes no desean escuchar el contenido de audio.
En la vista Diseo, site el punto de insercin en el lugar en el que desea colocar el archivo y
luego siga uno de estos procedimientos:
En la categora Medios del panel Insertar, seleccione el icono Plug-in del men desplegable.
Seleccione Insertar > Medios > Plug-in.
Localice el archivo de audio y haga clic en Aceptar.
Especifique el ancho y el alto introduciendo los valores en los cuadros de texto
correspondientes del inspector de propiedades o cambiando el tamao del marcador de
posicin del plug-in en la ventana de documento.
Estos valores determinan con qu tamao se muestran los controles de audio en el navegador.
INESEM
11 / 27
Incrustacin de un archivo de video
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 inserta vdeo de un archivo alojado en nuestro sitio. No a mostrar
vdeos de sitios especializados, como youTube.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda,
opcin Plug-in.
Puedes ver el vdeo (si tienes el plug-in adecuado).
El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el
de los archivos de audio, ya que ambos se insertan como Plug-in.
Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no puede obtener el
tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es mejor borrarlos, y as el
vdeo se mostrar con su tamao original.
Si conocemos el tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener
en cuenta el tamao de los controles de reproduccin, que depende de cada navegador.
Como ya hemos dicho, todos los objetos insertados a travs de la opcin Plug-in precisan que el
usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos.
En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de
audio o de vdeo) que ha de reproducirse.
INESEM
12 / 27
En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el
campo URL plg una pgina en la que pueda encontrarlo.
No ser necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un
archivo ms raro
INESEM
13 / 27
5. Insercin de un widget de jQuery UI
Los widgets son pequeas aplicaciones Web escritas en lenguajes como DHTML y JavaScript que
pueden insertarse y ejecutarse dentro de una pgina Web. Las widgets ayudan a ofrecer un modo de
imitacin de las experiencias de escritorio en una pgina Web.
JQuery es un framework de javaScript, es decir, es una librera que contiene cdigo o rutinas
habituales ya listas para usar. Los desarrolladores utilizan los frameworks para las tareas ms
bsicas puesto que ya estn implementadas y no necesitan volver a programarse.
Insercin de un widget jQuery
Cuando se inserta un widget jQuery, se aade al cdigo:
Referencias a todos los archivos dependientes.
Etiquetas script con la API jQuery para el widget. Los widgets adicionales se aaden a la misma
etiqueta script.
jQuery UI ofrece una combinacin de interacciones, efectos, widgets, utilidades y temas diseados
para trabajar bien juntos o por su cuenta. En la siguiente pgina http://jqueryui.com/demos/se
encuentran las demos, vista de cdigo, construccin de temas, instrucciones de la API y el comienzo
del uso de la herramientas jQuery UI.
Esta pgina nos guiar para poder insertar en nuestra pgina Web elementos como:
Interacciones aade comportamientos bsicos basados en en ratn a cualquier elemento.
Pueden crear listas ordenadas, elementos de tamao variable, arrastrar y soltar elementos y
ms comportamientos con slo una lnea de cdigo. Las interacciones tambin realizan grandes
bloques para la construccin de ms widgets y aplicaciones complejas.
Widgets son controles con todas las funciones de la interfaz de usuario que traen la riqueza de
INESEM
14 / 27
las aplicaciones de escritorio a la Web. Todos los widgets ofrecen un ncleo slido con un
montn de puntos de extensin para personalizar el comportamiento, as como el apoyo del
tema completo.
Efectos aaden el soporte para la animacin de colores y transiciones de clase, as como el
aprovisionamiento de elementos cmodos adicionales. Adems, un conjunto completo de
efectos personalizados estn disponibles para su uso al mostrar y ocultar elementos o
simplemente para aadir un poco de atractivo visual.
Utilidades se usan por jQuery UI para construir interacciones y widgets.
Siguiendo la insercin de un widget jQuery:
Asegrese de que el cursor est en una ubicacin de la pgina en la que desee insertar el
widget.
Seleccione Insertar > IU de jQuery y elija el widget que desea insertar. Si utiliza el panel de
Insertar, los widgets estn presentes en la seleccin de IU de jQuery del panel Insertar.
Cuando seleccione un widget jQuery, se mostrarn sus propiedades en el Panel de Propiedades.
Puede obtener una vista previa de los widgets jQuery en la vista en vivo o en un navegador que
admita widgets jQuery.
Cuando inserta un widget, Dreamweaver incluye automticamente los archivos JavaScript
necesarios en el sitio al guardar la pgina
Cuando se inserta un widget, conjunto de datos o efecto de jQuery UI en una pgina guardada,
INESEM
15 / 27
Dreamweaver crea un directorio jQueryAssets en el sitio y guarda los correspondientes archivos
JavaScript y CSS en esa ubicacin. Puede cambiar la ubicacin predeterminada en la que
Dreamweaver guarda los activos de jQuery si prefiere guardarlos en otro lugar.
Seleccione el sitio en el cuadro de dilogo Administrar sitios y haga clic en Editar.
En cuadro de dilogo Configuracin del sitio, expanda la Configuracin avanzada y seleccione
la categora jQuery.
Introduzca la ruta de la carpeta que desea utilizar para los activos de jQuery y haga clic en
Aceptar. Tambin puede hacer clic en el icono de carpeta para localizar una ubicacin.
Modificacin de widgets jQuery
1. seleccione el widget que desea modificar.
2. Modifique las propiedades en el panel de Propiedades
Propiedades
INESEM
16 / 27
6. Widget de acorden: Personalizacin del widget de acorden
Un widget de acorden es un conjunto de paneles que pueden contraerse y que tienen capacidad
para almacenar una gran cantidad de contenido en un espacio reducido. Los visitantes pueden hacer
clic en la ficha del panel para mostrar u ocultar el contenido almacenado en el acorden. Los
paneles del acorden se amplan o contraen en funcin de las fichas que elijan los visitantes.
Solamente puede haber un panel de contenido abierto y visible en un acorden en cada momento.
En el siguiente ejemplo se muestra un widget de acorden, con el primer panel ampliado:
Seleccione Insertar > jQuery UI > Accordion o Acorden.
Tambin puede insertar un widget de acorden a travs de la categora jQuery UI del panel
Insertar.
INESEM
17 / 27
Adicin de un panel a un widget de acorden
Seleccione un widget de acorden en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), haga clic en el botn Ms (+) de
Paneles.
(Opcional) Seleccione el texto del panel en la vista Diseo y modifquelo para cambiar su
nombre.
ID Muestra el nombre del acorden para el uso en la seleccin de CSS o JavaScript.
Panels Muestra el nombre de cada uno de los paneles que contiene el acorden, basado en las
entradas de las reas de seccin de cada panel.
Panel move buttons
Mueven los elementos seleccionados para subirlos o bajarlos en la lista.
Active el panel que se muestra de forma predeterminada. La numeracin empieza en 0, ya que
es la forma en JavaScript, si quieres que el primer panel que se activa cuando se carga la
pgina, este campo debe contener 0.
Event Es el evento de usuario que activar una animacin panel. Sus opciones son clic y
mouseover.
Height Style Controla la altura del acorden y de cada panel, los valores posibles son:
Auto, Todos los paneles se ajustarn a la altura del panel ms alto.
Fill, Expande la altura disponible basada en la altura del acorden.
Content, Cada panel ser tan alto como slo su contenido.
Disabled seleccionando esto deshabilita las acciones del acorden. Es til si usted quiere tener
un acorden en la pgina pero quiere desactivarlo en ciertas circunstancias, tal vez mediante
INESEM
18 / 27
un script se puede habilitar cuando se cumplan ciertas condiciones. Tenga en cuenta que si
selecciona esto no quita el acorden de la pgina, sino que slo le impide trabajar con l.
Collapsible Si est seleccionado, el usuario ser capaz de de cerrar todas las secciones del
acorden. Si no est seleccionado, una seccin siempre estar abierta. Se prefiere tenerlo
seleccionado, la primera seccin siempre aparecer cuando la pgina est cargada.
Animate Permite elegir el tipo de animacin en el uso del acorden.
Duration Es la duracin de la animacin, en milisegundos. Por defecto est a 400
milisegundos.
Icons Te permite elegir la cabecera y activar los iconos de la cabecera.
Para aadir o eliminar ms paneles pulse
Apertura de un panel para su edicin Siga uno de estos procedimientos:
Pase el puntero del ratn por la ficha del panel que desea abrir en la vista Diseo y, a
continuacin, haga clic en el icono de ojo que aparece a la derecha de la ficha. Seleccione un
widget de acorden en la ventana de documento y, a continuacin, haga clic en el nombre del
panel para editarlo en el men Paneles del inspector de propiedades (Ventana > Propiedades).
Cambio del orden de los paneles Seleccione un widget de acorden en la ventana de
documento. En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del
panel Acorden que desea mover. Haga clic en las flechas arriba o abajo para mover el panel
en la direccin deseada.
Personalizacin del widget de acorden
Aunque el inspector de propiedades permite realizar cambios simples a un widget de acorden, no
admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de acorden y
crear un acorden con el estilo que desee.
INESEM
19 / 27
Limitacin del ancho de un acorden
De forma predeterminada, el widget de acorden se ampla para llenar el espacio disponible. No
obstante, puede limitar el ancho de un widget de acorden estableciendo una propiedad de ancho
para el contenedor del acorden.
Abra el archivo SpryAccordion.css y localice la regla .Accordion CSS. Esta regla define las
propiedades del elemento de contenedor principal del widget de acorden.
Aada una propiedad y un valor de ancho a la regla, por ejemplo width: 300px;.
INESEM
20 / 27
7. Widget de Autocompletar
El widget de jQuery UI Autocompletar o Autocomplete se parece a un cuadro de texto, pero su
propsito es proporcionar consejos y ayudar a los visitantes rellenar los campos de texto con las
opciones apropiadas. Para trabajar sus propiedades, Autocompletar necesita una lista (tambin
conocido como una matriz de valores). Puede proporcionar esa lista como un archivo externo
JavaScript o puede crear una secuencia de comandos en la pgina para hacerlo.
Seleccione Insertar > jQuery UI > Autocomplete
Tambin puede insertar un widget de acorden a travs de la categora jQuery UI del panel
Insertar.
Insercin del widget Autocompletar
Seleccione Insertar > jQuery UI > Autocomplete.
INESEM
21 / 27
ID Muestra el nombre del acorden para el uso en la seleccin de CSS o JavaScript.
Source los valores de la lista de autocompletado, ya sea escrita en el campo o una direccin
URL a una lista de valores.
Min Length El numero mnimo de caracteres que el usuario debe teclear antes de realizar una
bsqueda.
Auto Focus si est seleccionado, el primer elemento estar automticamente enfocado cuando
se muestra el men.
Position Identifica la posicin del men de sugerencias en relacin con el elemento de entrada
asociado. El de la opcin predeterminada es el elemento de entrada, pero se puede especificar
otra posicin del elemento.
My Define la posicin sobre el elemento que se est posicionando para alinearse con
el elemento de destino.
At Define la posicin sobre el elemento de destino para alinear el elemento
posicionado en contra.
Collision Cuando el elemento posicionado se desborda de la ventana en alguna
direccin, moverlo a una posicin alternativa.
Delay el retardo en milisegundos entre que se produce una combinacin de teclas y cuando se
realiza una bsqueda. Cuando es 0 el retraso tiene sentido para los datos locales, pero puede
producirse una gran carga de datos remotos, que es menos recomendable.
Append to elemento del documento al que se debe anexar. Cuando el valor es nulo, los padres
del campo de entrada sern revisados para una clase ui-frontal. Si se encuentra un elemento de
ui-fontal, el autocompletar se aadir a ese elemento. Independientemente del valor, si no se
encuentra ningn elemento, el men se agregar al cuerpo del documento.
INESEM
22 / 27
8. Prcticas
8.1. Prctica 1: Plantillas
Vamos a crear una carpeta que lamamos lec_diez y dentro de esta carpeta creamos un HTML, vamos
a usar para este HTML, algunas de las plantillas con etiquetas ya diseadas de Dreamweaver:
Guardamos este documento como ejercico1.HTML
Vamos a aadir a este documento los siguientes swf, que descargamos pulsando desde el cd
Guardamos este documento como ejercicio1.HTML
8.2. Prctica 2: Aadir sonido.
Vamos a crear un documento HTML, el cual llamamos ejercicio2, y agregamos como sonido de fondo
el siguiente archivo que descargamos en el cd.
Guardamos el documento como ejercicio2.HTML
8.3. Prctica 3: Widget de paneles en fichas
Creamos un tercer documento basado en una plantilla llamado ejercicio3.HTML, incluiremos en el
un Widget de paneles en fichas, pero antes de ello desde la configuracin del sitio cambiamos el
INESEM
23 / 27
destino de la carpeta jQuery a la carpeta lec_diez.
Creamos en nuestro documento un Widget de paneles en fichas
Cambiamos las reglas de los estilos de este para que coordine con nuestra plantilla:
Guardamos este documento como ejercicio3.HTML
INESEM
24 / 27
Recuerda
Al insertar un archivo SWF en una pgina, Dreamweaver inserta cdigo que detecta si el
usuario dispone de la versin correcta de Flash Player.
Si no dispone de ella, la pgina mostrar un contenido alternativo predeterminado que solicita
al usuario que descargue la versin ms reciente. Puede cambiar este contenido alternativo en
cualquier momento.
Puede establecer las propiedades de los archivos SWF en el inspector de propiedades.
Puede aadir fcilmente vdeo FLV a las pginas Web sin necesidad de utilizar la herramienta
de creacin de Flash. Para poder empezar, debe disponer de un archivo FLV codificado.
Si lo desea, puede aadir sonido a una pgina Web. Existen distintos tipos de archivos de
sonido, como .wav, .midi y .mp3, entre otros.
Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido slo se
reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido
elegido.
El framework de jQuery es una biblioteca JavaScript que proporciona a los diseadores Web la
capacidad de crear pginas Web que ofrezcan una experiencia ms completa a los visitantes.
Un widget de acorden es un conjunto de paneles que pueden contraerse y que tienen
capacidad para almacenar una gran cantidad de contenido en un espacio reducido.
Un widget de autocompletar sugiere valores de autocompletado a la hora de buscar contenido
en una Web.
Un widget de paneles en fichas es un conjunto de paneles que pueden almacenar contenido en
un espacio reducido.
INESEM
25 / 27
Autoevaluacin
1. Los archivos .fla Con que programa los podemos abrir?
Con Photoshop
Con Dreamweaver
Con Flash
2. Los archivos swf pueden verse en navegadores?
Solo en el Explorer
Solo en el Mozilla
En ambos navegadores se pueden ver
3. Desde dnde establecemos las propiedades de los archivos SWF?
Desde el panel archivo
Desde el panel propiedades
Desde los estilos
4. Con los archivos FLV vemos en el navegador?
INESEM
26 / 27
Un PDF
Una imagen
Un conjunto de controles de reproduccin.
5. Cul de estos formatos tiene un alto grado de compresin?
.aif
.midi
Real Audio
INESEM
27 / 27
1. Plantillas: Tipos de regiones de plantillas. Aprenderemos que
una plantilla es un tipo especial de documento que sirve para
crear un diseo de pgina fijo, es muy til.
Una plantilla es un tipo especial de documento que sirve para crear un diseo de pgina "fijo";
puede crear documentos basados en la plantilla que heredan su diseo de pgina.
Al disear una plantilla, usted especifica como "editables" aquellos contenidos de un documento
basado en dicha plantilla que los usuarios pueden editar.
Las plantillas permiten a los autores controlar qu elementos de la pgina pueden editar los usuarios
de la plantilla (como los redactores, los diseadores grficos y otros desarrolladores Web).
El autor de una plantilla puede incluir varios tipos de regiones de plantilla en un documento.
La utilizacin de plantillas le permite actualizar varias pginas a la vez. Un documento que se crea a
partir de una plantilla permanece conectado a ella (a menos que separe el documento
posteriormente).
Puede modificar una plantilla e inmediatamente actualizar el diseo en todos los documentos
basados en ella.
Tipos de regiones de plantillas
Al guardar un documento como plantilla, se bloquean la mayora de las regiones del documento.
Como autor de la plantilla, debe especificar qu regiones del documento basado en plantilla sern
editables insertando regiones editables o parmetros editables en la plantilla.
A medida que cree la plantilla, podr realizar cambios tanto en las regiones editables como en las
bloqueadas.
Sin embargo, en un documento basado en plantilla, el usuario de la plantilla slo podr realizar
cambios en las regiones editables, no en las regiones bloqueadas.
Una plantilla contiene cuatro tipos de regiones:
Una regin editable Una regin no bloqueada de un documento basado en plantilla, es decir,
una seccin que el usuario de la plantilla puede editar. El autor de una plantilla puede
especificar cualquier rea de la plantilla como editable.
Para que una plantilla sea efectiva, deber contener al menos una regin editable. En caso
contrario, las pginas basadas en la plantilla no se podrn editar.
Una regin repetida Una seccin del diseo del documento que se establece de forma que el
usuario de la plantilla pueda aadir o eliminar copias de la regin en un documento basado en
la plantilla segn resulte oportuno. Por ejemplo, puede definir que una fila de una tabla se
repita.
Las secciones repetidas son editables para que el usuario de la plantilla pueda editar el
contenido del elemento repetido, mientras que el diseo propiamente dicho est controlado por
el autor de la plantilla.
Existen dos tipos de regiones repetidas que se pueden insertar en una plantilla: regin repetida
y tabla repetida.
Una regin opcional Una seccin de la plantilla en la que hay contenido (como texto o una
imagen) que puede aparecer o no en un documento. En la pgina basada en la plantilla, el
usuario de la plantilla suele controlar si el contenido se mostrar.

Un atributo de etiqueta editable Permite desbloquear un atributo de etiqueta de una
plantilla de modo que el atributo pueda editarse en una pgina basada en plantilla.
Por ejemplo, puede "bloquear" qu imagen aparece en el documento, pero dejar que el usuario
de la plantilla establezca alineacin izquierda, derecha o central.

2. Creacin de plantillas: Creacin de una plantilla a partir de
un documento existente, Utilizacin del panel Activos para
crear una plantilla nueva.
Puede crear una plantilla a partir de un documento existente (por ejemplo, un documento HTML,
Adobe ColdFusion o Microsoft Active Server Pages) o a partir de un documento nuevo.
Una vez creada la plantilla, puede insertar regiones de plantillas y establecer las preferencias de
plantilla para el color de cdigo y el de resaltado de la regin de plantilla.
Creacin de una plantilla a partir de un documento existente
Puede crear una plantilla a partir de un documento existente.
Abra el documento que desea guardar como plantilla.
Seleccione Archivo > Guardar como plantilla.
En el panel Insertar, haga clic en el botn Plantillas y, a continuacin, seleccione
Crear plantilla.
Seleccione un sitio para guardar la plantilla en el men emergente Sitio y, a continuacin,
introduzca un nombre exclusivo para la plantilla en el cuadro de texto Guardar como.

Haga clic en Guardar. Dreamweaver guarda el archivo de plantilla en la carpeta Templates del
sitio en la carpeta raz local del sitio, con la extensin de archivo .dwt. Si no existe la carpeta
Templates en el sitio, Dreamweaver la crear automticamente cuando guarde una plantilla
nueva.
No saque las plantillas de la carpeta Templates ni guarde en ella archivos que no sean
plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raz local. Si lo hace se
producirn errores en las rutas de las plantillas.
Utilizacin del panel Activos para crear una plantilla nueva
En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte
izquierda del panel.
Haga clic en el botn Nueva plantilla que se encuentra en la parte inferior del panel Activos.
Se aadir una plantilla nueva sin ttulo a la lista de plantillas del panel Activos.
Con la plantilla an seleccionada, escriba un nombre y presione Intro (Windows) o Retorno
(Macintosh).
Dreamweaver crea una plantilla en blanco en el panel Activos y la carpeta Templates.
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.
3. Crear regiones editables
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.
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, 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.
Este es el aspecto de una plantilla con regiones editables:

4. Crear regiones repetidas: Insercin de una tabla repetida
Una regin repetida es una seccin de una plantilla que se puede duplicar muchas veces en una
pgina basada en plantilla. Generalmente, las regiones repetidas suelen utilizarse con tablas.
Sin embargo, tambin es posible definir una regin repetida para otros elementos de la pgina.
Las regiones repetidas permiten controlar el diseo de la pgina mediante la repeticin de
determinados elementos, como un elemento de catlogo y un diseo de descripcin, o la repeticin
de una fila de datos como una lista de elementos.
Puede utilizar dos objetos de plantilla de regin repetida: regin repetida y tabla repetida.
Una regin repetida no tiene por qu ser necesariamente una regin editable.
Para convertir en editable el contenido de una regin repetida (por ejemplo, para que un usuario
pueda introducir texto en una celda de la tabla en un documento basado en una plantilla), deber
insertar una regin editable en la regin repetida.
Seleccione el texto o el contenido que desea definir como regin repetida.
Elija Insertar > Plantilla > Regin repetida
En el cuadro de texto Nombre, introduzca un nombre exclusivo para la regin. (No se puede
usar el mismo nombre para ms de una regin repetida en una plantilla.)
Haga clic en Aceptar.

Insercin de una tabla repetida
Puede utilizar una tabla repetida para crear una regin editable (en formato de tabla) con filas
repetidas. Puede definir atributos de tabla y establecer qu celdas de la tabla son editables.
En la ventana de documento, site el punto de insercin en el documento donde desea insertar
la tabla de repeticin.
Seleccione Insertar > Plantilla > Tabla de repeticin.
Filas Determina el nmero de filas de la tabla.
Columnas Determina el nmero de columnas de la tabla.
Relleno de celda Determina el nmero de pxeles entre el contenido de una celda y los lmites de la
misma.
Espacio entre celdas Determina el nmero de pxeles entre celdas de tabla contiguas.
Si no se especifican los valores de espaciado y relleno de celda, la mayora de los navegadores
mostrar la tabla como si el relleno de celda estuviera configurado en 1 y el espaciado de celda
estuviera configurado en 2. Para garantizar que los navegadores muestren la tabla sin relleno ni
espaciado, establezca Relleno de celda y Espacio entre celdas con el valor 0.

Ancho Especfica el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del
navegador.
Borde Especfica el ancho en pxeles de los bordes de la tabla.
Si no se especifica un valor para el borde, la mayora de los navegadores mostrar la tabla como si el
borde estuviera configurado en 1. Para garantizar que los navegadores muestren la tabla sin borde,
establezca Borde con el valor 0. Para ver los lmites de las celdas y la tabla cuando el borde es 0,
seleccione Ver > Ayudas visuales > Bordes de tabla.
Repetir filas de la tabla Especifica qu filas de la tabla se incluyen en la regin repetida.
Fila inicial Establece el nmero de fila introducido como primera fila para incluir en la regin
repetida.
Fila final Establece el nmero de fila introducido como ltima fila para incluir en la regin repetida.
Nombre de la regin Permite establecer un nombre exclusivo para la regin repetida.

5. Regiones opcionales de una plantilla: Insercin de una
regin opcional no editable, Insercin de una regin opcional
editable.
Una regin opcional es una regin de una plantilla que los usuarios pueden definir como visible u
oculta en un documento basado en plantilla. Utilice una regin opcional cuando desee establecer
condiciones para mostrar contenido en un documento.
Existen dos tipos de regiones opcionales:
Las regiones opcionales no editables, que permiten a los usuarios mostrar y ocultar regiones
marcadas de forma especial sin permitirles editar el contenido.
Las regiones opcionales editables, que permiten a los usuarios de las plantillas definir si la
regin se muestra o se oculta, as como editar el contenido de la regin.
Insercin de una regin opcional no editable
En la ventana de documento, seleccione el elemento que desea definir como regin opcional.
Seleccione Insertar > Plantilla > Regin opcional.

Introduzca un nombre para la regin opcional, haga clic en la ficha Avanzado si desea definir
valores para la regin opcional y haga clic en Aceptar.
Insercin de una regin opcional editable
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar la
regin opcional.
Seleccione Insertar > Plantilla > Regin opcional editable.
Introduzca un nombre para la regin opcional, haga clic en la ficha Avanzado si desea definir
valores para la regin opcional y haga clic en Aceptar.

6. 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 sencilla.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar
plantilla a pgina.
A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla
aparezcan nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese
caso se muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la regin del documento vaco
con el nombre de alguna regin de la plantilla
A travs de Mover contenido a la nueva regin: se puede seleccionar una regin de la plantilla, para
establecer as la correspondencia que se necesitaba.
Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.
Para que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar,
Plantillas, opcin Separar de plantilla

7. Edicin y actualizacin de plantillas
Al realizar cambios en una plantilla y guardarlos, se actualizan todos los documentos basados en la
plantilla. Tambin puede actualizar manualmente un documento basado en plantilla o todo el sitio si
es necesario.
Puede actualizar todas las pginas del sitio o nicamente las pginas correspondientes a una
plantilla determinada.
Seleccione Modificar > Plantillas > Actualizar pginas.
En el men Buscar en, siga uno de estos procedimientos:
Para actualizar todos los archivos del sitio seleccionado a sus correspondientes
plantillas, seleccione Todo el sitio y, a continuacin, seleccione el nombre del sitio en
el men emergente adyacente.
Para actualizar los archivos correspondientes a una plantilla determinada, seleccione
Archivos que usan y, a continuacin, seleccione el nombre de plantilla en el men
emergente adyacente.
Asegrese de que Plantillas est seleccionado en la opcin Actualizar.
Si no desea ver un registro de los archivos que Dreamweaver actualiza, desactive la opcin
Mostrar registro; de lo contrario, deje la opcin seleccionada.
Haga clic en Iniciar para actualizar los archivos como se ha indicado. Si selecciona la opcin
Mostrar registro, Dreamweaver proporcionar informacin sobre los archivos que intenta
actualizar, indicando si se han actualizado satisfactoriamente.

Haga clic en Cerrar.
8. Panel activos: Adicin de un activo a un documento
Utilice el panel Activos (Ventana > Activos) para administrar los activos del sitio actual. En el panel
Activos se muestran los activos del sitio asociados al documento activo en la ventana de documento.
El panel Activos ofrece dos formas de ver los activos:
Lista Sitio Enumera todos los activos del sitio, incluidos los colores y los URL que se utilizan
en los documentos del sitio.
Lista Favoritos Enumera nicamente los activos que haya elegido de forma explcita.
Para alternar entre estas dos vistas, seleccione el botn de opcin Sitio o Favoritos situado
sobre el rea de vista previa. (Estas dos vistas no estn disponibles para las categoras
Plantillas y Biblioteca.)
A mayora de las operaciones del panel Activos funcionan de la misma forma en ambas listas. Sin
embargo, algunas tareas slo se pueden realizar en la lista Favoritos.
En ambas listas, los activos quedan dentro de una de estas categoras:
Colores utilizados en los documentos y las hojas de estilos, incluidos los colores del texto, de los
diferentes fondos y de los vnculos.

URL Vnculos externos de los documentos del sitio actual, incluidos vnculos FTP, gopher, HTTP,
HTTPS, JavaScript, de correo electrnico (mailto) y de archivo local (file://).
Flash Archivos en cualquier versin de Adobe Flash. El panel Activos muestra archivos SWF
(archivos comprimidos creados con Flash), pero no FLA (Flash de origen).
Pelculas Archivos QuickTime o MPEG.
Scripts Archivos JavaScript o VBScript. Los scripts de archivos HTML, a diferencia de los JavaScript
o VBScript independientes, no aparecen en el panel Activos.
Plantillas Diseos de pgina maestra utilizados en mltiples pginas. La modificacin de una
plantilla modifica automticamente todas las pginas asociadas a ella.
Elementos de biblioteca Elementos de diseo que se utilizan en mltiples pginas. Cuando se
modifica un elemento de biblioteca, se actualizan todas las pginas que contienen ese elemento.
Adicin de un activo a un documento

En la vista Diseo, site el punto de insercin donde desea que aparezca el activo.
En el panel Activos, seleccione entre los botones de categoras de activos de la izquierda.
Seleccione Sitio o Favoritos en la parte superior del panel y, despus, seleccione el activo.
Arrastre el activo desde el panel hasta el documento.
Seleccione el activo en el panel y haga clic en Insertar.

9. Biblioteca: Creacin de un elemento de biblioteca basado en
una seleccin, Creacin de un elemento de biblioteca vaco,
Actualizar documento.
Una biblioteca es un archivo especial de Dreamweaver que contiene un conjunto de activos
individuales o copias de activos que puede colocar en las pginas Web. Los activos de una biblioteca
se denominan elementos de biblioteca.
Entre los elementos que puede almacenar en una biblioteca se encuentran imgenes, tablas, sonidos
y archivos creados con Adobe Flash.
Puede actualizar automticamente todas las pginas que utilizan un elemento de biblioteca cada vez
que modifique el elemento.
Por ejemplo, supongamos que est creando un sitio de gran tamao para una empresa que desea
que aparezca un eslogan en todas las pginas. Puede crear un elemento de biblioteca que contenga
el eslogan y utilizar dicho elemento de biblioteca en todas las pginas.
Si el eslogan cambia, puede cambiar el elemento de biblioteca y actualizar automticamente todas
las pginas que lo utilizan.
En el caso de elementos vinculados como imgenes, la biblioteca solamente almacena una referencia
al elemento. El archivo original debe permanecer en la ubicacin especificada para que el elemento
de biblioteca funcione correctamente.
Creacin de un elemento de biblioteca basado en una seleccin
En la ventana de documento, seleccione una parte de un documento que vaya a guardar como
elemento de biblioteca.
Arrastre la seleccin a la categora Biblioteca.
Haga clic en el botn Nuevo elemento de biblioteca, situado en la parte inferior de la categora
Biblioteca.
Escriba un nombre para el nuevo elemento de biblioteca y presione Intro (Windows) o Retorno
(Macintosh).
Dreamweaver guarda cada elemento de biblioteca como archivo independiente (con la
extensin de archivo .lbi) en la carpeta Library de la carpeta raz local del sitio.
Creacin de un elemento de biblioteca vaco
Compruebe que no hay nada seleccionado en la ventana de documento.
Si hay algo seleccionado, se colocar en el nuevo elemento de biblioteca.
En el panel Activos, seleccione la categora Biblioteca.
Haga clic en el botn Nuevo elemento de biblioteca, situado en la parte inferior del panel.
Con el elemento an seleccionado, escrbale un nombre y presione Intro (Windows) o Retorno
(Macintosh).
Para insertar un elemento de biblioteca en un documento arrastre un elemento de biblioteca del
panel Activos y sultelo en la ventana del documento.
Actualizar documento
Cuando hemos cambiado un elemento de la biblioteca hemos de actualizar este elemento.
Para la actualizacin del documento actual para que utilice la versin actual de todos los elementos
de biblioteca:
Elija Modificar > Biblioteca > Actualizar pgina actual.
Actualizacin del sitio completo o de todos los documentos que usen un elemento de biblioteca
concreto
Elija Modificar > Biblioteca > Actualizar pginas.

En el men emergente Buscar en, especifique qu debe actualizarse:
Para actualizar todas las pginas del sitio seleccionado, utilice la versin actual de todos los
elementos de biblioteca, seleccione Todo el sitio y, a continuacin, seleccione el nombre del
sitio en el men emergente adyacente.
Para actualizar todas las pginas del sitio actual que utilizan el elemento de biblioteca,
seleccione Archivos que usan y, a continuacin, seleccione el nombre de un elemento de
biblioteca en el men emergente adyacente.
Asegrese de que Elementos de biblioteca est seleccionado en la opcin Actualizar
Para actualizar plantillas al mismo tiempo, seleccione tambin la opcin Plantillas.
Haga clic en Iniciar.
Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar
registro, Dreamweaver generar un informe en el que se muestra si los archivos se han
actualizado correctamente, entre otra informacin.

10. Prcticas
10.1. Prctica 1: Aplicacin de plantilla.
Creamos una carpeta dentro de nuestro sitio la cual llamamos lec_once.
Descargamos la siguiente carpeta ejercicios desde el cd, esta carpeta contiene los documentos que
vamos a usar para los ejercicios de esta leccin.
Abrimos el documento ejercicio1.HTML y lo guardamos como una plantilla con el mismo nombre, se
no creara una carpeta llamada templates en la cual guardare las plantillas que use para los
ejercicios.
Vamos a trabajar ahora con la plantilla que acabamos de crear ejercicio1.dwt y vamos a convertir
cada foto en una regin editable.
Aplicamos esta plantilla a nuestro documento ejercicio1.HTML, si nos aparece el siguiente mensaje,
seleccionamos ningn lugar y pulsamos en utilizar para todo, esto lo haremos siempre que nos
aparezca este mensaje:
10.2. Prctica 2: Aadir a Biblioteca
Abrimos el documento ejercicio2.HTML y lo guardamos como una plantilla con el mismo nombre,
dentro de la carpeta templates.
Creamos las siguientes regiones editables en nuestra plantilla:

Aplicamos nuestra plantilla al ejercicio2.HTML
Vamos ahora a introducir dos elementos en nuestra biblioteca, la foto del faro y el titulo:
Guardamos nuestra plantilla y nuestro documento, si nos pregunta actualizar vnculos le decimos
que si:
10.3. Prctica 3: Creacin de regiones editables
Abrimos el documento ejercicio3.HTML y lo guardamos como una plantilla con el mismo nombre,
dentro de la carpeta templates.
Creamos las siguientes regiones editables en nuestra plantilla:

La foto una regin editable
El texto es una regin opcional editable.
En la parte baja creamos una tabla de repeticin:
Aplicamos nuestra tabla al documento ejercicio3.HTML y guardamos este documento y nuestra
plantilla.
Recuerda
Una plantilla es un tipo especial de documento que sirve para crear un diseo de pgina "fijo";
puede crear documentos basados en la plantilla que heredan su diseo de pgina.
Al guardar un documento como plantilla, se bloquean la mayora de las regiones del
documento.
Puede crear una plantilla a partir de un documento existente (por ejemplo, un documento
HTML, Adobe ColdFusion o Microsoft Active Server Pages) o a partir de un documento nuevo.
Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las
pginas, pero no podrn ser modificados.
Las regiones repetidas permiten controlar el diseo de la pgina mediante la repeticin de
determinados elementos, como un elemento de catlogo y un diseo de descripcin, o la
repeticin de una fila de datos como una lista de elementos.
Una regin opcional es una regin de una plantilla que los usuarios pueden definir como visible
u oculta en un documento basado en plantilla.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar
plantilla a pgina.
Al realizar cambios en una plantilla y guardarlos, se actualizan todos los documentos basados
en la plantilla. Tambin puede actualizar manualmente un documento basado en plantilla o
todo el sitio si es necesario.
Entre los elementos que puede almacenar en una biblioteca se encuentran imgenes, tablas,
sonidos y archivos creados con Adobe Flash.

Autoevaluacin
1. Podemos crear documentos basados en plantillas?
Si
No
Depende del documento
2. Cuantos tipos de regiones puede contener una plantilla?
Una
Dos
Cuatro
3. Cmo aparecen por defecto los elementos de una plantilla?
Como regiones repetidas
Como regiones editables
Bloqueados
4. Dentro de la plantilla pueden existir dos regiones editables con el mismo

nombre?
Depende de la regin
No
Si
5. Las regiones repetidas suelen utilizarse con:
Capas
Tablas
Mens

Curso Dreamweaver CC

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso Dreamweaver CC

Caricato da

Copyright:

Formati disponibili

1.

Objetivo del curso: Dreamweaver es uno de los programas

Permite un trabajo de diseo Web muy intuitivo.

elemento que insertamos en la pgina Web.

formularios y elementos multimedia.

Es recomendable conocimiento previo sobre diseo Web, aunque no es estrictamente necesario.

ser nico en Internet. Por ejemplo, "www.masadelante.com" es el nombre de dominio de la pgina

dominios, pero un dominio slo puede apuntar a un servidor.

(WWW), el nombre de la organizacin (masadelante) y el tipo de organizacin (com).

a cabo el equivalente de lo anterior en la red, es decir, registrar el nombre de dominio.

marca nica en Internet, un acceso a su Web y un correo electrnico personalizado.

http://216.34.94.183 en vez de http://dominio.com).

registro de dominios y alojamiento de pginas Web.

etc................. en la pgina principal de arsys

que otras mquinas puedan utilizar esos datos.

servidores en Internet y muchos tipos de servidores, pero comparten la funcin comn de

proporcionar el acceso a los archivos y servicios.

ordenador de un usuario cuando el usuario las solicita.

puedas tomar una decisin informada.

Que es un alojamiento Web?

correos (servidor de correo).

Wide Web), mediante Internet.

Clases de Alojamiento Web

hablar de los siguientes tipos de alojamiento Web:

Alojamiento Web gratis

alojamiento Web puede ser el adecuado para ti.

sube aunque ganas en fiabilidad.

lugar de alquilarlo. Tu servidor es colocado en el datacenter o centro de datos de la empresa de

alojamiento Web y utilizas su infraestructura y su conexin a Internet de alta capacidad. Este

La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores

ventana, en el que son presentadas las pginas Web.

de la tarjeta grfica. Podemos hablar de dos tamaos de pantalla diferentes:

Resolucin o tamao relativo:

de la tarjeta grfica del ordenador.

ventana del navegador es muy importante.

A mayor resolucin se dispone de ms puntos de informacin para presentar los elementos en

imgenes, objetos de formulario, etc.) se ven ms pequeos.

base, generalmente la ms usada en la actualidad (1024x768), y se construyan internamente

que al ser visualizadas en monitores de ms resolucin se "abran", ocupando todo el espacio de

introduccin de referencias a otras pginas por medio de los enlaces hipertexto

satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.

Es por ello que para programar en HTML necesitamos un editor de textos.

guardaremos nuestros trabajos con extensin .HTML, por ejemplo mipgina.html

Buscando siempre la mxima compatibilidad entre plataformas, en el diseo de pginas Web

en los ordenadores aplicaciones complementarias o los propios usuarios.

podemos hacer cuando debemos expresarnos con un nmero limitado de colores?.

prestaciones, no slo a nivel de memorias y procesadores, si no tambin a nivel de prestaciones

trabajaran tan slo con 256 colores.

Actualmente los equipos informticos aumentan da a da sus prestaciones, y lo normal ahora es

trabajar con millones de colores y con monitores de altas prestaciones.

La respuesta a sta pregunta es desalentadora, ya que nosotros dependemos a la hora de mostrar

mediante el protocolo HTTP.

segn el sistema operativo en el que ste est montado.

slo unos pocos 256 a la hora de crear pginas Web.

Los archivos necesarios para la realizacin de las prcticas se encuentran en el cd.

6.1. Prctica 1: Agentes registradores acreditados.

En el siguiente ejercicio vamos a entrar en la direccin:

de Industria, turismo y comercio.

con los dominios.

6.2. Prctica 2: Alta en alojamiento gratuito.

Pulsamos en el siguiente botn:

activar nuestros datos de usuario.

Ponemos nuestro nombre de usuario y clave :

En la siguiente pantalla pulsamos en el icono 1espacio