Operación de Paquetes III

OPERACIÓN DE
PAQUETES III
ii
iv Diseño de Páginas Web (Dreamweaver Contenido v
CONTENID
O
1 Introducción a Dreamweaver CS6. 1
1.1. ¿Qué es Dreamweaver? 2
1.2. Acceso a Dreamweaver. 2
1.3. Ambiente de Dreamweaver. 3
1.4. Vistas del documento. 4
1.4.1. Vista Código.

1.4.2. Vista Diseño.
1.4.3. Vista Dividir.
1.4.4. Vista En vivo.
1.4.5. Vista Código 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. 13
2.1. Inspector de propiedades. 14
2.2. Barra de herramientas Documento. 14
2.3. Barra de herramientas Estado. 15
2.4. Barra de herramientas Navegación con navegador. 15
2.5. Panel Insertar. 16
2.6. Panel Estilos CSS. 17
3 Configurar un sitio en Dreamweaver. 19
3.1. Concepto de Sitio. 20
3.2. Tipos de Sitios en Dreamweaver. 20
© 2013. Derechos Reservados Daniel Olalde

vi Diseño de Páginas Web (Dreamweaver
CS6)
3.3. Estructura de una Página Web. 21

3.4. Configurar un sitio nuevo. 22
3.5. Configuración de un servidor de prueba. 22
3.6. Cuadro de diálogo Administrar sitios. 24
3.7. Panel Archivos. 25
4 Formato a la Página Web. 27
4.1 Propiedades de la página. 28
4.1.1 Categoría Apariencia (CSS).

4.1.2 Categoría Apariencia (HTML).
4.1.3 Categoría Vínculos (CSS).
4.1.4 Categoría Encabezados (CSS).
4.1.5 Categoría Título / Codificación.
4.1.6 Categoría 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 Menús usando hojas de estilos. 45
5 Imágenes. 55

Soto.
Contenido vii
5.1. Concepto de Imagen. 56
5.2. Insertar imágenes. 56
5.3. Marcadores de posición de imagen. 58
5.4. Propiedades de imágenes. 59
5.5. Imagen de sustitución (Rollover). 61
5.6. Objetos Inteligentes. 62
6 Hipervínculos. 66
6.1. Concepto de Hipervínculo. 67
6.2. Tipos de rutas de los vínculos. 67
6.2.1. Rutas absolutas.

6.2.2. Rutas relativas al documento.
6.2.3. Rutas relativas a la raíz del sitio.
6.3. Crear hipervínculos. 68
6.4. Destino de los hipervínculos. 69
6.5. Anclaje con nombre. 70
6.6. Vínculo a correo electrónico. 71
6.7. Menú de salto. 72
6.8. Zonas interactivas. 74
7 Diseño de la Página Web. 76
7.1 Concepto de Tabla. 77
7.2 Creación 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. 83

viii Diseño de Páginas Web (Dreamweaver
CS6)
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 Hipervínculos en marcos. 89
8 Formularios. 91
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 Botón.
8.3.4 Elemento Casilla de verificación.
8.3.5 Elemento Botón de opción.
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 Validación de formularios aplicando JavaScript. 100
8.5 Validación de formularios usando HTML5. 101
9 Capas. 103
9.1 Concepto de Capa. 104
9.2 Insertar capas. 104
9.2.1 Etiqueta Div.

9.2.2 Etiqueta DIV de diseño de cuadricula fluida.
9.2.3 Div PA.

Soto.
Contenido ix
9.3 Propiedades de la capas. 105

9.4 Hojas de estilos en las capas. 107
10 Elementos multimedia. 108
10.1 Insertar Audio. 109
10.1.1 Etiqueta <AUDIO>.
10.1.2 Comando Plug-in.
10.2 Insertar Video. 111
10.2.1 Etiqueta <VIDEO>.
10.3 Archivo SWF. 112
10.4 Componente FLV. 113
10.5 Películas Shockwave. 114
10.6 Control ActiveX. 114
10.7 Elemento Applet. 114
UNIDAD
Introducción a Dreamweaver CS6.
1
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.8 Importar y exportar documentos.
1.9Cerrar y salir de Dreamweaver.

2 Diseño de Páginas Web (Dreamweaver
CS6)
INTRODUCCIÓN A DREAMWEAVER CS6.

1.1 ¿Qué es Dreamweaver?
Dreamweaver es el software para el desarrollo y diseño de Páginas Web
adaptables para diversos dispositivos electrónicos.
1.2 Acceso a Dreamweaver.

Para poder acceder a Dreamweaver existen diversas formas, pero las más usuales
son:
OPCIÓN 1:
1) Abre el menú Metro de Windows (Presionado la tecla de < Windows >).
2) Desplázate por los programas y haz clic en la aplicación Adobe
Dreamweaver CS6.
OPCIÓN 2:
Metacomando < Win + R >.
Teclea la palabra Dreamweaver.
Pulsa la tecla < Enter >.
© 2013. Derechos Reservados Daniel Olalde Soto.

Unidad 1 – Introducción a Dreamweaver 3
CS6
1.3 Ambiente de Dreamweaver.
Pestañas del documento Barra de herramientas Documento
Botón de la Conmutador de
Barra de menús espacios de
aplicación trabajo
Área de trabajo
Barra de herramientas
Paneles
Estado Inspector de propiedades
1.4 Vistas del documento.

Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el
contenido del documento, para así usar la vista con la que más nos agrade trabajar.
CS6)
1.4.1 Vista Código.

Presenta la codificación para escribir o editar manualmente el código con el que
se esté trabajando.
Para activar la Vista código, realiza cualquiera de las siguientes tres opciones:
1. Haz clic en botón Código de la Barra de herramientas documento.
2. Sitúate en el menú Ver y selecciona la opción Código.

3. O presiona la tecla < F10 >.
Al realizar cualquiera de las tres opciones anteriores, se mostrará la Vista
Código del documento con el que se esté trabajando.

Soto.
CS6
1.4.2 Vista Diseño.

Muestra el contenido de la página web y permite editarlo. Activa la Vista
Diseño, empleando cualquiera de las siguientes opciones:
1. Haz clic en botón Diseño de la Barra de herramientas Documento.
2. Sitúate en el menú Ver y selecciona la opción Diseño.
1.4.3 Vista Dividir.

Separa en dos el área de trabajo, visualizando en una parte el código y en la
otra la vista diseño. La Vista Dividir, se activa desde:
1. El botón Dividir de la Barra de herramientas Documento.
2. O desde el menú Ver  Código y Diseño.

CS6)
1.4.4 Vista En vivo.

Es casi similar a la vista diseño, sólo que en esta es posible interactuar con el
contenido de la página tal y como se estuviera haciendo en el navegador. Activa la
Vista En vivo, desde:
1. El botón Vista En vivo de la Barra de herramientas Documento.
2. Desde el menú Ver  Vista en vivo.

3. O Metacomando < Alt + F11 >.

Soto.
CS6
1.4.5 Vista Código en vivo.

Divide en dos partes el área de trabajo, mostrando el contenido de la página
web en vivo, y a la vez que es posible editar dicho contenido mediante código.
Una vez que se haya activado la Vista En Vivo, es posible activar la Vista Código
en vivo. Para ello realiza lo siguiente:
1. Haz clic en el botón Código en vivo de la Barra de herramientas Documento.
2. O desde el menú Ver  Código en vivo.

CS6)
1.4.6 Vista previa en el navegador.

Permite visualizar la página web en alguno de los navegadores instalados en el
equipo (por lo regular es el navegador que se tiene por default).
Para ejecutar la página en un navegador, presiona la tecla < F12 > o haz clic en
el ícono de la Barra de herramientas Documento.

Soto.
CS6
1.5 Crear un nuevo documento

Para crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente:
1. Menú Archivo  Nuevo.
En la categoría Página en blanco del cuadro de diálogo Nuevo documento,
selecciona el tipo de página que deseas crear en la columna Tipo de página.
2. O Metacomando < Ctrl + N >.
1.6 Abrir un documento

Para abrir un documento en Dreamweaver CS6, realiza lo que se señala a
continuación:
1. Menú Archivo  Abrir.
2. O Metacomando < Ctrl + O >.
Una vez realizado alguno de los procedimientos anteriores aparecerá el cuadro
de diálogo Abrir, donde deberás seleccionar el documento a abrir.
CS6)
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 diálogo Guardar
como, donde se habrá de especificar el nombre del archivo y el tipo de documento a
guardar.

Soto.
CS6
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. Después rellena el
contenido de cada región 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.
CS6)
 Documento de Word. Al importar un documento de Word,

Dreamweaver recibe el HTML convertido y lo inserta en la página
Web.
 Documento de Excel. Importa al área de trabajo una hoja de
cálculo y Dreamweaver la convierte en código HTML.
Para importar cualquier documento a Dreamweaver, realiza:
1. Haz clic en el menú Archivo  Importar  Selecciona la opción del
archivo que desees importar.
Asimismo es posible exportar la página web a otros formatos, que son:
 Datos de plantilla como XML.
 Tabla.
Para exportar la página Web, realiza lo siguiente:
1. Haz clic en el menú Archivo  Exportar  Selecciona la opción del
archivo 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.

Soto.
UNIDAD
Área de trabajo en Dreamweaver CS6.
2
2.1 Inspector de propiedades.
2.2 Barra de herramientas Documento.
2.3 Barra de herramientas Estado.
2.4 Barra de herramientas Navegación con navegador.
2.5 Panel Insertar.

CS6)
ÁREA DE TRABAJO EN DREAMWEAVER CS6.

2.1 Inspector de propiedades.
El Inspector de propiedades permite examinar y editar las propiedades más
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 a la visualización del documento y a su transferencia entre los sitios local y
remoto.
Vista Código
Vista Diseño
Multipantalla
Administración de archivos
Comprobar compatibilidad con navegadores Actualizar documento
Ayudas visuales
Validación W3C Vista previa
Vista En vivo
Vista Dividir
Título de la página web

Soto.
Unidad 2 – Área de trabajo en Dreamweaver 15
CS6
2.3 Barra de herramientas Estado.

La barra de herramientas Estado, se sitúa en la parte inferior de la ventana de
documento, proporciona información adicional sobre el documento que está creando.
Herramienta seleccionar
Herramienta Zoom
Tamaño móvil
Tamaño escritorio
Selector de etiquetas
Herramienta mano Establecer nivel de aumento
Tamaño tableta
Tamaño de ventana Tamaño del documento y tiempo de descargar estimado
Indicador de codificación
2.4 Barra de herramientas Navegación con navegador.

La barra de herramientas Navegación con navegador se activa en la Vista en vivo
y muestra la dirección de la página que está viendo en la ventana de documento.
Vista Código en vivo
Controles de navegador
Opciones de la vista en vivo
Cuadro de dirección
Activar modo de inspección

CS6)
2.5 Panel Insertar.

El panel Insertar contiene botones para crear e insertar objetos al documento.
Los botones se encuentran organizados en categorías, entre las que se puede cambiar
seleccionando la categoría deseada del menú desplegable Categoría.
El panel Insertar está organizado en las categorías siguientes:
 Categoría Común. Permite crear e
insertar los objetos que se utilizan con
más frecuencia, como las imágenes y las
tablas.
 Categoría Diseño. Permite insertar tablas,
elementos de tabla, etiquetas div, marcos
y widgets de Spry. También puede elegir
dos vistas para tablas: Estándar (valor
predeterminado) y Tablas expandidas.
 Categoría Formularios. Contiene botones
que permiten crear formularios e insertar
elementos de formulario, incluidos
widgets de validación de Spry.
 Categoría Datos. Permite insertar objetos
de datos de Spry y otros elementos
dinámicos, como juegos de registros,
regiones repetidas y grabar formularios
de inserción y actualización.
 Categoría Spry. Contiene botones para
crear páginas de Spry, incluidos objetos de datos y widgets de Spry.
 Categoría jQuery Mobile. Contiene botones para crear formularios en
lenguaje jQuery.
 Categoría InContext Editing. Contiene botones para la creación de
páginas de InContext Editing, incluidos botones para Regiones editables,

Soto.
CS6
Regiones repetidas y la administración de clases CSS.
CS6
 Categoría Texto. Permite insertar diversas etiquetas de formato de

texto y listas, como b, em, p, h1 y ul.
 Categoría Favoritos. Permite agrupar y organizar los botones del panel
Insertar que utiliza con más frecuencia en un lugar común.
2.6 Panel Estilos CSS.

El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan
a un elemento de página actualmente seleccionado (modo Actual) o las reglas y
propiedades que afectan a todo un documento (modo Todo). El panel Estilos CSS
también permite modificar propiedades CSS tanto en modo Todo como en modo
Actual.
CS6)
1. World Wide Web Consortium.

a. ¿Qué es?
b. Organización.
c. ¿Para qué se creó?
d. ¿Quiénes lo crearon?
2. Activar o desactivar los paneles de Dreamweaver.

Soto.
UNIDAD
Configurar un sitio en Dreamweaver.
3
3.1 Concepto de Sitio.
3.2 Tipos de Sitios en Dreamweaver.
3.3 Estructura de una Página Web.
3.4 Configurar un sitio nuevo.
3.5 Configuración de un servidor de prueba.
3.6 Cuadro de diálogo Administrar sitios.
3.7 Panel Archivos.

CS6)
CONFIGURAR UN SITIO EN DREAMWEAVER.

3.1 Concepto de Sitio.
Un Sitio es el conjunto de archivos de hipertexto (páginas web) y carpetas
relacionados entre sí, con un diseño similar y
un objetivo en común.
Cada sitio Web tendrá una dirección
única, es decir, nunca se podrán repetir las
URL’s.
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 vínculos y administrar y
compartir archivos.
Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según
el entorno de desarrollo y el tipo de sitio Web que se desarrolle:
• Carpeta raíz 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 también se puede encontrar en un
servidor de red.
• Carpeta remota: Almacena los archivos para pruebas, producción,
colaboración, 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 páginas dinámicas.

Soto.
CS6
3.3 Estructura de una Página Web.
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
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 diálogo Configuración del sitio es donde se
especifica la configuración del sitio de Dreamweaver.
Para abrir el cuadro de diálogo Configuración del sitio, haz clic en el menú Sitio
 Nuevo sitio.
3.5 Configuración de un servidor de prueba.

Un servidor de prueba permite generar y mostrar contenido dinámico mientras
se trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo,
un servidor en funcionamiento o un servidor de producción.
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.
3. En el cuadro de diálogo Configuración del sitio, selecciona la categoría
Servidores y proceda de una de las siguiente formas:

Soto.
CS6
 Haz clic en el botón Añadir nuevo servidor para añadir un nuevo

servidor.
 O selecciona un servidor existente y haz clic en el botón Editar
servidor existente
4. Especifica las opciones Básicas que sean necesarias y luego haz clic en el la
pestaña Avanzadas.
Nota: Debes especificar un URL Web en la pantalla Básicas al especificar un

CS6)
servidor de prueba.

Soto.
CS6
5. Bajo Servidor de prueba, selecciona el modelo de servidor que desea usar

para su aplicación Web.
6. Haz clic en Guardar para cerrar la pantalla Avanzadas. Seguidamente, en la
categoría Servidores, especifica el servidor que acabas de añadir o editar
como servidor de prueba.
3.6 Cuadro de diálogo administrar sitios.

El cuadro de diálogo Administrar sitios se emplea para crear nuevos sitios,
editar, duplicar, eliminar un sitio o importar o exportar la configuración de un sitio.
1. Selecciona Sitio  Administrar sitios y selecciona un sitio de la lista.
2. Haz clic en un botón para seleccionar una de las opciones y haz clic en Listo.
o Nuevo. Permite crear un sitio nuevo.
o Editar. Sirve para modificar un sitio existente.
o Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la
ventana de lista de sitios.
o Quitar. Elimina el sitio seleccionado; no podrá deshacer esta acción.
CS6)
o Exportar. Permite exportar la configuración de un sitio como archivo

XML (*.ste).
o Importar. Permite seleccionar un archivo de configuración 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

tamaño del área de visualización y expandir o contraer el panel Archivos.

Soto.
CS6
1. Concepto de Servidor.
2. Función de los servidores.
3. Tipos de servidores.
4. Importancia de la estructura de un Sitio Web.
4
CS6)
UNIDAD
Formato a la Página Web.
4.1 Propiedades de la página.
4.2 Comentarios.
4.3 Objeto Fecha.
4.4 Reglas horizontales.
4.5 Caracteres especiales.
4.6 Listas.
4.7 Formato al texto.
4.8 Concepto de Estilo CSS.
4.9 Crear estilos CSS.
4.10 Editar estilos CSS.
4.11 Vincular estilos CSS.
4.12 Menús usando hojas de estilos.

Soto.
CS6)
FORMATO A LA PÁGINA WEB.

4.1 Propiedades de la página.
Al momento de crear una Página 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 página se define a través del cuadro de diálogo Propiedades
de la página. Para abrir dicho cuadro de diálogo realiza cualquiera de las siguientes
opciones:
1. Metacomando < Ctrl + J >.
2. Haz clic en el menú Modificar  Propiedades de la página.
3. Haz clic derecho sobre el área del documento y del menú contextual
selecciona la opción Propiedades.
4. En el Inspector de propiedades, haz clic sobre el botón Propiedades de la

página.

Soto.
Unidad 4 – Formato a la Página 29
Web
CS6)
Empleando cualquiera de las opciones anteriores se mostrará el cuadro de

diálogo Propiedades de la página, en donde se habrán de configurar las
propiedades del documento.
4.1.1 Categoría Apariencia (CSS).

La categoría Apariencia (CSS) permite especificar la fuente y el tamaño de la letra;
así como el color del texto, color de fondo, aplicar una imagen de fondo, los márgenes
del área del documento.

Soto.
Web
4.1.2 Categoría Apariencia (HTML).
La categoría Apariencia (HTML), permite especificar varias opciones básicas

para el diseño de página y éstas son:
 Imagen de fondo. Aplica como fondo la imagen seleccionada.
 Fondo. Define un color de fondo para la página.
 Texto. Especifica el color de la fuente del texto.
 Vínculos. Especifica el color al texto del vínculo.
 Vínculos visitados. Especifica el color que va a tomar los vínculos visitados.
 Vínculos activos. Especifica el color que se va mostrar cuando se haga
clic sobre el vínculo.
 Márgenes. Permiten establecer los márgenes del documento, es decir, la
distancia entre donde empieza el contenido de la página y la ventana del
navegador.
Web
4.1.3 Categoría Vínculos (CSS).

La categoría Vínculos (CSS) se emplea para definir la fuente, tamaño y colores
de los vínculos, así como el estilo del vínculo.
4.1.3 Categoría Encabezados (CSS).

La categoría Encabezados (CSS), permite definir la fuente de los encabezados,
el estilo de la fuente (cursiva o negrita), así como el tamaño y color que se va aplicar a
cada tipo de encabezado.
CS6)
4.1.5 Categoría Título / Codificación.

La categoría Título / Codificación permite establecer el tipo de codificación del
documento en cuestión conforme al idioma utilizado al crear las Páginas Web, así
como especificar el formulario de normas Unicode que debe aplicarse a tal tipo de
codificación.
4.1.6 Categoría Imagen de rastreo.

La categoría Imagen de rastreo permite insertar un archivo de imagen para
usarlo como plantilla gráfica al diseñar la Página Web, así como, establecer la opacidad
de la imagen de rastreo.

Soto.
Web
4.2 Comentarios.
Un comentario es un texto descriptivo que se inserta en el código HTML para
explicar el código o facilitar otra información. El texto del comentario aparece sólo en
la vista Código y no se muestra en los navegadores.
Para insertar comentarios al documento, realiza:
1) Sitúate en el menú Insertar  Comentario.
2) O haz clic en el comando Comentario, del panel Insertar, de la categoría
Común.
 En la vista Código, se inserta una etiqueta de comentario (<!- ->) y sitúa el
punto de inserción en medio de dicha etiqueta. Ahí teclea el comentario.
 En la vista Diseño, aparece el cuadro de diálogo 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.
CS6)
Para insertar el objeto fecha en el documento, realiza:

1. Sitúa el puntero de inserción en el lugar donde desees insertar la fecha.
2. Realiza alguno de los siguientes procedimientos:
 Menú Insertar  Fecha.
 Categoría Común, del panel Insertar, haz clic en el ícono Fecha.
3. En el cuadro de diálogo Insertar fecha, selecciona el formato de día 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 automáticamente al guardar. Pero si
se requiere que la fecha se convierta en texto normal cuando se inserte y
no se actualice automáticamente, desactiva dicha opción.
4. Haz clic en Aceptar para insertar la fecha.
4.4 Reglas horizontales.

Las Reglas horizontales son el elemento que se usa para separar secciones
dentro de una misma página.
Para insertar una regla horizontal realiza:
1. Sitúate en el menú Insertar  HTML  Regla horizontal.
2. O de la Categoría Común del panel Insertar, haz clic en el comando Regla

Soto.
Web
Horizontal.
Web
Al seleccionar la regla horizontal insertada, el Inspector de propiedades cambia

para permitirnos modificar las propiedades de dicho objeto.
Ancho de la regla Alineación de la regla
Grosor de la regla Aplicar sombra

Asignar un nombre de ID Asignar clase
4.5 Caracteres especiales.

Cuando se trabaja con páginas 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
diálogo Caracteres especiales, ahí deberás seleccionar el carácter buscado.
CS6)
4.6 Listas.
En Dreamweaver CS6, es posible insertar tres tipos de listas, que son:
 Lista sin ordenar: muestra una especie de viñetas para agrupar los
diferentes elementos de la lista.
 Lista ordenada: muestra un número para indicar el orden de cada uno

de los elementos que integran la lista.
 Lista de definición: se encuentra compuesta por términos o

expresiones y su definición.
Para insertar cualquiera de éstos tres tipos de listas, sitúate en el menú

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

Soto.
Web
4.7 Formato al texto.

El contenido del texto del documento en Dreamweaver posee atributos que
permiten dar formato al texto, como es; cambiar el tipo de fuente, el tamaño de letra,
la alineación, el color de la fuente, el estilo, etc.
Para dar formato rápidamente al texto emplea el Inspector de propiedades, ya
sea usando la categoría HTML o CSS (Para que se pueda aplicar el formato al texto,
deberás previamente haberlo seleccionado).
 Inspector de propiedades Categoría HTML.
6
9 11
5
1 7
3
8
2 12
10
4
CS6)
1. Formato. Permite seleccionar un formato de párrafo ya definido para HTML,

que puede ser un encabezado, párrafo o formato predeterminado
2. ID. Asigna una ID a la selección. 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 ningún estilo a la selección, el menú
emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la
selección, el menú aparece en blanco.
4. Vínculo. Crea un vínculo 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 viñetas del texto seleccionado.
8. Lista ordenada. Crea una lista numerada del texto seleccionado.
9. Disminuir sangría. Anula o quita la etiqueta < blockquote >. En una lista su
anulación elimina la anidación de la lista.
10. Aumentar sangría. Inserta sangría en el texto seleccionado, la aplicación de
sangría crea una lista anidada.
11. Título. Especifica el texto de información sobre una herramienta para un
vínculo de hipertexto.
12. Destino. Permite especificar el marco o la ventana donde se cargará el
documento vinculado.

Soto.
Web
 Inspector de propiedades Categoría CSS.

7
1
12
4 8
10
11
5 9
3 6
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 página. También puedes emplear el menú emergente Regla de destino
para crear nuevas reglas CSS y nuevos estilos en línea o aplicar clases
existentes al texto seleccionado.
2. Editar regla. Abre el cuadro de diálogo Definición de regla CSS para la regla
de destino. Si seleccionas Nueva regla CSS del menú emergente Regla de
destino y haces clic en el botón Editar regla, Dreamweaver abrirá el cuadro
de diálogo Definición 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. Tamaño. Establece el tamaño de la fuente para la regla de destino.
6. Color. Establece el color seleccionado como color de fuente en la regla de
destino.
CS6)
7. Negritas. Añade la propiedad de negrita a la regla de destino.

Soto.
Web
8. Cursiva. Añade la propiedad de cursiva a la regla de destino.

9. Alinear a la izquierda. Alinea el texto hacia la izquierda.
10. Alinear al centro. Alinea el texto al centro.
11. Alinear a la derecha. Alinea el texto hacia la derecha.
12. Justificar. Justifica el texto seleccionado.
4.7.1 Menú Formato.

También puedes emplear el menú Formato, para modificar el aspecto del texto;
dentro de este menú encontrarás los submenús para:
 Aumentar Sangría o Anular sangría.
 Asignarle formato al párrafo.
 Alinear el texto.
 Crear listas.
 Aplicar estilos predefinidos.
 Crear o aplicar estilos CSS.
 Modificar el color de texto.
4.8 Concepto de Estilo CSS.

Los Estilos CSS, también 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 Página 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
vinculación 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 >.
CS6)
4.9 Crear estilos CSS.

Para crear un estilo CSS en Dreamweaver, realiza:
1. Para abrir el cuadro de diálogo 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. Después de haber realizado alguno de los procedimientos anteriores se

mostrará el siguiente cuadro de diálogo, 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 específica.
 Compuesto. Define una regla compuesta que afecte a dos o más
etiquetas, clases o ID simultáneamente.

Soto.
Web
Nombre del selector. Define el nombre del estilo CSS.

Definición de la regla. Permite establecer en donde se va a crear la hoja de
estilos, entre las siguientes dos opciones:
 Sólo 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 botón Aceptar.
4. Se visualizará un cuadro de diálogo parecido al que se muestra abajo, en
donde se habrán de configurar todos las propiedades del Estilo CSS.
CS6)
5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz
clic sobre el botón 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 botón Editar estilo , del
panel Estilos CSS.
4. Realiza los cambios necesarios y haz clic en
Aceptar para conservar los cambios realizados.

Soto.
Web
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 vínculos en una hoja de estilos CSS externa, realiza:
1. Abre el panel Estilos CSS.
2. En el panel Estilos CSS, haz clic en el botón Adjuntar hoja de estilos .
3. En el cuadro de diálogo Vincular hoja de estilos externa, configura las
siguientes opciones:
Arch./URL. Oprime el botón Examinar para localizar la hoja de estilos a
vincular.
Añadir como. Activa Vincular para establecer un vínculo entre el documento
actual y la hoja de estilos externa, o la opción 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 página actual.
4. Por último, pulsa sobre el botón Aceptar.

CS6)
4.12 Menús usando hojas de estilos.

El elemento esencial en una Página Web es el uso de menús, ya que gracias a
ellos permiten que el usuario pueda desplazarse en cada página que compone el sitio
Web.
Hoy en día la mayoría de los menús se realizan con el uso de hojas de estilos y
html. Anteriormente era muy frecuente ver Páginas Web con menús hechos en Flash,
pero la desventaja era el tiempo en que tardaba de cargarse, por lo que terminaron
quedando obsoletos.
Para crear menús 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 Código, escribiendo las etiquetas <div>
… </div>.
2. A continuación, cambia a la vista Diseño y posiciona el puntero dentro del

rectángulo.
3. Activa el botón Lista sin ordenar del Inspector de propiedades.
4. Procede a crear los menús principales, tecleando el nombre del menú
después de cada viñeta. Ejemplo:

Soto.
Web
5. Si se requiere crear submenús en algún menú, posiciónate al final del texto del
menú y pulsa la tecla < ENTER >; una vez que te haya creado la viñeta pulsa
la tecla < TABULADOR > (esto aplicará una sangría a la viñeta 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 deberás dar <
ENTER > al final del texto del submenú. Ejemplo:
CS6)
7. Ahora deberás colocar los hipervínculos a cada menú y submenú, para ello,
en la vista Código, 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"

Soto.
Web
9. Dentro de la etiqueta <ul> tecla los siguiente atributo y valor:

class="nav"
10. Guarda el archivo HTML y crea una página CSS.

11. Teclea los siguientes
estilos. @charset "utf-8";
/* CSS Document */
*{
padding:0px;
margin-top:inherit;
}
#header {
padding-top: 120px;
}
/* Formato del menú completo */

#menu {
margin:0 auto;
width:1000px;
font-family:Calibri;
font-size:12px;
text-align:center;
}
CS6)
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; background-
color:#434343;
.nav > li {
float:left;
width:140px;
}
.nav li ul {
display:none;
position:absolute;
min-width: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;

Soto.
Web
top:0px;
}
CS6)
12. El resultado será el siguiente:
13. Las siguientes propiedades de tipo CSS te ayudarán a definir mejor las
propiedades del menú:
Definición de propiedades de tipo CSS
 Font-family: Establece la familia de fuentes (o serie de familias) del estilo.
 Font-size: Define el tamaño del texto.
 Font-style: Especifica normal, italic u oblique como estilo de la fuente.
 Line-height: Establece el alto de la línea en la que se coloca el texto
 Text-decoration: Añade subrayado, sobreimpresión o tachado al texto o
hace que el texto parpadee.
 Font-weight: Aplica una cantidad específica o relativa de negrita a la
fuente.
 Font-variant: Establece la variante de versales en el texto.
 Text-transform: Convierte en mayúscula la primera letra de cada palabra
de la selección o convierte todo en mayúsculas o minúsculas.
 Color: Establece el color del texto.
Definición 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.
 Background-repeat: Determina si la imagen de fondo se repite y de qué
forma lo hace.

Soto.
Web
 Background-attachment: Determina si la imagen de fondo está fija en su

posición original o se desplaza con el contenido.
 Background-position (X) y Background-position (Y): Especifican la
posición inicial de la imagen de fondo en relación con el elemento.
Definición 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 alineación vertical del elemento al que se
aplica.
 Text-align: Establece cómo se alineará el texto dentro del elemento.
 Text-indent: Especifica la cantidad de sangría que se aplica a la primera
línea 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í, cómo lo hace.
Definición 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 configuración 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 ningún borde).
 Margin: Especifica la cantidad de espacio entre el borde de un elemento
(o el relleno si no hay borde) y otro elemento.
CS6)
 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.
Definición 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 visualización dependerá del navegador.
 Igual para todo: Establece el mismo color de borde para Top, Right,
Bottom y Left.
Definición de las propiedades de lista de estilos CSS

 List-style-type: Establece el aspecto de viñetas o números.
 List-style-image: Permite especificar una imagen personalizada para
viñetas.
 List-style-Position: Determina si el elemento de texto de la lista se ajusta
a una sangría (outside) o si el texto se ajusta al margen izquierdo
(inside).
Definición de las propiedades de posición de estilos CSS

 Position: Determina cómo deberá colocar el navegador el elemento
seleccionado. Ofrece las opciones siguientes:
- Absolute: coloca el contenido utilizando las coordenadas
introducidas en los cuadros Placement en relación con el ascendente
más próximo con posición absoluta o relativa o, si no hay ningún
Soto.
Web
ascendente con
CS6)
posición absoluta o relativa, con la esquina superior izquierda de la

página.
- Relative: coloca el bloque de contenido utilizando las coordenadas
introducidas en los cuadros Placement en relación con la posición del
bloque en el flujo de texto del documento.
- Fixed: coloca el contenido utilizando las coordenadas introducidas
en los cuadros Placement en relación con la esquina superior izquierda
del navegador.
- Static: coloca el contenido en su ubicación en el flujo de texto. Esta
es la posición predeterminada de todos los elementos HTML que
pueden colocarse.
 Visibility: Determina el estado inicial de visualización 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 tamaño de éste.
Estas propiedades controlan la ampliación de la siguiente manera:
- Visible: aumenta el tamaño del contenedor para que todo su
contenido sea visible. El contenedor se expande hacia abajo y hacia
la derecha.

Soto.
Web
- Hidden: mantiene el tamaño del contenedor y recorta cualquier

contenido que no quepa. No hay barras de desplazamiento.
- Scroll: añade barras de desplazamiento al contenedor
independientemente de que el contenido exceda o no el tamaño del
contenedor.
- Auto: presenta las barras de desplazamiento solamente cuando el
contenido del contenedor excede de sus límites.
 Placement: Especifica la ubicación y el tamaño del bloque de contenido.
 Clip: Define la parte del contenido que será visible.
Definición de las propiedades de extensiones de estilos CSS

 Page-break-before: Efectúa un salto de página al imprimir antes o
después 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 inversión.
5
CS6)
UNIDAD
Imágenes.
5.1 Concepto de Imagen.
5.2 Insertar imágenes.
5.3 Insertar marcadores de posición de imagen.
5.4 Propiedades de imágenes.
Imagen de sustitución (Rollover).
Objetos inteligentes.

Soto.
56 Diseño de Páginas Web (Dreamweaver CS6)
IMÁGENES.
5.1 Concepto de
Imagen.
Una imagen es el gráfico vectorial o no vectorial, que muestra una presentación
visual de algo en formato digital.
5.2 Insertar imágenes.

Cuando se insertan imágenes en Dreamweaver, el programa genera una
referencia del archivo de imagen.
Para insertar imágenes en Dreamweaver, realiza:
1. Posiciónate en el lugar donde desees colocar la imagen.
2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro
de diálogo Seleccionar origen de imagen:
A) Metacomando < Ctrl + Alt + I >.
B) Panel Insertar  Categoría Común  Imagen.
C) Menú Insertar  Imagen.
3. En el cuadro de diálogo abierto, selecciona la imagen que desees insertar en
el documento.

Soto.
Unidad 5 – Imágenes 57
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 botón 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 diálogo Preferencias, aparecerá el cuadro de
diálogo Atributos de accesibilidad de la etiqueta de imagen, donde podrás
configurar:
- Texto alternativo. Se emplea para anotar un texto en caso de que
no se muestre la imagen en el navegador.
- Descripción larga. Anota la ubicación 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 posición de imagen.

Los marcadores de posición de imagen son gráficos que se utilizan hasta que el
gráfico definitivo esté listo para su incorporación al sitio Web.
Para insertar marcadores de posición de imagen, realiza:
1. Sitúate en el lugar del documento donde desees colocar el marcador de
posición de imagen.
2. Después realiza cualquiera de las siguientes opciones, para abrir el cuadro
de diálogo Marcador de posición de imagen.
A) Menú Insertar  Objetos de imagen  Marcador de posición de imagen.
B) Categoría Común del panel Insertar, haz clic sobre el menú Imágenes y
selecciona el ícono Marcador de posición de imagen.
3. En el cuadro de diálogo abierto, selecciona el tamaño y color del marcador,
y asígnale una etiqueta de texto.
4. Para finalizar, haz clic en Aceptar.
Sustitución de un Marcador de posición de imagen.

Para poder actualizar el origen de la imagen, realiza:
1. Da doble clic sobre el marcador de posición de imagen o del Inspector de
propiedades, haz clic en el ícono de Carpeta situado junto al campo de
Origen.

Soto.
2. Se abrirá el cuadro de diálogo Seleccionar origen de imagen, ahí

selecciona la imagen que desees remplazar en el marcador de posición
de imagen.
3. Por último, presiona el botón Aceptar.

Nota: Cuando se visualice en el navegador, el texto de etiqueta y tamaño no
mostrarán.
5.4 Propiedades de imágenes.

Para modificar las propiedades de las imágenes, utiliza el Inspector de
propiedades; una vez que tengas la imagen seleccionada.
8
5 12
4
13
10
7
11
3
2 9
6
1. ID. Asigna un nombre como identificador para usarlo después 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 ubicación de la imagen.
5. Vínculo. Especifica un hipervínculo a la imagen.
6. Destino. Especifica el marco o la ventana donde se cargará la página 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 presentación.
10. An. Especifica el ancho de la imagen.

Soto.
11. Alt. Especifica el alto de la imagen.

12. Alternar restricción de tamaño. Activa esta opción en caso de querer restringir
proporcionalmente el tamaño de la imagen.
13. Clase. Asigna un estilo CSS creado con anterioridad.
5.5 Imagen de sustitución (Rollover).

Una imagen de sustitución es aquella que, al visualizarse en un navegador,
cambia cuando el puntero se posiciona sobre ella.
Para crear una imagen de sustitución se requieren dos imágenes: la imagen
principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la
que se muestra al posicionar el puntero sobre la imagen principal). Ambas imágenes
deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia el
tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.
Las imágenes de sustitución están automáticamente configuradas para que
respondan al evento onMouseOver.
Para crear una imagen de sustitución, realiza:
1. Posiciona el puntero en el lugar donde deseas que aparezca la imagen de
sustitución.
2. Después realiza cualquiera de las siguientes opciones, para abrir el cuadro
de diálogo Insertar imagen de sustitución.
A. Categoría Común del panel Insertar, haz clic en el menú Imágenes y
selecciona el icono Imagen de sustitución.
B. Menú Insertar  Objetos de imagen  Imagen de sustitución.
3. Configura las opciones y haz clic en Aceptar.
 Nombre de la imagen. Especifica el nombre de la imagen de sustitución.

 Imagen original. La imagen que se mostrará al cargarse la página.
 Imagen de sustitución. La imagen que se visualizará cuando el puntero
pase por encima de la imagen original.
 Precargar imagen de sustitución. Realiza una carga previa de imágenes
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 sólo texto.
 Al hacerse clic, ir a URL. El archivo que desea que se abra cuando un
usuario haga clic en la imagen de sustitución.
5.6 Objetos inteligentes.

Un objeto inteligente es una imagen para Web que mantiene una conexión en
vivo con la imagen original de Photoshop. Al actualizar la imagen original en
Photoshop, Dreamweaver ofrece la posibilidad de actualizar la imagen en Dreamweaver
simplemente haciendo clic en un botón.

Soto.
Para inserta un objeto inteligente, realiza:

1. Sitúa el puntero en el lugar de la página donde desees insertar el objeto
inteligente (la imagen).
2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro
de diálogo Seleccionar origen de imagen:
A) Metacomando < Ctrl + Alt + I >.
B) Panel Insertar  Categoría Común  Imagen.
C) Menú Insertar  Imagen.
D) También puedes arrastrar el archivo PSD a la página 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 diálogo
Seleccionar origen de imagen.
4. En el cuadro de diálogo Optimización de imágenes que aparece, ajusta la

configuración de optimización como sea necesario y haz clic en Aceptar.
5. Guarda el archivo de imagen para la Web en una ubicación dentro de la

carpeta raíz de su sitio Web.

Soto.
1. Extensiones de imágenes que permite Dreamweaver insertar al documento.

2. Insertar Imágenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
Hipervínculos.
6
6.1 Concepto de Hipervínculo.
6.2 Tipos de rutas de los vínculos.
6.3 Crear hipervínculos.
6.4 Destino de los hipervínculos.
6.5 Anclaje con nombre.
6.6 Vínculo a correo electrónico.
6.7 Menú de salto.
6.8 Zonas interactivas.

Unidad 6 – Hipervínculos 67
HIPERVÍNCULOS.
6.1 Concepto de Hipervínculo.
Los hipervínculos son links (vínculos) que al ser pulsados nos redirigen hacia
otra página o archivo; permitiendo conectar los diferentes elementos de una Página
Web.
En Dreamweaver es posible establecer hipervínculos a cualquier elemento del
documento como puede ser: texto, imágenes, multimedia, etc.
6.2 Tipos de rutas de los vínculos.

Cuando se crean vínculos, resulta fundamental conocer la ruta de archivo entre
el documento desde el que establece el vínculo y el documento con el que lo
establece.
Cada Página Web tiene una dirección exclusiva, denominada URL (Localizador
Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un
vínculo local (un vínculo 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 para vínculos locales, resultan particularmente útiles cuando el
documento actual y el documento con el que se establece el vínculo se encuentran en
la misma carpeta, por ejemplo, dreamweaver/contents.html.
6.2.3 Rutas relativas a la raíz del sitio.

Indican la ruta desde la carpeta raíz del sitio hasta un documento. Se usan
cuando se trabaja con un sitio Web grande que usa varios servidores o un servidor que
CS6)
alberga varios sitios, por ejemplo, /support/dreamweaver/contents.html.

Soto.
6.3 Crear hipervínculos.

Para crear hipervínculos en Dreamweaver CS6, realiza lo siguiente:
1. Selecciona el texto o imagen y del Inspector de propiedades da clic en el cuadro
de texto Vínculo .
2. Escribe la ruta y el nombre del archivo del documento o URL en el cuadro
de texto Vínculo 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 ubicación para abrir la página.
Otra forma de crear hipervínculos es desde el menú Insertar  Hipervínculo.

Se mostrará el cuadro de diálogo Hipervínculo, donde deberás especificar las
siguientes propiedades:
 Texto. Especifica el texto que se empleará como vínculo.
 Vínculo. Asigna la ruta del hipervínculo.
 Destino. Especifica la ubicación para abrir el archivo.
 Título. Escribe un título de página para el hipervínculo.
 Clave de acceso. Permite introducir una tecla para activar el hipervínculo
en el navegador con dicha tecla.
 Índice de fichas. Introduce un número para el orden de fichas.
CS6)
6.4 Destino de los hipervínculos.

El destino del hipervínculo determina en qué ventana va a ser abierto el
vínculo. Esto puede especificarse desde el Inspector de propiedades, categoría HTML a
través de la opción Destino, o en el cuadro de diálogo Hipervínculo del menú Insertar
 Hipervínculo.
_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 vínculo. Si el marco que contiene el vínculo 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 vínculo. 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.

Soto.
6.5 Anclaje con nombre.

Los anclajes con nombre permiten establecer marcadores en un documento,
que por lo regular se colocan en un tema específico 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. Después realiza alguno de los siguientes procedimientos:
A) Menú Insertar  Anclaje con nombre.
B) Metacomando < Control + Alt + A >.
C) Del panel Insertar, Categoría Común, haz clic en el botón 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 inserción.
Para usar el anclaje con nombre en un hipervínculo, realiza:

1. Selecciona el texto o imagen que servirá como anclaje.
4. Después realiza alguno de los siguientes procedimientos:
A) Menú Insertar  Hipervínculo.
B) Del panel Insertar, Categoría Común, haz clic en el botón Hipervínculo.
C) Del Inspector de propiedades, posiciónate en el cuadro de texto Vínculo.
CS6)
2. En cualquiera de las tres opciones anteriores, desplegar el menú contextual

de Vínculo y elige el marcador de
texto a emplear en el hipervínculo.
Nota: Todo los anclajes con nombre

aparecerán con el signo ǲ#ǳ al principio del nombre de anclaje asignado.
6.6 Vínculo a correo electrónico.

Cuando el usuario hace clic en un vínculo de correo electrónico 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 electrónico, el cuadro
ǲParaǳ se actualiza automáticamente con la dirección especificada en el vínculo del
mensaje de correo electrónico.
Para crear un vínculo de correo electrónico, realiza:
1. Sitúate en el menú Insertar  Vínculo de correo electrónico.
O del panel Insertar de la categoría Común, haz clic en el botón Vínculo de
correo electrónico.
2. Se mostrará el cuadro de diálogo Vínculo de correo electrónico, en donde
se habrá de especificar las siguientes propiedades:
Texto. Define el texto que se mostrará como vínculo de correo electrónico.
Correo electrónico. Define el correo electrónico al cual se va a mandar la
información.

Soto.
3. Por último, haz clic en Aceptar.

Otra forma de crear un hipervínculo a un correo electrónico, es desde el
Inspector de propiedades, en la opción Vínculo deberás teclearla palabra MAILTO,
seguida de dos puntos y el correo electrónico (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 y que ofrece vínculos con documentos o archivos. Puedes crear
vínculos con documentos del sitio Web, documentos de otros sitios, correo
electrónico, gráficos o cualquier tipo de archivo que se pueda abrir en un navegador.
Cada opción de un menú de salto está asociada a un URL. Cuando los usuarios
eligen una opción, se les remite al URL asociado. Los menús de salto se insertan
dentro del objeto de formulario Menú de salto.
Un menú de salto puede contener tres componentes:
• Opcional: un mensaje de selección de menú, como la descripción de una
categoría para los elementos del menú o instrucciones, como ǲElija una
opciónǳ.
• Obligatorio: una lista de elementos de menú vinculados: el usuario elige una
opción y se abre un documento o un archivo vinculado.
• Opcional: un botón Ir.
Para insertar un menú de salto, realiza:
1. Sitúa el punto de inserción en la ventana de documento.
2. Luego realiza alguno de los siguientes procedimientos:
A) Menú Insertar  Formulario  Menú de salto.

B) En la categoría Formulario del panel Insertar, haz clic en el botón
Menú de salto.
3. Se mostrará el cuadro de diálogo Insertar menú de salto, en donde
deberás especificar las siguientes opciones:
• Botón más (+). Inserta un nuevo elemento.
• Botón 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 botón Ir tras el menú. Selecciona esta opción para insertar
un botón Ir en lugar de un mensaje de selección de menú.
• Seleccionar primer elemento tras el cambio de URL. Selecciona esta
opción si has insertado un mensaje de selección de menú ȋǲElija una
opciónǳ) como primer elemento del menú.
CS6)
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 acción.
Al insertar un mapa de imagen del lado del usuario, se crea una zona interactiva
y, a continuación, se define un vínculo 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.

Soto.
3. Selecciona la herramienta circular, rectangular o poligonal, según sea el

caso y arrastrando el puntero sobre la imagen crea la zona interactiva.
4. Una vez seleccionada la zona interactiva, en el cuadro Vínculo, escribe el
hipervínculo 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 vínculo.
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.
1. Extensiones de imágenes que permite Dreamweaver insertar al documento.
2. Insertar Imágenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
Diseño de la Página Web.
7
7.1 Concepto de Tabla.
7.2 Creación 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.
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 Hipervínculos en marcos.

Unidad 7 – Diseño de la Página 77
Web
DISEÑO DE LA PÁGINA WEB.

7.1 Concepto de Tabla.
Una tabla es la herramienta eficaz para presentar una serie de datos de forma
clara y organizada en una Página Web. También son usadas para el diseño del
documento.
Las tablas están compuestas por filas y columnas, y la intersección entre una
fila y una columna es conocida con el nombre de celda.
7.2 Creación de tablas.

Para insertar tablas en el documento, realiza cualquiera de las siguientes
opciones:
1. Menú Insertar  Tabla.
2. Metacomando < Ctrl + Alt + T >.
3. Panel Insertar  Categoría Común  Tabla.
Realizada alguna de las opciones anteriores, se mostrará el cuadro de diálogo
Tabla en donde se habrá de especificar:
 Filas. Determina el número de filas de la tabla.
 Columnas. Especifica el número 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 número de pixeles entre el borde y el
contenido de una celda.
 Espacio entre celdas. Especifica el número de pixeles entre celda
contiguas de una tabla.
 Sección Encabezado. Brinda las siguientes opciones de encabezado:
o Ninguno. No permite encabezados de columna o de fila para la
tabla.
CS6)
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 título de tabla que se ubica fuera de la misma.
 Resumen. Descripción de la tabla.

Soto.
Web
7.3 Formato de tablas y celdas.

El formato de las tablas y de las celdas se especifica a través 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
3 7
8
5
1. Id de tabla. Especifica un ID para la tabla.

2. Filas y Cols. Número de filas y columnas que tendrá la tabla.
3. An. El ancho de la tabla en píxeles o porcentaje.
4. Rell. Celda. Determina el número de píxeles entre el contenido de una celda
y los límites de la misma.
5. Esp. Celda. Número de píxeles entre celdas de tabla contiguas.
6. Alinear. Determina dónde aparecerá la tabla en relación con otros
elementos del mismo párrafo, como por ejemplo texto o imágenes.
7. Borde. Especifica el ancho en píxeles de los bordes de la tabla.
8. Clase. Establece una clase CSS en la tabla.
CS6)
Para aplicar formato a las celdas, selecciona una celda, renglón o columna y
modifica las propiedades que desees.
1 6
2
7
4 5
8
3
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 más celdas.
3. Horiz. Especifica la alineación horizontal del contenido de una celda, fila o
columna.
4. Vert. Especifica la alineación 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 píxeles o como porcentaje del ancho o alto total de la tabla.
6. No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda
en una sola línea. Cuando la opción No aj. está activada, las celdas se
adaptarán para incluir todos los datos a medida que se introducen o pegan
en una celda.

Soto.
Web
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.
7.4 Insertar filas y columnas.

Para añadir filas y columnas a la tabla, realiza:
1. Posiciónate 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 opción Insertar filas o columnas, se mostrará el cuadro de
diálogo Insertar filas o columnas; donde se habrá de especificar el número
de filas o columnas y el lugar donde se insertarán.
4. Una vez configurada la ventana, pulsa sobre el botón Aceptar.

CS6)
7.5 Eliminar filas y columnas.

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, según sea
el caso.
También puedes seleccionar una fila o columna completa y luego dar clic en el
menú Edición  Borrar o presionar la tecla < Supr >.
7.6 Combinar o dividir celdas.

Dreamweaver, incluye herramientas que permiten aumentar o disminuir el
número 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 opción es desde el botón 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 botón Dividir celdas el Inspector de propiedades
ampliado. En el cuadro de diálogo Dividir celda, especifica cómo deseas
dividirla.

Soto.
Web
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 haría en cualquier otra
tabla.
Para anidar una tabla en una celda lleva se llevan a cabo los mismos pasos como
si estuviéramos insertando una tabla.
7.8 Ordenar tablas.

El orden de las filas de una tabla poder ser en función del contenido de una
sola columna o en función 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 opción Ordenar tabla.
3. Se mostrará el cuadro de diálogo Ordenar tabla, ahí establecerás las
siguientes opciones:
CS6)
 Ordenar por. Establece los valores de la columna que se utilizarán para
ordenar las filas de la tabla.

Soto.
Web
 Orden. Determina si la columna debe ordenarse alfabética o

numéricamente, y si el orden será ascendente o descendente.
 Después por / Orden. Configura el orden de una clasificación 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 clasificación.
o Ordenar filas de encabezado. Especifica que se ordenen todas las
filas de la sección 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
sección 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
operación de orden. Especifica que los atributos de fila de la tabla
deben permanecer asociados al mismo contenido después de la
ordenación.
7.9 Concepto de marcos.

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 diseñando uno propio.
CS6)
Los marcos predefinidos se visualizan al momento de crear un nuevo

documento HTML, para ello, sitúate en el menú Archivo, opción Nuevo. En el cuadro
de diálogo Nuevo documento selecciona la categoría Página en blanco  (Tipo de
página) HTML y selecciona alguno de los diseños predefinidos por Dreamweaver CS6.
Otra opción para crear marcos es a

través del menú Insertar  HTML  Marcos.
En dicha opción se podrá elegir el tipo de
marco que se desee insertar.

Soto.
Web
7.11 Seleccionar marcos.

Dreamweaver, ofrece un panel para seleccionar de la forma correcta y rápida los
marcos de nuestro documento. El panel Marcos proporciona una representación
gráfica 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. Dirígete al menú Archivo y selecciona la opción Guardar todo.
2. Se mostrará el cuadro de diálogo 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 diálogo se podrá apreciar que se
encuentra seleccionado toda el área de trabajo en un cuadro de líneas
inclinadas de color gris y negro.
CS6)
La selección anterior indica que guardará la página principal (la llamada página
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 página principal, el mismo cuadro de
diálogo aún no se cerrará ya que tendrá seleccionado otro marco para
después guardarlo. Cuando se haya terminado de guardar todos los marcos,
la ventana Guardar como, se cerrará automáticamente.

Soto.
Web
7.13 Propiedades de los marcos.

Para poder ver o establecer las propiedades de un marco, primero selecciónalo
desde el panel Marcos.
2 4
7
3 5
6
1. Nombre de marco. Nombre utilizado por el atributo target de un vínculo 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 aparecerán 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 márgenes izquierdo y derecho
en píxeles.
7. Alto de márgenes. Establece el alto de los márgenes superior e inferior en
píxeles.
Web
7.14 Hipervínculos en marcos.

Para incluir un vínculo en un marco que abra un documento en otro marco, se
debe establecer el destino del vínculo. El atributo target de un vínculo especifica el marco
o ventana en la que se abrirá el contenido vinculado.
Se debe tomar en consideración que cuando se desea crear un hipervínculo
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 hipervínculos.
CS6)
1. Prioridad de formato de tabla en HTML.

2. Eliminar marcos.
3. Comportamientos JavaScript en marcos.

Soto.
UNIDAD
Formularios.
8
8.1 Concepto de Formulario.
8.2 Crear formularios.
8.4 Validación de formularios aplicando JavaScript.
8.5 Validación de formularios usando HTML5.

CS6)
FORMULARIOS.
8.1 Concepto de Formulario.
Los formularios son los elementos que se utilizan para la recolección de datos
del usuario y se emplean muy cotidianamente para el registro de usuarios,
comentarios, inicio de sesiones, etc.
8.2 Crear formularios.

Para crear formularios en Dreamweaver, realiza:
1. Haz clic en el menú Insertar  Formulario  Formulario.
O del panel Insertar  Categoría Formularios  Formulario.
2. Se mostrará el siguiente recuadro en donde se habrán de ir insertando los
diferentes elementos que queramos usar en el formulario.
3. A continuación configura las propiedades del formulario mediante el
Inspector de propiedades.
5
2
3 6
4
1

Soto.
Unidad 8 – Formularios 93
1. ID de formulario. Nombre del formulario.

2. Acción. Especifica la página o el script que procesará los datos del
formulario.
3. Método. Indica el método 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. Añade el valor al URL que solicita la página.
- POST. Incrusta los datos del formulario en la petición HTTP.
4. Tipo de codificación. Especifica el tipo de codificación 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. Después 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 añadir a un formulario los
siguientes objetos de formulario:
CS6)
8.3.1 Elemento Campo de texto.

Aceptan cualquier valor alfanumérico. El texto se puede visualizar como una
sola línea, como varias líneas y como un campo de contraseña.
7
1 5
4
6
3
1. Ancho car. Establece el número máximo de caracteres que se puede

mostrar en el campo.
2. Car. máx. Establece el número máximo de caracteres que se puede
introducir en los campos de texto de una línea.
3. Desactivado. Desactiva el área de texto.
4. Sólo lectura. Convierte el área de texto en un área de texto de sólo lectura.
5. Tipo. Especifica si el campo es de una línea, de varias líneas o de contraseña.
- Una línea. Campo para una sola línea de texto.
- Multilínea. Campo para varias líneas de texto.
- Contraseña. Campo para sólo contraseña.

Soto.
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, sólo que su valor predeterminado es la
visualización del texto en varias líneas.
8.3.3 Elemento Botón.

Realizan acciones cuando se hace clic en ellos. Los botones para enviar datos
de formulario al servidor o para restablecer el formulario.
1
3
2 4
1. Nombre del botón. Asigna un nombre al botón.

2. Valor. Determina el texto que aparece dentro el botón.
3. Acción. Determina qué ocurre cuando se hace clic en el botón.
CS6)
- Enviar formulario. Envía los datos del formulario para procesarlos

cuando el usuario hace clic en el botón.
- Restablecer formulario. Borra el contenido del formulario cuando se
hace clic en el botón.
- Ninguno -Especifica la acción que debe realizarse cuando se hace clic
en el botón. Por ejemplo, puede añadir un comportamiento
JavaScript que abra otra página cuando el usuario haga clic en el
botón.
4. Clase. Aplica reglas CSS al objeto.
8.3.4 Elemento Casilla de verificación.

Admiten múltiples respuestas en un solo grupo de opciones. Un usuario puede
seleccionar tantas acciones como sean necesarias.
1. Valor activado. Establece el valor que debe enviarse al servidor cuando se

activa la casilla de verificación.
2. Estado inicial. Determina si la casilla de verificación está seleccionada o no
cuando el formulario se carga en el navegador.

Soto.
3. Clase. Aplica reglas de Hojas de estilo en cascada (CSS) al objeto.

CS6)
8.3.5 Elemento Botón de opción.

Representan opciones que se excluyen mutuamente. Cuando se selecciona un
botón de un grupo de botones de opción, se desactivan todos los demás botones del
grupo (un grupo está formado por dos o más 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
opción Lista muestra los valores de las opciones en un menú que permite a los
usuarios seleccionar una sola opción.
1 3
5
6
2
7

Soto.
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 (opción Menú) o si
muestra una lista de elementos por la que se puede desplazar (opción
Lista).
3. Selecciones (Sólo en el tipo Lista). Indica si el usuario puede seleccionar
varios elementos de la lista.
4. Alto (Sólo en el tipo Lista). Establece el número de elementos que se
muestran en el menú.
5. Valores de lista. Abre un cuadro de diálogo que permite añadir elementos a
un menú de formulario:
A. Utiliza los botones más (+) y menos (-) para añadir 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.
CS6)
1. Campo de archivo. Especifica el nombre del objeto de campo de archivo.

2. Ancho car. Establece el número máximo de caracteres que se puede
mostrar en el campo.
3. Car. máx. Especifica el número máximo 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. máx. Sin embargo, si el
usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo
sólo admitirá el número de caracteres especificado en el valor Car. máx.
8.3.8 Elemento Campo de imagen.

Permiten insertar una imagen en un formulario.
8.3.9 Elemento Campo oculto.

Permiten almacenar información introducida por el usuario, como un nombre,
una dirección de correo electrónico o una preferencia de visualización, y utilizarla la
próxima vez que el usuario visite el sitio.

Soto.
1. Campo oculto. Especifica el nombre del campo.

2. Valor. Asigna un valor al campo. Este valor se transfiere al servidor cuando
se envía el formulario.
8.4 Validación de formularios aplicando JavaScript.

Dreamweaver puede añadir código 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 botón y selecciona del menú
contextual la opción Validar formulario.
Se mostrará el cuadro de diálogo Validar formulario, en donde se habrán de
especificar los siguientes valores:
CS6)
- Obligatorio. Determina que el campo no se debe quedar sin contestar.

- Cualquier cosa. Define que el campo es obligatorio, pero no tiene que
contener algún tipo de dato determinado.
- Dirección de correo electrónico. Comprueba que el campo contenga el
símbolo de arroba (@).
- Número. Verifica que el campo contenga sólo caracteres numéricos.
- Número del. Comprueba que el campo contenga caracteres numéricos
dentro de un rango específico.
4. Cuando termines de configurar las opciones, haz clic en Aceptar.
8.5 Validación de formularios usando HTML5.

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

Soto.
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:
1. Objetos de formularios dinámicos.
2. Formularios Spry.
3. Comportamientos JavaScript de Dreamweaver CS6.
9
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.

Soto.
CS6)
CAPAS.
9.1 Concepto de Capa.
Las capas son recuadros que pueden colocarse en cualquier parte de la Página
Web y tener cualquier clase de contenido HTML. Las capas pueden ocultarse y
solaparse entre sí, lo que proporciona una gran ventaja para el diseño.
9.2 Insertar capas.

Dreamweaver ofrece tres formas para insertar capas, cada una de ellas con una
función en específico.
Para insertar cualquier de las tres capas, realiza alguna de las siguientes opciones:
1. Sitúate en el menú Insertar  Objetos de diseño  Selecciona la capa a
insertar.
2. Otra forma es desde el panel Insertar, en la categoría Diseño, selecciona la
opción a emplear.
9.2.1 Etiqueta Div.

La Etiqueta Div coloca una capa fija en el documento, esto es, la capa se
encontrará estática.
9.2.2 Etiqueta DIV de diseño de cuadricula fluida.

Incrusta una capa que se adapta a la resolución de la pantalla, es decir, al
modificar el tamaño del navegador, el contenido de esta etiqueta se adapta.
9.2.3 Div PA.

Inserta una capa de posición absoluta, es decir, es posible moverla en cualquier
parte del documento.

Soto.
Unidad 9 – Capas 105
9.3 Propiedades de las capas.

Las propiedades de la capa se especifican desde el Inspector de propiedades,
pero sólo es posible especificar las propiedades de la Capa Div PA, ya que los otros
dos tipos de capas deberán especificarse desde una Hoja de Estilos CSS.
3
8
1 4
7 10
9
5
2
1. Elemento CSS-P. Indica el nombre de la capa, que puede ser cambiado a través
del panel Elementos PA o desde el cuadro de texto nombre de la capa.
2. Desb. Controla cómo aparecen los elementos PA en un navegador cuando el
contenido desborda el tamaño especificado del elemento PA, y puede tomar
los valores:
 VISIBLE. Muestra todo el contenido de la capa, haciendo más grande la
capa.
 HIDDEN. Sólo 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.
CS6)
3. Izq y Sup. Especifican la posición de la esquina superior izquierda del elemento

PA con respecto a la esquina superior izquierda de la página 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 rectángulo 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 sólo sea visible el rectángulo 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 opción predeterminada que tenga el navegador, la
mayoría de los navegadores utilizan INHERIT (Heredada) de forma
predeterminada.
 INHERIT. Muestra la capa mientras la capa a la que pertenece también
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 opción
en blanco para especificar un fondo transparente).
10. Clase. Especifica la clase CSS utilizada para aplicar estilo al elemento PA.

Soto.
Unidad 9 – Capas 107
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 diseño
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 página que desea visualizar como bloques
de diseño CSS.
Por ejemplo, si quieres visualizar un color de fondo para los párrafos 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.
1. Propiedades CSS para el manejo capas.
2. Configurar las capas Div PA desde el cuadro de diálogo Preferencias.
3. Mostrar u ocultar capas.
UNIDAD 10
Elementos multimedia.
10.1 Insertar Audio.
10.2 Insertar Video.
10.3 Archivo SWF.
10.4 Componente FLV.
10.5 Películas Shockwave.
10.6 Control ActiveX.
10.7 Elemento Applet.

Unidad 10 – Elementos multimedia 109
ELEMENTOS MULTIMEDIA.
10.1 Insertar Audio.
Incorporar sonido a la Página Web no es muy recomendable, ya que en algunas
ocasiones el usuario que visita el sitio suele estar escuchando su propia música 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 método para añadir sonido son: su finalidad, el tipo de
usuarios a los que está destinado, el tamaño 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 Página Web y sus etiquetas son la de <AUDIO> … </AUDIO>;
cuando se desea generar el código HTML manualmente se deberá emplear dicha
etiqueta y sus respectivos atributos a emplear.

Al incrustar audio se incorpora el sonido directamente en la página, pero el sonido
sólo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el
archivo de sonido elegido.
Siempre que uses sonido en tu Página Web, proporciona un control para
desactivar o activar la reproducción de sonido, por si los visitantes no desean escuchar
el contenido de audio.
Para insertar audio en el documento, realiza:
1. Sitúate en el lugar donde deseas colocar el archivo y luego realiza alguno
de los siguientes procedimientos:
CS6)
A) En la categoría Común del panel Insertar, haz clic en el botón 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
tamaño del marcador de posición del plug-in en la ventana de documento.
Estos valores determinan con qué tamaño se muestran los controles de
audio en el navegador.
10.2 Insertar Video.

Algunas ocasiones es necesario colocar video(s) en Páginas Web, ya sea para
ilustrar algo o simplemente una atracción para el internauta.
Los formatos de vídeo 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 más
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 función de insertar al
documento un video, lo que llega a cambiar en ambas etiquetas son sus propiedades.

Para insertar un archivo de vídeo en Dreamweaver, realiza:
1. Sitúate en el lugar donde deseas colocar el archivo y luego realiza alguno
de los siguientes procedimientos:
A) En la categoría Común del panel Insertar, haz clic en el botón Media y
selecciona el icono Plug-in del menú desplegable.
B) Menú Insertar  Media  Plug-in.
2. Localiza el archivo de video y haz clic en Aceptar.
CS6)
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 visualización 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. Sitúate en el lugar donde quieras insertar el archivo SWF y luego lleva a
cabo alguno de estos procedimientos:
A) En la categoría Común del panel Insertar, selecciona Media y haz
clic en el icono SWF.
B) Menú Insertar  Media 
SWF.
2. En el cuadro de diálogo 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 creación de Flash, dicho videos deberán contener la extensión .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 reproducción.
Para insertar un componente FLV, realiza:
1. Menú Insertar  Media  FLV o panel Insertar  Categoría Común  Media
 FLV.
2. En el cuadro de diálogo Insertar FLV, selecciona Descarga progresiva de vídeo
o Flujo de vídeo en el menú emergente Tipo de vídeo.
3. Completa el resto de las opciones del cuadro de diálogo y haz clic en Aceptar.
CS6)
10.5 Películas Shockwave.

Las películas Shockwave son un formato comprimido de multimedia interactivo
en la Web que permite la descarga rápida de los archivos multimedia y su
reproducción en los navegadores de uso más frecuente.
Para insertar una película Shockwave, realiza:
1. Menú Insertar  Media  Shockwave o panel Insertar  Categoría Común 
Media  Shockwave.
2. En el cuadro de diálogo que se muestra, selecciona un archivo de película.
3. En el Inspector de propiedades, introduce el ancho y el alto de la película 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 parámetros para un control ActiveX en el navegador del visitante.
Para insertar un control ActiveX, realiza:
1. Menú Insertar  Media  ActiveX o panel Insertar  Categoría Común 
Media  ActiveX.
10.7 Elemento Applet.

Java es un lenguaje de programación que permite el desarrollo de aplicaciones
pequeñas (applets) que pueden incrustarse en páginas Web.
Para incrustar elementos Applet, realiza:
1. Menú Insertar  Media  Applet o panel Insertar  Categoría Común  Media
 Applet.

Operación de Paquetes III

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Operación de Paquetes III

Cargado por

Copyright:

Formatos disponibles

OPERACIÓN DE

1.1. ¿Qué es Dreamweaver? 2

1.2. Acceso a Dreamweaver. 2

1.3. Ambiente de Dreamweaver. 3

1.4. Vistas del documento. 4

1.4.1. Vista Código.

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

2.1. Inspector de propiedades. 14

2.2. Barra de herramientas Documento. 14

2.3. Barra de herramientas Estado. 15

2.4. Barra de herramientas Navegación con navegador. 15

2.5. Panel Insertar. 16

2.6. Panel Estilos CSS. 17

3 Configurar un sitio en Dreamweaver. 19

3.1. Concepto de Sitio. 20

3.2. Tipos de Sitios en Dreamweaver. 20

© 2013. Derechos Reservados Daniel Olalde

3.3. Estructura de una Página Web. 21

4 Formato a la Página Web. 27

4.1 Propiedades de la página. 28

4.1.1 Categoría Apariencia (CSS).

4.3 Objeto Fecha. 33

4.4 Reglas horizontales. 34

4.5 Caracteres especiales. 35

4.7 Formato al texto. 37

4.7.1 Menú Formato.

4.9 Crear estilos CSS. 41

4.9.1 Propiedades CSS.

4.11 Vincular estilos CSS. 44

4.12 Menús usando hojas de estilos. 45

© 2013. Derechos Reservados Daniel Olalde

5.1. Concepto de Imagen. 56

5.2. Insertar imágenes. 56

5.3. Marcadores de posición de imagen. 58

5.4. Propiedades de imágenes. 59

5.5. Imagen de sustitución (Rollover). 61

5.6. Objetos Inteligentes. 62

6.1. Concepto de Hipervínculo. 67

6.2. Tipos de rutas de los vínculos. 67

6.2.1. Rutas absolutas.

6.4. Destino de los hipervínculos. 69

6.5. Anclaje con nombre. 70

6.6. Vínculo a correo electrónico. 71

6.7. Menú de salto. 72

6.8. Zonas interactivas. 74

7 Diseño de la Página Web. 76

7.1 Concepto de Tabla. 77

7.2 Creación 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. 83

7.9 Concepto de marcos. 84

8.1 Concepto de Formulario. 92

8.2 Crear formularios. 92

8.3 Objetos de los formularios.

8.5 Validación de formularios usando HTML5. 101

9.1 Concepto de Capa. 104