3. Contenido iii
Sobre este libro…
Usted es libre de:
Copiar, distribuir y comunicar públicamente la presente obra.
Realizar obras derivadas.
Bajo las condiciones siguientes:
Reconocimiento. Debe reconocer los créditos de la obra de la manera
especificada por el autor o licenciador.
No comercializar. No puede utilizar esta obra para fines lucrativos.
Si deseas aportar sugerencias, comentarios, críticas o informar sobre errores,
puedes enviar un mensaje a la siguiente dirección electrónica
daniel.olalde@gmail.com.
5. Contenido v
CONTENIDO
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
7. Contenido vii
5 Imágenes. 55
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
9. 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.2.2 Comando Plug-in.
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
10.
11. UNIDAD 1
INTRODUCCIÓN A DREAMWEAVER CS6.
1.1 ¿Qué es Dreamweaver?
1.2 Acceso a Dreamweaver.
1.3 Ambiente de Dreamweaver.
1.4 Vistas del documento.
1.5 Crear un nuevo documento.
1.6 Abrir un documento.
1.7 Guardar un documento.
1.8 Importar y exportar documentos.
1.9 Cerrar y salir de Dreamweaver.
13. Unidad 1 – Introducción a Dreamweaver CS6 3
1.3 Ambiente de Dreamweaver.
Pestañas del documento Barra de herramientas Documento
s
Botón de la Conmutador de
Barra de menús
aplicación espacios de trabajo
s
Á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.
15. Unidad 1 – Introducción a Dreamweaver CS6 5
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.
17. Unidad 1 – Introducción a Dreamweaver CS6 7
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.
19. Unidad 1 – Introducción a Dreamweaver CS6 9
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.
21. Unidad 1 – Introducción a Dreamweaver CS6 11
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.
23. UNIDAD 2
ÁREA DE TRABAJO EN DREAMWEAVER CS6.
2.1 Inspector de propiedades.
2.2 Barra de herramientas Documento.
2.3 Barra de herramientas Estado.
2.4 Barra de herramientas Navegación con navegador.
2.5 Panel Insertar.
25. Unidad 2 – Área de trabajo en Dreamweaver CS6 15
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
27. Unidad 2 – Área de trabajo en Dreamweaver CS6 17
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.
29. UNIDAD 3
CONFIGURAR UN SITIO EN DREAMWEAVER.
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.
33. Unidad 1 – Introducción a Dreamweaver CS6 23
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
servidor de prueba.
35. Unidad 1 – Introducción a Dreamweaver CS6 25
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.
39. Unidad 4 – Formato a la Página Web 29
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.
41. Unidad 4 – Formato a la Página Web 31
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.
43. Unidad 4 – Formato a la Página Web 33
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.
47. Unidad 4 – Formato a la Página Web 37
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
5 11
1 7
3
8
2 12
10
4
49. Unidad 4 – Formato a la Página Web 39
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.
7. Negritas. Añade la propiedad de negrita a la regla de destino.
51. Unidad 4 – Formato a la Página Web 41
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.
53. Unidad 4 – Formato a la Página Web 43
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.
55. Unidad 4 – Formato a la Página Web 45
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:
57. Unidad 4 – Formato a la Página Web 47
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"
59. Unidad 4 – Formato a la Página Web 49
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;
top:0px;
}
61. Unidad 4 – Formato a la Página Web 51
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.
63. Unidad 4 – Formato a la Página Web 53
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.
65. UNIDAD 5
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.
5.5 Imagen de sustitución (Rollover).
5.6 Objetos inteligentes.
67. 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.
69. Unidad 5 – Imágenes 59
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.
71. Unidad 5 – Imágenes 61
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.
73. Unidad 5 – Imágenes 63
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.
75. Unidad 5 – Imágenes 65
TRABAJOS DE INVESTIGACIÓN
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.
76. UNIDAD 6
HIPERVÍNCULOS.
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.
77. 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 alberga
varios sitios, por ejemplo, /support/dreamweaver/contents.html.
79. Unidad 6 – Hipervínculos 69
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.
81. Unidad 6 – Hipervínculos 71
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.
83. Unidad 6 – Hipervínculos 73
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ú.
85. Unidad 6 – Hipervínculos 75
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.
TRABAJOS DE INVESTIGACIÓN
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.
86. UNIDAD 7
DISEÑO DE LA PÁGINA WEB.
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.
87. Unidad 7 – Diseño de la Página Web 77
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.
89. Unidad 7 – Diseño de la Página Web 79
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.
91. Unidad 7 – Diseño de la Página Web 81
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.