Diseno de Paginas Web Dreamweaver CS6

(1)

(2)

(3)

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

(4)

(5)

CONTENIDO

1 Introducción a Dreamweaver CS6.

1.1. ¿Qué es Dreamweaver?

1.4.6. Vista previa en el navegador.

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.

1

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.

3 Configurar un sitio en Dreamweaver.

3.1. Concepto de Sitio.

3.2. Tipos de Sitios en Dreamweaver.

(6)

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.

4.1 Propiedades de la página.

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. 4.8 Concepto de Estilo CSS.

4.9 Crear estilos CSS.

4.9.1 Propiedades CSS. 4.10 Editar estilos CSS.

4.11 Vincular estilos CSS.

4.12 Menús usando hojas de estilos.

(7)

5 Imágenes.

5.1. Concepto de Imagen.

5.2. Insertar imágenes.

5.3. Marcadores de posición de imagen.

5.4. Propiedades de imágenes.

5.5. Imagen de sustitución (Rollover).

5.6. Objetos Inteligentes.

6.2. Tipos de rutas de los vínculos.

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.

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.

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.

(8)

7.10 Crear marcos.

7.11 Seleccionar marcos.

7.12 Guardar marcos.

7.13 Propiedades de los marcos.

7.14 Hipervínculos en marcos.

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.

8.5 Validación de formularios usando HTML5.

91

9.2.2 Etiqueta DIV de diseño de cuadricula fluida.

9.2.3 Div PA.

(9)

(10)

(11)

I

NTRODUCCIÓN A

D

REAMWEAVER

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.

(12)

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 AdobeDreamweaver

CS6.

OPCIÓN 2:

1) Metacomando < Win + R >.

2) Teclea la palabra Dreamweaver.

(13)

1.3 Ambiente de Dreamweaver.

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.

Botón de la

aplicación Barra de menús s

Conmutador de espacios de trabajo

Barra de herramientas Estado

Inspector de propiedades Paneles

Barra de herramientas Documento s

Área de trabajo

(14)

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

(15)

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.

(16)

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.

(17)

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 VistaCó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.

(18)

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

(19)

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

(20)

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

(21)

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

(22)

 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 cualquierdocumento 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.

T R A B A J O S D E I N V E S T I G A C I Ó N

1. Historia de Dreamweaver desde sus comienzos hasta la actualidad.

2. Novedades de Dreamweaver CS6.

3. Requisitos para instalar Dreamweaver CS6.

(23)

Á

REA DE TRABAJO EN

D

REAMWEAVER

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.

(24)

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

(25)

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.

2.4 Barra de herramientas Navegación con navegador.

La barra de herramientas Navegacióncon 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.

Selector de etiquetas

Tamaño del documento y tiempo de descargar estimado Tamaño de ventana

Indicador de codificación

Vista Código en vivo

Activar modo de inspección

Controles de navegador

Opciones de la vista en vivo

(26)

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

(27)

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

(28)

T R A B A J O S D E I N V E S T I G A C I Ó N

1. World Wide Web Consortium. a. ¿Qué es?

b. Organización. c. ¿Para qué se creó? d. ¿Quiénes lo crearon?

(29)

C

ONFIGURAR UN SITIO EN

D

REAMWEAVER

.

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.

(30)

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.

(31)

3.3 Estructura de una Página Web.

paginaweb

documentos

imagenes

videos

scripts

multimedia

(32)

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 NuevoSitio (para configurar un nuevo sitio), o bien selecciona un sitio de Dreamweaver ya existente y haz clic en Editar.

(33)

 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

(34)

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.

(35)

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

(36)

T R A B A J O S D E I N V E S T I G A C I Ó N

1. Concepto de Servidor. 2. Función de los servidores. 3. Tipos de servidores.

(37)

F

ORMATO A LA

P

ÁGINA

W

EB

.

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.

(38)

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

(39)

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íaApariencia (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

(40)

4.1.2 Categoría Apariencia (HTML).

La categoríaApariencia (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

(41)

4.1.3 Categoría Vínculos (CSS).

La categoríaVí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íaEncabezados (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

(42)

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íaImagen 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

(43)

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 lavista 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

(44)

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íaComún, del panelInsertar, 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

(45)

Al seleccionar la regla horizontal insertada, el Inspector de propiedades cambia

para permitirnos modificar las propiedades de dicho objeto.

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. Asignar un nombre de ID

Ancho de la regla

Grosor de la regla Aplicar sombra

Alineación de la regla

(46)

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ú

(47)

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.

(48)

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

(49)

 Inspector de propiedades Categoría CSS.

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.

(50)

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

(51)

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

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

(52)

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

(53)

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 panelEstilos 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

(54)

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

(55)

4.12Menú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

(56)

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 >

(57)

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:

(58)

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.

(59)

ul, ol {

(60)

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é

(61)

 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

(62)

 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

(63)

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

(64)

- 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

(65)

I

MÁ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.

(66)

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.2Insertar 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) PanelInsertarCategoríaComúnImagen. C) Menú InsertarImagen.

3. En el cuadro de diálogo abierto, selecciona la imagen que desees insertar en

(67)

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.

(68)

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

(69)

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

(70)

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.

(71)

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.

(72)

 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,

(73)

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) PanelInsertar 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

(74)

5. Guarda el archivo de imagen para la Web en una ubicación dentro de la

carpeta raíz de su sitio Web.

(75)

T R A B A J O S D E I N V E S T I G A C I Ó N

1. Extensiones de imágenes que permite Dreamweaver insertar al documento. 2. Insertar Imágenes HTML de Fireworks.

(76)

H

IPERVÍ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)

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.2Tipos 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

(78)

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.

(79)

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.

(80)

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 panelInsertar, CategoríaComún, haz clic en el botón Hipervínculo.

(81)

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

(82)

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:[email protected]).

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.

(83)

A)Menú InsertarFormularioMenú de salto.

B)En la categoríaFormulario del panelInsertar, 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

(84)

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.