Você está na página 1de 343

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

Seleccione Sitio > Administrar sitios.

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 nuestro ordenador

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

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

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.
Rutas relativas a la raz del sitio

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

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

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

Rutas relativas a la raz del sitio

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

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

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 nuestro ordenador

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019451] Tablas

Siga uno de estos procedimientos:

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019451] Tablas

Haga clic en el men de encabezado de columna y seleccione Seleccionar columna.

Seleccin de una sola celda

Siga uno de estos procedimientos:

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

Siga uno de estos procedimientos:

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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

Siga uno de estos procedimientos:

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019451] Tablas

INESEM
22 / 30
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019451] Tablas

9. Prcticas

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

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

que queramos

INESEM
15 / 25
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

asignar comportamientos a los objetos y para modificar parmetros de comportamientos

previamente asignados.

Los comportamientos se encuentran listados alfabticamente por evento.

INESEM
17 / 25
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

9. Prcticas

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

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

Y le incluimos el siguiente texto y las siguientes imgenes del cd.

Guardamos este documento para usarlo en el siguiente ejercicio.

INESEM
22 / 25
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019452] Capas y comportamiento

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

Para ver todos los selectores, puede elegir en Toda las fuentes en el panel de Fuentes.

INESEM
6 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

tambin se pueden crear selectores compuestos basados en la seleccin.

INESEM
10 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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.

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 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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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.

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
16 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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.

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
18 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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,

configure cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no

es importante para el estilo.)

INESEM
19 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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.

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
21 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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,

configure cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no

es importante para el estilo.)

INESEM
22 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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.

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
24 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

INESEM
37 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

12. Prcticas

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

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

Con las siguientes propiedades:

Nuestro ejercicio tendr un aspecto similar a este:

INESEM
46 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

INESEM
47 / 50
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019453] Estilos CSS I

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

Abra el panel Diseador de 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 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).


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.


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,

configure cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no

es importante para el estilo.)


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.

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.


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,

configure cualquiera de las siguientes propiedades de estilo. (Deje en blanco la propiedad si no

es importante para el estilo.)

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:

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.


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.

Siga uno de estos procedimientos:

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

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

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 tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

Categora lista:

Categora bloque:

Categora cuadro:
Creamos una nueva regla:

Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

Categora bloque

Creamos una nueva regla:

Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

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:

Creamos una nueva regla:


Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

Categora lista:

Categora bloque

Categora cuadro:
Categora posicin:

Categora borde, podemos ponerle un borde a nuestra eleccin

Creamos una nueva regla:

Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

Creamos una nueva regla:

Categora tipo y fondo ponemos las propiedades de texto y el color del fondo que queramos

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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 Sitio > Administrar sitios.

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

8. Prcticas

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

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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
[AFO005755] Curso Superior Universitario en Diseo Web (Curso Baremable en Oposiciones de la Administracin(...)
[MOD003587] Dreamweaver CC
[UDI019455] Elementos multimedia y jQuery UI

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.

Siga uno de estos procedimientos:

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

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

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