Cursodreamweavercs 6

iv
ii
Diseo de Pginas Web (Dreamweaver CS6)
Contenido iii
ADRIANA HURTADO URIBE

LIC. EN INFORMTICA
INFORMTICA II
2013. Derechos Reservados Daniel Olalde Soto.
Contenido
CONTENIDO
1
Introduccin a Dreamweaver CS6.
1.1. Qu es Dreamweaver?
1.2. Acceso a Dreamweaver.
1.3. Ambiente de Dreamweaver.
1.4. Vistas del documento.
1.4.1. Vista Cdigo.

1.4.2. Vista Diseo.
1.4.3. Vista Dividir.
1.4.4.
Vista En vivo.
1.4.5. Vista Cdigo en vivo.
1.4.6. Vista previa en el navegador.
1.5. Crear un nuevo documento.
9
1.6. Abrir un documento.
9
1.7. Guardar un documento.
10
1.8. Importar y exportar documentos.
11
1.9. Cerrar y salir de Dreamweaver.
12
2
rea
de trabajo
en Dreamweaver
CS6.
2.4. Barra
de herramientas
Navegacin con
navegador.
15
2.5. Panel Insertar.
16
2.6. Panel Estilos CSS.
17
Configurar un sitio en Dreamweaver.
19
3.1. Concepto de Sitio.
20
3.2. Tipos de Sitios en Dreamweaver.
20
2015. Derechos Reservados

Adriana Hurtado. Uribe.
vi
Diseo de Pginas Web (Dreamweaver CS6)
3.3. Estructura de una Pgina Web.
21
3.4. Configurar un sitio nuevo.
22
3.5. Configuracin de un servidor de prueba.
22
3.6. Cuadro de dilogo Administrar sitios.
24
3.7. Panel Archivos.
25
Formato a la Pgina Web.

4.1 Propiedades de la pgina.
27
28
4.1.1 Categora Apariencia (CSS).

4.1.2 Categora Apariencia (HTML).
4.1.3 Categora Vnculos (CSS).
4.1.4 Categora Encabezados (CSS).
4.1.5 Categora Ttulo / Codificacin.
4.1.6 Categora Imagen de rastreo.
4.2 Comentarios.
33
4.3 Objeto Fecha.
33
4.4 Reglas horizontales.
34
4.5 Caracteres especiales.
35
4.6 Listas.
36
4.7 Formato al texto.
37
4.7.1 Men Formato.
4.8 Concepto de Estilo CSS.
40
4.9 Crear estilos CSS.
41
4.9.1 Propiedades CSS.
4.10 Editar estilos CSS.
43
4.11 Vincular estilos CSS.
44
4.12 Mens usando hojas de estilos.
45
Contenido vii
Imgenes.
55
5.1. Concepto de Imagen.
56
5.2. Insertar imgenes.
56
5.3. Marcadores de posicin de imagen.
58
5.4. Propiedades de imgenes.
59
5.5. Imagen de sustitucin (Rollover).
61
5.6. Objetos Inteligentes.
62
6
Hipervnculos.
66
6.1. Concepto de Hipervnculo.
67
6.2. Tipos de rutas de los vnculos.
67
6.2.1.Rutas absolutas.
6.2.2.Rutas relativas al documento.
6.2.3.Rutas relativas a la raz del sitio.
6.3. Crear hipervnculos.
68
6.4. Destino de los hipervnculos.

69
6.5. Anclaje con nombre.
70
6.6. Vnculo a correo electrnico.
71
6.7. Men de salto.
7.1 Concepto de Tabla.
77
7.2 Creacin de tablas.
77
7.3 Formato de tablas y celdas.
79
7.4 Insertar filas y columnas.
81
7.5 Eliminar filas y columnas.
82
7.6 Combinar o dividir celdas.
82
7.7 Anidar tablas.
83
7.8 Ordenar tablas.
viii Diseo de Pginas Web (Dreamweaver CS6)
9.1 Concepto de Capa.

9.2 Insertar capas.
9.2.1 Etiqueta Div.
9.2.2 Etiqueta DIV de diseo de
cuadricula fluida.
83
9.2.3 Div
PA.
7.9 Concepto de marcos.
84
7.10 Crear marcos.
84
7.11 Seleccionar marcos.
86
7.12 Guardar marcos.
86
7.13 Propiedades de los marcos.
88
7.14 Hipervnculos en marcos.
89
91
Formularios.
8.1 Concepto de Formulario.
92
8.2 Crear formularios.
92
8.3 Objetos de los formularios.

8.3.1 Elemento Campo de texto.
8.3.2 Elemento rea de texto.
8.3.3 Elemento Botn.
104
8.3.4 Elemento Casilla de verificacin.
104
8.3.5 Elemento Botn de opcin.

8.3.6 Elemento Seleccionar (Lista/Men).
8.3.7 Elemento Campo de archivo.
8.3.8 Elemento Campo de imagen.
8.3.9 Elemento Campo oculto.
8.4 Validacin de formularios aplicando JavaScript.
100
8.5 Validacin de formularios usando HTML5.
101
Contenido ix
9.3 Propiedades de la capas.

9.4 Hojas de estilos en las
capas.
10 Elementos
multimedia
.
10.1 Insertar Audio.
10
5
10
7
10
8
10
9
10.1.1
Etiqueta
<AUDIO>.
10.1.2
in.
Comando Plug-
10.2 Insertar Video.

10.2.1
Etiqueta
<VIDEO>.
10.2.2
in.
Comando Plug-
10.3 Archivo SWF.

10.4 Componente FLV.
10.5 Pelculas Shockwave.
1
1
1
11
2
1
1
3
11
4
10.6 Control ActiveX.
11
4
10.7 Elemento Applet.
11
4
UNIDAD
INTRODUCCIN A DREAMWEAVER CS6.
1.1 Qu es Dreamweaver?
1.2 Acceso a Dreamweaver.
1.3 Ambiente de Dreamweaver.
1.4 Vistas del documento.
1.5 Crear un nuevo documento.
1.6 Abrir un documento.
1.7 Guardar un documento.
1.8Importar y exportar documentos.
1.9
Cerrar y salir de Dreamweaver.
Diseo de Pginas Web

(Dreamweaver CS6)
INTRODUCCIN A DREAMWEAVER CS6.

1.1 Qu es Dreamweaver?
Dreamweaver es el software para el desarrollo y diseo de
Pginas Web adaptables para diversos dispositivos electrnicos.
1.2 Acceso a Dreamweaver.
son:
Para poder acceder a Dreamweaver existen diversas formas, pero las ms

usuales
OPCIN 1:
1) Abre el men Metro de Windows (Presionado la tecla de < Windows >).
2) Desplzate por los programas y haz clic en la aplicacin Adobe
Dreamweaver CS6.
OPCIN 2:
1) Metacomando < Win + R >.
2) Teclea la palabra Dreamweaver.
3) Pulsa la tecla < Enter >.
Unidad 1 Introduccin a
Dreamweaver CS6
1.3 Ambiente de Dreamweaver.

Pestaas del
documento
Botn
de la
aplicaci
n
Barra de herramientas
Documento
Barra de mens
Conmutador
de espacios
de trabajo
rea de
trabajo
Barra de
herramien
tas Estado
Panel
es Inspector de
propiedades
1.4 Vistas del documento.
Diseo de Pginas Web

(Dreamweaver CS6)
Dreamweaver CS6, ofrece distintas vistas que permiten

mostrar y editar el contenido del documento, para as usar la vista
con la que ms nos agrade trabajar.

1.4.1 Vista Cdigo.

Presenta la codificacin para escribir o editar manualmente el
cdigo con el que se est trabajando.
Para activar la Vista cdigo, realiza cualquiera de las siguientes tres opciones:
1. Haz clic en botn Cdigo de la Barra de herramientas documento.
2. Sitate en el men Ver y selecciona la opcin Cdigo.

3. O presiona la tecla < F10 >.
Al realizar cualquiera de las tres opciones anteriores, se
mostrar la Vista Cdigo del documento con el que se est
trabajando.
1.4.2
Vista Diseo.
Muestra el contenido de la pgina web y permite editarlo. Activa la

Vista Diseo, empleando cualquiera de las siguientes opciones:
1. Haz clic en botn Diseo de la Barra de herramientas Documento.
2. Sitate en el men Ver y selecciona la opcin Diseo.
1.4.3
Vista Dividir.
Separa en dos el rea de trabajo, visualizando en una parte el

cdigo y en la otra la vista diseo. La Vista Dividir, se activa desde:
1. El botn Dividir de la Barra de herramientas Documento.
2. O desde el men Ver
Cdigo y Diseo.
1.4.4
Vista En vivo.
Es casi similar a la vista diseo, slo que en esta es posible

interactuar con el contenido de la pgina tal y como se estuviera
haciendo en el navegador. Activa la Vista En vivo, desde:
1. El botn Vista En vivo de la Barra de herramientas Documento.
2. Desde el men Ver
Vista en vivo.
3. O Metacomando < Alt + F11 >.
1.4.5
Vista Cdigo en vivo.
Divide en dos partes el rea de trabajo, mostrando el contenido de

la pgina web en vivo, y a la vez que es posible editar dicho contenido
mediante cdigo.
Una vez que se haya activado la Vista En Vivo, es posible activar la
Vista Cdigo en vivo. Para ello realiza lo siguiente:
1. Haz clic en el botn Cdigo en vivo de la Barra de herramientas
Documento.
2. O desde el men Ver
Cdigo en vivo.
1.4.6
Vista previa en el navegador.
Permite visualizar la pgina web en alguno de los navegadores

instalados en el equipo (por lo regular es el navegador que se tiene por
default).
Para ejecutar la pgina en un navegador, presiona la tecla < F12 > o haz clic en
el
cono de la Barra de herramientas Documento.
1.5 Crear un nuevo documento

Para crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente:
1. Men Archivo
Nuevo.
En la categora Pgina en blanco del cuadro de dilogo

Nuevo documento, selecciona el tipo de pgina que deseas
crear en la columna Tipo de pgina.
2. O Metacomando < Ctrl + N >.
1.6 Abrir un documento

Para abrir un documento en Dreamweaver CS6, realiza lo
que se seala a continuacin:
1. Men Archivo
Abrir.
2. O Metacomando < Ctrl + O >.

Una vez realizado alguno de los procedimientos anteriores
aparecer el cuadro de dilogo Abrir, donde debers seleccionar el
documento a abrir.
Dreamweaver CS6
1
1
1.7 Guardar un documento

Para guardar un documento en Dreamweaver CS6, presiona el Metacomando
< Ctrl + S > o haz clic en el men Archivo
Guardar.
Al guardar por primera vez un documento aparecer el cuadro

dilogo Guardar como, donde se habr de especificar el nombre del
archivo y el tipo de documento a guardar.
1.8 Importar y exportar documentos.

Dreamweaver, permite importar archivos al documento,
para que stos
sean colocados en el rea de trabajo. Los
documentos que permite importar Dreamweaver CS6 son:
XML
en
plantilla.
Dreamweaver
crea
un
nuevo
documento basado en la plantilla especificada en el

archivo XML. Despus rellena el contenido de cada
regin editable de ese documento con los datos del
archivo XML. El documento resultante aparece en una
nueva ventana de documento.
Datos
de
tabla.
Importa 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.
1
2
Diseo de Pginas Web

(Dreamweaver CS6)
Documento de Word. Al importar un documento de

Word, Dreamweaver recibe el HTML convertido y lo
inserta en la pgina Web.
Documento de Excel. Importa al rea de trabajo una

hoja de clculo y Dreamweaver la convierte en cdigo
HTML.
Para importar cualquier documento a Dreamweaver, realiza:

1. Haz

clic
en
el
Selecciona
la
men
opcin
Archivo
del
archivo
Importar
que
desees
importar.
Asimismo es posible exportar la pgina web a otros formatos, que son:
Datos de plantilla como XML.
Tabla.
Para exportar la pgina Web, realiza lo siguiente:

1.
Haz

clic
en
Selecciona
la
el
men
opcin
Archivo
del
archivo
Exportar
que
desees
exportar.
1.9 Cerrar y salir de Dreamweaver.
Para cerrar un documento en Dreamweaver CS6, presiona el
Metacomando
< Ctrl + F4 >.
Para salir de Dreamweaver, realiza:
1) Metacomando < Ctrl + Q > o < Alt + F4 >.
2) Men Archivo
Cerrar.
TRABAJOS DE INVESTIGACI
N
1. Historia de Dreamweaver desde sus comienzos hasta la actualidad.
2. Novedades de Dreamweaver CS6.

3. Requisitos para instalar Dreamweaver CS6.
4. Concepto de Archivo XML.
UNIDAD
REA DE TRABAJO EN DREAMWEAVER CS6.

2.1 Inspector de propiedades.
2.2 Barra de herramientas Documento.
2.3 Barra de herramientas Estado.
2.4 Barra de herramientas Navegacin con navegador.
2.5 Panel Insertar.
1
4
Diseo de Pginas Web

(Dreamweaver CS6)
REA DE TRABAJO EN DREAMWEAVER CS6.

2.1 Inspector de propiedades.
El Inspector de propiedades permite examinar y editar las
propiedades ms comunes del elemento seleccionado actualmente,
como texto o cualquier objeto insertado.
2.2 Barra de herramientas Documento.

La barra de herramientas Documento contiene los comandos
y
opciones
relativos
la
visualizacin
del
documento
su
transferencia entre los sitios local y remoto.
Vista Cdigo
Vista Diseo
Multipantalla
Administracin de archivos
Comprobar compatibilidad con navegadores
Actualizar documento
Ayudas visuales
Validacin W3C
Vista previa
Vista En vivo
Vista Dividir
Ttulo de la pgina web

2.3 Barra de herramientas Estado.

La barra de herramientas Estado, se sita en la parte inferior
de la ventana de documento, proporciona informacin adicional sobre el
documento que est creando.
Herramienta seleccionar
Herramienta Zoom
Tamao mvil
Tamao escritorio
Selector de etiquetas
Herramienta mano Establecer nivel de aumento
Tamao tableta
Tamao de ventana
Tamao del documento y tiempo de descargar estimado

Indicador de codificacin
2.4 Barra de herramientas Navegacin con navegador.

La barra de herramientas Navegacin con navegador se activa en la Vista
en vivo
y muestra la direccin de la pgina que est viendo en la ventana de documento.
Vista Cdigo en vivo

Controles de navegador
Opciones de la vista en vivo
Cuadro de direccin
Activar modo de inspeccin
2.5 Panel Insertar.

El panel Insertar contiene botones para crear e insertar objetos
al documento. Los botones se encuentran organizados en categoras,
entre las que se puede cambiar seleccionando la categora deseada del
men desplegable Categora.
El panel Insertar est organizado en las categoras siguientes:
Categora Comn. Permite crear

e insertar
los
objetos
que
se
utilizan con ms frecuencia, como

las imgenes y las tablas.
Categora
insertar
tabla,
Diseo.
tablas,
Permite
elementos
etiquetas
div,
marcos
de
y
widgets de Spry. Tambin puede

elegir
dos
vistas
para
tablas:
Estndar (valor predeterminado) y

Tablas expandidas.
Categora Formularios. Contiene

botones
que
permiten
crear
formularios e insertar elementos

de formulario, incluidos widgets
de validacin de Spry.
Categora
Datos.
Permite
insertar objetos de datos de Spry

y
otros
elementos
dinmicos,
como juegos de registros, regiones

repetidas y grabar formularios de
insercin y actualizacin.
Categora Spry. Contiene botones para

crear pginas de Spry, incluidos objetos de datos y widgets de Spry.
Categora jQuery Mobile. Contiene botones para crear

formularios en lenguaje jQuery.
Categora InContext Editing. Contiene botones para la

creacin de pginas de InContext Editing, incluidos botones
para
Regiones
editables,
administracin de clases CSS.
Regiones
repetidas
la
Categora Texto. Permite insertar diversas etiquetas de

formato de texto y listas, como b, em, p, h1 y ul.
Categora Favoritos. Permite agrupar y organizar los

botones del panel Insertar que utiliza con ms frecuencia en
un lugar comn.
2.6 Panel Estilos CSS.

El panel Estilos CSS permite supervisar las reglas y propiedades
CSS que afectan a un elemento de pgina actualmente seleccionado
(modo Actual) o las reglas y propiedades que afectan a todo un
documento (modo Todo). El panel Estilos CSS
tambin permite
modificar propiedades CSS tanto en modo Todo como en modo Actual.
N
1. World Wide Web Consortium.
a. Qu es?
b. Organizacin.
c. Para qu se cre?
d. Quines lo crearon?
2. Activar o desactivar los paneles de Dreamweaver.
UNIDAD
CONFIGURAR UN SITIO EN DREAMWEAVER.

3.1 Concepto de Sitio.
3.2 Tipos de Sitios en Dreamweaver.
3.3 Estructura de una Pgina Web.
3.4 Configurar un sitio nuevo.
3.5 Configuracin de un servidor de prueba.
3.6 Cuadro de dilogo Administrar sitios.
3.7 Panel Archivos.
2
0
Diseo de Pginas Web

(Dreamweaver CS6)
CONFIGURAR UN SITIO EN DREAMWEAVER.

3.1 Concepto de Sitio.
Un Sitio es el conjunto de archivos de hipertexto (pginas
web) y carpetas relacionados entre s, con un diseo similar y
un objetivo en comn.
Cada
sitio
Web
tendr
una
direccin nica, es decir, nunca se

podrn repetir las URLs.
3.2 Tipos de Sitios en Dreamweaver.
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.
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 se est
trabajando. Dreamweaver se refiere a esta carpeta como el
sitio local. Esta carpeta suele encontrarse en el equipo local,
pero tambin se puede encontrar en un servidor de red.
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.
Carpeta de servidor de prueba: La carpeta en la que
Dreamweaver procesa pginas dinmicas.

3.3 Estructura de una Pgina Web.
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
2
2
Diseo de Pginas Web

(Dreamweaver CS6)
3.4 Configurar un Sitio nuevo.

Configurar un sitio de Dreamweaver permite organizar todos los
documentos
asociados con un sitio Web. El cuadro de dilogo
Configuracin del sitio es donde se especifica la configuracin del

sitio de Dreamweaver.
Para abrir el cuadro de dilogo Configuracin del sitio, haz clic en el men
Sitio
Nuevo sitio.
3.5 Configuracin de un servidor de prueba.

Un servidor de prueba permite generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser el equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin.
1. Seleccione Sitio
Administrar sitios.
2. Haz clic en Nuevo Sitio (para configurar un nuevo sitio), o bien

selecciona un sitio de Dreamweaver ya existente y haz clic en
Editar.
Dreamweaver CS6
2
3
3. En el cuadro de dilogo Configuracin del sitio, selecciona la

categora
Servidores y proceda de una de las siguiente formas:
Haz clic en el botn Aadir nuevo servidor para

aadir un nuevo servidor.
O selecciona un servidor existente y haz clic en el

botn Editar servidor existente
4. Especifica las opciones Bsicas que sean necesarias y luego

haz clic en el la pestaa Avanzadas.
Nota: Debes especificar un URL Web en la pantalla Bsicas al

especificar un servidor de prueba.
5. Bajo Servidor de prueba, selecciona el modelo de servidor

que desea usar para su aplicacin Web.
6. Haz clic en Guardar para cerrar la pantalla Avanzadas.
Seguidamente, en la
categora Servidores, especifica el
servidor que acabas de aadir o editar como servidor de

prueba.
3.6 Cuadro de dilogo administrar sitios.
El cuadro de dilogo Administrar sitios se emplea para crear
nuevos sitios, editar, duplicar, eliminar un sitio o importar o exportar la
configuracin de un sitio.
Selecciona Sitio Administrar sitios y selecciona un sitio de la lista.
2. Haz clic en un botn para seleccionar una de las opciones y haz clic en Listo.
o
Nuevo. Permite crear un sitio nuevo.
Editar. Sirve para modificar un sitio existente.
Duplicar. Crea una copia del sitio seleccionado. La copia

aparece en la ventana de lista de sitios.
Quitar. Elimina el sitio seleccionado; no podr deshacer esta accin.
Exportar. Permite exportar la configuracin de un sitio

como archivo XML (*.ste).
Importar. Permite seleccionar un archivo de configuracin

de un sitio (*.ste).
3.7 Panel Archivos.

Utilice el panel Archivos para ver y administrar los archivos del sitio
de
Dreamweaver.
Al visualizar sitios, archivos o carpetas en el panel Archivos,

puedes cambiar el tamao del rea de visualizacin y expandir o
contraer el panel Archivos.
N
1. Concepto de Servidor.
2. Funcin de los servidores.
3. Tipos de servidores.
4. Importancia de la estructura de un Sitio Web.

UNIDAD
FORMATO A LA PGINA WEB.

4.2 Comentarios.
4.3 Objeto Fecha.
4.6 Listas.
4.8 Concepto de Estilo CSS.
4.10
Editar estilos CSS.
4.11
Vincular estilos CSS.
4.12
Mens usando hojas de estilos.
2
8
Diseo de Pginas Web

(Dreamweaver CS6)
FORMATO A LA
PGINA WEB.
Al momento de crear una Pgina Web es recomendable crear sitios
que sigan un mismo formato, es decir, que tengan el mismo color de
fondo, de fuente, etc.
El formato de la pgina se define a travs del cuadro de dilogo
Propiedades de la pgina. Para abrir dicho cuadro de dilogo realiza
cualquiera de las siguientes opciones:
1. Metacomando < Ctrl + J >.
2. Haz clic en el men Modificar
Propiedades de la pgina.
3. Haz clic derecho sobre el rea del documento y del

men contextual selecciona la opcin Propiedades.
4. En el Inspector de propiedades, haz clic sobre el botn

Propiedades de la pgina.

Unidad 4 Formato a la
Pgina Web
2
9
Empleando cualquiera de las opciones anteriores se mostrar el

cuadro de dilogo Propiedades de la pgina, en donde se
habrn de configurar las propiedades del documento.
4.1.1 Categora Apariencia (CSS).

La categora Apariencia (CSS) permite especificar la fuente y el
tamao de la letra; as como el color del texto, color de fondo, aplicar
una imagen de fondo, los mrgenes del rea del documento.
Pgina Web
4.1.2
3
1
Categora Apariencia (HTML).
La categora Apariencia (HTML), permite especificar varias

opciones bsicas para el diseo de pgina y stas son:
Imagen de fondo. Aplica como fondo la imagen seleccionada.
Fondo. Define un color de fondo para la pgina.
Texto. Especifica el color de la fuente del texto.
Vnculos. Especifica el color al texto del vnculo.
Vnculos visitados. Especifica el color que va a tomar los vnculos

visitados.
Vnculos activos. Especifica el color que se va mostrar

cuando se haga clic sobre el vnculo.
Mrgenes.
Permiten
establecer
los
mrgenes
del
documento, es decir, la distancia entre donde empieza el

contenido de la pgina y la ventana del navegador.
4.1.3
Categora Vnculos (CSS).
La categora Vnculos (CSS) se emplea para definir la fuente,

tamao y colores de los vnculos, as como el estilo del vnculo.
4.1.3 Categora Encabezados (CSS).

La categora Encabezados (CSS), permite definir la fuente de los
encabezados, el estilo de la fuente (cursiva o negrita), as como el
tamao y color que se va aplicar a cada tipo de encabezado.
3
2
Diseo de Pginas Web

(Dreamweaver CS6)
4.1.5 Categora Ttulo / Codificacin.

La categora Ttulo / Codificacin permite establecer el tipo de
codificacin del documento en cuestin conforme al idioma utilizado al
crear las Pginas Web, as como especificar el formulario de normas
Unicode que debe aplicarse a tal tipo de codificacin.
4.1.6
Categora Imagen de rastreo.
La categora Imagen de rastreo permite insertar un archivo de

imagen para usarlo como plantilla grfica al disear la Pgina Web, as
como, establecer la opacidad de la imagen de rastreo.
4.2 Comentarios.
Un comentario es un texto descriptivo que se inserta en el
cdigo HTML para explicar el cdigo o facilitar otra informacin. El texto
del comentario aparece slo en la vista Cdigo y no se muestra en los
navegadores.
Para insertar comentarios al documento, realiza:
1) Sitate en el men Insertar Comentario.
2) O haz clic en el comando Comentario, del panel Insertar, de la
categora
Comn.
En la vista Cdigo, se inserta una etiqueta de comentario

() y sita el punto de insercin en medio de dicha
etiqueta. Ah teclea el comentario.
En la vista Diseo, aparece el cuadro de dilogo

Comentario. Introduce el comentario y haz clic en
Aceptar.
4.3 Objeto Fecha.
Dreamweaver proporciona un objeto Fecha que permite insertar

la fecha actual con el formato que prefieras (con o sin la hora) y ofrece
la posibilidad de actualizarla cada vez que guarde el archivo.
Para insertar el objeto fecha en el documento, realiza:

1. Sita el puntero de insercin en el lugar donde desees insertar la fecha.
2. Realiza alguno de los siguientes procedimientos:
Men Insertar Fecha.
Categora Comn, del panel Insertar, haz clic en el cono Fecha.
3. En el cuadro de dilogo Insertar fecha, selecciona el
formato de da de la semana, fecha y hora.
Si se desea que la fecha insertada se actualice cada vez que
se
guarde
el
documento,
activa
la
casilla
Actualizar
automticamente al guardar. Pero si se requiere que la

fecha se convierta en texto normal cuando se inserte y no se
actualice automticamente, desactiva dicha opcin.
4. Haz clic en Aceptar para insertar la fecha.

Las Reglas horizontales son el elemento que se usa para separar
secciones dentro de una misma pgina.
Para insertar una regla horizontal realiza:
Sitate en el men Insertar HTML Regla horizontal.
2. O de la Categora Comn del panel Insertar, haz clic en el

comando Regla Horizontal.
Al seleccionar la regla horizontal insertada, el Inspector de

propiedades cambia para permitirnos modificar las propiedades de
dicho objeto.
Ancho de la regla
Grosor de la regla
Asignar un nombre de ID
Alineacin de la regla
Aplicar sombra
Asignar clase

Cuando se trabaja con pginas web, muchas de las
ocasiones es necesario emplear caracteres especiales tales como ,
, , , por mencionar algunos; para esto Dreamweaver dispone de
diferentes caracteres que podemos incorporar al documento. Para
insertar caracteres especiales, haz clic en el men Insertar
HTML Caracteres especiales
Otro. Una vez hecho lo
anterior se mostrar el cuadro de

dilogo Caracteres especiales, ah debers seleccionar el carcter buscado.

4.6 Listas.
En Dreamweaver CS6, es posible insertar tres tipos de listas, que son:
Lista sin ordenar: muestra una especie de vietas

para agrupar los diferentes elementos de la lista.
Lista ordenada: muestra un nmero para indicar el orden

de cada uno de los elementos que integran la lista.
Lista
de
definicin:
se
encuentra
compuesta
trminos
por
o expresiones y su
definicin.
Para insertar cualquiera de stos tres tipos de listas, sitate en el men

Formato Lista
y selecciona el tipo de lista que desees emplear.

El contenido del texto del documento en Dreamweaver posee
atributos que permiten dar formato al texto, como es; cambiar el tipo de
fuente, el tamao de letra, la alineacin, el color de la fuente, el estilo,
etc.
Para dar formato rpidamente al texto emplea el Inspector de
propiedades, ya sea usando la categora HTML o CSS (Para que se
pueda aplicar el formato al texto, debers
previamente haberlo
seleccionado).
Inspector de propiedades Categora HTML.

6
5
1
3
11
7
8
12
2
10
1. Formato. Permite seleccionar un formato de prrafo ya definido

para HTML, que puede ser un encabezado, prrafo o formato
predeterminado
2. ID. Asigna una ID a la seleccin. El men desplegable ID
enumera todos los ID declarados pero no utilizados en el
documento.
3. Clase. Muestra el estilo de clase que se aplica actualmente
al texto seleccionado. Si no se ha aplicado ningn estilo a la
seleccin, el men emergente muestra Sin estilo CSS. Si se
han aplicado varios estilos a la seleccin, el men aparece en
blanco.
4. Vnculo. Crea un vnculo de hipertexto del texto seleccionado.
5. Negritas. Aplica estilo de negritas al texto seleccionado.
6. Cursiva. Aplica estilo de cursiva al texto seleccionado.
7. Lista sin ordenar. Crea una lista con vietas del texto seleccionado.
8. Lista ordenada. Crea una lista numerada del texto seleccionado.
9. Disminuir sangra. Anula o quita la etiqueta < blockquote >.
En una lista su anulacin elimina la anidacin de la lista.
10. Aumentar sangra. Inserta sangra en el texto seleccionado,
la aplicacin de sangra crea una lista anidada.
11. Ttulo. Especifica el texto de informacin sobre una
herramienta para un vnculo de hipertexto.
12. Destino. Permite especificar el marco o la ventana donde
se cargar el documento vinculado.
Inspector de propiedades Categora CSS.
1
4
12
8
10
11
3
2
1. Regla de destino. Es la regla que est editando en el

Inspector de propiedades de CSS. Si hay una regla ya existente
aplicada al texto, se mostrar el formato de la regla que afecta
al texto al hacer clic en el texto de la pgina. Tambin puedes
emplear el men emergente Regla de destino para crear nuevas
reglas CSS y nuevos estilos en lnea o aplicar clases existentes
al texto seleccionado.
2. Editar regla. Abre el cuadro de dilogo Definicin de regla CSS
para la regla de destino. Si seleccionas Nueva regla CSS del
men emergente Regla de destino y haces clic en el botn
Editar
regla,
Dreamweaver
abrir
el
cuadro
de
dilogo
Definicin de nueva regla CSS.

3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades
para la regla de destino en la vista actual.
4. Fuente. Cambia la fuente de la regla de destino.
5. Tamao. Establece el tamao de la fuente para la regla de destino.
6. Color. Establece el color seleccionado como color de fuente

en la regla de destino.
7. Negritas. Aade la propiedad de negrita a la regla de destino.
Pgina Web
4
5
8. Cursiva. Aade la propiedad de cursiva a la regla de destino.

Alinear a la izquierda. Alinea el texto hacia la izquierda.
Alinear al centro. Alinea el texto al centro.
Alinear a la derecha. Alinea el texto hacia la derecha.
Justificar. Justifica el texto seleccionado.

4.7.1 Men Formato.
Tambin puedes emplear el men Formato, para modificar el
aspecto del texto; dentro de este men encontrars los submens para:
Aumentar Sangra o Anular sangra.
Asignarle formato al prrafo.
Alinear el texto.
Crear listas.
Aplicar estilos predefinidos.
Crear o aplicar estilos CSS.
Modificar el color de texto.
Concepto de Estilo CSS.

Los Estilos CSS, tambin conocidos como Hojas de Estilos en
Cascada (Cascading Style Sheets) son el conjunto de reglas de
formato que determina el aspecto del contenido de la Pgina Web.
Las reglas CSS, pueden residir en las ubicaciones siguientes:
Hojas de Estilo CSS Externas. Son el conjunto de reglas
CSS almacenadas en un archivo CSS (.css) y con stas se
deber emplear una vinculacin al archivo CSS.
Hojas de Estilo CSS Internas. Son el conjunto de reglas
CSS incluidas en una etiqueta < STYLE > dentro del cuerpo
del documento o de la etiqueta
< HEAD >.

Para crear un estilo CSS en Dreamweaver, realiza:
1. Para abrir el cuadro de dilogo Nueva Regla CSS, realiza
cualquiera de las siguientes opciones.
A. Haz clic en el men Formato
Estilos CSS Nuevo.
B. O del panel Estilos CSS,
haz clic en el cono Nueva
regla CSS.
2. Despus de haber realizado alguno de los procedimientos

anteriores se mostrar el siguiente cuadro de dilogo, en
donde se habr de especificar: Tipo de selector. Permite
elegir alguno de los siguientes tipos de selector:
Clase. Crea un estilo personalizado que pueda aplicarse como atributo
class a cualquier elemento HTML.
ID. Define el formato de una etiqueta que contenga un atributo ID
concreto.
Etiqueta. Redefine el formato predeterminado de una
etiqueta HTML especfica.
Compuesto. Define una regla compuesta que afecte a dos o ms

etiquetas, clases o ID simultneamente.
4
2
Diseo de Pginas Web

(Dreamweaver CS6)
Nombre del selector. Define el nombre del estilo CSS.

Definicin de la regla. Permite establecer en donde se va a
crear la hoja de estilos, entre las siguientes dos opciones:
Slo este documento. Incrusta el estilo en el documento actual.
Nuevo archivo de hojas de estilo. Crear una hoja de
estilos externa, es decir, un documento CSS (.css)
3. Una vez configuradas las anteriores opciones, haz clic en el botn Aceptar.
4. Se visualizar un cuadro de dilogo parecido al que se
muestra abajo, en donde se habrn de configurar todos las
propiedades del Estilo CSS.
5. Cuando hayas terminado de configurar las propiedades del

estilo CSS, haz clic sobre el botn Aceptar.
4.10 Editar estilos CSS.
Los estilos CSS que se crean en Dreamweaver permiten editar tanto las reglas
internas como las externas que se hayan aplicado en
el documento.
Para editar una regla CSS, realiza:
1. Abre el panel Estilos CSS.
2. Selecciona la regla CSS que desees editar.
3. Haz clic en el botn Editar estilo
del panel Estilos CSS.

4. Realiza los cambios necesarios y haz clic en
Aceptar para conservar los cambios realizados.
4.11 Vincular estilos CSS.

Cuando se quiere usar una hoja de estilos externa en un
documento HTML, lo que nico que se tiene que hacer es vincular la
hoja de estilos en el documento.
Para establecer vnculos en una hoja de estilos CSS externa, realiza:
1. Abre el panel Estilos CSS.
2. En el panel Estilos CSS, haz clic en el botn Adjuntar hoja de estilos
3. En el cuadro de dilogo Vincular hoja de estilos
externa, configura las siguientes opciones:
Arch./URL. Oprime el botn Examinar para localizar la hoja de
estilos a vincular.
Aadir como. Activa Vincular para establecer un vnculo entre
el documento actual y la hoja de estilos externa, o la opcin
Importar para utilizar una hoja de estilo externa como
referencia.
Media. Especifica el medio de destino de la hoja de estilo.
Vista previa. Permite verificar que la hoja de estilo aplica los
estilos que se desean en la pgina actual.
4. Por ltimo, pulsa sobre el botn Aceptar.
4.12 Mens usando hojas de estilos.

El elemento esencial en una Pgina Web es el uso de mens, ya
que gracias a ellos permiten que el usuario pueda desplazarse en cada
pgina que compone el sitio Web.
Hoy en da la mayora de los mens se realizan con el uso de
hojas de estilos y html. Anteriormente era muy frecuente ver Pginas
Web con mens hechos en Flash, pero la desventaja era el tiempo en
que tardaba de cargarse, por lo que terminaron quedando obsoletos.
Para crear mens usando hojas de estilos, se deben crear dos
documentos: un documento HTML (.html) y el otro una Hoja de estilos
(.css).
El documento HTML deber contener los siguientes dos elementos:
Una capa y una lista sin ordenar, para ello procede a realizar lo siguiente:
1. Primero crea una capa desde la vista Cdigo, escribiendo las etiquetas
<div>
</div>.
2. A continuacin, cambia a la vista Diseo y posiciona el

puntero dentro del rectngulo.
3. Activa el botn Lista sin ordenar
del Inspector de propiedades.
4. Procede a crear los mens principales, tecleando el nombre del

men despus de cada vieta. Ejemplo:
5. Si se requiere crear submens en algn men, posicinate al

final del texto del men y pulsa la tecla < ENTER >; una vez
que te haya creado la vieta pulsa la tecla < TABULADOR >
(esto aplicar una sangra a la vieta y servir para crear el
submen). Ejemplo:
6. Algunas veces se requiere crear otro submen dentro del

submen del men principal, para ello, repite los mismo pasos
pero ahora debers dar < ENTER > al final del texto del
submen. Ejemplo:
7. Ahora debers colocar los hipervnculos a cada men y

submen, para ello, en la vista Cdigo, teclea la etiqueta <a
href="#"> antes del texto de cada men o submen y al final
escribe la etiqueta </a>. Ejemplo:
8. En la etiqueta <div> teclea los siguientes atributos y valores:
class="nav" id="menu"
9. Dentro de la etiqueta <ul> tecla los siguiente atributo y valor:

class="nav"
10. Guarda el archivo HTML y crea una pgina CSS.

11. Teclea los siguientes estilos.
@charset "utf-8";
/* CSS Document */
*{
padding:0px; margintop:inherit;
}
#header {
padding-top: 120px;
}
/* Formato del men completo */
#menu {
margin:0 auto;
width:1000px;
fontfamily:Calibri;
font-size:12px;
text-align:center;
}
ul, ol { list-style:none;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 15px;
display:block;
}
.nav li a:hover {
text-shadow: 0 0 1px
brown; backgroundcolor:#434343;
}
.nav > li {
float:left;
width:140px;
}
.nav li ul {
display:none;
position:absolute
; minwidth:140px;
text-align:left;
}
/* Mostrar submenus */
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
Pgina Web
5
3
12. El resultado ser el siguiente:
13. Las siguientes propiedades de tipo CSS te ayudarn a

definir mejor las propiedades del men:
Definicin de propiedades de tipo CSS
Font-family: Establece la familia de fuentes (o serie de familias) del estilo.
Font-size: Define el tamao del texto.
Font-style: Especifica normal, italic u oblique como estilo de la fuente.
Line-height: Establece el alto de la lnea en la que se coloca el texto
Text-decoration: Aade subrayado, sobreimpresin o

tachado al texto o hace que el texto parpadee.
Font-weight: Aplica una cantidad especfica o relativa de

negrita a la fuente.
Font-variant: Establece la variante de versales en el texto.
Text-transform: Convierte en mayscula la primera letra de

cada palabra de la seleccin o convierte todo en maysculas
o minsculas.
Color: Establece el color del texto.
Definicin de propiedades de fondo de estilos CSS
Background-color: Establece el color de fondo del elemento.
Background-image: Establece la imagen de fondo para el elemento.
5
0
Diseo de Pginas Web

(Dreamweaver CS6)
Background-repeat: Determina si la imagen de fondo se

repite y de qu forma lo hace.
Background-attachment: Determina si la imagen de fondo

est fija en su posicin original o se desplaza con el
contenido.
Background-position
(X)
Background-position
(Y): Especifican la posicin inicial de la imagen de fondo

en relacin con el elemento.
Definicin de propiedades de bloque de estilos CSS
Word-spacing: Establece el espacio adicional entre las palabras.
Letter-spacing: Aumenta o disminuye el espacio entre letras o caracteres.
Vertical-align: Especifica la alineacin vertical del

elemento al que se aplica.
Text-align: Establece cmo se alinear el texto dentro del elemento.
Text-indent: Especifica la cantidad de sangra que se

aplica a la primera lnea de texto.
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.
Definicin de las propiedades del cuadro de estilos CSS
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.
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: Especifica la cantidad de espacio entre el

contenido de un elemento y su borde (o el margen si no
hay ningn borde).
Margin: Especifica la cantidad de espacio entre el borde de

un elemento (o el relleno si no hay borde) y otro elemento.
5
2
Diseo de Pginas Web

(Dreamweaver CS6)
Igual para todo: Establece las mismas propiedades de

margen para Top, Right, Bottom y Left, es decir, para las
partes
superior,
derecha,
inferior
izquierda
respectivamente del elemento al que se aplica.

Definicin de propiedades de borde de estilos CSS
Style: Establece el aspecto del estilo del borde.
Igual para todo: Establece las mismas propiedades de

estilo de borde para Top, Right, Bottom y Left.
Width: Especifica el grosor del borde del elemento.
Igual para todo: Establece el mismo borde para Top, Right, Bottom y Left.
Color: Establece el color del borde: Puede especificar

colores distintos para cada lado, pero su visualizacin
depender del navegador.
Igual para todo: Establece el mismo color de borde

para Top, Right, Bottom y Left.
Definicin de las propiedades de lista de estilos CSS
List-style-type: Establece el aspecto de vietas o nmeros.
List-style-image: Permite especificar una imagen

personalizada para vietas.
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).
Definicin de las propiedades de posicin de estilos CSS
Position: Determina cmo deber colocar el navegador

el elemento seleccionado. Ofrece las opciones siguientes:
Pgina Web
5
3
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.
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. La
visibilidad predeterminada de la etiqueta
body es visible. Seleccione una de las siguientes opciones

de visibilidad:
-
Inherit: hereda la propiedad de visibilidad del padre del contenido.
Visible: muestra el contenido, independientemente del

valor del contenido padre.
Hidden: no muestra el contenido, independientemente

del valor del contenido padre.
Z-Index: Determina el orden de apilamiento del contenido.

Los elementos
con un ndice z superior aparecen por
encima de los elementos con un ndice z inferior (o sin

ndice z). Los valores pueden ser positivos o negativos.
Overflow: Determina lo que debe ocurrir si el contenido de

un contenedor (por ejemplo, una DIV o una P) supera el
tamao de ste. Estas propiedades controlan la ampliacin
de la siguiente manera:
-
Visible: aumenta el tamao del contenedor para que todo su
contenido sea visible. El contenedor se expande hacia

abajo y hacia la derecha.
Hidden: mantiene el tamao del contenedor y recorta

cualquier contenido que no quepa. No hay barras de
desplazamiento.
Scroll: aade barras de desplazamiento al contenedor

independientemente de que el contenido exceda o no el
tamao del contenedor.
Auto: presenta las barras de desplazamiento solamente

cuando
el
contenido del contenedor excede de sus
lmites.
Placement: Especifica la ubicacin y el tamao del bloque de contenido.
Clip: Define la parte del contenido que ser visible.
Definicin de las propiedades de extensiones de estilos CSS
Page-break-before: Efecta un salto de pgina al imprimir

antes o despus del objeto al que se aplica el estilo.
Cursor: Cambia la imagen del puntero cuando ste se

encuentra sobre el objeto al que se aplica el estilo.
Filter: Aplica efectos especiales al objeto controlado por el

estilo, incluidos desenfoque e inversin.
UNIDAD
IMGENES.
5.1 Concepto de Imagen.
5.2 Insertar imgenes.
5.3 Insertar marcadores de posicin de imagen.
5.4 Propiedades de imgenes.
5.5Imagen de sustitucin (Rollover).
5.6Objetos inteligentes.
5
6
Diseo de Pginas Web

(Dreamweaver CS6)
IMGENES.
5.1 Concepto de
Imagen.
Una imagen es el grfico vectorial o no vectorial, que muestra
una presentacin visual de algo en formato digital.
5.2 Insertar imgenes.
Cuando se insertan imgenes en Dreamweaver, el programa
genera una referencia del archivo de imagen.
Para insertar imgenes en Dreamweaver, realiza:
1. Posicinate en el lugar donde desees colocar la imagen.
2. Despus realiza cualquiera de los siguientes opciones, para
abrir el cuadro de dilogo Seleccionar origen de imagen:
A) Metacomando < Ctrl + Alt + I >.
B) Panel Insertar Categora Comn Imagen.
C) Men Insertar Imagen.
3. En el cuadro de dilogo abierto, selecciona la imagen que
desees insertar en el documento.

4. Una vez selecciona la imagen, haz clic en Aceptar.

5. Se mostrar una ventana emergente que te preguntar si
deseas crear una copia del archivo en la carpeta del sitio, pulsa
en el botn S.
Teclea el nombre de la imagen o deja el nombre que se muestra por default.
6. Haz clic en Guardar.
Si
se
ha
activado
el
cuadro
de
dilogo
Preferencias,
aparecer el cuadro de dilogo Atributos de accesibilidad

de la etiqueta de imagen, donde podrs configurar:
-
Texto alternativo. Se emplea para anotar un texto en

caso de que no se muestre la imagen en el navegador.
Descripcin larga. Anota la ubicacin de un archivo,

que aparecer cuando el usuario haga clic en la imagen o
en el cono de carpeta para desplazarse hasta el archivo.
7. Por ltimo haz clic en Aceptar, para insertar la imagen.
5.3 Marcadores de posicin de imagen.

Los marcadores de posicin de imagen son grficos que se
utilizan hasta que el grfico definitivo est listo para su incorporacin al
sitio Web.
Para insertar marcadores de posicin de imagen, realiza:
1. Sitate en el lugar del documento donde desees colocar el
marcador de posicin de imagen.
2. Despus realiza cualquiera de las siguientes opciones, para
abrir el cuadro de dilogo Marcador de posicin de imagen.
A) Men Insertar Objetos de imagen Marcador de posicin de
imagen.
B) Categora Comn del panel Insertar, haz clic sobre el
men Imgenes y
selecciona el cono Marcador de
posicin de imagen.
3. En el cuadro de dilogo abierto, selecciona el tamao y color del
marcador, y asgnale una etiqueta de texto.
4. Para finalizar, haz clic en Aceptar.
Sustitucin de un Marcador de posicin de imagen.

Para poder actualizar el origen de la imagen, realiza:
1. Da doble clic sobre el marcador de posicin de imagen o del

Inspector de propiedades, haz clic en el cono de Carpeta
situado junto al campo de Origen.
2. Se abrir el cuadro de dilogo Seleccionar origen de

imagen, ah selecciona la imagen que desees remplazar en
el marcador de posicin de imagen.
3. Por ltimo, presiona el botn Aceptar.

Nota: Cuando se visualice en el navegador, el texto de etiqueta
y tamao no mostrarn.
5.4 Propiedades de imgenes.
Para modificar las propiedades de las imgenes, utiliza
el Inspector de propiedades; una vez que tengas la imagen
seleccionada.
Unidad 5
Imgenes
6
1
1
8
12
4
13
10
11
3
2
9
6
1. ID.
Asigna
despus
un
nombre
como
identificador
para
usarlo
como comportamiento.
2. Mapa. Permite asignar una etiqueta y crear un mapa de imagen.

3. Herramientas de Zona interactiva. Permite crear zonas en
donde el usuario pueda interactuar con la imagen.
4. Origen. Muestra la ubicacin de la imagen.
5. Vnculo. Especifica un hipervnculo a la imagen.
6. Destino. Especifica el marco o la ventana donde se cargar la pgina vinculada.
7. Original. Permite reemplazar la imagen actual por otra imagen.
8. Alt. Asigna un texto alternativo en caso de que no se muestre dicha imagen.
9. Herramientas Editar. Permite editar la imagen para mejorar su presentacin.
10.
An. Especifica el ancho de la imagen.
11.
Alt. Especifica el alto de la imagen.
12.
Alternar restriccin de tamao. Activa esta opcin en caso
de querer restringir proporcionalmente el tamao de la imagen.

13.
Clase. Asigna un estilo CSS creado con anterioridad.
5.5 Imagen de sustitucin (Rollover).

Una imagen de sustitucin es aquella que, al visualizarse en
un navegador, cambia cuando el puntero se posiciona sobre ella.
Para
imgenes:
crear
la
una
imagen
imagen
de
principal
sustitucin
(la
que
se
requieren
aparece
al
dos
cargarse
inicialmente la pgina) y la imagen secundaria (la que se muestra al

posicionar 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.
Para crear una imagen de sustitucin, realiza:
1. Posiciona el puntero en el lugar donde deseas que aparezca
la imagen de sustitucin.
2. Despus realiza cualquiera de las siguientes opciones, para
abrir el cuadro de dilogo Insertar imagen de sustitucin.
A. Categora Comn del panel Insertar, haz clic en el
men Imgenes y selecciona el icono Imagen de
sustitucin.
B. Men Insertar Objetos de imagen Imagen de sustitucin.
3. Configura las opciones y haz clic en Aceptar.
6
2
Diseo de Pginas Web

(Dreamweaver CS6)
Nombre de la imagen. Especifica el nombre de la imagen de sustitucin.
Imagen original. La imagen que se mostrar al cargarse la pgina.
Imagen de sustitucin. La imagen que se visualizar

cuando el puntero pase por encima de la imagen original.
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.
5.6 Objetos inteligentes.
Un objeto inteligente es una imagen para Web que mantiene
una conexin en vivo con la imagen original de Photoshop. Al actualizar
la imagen original en Photoshop, Dreamweaver ofrece la posibilidad de
Unidad 5
Imgenes
6
3
actualizar la imagen en Dreamweaver simplemente haciendo clic en un

botn.
Para inserta un objeto inteligente, realiza:

1. Sita el puntero en el lugar de la pgina donde desees
insertar el objeto inteligente (la imagen).
2. Despus realiza cualquiera de los siguientes opciones, para
abrir el cuadro de dilogo Seleccionar origen de imagen:
A) Metacomando < Ctrl + Alt + I >.
B) Panel Insertar Categora Comn Imagen.
C) Men Insertar Imagen.
D) Tambin puedes arrastrar el archivo PSD a la pgina desde
el panel Archivos si se almacenan los archivos de Photoshop
en el sitio Web (s es as, omite el paso siguiente).
3. Localiza el archivo de imagen PSD de Photoshop en el cuadro de dilogo
Seleccionar origen de imagen.
4. En el cuadro de dilogo Optimizacin de imgenes que

aparece, ajusta la configuracin de optimizacin como sea
necesario y haz clic en Aceptar.
5. Guarda el archivo de imagen para la Web en una ubicacin

dentro de la carpeta raz de su sitio Web.
N
1. Extensiones de imgenes que permite Dreamweaver insertar al documento.
2. Insertar Imgenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
HIPERVNCULOS.
6.1 Concepto de Hipervnculo.
6.2 Tipos de rutas de los vnculos.
6.3 Crear hipervnculos.
6.4 Destino de los hipervnculos.
6.5 Anclaje con nombre.
6.6 Vnculo a correo electrnico.
6.7 Men de salto.
6.8 Zonas interactivas.
Unidad 6
Hipervnculos
6
7
HIPERVNCULOS.
6.1 Concepto de Hipervnculo.
Los hipervnculos son links (vnculos) que al ser pulsados nos
redirigen hacia otra pgina o archivo; permitiendo conectar los
diferentes elementos de una Pgina Web.
En Dreamweaver es posible establecer hipervnculos a cualquier
elemento del documento como puede ser: texto, imgenes, multimedia,
etc.
6.2 Tipos de rutas de los vnculos.
Cuando se crean vnculos, resulta fundamental conocer la ruta de
archivo entre el documento desde el que establece el vnculo y el
documento con el que lo establece.
Cada Pgina Web tiene una direccin exclusiva, denominada URL
(Localizador Uniforme de Recursos, Uniform Resource Locator). 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.
6.2.1 Rutas absolutas.
Proporcionan la URL completa del documento vinculado, incluido
el protocolo que se debe usar (http://), por ejemplo,
http://www.dcompusite.blogspot.com/.
6.2.2
Rutas relativas al documento.
Se emplean
tiles cuando
para
vnculos locales,
resultan particularmente
el documento actual y el documento con el que se
establece el vnculo se encuentran en la misma carpeta, por ejemplo,

dreamweaver/contents.html.
6
8
Diseo de Pginas Web

(Dreamweaver CS6)
6.2.3
Rutas relativas a la raz del sitio.
Indican la ruta desde la carpeta raz del sitio hasta un documento.

Se usan cuando se trabaja con un sitio Web grande que usa varios
servidores o un servidor que alberga
/support/dreamweaver/contents.html.

varios sitios, por ejemplo,
6.3 Crear hipervnculos.

Para crear hipervnculos en Dreamweaver CS6, realiza lo siguiente:
1. Selecciona el texto o imagen y del Inspector de propiedades da
clic en el cuadro de texto Vnculo
2. Escribe la ruta y el nombre del archivo del documento o URL en

el cuadro de texto Vnculo o haz clic en la carpeta y
selecciona el archivo (si se desea realizar una referencia
absoluta).
3. En el men desplegable Destino, selecciona una ubicacin para abrir la
pgina.
Otra forma de crear hipervnculos es desde el men Insertar

Hipervnculo. Se mostrar el cuadro de dilogo Hipervnculo,
donde debers especificar las siguientes propiedades:
Texto. Especifica el texto que se emplear como vnculo.
Vnculo. Asigna la ruta del hipervnculo.
Destino. Especifica la ubicacin para abrir el archivo.
Ttulo. Escribe un ttulo de pgina para el hipervnculo.
Clave de acceso. Permite introducir una tecla para activar

el hipervnculo en el navegador con dicha tecla.
ndice de fichas. Introduce un nmero para el orden de fichas.
6.4 Destino de los hipervnculos.

El destino del hipervnculo determina en qu ventana va a ser
abierto el vnculo.
Esto puede especificarse desde el Inspector de
propiedades, categora HTML a travs de la opcin Destino, o en el

cuadro de dilogo Hipervnculo del men Insertar Hipervnculo.
_blank carga el documento vinculado en una nueva ventana
sin nombre del navegador.
new carga el documento vinculado en una nueva ventana del navegador.
_parent carga el documento vinculado en el marco padre o en la
ventana padre del marco que contiene el vnculo. Si el marco que
contiene el vnculo no est anidado, el documento vinculado se cargar
en la ventana completa del navegador.
_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.
Unidad 6
Hipervnculos
7
1
6.5 Anclaje con nombre.

Los anclajes con nombre permiten establecer marcadores en un
documento, que por lo regular se colocan en un tema especfico o en la
parte superior del documento.
Para crear un anclaje con nombre, realiza lo siguiente:
1. Coloca el cursor en el lugar donde se desea insertar el anclaje con nombre.
2. Despus realiza alguno de los siguientes procedimientos:
A) Men Insertar Anclaje con nombre.
B) Metacomando < Control + Alt + A >.
C) Del panel Insertar, Categora Comn, haz clic en el
botn Anclaje con nombre.
3. En el cuadro Nombre de anclaje, escribe un nombre para el

anclaje y haz clic en Aceptar. (El nombre del anclaje no puede
contener espacios.)
El marcador del anclaje aparecer en el punto de insercin.
Para usar el anclaje con nombre en un hipervnculo, realiza:
1. Selecciona el texto o imagen que servir como anclaje.
4. Despus realiza alguno de los siguientes procedimientos:
A) Men Insertar Hipervnculo.
B) Del panel Insertar, Categora Comn, haz clic en el botn Hipervnculo.
C) Del Inspector de propiedades, posicinate en el cuadro de texto Vnculo.
2.
En cualquiera de las tres opciones anteriores, desplegar el

men contextual de Vnculo y elige el marcador de
texto a emplear en el hipervnculo.
Nota: Todo los anclajes con nombre

aparecern con el signo # al principio del nombre de anclaje asignado.
6.6 Vnculo a correo electrnico.
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
el
de
correo
electrnico,
cuadro
Para
se
actualiza
automticamente con la direccin especificada en el vnculo del

mensaje de correo electrnico.
Para crear un vnculo de correo electrnico, realiza:
1. Sitate en el men Insertar Vnculo de correo electrnico.
O del panel Insertar de la categora Comn, haz clic en el
botn Vnculo de correo electrnico.
2. Se mostrar el cuadro de dilogo Vnculo de correo
electrnico, en donde se habr de especificar las siguientes
propiedades:
Texto. Define el texto que se mostrar como vnculo de correo
electrnico. Correo electrnico. Define el correo electrnico
al cual se va a mandar la informacin.
7
2
Diseo de Pginas Web

(Dreamweaver CS6)
3. Por ltimo, haz clic en Aceptar.

Otra forma de crear un hipervnculo a un correo electrnico, es
desde el Inspector
de propiedades, en la opcin Vnculo debers
teclearla palabra MAILTO, seguida de dos puntos y el correo electrnico

(MAILTO:daniel.olalde@gmail.com).
6.7 Men de salto.

Un men de salto es un men emergente de un documento que
pueden ver los
visitantes
del
sitio
que
ofrece
vnculos
con
documentos o archivos. Puedes 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 al URL asociado.
Los mens de salto se insertan dentro del objeto de formulario Men de
salto.
Un men de salto puede contener tres componentes:
Opcional: un mensaje de seleccin de men, como la
descripcin de una categora para los elementos del men
o instrucciones, como Elija una opcin.
Obligatorio: una lista de elementos de men vinculados: el
usuario elige una opcin y se abre un documento o un archivo
vinculado.
Opcional: un botn Ir.
Para insertar un men de salto, realiza:
Unidad 6
Hipervnculos
1. Sita el punto de insercin en la ventana de documento.

2. Luego realiza alguno de los siguientes procedimientos:
7
3
Men Insertar Formulario Men de salto.

B) En la categora Formulario del panel Insertar, haz clic en
el botn Men de salto.
3. Se mostrar el cuadro de dilogo Insertar men de salto, en
donde debers especificar las siguientes opciones:
Botn ms (+). Inserta un nuevo elemento.
Botn menos (-). Elimina un elemento.
Botones de flecha. Suben o bajan puestos en la lista.
Texto. Escribe el nombre de un elemento sin nombre.
Al seleccionarse, ir a URL. Accede al archivo de
destino o escribe su ruta.
Abrir URL en. Especifica si el archivo debe abrirse en la
misma ventana o en un marco.
Insertar botn Ir tras el men. Selecciona esta opcin
para insertar un botn Ir en lugar de un mensaje de
seleccin de men.
Seleccionar primer elemento tras el cambio de
URL. Selecciona esta opcin si has insertado un mensaje
de seleccin de men (Elija una opcin) como primer
elemento del men.

4. Para finalizar, haz clic en Aceptar.
6.8 Zonas interactivas.

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.
Al insertar un mapa de imagen del lado del usuario, se crea una
zona interactiva y, a continuacin, se define un vnculo que se abrir
cuando el usuario haga clic en la zona interactiva.
Para crear una zona interactiva, realiza:
1. Selecciona la imagen a la que desees aplicar la zona interactiva.
2. En el cuadro de texto Mapa del Inspector de propiedades,
introduce un nombre exclusivo para el mapa de imagen.
3. Selecciona la herramienta circular, rectangular o poligonal,

segn sea el caso y arrastrando el puntero sobre la imagen crea
la zona interactiva.
4. Una vez seleccionada la zona interactiva, en el cuadro
Vnculo, escribe el hipervnculo o haz clic sobre el cono
Carpeta para localizar y seleccionar el archivo que deber
abrirse cuando el usuario haga clic en la zona interactiva.
5. En el cuadro de lista desplegable Destino, selecciona la
ventana o marco donde se abrir el vnculo.
6. En el cuadro de texto Alt, escribe el texto alternativo en caso
de que no se muestre la imagen en el navegador.
7. Al terminar de definir todas las zonas interactivas del mapa de
imagen, da clic en un rea en blanco del documento para
cambiar el Inspector de propiedades.
N
1. Extensiones de imgenes que permite Dreamweaver insertar al documento.
2. Insertar Imgenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
DISEO DE LA PGINA WEB.
7.7 Anidar tablas.
7.8 Ordenar tablas.
7.10
Crear marcos.
7.11
Seleccionar marcos.
7.12
Guardar marcos.
7.13
Propiedades de los marcos.
7.14
Hipervnculos en marcos.
Unidad 7 Diseo de la
Pgina Web
7
7
DISEO DE LA PGINA
WEB.
Una tabla es la herramienta eficaz para presentar una serie de
datos de forma clara y organizada en una Pgina Web. Tambin son
usadas para el diseo del documento.
Las tablas estn compuestas por filas y columnas, y la
interseccin entre una fila y una columna es conocida con el nombre de
celda.
Para insertar tablas en el documento, realiza cualquiera de
las siguientes opciones:
1. Men Insertar Tabla.
2. Metacomando < Ctrl + Alt + T >.
3. Panel Insertar Categora Comn Tabla.
Realizada alguna de las opciones anteriores, se mostrar el cuadro de dilogo
Tabla en donde se habr de especificar:
Filas. Determina el nmero de filas de la tabla.
Columnas. Especifica el nmero de columnas de la tabla.
Ancho de tabla. Establece el ancho de la tabla en

pixeles o como porcentaje del ancho de la ventana del
navegador.
Grosor del borde. Define el ancho en pixeles de los bordes de la tabla.
Relleno de celda. Detalla el nmero de pixeles entre

el borde y el contenido de una celda.
Espacio entre celdas. Especifica el nmero de

pixeles entre celda contiguas de una tabla.
Seccin Encabezado. Brinda las siguientes opciones de encabezado:
7
8
Diseo de Pginas Web

(Dreamweaver CS6)
o Ninguno. No permite encabezados de columna o de

fila para la tabla.

o Izquierda. Convierte la primera columna de la tabla

en una columna para encabezados, lo que permite
introducir un encabezado para cada fila de la tabla.
o Superior. Convierte la primera fila de la tabla en una
fila de encabezados, lo que permite introducir un
encabezado para cada columna de la tabla.
o Ambos. Permite introducir encabezados de columna y
de fila de la tabla.
Texto. El ttulo de tabla que se ubica fuera de la misma.
Resumen. Descripcin de la tabla.

El formato de las tablas y de las celdas se especifica a travs
del Inspector de propiedades. Ambos elementos contienen diferentes
atributos
Para dar formato a la tabla, posiciona el puntero del mouse
sobre las esquinas de la tabla y luego haz clic izquierdo.
6
1
4
2
7
5
1. Id de tabla. Especifica un ID para la tabla.

2. Filas y Cols. Nmero de filas y columnas que tendr la tabla.
3. An. El ancho de la tabla en pxeles o porcentaje.
4. Rell. Celda. Determina el nmero de pxeles entre el contenido
de una celda y los lmites de la misma.
5. Esp. Celda. Nmero de pxeles entre celdas de tabla contiguas.
6. Alinear. Determina dnde aparecer la tabla en relacin con
otros elementos del mismo prrafo, como por ejemplo texto o
imgenes.
7. Borde. Especifica el ancho en pxeles de los bordes de la tabla.
8. Clase. Establece una clase CSS en la tabla.
8
0
Diseo de Pginas Web

(Dreamweaver CS6)
Para aplicar formato a las celdas, selecciona una celda,

rengln o columna y modifica las propiedades que desees.
6
5
8
1. Combinar celdas. Combina las celdas, filas o columnas

seleccionadas para crear una sola celda.
2. Dividir celda. Divide una celda para crear dos o ms celdas.
3. Horiz. Especifica la alineacin horizontal del contenido de una
celda, fila o columna.
4. Vert. Especifica la alineacin vertical del contenido de una
celda, fila o columna.
5. An (Ancho) y Al (Alto). Configura el ancho y alto de las
celdas seleccionadas en pxeles o como porcentaje del ancho o
alto total de la tabla.
6. No aj. Impide el ajuste de lnea, mantenindose todo el texto de
una celda en una sola lnea. 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.
7. Encabezado. Aplica a la celda seleccionada el formato de

celdas de encabezado de tabla. De forma predeterminada, el
contenido de las celdas de encabezado de la tabla aparecer
en negrita y centrado.
8. Fondo. El color de fondo de una celda, columna o fila elegido
mediante el selector de color.
Para aadir filas y columnas a la tabla, realiza:
1. Posicinate en la celda de acuerdo donde quieras insertar la fila o columna.
2. Haz clic en el men Modificar Tabla Insertar
filas o columnas. O presiona los Metacomandos:
< Ctrl + M > = Insertar fila.
< Ctrl + Shift + A > = Insertar columna.
3. Si se elige la opcin Insertar filas o columnas, se mostrar
el cuadro de dilogo Insertar filas o columnas; donde se
habr de especificar el nmero de filas o columnas y el lugar
donde se insertarn.
4. Una vez configurada la ventana, pulsa sobre el botn Aceptar.
8
2
Diseo de Pginas Web

(Dreamweaver CS6)

Para eliminar una fila o una columna, haz clic en una celda que
desees eliminar y selecciona el men Modificar Tabla Eliminar
fila o Eliminar columna, segn sea el caso.
Tambin puedes seleccionar una fila o columna completa y luego
dar clic en el men Edicin Borrar o presionar la tecla < Supr >.
Dreamweaver, incluye herramientas que permiten aumentar o
disminuir el nmero de filas o columnas que ocupa una celda.
Para combinar celdas en una tabla, primero se deben tener
seleccionadas las celdas contiguas a combinar. Luego posicionarse en
el men Modificar Tabla Combinar celdas.
Otra opcin es desde el botn Combinar celdas
del Inspector de propiedades
ampliado.
Para dividir una celda, haz clic en la celda y selecciona el men Modificar
Tabla
Dividir celda.
O desde el botn Dividir celdas el Inspector de propiedades
ampliado. En el cuadro de dilogo Dividir celda, especifica
cmo deseas dividirla.
7.7 Anidar tablas.

Una tabla anidada es una tabla dentro de una celda o de otra
tabla. Asimismo, es posible modificar el formato a una tabla anidada
como se hara en cualquier otra tabla.
Para anidar una tabla en una celda lleva se llevan a cabo los
mismos pasos como si estuviramos insertando una tabla.
7.8 Ordenar tablas.
El orden de las filas de una tabla poder ser en funcin del
contenido de una sola columna o en funcin del contenido de dos
columnas.
Nota: No se pueden ordenar tablas que contengan atributos
colspan o rowspan, es decir, tablas con celdas combinadas.
Para ordenar una tabla, realiza:
1. Selecciona la tabla o haz clic en cualquiera de las celdas.
2. Del men Comandos, selecciona la opcin Ordenar tabla.
3. Se mostrar el cuadro de dilogo Ordenar tabla, ah
establecers las siguientes opciones:
Ordenar por. Establece los valores de la columna que se

utilizarn para ordenar las filas de la tabla.
Orden. Determina si la columna debe ordenarse alfabtica

o numricamente, y si el orden ser ascendente o
descendente.
Despus por / Orden. Configura el orden de una
clasificacin secundaria en otra columna.
Opciones. Permite activar los siguientes aspectos:
o El orden incluye la primera fila. Especifica que la
primera fila de la tabla debe incluirse en la clasificacin.
o Ordenar filas de encabezado. Especifica que se
ordenen todas las filas de la seccin thead de la tabla
(si las hay) siguiendo los mismos criterios que para las
filas del cuerpo.
o Ordenar filas de pie. Especifica que se ordenen todas
las filas de la seccin tfoot de la tabla (si las hay)
siguiendo los mismos criterios que para las filas del
cuerpo.
o No modificar los colores de fila hasta que haya
finalizado la operacin de orden. Especifica que los
atributos
de
asociados
al
fila
de
mismo
la
tabla
contenido
deben
permanecer
despus
de
la
ordenacin.
Un marco o frame es una zona de una ventana de navegador que
puede mostrar un documento HTML independiente de lo que se muestra
en el resto de la ventana. Los marcos permiten dividir la ventana de un
navegador en varias regiones, cada una las cuales puede mostrar un
documento HTML diferente.
7.10 Crear marcos.
Existen dos formas de crear marcos, ya sea seleccionando entre

varios conjuntos de marcos predefinidos o diseando uno propio.
Los marcos predefinidos se visualizan al momento de crear un

nuevo documento HTML, para ello, sitate en el men Archivo, opcin
Nuevo. En el cuadro de dilogo Nuevo documento selecciona la
categora Pgina en blanco (Tipo de pgina) HTML y selecciona
alguno de los diseos predefinidos por Dreamweaver CS6.
Otra opcin para crear marcos

es
travs
HTML
del
men
Marcos.
Insertar
En
dicha
opcin se podr elegir el tipo de

marco que se desee insertar.
7.11 Seleccionar marcos.

Dreamweaver, ofrece un panel para seleccionar de la forma
correcta y rpida los marcos de nuestro documento. El panel Marcos
proporciona una representacin grfica de los marcos, mostrando la
estructura del conjunto de marcos identificados por sus nombres.
Para activar el panel Marcos, haz clic en el men Ventana
Marcos o presiona el Metacomando < Shift + F2 >.
7.12 Guardar marcos.

Para guardar de la forma correcta los marcos creados en el
documento HTML, realiza lo siguiente:
1. Dirgete al men Archivo y selecciona la opcin Guardar todo.
2. Se mostrar el cuadro de dilogo Guardar como, en dicho
cuadro deberemos especificar el nombre del marco pero, antes
de asignarle nombre deberemos fijarnos en el rea de trabajo
de Dreamweaver ya que ser la clave principal para guardar
de forma correcta los marcos.
Si se desplaza hacia a un lado el cuadro de dilogo se podr
apreciar que se encuentra seleccionado toda el rea de trabajo
en un cuadro de lneas inclinadas de color gris y negro.
La seleccin anterior indica que guardar la pgina principal (la

llamada pgina index) que es aquella que contendr todos
los marcos dentro del mismo documento. Nota: se recomienda
que se guarde con el nombre de index.html. Una vez que se
haya guardado la pgina principal, el mismo cuadro de dilogo
an no se cerrar ya que tendr seleccionado otro marco para
despus guardarlo. Cuando se haya terminado de guardar
todos los marcos, la ventana
automticamente.
Guardar como, se cerrar
7.13 Propiedades de los marcos.

Para poder ver o establecer las propiedades de un marco, primero
seleccinalo desde el panel Marcos.
1
4
1. Nombre de marco. Nombre utilizado por el atributo target de

un vnculo o por un script para referirse al marco
2. Orig. Especifica el documento de origen que debe mostrarse en el marco.
3. Desplaz. Especifica si aparecern barras de desplazamiento en el marco.
4. Bordes. Muestra u oculta los bordes del marco actual al
visualizarlo en un navegador.
5. Color de borde. Establece un color de borde para todos los bordes del
marco.
6. Ancho del margen. Establece el ancho de los mrgenes
izquierdo y derecho en pxeles.
7. Alto de mrgenes. Establece el alto de los mrgenes
superior e inferior en pxeles.
7.14 Hipervnculos en marcos.

Para incluir un vnculo en un marco que abra un documento en
otro marco, se debe establecer el destino del vnculo. El atributo target
de un vnculo especifica el marco o ventana en la que se abrir el
contenido vinculado.
Se debe tomar en consideracin que cuando se desea crear un
hipervnculo entre marcos, se mostrar el nombre del marco como tal,
para ello, es recomendable cambiar los nombres de los marcos para
tener un mejor control en los hipervnculos.

N
1. Prioridad de formato de tabla en HTML.
2. Eliminar marcos.
3. Comportamientos JavaScript en marcos.
UNIDAD
FORMULARIOS.
9
2
Diseo de Pginas Web

(Dreamweaver CS6)
FORMULARIOS.
Los formularios son los elementos que se utilizan para la
recoleccin de datos del usuario y se emplean muy cotidianamente
para el registro de usuarios, comentarios, inicio de sesiones, etc.
Para crear formularios en Dreamweaver, realiza:
1. Haz clic en el men Insertar Formulario Formulario.
O del panel Insertar Categora Formularios Formulario.
2. Se mostrar el siguiente recuadro en donde se habrn de ir
insertando los diferentes elementos que queramos usar en el
formulario.
3. A continuacin configura las propiedades del formulario mediante el

Inspector de propiedades.
5
2
3
1

6
4
1. ID de formulario. Nombre del formulario.

2. Accin. Especifica la pgina o el script que procesar
los datos del formulario.
3. Mtodo. Indica el mtodo que se emplear para transmitir
los datos del formulario al servidor. Puede tomar los
siguientes valores:
-
Predet. Utiliza el valor predeterminado (GET) del

navegador para enviar os datos del formulario al
servidor.
GET. Aade el valor al URL que solicita la pgina.
POST. Incrusta los datos del formulario en la peticin HTTP.
4. Tipo de codificacin. Especifica el tipo de codificacin

de los datos remitidos al servidor para su procesamiento.
5. Dest. Especifica la ventana en la que va a visualizar los
datos devueltos por el programa ejecutado.
6. Clase. Define un estilo creado con anterioridad.
4. Despus comienza a insertar los objetos que desees usar en el formulario.

Los objetos de formulario son mecanismos que permiten a los
usuarios introducir datos. Puede aadir a un formulario los
siguientes objetos de formulario:
8.3.1
Elemento Campo de texto.
Aceptan cualquier valor alfanumrico. El texto se puede visualizar

como una sola lnea, como varias lneas y como un campo de
contrasea.
7
5
4
6
3
2
1. Ancho car. Establece el nmero mximo de caracteres que se

puede mostrar en el campo.
2. Car. mx. Establece el nmero mximo de caracteres que se
puede introducir en los campos de texto de una lnea.
3. Desactivado. Desactiva el rea de texto.
4. Slo lectura. Convierte el rea de texto en un rea de texto de slo lectura.
5. Tipo. Especifica si el campo es de una lnea, de varias lneas o de contrasea.
-
Una lnea. Campo para una sola lnea de texto.
Multilnea. Campo para varias lneas de texto.
Contrasea. Campo para slo contrasea.
6. Val. Inicial. Asigna el valor mostrado en el campo cuando el

formulario se carga inicialmente.
7. Clase. Permite aplicar reglas CSS al objeto.
8.3.2
Elemento rea de texto.
Es similar al elemento Campo de texto, slo que su valor

predeterminado es la visualizacin del texto en varias lneas.
8.3.3
Elemento Botn.
Realizan acciones cuando se hace clic en ellos. Los botones para

enviar datos de formulario al servidor o para restablecer el formulario.
1
3
1. Nombre del botn. Asigna un nombre al botn.

2. Valor. Determina el texto que aparece dentro el botn.
3. Accin. Determina qu ocurre cuando se hace clic en el botn.
Enviar formulario. Enva los datos del formulario para

procesarlos cuando el usuario hace clic en el botn.
Restablecer
formulario.
Borra
el
contenido
del
formulario cuando se hace clic en el botn.

-
Ninguno
-Especifica
la
accin
que debe
realizarse
cuando se hace clic en el botn. Por ejemplo, puede

aadir un comportamiento JavaScript
que abra otra
pgina cuando el usuario haga clic en el botn.

4. Clase. Aplica reglas CSS al objeto.
8.3.4
Elemento Casilla de verificacin.
Admiten mltiples respuestas en un solo grupo de opciones. Un

usuario puede seleccionar tantas acciones como sean necesarias.
1
3
1. Valor activado. Establece el valor que debe enviarse al

servidor cuando se activa la casilla de verificacin.
2. Estado inicial. Determina si la casilla de verificacin est
seleccionada o no cuando el formulario se carga en el
navegador.
3. Clase. Aplica reglas de Hojas de estilo en cascada (CSS) al objeto.
8.3.5
Elemento Botn de opcin.
Representan opciones que se excluyen mutuamente. Cuando se

selecciona un botn de un grupo de botones de opcin, se desactivan
todos los dems botones del grupo (un grupo est formado por dos o
ms botones que comparten el mismo nombre).
8.3.6
Elemento Seleccionar (Lista/Men). Muestra valores de
opciones en una lista de desplazamiento que permite a los usuarios

seleccionar varias opciones. La opcin Lista muestra los valores de las
opciones en un men que permite a los usuarios seleccionar una sola
opcin.
5
5
6
2
1. Seleccionar. Asigna un nombre al men. El nombre debe ser exclusivo.

2. Tipo. Indica si al hacer clic en el men ste se despliega
(opcin Men) o si muestra una lista de elementos por la que
se puede desplazar (opcin Lista).
3. Selecciones (Slo en el tipo Lista). Indica si el usuario
puede seleccionar varios elementos de la lista.
4. Alto (Slo en el tipo Lista). Establece el nmero de
elementos que se muestran en el men.
5. Valores de lista. Abre un cuadro de dilogo que permite
aadir elementos a un men de formulario:
A. Utiliza los botones ms (+) y menos (-) para aadir y quitar
elementos de la lista.
B. Escribe texto para la etiqueta y un valor opcional para cada
elemento de men.
C. Usa los botones de flecha arriba y abajo para reorganizar
los elementos de la lista.
6. Clase. Permite aplicar reglas CSS al objeto.
7. Seleccionado inicialmente. Establece los elementos
seleccionados en la lista de forma predeterminada. Haz clic en
el elemento o los elementos de la lista.
8.3.7
Elemento Campo de archivo.
Permiten al usuario examinar los archivos de su ordenador y

cargarlos como datos de un formulario.
1
2
1. Campo de archivo. Especifica el nombre del objeto de campo de archivo.

2. Ancho car. Establece el nmero mximo de caracteres que se
puede mostrar en el campo.
3. Car. mx. Especifica el nmero mximo de caracteres que
debe contener el campo. Si el usuario utiliza Examinar para
localizar el archivo, el nombre del archivo y la ruta pueden
superar el valor de Car. mx. Sin embargo, si el usuario
intenta escribir el nombre del archivo y la ruta, el campo de
archivo slo admitir el nmero de caracteres especificado en
el valor Car. mx.
8.3.8
Elemento Campo de imagen.
Permiten insertar una imagen en un formulario.
8.3.9
Elemento Campo oculto.
Permiten almacenar informacin introducida por el usuario, como

un nombre, una direccin de correo electrnico o una preferencia de
visualizacin, y utilizarla la prxima vez que el usuario visite el sitio.
Unidad 8
Formularios
1
0
1. Campo oculto. Especifica el nombre del campo.

2. Valor. Asigna un valor al campo. Este valor se transfiere al
servidor cuando se enva el formulario.
Dreamweaver puede aadir cdigo JavaScript que comprueba el
contenido de los campos de texto especificados para asegurarse de que
el usuario ha introducido el tipo correcto de datos.
Para validar un formulario, realiza:
1. Selecciona el elemento que desees validar.
2. Activa el panel Comportamientos, desde el men
Ventana o usando el Metacomando < Shift + F4 >.
3. En el panel Comportamientos, da clic en el botn
selecciona del men contextual la opcin Validar formulario.

Se mostrar el cuadro de dilogo Validar formulario, en
donde se habrn de especificar los siguientes valores:
Obligatorio. Determina que el campo no se debe quedar sin contestar.
Cualquier cosa. Define que el campo es obligatorio, pero

no tiene que contener algn tipo de dato determinado.
Direccin de correo electrnico. Comprueba que el

campo contenga el smbolo de arroba (@).
Nmero. Verifica que el campo contenga slo caracteres numricos.
Nmero del. Comprueba que el campo contenga

caracteres numricos dentro de un rango especfico.
4. Cuando termines de configurar las opciones, haz clic en Aceptar.

El reciente lenguaje HTML5 incorpor un nuevo atributo llamado
required que obliga al usuario rellenar el elemento para poder enviar
el formulario.
Dicho atributo se puede emplear en los anteriores objetos
del formulario, excepto en el elemento Lista/Men.
10
2
Diseo de Pginas Web

(Dreamweaver CS6)
Cuando se coloca este atributo en alguno de los elementos del

formulario y se visualiza en el navegador, el usuario deber rellenar
dicho campo sino se mostrar algo parecido a la siguiente imagen:
N
1. Objetos de formularios dinmicos.
2. Formularios Spry.
3. Comportamientos JavaScript de Dreamweaver CS6.
UNIDAD
CAPAS.
9.1 Concepto de Capa.
9.2 Insertar capas.
9.3 Propiedades de las capas.
9.4Hojas de estilos en las capas.
10
4
Diseo de Pginas Web

(Dreamweaver CS6)
CAPAS.
9.1 Concepto de
Capa.
Las capas son recuadros que pueden colocarse en cualquier
parte de la Pgina Web y tener cualquier clase de contenido HTML. Las
capas pueden ocultarse y solaparse entre s, lo que proporciona una
gran ventaja para el diseo.
9.2 Insertar capas.
Dreamweaver ofrece tres formas para insertar capas, cada una
de ellas con una funcin en especfico.
Para insertar cualquier de las tres capas, realiza alguna de las siguientes
opciones:
1. Sitate en el men Insertar Objetos de diseo
Selecciona la capa a insertar.
2. Otra forma es desde el panel Insertar, en la categora

Diseo, selecciona la opcin a emplear.
9.2.1 Etiqueta Div.
La Etiqueta Div coloca una capa fija en el documento, esto
es, la capa se encontrar esttica.
9.2.2
Etiqueta DIV de diseo de cuadricula fluida.
Incrusta una capa que se adapta a la resolucin de la pantalla,

es decir,
al modificar el tamao del navegador, el contenido de esta etiqueta se
adapta.
9.2.3
Div PA.

Unidad 9
Capas
Inserta una capa de posicin absoluta, es decir, es posible

moverla en cualquier parte del documento.
10
5
9.3 Propiedades de las capas.

Las propiedades de la capa se especifican desde el Inspector de
propiedades, pero slo es posible especificar las propiedades de la Capa
Div PA, ya que los otros dos tipos de capas debern especificarse desde
una Hoja de Estilos CSS.
3
1
4
6
10
7
9
5
2
1. Elemento CSS-P. Indica el nombre de la capa, que puede ser

cambiado a travs del panel Elementos PA o desde el cuadro de
texto nombre de la capa.
2. Desb.
Controla
cmo
aparecen
los
elementos
PA
en
un
navegador cuando el contenido desborda el tamao especificado

del elemento PA, y puede tomar los valores:
VISIBLE. Muestra todo el contenido de la capa, haciendo
ms grande la capa.
HIDDEN. Slo visualiza el contenido de la capa que quepa dentro de ella.
SCROLL. Muestra la barra de desplazamiento, aunque el
contenido de la capa pueda ser visualizado totalmente
AUTO. Muestra la barra de desplazamiento cuando sea necesario.
3. Izq y Sup. Especifican la posicin de la esquina superior

izquierda del elemento PA con respecto a la esquina superior
izquierda de la pgina o del elemento PA padre, si el elemento PA
es anidado.
4. An y Al. Especifican el ancho y alto del elemento PA.
5. Clip. Define el rea visible (recorte) de un elemento PA.
Especifica las coordenadas izquierda, superior, derecha e inferior
para definir un rectngulo en el espacio de coordenadas del
elemento PA (contando desde la esquina superior izquierda del
elemento PA). El elemento PA se recorta de modo que slo sea
visible el rectngulo especificado.
6. Z-Index. Determina el ndice z, u orden de apilamiento, del elemento PA.
7. Vis. Especifica si el elemento PA es visible inicialmente o no.
Selecciona alguna de las opciones siguientes:
DEFAULT. Es la opcin predeterminada
navegador,
la
mayora
de
los
que tenga el
navegadores
utilizan
INHERIT (Heredada) de forma predeterminada.

INHERIT. Muestra la capa mientras la capa a la que
pertenece tambin se est mostrando
VISIBLE. Muestra la capa, aunque la capa a la que
pertenece no se est viendo
HIDDEN.
No
muestra
el
contenido
del
elemento
PA,
independientemente del valor del padre.

8. Im. Fondo. Especifica una imagen de fondo para el elemento PA.
9. Col. Fondo. Especifica un color de fondo para el elemento PA.
(Deja esta opcin en blanco para especificar un fondo
transparente).
10.
Clase. Especifica la clase CSS utilizada para aplicar estilo al elemento PA.
9.4 Hojas de estilos en las capas.

Puedes emplear una hoja de estilos para visualizar los fondos,
los bordes o el modelo de cuadro de los elementos que no suelen
considerarse bloques de diseo CSS.
Para crear una hoja de estilos para una capa, realiza:
1. Crea una hoja de estilos CSS externa.
2. En la nueva hoja de estilos, crea las reglas que asignen el
atributo display:block a los elementos de pgina que desea
visualizar como bloques de diseo CSS.
Por ejemplo, si quieres visualizar un color de fondo para los
prrafos y los elementos de lista, puedes crear una hoja de
estilos con las reglas siguientes.
3. Guarda el archivo.
4. Adjunta la hoja de estilos con el documento a la que desees
aplicar los estilos creados.
5. Por ltimo, aplica el estilo CSS a la capa deseada.
N
1. Propiedades CSS para el manejo capas.
2. Configurar las capas Div PA desde el cuadro de dilogo Preferencias.
3. Mostrar u ocultar capas.
UNIDAD
ELEMENTOS MULTIMEDIA.
10.1 Insertar Audio.
10.2
Insertar Video.
10.3
Archivo SWF.
10.4
Componente FLV.
10.5
Pelculas Shockwave.
10.6
Control ActiveX.
10.7
Elemento Applet.
10
Unidad 10 Elementos
multimedia
10
9
ELEMENTOS MULTIMEDIA.
10.1 Insertar
Audio.
Incorporar sonido a la Pgina Web no es muy recomendable, ya
que en algunas ocasiones el usuario que visita el sitio suele estar
escuchando su propia msica cuando se encuentran navegando en
Internet, y esto puede resultar molesto para el internauta. Sin embargo,
en Dreamweaver es posible insertar diferentes tipos de audio, 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.
10.1.1 Etiqueta < AUDIO >.
En Dreamweaver CS6 se incorpor el uso de nuevas etiquetas
de HTML5 que versiones anteriores al programa no contaba con ellas,
unas de estas etiquetas es la de incorporar audio a la Pgina Web y sus
etiquetas son la de <AUDIO> </AUDIO>; cuando se desea generar
el cdigo HTML manualmente se deber emplear dicha etiqueta y sus
respectivos atributos a emplear.
10.1.2
Comando Plug-in.
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.
Siempre que uses sonido en tu Pgina Web, proporciona un
control para desactivar o activar la reproduccin de sonido, por si los
visitantes no desean escuchar el contenido de audio.
Para insertar audio en el documento, realiza:
11
2
Diseo de Pginas Web

(Dreamweaver CS6)
1. Sitate en el lugar donde deseas colocar el archivo y luego

realiza alguno de los siguientes procedimientos:

A) En la categora Comn del panel Insertar, haz clic en el botn Media

y selecciona el icono Plug-in del men desplegable.
B) Men Insertar Media Plug-in.
2. Localiza el archivo de audio y haz clic en Aceptar.
3. Especifica 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.
Unidad 10 Elementos
multimedia
11
1
10.2 Insertar Video.

Algunas ocasiones es necesario colocar video(s) en Pginas Web,
ya sea
para
ilustrar algo o simplemente una atraccin para el
internauta.
Los formatos de vdeo que suelen utilizarse en Internet son los formatos: .avi,
.mpeg y .mov.
Sin embargo, hay que tomar en cuenta el peso del archivo, ya que
entre ms pese el archivo de video, mayor ser el tiempo en que va a
descargarse y mostrarse en el sitio Web.
10.2.1 Etiqueta <VIDEO>.
Otra de las etiquetas nuevas de HTML5 es la etiqueta <VIDEO>
que remplaz a la etiqueta <EMBED>, ambas etiquetas tienen la
misma funcin de insertar al documento un video, lo que llega a
cambiar en ambas etiquetas son sus propiedades.
10.2.2
Comando Plug-in.
Para insertar un archivo de vdeo en Dreamweaver, realiza:

1. Sitate en el lugar donde deseas colocar el archivo y luego
realiza alguno de los siguientes procedimientos:
A) En la categora Comn del panel Insertar, haz clic en el
botn Media y selecciona el icono Plug-in del men
desplegable.
B) Men Insertar Media Plug-in.
11
2
Diseo de Pginas Web

(Dreamweaver CS6)
2. Localiza el archivo de video y haz clic en Aceptar.
3. Configura las propiedades del video desde el Inspector de propiedades.
10.3 Archivo SWF.

El archivo SWF son animaciones optimizadas para Web, creadas
en Flash (.fla) y que para su visualizacin se requiere tener instalado un
software llamado Adobe Flash
Player, ya que sin este programa
instalado en el ordenador no ser posible ver el archivo SWF.

Para insertar un archivo SWF, realiza lo siguiente:
1. Sitate en el lugar donde quieras insertar el archivo SWF y
luego lleva a cabo alguno de estos procedimientos:
A) En la categora Comn del panel Insertar, selecciona
Media y haz clic en el icono SWF.
B) Men Insertar
Media
SWF.
2. En el cuadro de dilogo que
se mostrar, selecciona un
archivo SWF (.swf).
3. Guarda el archivo.
10.4 Componente FLV.

El componente FLV incorpora videos al documento sin
necesidad de utilizar la herramienta de creacin de Flash, dicho videos
debern contener la extensin .flv.
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.
Para insertar un componente FLV, realiza:
1. Men Insertar Media FLV o panel Insertar Categora Comn
Media
FLV.
2. En el cuadro de dilogo Insertar FLV, selecciona Descarga progresiva de
vdeo
o Flujo de vdeo en el men emergente Tipo de vdeo.
3. Completa el resto de las opciones del cuadro de dilogo y haz clic en

Aceptar.
10.5 Pelculas Shockwave.

Las pelculas Shockwave son un formato comprimido de
multimedia interactivo en la Web que permite la descarga rpida de los
archivos multimedia y su reproduccin en los navegadores de uso ms
frecuente.
Para insertar una pelcula Shockwave, realiza:
1. Men Insertar Media Shockwave o panel Insertar Categora
Comn
Media Shockwave.
2. En el cuadro de dilogo que se muestra, selecciona un archivo de pelcula.
3. En el Inspector de propiedades, introduce el ancho y el alto de
la pelcula en los cuadros An y Al.
10.6 Control ActiveX.
Los controles ActiveX son componentes reutilizables, semejantes
a aplicaciones en miniatura, que tienen capacidad para actuar a modo
de plug-ins de navegador. Se ejecutan en Internet Explorer con
Windows, pero no en Macintosh ni en Netscape Navigator. El objeto
ActiveX de Dreamweaver permite proporcionar atributos y parmetros
para un control ActiveX en el navegador del visitante.
Para insertar un control ActiveX, realiza:
1. Men Insertar Media ActiveX o panel Insertar Categora
Comn
Media ActiveX.
Elemento Applet.
Java es un lenguaje de programacin que permite el desarrollo de
aplicaciones pequeas (applets) que pueden incrustarse en pginas
Web.
Para incrustar elementos Applet, realiza:
1. Men Insertar Media Applet o panel Insertar Categora Comn

Media
Applet.

Cursodreamweavercs 6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cursodreamweavercs 6

Uploaded by

Copyright:

Available Formats

iv

Diseo de Pginas Web (Dreamweaver CS6)

ADRIANA HURTADO URIBE

2013. Derechos Reservados Daniel Olalde Soto.

Introduccin a Dreamweaver CS6.

1.2. Acceso a Dreamweaver.

1.3. Ambiente de Dreamweaver.

1.4. Vistas del documento.

1.4.1. Vista Cdigo.

2.5. Panel Insertar.

2.6. Panel Estilos CSS.

Configurar un sitio en Dreamweaver.

3.1. Concepto de Sitio.

3.2. Tipos de Sitios en Dreamweaver.

2015. Derechos Reservados

Diseo de Pginas Web (Dreamweaver CS6)

3.3. Estructura de una Pgina Web.

3.4. Configurar un sitio nuevo.

3.5. Configuracin de un servidor de prueba.

3.6. Cuadro de dilogo Administrar sitios.

3.7. Panel Archivos.

Formato a la Pgina Web.

4.1.1 Categora Apariencia (CSS).

4.3 Objeto Fecha.

4.4 Reglas horizontales.

4.5 Caracteres especiales.

4.7 Formato al texto.

4.7.1 Men Formato.

4.8 Concepto de Estilo CSS.

4.9 Crear estilos CSS.

4.9.1 Propiedades CSS.

4.10 Editar estilos CSS.

4.11 Vincular estilos CSS.

4.12 Mens usando hojas de estilos.

5.1. Concepto de Imagen.

5.2. Insertar imgenes.

5.3. Marcadores de posicin de imagen.

5.4. Propiedades de imgenes.

5.5. Imagen de sustitucin (Rollover).

5.6. Objetos Inteligentes.

6.1. Concepto de Hipervnculo.

6.2. Tipos de rutas de los vnculos.

6.4. Destino de los hipervnculos.

7.2 Creacin de tablas.

7.3 Formato de tablas y celdas.

7.4 Insertar filas y columnas.

7.5 Eliminar filas y columnas.

7.6 Combinar o dividir celdas.

7.7 Anidar tablas.

7.8 Ordenar tablas.

viii Diseo de Pginas Web (Dreamweaver CS6)

9.1 Concepto de Capa.

7.9 Concepto de marcos.

7.10 Crear marcos.

7.11 Seleccionar marcos.

7.12 Guardar marcos.

7.13 Propiedades de los marcos.

7.14 Hipervnculos en marcos.

8.1 Concepto de Formulario.

8.2 Crear formularios.

8.3 Objetos de los formularios.

8.3.4 Elemento Casilla de verificacin.

8.3.5 Elemento Botn de opcin.