Dreamweaver CS5

184
16 TEMA 5. ADOBE DREAMWEAVER CS5 José M. Castillo Castillo.

Transcript of Dreamweaver CS5

Page 1: Dreamweaver CS5

16

TEMA 5. ADOBE DREAMWEAVER CS5

José M. Castillo Castillo.

Page 2: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

1

INDICE CONTENIDO TEMA 5. ADOBE DREAMWEAVER CS5

1. CONOCIENDO ADOBE DREAMWEAVER CS5 1.1 Introducción a adobe dreamweaver 1.2 Novedades de dreamweaver cs5 1.3 Requerimientos técnicos 1.4 Editar páginas web 1.5 Cómo tener una página en internet 1.6 Ejecución de adobe dreamweaver 1.7 Entorno de trabajo 1.8 El panel insertar 1.9 Ventana de documento 1.10 Barra de herramientas documento 1.11 Panel propiedades 1.12 Edición de métodos abreviados de teclado 1.13 Panel activo 1.14 Panel historial 1.15 Práctica - mi primera página 1.16 Práctica - diseño web parte i 2. CREACIÓN DE SITIOS Y PÁGINAS WEB 2.1 Planificación de un sitio web 2.2 Configurar un sitio web 2.3 Editar un sitio web existente 2.4 Sistema de protección 2.5 Panel archivos 2.6 Configurar las preferencias del panel archivos 2.7 Crear abrir y guardar documentos 2.8 Configurar las propiedades del documento 2.9 Guías visuales 2.10 Insertar palabras clave y descripciones 2.11 Previsualizar un documento 2.12 Práctica - diseño web parte ii 3. TRABAJO CON TEXTO 3.1 Creación y colocación de textos 3.2 Encabezados y párrafos 3.3 Asignar fuentes a un texto 3.4 Editar la lista de fuentes de dreamweaver 3.5 Cambiar el color del texto 3.6 Alineación del texto 3.7 Sangrías 3.8 Crear listas 3.9 Corrección ortográfica 3.10 Insertar fechas en un documento 3.11 Insertar caracteres especiales 3.12 Insertar reglas horizontales 3.13 Creación de estilos css 3.14 Buscar y reemplazar texto

Page 3: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

2

4. ESTILOS CSS 4.1 Hojas de estilos en cascada 4.2 Estilos css 4.3 Crear un estilo personalizado 4.4 Definir un estilo css 4.5 Aplicar un estilo 4.6 Exportar estilos 4.7 Vincular una hoja de estilos 5. IMÁGENES 5.1 Formatos de gráficos web 5.2 Colocación de imágenes 5.3 Editar imágenes 5.4 Cambiar el tamaño de las imágenes 5.5 Uso de la etiqueta alt 5.6 Alineación de imágenes con texto 5.7 Insertar bordes 5.8 Insertar imágenes de sustitución 5.9 Práctica - diseño web parte iii 6. CREACIÓN DE MARCOS 6.1 Utilización de marcos 6.2 Creación de marcos y conjuntos de marcos 6.3 Crear un conjunto de marcos anidado 6.4 Modificar el tamaño de los marcos 6.5 Modificar los bordes de un conjunto de marcos 6.6 Utilización del panel marcos 6.7 Abrir una página web en un marco 6.8 Añadir barras de desplazamiento 6.9 Destinar la información de un vínculo 6.10 Guardar archivos de marcos y conjuntos de marcos 6.11 Práctica - diseño web parte iv 7. CREACIÓN DE TABLAS 7.1 Utilización de tablas 7.2 Creación de tablas en la ventana de documento 7.3 Modificación de tablas 7.4 Selección de elementos de una tabla 7.5 Alineación del contenido de una celda 7.6 Dividir y combinar celdas 7.7 Anidar tablas 7.8 Ordenar tablas 7.9 Práctica - diseño web parte v

Page 4: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

3

8. TRABAJAR CON CAPAS 8.1 Aparición de las capas 8.2 Creación de capas 8.3 Configurar las características por defecto de una capa 8.4 Panel elementos pa 8.5 Modificación de capas 8.6 Ajustar la alineación de las capas 8.7 Creación de una capa de carga 9. VÍNCULOS WEB 9.1 Localización y rutas de documentos 9.2 Crear vínculos 9.3 Crear vínculos desde el panel propiedades 9.4 Navegar usando anclajes 9.5 Selección del destino de los vínculos 9.6 Crear un vínculo de correo electrónico 9.7 Creación de mapas de imagen 9.8 Creación de menús de salto 9.9 Comprobación de vínculos rotos 9.10 Práctica - diseño web parte vi 10. FORMULARIOS INTERACTIVOS 10.1 Funcionamiento de los formularios 10.2 Objetos de formulario 10.3 Insertar un formulario en dreamweaver 10.4 Creación de campos de texto 10.5 Creación de campos de texto ocultos 10.6 Insertar casillas de verificación 10.7 Grupo de casillas de verificación 10.8 Insertar botones de opción 10.9 Creación de menús desplegables 10.10 Creación de listas 10.11 Creación de botones para activar el formulario 10.12 Insertar campo de archivo 10.13 Práctica - diseño web parte vii 11. BIBLIOTECA 11.1 Almacenamiento de elementos en dreamweaver 11.2 La paleta activos 11.3 Visualizar los elementos de un documento 11.4 Insertar un elemento de biblioteca 11.5 Modificar elementos de biblioteca 12. PLANTILLAS 12.1 Creación de plantillas 12.2 Configurar las propiedades de una plantilla 12.3 Definición de regiones editables en una plantilla 12.4 Bloquear una región editable 12.5 Creación de documentos basados en plantillas 12.6 Práctica - diseño web parte viii

Page 5: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

4

13. ELEMENTOS MULTIMEDIA 13.1 Vídeo en la red 13.2 Vincular vídeos en dreamweaver 13.3 Reproducción de vídeos on line 13.4 Atributos de quicktime 13.5 Insertar real vídeo en un documento html 13.6 Inserción de archivos flv 13.7 Películas flash 13.8 Sonido 13.9 Práctica - diseño web parte ix 14. COMPORTAMIENTOS 14.1 Panel comportamientos 14.2 Añadir un comportamiento 14.3 Llamar javascript 14.4 Cambiar propiedad 14.5 Comprobar plug-in 14.6 Mensaje emergente 14.7 Arrastrar capa 14.8 Ir a url 14.9 Abrir ventana del navegador 14.10 Carga previa de imágenes 14.11 Mostrar ocultar elementos 14.12 Intercambiar imagen 14.13 Validar formulario 14.14 Práctica - diseño web parte x 15. DISEÑO WEB CON SPRY 15.1 Los widgets de spry 15.2 Widget de acordeón 15.3 Widget de barra de menús 15.4 Widget de paneles que pueden contraerse 15.5 Widget de paneles en fichas 15.6 Widget de grupo de opciones 15.7 Widget de campo de texto 15.8 Widget de área de texto 15.9 Widget de selección 15.10 Widget de contraseña de validación 15.11 Efectos de spry 16. COMANDO DE TECLADO 16.1 Teclas de función de dreamweaver 16.2 Cuestionario: cuestionario final

Page 6: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

5

1. CONOCIENDO ADOBE DREAMWEAVER CS5

Antes de comenzar a utilizar Dreamweaver y para sacar el máximo rendimiento al programa, veremos una pequeña introducción que nos informará de los requisitos del sistema necesarios para su instalación y correcto funcionamiento. Además, exploraremos la interfaz del programa, aprenderemos a utilizar sus herramientas, y a definir las preferencias que mejor se adapten a nuestra forma de trabajar.

1.1. Introducción a Adobe Dreamweaver CS5

Adobe Dreamweaver es un editor de código HTML profesional para el desarrollo de páginas Web. Tanto si estamos habituados a trabajar directamente con el código HTML, como si prefiere un entorno de edición visual fácil de manejar (como era en su día Microsoft FrontPage), Dreamweaver es, realmente, la herramienta que nos permitirá trabajar del mismo modo que lo hacen los diseñadores Web profesionales.

A lo largo de este curso, aprenderá a manejar y crear sitios Web, utilizando las características novedosas que ofrece un programa amplio en opciones de diseño, que serán indispensables para los diseñadores expertos y principiantes de Internet. Aprenderemos a crear tablas, editar marcos, trabajar con capas, insertar comportamientos de JavaScript, etc.., de una forma muy sencilla y visual.

Dreamweaver nos permitirá crear sitios Web de una forma visual, utilizando la interfaz gráfica de fácil manejo del programa, que además incluye un software de cliente FTP completo, que permite entre otras cosas trabajar con mapas visuales de los sitios Web, actualizando el sitio en el servidor sin salir del programa al mismo tiempo que vamos realizando los cambios.

1.2. Novedades de Dreamweaver CS5

Un punto fuerte de Dreamweaver es que va dirigida a gente sin conocimientos de programación y que solo a través de sus herramientas, una persona sea capaz de crear sitios potentes, con muchos efectos y funcionalidades, solo usando productos de Adobe. Entre nuevas funcionalidades cabe destacar las nuevas sugerencias de código personalizada o la integración de CMS (Wordpress, Drupal, Joomla...) en el programa, puedes visualizar y editar al mismo tiempo estos CMS sin necesidad de instalar Apache.

Page 7: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

6

Desde el lanzamiento de Adobe Creative Suite CS5, se habla mucho sobre los nuevos Live CS (servicios en línea de Adobe), uno de los programas que más se va a beneficiar de esto es precisamente Dreamweaver CS5.

Uno de estos servicios es el ADOBE BROWSERLAB que permite realizar pruebas de compatibilidad con visión múltiple, una funcionalidad que nos permite comparar cómo se ve una misma página web en las distintas versiones de navegadores, bajo los sistemas operativos de Windows o Mac OS, se colocan una sobre la otra, como si se tratase de papel cebolla, fácilmente podrás ver los cambios que se producen al paso de un navegador a otro.

También Adobe quiere acercar este producto a las empresas, de tal forma que puedan montar sus negocios a través de Internet de forma rápida, profesional, eficiente y ajustada a sus necesidades, es por eso que montaron otro Live CS llamado Adobe Business Catalyst (disponible por separado y solo en inglés), una extensión que permite crear una plataforma de trabajo que sin necesidad de programación y en poco tiempo se puede crear un verdadero sitio.

Desde mi punto de vista, este enfoque de Adobe es novedoso y puede resultar muy efectivo para crear portales sencillos, pero para trabajos más complejos, necesitas contratar a profesionales, la tecnología de Adobe no puede equipararse al trabajo de un programador, maquetador, diseñador, y desarrollador Web. Aun así, creo que satisfarán las necesidades de los profesionales y permitirá que gente novata, pueda crear su propia web moviendo su ratón.

1.3. Requerimientos técnicos para Adobe Dreamweaver CS5

Para la instalación de este programa y su correcto funcionamiento, harán falta una serie de condiciones y requerimientos mínimos para el PC en el que vayamos a trabajar:

Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits.

Microsoft® Windows® XP con Service Pack 2 (aunque se recomienda Service Pack 3), Windows Vista® con Service Pack 1 o Windows 7.

512 MB de memoria RAM (se recomienda 1 GB).

1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante el proceso de instalación (no se puede instalar en dispositivos de almacenamiento extraíbles basados en flash).

Resolución de 1024 x 768 (se recomienda 1280 x 800) con tarjeta de vídeo de 16 bits.

Ratón compatible con Windows.

Unidad de DVD-ROM (sólo necesaria para la instalación del programa).

Se requiere conexión a Internet de banda ancha para los servicios en línea y para validar la suscripción a la edición (si corresponde) de manera continuada.

Page 8: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

7

1.4. Editar páginas Web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas de Windows para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.

Hoy en día existe una amplia gama de editores de páginas Web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas Web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.5. Cómo tener una página en Internet

Para poder poner una página Web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Page 9: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

8

Cuando se va a contratar un servicio de almacenamiento es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, “.net”, “.org”, “.es” o “.com”.

Es importante que para trabajar con los archivos de Dreamweaver no utilice caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan Linux) distinguen entre mayúsculas y minúsculas. Evitarás horas perdidas buscando fallos.

1.6. Ejecución de Adobe Dreamweaver CS5

Una vez instalado Adobe Dreamweaver CS5, iniciar el programa será tan fácil como ejecutar cualquier otro programa de Windows.

Para iniciar Adobe Dreamweaver CS5 en Windows 7 existen las siguientes formas de ejecutarlo:

Acceder desde el botón inicio de Windows Todos los Programas y acceder a la carpeta Adobe Master Colletion CS5 y pulsar DreamweaverCS5.

Otra forma de acceder al programa Adobe Dreamweaver CS5 es mediante un acceso directo creado en el escritorio de nuestro PC.

O bien, mediante la ejecución un fichero creado en Adobe Dreamweaver CS5 con formato Dreamweaver.

Enlace vídeo: Ejecución de Adobe Dreamweaver CS5.

Page 10: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

9

1.7. Entorno de trabajo

Una vez abrimos Dreamweaver por primera vez, nos encontraremos con el entorno de trabajo del programa (observe la imagen). Este entorno puede adaptarse a distintas formas de trabajar dependiendo de la configuración que establezcamos antes de salir del programa.

La barra de aplicación

Esta barra se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen inferior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda On line.

La pestaña de documento

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento haciendo clic directamente sobre el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho.

Page 11: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

10

La barra de herramientas de documento

Esta barra contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

La barra de navegación con navegador

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos. Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

Grupo paneles

Se agrupan en el margen derecho del programa y, si pulsa sobre el nombre de uno de ellos, se desplegará mostrándose como el panel activo.

La barra de estado

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

Page 12: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

11

El inspector de propiedades

Muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.

Ventana documento

Es el área principal de trabajo. Muestra el documento actual mientras lo está creando y editando.

1.8. El panel Insertar

El panel Insertar contiene los elementos más utilizados para el diseño de páginas Web. En ella, seleccionaremos desde imágenes a plugins Actives e incluso comentarios HTML. Además, personalizaremos este panel añadiendo nuestros propios elementos y organizándolos a nuestro gusto.

Dentro de la Barra de herramientas Insertar, veremos ocho categorías de forma predeterminada: Común, Diseño, Formularios, Datos, Spry, InContext Editing, Texto y Favoritos.

Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.

Page 13: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

12

Para volver a mostrar como opciones independientes cada categoría, presione sobre una de las pestañas con el botón secundario del ratón y marque la orden Mostrar como menú.

Común

Al seleccionar esta categoría, tendrá acceso a las opciones y elementos HTML más utilizados como: imágenes, tablas, capas, etc.

Diseño

En ella, verá opciones para insertar tablas, etiquetas, marcos o bien elegir entre las dos vistas de tablas: Estándar o Ampliada.

Formularios

Ofrece comandos con los que crearemos formularios e insertaremos los elementos que los componen.

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.

Page 14: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

13

Spry

Contiene botones para crear páginas de Spry, incluidos objetos de datos y widgets de Spry.

InContext Editing

Contiene botones para la creación de páginas de InContext Editing, incluidos botones para Regiones editables, Regiones repetidas y la administración de clases CSS.

Texto

Contiene caracteres especiales como los símbolos de copyright, comillas curvas, marca registrada, etc.

Favoritos

Utilice esta categoría para agrupar y organizar los botones de la Barra de herramientas Insertar que utiliza con más frecuencia.

Page 15: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

14

1.9. Ventana de documento

La ventana de documento nos presenta el documento actual con una apariencia muy aproximada a la que mostrará en un explorador Web. Es el lugar donde creará sus páginas Web escribiendo encabezados y párrafos, insertando imágenes y enlaces, creando tablas y demás elementos HTML. En la parte superior de la ventana de documento verá una etiqueta que le muestra el nombre de la página. Éste se acompañará de un asterisco (*) si el documento contiene cambios no guardados.

Dreamweaver le permite trabajar en su documento de diferentes formas, utilizando la vista Diseño, la vista Código o empleando una vista combinada que enseñe el diseño y el código del documento (Dividir). Puede cambiar de una vista a otra usando los comandos Código, Dividir y Diseño de la Barra de herramientas Documento.

Si presta atención a la zona inferior de la ventana de documento verá sus dimensiones actuales (en píxeles). Si hace clic en la flecha desplegable Tamaño de descarga, Dreamweaver mostrará otros tamaños que le permitirán adaptar las dimensiones de la ventana a los tamaños de monitor estándar. Este tamaño cambia si reduce manualmente el tamaño de la ventana del programa.

Enlace vídeo: Ventana de documento.

NOTA: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador sin bordes. El tamaño del monitor figura entre paréntesis. Tenga en cuenta que si la ventana de documento está maximizada, no podrá modificar sus medidas.

Para disponer de otro tipo de tamaño o dimensionamiento de la ventana del documento pulse la opción Editar tamaños e introduzca un nuevo tamaño, alto y ancho, y a continuación clic en aceptar y aparecerá la nueva dimensión en la ventana del programa Tamaño ventana.

Page 16: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

15

1.10. Barra de herramientas Documento

Esta Barra de herramientas contiene botones que nos permitirán alternar entre las diferentes vistas del documento. Además, dicha Barra contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. A continuación, vamos a ver con más detenimiento las posibilidades que nos ofrece:

Mostrar vista de Código: Nos permite examinar o editar el código HTML en la ventana

de documento.

Mostrar vistas de Código y Diseño: os muestra, en la ventana de documento una

combinación de la vista Código y la vista Diseño.

Mostrar vista de Diseño: Es la vista en la que se muestra por defecto la ventana de

documento; nos muestra una representación visual del documento, en lugar del

código subyacente.

Código en vivo: La Vista en vivo se diferencia de la vista de diseño tradicional de

Dreamweaver en que ofrece una representación no editable más realista de la

apariencia que tendrá la página en un navegador.

Comprobar compatibilidad con navegador: Comprueba la compatibilidad con

diferentes navegadores.

Vista previa/Depurar en navegador: Este menú emergente nos permitirá previsualizar

el documento actual en la ventana del navegador. Para agregar o cambiar los

navegadores enumerados en el menú, utilizaremos la opción Editar lista de

navegadores y actuaremos desde el cuadro de diálogo Preferencias.

Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de

nuestras páginas.

Actualizar vista de diseño: Utilice este botón para actualizar la vista Diseño después

de realizar cualquier cambio en el código de nuestro documento.

Título de documento: Nos permite introducir un título para el documento de una

forma rápida. Si el documento ya dispone de uno, aparecerá en este

campo.

Administración de archivos: Abre el menú emergente con el mismo nombre, el cual

contiene la información del estado del documento en el que estamos

trabajando.

Page 17: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

16

1.11. Panel Propiedades

El panel Propiedades de Adobe Dreamweaver es probablemente la herramienta usada con más frecuencia en el programa. Esencialmente, este panel nos permitirá examinar y editar las propiedades del elemento seleccionado en el documento actual, ya sea una tabla, una imagen o una línea de texto.

La forma de acceder a estas opciones es presionando la orden Propiedades del menú Ventana o en su defecto la combinación de teclas CTRL+F3.

El contenido del panel Propiedades varía de forma dinámica en función del elemento seleccionado. Por ejemplo, si seleccionamos una línea de texto, podremos cambiar su fuente, color y tamaño; cuando seleccionamos una tabla, podremos cambiar el número de columnas y filas, las dimensiones relativas, grosor de bordes y color, y alineación del contenido en las celdas.

Podrá contraer el panel ocultando los atributos menos comunes de un objeto haciendo un doble clic en cualquier área vacía del panel.

Page 18: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

17

1.12. Edición de métodos abreviados de teclado

Los métodos abreviados de teclado son un rápido y fácil camino para acceder a las distintas funciones de un programa.

La mayoría de los programas ofrecen al usuario unos métodos abreviados de teclado predeterminados, pero Dreamweaver pone a nuestra disposición un editor que nos permitirá crear nuestra propia configuración, editando los métodos abreviados existentes o utilizando otros previamente predefinidos.

Para ello, vaya al menú principal a Edición y seguidamente pulse Métodos abreviados de teclado, entrará en un cuadro de diálogo que permitirá añadir, redefinir y eliminar un método abreviado que hayamos definidos.

Para añadir una nueva combinación de teclas, habrá que duplicar una existente del conjunto actual y cambiarle el nombre. Seleccione el comando que desea se le aplique una teclas abreviadas y pulse el botón de (+) para añadir nuevo método abreviado, seguidamente introduzca, por ejemplo, las teclas combinadas Ctrol+8, y si no se encuentra repetida Dreamweaver la acepta y se queda activada para ese conjunto actual creado. Para eliminar un método abreviado utilice el botón (-) sobre el método de teclas seleccionado y se eliminará del conjunto actual.

Enlace vídeo: Añadir un método abreviado a un comando.

Enlace vídeo: Redefinir un método abreviado existente.

Enlace vídeo: Eliminar un método abreviado de un comando.

Page 19: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

18

1.13. Panel Activos

El panel Activos es una de las herramientas de Adobe Dreamweaver a la que dedicaremos una atención especial. Como los sitios Web han crecido en complejidad, manejar los activos puede convertirse en una tarea muy difícil.

Algunos sitios Web pueden tener cientos de imágenes, archivos de audio y archivos multimedia. El panel Activos nos permitirá administrar de forma fácil y rápida todos los activos de nuestro sitio Web. Podremos controlar todos los colores, imágenes, URL externos y secuencias de comandos, así como elementos Flash, Shockwave, QuickTime, plantillas y bibliotecas desde un lugar central.

Este panel ofrece dos formas de ver los activos; la opción Sitio, que muestra todos los activos del sitio (que reconoce el panel), y la opción Favoritos, que sólo muestra los activos seleccionados de manera explícita. Para mostrar el panel Activos, despliegue el menú Ventana y seguidamente, presione la orden Activos. Observe en él que podemos trabajar con las siguientes categorías:

Imágenes: Son archivos de imagen en formato .gif, .jpeg o .png.

Colores: Son los colores utilizados en documentos y hojas de estilos del sitio, incluidos los

colores del texto, el fondo y los vínculos.

URL: Muestra los URL externos a los que están vinculados los documentos del sitio. Esta

categoría incluye los siguientes tipos de vínculos: FTP, gopher, HTTP, HTTPS, JavaScript,

correo electrónico (mailto) y archivo local (file://).

Flash: Son archivos de cualquier versión del formato Flash de Macromedia. El panel

Activos muestra los archivos “.swf” (Flash comprimidos), pero no los “.fla” (Flash de

origen).

Shockwave: Son archivos de cualquier versión del formato Shockwave de Adobe.

Películas: Son archivos de películas en el formato QuickTime o MPEG.

Page 20: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

19

Scripts: Son archivos JavaScript o VBScript. Las secuencias de comandos de archivos HTML

no aparecen en el panel Activos, a diferencia de las incluidas en archivos JavaScript o

VBScript independientes.

Scripts: Son archivos JavaScript o VBScript. Las secuencias de comandos de archivos HTML

no aparecen en el panel Activos, a diferencia de las incluidas en archivos JavaScript o

VBScript independientes.

Biblioteca: Son elementos que se utilizan en múltiples páginas. Cuando se modifica un

elemento de biblioteca, se actualizan todas las páginas que contienen ese elemento.

NOTA: Al arrastrar la imagen puede que el programa le pregunte si desea añadir una etiqueta a la

imagen que va a colocar. Cancele esta opción en cada imagen presionando el botón Cancelar, o

bien elimínela siempre que inserte una imagen pulsando el enlace cambie las preferencias de

Accesibilidad que le muestra el cuadro y desactivando la casilla de verificación Imágenes del

cuadro Preferencias. A lo largo de esta explicación, hemos visto una forma rápida de administrar

el contenido de un sitio. Para previsualizar el resultado de los cambios realizados, guarde los

cambios mediante la opción Guardar del menú Archivo y pulse la tecla F12

Para acceder al Panel activos, tiene que existir una carpeta de sitio local para establecer el nuevo sitio. En el menú principal Sitio pulsamos en Administrar Sitios y un nuevo cuadro de diálogo nos muestra los nombres de los sitios que tenemos configurados en Dreamweaver. En este caso, solamente con seleccionar uno de ellos y pulsar LISTO se activa ese panel.

Para añadir un nuevo sitio tenemos que pulsar el botón Nuevo Sitio, por lo que nos aparece un cuadro de diálogo que nos permite añadir el nombre del nuevo sitio y la carpeta del sitio local donde se encuentran los archivos y carpetas. Una vez que hayamos introducido estos datos pulsamos en Guardar y aparecerá nuestro nuevo sitio en el Administrador sitios, lo seleccionamos y pulsamos LISTO.

Page 21: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

20

Posteriormente, aparecerá una ventana con todas las carpetas y archivos que pertenecen a ese

sitio activo.

Enlace vídeo: Trabajar con el Panel Activos.

Page 22: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

21

1.14. Panel Historial

El panel Historial nos muestra una lista con todos los pasos que hemos realizado en el documento activo de Dreamweaver desde que éste se creó o abrió. Este panel resultará muy útil para deshacer uno o varios pasos o para repetirlos, así como, para crear nuevos comandos que automaticen tareas que se repiten.

Enlace vídeo: Utilizar el panel Historial.

Acceda al menú principal Ventana y pulse Historial o Mayus+F10 y nos muestra una ventana con todos los pasos guardados que hemos dado durante el diseño de la página.

Enlace vídeo: Configurar el panel Historial.

Page 23: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

22

1.15. Practica: Mi primera página

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.

1.16. Practica: Diseño Web parte I

Para comenzar a trabajar con Dreamweaver, sólo necesitaremos abrir un documento HTML existente o crear uno nuevo. Sin embargo, para sacar el máximo provecho a Dreamweaver, en esta primera práctica vamos a comenzar configurando algunas de las preferencias del programa para lograr que se nos facilite la forma de trabajar.

Recuerda…

La Barra de Estado nos permite informarnos sobre las dimensiones actuales de la ventana de documento.

La función principal del Panel propiedades nos permitirá examinar y editar las propiedades del elemento seleccionado en el documento actual.

La opción Tamaño de Ventana la utilizaremos para aplicar un tamaño estándar a la ventana de documento.

Para localizar la Barra de título en el entorno de trabajo de Dreamweaver nos vamos a la parte superior de la pantalla mostrando el nombre del documento abierto.

Insertar presenta 8 categorías de forma predetermina estas son: Diseño, Formularios, Común, Texto, HTML,

La función principal de Panel Activos es administrar de forma rápida todos los archivos de nuestro sitio web.

La memoria RAM necesaria para la correcta instalación de Dreamweaver es de 512 MB, recomendada de 1 GB.

El espacio que debemos disponer para instalar la aplicación en el disco duro del PC es de 1 GB.

Las operaciones que están dispuestas en la Barra de Herramientas Documento son: actividades vista de diseño, mostrar vista de código y mostrar vista de Diseño.

Utilizando el acceso directo creado en el escritorio de nuestro PC, se podrá ejecutar el programa Dreamweaver.

Page 24: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

23

2. CREACIÓN DE SITIOS Y PÁGINAS WEB

Adobe Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va a contener. A lo largo del próximo tema, aprenderemos a organizar los archivos de los sitios local y remoto.

Luego, una vez creado el sitio local, colocaremos en él los documentos nuevos que realicemos. Para finalizar, configuraremos las propiedades de los documentos de Dreamweaver y los previsualizaremos en un navegador.

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.

2.1. Planificación de un sitio Web

Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de nuestro sitio. Dicha planificación, no sólo reducirá considerablemente el tiempo empleado en la creación, sino que nos ayudará a que todas las páginas presenten un aspecto uniforme, además de hacer más sencillo su uso. La forma más cómoda de trabajar, cuando la labor que desarrollamos se vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de almacenamiento en la cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de subirlo al servidor, minimizando así la aparición de posibles errores en el sitio Web una vez abierto al público.

Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador deberá estar familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso su combinación:

Estructura lineal

Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran lineales, es decir, una página seguía a otra a lo largo de una secuencia inalterable. Este modelo, hoy en día, todavía es muy usado para crear aplicaciones de enseñanza, donde podremos controlar el orden de visualización de los temas, mostrando una página tras otra como si de un libro multimedia se tratase.

Page 25: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

24

Estructura jerárquica

En este modelo, tomamos como punto de partida una página de inicio, desde la cual podremos acceder al resto de páginas del sitio. Los sitios con estructura jerárquica ayudan a proporcionar un mejor sentido sobre la orientación de nuestro sitio Web.

Estructura centralizada

Este tipo de navegación está basado en una página central de inicio a la que le vincularemos el resto de páginas principales del sitio. El principal inconveniente de este modelo es tener que pasar constantemente por la página principal para ir a otra zona.

Estructura libre

Esta última estructura nos permite aprovechar al máximo la funcionalidad de los hipervínculos, permitiéndonos que prácticamente cualquier página pueda conectarse a cualquier otra de nuestro sitio. Como principal inconveniente del uso de este método es la pérdida del internauta durante la navegación.

Page 26: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

25

2.2. Configurar un sitio Web

Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados para configurar uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las distintas páginas que compongan el proyecto.

A lo largo de la siguiente explicación, aprenderemos a establecer este sitio local en Dreamweaver, lo que significa que podremos utilizar Dreamweaver con FTP para gestionar meticulosamente, tanto su copia local (PC) como la remota (Servidor), reduciendo al máximo su mantenimiento.

Para configurar un sitio web lo primero que debemos hacer en Dreamweaver es crear nuestro sitio, para ello, seleccionamos en el menú principal la opción Sitio y pulsamos Nuevo Sitio. Con esta opción nos aparece un cuadro de diálogo para introducir la información correspondiente al nombre del sitio y la carpeta donde se ubica los archivos y carpetas de nuestra página web.

Si pulsamos en la configuración avanzada que se encuentra en la barra de opciones de la izquierda, nos permite introducir la carpeta predeterminada de imágenes, archivos de consulta de medios para todo el sitio y la URL o dirección de la web donde está ubicada nuestra página. En este caso se puede omitir. Recomendable que este la opción de Caché activada para agilizar el proceso de trabajo de la página web.

Enlace vídeo: Configurar un sitio Web.

Page 27: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

26

2.3. Editar un sitio Web existente

En este nuevo apartado, veremos cómo modificar un sitio Web que ya tengamos configurado.

En esta ocasión seleccionamos en el menú principal la opción Sitio y pulsamos Administrar Sitios, en el cuadro de dialogo que aparece seleccionamos el sitio y pulsamos Listo.

Enlace vídeo: Editar un sitio Web existente.

Seguidamente nos aparece en una ventana con los archivos locales del sitio en concreto. En el caso de querer eliminar un sitio seleccionamos el sitio y pulsamos el botón (-) situado a la izquierda de la ventana de Administrar sitios. Dreamweaver solicitará la confirmación de la eliminación pues desaparecerá definitivamente del programa.

Enlace vídeo: Eliminar un sitio Web existente.

Page 28: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

27

2.4. Sistema de protección

Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad cuando un equipo de diseñadores y programadores se encargan de desarrollar y mantener un sitio Web. De esta manera, si por ejemplo, uno de los diseñadores está realizando alguna modificación, Dreamweaver insertará, en el panel Archivos, una marca junto al archivo que estuviera editándose, para que el resto de diseñadores se den cuenta de que ese fichero se está modificando.

1. Despliegue el menú Sitio y seleccione la opción Administrar sitios.

2. Seleccione un sitio existente en la lista del cuadro con el mismo nombre y haga clic en

el botón Editar. Se abre el cuadro de diálogo Configuración del sitio.

3. Seleccione la categoría Servidores en el cuadro de diálogo.

4. Seleccione un servidor existente y haga clic en el botón Editar servidor existente.

5. Haga clic en el botón Avanzadas en la parte superior.

6. Active la casilla Activar protección del sitio. Al activar esta opción, de forma

automática, aparece la casilla Proteger archivos al abrir activada justo debajo.

7. Introduzca un nombre de protección en el campo de edición correspondiente.

8. A continuación, introduzca una dirección de correo electrónico.

9. Para finalizar, pulse el botón Aceptar.

2.5. Panel Archivos

El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A través de sus opciones, podremos crear nuevos documentos HTML, abrir y mover archivos, crear carpetas, y borrar elementos. También podremos utilizarlo para transferir archivos de la carpeta en desarrollo, de su disco duro a su servidor Web. El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué debe mostrarse en dicha ventana y para transferir archivos entre los sitios local y remoto.

Page 29: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

28

Para mostrar el panel Archivos y explicar sus comandos más usados:

1. En primer lugar, despliegue el menú Ventana de la Barra de menús y seleccione la

orden Archivos de su lista de opciones.

2. El panel se mostrará en el margen derecho del programa, junto al resto de paneles ya

visibles.

3. Localice en su Barra de herramientas Expandir para mostrar sitios locales y remotos y

presiónelo para ver todas sus opciones.

4. El panel se mostrará ocupando toda la pantalla y si centra su atención en los

comandos que muestra, verá el botón Contraer para mostrar sólo el sitio local o

remoto que le devolverá a la visión anterior.

5. El cuadro de lista Mostrar nos permite seleccionar otro sitio en la lista emergente que

aparece al pulsar con el ratón sobre él. Además nos permitirá añadir un sitio o editar

la información de uno ya existente mediante la orden Administrar sitios.

6. La opción Conectar al servidor remoto nos permitirá conectarnos con el servidor

remoto de nuestro sitio Web. De forma predeterminada, Dreamweaver desconectará

del sitio remoto si permanece inactivo durante más de 30 minutos.

7. La opción Actualizar nos permite restablecer las listas de los directorios local y

remoto.

Page 30: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

29

8. La opción Archivos del sitio nos muestra la estructura de archivos de los sitios remoto

y local. De forma predeterminada, el sitio remoto aparece en el panel izquierdo,

mientras que los archivos locales se muestran en el derecho.

9. La opción Servidor de prueba nos muestra la estructura de archivos de un servidor de

prueba siempre que esté configurado. Al igual que el comando anterior, el servidor

aparece en el panel izquierdo, mientras que los archivos locales se muestran en el

derecho

10. La opción Archivos de bases de datos muestra la base de datos de Subversion

(SVN).

11. La opción Obtener archivo(s) transfiere una copia de los archivos seleccionados del

sitio remoto al sitio local.

12. La opción Colocar archivo(s) transfiere una copia de los archivos seleccionados desde

el sitio local hasta el sitio remoto.

13. La opción Proteger archivo(s) transfiere una copia del archivo desde el servidor

remoto hasta el sitio local y marca el archivo como protegido en el servidor.

14. La opción Desproteger transfiere una copia de un archivo local al servidor remoto

permitiendo que otros usuarios puedan editarlo.

15. Para finalizar vemos la opción Sincronizar que regulariza los archivos existentes en los

sitios local y remoto.

Page 31: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

30

2.6. Configurar las preferencias del panel Archivos

Mediante esta explicación veremos cómo configurar el panel Archivos para que se cubran todas nuestras necesidades.

1. En el menú Edición seleccione la opción Preferencias. Se abrirá el cuadro de diálogo con el mismo nombre.

2. En la lista Categoría, seleccione la opción Sitio.

3. Utilice el cuadro de lista Mostrar siempre para especificar qué archivos (locales o remotos) se mostrarán por defecto y en qué lado (izquierdo o derecho) aparecerán.

4. En el área Archivos dependientes, las opciones Mensaje al obtener/proteger y Mensaje al colocar/desproteger aparecen activadas de forma predeterminada.

5. En el área Conexión FTP, podremos determinar si se interrumpirá la conexión con el sitio remoto cuando transcurra el número de minutos que especifiquemos en el campo de edición.

6. En el área de edición Tiempo de espera FTP, especifique el número de segundos durante los que Dreamweaver intentará establecer una conexión con el servidor remoto.

7. En el campo editable Host proxy, especifique la dirección del servidor proxy con el que establecerá la conexión con servidores externos si se encuentra al otro lado de un cortafuegos.

8. En el área Puerto proxy, especifique el puerto del cortafuego por el cual se establece la conexión con el servidor remoto.

9. Active Guardar archivos antes de colocar para que los archivos se guarden de forma automática antes de colocarlos en el sitio remoto.

10. El botón Administrar sitios nos abrirá el cuadro de diálogo con el mismo nombre, en el que podremos editar un sitio existente o crear uno nuevo.

11. Para finalizar, guarde los cambios realizados pulsando el botón Aceptar.

Page 32: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

31

2.7. Crear, abrir y guardar documentos

Una vez que hemos aprendido a crear el sitio local, debemos comenzar a desarrollar los documentos que colocaremos en él. Adobe Dreamweaver ofrece diversas formas para crear un documento.

Podremos crear documentos HTML nuevos (en blanco); abrir documentos HTML existentes, crear un nuevo documento basado en una plantilla, etc.

NOTA: Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas.

Para crea un nuevo documento HTML en blanco nos vamos al menú principal Archivos y pulsamos Nuevo, con lo que nos aparece una ventana para seleccionar las características de nuestro nuevo documento, que puede ser:

Página en blanco

Plantilla en blanco

Diseño de cuadricula fluido.

Página de plantilla

Página de muestra.

Otro…

Donde nos permite seleccionar el tipo de página y el diseño.

En nuestro caso seleccionamos Página en blanco HTML y ningún diseño. En tipo de documento seleccionamos el que está por defecto. En la opción adjuntar archivo CSS, no poner nada, puesto que sería en el caso de tener un archivo de hoja de estilo ya creado para esta página, entonces sí habría que adjuntarlo. Seguidamente pulsamos Crear.

Enlace vídeo: Crear un nuevo documento HTML en blanco.

Page 33: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

32

Para abrir un archivo HTML existente, vamos al menú principal Archivo y pulsamos Abrir o pulsamos las teclas Ctrol+O. Nos aparece una ventana de búsqueda que nos permite buscar la dirección local donde se encuentra nuestro archivo HTML existente.

Enlace vídeo: Abrir un archivo HTML existente.

Para guardar un documento por primera vez tenemos que ir a Archivo y pulsar Guardar o pulsando las teclas Ctrol+S. Nos aparece una ventana que nos pregunta en que directorio guardarlo y el nombre y tipo del documento a guardar. Por ejemplo, introducimos el directorio local WEB_1 e introducimos el nombre Index y el tipo html y pulsamos Guardar.

Enlace vídeo: Guardar un documento por primera vez.

Page 34: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

33

2.8. Configurar las propiedades del documento

Antes de comenzar a añadir contenido a un documento, podremos necesitar configurar sus propiedades principales. Con el cuadro de diálogo Propiedades de la página, podremos configurar el título de la página, las imágenes y colores del fondo, del texto y de los vínculos.

¡Recuerde! Un asterisco indica que el documento contiene cambios que no se han guardado aún.

Para configurar las propiedades del documento nos vamos al menú principal Modificar y pulsamos la opción Propiedades de la página, donde aparecen las siguientes categorías:

Apariencia (CSS)

Apariencia (HTML)

Vínculos (CSS)

Encabezado (CSS)

Titulo/Codificación

Imagen de rastreo. Conforme vamos seleccionando las diferentes categorías va apareciendo a la derecha del cuadro de diálogo las características a añadir y valores por defecto para cada una de las categorías de la página.

Para introducir el título nos ponemos en la categoría Titulo/Codificación e introducimos el título de la página. Tipo de documento, codificación o formulario de normas Unicode.

Enlace vídeo: Configuración de propiedades del documento.

Page 35: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

34

2.9. Guías visuales

Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y previsualizar cuál será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la visualización de las reglas y a utilizar la cuadrícula para lograr una mayor precisión en la colocación y ajuste del tamaño de las capas.

Configuración de Regla

Para visualizar la regla seleccionamos en el menú principal Ver y pulsamos Reglas, en el siguiente submenú seleccionamos Mostrar. Aparece la regla vertical y horizontal en la venta de trabajo de Dreamweaver.

Siga los mismos pasos para Restablecer Origen y volver a la posición inicial o si desea cambiar la unidad de medida en pixel, pulgadas o centímetros.

Enlace vídeo: Configuración de reglas.

Configuración cuadricula

Para configura la cuadricula nos vamos hacia el menú Ver y pulsamos Cuadricula donde aparece un submenú con tres opciones:

Mostrar cuadricula

Ajustar a cuadricula

Configuración de cuadricula…

Si pulsamos Mostrar cuadricula aparece en la ventana de la página con el fondo cuadriculado, para cambiar y dimensionar los cuadrados se utiliza la opción Configuración de la cuadricula que nos permite cambiar el color, espaciado, mostrar el trazado como líneas o puntos.

Enlace vídeo: Configuración de cuadrícula.

Page 36: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

35

2.10. Insertar palabras clave y descripciones

Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de contener la información necesaria para que los motores de búsqueda puedan dar a conocer el contenido y tipo de la página Web. En Dreamweaver, estos elementos están representados por los objetos Palabras clave y Descripción.

Palabras clave

1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la opción

Etiquetas Head y, en el submenú que aparece, seleccione la opción Palabras clave. Se abre el cuadro de diálogo con el mismo nombre.

2. Introduzca las palabras clave, separadas por comas, en el cuadro de edición Palabras clave. 3. Para finalizar, pulse el botón Aceptar.

NOTA: Dado que algunos motores de búsqueda limitan el número de palabras clave o caracteres que indexan, o bien prescinden de todas las palabras clave si se supera el límite, conviene utilizar sólo unas pocas palabras clave bien elegidas.

Descripción

1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la opción Etiquetas Head y en el submenú que aparece seleccione Descripción. Se abre el cuadro de diálogo con el mismo nombre.

2. Introduzca el texto descriptivo sobre la Web en el cuadro de edición Descripción.

3. Para finalizar, pulse el botón Aceptar.

NOTA: Al igual que ocurría con las palabras clave, algunos motores de búsqueda limitan el número de caracteres que indexan, por lo que conviene restringir la descripción al menor número de palabras posible.

Page 37: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

36

2.11. Previsualizar un documento

A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de páginas Web, es importante el poder previsualizar el resultado de nuestro trabajo con cierta frecuencia en uno o varios exploradores. A pesar de que en la ventana de trabajo del programa, se tiene una visión muy similar a la de un explorador, debido al gran número de navegadores existentes y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.

1. En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú que aparece, seleccione Editar lista de navegadores. Se abre el cuadro de diálogo Preferencias con la categoría Vista previa en el navegador seleccionado.

2. Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse

el botón con forma de signo más (+). Se abre el cuadro de diálogo Añadir navegador.

3. En el campo de edición Nombre, escriba el nombre con el que aparecerá el explorador en

la lista. 4. En el área Aplicación, utilice el botón Examinar para localizar la ruta de acceso al

ejecutable del navegador que desea configurar. Si lo desea, puede introducir directamente la ruta utilizando el campo de edición.

5. Active, si lo desea, una de las casillas correspondientes al tipo de navegador Navegador principal o Navegador secundario.

6. Haga clic en Aceptar para añadir así el navegador configurado a la lista. 7. Una vez añadido un navegador a la lista, podrá editarlo o borrarlo con gran facilidad. Para

editarlo lo seleccionamos en la lista y pulsamos el botón Editar. Para borrarlo, selecciónelo en la lista y pulse el botón con forma de signo menos (-).

8. Haga clic sobre el botón Aceptar cuando haya terminado de realizar las modificaciones que crea oportunas.

NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web en dichos navegadores. Para ello, selecciónelo de la lista que aparece al escoger la opción Vista previa en el navegador del menú Archivo.

Page 38: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

37

2.12. Práctica: Diseño Web parte II

Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de almacenamiento para todos los documentos y archivos necesarios para crear una página Web. Al definir el sitio local, lo que haremos será establecer el lugar en el que pensamos almacenar todos los archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada sitio Web que creemos.

Recuerda…

El cuadro de diálogo Propiedades de la página del menú Modificar nos permitirá configurar una imagen como fondo.

Deberemos marcar la opción Permitir desproteger y proteger activo para activar el sistema de protección de páginas de Dreamweaver.

Las siglas FTP significa Protocolo de Transferencia de Archivos.

Cuando aparece un pequeños asterisco (*) junto al nombre de la página en la Barra del título significa que el documento contiene cambios que no han sido guardados.

Si activamos la categoría Datos locales del cuadro de diálogo Definición del sitio se activa la Caché mejoraremos la velocidad de las tareas de administración de vínculos y sitios.

Los métodos básicos de distribución de las páginas son:

-Estructura Libre

-Estructura centralizada

-Estructura jerárquica

Para previsualizar un documento HTML en el navegador que tenemos configurado como predeterminado pulsamos la opción Vista previa en el navegador del menú Archivo.

El tiempo máximo que debe estar desactiva la conexión con el servidor para que Dreamweaver lo desconecte es de 30 minutos.

Page 39: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

38

3. TRABAJO CON TEXTO

A pesar del hecho incuestionable de que hoy en día Internet se ha convertido en un medio visual, la mayoría de la información que nos ofrece es aún textual. En este capítulo, vamos a aprender la forma más rápida de añadir y editar texto con Dreamweaver. También, a organizar los bloques de texto en nuestra página, así como, a crear estilos tanto HTML como CSS para aplicar un formato de texto.

3.1. Creación y colocación de textos

Crear y colocar textos en un documento de Dreamweaver es un acto muy sencillo, consiste en ubicar el cursor sobre la ventana de documento e introducir el texto por medio del teclado, o bien, copiar el texto desde otra aplicación y pegarlo en el documento de Dreamweaver.

Al colocar el texto en la ventana de documento, por defecto, éste adopta el formato establecido en la aplicación. Dreamweaver nos proporcionará una gran variedad de herramientas para modificar dicho formato, permitiéndonos cambiar el tamaño, fuente y color adaptándolo al diseño de nuestra página.

3.2. Encabezados y párrafos

Todo texto HTML está compuesto principalmente por encabezados y párrafos. Del mismo modo en que se muestran en un periódico los titulares para anunciar una historia o los subtítulos para resumirla, los encabezados en Dreamweaver serán utilizados para separar las distintas secciones principales de un documento HTML. Dreamweaver nos presenta seis niveles de encabezados cuya etiqueta en HTML es, donde n es un número del 1 al 6. El encabezado de mayor tamaño es <h1> y el de menor <h6>.

Los encabezados HTML, a diferencia de cualquier procesador de textos, no están vinculados a ningún tamaño específico en puntos, tienen un tamaño determinado y proporcional dependiendo en última instancia del explorador que estemos usando.

La mayor parte de páginas Web están compuestas generalmente por párrafos. Éstos, en HTML, se distinguen por el uso de la etiqueta <p>. En Dreamweaver se inicia uno nuevo cada vez que se pulsa la tecla INTRO en la ventana de documento.

Page 40: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

39

Aplicar una etiqueta de encabezado o párrafo a un texto

1. Sitúe el puntero del ratón en el párrafo o seleccione (resaltando) la parte del

texto que desee modificar.

2. En el menú Formato, seleccione la opción Formato de párrafo y en el

submenú que aparece, elija una opción.

3. Escoja uno de los seis niveles de encabezados que Dreamweaver le proporciona. Recuerde que el encabezado de mayor tamaño en HTML se etiqueta como <h1> y el de menor tamaño como <h6>.

4. Elija Párrafo para aplicar este formato a un bloque de texto. Recuerde que en HTML se etiqueta como <p>.

5. Seleccione Ninguno para quitar un formato de párrafo.

NOTA: También podrá aplicar etiquetas de párrafo o encabezado a un texto utilizando el cuadro de lista Formato del panel Propiedades.

Page 41: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

40

3.3. Asignar fuentes a un texto

Un diseñador gráfico, normalmente, puede utilizar tantas fuentes como tenga configuradas en su sistema. Los diseñadores de páginas Web, por el contrario, se encuentran con la limitación de que los navegadores sólo pueden mostrar fuentes que estén instaladas en el sistema del usuario, de no ser así, el navegador la reemplazará por una fuente que sí esté instalada.

En todas las partes del mundo, cada ordenador personal que fue fabricado en los últimos años incluye lo que se denomina Fuentes del sistema. Éstas son: Times New Roman, Courier New y Arial (para PC), y Times New Roman, Courier New y Helvetica (para MAC). Con el uso de estas fuentes, no tendremos.

NOTA: También es posible cambiar la fuente de texto usando la opción Fuente del menú Formato y seleccionando la serie de fuentes que desee en el menú desplegable que aparece.

Primeramente seleccionamos el texto que deseamos modificar, de nuestra página web. Abrimos el Panel de Propiedades y pulsamos CSS para mostrar los diferentes formatos de textos para aplicar: Fuentes, Tamaños, Negrita, Cursiva, alineaciones, etc.

Seleccionamos la Fuente que mejor nos convenga aplicar en nuestro documento y seguidamente se cambiará la fuente del texto.

Enlace vídeo: Asignar fuentes a un texto.

Page 42: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

41

3.4. Editar la lista de fuentes de Dreamweaver

A continuación, veremos los pasos que debemos seguir para editar la lista de fuentes de las que dispone Dreamweaver.

Primeramente nos vamos al menú Formato y pulsamos Fuente nos aparecerá un submenú y de ello seleccionamos Editar lista de fuentes. Seguidamente nos aparece una ventana de cuadro de diálogo para añadir o quitar los formatos de fuentes que viene predeterminado por Dreamweaver.

Con el botón de signo (+) se va añadiendo a la lista de fuentes las Fuentes elegidas provenientes de las Fuentes disponibles. Con el botón (-) se elimina la fuente seleccionada de las lista de fuentes.

Enlace vídeo: Editar la lista de fuentes de Dreamweaver.

3.5. Cambiar el color del texto

El color de texto de un documento, por defecto, será el predeterminado por el navegador del usuario, normalmente el negro. Sin embargo, con Dreamweaver podremos cambiarlo de modo que el nuevo color prevalezca sobre el establecido en el cuadro de diálogo Propiedades de la página. Los colores se expresan en HTML como valores hexadecimales o usando sus nombres. El valor hexadecimal se basa en el valor de la mezcla de los colores rojo, verde y azul y se representa por el símbolo almohadilla (#) seguido de 6 caracteres. Así por ejemplo, #FFFFFF es el valor hexadecimal correspondiente al color blanco.

Cambiar el color de un rango de texto en Dreamweaver:

1. Seleccione el texto al que desee modificar el color o sitúe el cursor donde quiera que

comience a aplicarse el cambio.

2. En el panel Propiedades realice una de las siguientes acciones:

Escriba el valor hexadecimal en el cuadro de edición Color del

texto.

Escriba un nombre de color (en inglés) en el cuadro de edición Color del

texto.

Page 43: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

42

Haga clic en la flecha desplegable de la muestra de color. Según vamos

desplazando el cursor por la paleta de colores, se va visualizando una

muestra del color en la esquina de la paleta junto al valor hexadecimal del

mismo. Realice su elección haciendo clic sobre el color que desee.

Cambiar el color de un rango de texto utilizando el selector de colores de Dreamweaver

1. Seleccione el texto al que desee modificar el color o sitúe el cursor donde quiera que

comience a aplicarse el cambio.

2. En el menú Formato, seleccione la opción Color. Se abre el cuadro de diálogo con el

mismo nombre.

3. Elija uno de los 48 colores estándar usando las muestras de color situadas a la izquierda

del cuadro de diálogo o utilice uno de los siguientes métodos:

Indique un color moviendo el selector de Matiz/Saturación y el

de Luminosidad.

Introduzca valores decimales en los campos de edición Rojo, Verde

y Azul o en los cuadros Matiz, Saturación y Luminosidad.

4. Si ha creado un color personalizado, podrá añadirlo a la paleta de colores actual haciendo

clic con el ratón sobre el botón Agregar a los colores personalizados. De este modo,

podremos añadir hasta 16 colores personalizados.

5. Haga clic sobre el botón Aceptar cuando haya finalizado.

Page 44: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

43

3.6. Alineación del texto

Dreamweaver es un programa que nos permite alinear fácilmente el texto. HTML soporta la alineación del texto respecto al margen izquierdo, derecho, justificado y al centro de la ventana del navegador.

Alinear un párrafo de texto en Dreamweaver

1. Coloque el cursor del ratón en el párrafo que desee alinear.

2. Diríjase al panel Propiedades.

3. Ahora haga clic con el ratón en uno de los cuatro botones de alineación: Alinear a la

izquierda, Alinear al centro, Alinear a la derecha y Justificar.

4. Compruebe los resultados con cada uno de ellos.

NOTA: También es posible alinear un párrafo de texto usando el comando Alinear del menú Formato, y seleccionando la opción que desee en el menú desplegable que aparece. Los cambios ofrecidos por la orden Justificar sólo serán apreciables en los párrafos.

Page 45: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

44

3.7. Sangrías

En el lenguaje HTML, debemos insertar la etiqueta <blockquote> cuando queramos aplicar un sangrado a un párrafo. Dreamweaver inserta, de forma automática, esta etiqueta al hacer clic sobre

el icono Blockquote del panel Propiedades.

Sangrar un párrafo

1. Coloque el cursor de texto en el párrafo que desee sangrar.

2. Haga clic en el botón Blockquote del panel Propiedades.

3. Si observamos el código de la página, podemos observar que se aplica la etiqueta

<blockquote>.

4. Para quitar un sangrado de texto, haga clic en el botón Quitar Blockquote de texto

del panel Propiedades. La etiqueta <blockquote> desaparece.

NOTA: También es posible utilizar las opciones Sangría y Anular sangría del menú Formato para aplicar sangrías a los párrafos.

3.8. Crear listas

Con Dreamweaver, creamos fácilmente listas numeradas, listas con viñetas y listas de definición a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de definición no emplean caracteres iniciales como puntos, guiones o números y suelen utilizarse en glosarios o descripciones.

Page 46: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

45

Crear una lista de texto ordenada

1. Coloque el cursor de texto donde desee comenzar la lista ordenada. 2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la opción

Propiedades. 3. Haga clic en el botón Lista ordenada del panel. Observe que, se muestra un número 1. en el

sitio donde colocamos el cursor. 4. Escriba el primer elemento de nuestra lista. 5. Pulse INTRO. Ahora, el siguiente número de la lista se sitúa en la siguiente línea junto al

número 2. 6. Repita los pasos anteriores para completar la lista. 7. Para finalizar la lista, pulse la tecla INTRO dos veces.

NOTA: Insertar una lista ordenada desde el menú Formato es muy fácil. Para ello, usaremos el comando Lista del menú Formato y seleccionaremos Lista ordenada en el menú desplegable que aparece.

Crear una lista de texto sin ordenar

Coloque el cursor de texto donde desee comenzar la lista ordenada.

Haga clic en el botón Lista sin ordenar del panel Propiedades. Observe que aparece un

marcador en el sitio donde colocamos el cursor.

Escriba el primer elemento de nuestra lista.

Pulse INTRO. Se muestra otro marcador en la siguiente línea.

Repita los pasos anteriores para completar la lista.

Para finalizar la lista, pulse la tecla INTRO dos veces.

NOTA: Insertar una lista con marcadores desde el menú Formato es muy fácil. Para ello, usaremos el comando Lista del menú Formato y seleccionaremos Lista sin ordenar en el menú desplegable que aparece.

3.9. Corrección ortográfica

Cometer errores ortográficos en el texto de nuestra página Web puede dar una mala impresión a los visitantes. Dreamweaver, al igual que cualquier procesador de texto, incluye un corrector ortográfico fácil de manejar, y que nos ahorrará esos desagradables momentos. Es una buena costumbre realizar una comprobación ortográfica de nuestra página Web antes de publicarla. La corrección que realiza Dreamweaver no tiene en cuenta las etiquetas HTML ni los valores de atributo, sólo corrige el texto escrito en la ventana del documento abierto. Dreamweaver comprueba el texto de la página Web usando dos diccionarios diferentes: uno estándar para el idioma seleccionado y otro personalizado, al que podremos ir añadiendo las palabras que creamos

oportunas.

Page 47: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

46

Realizar la corrección de un documento de Dreamweaver

1. Como norma general, sitúe el cursor del ratón al principio del documento antes de

ejecutar el corrector. De no hacerlo de este modo, puede que el corrector no compruebe la totalidad del texto del documento.

2. En el menú Comandos, seleccione la opción Ortografía o si lo prefiere pulse la combinación de teclas MAYÚS+F7.

3. Al abrirse el cuadro de diálogo con el mismo nombre, Dreamweaver ya ha localizado el primer error reconocido por el corrector que pueda haber en el texto. Esta palabra se seleccionará en la ventana de documento y aparecerá en el cuadro de

texto Palabra no encontrada en el diccionario.

4. Si observa con atención, una lista de sugerencias aparecerá en el cuadro con la

primera de ellas marcada e incluida a su vez en el cuadro de edición Cambiar por. Si Dreamweaver no encontrase ninguna sugerencia, este cuadro permanecería en blanco.

5. Si hallase la palabra correcta en la lista Sugerencias, selecciónela y haga clic sobre el botón Cambiar.

6. En caso contrario, escríbala en el campo de edición Cambiar por y pulse el botón Cambiar.

7. Automáticamente, Dreamweaver nos muestra el siguiente error, para que continuemos con la corrección.

8. Si un error se repite numerosas veces, podremos realizar todas las correcciones de la palabra sustituyendo ésta por la que seleccionemos en el cuadro Sugerencias pulsando el botón Cambiar todas.

9. Si desea ignorar una palabra encontrada por Dreamweaver, pulse Omitir u Omitir todas para continuar la búsqueda.

10. Al finalizar la búsqueda, aparecerá un mensaje indicándonos que la corrección ha terminado.

11. Pulse OK para concluir.

Page 48: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

47

NOTA: Si no comenzó una corrección ortográfica desde el principio del documento, al llegar al final, Dreamweaver le preguntará si desea continuar comprobando el resto del documento no corregido.

3.10. Insertar fechas en un documento de Dreamweaver

Dreamweaver nos proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.

Para introducir la fecha actual en un documento HTML se procede de la siguiente forma:

1. Coloque el cursor en el lugar donde se desea incluir la fecha. 2. Vaya al menú Insertar y pulse Fecha. 3. Seguidamente nos aparece un cuadro de diálogo para cumplimentar el formato de la fecha:

a. Formato de día. b. Formato de fecha. c. Formato de hora.

4. Una vez que hayamos dados los parámetros que nos interesa a la fecha pulsamos el botón Aceptar y nos aparece en el lugar elegido del documento la fecha.

Enlace vídeo: Insertar la fecha actual en un documento.

Page 49: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

48

3.11. Insertar caracteres especiales

A la hora de trabajar con un editor de páginas Web, cualquier usuario se limita a introducir el texto directamente con el teclado, consiguiendo una letra, número u otro carácter por cada tecla pulsada. ¿Qué ocurriría si necesitamos insertar un carácter que no aparece en el teclado? Gracias a Dreamweaver, podremos añadir caracteres especiales con un simple clic del ratón.

Añadir caracteres especiales en un documento de Dreamweaver

1. Coloque el cursor de texto en el lugar donde quiera insertar el carácter especial. 2. Haz clic sobre el menú Insertar y seleccione la opción HTML. En el submenú que aparece

escoja la opción Caracteres especiales para ver el desplegable de la imagen inferior.

3. En la lista que se muestra, haga clic en el carácter especial que desee insertar en el documento, o bien seleccione la orden Otro… y para acceder al cuadro de diálogo Insertar otro carácter.

4. Presione sobre el que desee y haga clic en Aceptar.

Page 50: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

49

NOTA: También podremos insertar caracteres especiales desde la categoría Texto del panel Insertar.

3.12. Insertar reglas horizontales

Las reglas horizontales (líneas) resultan de gran utilidad a la hora de separar bloques de texto y organizar mejor la información en un documento de Dreamweaver. Esencialmente, una regla horizontal es una línea recta que se extenderá a lo largo de toda la ventana de documento.

Colocar una regla horizontal

1. Coloque el cursor del ratón en el lugar donde vaya a situar la regla horizontal.

2. Centre su atención en el panel Insertar.

3. Asegúrese de que la categoría Común esté activa y haga clic sobre el botón Regla

horizontal.

NOTA: También es posible colocar reglas horizontales dirigiéndonos al menú Insertar, escogiendo la opción HTML y en el submenú que aparece pulsando sobre Regla horizontal.

Cambiar las dimensiones y la alineación de una regla horizontal

1. Seleccione la regla horizontal en la ventana de documento de Dreamweaver presionando sobre ella.

2. Centre su atención en el panel Propiedades. 3. Escriba valores dentro de los campos de edición An y Al para modificar las dimensiones

de la regla horizontal.

4. Para cambiar la alineación de una regla horizontal diríjase al desplegable Alinear y escoja Izquierda, Centro o Derecha (por defecto la opción activa es Predeterminada).

Page 51: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

50

3.13. Creación de estilos CSS

Un estilo es un grupo de atributos de formato que controla la apariencia de un rango de texto en un documento. Una hoja de estilos CSS es un archivo de texto externo, que contiene estilos y especificaciones de formato, que se puede emplear para controlar muchos documentos al mismo tiempo. La ventaja de utilizar una hoja de estilos CSS sobre un estilo HTML reside en que, además de estar vinculada a múltiples documentos cuando se actualiza o cambia un estilo CSS, se actualiza automáticamente el formato de todos los documentos que utilicen esa hoja de estilos.

NOTA: Cuando se crea un estilo clase, aparece en el panel CSS y en la orden de submenú Estilos CSS del menú Texto.

Crear una hoja de estilo CSS personalizada

Para crear una hoja de estilo CSS personalizada accederemos al menú Ventana y pulsamos Estilo CSS o las teclas combinadas Mayus+F11. Seguidamente nos aparece un cuadro de diálogo para definir y crear una nueva regla de estilo CSS:

Dentro de los tipos de selector contextual para la regla CSS tenemos:

Clase (puede ser aplicable a cualquier elemento HTML).

ID (solo es aplicable a un elemento HTML)

Etiqueta (redefine un elemento HTML)

Compuesto (basado en la selección)

En el Nombre del selector introduciremos un nombre para la regla definida con un punto por delante.

En el punto Definición de regla elegiremos donde se va a definir la regla:

Sólo en este documento (Se define en el encabezamiento del documento el estilo CSS).

En un documento aparte. (Se crea una hoja de estilo externa con formato *.css)

Page 52: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

51

Cuando pulsamos Aceptar aparece una nueva ventana de diálogo, Definición de regla CSS, que nos permite establecer y configurar los parámetros de las diferentes categorías: Tipo, Fondo, Bloque, Cuadro, Borde, Lista, Posición, Extensiones y Transición.

Cada una de las diferentes categorías posee un cuadro de diálogo que permite configurar los parámetros relacionados con esa categoría. Cuando pulsamos Aceptar se nos guarda, toda la configuración, en el archivo de hoja de estilo que hayamos creado previamente en el Nombre del selector. Si pulsamos Aplicar se aplicará directamente sobre la página que estamos trabajando.

Enlace vídeo: Crear una hoja de estilos CSS personalizada.

Aplicar un estilo CSS personalizado

Se puede aplicar directamente desde el cuadro de diálogo de Definición de regla CSS para…, pulsando el botón Aplicar.

Desde el panel Propiedades, para ello, abrimos el panel de Propiedades ( Ventana Propiedades) y pulsamos el botón CSS y seleccionamos en la Regla de destino el estilo que hemos definido previamente, una vez aplicado, se observará el cambio que se produce en nuestra página conforme a las fuentes de letra, tamaños, colores, etc., que hayamos configurado.

Enlace vídeo: Aplicar un estilo CSS personalizado.

Page 53: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

52

3.14. Buscar y reemplazar texto

Adobe Dreamweaver nos permite buscar texto dentro de un documento HTML pudiéndolo reemplazar rápidamente por el texto que queramos. En la siguiente explicación, veremos de forma

detallada la totalidad del proceso a seguir para realizar esta operación.

Buscar y reemplazar un texto dentro de un documento de Dreamweaver

1. En el menú Edición, seleccione la opción Buscar y reemplazar o pulse la combinación de

teclas CTRL+F. Se abre el cuadro de diálogo con el mismo nombre.

2. Pulse el menú desplegable Buscar en para especificar los archivos en los que desea buscar:

Documento actual: Limita la búsqueda al documento activo.

Texto seleccionado: Limita la búsqueda al texto que está seleccionado en el

documento activo.

Documentos abiertos: Busca en todos los documentos que están abiertos.

Carpeta: Limita la búsqueda a una carpeta específica. Después de seleccionar

Carpeta, haga clic en el icono de carpeta para localizar y seleccionar la carpeta

que desea buscar.

Archivos seleccionados en el sitio: Limita la búsqueda a los archivos y las

carpetas seleccionadas en el panel Archivos.

Sitio local actual completo: Amplía la búsqueda a todos los documentos HTML

almacenados en el sitio activo.

3. En el cuadro de edición Buscar, escriba el texto que desee localizar.

4. Active Coincidir mayúsculas y minúsculas para limitar la búsqueda al texto que coincida

exactamente con el uso de mayúsculas y minúsculas del texto buscado.

5. Active Utilizar expresión regular si quiere considerar en la búsqueda algunos caracteres y

cadenas cortas de búsqueda como operadores de expresiones regulares.

6. Pulse el botón Buscar siguiente para localizar la primera cadena de texto coincidente con la

búsqueda establecida. En la ventana de documento se resalta el resultado de la búsqueda.

7. Si desea localizar todas las cadenas de texto coincidentes con la búsqueda establecida, pulse

el botón Buscar todos. El cuadro de diálogo se amplía mostrándonos una lista con todas las

coincidencias localizadas.

8. En el cuadro de edición Reemplazar, escriba el texto por el que desee sustituir la búsqueda

realizada.

9. Para finalizar, pulse el botón Reemplazar o Reemplazar todos dependiendo de si pretende

cambiar todas las palabras encontradas o sólo la búsqueda seleccionada.

Page 54: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

53

Recuerda…

Seleccionando la opción Formato de párrafo del menú Texto podremos aplicar etiquetas de párrafo o encabezado a un texto.

La combinación de teclas MAYÚS+F7 se abre el cuadro de diálogo que nos permitirá corregir un texto en Dreamweaver.

La herramienta Reglas horizontales podemos utilizar para organizar mejor la información en un documento de Dreamweaver.

Fuentes del sistema se le denomina al conjunto de fuentes que Dreamweaver aplica a los textos de forma predeterminada.

Mediante la opción Buscar y reemplazar es posible localizar un texto determinado en un documento de Dreamweaver y reemplazarlo por otro.

Mediante el grupo Texto de la Barra de herramientas Insertar, actuamos en Dreamweaver si queremos insertar un carácter que no aparece en el teclado.

Page 55: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

54

4. ESTILOS CSS

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. También permiten, como veremos a lo largo del tema, definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados, párrafos, enlaces, etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo. También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a los que apliquemos esa clase.

4.1. Hojas de estilos en cascada

Las hojas de estilos en cascada CSS son un conjunto de reglas de formato que determinan el aspecto del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. El contenido de la página reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo o en otra parte del documento HTML. La separación del contenido y la presentación hace que resulte mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio.

El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que desea para la página. Con los estilos CSS, puede controlar numerosas propiedades del texto, entre ellas las fuentes y los tamaños de fuente específicos; negrita, cursiva, subrayado y sombras de texto; color de texto y de fondo; color y subrayado de vínculos; etc. Si utiliza estilos CSS para controlar las fuentes, también conseguirá un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores.

4.2. Estilos CSS

Una regla de formato CSS consta de dos partes: el selector y la declaración. El selector es un término que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el código comprendido entre las llaves ({}) es el

bloque de declaraciones:

Cada declaración consta de dos partes: la propiedad y el valor. En el ejemplo anterior podemos ver la propiedad font-family y el valor Helvetica. En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, la fuente Helvética y el estilo negrita.

Page 56: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

55

El estilo reside en un lugar independiente del texto al que aplica formato. Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez. De este modo, los estilos CSS proporcionan una capacidad de actualización extremadamente sencilla. Al actualizar de una regla CSS en un lugar, el formato de todos los elementos que usan ese estilo definido se actualiza automáticamente con el nuevo estilo.

En Dreamweaver, pueden definirse los siguientes tipos de estilos:

Los estilos de clase: permiten aplicar propiedades a cualquier elemento o elementos de la página.

Los estilos de etiquetas HTML: redefinen el formato de una determinada etiqueta, como por ejemplo h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.

Los estilos avanzados: redefinen el formato de una determinada combinación de elementos o de otros selectores permitidos por el CSS. Los estilos avanzados también redefinen el formato de las etiquetas que contienen un atributo id específico.

4.3. Crear un estilo personalizado

Con Adobe Dreamweaver, las características que apliquemos a un texto a través del panel de propiedades CSS crearán automáticamente estilos CSS aunque deberemos especificar a qué elementos afectará. Los estilos CSS pueden residir en las ubicaciones siguientes:

Hojas de estilos CSS externas: Son un conjuntos de reglas CSS almacenados en un archivo *.css independiente externo. Este archivo se asocia a una o varias páginas de un sitio Web mediante un vínculo o una regla situada en la etiqueta <HEAD> de un documento.

Hojas de estilos CSS internas (o incrustadas): Son un conjunto de reglas CSS incluidos en una etiqueta <STYLE> de la sección <HEAD> de un documento HTML.

Estilos en línea: Se definen dentro de instancias específicas de etiquetas en un documento HTML. No se recomienda el uso de estilos en línea salvo si pretendemos crear un estilo que afecte a un único elemento.

NOTA: Dreamweaver reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS. Dreamweaver también representa la mayoría de los estilos aplicados directamente en la vista Diseño. Algunos estilos CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape, Opera y Apple Safari u otros navegadores, mientras que otros no son compatibles actualmente con ningún navegador.

Page 57: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

56

Crear un estilo en línea

Accedemos al panel Propiedades y pulsamos el botón CSS, nos situamos en la casilla Regla de destino y seleccionamos Nuevo estilo en línea, seguidamente pulsamos el botón Editar regla y nos aparece un cuadro de diálogo de Definición de regla CSS para…

Enlace vídeo: Crear un estilo en línea.

Crear una regla de estilo

Para crear una regla de estilo accederemos al panel de Propiedades y pulsamos el botón de Estilo CSS o las teclas combinadas Mayus+F11. Seguidamente seleccionamos en Regla de destino la opción Nueva regla CSS y pulsamos el botón Editar regla nos aparece un cuadro de diálogo para definir y crear una nueva regla de estilo CSS:

Page 58: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

57

Dentro de los tipos de selector contextual para la regla CSS tenemos:

Clase (puede ser aplicable a cualquier elemento HTML).

ID (solo es aplicable a un elemento HTML)

Etiqueta (redefine un elemento HTML)

Compuesto (basado en la selección)

En el Nombre del selector introduciremos un nombre para la regla definida con un punto por delante.

En el punto Definición de regla elegiremos donde se va a definir la regla:

Sólo en este documento (Se define en el encabezamiento del documento el estilo CSS).

En un documento aparte. (Se crea una hoja de estilo externa con formato *.css)

Cuando pulsamos Aceptar aparece una nueva ventana de diálogo, Definición de regla CSS, que nos permite establecer y configurar los parámetros de las diferentes categorías: Tipo, Fondo, Bloque, Cuadro, Borde, Lista, Posición, Extensiones y Transición.

Cada una de las diferentes categorías posee un cuadro de diálogo que permite configurar los parámetros relacionados con esa categoría. Cuando pulsamos Aceptar se nos guarda, toda la configuración, en el archivo de hoja de estilo que hayamos creado previamente en el Nombre del selector. Si pulsamos Aplicar se aplicará directamente sobre la página que estamos trabajando.

Enlace vídeo: Crear una regla de estilo

Page 59: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

58

4.4. Definir un estilo CSS

Una vez creado un estilo, podremos definir las propiedades de reglas CSS, como la fuente del texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de las listas.

Editar un estilo CSS

Para editar un estilo CSS, nos vamos al menú principal Ventana y pulsamos Estilos CSS. Nos aparecerá un menú de Estilo CSS con las características actuales que posee: Familia de letras, Tamaño en pixel, texto decorado, color, etc. Nos permite ir directamente al código, dividiendo la página, donde se encuentra todas las etiquetas con los valores establecidos en dicha página web.

En la parte inferior se muestra las propiedades del estilo seleccionado. Se podrá añadir o modificar los valores que vienen asignados, apareciendo, a la vez, los cambios en los códigos de estilo.

Enlace vídeo: Editar un estilo CSS

Page 60: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

59

4.5. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo. Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases.

Aplicar un estilo CSS

1. En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el

punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo).

2. En el panel Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.

3. Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del menú Establecer clase.

4. Todas las reglas disponibles aparecen al desplegar el submenú Estilos CSS del menú Formato.

NOTA: La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase aparecerá junto al nombre de la etiqueta, separada por un punto.

4.6. Exportar estilos

Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos de una forma rápida.

Exportar un estilo CSS

1. Utilizamos el panel Estilos CSS el cual podremos abrir de una forma rápida pulsando la

combinación de teclas MAYÚS+F11.

Page 61: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

60

2. En la parte superior del panel asegúrese que este activada la vista Todo. 3. En la parte central aparecen agrupados en <style> los estilos creados en la página. 4. Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono

de la esquina superior derecha) seleccionamos Mover Reglas CSS.

5. En el cuadro de diálogo Mover a hoja de estilos externa encontramos dos opciones para ubicar los estilos:

Hoja de estilos: nos permite seleccionar una hoja ya existente. Las reglas se añadirán a ella.

Una nueva hoja de estilos...: creará una hoja nueva para las reglas exportadas. Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma carpeta que las páginas.

6. Para finalizar pulse el botón Aceptar para guardar la hoja de estilos.

4.7. Vincular una hoja de estilos

Si queremos utilizar una hoja de estilos ya existente en nuestra página Web, debemos vincularla.

Vincular una hoja de estilo CSS

1. Nos dirigimos al menú Formato y seleccionamos la opción Estilos CSS y en el nuevo

submenú que aparece escogemos la opción Adjuntar hoja de estilos.

2. Utilice el botón Examinar para localizar el archivo *.css que desee vincular o escriba la ruta de la hoja de estilos en el cuadro Archivo/URL.

3. En Añadir como, seleccione una de las siguientes opciones: Para crear un vínculo entre el documento actual y la hoja de estilos

externa, active la opción Vincular. Si lo que desea es anidar la hoja de estilo, active la opción Importar.

4. En el menú emergente Media, especifique el medio de destino de la hoja de estilos. 5. Haga clic en el botón Vista previa para verificar que la hoja de estilos aplica los estilos

que desea en la página actual. 6. Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para

eliminar la hoja de estilos. La página recuperará su aspecto anterior. 7. Para finalizar haga clic en Aceptar.

Page 62: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

61

5. IMÁGENES

En un principio, Internet nació como un medio de difusión de texto entre científicos y militares estadounidenses. En la actualidad, Internet se ha convertido en un medio visual enfocado a todo tipo de usuarios. A lo largo de este capítulo, veremos que la potencia de Dreamweaver es incluso mayor a la hora de usar su entorno visual para introducir imágenes. Conocerá los formatos gráficos más comunes de la red, aprenderemos a insertar imágenes y a editarlas usando los distintos métodos que nos proporciona el programa.

5.1. Formatos de gráficos Web

Lo primero y más importante que necesitamos saber a la hora de trabajar con formatos de imágenes para la Web es que, sin la ayuda de plug-ins, ésta sólo soporta tres tipos de imágenes: el formato JPEG, el formato GIF y el formato PNG. Los dos primeros son reconocidos por la totalidad de exploradores y el tercero cada vez se encuentra más integrado en Internet.

GIF (Graphics Interchange Format)

Fue desarrollado originalmente por CompuServe a finales de los años 80 para solucionar el problema de incompatibilidad entre plataformas.

Los archivos GIF son imágenes de mapa de bits que utiliza una paleta de 256 colores como máximo, por eso, este formato suele ser usado para imágenes simples con colores planos (dibujos y logotipos) y son generalmente de un tamaño reducido.

JPG (Joint Photo Graphic Experts Group)

Fue desarrollado con el fin de manejar imágenes fotográficas. La fuerza principal de este tipo de imágenes es que pueden trabajar con millones de colores.

Para hacer que este formato sea manejable se ha de comprimir tal cantidad de colores, eliminando lo que los algoritmos consideren información redundante. Cuanto mayor sea la compresión del archivo, menor será su resolución.

PNG (Portable Network Graphic)

Fue desarrollado por Macromedia y combina la compresión de los archivos GIF con los millones de colores de las imágenes JPEG, por lo tanto, soporta color indexado (256 colores), escala de grises, imágenes de color verdadero (millones de colores) y transparencias.

El problema del uso de este formato es que, hasta hace poco, los navegadores sólo lo reconocían mediante la utilización de plugins. Dreamweaver es de los primeros programas que permite trabajar con archivos PNG de un modo natural, visualizándose en la ventana de documento del programa, igual que un archivo GIF o JPEG.

Lo habitual es utilizar los formatos GIF o PNG para pequeños gráficos, normalmente elementos del diseño o imágenes simples, y el formato JPG para fotografías, sean del tamaño que sean. Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra página pueda ver las imágenes.

Page 63: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

62

5.2. Colocación de imágenes

Dreamweaver nos permite abrir cualquier tipo de archivo guardado en formato GIF, JPEG o PNG para colocarlo en la ventana de documento.

Insertar una imagen en la ventana de documento de Dreamweaver

Para insertar una imagen nos vamos al menú principal Insertar y pulsamos Imagen o Ctrol+Alt+I se abre una ventana para seleccionar una imagen en nuestro disco local. Seleccionamos la imagen y le damos Aceptar, se incluirá en el lugar donde está situado el cursor del ratón.

Otra opción es ir al menú de Herramientas con la categoría Común habilitada y pulsar directamente en el icono de Imagen. Para ello, debe de estar activada esta opción común.

Enlace vídeo: Insertar una imagen en la ventana de documento de Dreamweaver.

NOTA: Aparece una ventana para seleccionar el origen de la imagen para insertarla en el documento Dreamweaver.

Page 64: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

63

5.3. Editar imágenes

Dreamweaver es una completísima herramienta de creación de páginas Web, y no un programa de edición de gráficos. Pero en muchas ocasiones, al colocar una imagen en un documento nos daremos cuenta de que ésta debe ser modificada. Dreamweaver nos permitirá especificar el editor de gráficos que desee utilizar.

Especificar un editor de gráficos externos desde Dreamweaver

Para ello accederemos al menú principal Edición y pulsamos la opción Editar con Editor Externo. Nos aparece un cuadro de diálogo de preferencias, elegimos dentro de la categoría Tipos de archivo/Editores y los archivos y editores de código externo.

Seleccionamos la extensión para el editor externo, por ejemplo .jpg, y pulsamos el botón de (+) en Editores y nos aparece una ventana para seleccionar el editor externo para abrir archivos con esa extensión. Seleccionamos el editor externo y pulsamos Abrir, se nos añade directamente en el cuadro Editores y pulsamos Convertir en principal y este editor estará predeterminado para abrir archivos jpg.

Enlace vídeo: Especificar un editor de gráficos externo desde Dreamweaver.

Page 65: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

64

Editar una imagen usando un editor externo

Una vez que hemos seleccionado y establecido el editor de grafico externo en la opción Preferencias, del menú Edición y, seleccionamos una imagen de nuestro documento Dreamweaver, nos vamos al panel de Propiedades y pulsamos el icono Editar, seguidamente se abre el programa editor de gráficos y nos permitirá modificar la imagen. Una vez modificada se aceptará guardar los cambios y al visualizarla en Dreamweaver se apreciará los cambios realizados en la imagen.

Enlace vídeo: Editar una imagen usando un editor externo.

5.4. Cambiar el tamaño de las imágenes

La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores reconstruyen las páginas más rápido si conocen estos atributos. Estos valores, expresados en píxeles, son incluidos en el código HTML de un documento al insertar una imagen.

Redimensionar una imagen desde Dreamweaver es realmente fácil. Los campos de edición Ancho y Alto del panel Propiedades muestran el ancho y alto actual de una imagen. Cambiando el tamaño se restablecen los atributos width y height en el código, pero no afectaremos al tamaño del archivo que no se verá influenciado por el cambio efectuado.

Page 66: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

65

Redimensionar una imagen utilizando el panel Propiedades

1. Seleccione la imagen que quiera redimensionar haciendo clic sobre ella con el

puntero del ratón.

2. Introduzca unos nuevos valores de anchura y altura en los campos de

edición Ancho y Alto del panel Propiedades. Recuerde que las dimensiones se

representan en píxeles.

3. Las dimensiones de la imagen se modificarán automáticamente cuando pulsemos la

tecla INTRO o movamos el cursor fuera del campo editado.

Redimensionar una imagen usando los manejadores

1. Seleccione la imagen que quiera redimensionar haciendo clic sobre ella con el

puntero del ratón.

2. Haga clic y arrastre uno de los manejadores para redimensionar la imagen. Si al

mismo tiempo, mantiene pulsada la tecla MAYÚS, mantendremos las proporciones

de anchura y altura de la imagen.

3. Para finalizar, suelte el ratón cuando crea que las dimensiones son las deseadas.

Puede ayudarse observando los campos de edición Ancho y Alto del panel

Propiedades.

Page 67: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

66

5.5. Uso de la etiqueta ALT

La etiqueta <alt> es probablemente uno de los mayores rasgos distintivos que podremos usar con las imágenes que colocamos en Dreamweaver. Esencialmente, la etiqueta <alt> nos permite proporcionar información extra sobre una imagen. Esta información de texto sustituirá a la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente. En algunos navegadores, este texto también será visible al colocar el cursor del ratón sobre la imagen que tenga asociada esta etiqueta.

Añadir una etiqueta <alt> a una imagen

1. Seleccione la imagen a la que quiera añadir la etiqueta <alt>.

2. Centre su atención en el panel Propiedades.

3. Escriba el texto que desee en el campo de edición Alt situado en la parte superior

derecha del panel Propiedades.

5.6. Alineación de imágenes con texto

Ahora que ya sabe cómo justificar imágenes en un documento, veremos la forma de alinear imágenes con texto en Dreamweaver. A diferencia de otras aplicaciones, fundamentalmente editores de texto, HTML no ofrece ningún método para ajustar texto alrededor del contorno de una imagen. Lo que sí podremos hacer con Dreamweaver será alinear una imagen con texto, con otra imagen o con otros elementos de la misma línea.

Page 68: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

67

Alinear una imagen dentro de un documento HTML

1. Presione sobre la imagen para seleccionarla.

2. Centre su atención en el panel Propiedades y despliegue el cuadro de lista

desplegable Alinear. Encontrará opciones como:

Predeterminado: Suele especificar una alineación con la línea de base. El valor

predeterminado puede variar en función del navegador del visitante del sitio.

Línea de base: Alinea la línea de base del texto (u otro elemento) con la parte

inferior del objeto seleccionado.

Superior: Alinea una imagen con la parte superior del elemento más alto

(imagen o texto) de la línea actual.

Medio: Alinea la línea de base del texto con el punto medio del objeto

seleccionado.

Inferior: Alinea una imagen con la parte inferior del elemento más alto

(imagen o texto) de la línea actual.

Texto superior: Alinea el objeto seleccionado con la parte superior del

carácter más alto de la línea de texto.

Medio absoluta: Alinea en relación con el punto medio absoluto de la línea

actual.

Inferior absoluta: Alinea en relación con el punto inferior absoluto de la línea

actual.

Izquierda: Sitúa el objeto seleccionado en el margen izquierdo, ajustando a la

derecha el texto que está a su alrededor.

Derecha: Sitúa el objeto en el margen derecho, ajustando a la izquierda el

texto que está a su alrededor.

Page 69: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

68

5.7. Insertar bordes

Durante el proceso creativo, suele ser necesario añadir un borde sólido alrededor de una imagen para poder distinguirla de otras colocadas en el mismo documento. El atributo borde nos permite situar un borde rectangular de un solo color rodeando un gráfico. La anchura de este borde se mide en píxeles y el color de éste es el mismo que el del texto predeterminado del documento.

Añadir un borde a una imagen en Dreamweaver

1. Seleccione la imagen a la que quiera añadir un borde. 2. Centre su atención en el campo Borde del panel Propiedades. 3. Para finalizar, introduzca un valor en píxeles en el campo de edición y

presione INTRO para aplicar los cambios.

Por defecto, el color del borde que aparece es el mismo que el color de texto predeterminado. Si va al cuadro de diálogo Propiedades de la página y cambia el color de texto, cambiaremos de forma automática el color del borde añadido a la imagen seleccionada.

5.8. Insertar imágenes de sustitución

Las imágenes de sustitución son uno de los efectos más populares en la realización de páginas Web. Una imagen de sustitución no es más que una imagen que cambia cuando sitúa el puntero del cursor sobre ella. En verdad trabajamos con dos imágenes: la imagen principal, que es la que aparece al cargarse inicialmente la página y la imagen que la sustituye, que aparece al colocar el puntero del ratón sobre la primera.

NOTA: Ambas imágenes deben de ser del mismo tamaño. Si son distintos, Dreamweaver cambia automáticamente el de la segunda para ajustarlo a las dimensiones de la primera.

Page 70: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

69

Añadir una imagen de sustitución

Si el panel de herramientas no se encuentra activo, diríjase al menú principal Ventana y pulse Insertar, se abrirá el panel de herramientas y activamos la opción Común. Dentro de esta opción común hay un icono imagen con la opción Imagen de sustitución clic aquí.

Nos aparece una ventana de diálogo para establecer la imagen original y la imagen de sustitución. Para ello, tenemos que incluir la dirección local donde se encuentran ambas imágenes y la dirección URL (opcional) para que cuando pinchemos sobre la imagen accedamos a esa dirección web. Una vez configurado pulsamos Aceptar y comprobar en un navegador como cambian las imágenes cuando pasamos el cursor del ratón sobre ella.

Enlace vídeo: Añadir una imagen de sustitución.

5.9. Practica: Diseño Web parte III

A lo largo de la siguiente práctica, vamos a comenzar a trabajar con imágenes y texto para completar la página de inicio de nuestra Web.

Aprenderemos a colocar imágenes y a editarlas directamente con el programa que configuremos en Dreamweaver; añadiremos un borde a la imagen y utilizaremos la etiqueta para proporcionar información adicional sobre la Web.

Page 71: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

70

Recuerda…

Los siguientes formatos de imágenes son soportados por Dreamweaver: - PNG. - JPEG. - GIF.

La tecla MAYÚS deberemos mantenerla pulsada para que al redimensionar una imagen usando los manejadores ésta mantenga sus proporciones de anchura y altura.

El formato de imagen PNG fue desarrollado por Macromedia combinando la compresión de los archivos GIF con los millones de colores de las imágenes JPEG.

El panel Propiedades lo utilizaremos para editar una imagen con Dreamweaver.

La etiqueta alt nos permitirá proporcionar información extra sobre una imagen, y sustituirá a la imagen en los navegadores que sólo admiten texto.

Con el color de texto predeterminado se representan los bordes en Dreamweaver por defecto.

Page 72: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

71

6. CREACIÓN DE MARCOS

Los marcos constituyen una de las herramientas de diseño de páginas Web más potente. Un conjunto de marcos es una página Web que está dividida en páginas de HTML estáticas y cambiantes. El uso de marcos y conjuntos de marcos se ha extendido enormemente y su tecnología es admitida por los navegadores de principal uso en Internet. Hoy en día, cualquier diseñador de páginas Web que pretenda ser competitivo necesita tener un cierto conocimiento acerca de los marcos.

6.1. Utilización de marcos

Los marcos se usan en Dreamweaver para mejorar la navegación por una página Web. La mayoría de las páginas que se pueden visitar en Internet, suelen utilizar un marco para albergar el menú de navegación y otro para el contenido de la página. Cuando el visitante de la página hace clic en un elemento del menú, el vínculo aparece en el marco destinado a mostrar el contenido sin que el menú de navegación se vea afectado. De este modo, el visitante podrá orientarse fácilmente en el sitio.

Cada uno de los marcos de una página, contiene un documento HTML individual. Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

Actualmente los marcos están cayendo en desuso ya que aunque son realmente prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y posicionado es crucial para una web.

6.2. Creación de marcos y conjuntos de marcos

Los marcos pueden ser una excelente herramienta para los diseñadores de páginas Web, pero hemos de tener en cuenta que deben aplicarse correctamente para que funcionen.

En la siguiente aplicación, se explicarán con detalle los métodos que nos ofrece Dreamweaver para dividir nuestra página Web en marcos y hacer así que nuestro propio conjunto de marcos no falle.

NOTA: Podemos cambiar fácilmente la posición de cualquier borde del conjunto de marcos haciendo clic y arrastrando por la ventana de documento.

Crear un conjunto de marcos por medio del ratón

Seleccionamos en el menú principal la opción Ver, seguidamente hacemos clic en Ayuda Visuales y nos sale un submenú con varias opciones, seleccionamos y pulsamos Borde de marco.

Page 73: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

72

Los bordes se encuentran en los lados laterales verticales y horizontales sin verse en el documento. Para ello, nos situamos en uno de los bordes derechos o izquierdos, superior o inferior y con el cursor del ratón y pulsando a la misma vez la tecla <Alt> vamos desplazando el marco hacia el centro del documento

En el panel de Propiedades se muestran el conjunto de marcos, filas y columnas, el tamaño de los bordes, ancho, color, etc.

Enlace vídeo: Crear un conjunto de marcos por medio del ratón.

6.3. Crear un conjunto de marcos anidado

Un conjunto de marcos que está dentro de otro recibe el nombre de conjunto de marcos anidado. Cada nuevo conjunto de marcos creado incluye su propio documento HTML de conjunto de marcos y sus documentos de marcos. La mayoría de páginas Web con marcos utilizan, en realidad, marcos anidados; al igual que varios de los conjuntos de marcos predefinidos en Dreamweaver.

Crear un conjunto de marcos anidado

En el menú de herramientas y en la opción Diseño seleccionamos Marcos anidados.

Enlace vídeo: Crear un conjunto de marcos anidado.

Page 74: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

73

6.4. Modificar el tamaño de los marcos

Dreamweaver nos proporciona dos métodos para modificar las dimensiones de los marcos: uno, lo vimos anteriormente y consiste en arrastrar los bordes con el ratón directamente por la ventana de documento y dos, que será más preciso y consistirá en introducir los valores utilizando el panel Propiedades.

Establecer los tamaños de los marcos usando el panel Propiedades

1. Haga clic en el borde de un marco para seleccionar el conjunto de marcos que desee

modificar. Recuerde que los bordes de marcos deben estar visibles en la ventana de

documento.

2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventanay escoja la

opción Propiedades

3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina inferior

derecha del panel Propiedades. De este modo, veremos más propiedades del

conjunto de marcos seleccionado.

4. En el cuadro Selección Fila Col., haga clic en la fila o columna que desee modificar.

5. Para especificar cómo debe asignarse el espacio cuando se cambia el tamaño de la

ventana del navegador, introduzca un número en el campo de edición Valor y elija

una unidad entre las siguientes opciones:

Píxeles: Establece el tamaño de la columna o fila seleccionada en un

valor absoluto.

Porcentaje: Indica que el marco actual debe representar un porcentaje

especificado del conjunto de marcos al que pertenece.

Relativo: Indica que, al marco actual, se le dará un espacio

proporcional al asignado a otros marcos.

Page 75: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

74

6.5. Modificar los bordes de un conjunto de marcos

De forma predeterminada, Dreamweaver ajusta sus conjuntos de marcos para que todos tengan bordes de 6 píxeles de grosor y un color gris. En la siguiente explicación, veremos cómo podremos alterar el color, cambiar el grosor, o eliminar los bordes de un conjunto de marcos.

Definir los bordes de un conjunto de marcos:

1. Seleccione el conjunto de marcos haciendo clic en el borde de un marco en la ventana

de documento.

2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la

opción Propiedades.

3. Utilice el cuadro de lista desplegable Bordes para controlar los bordes de los marcos

contenidos en el conjunto de marcos seleccionado:

Elija Sí para mostrar los bordes en color tridimensional.

Elija No para mostrar los bordes planos y en color gris.

Elija Predeterminado para que el navegador determine cómo se

mostrarán los bordes.

4. Utilice el campo de edición Ancho para especificar el ancho de los bordes en el

conjunto de marcos actual. Introduzca el valor 0 para especificar que no desea

bordes.

5. Para finalizar, emplee el área Color del borde para establecer un color para todos los

bordes en el conjunto de marcos actúa.

Page 76: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

75

6.6. Utilización del panel Marcos

El panel Marcos nos proporcionará una representación visual precisa de todos los marcos de un documento. Dentro de él, podrá ver como en cada marco se muestra su nombre de forma individual. Los conjuntos de marcos introducidos dentro de otro conjunto de marcos se representan mediante un borde más intenso.

Trabajar con el panel Marcos

1. Abra el panel Marcos dirigiéndose al menú Ventana y seleccionando la

opción Marcos.

2. Para trabajar con un marco, pulse directamente sobre la representación del marco

que desee seleccionar dentro del panel. Si el panel Propiedades está abierto, reflejará las propiedades del marco elegido.

3. Para nombrar un marco, introduzca el nombre que desee en el cuadro de edición que se encuentra en el área Nombre de marco del panel Propiedades.

Recuerde que los nombres de marco presentan las siguientes restricciones:

Use palabras sin espacios. No use caracteres especiales como comillas, signos de interrogación,

etc. El guión bajo sí está permitido, exceptuando ciertos nombres

reservados.

6.7. Abrir una página Web en un marco

Para utilizar vínculos en marcos, deberá establecer un destino para el vínculo. El destino será el marco en el que se abrirá el contenido vinculado.

No tendremos que crear todas las páginas en los marcos partiendo de cero. Si tenemos seleccionado un marco y tenemos abierto el panel Propiedades, simplemente escribiremos el vínculo en el cuadro de texto Origen o pulsaremos sobre el icono de la carpeta para buscar un archivo.

Page 77: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

76

6.8. Añadir barras de desplazamiento

Una de las cualidades que han dado mayor aceptación a los marcos es la posibilidad de introducir barras de desplazamiento para cada marco. Estas barras de desplazamiento se usan cuando la ventana de navegador es demasiado pequeña para mostrar toda la información contenida en un marco del documento. Hay cuatro opciones seleccionables en la lista desplegable Desplazamiento dentro del panel Propiedades.

Predeterminado: Deja el uso de barras de desplazamiento en manos del explorador. Sí: Fuerza la aparición de barras de desplazamiento sin importar la cantidad de

información de un marco. No: Inhabilita las barras de desplazamiento. Automático: Activa las barras de desplazamiento si el contenido del marco se extiende

horizontal o verticalmente más allá de lo que la ventana del explorador puede mostrar.

6.9. Destinar la información de un vínculo

Uno de los principales usos de los marcos es el de controlar la navegación de una página Web. Un marco puede actuar como centro de la navegación de nuestra página, ofreciendo vínculos a otras páginas de nuestro sitio. Cuando el usuario selecciona uno de los vínculos, la página solicitada aparece en otro marco de la página, el cual podrá manejarse independientemente del marco de navegación. Anteriormente, estuvimos viendo que había ciertos nombres de marcos que no se podían utilizar porque se encontraban reservados. Son los cuatro nombres reservados para las partes de un conjunto de marcos que se usan como destino: _blank, _new,_parent, _self, y _top. Con ellos, puede hacer que el contenido de un vínculo se superponga al marco actual o aparezca en una ventana de explorador nueva.

_blank: Abre el vínculo en una nueva ventana de explorador y mantiene la ventana

actual disponible. Si creamos varios enlaces con esta opción y comenzamos a abrirlos,

estos se abrirán en ventanas independientes las unas de las otras.

Page 78: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

77

_new: Es similar al anterior y hace que el vínculo se abra en una nueva ventana de

explorador manteniendo la ventana actual disponible. Si aún no has abierto ninguno

de los enlaces que hayas creado con esta sintaxis, al hacerlo se va abrir en una

ventana nueva la cual, por así decirlo, va tener el nombre de NEW, y a partir de esa

ventana los demas enlaces que abras y que tengan el “_new” se van cargar en esta

única ventana.

_parent: Abre el vínculo en el conjunto de marcos padre del marco actual.

_self: Abre el vínculo en el marco actual, sustituyendo su contenido por completo. Es

la opción predeterminada por el programa.

_top: Abre el vínculo en el conjunto de marcos más exterior de la página Web actual,

sustituyendo todos los marcos.

6.10. Guardar archivos de marcos y conjuntos de marcos

Como ya hemos visto a lo largo de este tema, cuando trabajamos con marcos, estamos trabajando con múltiples archivos HTML a la vez. Por lo tanto, deberemos tener cuidado de guardar no sólo los marcos individuales que componen la página Web, sino también el propio conjunto de marcos.

En la siguiente explicación, veremos los distintos comandos que nos proporciona Dreamweaver para guardar un conjunto de marcos con sus marcos individuales de una forma rápida y sencilla.

Guardar un conjunto de marcos

1. Seleccione el conjunto de marcos utilizando el panel Marcos o, directamente, en la ventana de documento de Dreamweaver.

2. Para guardar el archivo de conjunto de marcos, diríjase al menú Archivo y seleccione la opción Guardar conjunto de marcos.

3. Para guardar el archivo de conjunto de marcos como un archivo nuevo, diríjase al menú Archivo y elija la opción Guardar conjunto de marcos como.

4. Dentro del cuadro de diálogo Guardar como, especifique un nombre en el cuadro Nombre y una ruta mediante el cuadro de lista Guardar en o la Barra de sitios.

Guardar un documento que está dentro de un marco

1. Haga clic en el marco para seleccionarlo y, a continuación, diríjase al menú Archivo y seleccione la opción Guardar marco como.

2. Al igual que en el caso anterior, se abre el cuadro de diálogo Guardar como. Especifique un nombre en el cuadro Nombre y una ruta mediante el cuadro de lista Guardar en o la Barra de sitios.

NOTA: Para guardar todos los archivos de un conjunto de marcos de forma rápida, seleccione la opción Guardar todo en el menú Archivo. De este modo se guardarán todos los documentos abiertos, incluidos los documentos individuales, los documentos de marcos y los documentos de conjunto de marcos.

Page 79: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

78

6.11. Práctica: Diseño Web parte IV

En esta nueva práctica, vamos a crear dos de los documentos principales para nuestra Web. En primer lugar, vamos a crear la página “Intro.htm”; se trata de un documento sencillo donde insertaremos una película de Macromedia Flash que configuraremos utilizando el panel Propiedades. Posteriormente, utilizaremos uno de los conjuntos de marcos predefinidos por Dreamweaver para crear el documento “Menu.htm”.

Recuerda…

Se denomina conjunto de marcos anidado a un conjunto de marcos que está dentro de otro.

La opción _top la utilizaremos si queremos abrir un vínculo en el conjunto de marcos más exterior de la página Web actual sustituyendo todos los marcos.

La tecla ALT deberemos mantenerla pulsada para dividir nuestra página Web en marcos.

Las restricciones que presentan los nombres de marcos son:

- El guión bajo está permitido por norma general exceptuando el uso de ciertos nombres reservados.

- Hay que utilizar palabras sin espacios.

- No usar en ellos caracteres especiales como comillas, signos de interrogación, etc.

El panel Propiedades lo utilizaremos para modificar el tamaño de los marcos.

6 pixeles es el grosor que tendrán los bordes de los marcos por defecto en Dreamweaver.

La categoría Diseño de la Barra de herramientas Insertar nos permitirá crear conjuntos de marcos predefinidos.

La opción Bordes de marco situada en la categoría Ayudas visuales del menú Ver deberemos activarla para poder visualizar los marcos de la ventana de documento de Dreamweaver.

Page 80: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

79

7. CREACIÓN DE TABLAS

La colocación de imágenes, texto y otros elementos en un documento contribuyen a la presentación de nuestras páginas. Hasta ahora, no tenemos mucho control sobre los elementos que introducimos en una página Web, ya que nos vemos restringidos por las limitaciones del HTML. A lo largo del siguiente tema, veremos cómo las tablas nos ayudarán a la hora de estructurar una página Web. Una tabla de HTML ordena el contenido de una página que, de otro modo, estaría suelto. Si, en un principio, las tablas se utilizaban para mostrar la información en un formato más claro, hoy día, gracias a las mejoras introducidas por Dreamweaver, podemos decir que las tablas se han convertido en la herramienta más útil a la hora de controlar la información de nuestras páginas Web.

7.1. Utilización de tablas

Las tablas son una de las utilidades más potentes para presentar datos e imágenes en un documento HTML. Las tablas se componen de tres elementos básicos: columnas, filas y celdas. Las filas van de izquierda a derecha de la tabla y las columnas de arriba a abajo. Una celda es la casilla que se forma por la intersección de una fila y una columna; es donde se introduce la información.

En HTML, toda la estructura e información de una tabla se incluye en la etiqueta <table>. Esta etiqueta puede tener numerosos atributos que afectarán a la altura y anchura de la tabla, al borde, alineación y color de fondo. También podremos controlar el tamaño del espaciado entre celdas y el relleno de las mismas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños Web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra Web con herramientas automáticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.

Page 81: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

80

7.2. Creación de tablas en la ventana de documento

En la siguiente explicación, aprenderemos a utilizar las herramientas que nos presenta Dreamweaver para crear una tabla que nos permita organizar, de manera rápida, los textos y gráficos dentro de la ventana de documento.

Insertar una tabla en la ventana de documento de Dreamweaver

Si no tiene la barra de herramientas activada vaya al menú Ventana y pulse Insertar. Compruebe que tiene activado la opción Común y pulse el icono de Tabla.

Nos aparece una ventana de diálogo para introducir los valores y las características de la Tabla: filas, columnas, ancho de tabla, grosor del borde, relleno, espacio entre celdas, etc.

Una vez hayamos introducidos los valores de la tabla, pulsamos Aceptar, aparecerá la tabla en el documento de Dreamweaver. Podemos variar el dimensionamiento de la tabla, filas y columnas, seleccionando un borde de la celda de la tabla y desplazándose con el ratón pulsado, con el botón izquierdo, por el documento. En el panel Propiedades aparecen todas las características y datos de la tabla, que podemos modificar directamente.

Enlace vídeo: Insertar una tabla en la ventana de documento de Dreamweaver.

Page 82: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

81

Añadir texto a una tabla

Para añadir texto en una tabla nos ponemos primeramente con el cursor del ratón en la celda de la tabla que queremos introducir texto, y escribimos el texto. En el panel de Propiedades se abre las características de esa celda con respecto al formato de texto: posición horizontal y vertical, fuente, tamaño, anchura, altura, fondo, alineación, etc., pues cada celda podrá tener un formato diferente.

Enlace vídeo: Añadir texto a una tabla.

Añadir una imagen a una tabla

Para añadir una imagen en una tabla seleccionamos primeramente la celda con el cursor del ratón donde va a ir la imagen. Si no tenemos activado la barra de herramientas ir al menú principal y pulsar Ventana y a continuación Insertar. Activar la barra de herramienta opción Común y pulsar el icono imagen. Aparece un cuadro de diálogo para introducir la dirección local donde se encuentra la imagen que queremos insertar en la tabla.

Page 83: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

82

Una vez añadida la imagen en la celda, en el panel Propiedades se abre las características de la imagen: dimensionado, ancho y alto, origen, ID, edición, etc., que podremos modificar directamente y apreciándose los cambios en la ventana del documento.

Enlace vídeo: Añadir una imagen a una tabla.

7.3. Modificación de tablas

La mayoría de las modificaciones que podremos hacer en una tabla las realizaremos utilizando el panel Propiedades de Dreamweaver. Gracias a este panel, controlaremos fácilmente el número de filas y columnas de éstas, así como los parámetros básicos (anchura, borde y alineación).

Modificar una tabla utilizando el panel Propiedades

1. En la ventana de documento, seleccione la tabla que desee modificar. 2. Si el panel Propiedades no se encontrara abierto diríjase al menú Ventana y escoja la

opción Propiedades. 3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina inferior

derecha del panel Propiedades. De este modo, veremos más propiedades de la tabla. 4. Para alinear la tabla dentro de la ventana de documento, seleccione la tabla y

presione sobre una de las opciones disponibles en la lista desplegable Alinear.

Page 84: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

83

5. Para cambiar el color de fondo de una celda, seleccione las celdas que quiera y haga clic directamente en la muestra de color del área Color y, en la paleta que aparece, escoja el color que desee. Recuerde que puede utilizar el campo de edición situado junto a esta muestra para introducir el valor hexadecimal del color.

7.4. Selección de elementos de una tabla

Del mismo modo que ocurre en Dreamweaver con las imágenes y el texto que tenemos en la ventana de documento, el primer paso que tenemos que dar para aplicar cambios a una tabla o a cualquiera de sus elementos es seleccionarla. En la siguiente explicación, veremos cómo, con un solo movimiento de ratón, podemos seleccionar toda una tabla, una fila, una columna o un rango contiguo de celdas dentro de la tabla.

Seleccionar filas en una tabla

1. Posicione el cursor del ratón en el lado izquierdo de la fila que quiera seleccionar.

Asegúrese de desplazar el puntero totalmente fuera de la tabla.

2. Mueva el cursor lentamente hacia la tabla hasta que observe que éste se convierte en

una flecha negra que apunta hacia la derecha.

3. A continuación, haga clic con el ratón. Todas las celdas de la fila seleccionada serán

rodeadas por un borde de color negro.

Page 85: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

84

Seleccionar columnas en una tabla

1. Posicione el cursor del ratón en la parte superior de la columna que quiera

seleccionar. Asegúrese de desplazar el puntero totalmente fuera de la tabla.

2. Mueva el cursor lentamente hacia la tabla hasta que observe que éste se convierte en

una flecha negra que apunta hacia abajo.

3. Haga clic con el ratón y observe cómo todas las celdas de la columna seleccionada

aparecen rodeadas por un borde de color negro.

Añadir filas y columnas a una tabla

1. En la ventana de documento, seleccione la tabla que desee modificar.

2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la

opción Propiedades

3. Para añadir filas, coloque el cursor del ratón en el campo de edición Filas y escriba el

número total de filas que desee que su tabla tenga. Por ejemplo, si tenía 3 filas y

quiere añadir 3 más, deberá escribir 6 en el campo de edición.

4. Para añadir columnas, coloque el cursor del ratón en el campo de edición Columnas y

escriba el número total de ellas que desee que tenga su tabla. Por ejemplo, si tenía 3

columnas y quiere añadir 3 más, deberá escribir 6 en el campo de edición.

5. Para aplicar los cambios efectuados, pulse la tecla INTRO o haga clic con el ratón en algún lugar de la ventana de documento.

Page 86: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

85

Borrar filas o columnas de una tabla

1. Coloque el cursor en una celda de la fila o columna que desee eliminar.

2. En el menú Modificar seleccione la opción Tabla y, en el submenú que aparece, escoja la

opción Eliminar fila o Eliminar columna, dependiendo de la operación que quiera

realizar.

3. La fila o columna desaparece automáticamente de la tabla.

NOTA: Al eliminar una columna de la tabla, el tamaño de ésta no se verá afectado. De forma inmediata, el resto de columnas se dimensionan para adaptarse al tamaño de la misma. Esto no ocurre con las filas que, al eliminarlas, desaparecen y el resto de filas de la tabla permanecen sin alterarse.

7.5. Alineación del contenido de una celda

Además de los controles generales para modificar una tabla que hemos estado viendo a lo largo del tema, Dreamweaver nos ofrece otras propiedades para trabajar con las celdas de una tabla de forma individual. En la siguiente explicación, utilizaremos el panel Propiedades para ajustar la alineación horizontal o vertical del contenido (texto o imágenes) de una celda.

Alinear el contenido de una celda usando el panel Propiedades

1. Asegúrese de que el panel Propiedades se muestra activo. En caso contrario,

muéstrelo desde la opción Propiedades del menú Ventana.

2. Para alinear el contenido de una celda de forma horizontal, coloque el cursor de texto

del ratón en la celda que desee modificar y seleccione una de las opciones utilizando

el menú desplegable Horizontal.

3. Para alinear el contenido de una celda de forma vertical, coloque el cursor de texto

del ratón en la celda que desee y seleccione una de las opciones utilizando el menú

desplegable Vertical.

4. De forma automática, el contenido de la celda se alinea según las opciones

seleccionadas.

Page 87: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

86

7.6. Dividir y combinar celdas

Gracias al panel Propiedades, podremos combinar varias celdas adyacentes para obtener una sola celda que se extienda por varias columnas o filas. También podremos dividir una celda en varias filas o columnas, independientemente de que hayan sido combinadas con anterioridad.

Combinar dos o más celdas

1. Coloque el cursor de texto del ratón sobre la primera celda que desee incluir en la

múltiple selección.

2. A continuación, arrastre el ratón para seleccionar las celdas a combinar. Recuerde

que las celdas seleccionadas deberán ser continuas y tener forma rectangular.

3. Si el panel Propiedades no se encontrara abierto diríjase al menú Ventana y escoja la

opción Propiedades.

4. Haga clic en el botón Combina las celdas seleccionadas usando extensores situado

en la parte inferior izquierda del panel Propiedades.

5. Las celdas seleccionadas se combinan automáticamente en una sola.

Dividir una celda combinada

1. Seleccione la celda que desee dividir dentro de la tabla.

2. Haga clic en el botón Divide la celda en filas o columnas situado en la parte inferior

izquierda del panel Propiedades.

Page 88: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

87

3. Se abre el cuadro de diálogo Dividir celda.

4. En el área Dividir celda, elija si desea dividir la celda en Filas o en Columnas y, a continuación, introduzca el número que desee en el campo de edición situado debajo.

5. ara finalizar, pulse el botón Aceptar. La celda seleccionada, se divide automáticamente en el número establecido en el cuadro de diálogo Dividir celda.

7.7. Anidar tablas

Una tabla anidada es una tabla que colocamos dentro de otra. Podremos configurar una tabla anidada fácilmente, del mismo modo que cualquier otra tabla; de todas formas, hemos de tener en cuenta que su ancho vendrá limitado por el ancho de la celda en la que aparece.

Anidar una tabla en una celda de otra tabla

1. Si panel Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la

opción Insertar. 2. Asegúrese que la categoría Común del panel Insertar esté activa y presione el

comando Tabla. 3. Aparece el cuadro de diálogo con el mismo nombre. Este cuadro, por defecto,

mantiene los valores de la configuración más reciente aplicada a una tabla. 4. Para finalizar, especifique las propiedades de la tabla utilizando las opciones del

cuadro de diálogo y pulse el botón Aceptar.

Page 89: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

88

7.8. Ordenar tablas

Con el comando Ordenar tabla de Dreamweaver, podremos ordenar una tabla de una manera sencilla de acuerdo con el contenido de una columna. Además, podremos realizar una operación más compleja ordenándola de acuerdo al contenido de dos columnas. Es importante resaltar que no se pueden ordenar tablas que contengan celdas combinadas.

Ordenar una tabla según su contenido

Para ordenador una tabla según su contenido, primeramente habrá que seleccionar la tabla con el cursor del ratón. Seguidamente en el menú Comando seleccionamos Ordenar Tabla.

Nos aparece un cuadro de diálogo que nos permite introducir los valores a la tabla para ordenarla.

En Ordenar por tenemos que seleccionar la columna: Columna 1, Columna 2… y con el criterio en orden: Alfabético o numérico, ascendiente o descendente. En la opción Después por se selecciona la siguiente columna que vaya después y según el criterio que pongamos de orden: alfabético o numérico y ascendiente o descendente. Por último, se puede seleccionar algunas opciones como ordenar filas de encabezado, filas de pié, o la opción no modificar colores de fila hasta finalizado la operación de orden.

Enlace vídeo: Ordenar una tabla según su contenido.

Page 90: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

89

7.9. Práctica: Diseño Web parte V

En esta nueva práctica, vamos a terminar por completo el documento “Menu.htm” que creamos durante la práctica anterior. Para empezar, configuraremos los marcos de navegación y completaremos el diseño colocando imágenes como fondo de tablas. Para terminar, maquetaremos por completo el documento “Cast.htm” que se encuentra abierto en la página principal del conjunto de marcos configurado en “Menu.htm”.

Recuerda…

No se pueden combinar celdas que no se encuentran contiguas, sólo se pueden combinar celdas adyacentes.

La tecla TAB deberemos mantenerla pulsada para pasar a la celda siguiente de una tabla.

La categoría Común de la Barra de herramientas Insertar nos permitirá crear una tabla.

Si eliminamos una columna de una tabla el tamaño de ésta no se verá afectado; el resto de columnas se dimensionan para adaptarse al tamaño de la misma.

Para colocar una imagen como fondo de una tabla utilizaremos el cuadro de diálogo Propiedades de la página.

Si se pulsa la tecla TAB en la última celda de una tabla se añadirá una nueva fila.

Page 91: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

90

8. TRABAJAR CON CAPAS

A lo largo del siguiente capítulo, veremos que el uso de capas en nuestros documentos proporcionará un mayor control y flexibilidad para hacer las páginas más dinámicas. Podremos apilar las capas unas encima de otras, ocultar unas y mostrar otras, o moverlas por la pantalla con una línea de tiempo. Quizás el único inconveniente del uso de las capas esté en que no se ven en todos lo navegadores, y en los que sí se muestran, no siempre lo hacen correctamente.

8.1. Aparición de las capas: Mejoras en el diseño

Cuando la World Wide Web apareció hacia el año 1992, muy pocas personas estaban interesadas en la apariencia estética de las páginas Web. De hecho, el diseño era menospreciado. El énfasis recaía sobre los contenidos y la innovadora capacidad del hipertexto, que permitía saltar de una página a otra. Después de que apareciera el primer navegador con soporte gráfico, quedó claro que las imágenes y el diseño podía mejorar la accesibilidad y la comercialización de los sitios Web.

El primer intento de diseño en páginas Web fue el mapa gestionado por el servidor. Este elemento era una imagen de gran tamaño con zonas activas, pero que normalmente resultaba demasiado grande para ser descargada con comodidad.

La amplia aceptación que tuvo la aparición de las tablas provocó un cambio radical en el control del diseño. Se consiguió alinear objetos y texto, pero gran parte del interés visual aún recaía sobre las imágenes estratégicamente colocadas dentro de las tablas. Cuanta mayor precisión se pretendía alcanzar, más necesidad había de recurrir a artimañas como el uso de tablas anidadas e imágenes GIF de un píxel de ancho como espaciadores. Para resolver las quejas de los diseñadores, que cada vez exigían más, se incluyó una característica dentro de la especificación de las hojas de estilo en cascada, que permitía el posicionamiento absoluto de un elemento en una página. Este método facilitaba la ubicación de una imagen o un bloque de texto en cualquier parte de una página.

8.2. Creación de capas

Gracias a Dreamweaver, podremos crear capas de una forma creativa y precisa, ya sea dibujándola directamente en la página o insertándola por medio del menú. Al insertar una capa en la ventana de documento, Dreamweaver coloca por defecto la etiqueta <div> en código HTML. Sin embargo, se pueden establecer hasta cuatro etiquetas distintas: <div>, <span>, <layer> e <ilayer>. Las dos primeras son las más comunes, aunque es recomendable usar la etiqueta <div> cuando la compatibilidad entre navegadores resulte un factor importante. Observe, en el ejemplo, la apariencia del código HTML al crear una capa en Dreamweaver:

Con Dreamweaver, podrá mover una capa, colocándola y dimensionándola de la forma que prefiera, ya sea con el ratón o introduciendo valores numéricos en el panel Propiedades. Combinando ambos métodos, podremos esbozar rápidamente el diseño de la capa y alinear después los bordes con exactitud.

Page 92: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

91

Insertar una capa utilizando la barra de herramientas Insertar

Primeramente y si no tenemos activada la barra de herramientas vamos al menú Ventana y pulsamos Insertar. Seguidamente seleccionamos la pestaña Diseño Estándar de la barra de herramientas y pulsamos el icono de Dibujar Div PA. Se nos cambia el cursor del ratón y aparece de forma de cruz, en estos momentos nos situamos en el lugar del documento que deseamos incluir una capa y con el ratón procedemos a realizar un rectángulo del tamaño que necesitemos para nuestra capa. Apareciendo en el panel de Propiedades las características de la capa creada.

Enlace vídeo: Insertar una capa utilizando la Barra de herramientas Insertar.

Insertar una capa utilizando el menú de Dreamweaver

Para este proceso nos vamos al menú principal Insertar y pulsamos en Objetos de diseño, nos aparece un submenú y seleccionamos la opción Div PA. Seguidamente nos aparece en la ventana de nuestro documento la capa, un rectángulo con los bordes de color azul, que podemos mover o modificar las dimensiones a nuestro gusto con el ratón.

Enlace vídeo: Insertar una capa utilizando el menú de Dreamweaver.

Page 93: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

92

8.3. Configurar las características por defecto de una capa

En la siguiente explicación, veremos cómo utilizar el cuadro de diálogo Preferencias de Dreamweaver, para modificar el tamaño por defecto, así como otras características de la capa creada.

Configurar las características de una capa

1. En el menú Edición, escoja la opción Preferencias. Se abre el cuadro de diálogo con el

mismo nombre.

2. En la lista Categoría, seleccione la opción Elementos PA.

3. Determine el estado inicial de visibilidad de la capa utilizando la lista desplegable del

área Visibilidad.

NOTA: Si no selecciona en esta lista la opción visible, no podrá ver ninguna capa en

su documento de Dreamweaver.

4. Introduzca unos nuevos valores de anchura y altura en los campos de edición

Ancho y Alto del cuadro de diálogo. Recuerde que las dimensiones se representan en

píxeles.

5. En el área Color de fondo, haga clic en la flecha situada junto a la muestra de color y

seleccione un color de la paleta o escriba un número hexadecimal en el cuadro de

edición.

6. Para configurar una imagen de fondo, haga clic en el botón Examinar del

apartado Imagen de fondo. Aparece el cuadro de diálogo Seleccionar origen de

imagen.

7. Utilice el cuadro de diálogo para localizar la imagen que desee y pulse el

botón Aceptar. Como alternativa a esto, podremos introducir directamente la ruta

utilizando su campo de edición.

8. Para finalizar, pulse el botón Aceptar. Los cambios se guardan y se actualizan en el

documento HTML abierto.

Page 94: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

93

8.4. Panel Elementos PA

El panel Elementos PA de Dreamweaver nos proporciona un medio para manejar las capas del documento. Éstas se muestran en el panel en forma de lista apilada de nombres donde la primera capa que se creó estará situada al final en el orden de apilado, mientras que la última que se creó aparecerá en la primera posición en el orden de apilado. Las capas anidadas se muestran en el panel como nombres relacionados con las capas padres.

Trabajar con el panel Elemento PA de Dreamweaver

Para acceder a trabajar con el panel Elementos PA seleccionamos del menú principal Ventana y pulsamos Elementos PA o directamente con la tecla F2, nos aparece una ventana con todas las capas creadas en nuestro documento HTML de Dreamweaver.

Cuando seleccionamos una capa de nuestro Elementos PA, ésta se activa, marcando sus bordes con un color amarillo. Si pulsamos la opción del ojo, podemos visualizar u ocultar las capas.

Enlace vídeo: Trabajar con el panel Elemento PA de Dreamweaver.

Page 95: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

94

8.5. Modificación de capas

Dreamweaver nos permitirá cambiar con precisión las capas, una vez que las hemos creado. Utilizando el panel Propiedades, podremos especificar el nombre y la ubicación de una capa, así como establecer otras opciones de las mismas que a continuación pasamos a explicar.

Modificar una capa usando el panel Propiedades

1. En la ventana de documento, seleccione la capa que desee modificar.

2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la

opción Propiedades

3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina inferior

derecha del panel Propiedades. De este modo, veremos más propiedades de la capa

seleccionada.

4. En el cuadro de Elemento CSS-P, escriba un nombre que identifique la capa dentro

del panel y en la secuencia de comandos.

5. Utilice los campos Izq. y Sup. (Izquierda y Superior) para especificar la posición de una

capa respecto al ángulo superior izquierdo del documento o de la capa padre, si ésta

estuviera anidada.

6. Utilice los campos An. y Al. (Anchura y Altura) para especificar la anchura y altura de

una capa.

7. Para añadir una imagen de fondo a la capa, en el campo Im. fondo, escriba la ruta y el

nombre del archivo de imagen, o haga clic en el icono de carpeta situado a la derecha

de dicho campo para localizar y seleccionar un archivo.

8. Utilice la lista desplegable Vis. (Visibilidad) para determinar el estado inicial de

visualización de la capa.

9. Para cambiar el color de fondo de la capa, pulse directamente en la muestra de color

del área Col. Fondo y, en la paleta que aparece, escoja el color que desee. Recuerde

que puede utilizar el campo de edición situado junto a esta muestra para introducir el

valor hexadecimal del color.

10. Para finalizar, utilice el cuadro de lista Desb. (Desbordamiento) para determinar lo

que ocurre si el contenido de la capa excede el tamaño de ésta.

Page 96: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

95

8.6. Ajustar la alineación de las capas

La capacidad de poder colocar las capas libremente en cualquier lugar de un documento, conlleva exigencias adicionales y posibles problemas. Dreamweaver incluye dos herramientas para simplificar el diseño de capas en la ventana de documento: las reglas y la cuadrícula. Se puede decir que estas dos herramientas son comunes en la mayoría de programas de diseño gráfico. Las reglas de Dreamweaver se sitúan a lo largo de los bordes exteriores (superior e izquierdo) de la ventana de documento y pueden mostrar los ejes X e Y en píxeles, pulgadas o centímetros. La cuadrícula entrecruza la página con líneas que nos servirán de guías cuando vayamos a colocar objetos.

Ajustar una capa usando la cuadrícula de Dreamweaver

1. En primer lugar, debemos mostrar la cuadrícula en la ventana de documento, para ello,

nos dirigimos al menú Ver y seleccionamos la opción Cuadrícula. En el menú desplegable

que aparece, escogemos la opción Mostrar cuadrícula.

2. Para activar la opción de ajuste de la cuadrícula, diríjase de nuevo al menú Ver y

seleccione la opción Cuadrícula. En el menú desplegable que aparece, escoja la

opción Ajustar a cuadrícula.

3. Para finalizar, seleccione una capa y arrástrela hacia otra posición dentro de la ventana de

documento. La capa saltará a la posición de ajuste más próxima.

8.7. Creación de una capa de carga

A medida que aumenta la complejidad de las creaciones Web, la mayoría de diseñadores desea que las capas se desplacen por la pantalla o aparezcan rápidamente. Una capa puede actuar solamente cuando se ha finalizado la descarga de su contenido (texto e imágenes).

En la siguiente explicación, aprenderemos a crear una capa de carga que será la que visualicemos mientras que el resto de contenido es transferido y está listo para funcionar.

Crear una capa de carga en Dreamweaver

Para ello, hay que ir a la barra de herramientas en la categoría Diseño y pulsar el icono Div PA. Nos ponemos sobre el documento HTML y trazamos un rectángulo con las dimensiones que nos interese y escribimos dentro un texto cualquiera.

La capa aparece activada con el borde amarillo y superpuesto a los demás elementos que contiene el documento HTML. Vamos al menú Ventana y pulsamos Elementos PA o la tecla rápida F2. Nos aparece el panel de capas con todas las capas que contiene el documento. Cambiamos el nombre de la capa y seguidamente abrimos la Ventana del menú principal y pulsamos Comportamientos y abrimos el menú y hacemos clic en el botón con el signo (+) y seleccionamos Mostrar/Ocultar elementos. Aparece una lista y buscamos en ella el nombre de la capa que hemos definido anteriormente. La seleccionamos y le damos al botón Ocultar a continuación selecciona una a una las demás capas y pulse el botón Mostrar y le damos al botón Aceptar. En el inspector de etiquetas aparece el nuevo comportamiento creado.

Page 97: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

96

Enlace vídeo: Crear una capa de carga en Dreamweaver.

Recuerda…

En el panel de capas, un pequeño icono con los ojos cerrados nos indica que una capa está oculta.

La opción que debemos activar si queremos que una animación se repita indefinidamente una vez que ésta haya alcanzado el cuadro final es el bucle del panel líneas de tiempo.

Con la tecla CTRL mantenida pulsada permite añadir un cuadro clave en el panel líneas de tiempo.

La categoría Diseño de la Barra de Herramientas nos permitirá crear una capa.

Si al colocar una capa no queremos que aparezca una marca en la ventana de documento tenemos que desactivar la opción Elementos visibles de la categoría Ayudas visuales en el menú Ver.

Para cambiar la etiqueta a una capa en Dreamweaver se utiliza el panel Propiedades.

La tecla rápida F2 nos permitirá abrir el panel de Capas.

Page 98: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

97

9. VÍNCULOS WEB

Después de configurar un sitio local en nuestro disco duro y de crear los documentos del sitio, necesitaremos establecer conexiones entre los distintos documentos HTML o tipos de archivos. De ello se encargan los vínculos, que nos aportan gran movilidad independientemente de encontrarse o no en el mismo servidor. Dreamweaver nos permitirá crear vínculos entre documentos HTML, imágenes, archivos multimedia o software transferible.

A lo largo de este capítulo, aprenderemos a añadir vínculos a imágenes y a texto que tengamos en un documento, veremos cómo ajustar anclajes para conseguir una navegación más sencilla, y para finalizar, aprenderemos a crear de forma rápida menús de salto y a reparar los vínculos rotos.

9.1. Localización y rutas de documentos

A la hora de crear vínculos, resulta fundamental conocer la ruta de archivo entre el documento de origen y el de destino. Cada página Web tiene una dirección exclusiva denominada URL (Uniform Resourse Locator). Dreamweaver nos ofrece la posibilidad de trabajar con dos tipos de vínculos: relativos y absolutos.

Vínculos absolutos: Nos proporcionan la URL completa del documento vinculado,

incluido el protocolo. Por ejemplo, la siguiente dirección

http://www.adobe.com/products/dreamweaver es una URL absoluta. Es importante

incluir el protocolo http:// al comienzo de la dirección. Por lo general, este tipo de

vínculos son empleados para vincular un documento situado en otro servidor.

Vínculos relativos: Son un poco menos directos que los absolutos. Resultan

especialmente útiles cuando el documento actual y el vinculado se encuentran en la

misma carpeta y es probable que vayan a permanecer juntos. Un vínculo relativo no

necesita tener la misma estructura y protocolo que uno absoluto. En éstos se omite la

parte de la URL absoluta que coincide en los documentos actual y vinculado, indicando

únicamente la parte de la ruta diferente.

9.2. Crear vínculos

Es algo muy común asignar vínculos a palabras o frases de su página, a imágenes como botones de navegación o a una porción determinada de un mapa de imagen. La etiqueta HTML que establece un vínculo de hipertexto se denomina etiqueta de punto de fijación o etiqueta <a>. Dreamweaver crea una etiqueta de punto de fijación para los objetos, texto o imágenes desde los que se generan vínculos. Puede crear vínculos con otros documentos y archivos, así como vínculos con lugares específicos de un documento utilizando la etiqueta <a href>.

Por ejemplo, si en la ventana de documento selecciona la frase Volver a la página Principal y, a continuación, crea un vínculo con un archivo llamado “index.htm”, el código HTML del vínculo será el siguiente:

Cuando se vincula un enlace a una imagen, como por ejemplo “logo.gif”, el código será:

Page 99: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

98

9.3. Crear vínculos desde el panel Propiedades

En la siguiente explicación, aprenderemos a utilizar el panel Propiedades de Dreamweaver para originar vínculos desde una imagen, objeto o texto, hasta otro documento o archivo.

Crear vínculos utilizando el icono con forma de carpeta o el cuadro de edición de texto Vínculo

Seleccione en el documento HTML un texto o una imagen que desee vincular. En el panel Propiedades nos vamos a la opción Vinculo e introducimos la dirección donde se encuentra el archivo o pulse el icono de carpeta, donde aparece un cuadro de diálogo de búsqueda de archivo, pulsa Aceptar. Cuando pulsemos sobre la imagen o texto abrirá el documento vinculado.

Enlace vídeo: Crear vínculos utilizando el icono con forma de carpeta.

Crear vínculos utilizando el icono de señalización de archivo

Seleccione en el documento HTML una imagen o texto que dese vincular. Vaya al panel de Archivos locales y seleccione el archivo que desea vincular. Con el ratón pulsado en el archivo seleccionado desplácese hasta la casilla de Vínculo en el panel Propiedades y déjelo caer, se insertará en la casilla.

Enlace vídeo: Crear vínculos utilizando el icono de señalización de archivo.

Page 100: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

99

9.4. Navegar usando anclajes

Siempre que utilice un vínculo a una página Web, ya sea usando direcciones relativas o absolutas, los navegadores mostrarán la página en cuestión empezando por la parte superior de la misma; el visitante deberá deslizarse hacia la parte inferior para obtener la información que desee. Gracias a la técnica de anclajes de Dreamweaver, podremos desplazarnos de un modo automático a un punto concreto dentro de un documento.

El uso de anclajes es un proceso compuesto por dos pasos. En primer lugar, deberá situar en la página el anclaje en sí, el cual se incluirá en el código HTML de la página como una etiqueta de vínculo con el atributo. El segundo paso consistirá en insertar un vínculo enlazado a dicho anclaje.

Insertar un anclaje en Dreamweaver

Seleccione un texto o imagen del documento HTML. Si la barra de herramientas no se encuentra activada, vaya al menú Ventana y pulse Insertar. Seleccione la categoría Común de la barra de herramientas y pulse el icono Anclaje con nombre, aparecerá un cuadro de diálogo para introducir el nombre de anclaje. Recuerda que no se puede dar espacio en blanco ni tampoco esté en una capa.

También se puede realizar desde el panel principal Insertar y pulsando Anclaje con Nombre.

Dreamweaver coloca un punto de anclaje en el lugar que hemos definido en el anclaje con su nombre.

Enlace vídeo: Insertar un anclaje en Dreamweaver.

NOTA: Si este marcador no se mostrase, en el menú Ver seleccione la opción Ayudas visuales y en el submenú que se abre escoja Elementos invisibles.

Page 101: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

100

Crear un vínculo con un anclaje

En la vista diseño del documento HTML seleccione una imagen o texto para vincular un anclaje. Para ello en el panel Propiedades en la casilla Vinculo introduzca almohadilla y el nombre del anclaje *an01

NOTA: Los nombres de punto de fijación tienen en cuenta el uso de mayúsculas y minúsculas.

Enlace vídeo: Crear un vínculo con un anclaje.

9.5. Selección del destino de los vínculos

Hasta este momento, todo lo que hemos visto se limita a abrir distintos documentos o secciones en la ventana del navegador; pero con Dreamweaver, también podremos abrir una nueva ventana y cargar en ella una página vinculada. Los vínculos con destino se usan con frecuencia en páginas que contengan marcos, permitiéndonos, de ese modo, insertar un vínculo en un marco que abra un documento en otro destino. En este tema nos centraremos en aprender a abrir un vínculo en una página completamente nueva.

Abrir un vínculo en una página nueva

1. Seleccione el texto o la imagen a la que desee asociar el vínculo

2. En el campo Vínculo del panel Propiedades, escriba la dirección URL de la página que

desea vincular. Una vez introducida la dirección se activará el cuadro de lista Destino.

3. Haga clic sobre el botón del cuadro de lista desplegable Destino y seleccione _blank.

Como alternativa, también podrá escribirlo directamente en el campo de edición.

4. Para finalizar, realice una previsualización del documento para ver los resultados. Al

pulsar sobre el vínculo, el navegador abrirá una nueva ventana en la que mostrará la

página asociada, ofreciéndole al visitante dos ventanas disponibles a la vez.

9.6. Crear un vínculo de correo electrónico

Un vínculo de correo electrónico abre una ventana de mensaje en blanco utilizando el programa de correo asociado al navegador del usuario. Cuando la ventana de mensaje de correo electrónico aparece, el campo Para se rellena automáticamente con la dirección especificada en el vínculo.

Crear un vínculo de correo electrónico

Esto nos permitirá poner un vínculo a nuestro correo electrónico a través de Dreamweaver. Seleccionamos el texto que identifique el correo, ejemplo, Enviar a mi correo, y seleccionamos en la barra de herramientas y en la categoría Común el icono Vínculo de correo electrónico.

Page 102: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

101

Seguidamente nos aparece un cuadro de diálogo para definir el texto de presentación y el correo electrónico. Pulsamos Aceptar y vinculamos el texto seleccionado con el correo electrónico. Esta opción también se puede realizar desde el menú Insertar y la opción Vinculo de correo electrónico.

NOTA: También podremos crear vínculos de correo electrónico escribiendo mailto: seguido de una dirección de correo electrónico en el campo Vínculo del panel Propiedades.

Enlace vídeo: Crear un vínculo de correo electrónico.

9.7. Creación de mapas de imagen

Un mapa de imagen es una imagen dividida en distintas regiones o zonas interactivas. Hasta ahora, hemos visto que al añadir un vínculo a una imagen, ésta se convierte en un vínculo. Con un mapa de imagen, podremos diseñar múltiples zonas interactivas en una imagen utilizando el panel Propiedades y vincular cada una de ellas a una página diferente.

Crear un mapa de imagen

Sitúese en la imagen del documento HTML. Active el panel Propiedades en el menú principal Ventana. En la zona inferior izquierda de propiedades, aparece la casilla Mapa con varios elementos de utilización: Circular, rectángulo, libre. Estos elementos se aplican a la zona interactiva de la imagen para obtener varios puntos de acceso, vinculado a otra página, imagen, archivo o URL.

NOTA: Cada elemento que vayamos aplicando a la zona interactiva de la imagen hay que darle un Mapa (Nombre) diferente y un vínculo para ese Mapa, así como también seleccionar el tipo de destino.

Page 103: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

102

NOTA: Dreamweaver nos permitirá modificar los mapas de imágenes que hemos creado de una forma rápida. Podremos mover cualquier área previamente definida seleccionándola y arrastrándola a una nueva posición, cambiar el tamaño de las zonas interactivas y borrar cualquier área existente simplemente seleccionándola y pulsando la tecla SUPR.

Enlace vídeo: Crear un mapa de imagen.

9.8. Creación de menús de salto

Un menú de salto es un menú de lista emergente que muestra opciones con vínculos a documentos o archivos. Podremos 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.

Insertar un menú de salto

1. Coloque el cursor de texto en el lugar donde desee colocar el menú de salto.

2. En el menú Insertar, seleccione el comando Formulario y en el submenú que aparece,

escoja la opción Menú de salto. Se abre el cuadro de diálogo Insertar menú de salto.

Page 104: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

103

3. Por defecto, aparece un primer elemento denominado “elemento1”. Si desea

cambiar el mensaje de selección que se mostrará en la lista de menú, escriba uno en

el campo de edición Texto.

4. Introduzca la URL para este elemento en el campo de texto Al seleccionarse, ir a URL,

o haga clic sobre el botón Examinar para buscar el archivo que vaya a vincular.

5. En el menú emergente Abrir URL en, seleccione la ubicación donde se abrirá el

archivo.

6. A continuación, haga clic en el botón con forma de signo más (+) para añadir un

nuevo elemento de menú.

7. Repita los pasos anteriores para definir otros elementos que se incluirán al menú de

salto.

8. Para añadir un botón Ir, en Opciones, active la opción Insertar botón Ir tras el menú.

9. Para finalizar, haga clic en el botón Aceptar. El menú de salto se añade en la ventana

de documento.

NOTA: Podremos realizar cambios en los elementos del menú de salto, utilizando el panel Propiedades o el panel Comportamientos; modificar el orden de la lista o el archivo con el que se vincula un elemento; y añadir, eliminar o renombrar un elemento.

9.9. Comprobación de vínculos rotos

Los Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a archivo que no existe. La existencia de estos vínculos en nuestras páginas es un error, ya que no permite navegar correctamente a los usuarios por nuestro sitio, además del efecto negativo que causa. Los servidores de tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Así, por ejemplo, si enlazas a un archivo Peliculas.htm puede que el servidor no lo encuentre porque en realidad lo hayas llamado peliculas.htm (en minúsculas). Trabajando con Windows este tipo de errores no se presentan porque no hace esta distinción. En el ejemplo anterior Dreamweaver consideraría el enlace Peliculas.htm como correcto aunque no lo fuese. Para evitar esto puedes activar la opción Comprobación de vínculos con distinción entre mayúsculas y minúsculas que se encuentra en la ventana de Configuración del Sitio, dentro de Configuración avanzada en la categoría Información local.

Page 105: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

104

Comprobar si nuestro sitio tiene vínculos rotos

1. En el menú Sitio seleccionamos la opción Comprobar vínculos en todo el sitio o

pulsamos la combinación de teclas CTRL+F8. Aparece el panel Verificador de vínculos.

2. En la imagen vemos que no se ha encontrado dos archivos enlazados, posiblemente

porque el nombre esté mal escrito.

3. Lo primero que hay que hacer es pulsar sobre el botón Comprobar vínculos, a través

del cual se ofrece la posibilidad de elegir dónde se comprobarán los vínculos rotos.

Puede ser en el documento actual, en todo el sitio, o en los archivos o carpetas del

sitio seleccionados previamente.

4. A través del desplegable Mostrar hay que especificar si han de mostrarse los Vínculos

rotos, los Vínculos externos o Archivos huérfanos.

Vínculos rotos son los vínculos que no siguen una ruta válida, o que

enlazan a archivo que no existe.

Vínculos externos son los vínculos a documentos que se encuentran

fuera del sitio, pero que no necesariamente son vínculos erróneos. No

comprueba si estos vínculos son correctos o no, simplemente los

enumera.

A través de Vínculos huérfanos se muestran todos aquellos archivos

del sitio que no están siendo vinculados por otros, a la vez que

tampoco contienen vínculos a otros documentos. Estos documentos,

en ocasiones, pueden no estar siendo utilizados para nada, por lo que

simplemente están ocupando espacio en disco innecesariamente.

5. Podemos reparar los vínculos rotos pulsando sobre el vínculo roto y modificando

directamente el nombre del documento en el panel, o nos permite buscarlo a través

del icono con forma de carpeta que aparecerá a su derecha.

Page 106: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

105

9.10. Práctica: Diseño Web parte VI

En esta sexta práctica, vamos a tratar dos de los aspectos fundamentales en toda página Web: los vínculos y las capas. Vamos a aprender a establecer distintos tipos de conexiones entre documentos HTML. Empezaremos creando vínculos de texto utilizando el panel Propiedades, crearemos vínculos de correo electrónico y un mapa de imagen elaborando dos zonas interactivas en la imagen principal del documento “Index.html”. A continuación, utilizaremos los vínculos de anclaje para crear la navegación interna del documento “Cast.htm” y terminaremos creando una capa que almacene la Barra de navegación principal de la página “Menu.htm”.

Recuerda… El símbolo de almohadilla (#) se utiliza para crear un vínculo con un anclaje. Se pone delante del nombre del anclaje, por ejemplo, #anc01. Con la tecla SUPR eliminamos una región interactiva colocada en un mapa de imágenes. El menú salto es un menú de lista emergente que muestra opciones con vínculos a documentos o archivos. Para trabajar con vínculos utilizamos uno de estos tipos: absolutos y relativos. La categoría Común de la Barra de herramientas Insertar nos permite crear un anclaje o punto de fijación con nombre. Los anclajes son vínculos que nos permitirán desplazarnos de un modo automático a un punto concreto de un documento. La categoría Común de la Barra de herramientas Insertar nos permite crear un vínculo de correo electrónico. El mapa de imágenes es una imagen dividida en distintas regiones o zonas interactivas.

Page 107: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

106

10. FORMULARIOS INTERACTIVOS

Los formularios son de las herramientas más útiles de una página Web ya que nos permiten interactuar con los visitantes del sitio o recopilar información de ellos. A lo largo de este capítulo, veremos la potente maquinaria que presenta Dreamweaver para estructurar y crear formularios HTML. Cada objeto de formulario será estudiado detalladamente: campos de texto, botones de opciones, casillas de verificación, campos ocultos, etc.

10.1. Funcionamiento de los formularios

Los formularios permitirán al usuario pasar información a los creadores o administradores de una página Web. Hoy día, los formularios se emplean en la red para realizar encuestas, comercio electrónico, libros de visitas, votaciones, etc. Para que estos funcionen correctamente, los cuestionarios necesitan algún tipo de conexión a un servidor que, como norma general, toma la forma de un guión CGI (Common Gateway Interface), aunque también se puede usar Java y JavaScript.

Los formularios, al igual que ocurría con las tablas, se pueden concebir como unidades independientes contenidas en una página Web. Todos los elementos de un formulario se almacenan dentro de la etiqueta

A diferencia de las tablas, no podremos introducir formularios dentro de otros, aunque nada nos impedirá que creemos varios formularios en un mismo documento.

10.2. Objetos de formulario

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Podremos insertar objetos de formulario utilizando la categoría Formularios del panel Insertar.

Formulario: Inserta un formulario en el documento. Dreamweaver inserta etiquetas

<form> de apertura y cierre de formulario en el código HTML.

Campo de texto: Inserta un campo de texto en un formulario. Éstos admiten todo tipo

de texto, tanto alfabético como numérico.

Campo oculto: Inserta un campo que permite almacenar datos introducidos por el

usuario como un nombre, una dirección de correo electrónico o una preferencia de

compra para utilizarlos la próxima vez que el usuario visite el sitio.

Área de texto: Al igual que el Campo de texto, inserta un cuadro de edición en el

formulario, con la diferencia de que se incluyen flechas que actúan como barra de

desplazamiento vertical. Esta opción es más adecuada si su intención es introducir

largas cadenas de texto.

Page 108: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

107

Casilla de verificación: Inserta una casilla de verificación en un formulario. Estas

casillas admiten múltiples respuestas en un solo grupo de opciones y permiten que los

usuarios seleccionen tantas opciones como sean necesarias.

Grupo de casillas de verificación: Admiten múltiples respuestas en un solo grupo de

opciones. Un usuario puede seleccionar tantas acciones como sean necesarias.

Botón de opción: Inserta un botón de opción en un formulario. Los botones de opción

representan opciones exclusivas de selección. Cuando se activa un botón en un grupo,

se anula la selección de los demás botones del grupo.

Grupo de opción: Inserta varios botones de opción en un formulario.

Seleccionar (Lista/menú): Permite crear opciones para el usuario en una lista de

desplazamiento.

Menú de salto: Inserta una lista de navegación en la que cada opción estará vinculada

a un documento o archivo.

Campo de imagen: Permite insertar una imagen en un formulario.

Campo de archivo: Inserta un cuadro de texto vacío y un botón Examinar que

permitirá al usuario explorar los archivos de su disco duro y cargarlos como datos de

formulario.

Botón: Inserta un botón de texto en un formulario. Los botones actúan cuando se

hace clic sobre ellos.

Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para

que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además,

al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy

práctico en casillas de verificación y botones de opción.

Juego de campos: Permite agrupar en pantalla varios componentes de los vistos hasta

ahora.

10.3. Insertar un formulario en Dreamweaver

Un formulario contiene propiedades invisibles para el usuario. Estas propiedades especifican cómo se procesará la información que introduzcamos en él. Un formulario presenta tres partes básicas:

Etiquetas <form>, que incluyen el URL de la secuencia de comandos CGI que

procesará el formulario y el método que se utilizará para enviar los datos a un

servidor.

Los campos de formulario, campos de texto, menús, casillas de verificación o botones

de opción.

El botón Enviar, que manda los datos a la secuencia de comandos CGI del servidor.

Page 109: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

108

Añadir un formulario a un documento

1. Sitúe el cursor del ratón donde quiera que comience el formulario.

2. Si el panel Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la

opción Insertar.

3. Haga clic en la flecha que apunta hacia abajo situada en la esquina superior derecha

del panel y seleccione Formularios en el menú desplegable que aparece.

4. A continuación, pulse el botón Formulario. Aparece un contorno de línea de puntos

de color rojo en la ventana de documento.

NOTA: Si el contorno no se encuentra visible, diríjase al menú Ver y seleccione el

comando Ayudas visuales. En el submenú que aparece, asegúrese que la opción

Elementos invisibles esté activada.

5. Si tenemos el panel Propiedades abierto, éste se transforma en uno específico para

formularios.

6. En el campo de edición ID de formulario, escriba un nombre exclusivo para el

formulario.

7. En el campo Acción, puede introducir directamente la URL en la que reside la

secuencia de comandos o una dirección de correo electrónico para enviar los datos.

8. En el área Método, la opción predeterminada es POST. También podremos escoger

entre una de las opciones de la lista desplegable:

POST: Envía los valores del formulario en el cuerpo de un mensaje.

GET: Adjunta los valores del formulario a la URL y envía la información

al servidor.

Predet.: Envía los datos del formulario con la opción predeterminada del

navegador del usuario.

Page 110: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

109

10.4. Creación de campos de texto

Un campo de texto es un objeto de formulario que podremos crear con Dreamweaver para que los visitantes de nuestra página escriban una respuesta. Existen tres tipos de campos de texto:

Campos de texto de una línea: Se utilizan para proporcionar respuestas compuestas

por una sola palabra o una frase corta como, por ejemplo, un nombre o una dirección.

Campos de contraseña: Son campos de texto en los que, cuando el usuario escribe,

aparecen asteriscos quedando oculto el texto.

Campos de texto de varias líneas: Ofrecen mayor espacio al visitante para escribir la

respuesta. Podremos delimitar fácilmente el número de caracteres o el número de

líneas que puede introducir el visitante.

Crear un campo de texto de una línea

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de

texto.

3. Dreamweaver crea un campo de texto en el documento y, en el panel Propiedades,

se muestran los atributos que pueden modificarse.

4. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.

No utilice espacios para separar las palabras.

5. Podremos cambiar la longitud de un campo de texto insertando un nuevo valor en el

cuadro de texto Ancho car (Ancho en caracteres). Por defecto, Dreamweaver inserta

un campo de texto de aproximadamente 20 caracteres.

6. También podremos limitar el número de caracteres introduciendo un valor en el

cuadro de edición Car. máx. (Caracteres máximos).

7. En el área Tipo, deje activa Una línea que aparece por defecto. Esta opción nos

permitirá que el campo de texto sea de una línea.

8. Para finalizar, si lo desea, podrá introducir una cadena de texto por defecto,

escribiendo directamente en el campo de edición Val. Inicial (Valor inicial).

9. El valor establecido aparecerá en el campo de texto cuando se cargue el formulario

en el navegador.

Page 111: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

110

Crear campos de contraseña

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de

texto. Dreamweaver crea un campo de texto en el documento.

3. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.

No utilice espacios para separar las palabras.

4. En el área Tipo, active la opción Contraseña. Esta opción hará que el texto que

introduzcamos en ese campo se muestre con asteriscos.

Crear un campo de texto de varias líneas

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de

texto. Dreamweaver crea un campo de texto en el documento.

3. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.

No utilice espacios para separar las palabras.

4. En el área Tipo, active la opción Varias líneas. Esta opción ofrece mayor espacio al

visitante para escribir la respuesta; será igual que si utilizase el comando Área de

texto. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

5. Podremos cambiar la longitud de un campo de texto insertando un nuevo valor en el

cuadro de texto Ancho car (Ancho en caracteres).

6. También podremos limitar el número de líneas de un campo introduciendo un valor

en el cuadro de edición Líneas núm (Número de líneas). En este caso, no se puede

restringir el número de caracteres que puede introducir el usuario.

7. Para finalizar, si lo desea, podrá introducir una cadena de texto por defecto,

escribiendo directamente en el campo de edición Val. inicial(Valor inicial). El valor

establecido aparecerá en el campo de texto cuando se cargue el formulario en el

navegador.

Page 112: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

111

10.5. Creación de campos de texto ocultos

Los campos ocultos son elementos invisibles que se colocan en un documento para recopilar o enviar información. La información de estos campos se transfiere al servidor cuando se envía el formulario. Utilizaremos un nombre y un valor que definiremos al configurar el campo oculto.

Crear un campo de texto oculto

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo

oculto.

3. Dreamweaver añade un marcador al documento y, en el panel Propiedades, se

muestran los atributos que pueden modificarse.

4. En el campo de edición Campo oculto, escriba un nombre exclusivo para el campo.

No utilice espacios para separar las palabras.

5. Para finalizar, en el área Valor, escriba el texto que desea asignar al campo.

10.6. Insertar casillas de verificación

Las casillas de verificación se utilizan a menudo cuando se quiere que el usuario pueda escoger tantas opciones como desee, de forma que, podemos decir, que cada casilla de verificación es independiente al resto.

Page 113: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

112

Insertar casillas de verificación

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Casilla de

verificación.

3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

4. En el campo de edición Nombre de casilla, escriba un nombre descriptivo para la

casilla de verificación. No utilice espacios para separar las palabras.

5. En el cuadro de edición Valor activado, introduzca la información que desea que pase

a un programa cuando el usuario marque la casilla de verificación.

6. Por defecto, la casilla de verificación aparecerá sin marcar, pero podremos cambiar

esto modificando la opción Estado inicial de Desactivado a Activado.

10.7. Grupo de casillas de verificación

Los Grupo de casillas de verificación de un formulario HTML nos permite crear de una forma más rápida y efectiva un conjunto de casillas de verificación para poder asignar los estados válido o no válido cuando el usuario selecciona una casilla o cuando no la selecciona.

Crear un grupo de casillas de verificación

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Grupo de

casillas de verificación.

3. Se abre el cuadro de diálogo Grupo de casillas de verificación. Por defecto el

programa genera dos etiquetas.

4. En el campo de edición Nombre, escriba un nombre descriptivo para el grupo de

casillas de verificación. No utilice espacios para separar las palabras.

Page 114: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

113

5. En el área Label cambie los nombres por defecto por los que desee o elimínelos

pulsando el botón con un signo (-) en el área Casillas de verificación.

6. Para añadir nuevas casillas pulse sobre el botón con un signo (+) en el área Casillas de

verificación.

7. Utilice las flechas Arriba y Abajo para posicionar las casillas en el orden que desee.

8. En el área Disponer utilizando active Saltos de línea (etiquetas <br>) o

Tabla dependiendo de cómo desee colocar las casillas de verificación.

9. Pulse el botón Aceptar. Dreamweaver genera el grupo de casillas de verificación.

10. Para finalizar, podremos utilizar el panel Propiedades para activar y desactivar las

casillas que desee.

10.8. Insertar botones de opción

A diferencia de las casillas de verificación vistas anteriormente, los botones de opciones funcionan como un grupo donde sólo es posible escoger una única opción de las disponibles. De este modo, si después de haber hecho una primera elección, cambiamos de parecer seleccionando otra opción, se anulará la anterior.

Insertar botones de opciones

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el comando Botón de

opción, o bien sobre Grupo de opción si necesita más de un botón.

3. En este último caso, se abre el cuadro de diálogo Grupo de opción mostrando por

defecto dos botones.

4. En el campo de edición Nombre, escriba un nombre descriptivo para el grupo de

botones de opciones. No utilice espacios para separar las palabras.

5. En el área Label cambie los nombres por defecto por los que desee o elimínelos

pulsando el botón con un signo (-) en el área Botones de opción.

Page 115: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

114

6. Para añadir nuevas casillas pulse sobre el botón con un signo (+) en el área Botones

de opción.

7. Utilice las flechas Arriba y Abajo para posicionar las casillas en el orden que desee.

8. En el área Disponer utilizando active Saltos de línea (etiquetas <br>) o

Tabla dependiendo de cómo desee colocar las casillas de verificación.

9. Pulse el botón Aceptar. Dreamweaver genera el grupo de botones de opciones.

10. Para finalizar, podremos utilizar el panel Propiedades para activar y desactivar las

casillas que desee las haya creado de forma individual o en grupo.

10.9. Creación de menús desplegables

Los menús emergentes se muestran como cuadros de texto de una única línea con un botón flecha en su parte derecha; cuando pulsamos ese botón, las otras opciones aparecen en forma de lista o menú. Al seleccionar una de las opciones, la lista se cerrará y el valor seleccionado será el que se muestre en el cuadro de texto.

Crear un menú desplegable

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Seleccionar

(Lista/Menú).

3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

4. En el campo de edición Seleccionar, escriba un nombre exclusivo para el menú. No

utilice espacios para separar las palabras.

5. En el área Tipo, deje activa la opción Menú.

6. Haga clic con el ratón en el botón Valores de lista para añadir las distintas opciones

del menú emergente. Se abre el cuadro de diálogo Listar valores.

Page 116: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

115

7. Coloque el cursor del ratón en el campo Etiqueta de elemento y escriba el texto que

aparecerá en el menú.

8. En el campo Valor, escriba el texto o los datos que desee que sean enviados al

servidor cuando el usuario seleccione esta opción.

9. Para añadir otro elemento al menú, haga clic con el ratón en el botón con forma de

signo más (+) y repita los pasos anteriores.

10. Una vez añadidos todos los elementos del menú, haga clic en Aceptar para cerrar el

cuadro de diálogo.

11. Utilizando la parte ampliada del panel Propiedades, podremos seleccionar qué

elemento se mostrará, por defecto, cuando el menú se muestre en un navegador.

10.10. Creación de listas

Las listas desplazables nos permitirán configurar varias opciones en un espacio limitado. A diferencia de los menús delegables, estas listas presentan dos flechas: una apuntando hacia arriba y otra hacia abajo. Podremos controlar la altura permitiéndonos mostrar una o más opciones simultáneamente; y nos permitirán seleccionar más de una opción a la vez.

Crear una lista de desplazamiento

1. Coloque el cursor del ratón en el interior del formulario. 2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Seleccionar

(Lista/Menú). 3. En el área Tipo del panel Propiedades, active la opción Lista. Se muestran los

atributos que pueden modificarse.

4. En el campo de edición Seleccionar, escriba un nombre exclusivo para la lista. No utilice espacios para separar las palabras.

5. En el campo de edición Alto, escriba el número de líneas que se mostrarán en la lista. 6. Si desea permitir que los usuarios seleccionen más de una opción de la lista, active la

casilla Permitir múltiples situada en el área Selecciones. 7. Haga clic con el ratón en el botón Valores de lista para añadir las distintas opciones

de la lista. Se abre el cuadro de diálogo Listar valores.

Page 117: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

116

8. Coloque el cursor del ratón en el campo Etiqueta de elemento y escriba el texto que

aparecerá en la lista.

9. En el campo Valor, escriba el texto o los datos que desea enviar al servidor cuando el

usuario seleccione esta opción.

10. Para añadir otro elemento a la lista, haga clic con el ratón en el botón con forma de

signo más (+) y repita los pasos anteriores.

11. Una vez añadido todos los elementos de la lista, haga clic en Aceptar para cerrar el

cuadro de diálogo.

12. Utilizando la parte ampliada del panel Propiedades, podremos establecer qué

elemento se mostrará, por defecto, cuando la lista se muestre en un navegador.

10.11. Creación de botones para activar el formulario

Los botones son esenciales para los formularios ya que nos permitirán controlar las operaciones que éstos realicen. Podremos utilizarlos para enviar al servidor los datos introducidos por el usuario o para restablecer un formulario.

Crear un botón de texto

1. Coloque el cursor del ratón en el interior del formulario. 2. En la categoría Formularios del panel Insertar, haga clic sobre el Botón. 3. El panel Propiedades cambia, mostrando los atributos que pueden modificarse. 4. En el campo de edición Nombre del botón, escriba un nombre para éste. No utilice

espacios para separar las palabras. 5. En el campo Valor, escriba el texto que desea que se muestre en el botón. 6. Para finalizar, en el área Acción, active el tipo de botón que desea crear:

Enviar formulario: Es la opción activa por defecto y permite enviar el formulario para su procesamiento.

Restablecer formulario: Permite restablecer un formulario de forma que los usuarios puedan corregir la información antes de enviarla.

Ninguno: Permite llevar a cabo otro tipo de procesos previamente definidos mediante una secuencia de comandos.

Crear un botón gráfico

1. Coloque el cursor del ratón en el interior del formulario. 2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de

imagen. 3. En el cuadro de diálogo Seleccionar origen de imagen, localice la imagen que quiera

utilizar y pulse en el botón Aceptar. 4. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

5. En el campo de edición Campo imagen, escriba un nombre para el botón. No utilice espacios para separar las palabras.

6. En el campo Alt, escriba el texto que desea que aparezca en lugar de la imagen en los navegadores que sólo admiten texto.

Page 118: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

117

10.12. Insertar campo de archivo

Los campos de archivo son los elementos menos utilizados en los formularios. Su función principal consiste en permitir que cualquier archivo sea adjuntado al formulario y enviado a un servidor con el resto de datos. Hoy día ha sido suplantado por los métodos modernos de correo electrónico, que también permiten adjuntar archivos a cualquier mensaje.

Insertar un campo de archivo

1. Coloque el cursor del ratón en el interior del formulario.

2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de

archivo.

3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

4. En el campo de edición Campo archivo, escriba un nombre. No utilice espacios para

separar las palabras.

5. Podremos cambiar la longitud del campo de texto, insertando un nuevo valor en el

cuadro de texto Ancho car (Ancho en caracteres).

6. Para finalizar, también podremos limitar el número de caracteres, introduciendo un

valor en el cuadro de edición Car máx (Caracteres máximos).

10.13. Práctica: Diseño Web parte VII

En esta nueva práctica, vamos a empezar creando un nuevo documento denominado “Info.htm”. En esta página, crearemos un formulario donde el navegante pueda enviar cualquier comentario o información sobre la película Spider-Man. A lo largo de la práctica, aprenderá a crear campos de textos simples y de varias líneas, menús desplegables, botones de opciones, casillas de verificación y botones para enviar el formulario a una dirección de correo electrónico. Para finalizar, vincularemos la página creada para que esté accesible desde la página “Menu.htm”.

Page 119: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

118

Recuerda…

Para poder insertar un formulario en el contorno que no se encuentra visible en la ventana de documento hay que activar la opción Elementos invisibles de la categoría Ayudas visuales en el menú Ver.

El número de caracteres que permite los campos de texto para insertar Dreamweaver son de 20 caracteres.

No se puede utilizar los campos de textos ocultos para introducir datos, son campos invisibles que se colocan en un documento para recopilar o enviar una información.

En un documento Dreamweaver existen 3 campos de textos para que el usuario escriba unas respuestas, estos son:

Campos de texto de una línea: Se utilizan para proporcionar respuestas compuestas por una sola palabra o una frase corta como, por ejemplo, un nombre o una dirección.

Campos de contraseña: Son campos de texto en los que, cuando el usuario escribe, aparecen asteriscos quedando oculto el texto.

Campos de texto de varias líneas: Ofrecen mayor espacio al visitante para escribir la respuesta. Podremos delimitar fácilmente el número de caracteres o el número de líneas que puede introducir el visitante. Para crear las distintas entradas de un formulario, nos vamos a la Barra de herramientas Insertar y escogemos la pestaña de Categoría Formularios.

Page 120: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

119

11. BIBLIOTECA

A lo largo del siguiente capítulo, veremos cómo las bibliotecas de Dreamweaver pueden ayudarnos a crear páginas Web además de facilitarnos su mantenimiento, ya que nos permitirán modificar cientos de páginas en cuestión de segundos. La biblioteca de un sitio almacena los elementos que queramos, permitiéndonos ver y organizar estos archivos al mismo tiempo que estamos creando un documento HTML.

11.1. Almacenamiento de elementos en Dreamweaver

Las bibliotecas constituyen un medio de almacenaje para todos aquellos elementos de una página (imágenes, texto y otros objetos) que solemos reutilizar o actualizar con frecuencia en un sitio Web.

Cuando colocamos en un documento un elemento almacenado en la biblioteca de Dreamweaver, en realidad, estamos insertando una copia del código HTML de ese elemento en el documento y, además, se añade un comentario que hace referencia al elemento original. Dreamweaver almacena los elementos de biblioteca en una carpeta llamada LIBRARY dentro de la carpeta raíz local del sitio en el que estemos trabajando. Cada sitio tendrá su propia biblioteca.

11.2. La paleta Activos La paleta Activos será la encargada de administrar los elementos repetidos de Dreamweaver, es decir, de albergar la biblioteca. Gracias a esta paleta, podremos ahorrarnos muchas horas de trabajo durante el proceso de creación y mantenimiento del diseño de una página. La paleta Activos se muestra como una ventana dividida horizontalmente en dos paneles que podremos arrastrar y cambiar de tamaño. La parte inferior muestra la lista de los elementos de la biblioteca del sitio actual. Al seleccionar uno de estos elementos, la parte superior de la paleta muestra una imagen del elemento. Podremos cambiar el tamaño de los paneles situando el cursor del ratón sobre uno de los bordes de separación y haciendo clic sobre él para arrastrarlo hasta la nueva posición.

Page 121: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

120

11.3. Visualizar los elementos de un documento

En la siguiente explicación, veremos cómo a medida que trabajamos con un documento se van creando los elementos de su biblioteca partiendo de cualquier componente que tengamos, ya sea un texto, una tabla, un formulario, applets de Java, plug-ins, elementos Actives, barras de navegación e imágenes.

Acceder a la paleta Activos

En el menú Ventana pulsamos la opción Activo o la tecla rápida F11. Se nos aparece una ventana con los archivos, donde podremos trabajar con diferentes elementos, como son imágenes, textos, colores, vínculos, plantillas, películas, biblioteca, etc.

Enlace vídeo: Acceder a la paleta Activos.

11.4. Insertar un elemento de biblioteca

En la siguiente explicación, veremos lo fácil que resulta añadir un elemento de biblioteca en la ventana de documento de Dreamweaver. Al colocar un elemento en una página Web, se inserta una copia en el documento y, además, se añade en el código HTML un comentario que hace referencia al elemento original.

Insertar un elemento de biblioteca en un documento

Para ello, situar el cursor del ratón sobre la ventana del documento donde se quiere insertar la imagen. En el panel Activos seleccione la categoría imágenes y escoja la imagen que desee insertar en el documento, con el ratón arrastrera a la zona donde desea insertarla.

Page 122: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

121

De igual modo se puede hacer también seleccionando la imagen y pulsando el botón Insertar que se encuentra debajo del panel Activos.

Enlace vídeo: Insertar un elemento de biblioteca en un documento.

11.5. Modificar elementos de biblioteca Cuando realizamos una modificación de un elemento, podemos actualizar todos los documentos que lo utilicen. Si decidimos no actualizar las distintas instancias, los documentos permanecerán asociados con el elemento de biblioteca para actualizarlos posteriormente. También podremos cambiar el nombre de los elementos de biblioteca para romper su conexión con documentos o plantillas; eliminar un elemento de la biblioteca; y volver a crear un elemento de biblioteca perdido.

Actualizar los documentos que usan un elemento de biblioteca

1. En el menú Modificar, seleccione el comando Biblioteca y, en el submenú que

aparece, escoja la opción Actualizar páginas. Se abre el cuadro de diálogo con el mismo nombre.

2. En el menú emergente Buscar en escoja una de las siguientes opciones: Todo el sitio: Se actualizan todas las páginas del sitio seleccionado en

la lista desplegable de la derecha. Archivos que usan: Se actualizan todas las páginas del sitio que usan el

elemento de biblioteca seleccionado en la lista desplegable de la derecha.

3. A continuación, asegúrese de que Elementos de biblioteca esté activado en el área Actualizar.

Page 123: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

122

4. Si desea actualizar también las plantillas, asegúrese de que también esté activada la opción Plantillas situada justo debajo.

5. Para finalizar, haga clic en el botón Iniciar. Si se activó la opción Mostrar registro, Dreamweaver nos proporciona información sobre los archivos que intenta actualizar, indicando si han sido actualizados correctamente.

Recuerda…

Si realizamos una modificación a un elemento incluido en la biblioteca debemos actualizar los documentos que usan ese elemento.

La función de la biblioteca es almacenar aquellos elementos de una página que solemos reutilizar o actualizar con más frecuencia en un sitio Web.

Es posible insertar en un documento un elemento incluido en la biblioteca arrastrándolo hasta la ventana de documento.

La paleta Activos será la encargada de albergar la biblioteca.

Page 124: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

123

12. PLANTILLAS

Una plantilla es un documento que utilizaremos para crear múltiples páginas con un mismo diseño. A lo largo del siguiente capítulo, veremos cómo, al crear una plantilla, podremos indicar qué elementos de la página deberán permanecer constantes (bloqueados) en los documentos que creemos basados en esa plantilla, y cuáles podrán modificarse. Éstas resultarán especialmente útiles cuando trabajemos en colaboración con otros diseñadores, de esta forma, puede haber un diseñador que controle los diseños de la página mientras que otros pueden añadir el contenido, pero sin tener autorización para modificar el diseño.

12.1. Creación de plantillas

A lo largo de la siguiente explicación, veremos las dos formas que nos ofrece Dreamweaver para crear plantillas. Podremos crearlas a partir de un documento HTML existente, que después modificaremos para que se ajuste a nuestras necesidades, o bien, podremos crear una plantilla partiendo de un documento HTML en blanco.

Las plantillas se guardan con la extensión *.dwt en la carpeta TEMPLATES de nuestro sitio Web. Si no existiera esa carpeta, Dreamweaver la crearía de forma automática.

Crear una plantilla nueva desde el panel Activos

En el menú Ventana seleccionamos la opción Activos o pulsando la tecla rápida F11 se nos abre el panel Activos. En la categoría de la izquierda pulsamos el icono Plantillas, en la parte inferior pulsamos Nueva plantilla e introducimos el nombre.

Enlace vídeo: Crear una plantilla nueva desde el panel Activos.

Page 125: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

124

NOTA: Para cambiar el nombre a una plantilla desde la paleta Activos, procederemos del mismo modo que cuando renombramos archivos en Windows. Haga un primer clic para seleccionar la plantilla que desea renombrar y, tras una breve pausa, realice otro segundo para editar el nombre. No haga un doble clic en el nombre, ya que abrirá la plantilla.

Guardar un documento existente como plantilla

Nos vamos al menú principal Archivos y pulsamos Abrir, en el buscamos el archivo HTML que deseamos nos sirva como plantilla. Seguidamente volvemos abrir el menú Archivo y pulsamos la opción Guardar como plantilla nos aparece una ventana para guardar nuestra plantilla.

Hay que seleccionar el sitio o carpeta local donde guardar nuestra plantilla. Se le puede dar una breve descripción de nuestra plantilla y por último introducir un nombre. Aplicamos el nombre a la plantilla y pulsamos Guardar. Seguidamente Dreamweaver nos solicita si queremos actualizar los vínculos y pulsamos SI. Aparece en el panel Activos la plantilla creada con extensión .dwt y sus vínculos.

Enlace vídeo: Guardar un documento existente como plantilla.

12.2. Configurar las propiedades de una plantilla

Los documentos creados a partir de una plantilla heredarán las propiedades de ésta, exceptuando el título de la página. En un documento basado en una plantilla, podremos cambiar el título del documento, pero se ignorarán los cambios que se realicen en las demás propiedades de página. Si se aplica una plantilla a un documento y luego es necesario cambiar las propiedades de la página del mismo, deberemos modificar las propiedades de la plantilla y luego actualizar las páginas que utilizan dicha plantilla.

Modificar las propiedades de una plantilla

1. Abra el archivo de plantilla que desee y, en el menú Modificar, seleccione la

opción Propiedades de la página.

Page 126: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

125

2. Utilice el cuadro de diálogo Propiedades de la página para especificar las opciones que

desee modificar y haga clic en el botón Aceptar para guardar los cambios efectuados en

la plantilla.

3. Para actualizar el documento abierto con la versión modificada de la plantilla, en el

menú Modificar, seleccione Plantillas y, en el submenú que aparece, escoja la

opción Actualizar página actual.

4. Si desea actualizar un sitio completo con la plantilla modificada, en primer lugar,

seleccione Plantillas en el menú Modificar y, en el submenú que aparece, escoja la

opción Actualizar páginas. Se abre el cuadro de dialogo con el mismo nombre.

5. En el menú emergente Buscar en, escoja una de las siguientes opciones:

Todo el sitio: Se actualizan todas las páginas del sitio seleccionado en la

lista desplegable de la derecha.

Archivos que usan: Se actualizan todas las páginas del sitio que usan la

plantilla seleccionada en la lista desplegable de la derecha.

6. A continuación, asegúrese de que la casilla de verificación Plantillas esté activada en el

área Actualizar.

7. Para finalizar, haga clic en el botón Iniciar. Si se activó la opción Mostrar registro,

Dreamweaver nos proporciona información sobre los archivos que intenta actualizar,

indicando si han sido actualizados correctamente.

Page 127: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

126

12.3. Definición de regiones editables en una plantilla

En una plantilla, las regiones editables son las partes de la página que se pueden cambiar en los archivos basados en esa plantilla. Las regiones bloqueadas (no editables) son las partes del diseño de la página que permanecerán constantes de una página a otra.

Al crear una plantilla nueva, todas sus regiones aparecen bloqueadas; por ello, para que una plantilla sea realmente útil, es preciso hacer editables algunas regiones de la misma.

Crear regiones editables en una plantilla

Seleccione el texto o el contenido de un documento o una plantilla abierta que desea convertir editable dentro de la plantilla.

Clic con el botón derecho del ratón aparece un menú contextual, pulse Plantilla y seguidamente en el submenú pulse Nueva región editable. Introduzca el nombre y pulse Aceptar, en el documento HTML aparecerá la región editable. Se puede hacer tantas como se desee.

Enlace vídeo: Crear regiones editables en una plantilla.

Crear una región editable vacía

Para crear una región editable vacía coloque el cursor del ratón en cualquier parte del documento HTML, donde desee crearla y a continuación pulse el botón derecho del ratón y en el menú contextual seleccione Plantilla y en el submenú pulse la opción Nueva región editable. Aparece una ventana para introducir el nombre de la nueva región editable que vamos a crear, pulsamos Aceptar, y seguidamente nos aparece la región editable vacía, en el lugar que habíamos posicionado el cursor del ratón.

NOTA: Podremos marcar una tabla entera o una celda individual de una tabla como región editable de una plantilla. Las capas y el contenido de las mismas se comportarán como elementos distintos; al hacer editable una capa, podremos cambiar de posición tanto la capa como su contenido, mientras que, al hacer editable el contenido de una capa, sólo podremos cambiar el contenido de la misma y no su posición.

Enlace vídeo: Crear una región editable vacía.

Page 128: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

127

12.4. Bloquear una región editable

Si hemos definido una región editable dentro de una plantilla y después deseamos bloquearla de nuevo, Dreamweaver nos proporciona el comando Quitar formato de plantilla para facilitarnos esta operación.

NOTA: No podremos bloquear una región editable en un documento basado en una plantilla; solamente podremos bloquear una región en una plantilla.

Bloquear una región de una plantilla

1. Seleccione el texto o la región que desee bloquear en la plantilla. 2. Presione sobre él con el botón secundario del ratón y se desplegará un menú contextual. 3. Desplácese hasta la opción Plantillas y, seguidamente hasta la orden Quitar formato de

plantilla. 4. La región quedará bloqueada y el marco resaltado que delimitaba el área desaparecerá.

12.5. Creación de documentos basados en plantillas

Para finalizar este capítulo, vamos a aprender a usar una plantilla como punto de partida para la creación de un nuevo documento, o a aplicarla a un documento existente.

Crear un nuevo documento basado en una plantilla

1. En el menú Archivo, seleccione la opción Nuevo. Se abre el cuadro de diálogo Nuevo

documento. 2. Seleccione la opción Plantilla en blanco.

3. Dentro de la lista Tipo de plantilla, localice el sitio de donde desee seleccionar la plantilla.

4. En la lista de la derecha se mostrarán las plantillas pertenecientes al sitio seleccionado y si presiona sobre cualquiera de ellas, podrá ver una vista previa.

5. Para finalizar, haga clic en el botón Crear.

Page 129: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

128

Aplicar una plantilla a un documento existente de Dreamweaver

1. Haga clic con el cursor del ratón en la vista de diseño de la ventana de documento.

2. En el menú Modificar, seleccione Plantillas y, en el submenú que aparece, escoja la

opción Aplicar plantilla a página. Se abre el cuadro de diálogo Seleccionar plantilla.

3. En la lista desplegable Sitio, localice el sitio de donde desee seleccionar la plantilla.

4. A continuación, seleccione una plantilla de la lista Plantillas y haga clic en el

botón Seleccionar.

12.6. Práctica: Diseño Web parte VIII

Esta práctica la vamos a dedicar principalmente a conocer más en profundidad al director de la película Spider-Man. Para ello, empezaremos creando el documento “Raimi.htm” que vincularemos al menú de la página principal. En este documento, colocaremos información y algunas imágenes del director. A continuación, crearemos una plantilla para crear las fichas de las películas más interesantes dirigidas por Sam Raimi. Para finalizar, crearemos zonas editables dentro de la plantilla y la aplicaremos a documentos nuevos para facilitar el trabajo de creación de todas las fichas.

Recuerda…

El panel Activos lo utilizaremos para cambiar el nombre de una plantilla.

Para crear una región editable en una plantilla utilizaremos la opción Nueva región editable en el submenú Plantillas del menú contextual.

Para cambiar el color de resalte de las regiones editables de una plantilla utilizaremos la categoría Resaltando del cuadro de diálogo Preferencias.

En la carpeta LIBRARY que se crea en el raíz del sitio Web es donde almacena Dreamweaver los elementos de biblioteca.

Para proceder a aplicar una plantilla a un documento existente de Dreamweaver utilizaremos la opción Aplicar plantilla a página en el submenú Plantillas del menú Modificar.

Page 130: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

129

13. ELEMENTOS MULTIMEDIA

Aunque hoy en día todavía no hay un estándar de vídeo que se haya impuesto a los demás, podemos decir, sin miedo a equivocarnos, que los formatos de vídeo más populares en la Web son QuickTime y RealVideo.

A lo largo del siguiente capítulo, veremos que el usuario podrá descargar un vídeo y reproducirlo a continuación mediante algún programa auxiliar como el Reproductor multimedia de Windows.

También aprenderemos a colocar vídeos de QuickTime directamente en un documento HTML y por último, le mostraremos cómo reproducir vídeos con RealPlayer, que es un sistema de flujo de vídeo continuo que nos permitirá reproducir una película a medida que la estamos descargando. Para finalizar, vamos a ver cómo insertar elementos multimedia cómo animaciones Flash o un sonido.

13.1. Vídeo en la red

A cualquier persona que no esté un poco familiarizada con los PC e Internet, le resultará difícil entender que con la tecnología que se ha desarrollado para la Web, no pueda incorporarse algo tan elemental como un vídeo. Las complicaciones se deben fundamentalmente a que la conversión digital de cualquier archivo de vídeo analógico supone un volumen de datos enorme. Para solucionar este problema, se han desarrollado varias estrategias que nos permitirán la creación, almacenamiento y reproducción de vídeos digitales. Estas estrategias consisten en la utilización de diferentes formatos de archivos, lo cual implica que el usuario debe de disponer de un sistema de reproducción adecuado al tipo de archivo que desee ver. A continuación, pasaremos a explicar brevemente los distintos formatos de vídeo más utilizados en la red:

MPEG: Desarrollado por Motion Picture Experts Group, este formato es a las imágenes

en movimiento, lo que el formato JPEG a las imágenes fijas. Las extensiones utilizadas

para este tipo de archivos son *.mpg y *.mpeg.

QuickTime: Desarrollado originalmente por Apple como una solución multiplataforma,

es uno de los más populares en la red. Además del QuickTime normal, Apple ha

desarrollado el QuickTime VR, que proporciona una visión panorámica interactiva. Las

extensiones utilizadas para este tipo de archivos son *.qt y *.mov.

RealVideo: Desarrollado por RealNetworks, permite la reproducción continua tanto de

audio como de vídeo. Las extensiones utilizadas para este tipo de archivos son *.ra,

*.rpm y *.ram.

Video for Windows: Desarrollado por Microsoft para ser utilizado con los

reproductores instalados en los sistemas operativos Windows, tiene la finalidad de

reproducir cualquier archivo *.avi.

Flash Video (FLV): Es el formato de vídeo utilizado para transmitir video por Internet

usando Adobe Flash Player. Utiliza la extensión de archivo *.flv o pueden ser

incrustados dentro de archivos *.swf. Entre los sitios más notables que utilizan el

formato FLV se encuentran YouTube, Google Video, Reuters.com, Yahoo! Video y

MySpace.

Page 131: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

130

13.2. Vincular vídeos en Dreamweaver

Una vez que tenemos digitalizado el vídeo, la forma más sencilla de que esté disponible en nuestra Web es tratarlo como un enlace cualquiera. De este modo, cuando alguien seleccione el enlace, podrá descargar el vídeo en su PC.

Incorporar un archivo de vídeo en un documento de Dreamweaver

Para comenzar seleccione el texto o imagen que desea vincular a un archivo de vídeo. Abra el panel de Propiedades, seleccionando el menú Ventana y pulsando Propiedades. Diríjase al panel de Propiedades y en la casilla vínculo inserte la dirección donde se encuentra el archivo de video.

En la casilla ALT podrá especificar el tamaño del video u otra información relevante, que aparecerá cuando seleccionamos la imagen con el ratón.

Enlace vídeo: Incorporar un archivo de vídeo en un documento de Dreamweaver.

13.3. Reproducción de vídeos On Line

El navegador Internet Explorer de Microsoft soporta el atributo dynsrc que es capaz de reproducir un vídeo on-line. Los vídeos se verán dentro de la misma página Web junto con el resto de elementos del documento como texto e imágenes. El atributo se insertará en la etiqueta de la siguiente manera:

Con esta sintaxis, en un navegador que no soporte el atributo dynsrc, se representará la imagen referenciada, mientras que, en el navegador Internet Explorer, se reproducirá automáticamente el vídeo.

Page 132: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

131

Visualizar un vídeo directamente desde la Web

1. Coloque el cursor del ratón en el lugar de la ventana de documento en el que quiera

insertar la imagen.

2. Si la paleta Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la

opción Insertar.

3. Asegúrese de que la categoría Común esté activa en el panel y haga clic en el

botón Imágenes: Imagen.

4. Cuando se abra el cuadro de diálogo Seleccionar origen de imagen, localice y cargue

la imagen que quiera insertar.

5. En la parte superior de la ventana de documento, pulse el botón Código.

6. Localice la etiqueta <img> y añada el código del atributo dynsrc. Recuerde que en

este atributo debe especificar la ruta del archivo de vídeo.

7. Si su navegador no soporta el atributo dynsrc al visualizar la página, se representará

la imagen que insertó anteriormente.

13.4. Atributos de QuickTime

Para poder visualizar una película de QuickTime en una página Web, los visitantes necesitan tener

instalado un plug-in de QuickTime. Las instrucciones necesarias para insertar cualquier contenido

que requiera un plug-in se almacenarán en la etiqueta <EMBED>.

Page 133: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

132

Añadir una película QuickTime a un documento de Dreamweaver

1. Sitúe el cursor del ratón donde quiera insertar el vídeo de QuickTime. 2. Despliegue el menú Insertar de la barra de menús y seleccione la opción Media. 3. En el submenú que se muestra, presione sobre la orden Plug-in. Se abre el cuadro de

diálogo Seleccionar archivo. 4. En el campo de edición Nombre, escriba el nombre y la ruta de acceso del archivo

QuickTime que desea abrir. 5. Para terminar, pulse Aceptar. 6. En el panel Propiedades, introduzca la anchura y la altura en los campos de

edición An y Al.

7. En el campo de edición URL plg, escriba la dirección de Internet a la que desee que se dirijan los visitantes que no tengan instalado el plug-in requerido. Para las películas de QuickTime, la dirección es http://www.apple.com/quicktime/download/.

8. Para finalizar, si lo desea y para comprobar que todo es correcto, pulse el botón Reproducir para previsualizar la película del mismo modo que ocurriría si estuviera en la red.

9. Si lo deseamos, podremos pulsar el botón Parámetros para configurar los parámetros de QuickTime. Observe la tabla que aparece a continuación; en ella, se explicarán los parámetros que podremos utilizar:

Page 134: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

133

13.5. Insertar RealVídeo en un documento HTML

El primer sistema de flujo de vídeo lo desarrolló RealNetworks. Esta empresa ofrece un reproductor multimedia gratuito llamado RealPlayer para poder ver o escuchar el contenido de estos sistemas. RealVideo utiliza su propio software de servidor (RealServer) para transmitir archivos de vídeo codificados. En vez de llamar al archivo de vídeo directamente, RealVideo utiliza un sistema de meta archivos para enlazar con el servidor y el archivo de vídeo. Un meta archivo no es más que un archivo de texto donde se especifica el URL que apunta al servidor y al archivo de vídeo. A continuación, puede ver las distintas extensiones que utiliza este sistema:

*.rm: Archivo de RealVideo.

*.ra: Archivo de RealAudio.

*.ram: Meta archivo que ejecuta una sesión independiente de RealPlayer.

*.rpm: Meta archivo que carga el plug-in de RealPlayer.

Crear un meta archivo de RealVideo

1. Abra un editor de texto y escriba las líneas necesarias para apuntar al servidor y al vídeo

que desea visualizar.

2. RealVideo direcciona usando el protocolo rtsp:// (Real Time Streaming Protocol). El

archivo de texto contendrá líneas de la siguiente forma

genérica: rtsp://servidor/ruta/archivo

3. Así, por ejemplo, si queremos reproducir un vídeo concreto, el meta archivo indicará la

ruta donde se encuentra el vídeo a visualizar.

Insertar RealVideo usando un enlace

1. Seleccione el texto o la imagen que desee utilizar como enlace al archivo de vídeo. 2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la

opción Propiedades 3. En el campo de edición Vínculo, escriba la ruta y el nombre de archivo de vídeo o haga

clic en el icono de carpeta, situado a la derecha de dicho campo, para localizar y seleccionar un archivo.

13.6. Inserción de archivos FLV

Con Dreamweaver podremos añadir fácilmente vídeos FLV a las páginas Web sin necesidad de utilizar la herramienta de creación de Flash. Para poder empezar, debe disponer de un archivo FLV codificado. El programa se encargara de insertar 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.

Page 135: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

134

Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio:

Descarga progresiva de vídeo: Descarga el archivo FLV en el disco duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo “descarga y reproducción”, la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que haya finalizado la descarga.

Flujo de vídeo: Transfiere el contenido de vídeo y lo reproduce en una página Web transcurrido un breve periodo de búfer que garantice una reproducción fluida. Para activar el flujo de vídeo en las páginas Web, debe tener acceso a Adobe® Flash® Media Server. Debe contar con un archivo FLV codificado para poder utilizarlo en Dreamweaver.

NOTA: Al igual que sucede con los archivos SWF, al insertar un archivo FLV, Dreamweaver inserta código que detecta si el usuario dispone de la versión correcta de Flash Player para ver el vídeo. Si el usuario carece de la versión correcta, la página muestra contenido alternativo que solicita al usuario que descargue la versión más reciente de Flash Player.

Inserción y configuración de un archivo FLV

Para insertar y configurar un archivo FLV en nuestro documentó HTML diríjase al menú Insertar y pulse la opción Media, en el submenú seleccione FLV. A continuación nos aparecerá un cuadro de diálogo que nos permite configurar el tipo de video, la ruta del archivo FLV, aspecto, ancho y alto, reproducción y rebobinado automático, etc.

En el tipo de vídeo seleccionamos Descarga progresiva del vídeo. En la URL introducimos la ruta relativa donde se encuentra el archivo FLV, que puede ser tanto un archivo ubicado en nuestra carpeta local como en internet. En la opción aspecto elegimos el que más nos convenga para nuestro diseño y presentación. Introducimos el tamaño, si sabemos el ancho y alto de nuestro video o de lo contrario pulsamos el botón Detectar tamaño. Activamos Reproducción automática, para cuando se accede a nuestra página automáticamente se ejecuta el vídeo y el rebobinado automático, nos permite continuar con la reproducción hasta que el usuario lo interrumpa o lo detenga.

Enlace vídeo: Inserción y configuración de un archivo FLV.

Page 136: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

135

13.7. Películas Flash (SWF)

Las películas Flash son animaciones, cuyos archivos tienen las extensiones SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, así como en banners publicitarios o en botones. Flash es el elemento multimedia más empleado en las páginas web que se desarrollan hoy día. Estas películas pueden crearse mediante el programa Adobe Flash. Para poder ser visualizadas por el navegador es necesario que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador o puede hacerlo directamente desde Internet.

Insertar una película de Flash en un documento de Dreamweaver

1. En el menú Insertar seleccione la opción Media y a continuación en el nuevo

submenú que aparece escoja la opción SWF o pulse la combinación de teclas pulsando CTRL+ALT+F.

2. En el cuadro de diálogo Seleccionar SWF localice el archivo de Flash que desee insertar en nuestro documento y pulse sobre el botón Aceptar.

3. Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

4. Veamos las opciones más importantes que nos ofrece el panel Propiedades cuando

tenemos seleccionado el archivo Flash que acabamos de abrir.

5. Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar el botón Editar.

6. La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

7. La otra es la opción Reproducción automática, que al estar activada por defecto y que indica que nada más cargarse la página comenzará a reproducirse la película Flash dentro de la página. Si esta opción no estuviera activada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desactivar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

8. El desplegable Calidad nos permite configurar la calidad de visualización del archivo SWF, cuanto más baja sea la calidad, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.

Page 137: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

136

9. Con el desplegable Escala podremos elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá toda la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.

10. El desplegable Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

11. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).

12. El botón Reproducir nos permite ver la película.

NOTA: Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

13.8. Sonido

Hoy día no es muy usual incluir sonidos en una página Web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan anularlo. Siempre es mejor poder hacer eso que el usuario abandone la página amargado por dicha música que no siempre tiene porque ser de su gusto.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Insertar un archivo de sonido en un documento de Dreamweaver

Para ello, nos vamos al menú Insertar, seleccionamos la opción Media y en el submenú pulsamos Plug-in. Nos aparece una ventana de diálogo para seleccionar el archivo de sonido: nombre, ruta y tipo.

Page 138: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

137

Una vez introducido los datos del archivo de sonido pulsamos Aceptar. Es importante destacar que los archivos de sonido solamente se reproducen una sola vez. Si queremos cambiar alguno de estos parámetros debemos ampliar el panel de Propiedades y pulsar el botón Parámetros que aparece en la parte baja del panel apareciendo la siguiente ventana:

NOTA: En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.

Lo más habitual en la Web es insertar el sonido empleando archivos de Flash. Esto hace que no se necesiten plugins, sólo poder reproducir archivos SWF. Además, nos permite crear los controles de una forma personalizada.

Enlace vídeo: Insertar un archivo de sonido en un documento de Dreamweaver.

13.9. Práctica: Diseño Web parte IX

A lo largo de esta nueva práctica, aprenderemos a vincular y a visualizar vídeos en documentos HTML. Para ello, empezaremos diseñando el documento “Trailers.htm” que vincularemos al menú de la página principal. A continuación, aprenderemos a colocar vídeos en un documento utilizando el atributo dynsrc. Utilizaremos los plug-ins de Dreamweaver para reproducir vídeos QuickTime directamente en un documento HTML y, para finalizar, veremos la forma de vincular un vídeo de RealPlayer de forma directa o utilizando un meta archivo que llame a un vídeo que se encuentre en un servidor

Page 139: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

138

Recuerda…

Los siguientes formatos de vídeos son soportados por Dreamweaver:

- Video for Windows. - MPEG. - QuickTime.

El parámetro AutoPlay de QuickTime permitirá comenzar la reproducción de una película en cuanto se haya descargado suficientemente.

La línea de código loop="true" hace que la reproducción se repita.

Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos.

La categoría Común de la Barra de herramientas Insertar utilizaremos para insertar un objeto plug-in.

El parámetro autostart="false" hace que un archivo de vídeo y audio no se reproduzca automáticamente.

La extensión *.ram utilizan los meta archivos que permiten visualizar un vídeo de RealPlayer.

Page 140: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

139

14. COMPORTAMIENTOS

Los comportamientos son las herramientas más poderosas que nos proporciona Dreamweaver para interactuar con la página Web, con el fin de llevar a cabo diversas modificaciones o de provocar la realización de determinadas tareas.

A lo largo del siguiente tema, aprenderá a hacer que las capas aparezcan y desaparezcan cuando quiera, cómo abrir la ventana de un navegador, reproducir un sonido o detener una película Shockwave; todo ello, sin ni siquiera tener idea de JavaScript.

14.1. Panel Comportamientos

Utilizando el panel Comportamientos de Dreamweaver, podremos añadir comportamientos a los elementos de una página y modificar los parámetros adjuntados con anterioridad a las etiquetas. La etiqueta seleccionada en la ventana de documento aparece en la Barra de título del panel Comportamientos. Los comportamientos que se hayan añadido a un elemento de página aparecerán en la lista de comportamientos ordenados alfabéticamente. A continuación, pasaremos a describir los distintos eventos que pueden asociarse como acciones, utilizando el menú emergente del panel Comportamientos.

onBlur: Se genera cuando un elemento especificado deja de ser el foco de interacción

del visitante.

onClick: Se genera cuando el visitante hace clic en un elemento especificado, como un

vínculo, un botón o un mapa de imagen.

Page 141: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

140

onDblClick: Se genera cuando el visitante hace doble clic en un elemento especificado,

como un vínculo, un botón o un mapa de imagen.

onFocus: Se genera cuando el elemento especificado se convierte en el foco de

interacción del visitante.

onKeyDown: Se genera en el momento en que el visitante presiona cualquier tecla.

No es necesario que el visitante suelte la tecla para que se genere el evento.

onKeyPress: Se genera cuando el visitante presiona y suelta cualquier tecla.

onKeyUp: Se genera en el momento en que el visitante suelta una tecla después de

pulsarla.

onMouseDown: Se genera cuando el visitante pulsa el botón del ratón. No es

necesario que suelte el botón del ratón para que se realice el evento.

onMouseMove: Se genera cuando el visitante mueve el ratón sobre el elemento

especificado.

onMouseOut: Se genera cuando el visitante mueve el ratón afuera del elemento

especificado.

onMouseOver: Se genera cuando el ratón se mueve por primera vez para señalar el

elemento especificado.

onMouseUp: Se genera cuando se suelta un botón del ratón que se encuentra

presionado.

Page 142: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

141

14.2. Añadir un comportamiento

En la siguiente explicación, veremos de forma detenida el procedimiento que tendremos que seguir para añadir un comportamiento usando el panel visto en el apartado anterior. Como pudimos ver, dependiendo de la etiqueta, podemos asignar un evento u otro.

Añadir un comportamiento a su página Web

1. Seleccione un objeto en la ventana de documento de Dreamweaver. 2. En el menú Ventana, seleccione la opción Comportamientos para abrir el panel del

mismo nombre. 3. Haga clic con el ratón sobre el botón (+) para mostrar las opciones disponibles para la

etiqueta del objeto seleccionado.

4. A continuación, elija una opción del menú desplegable. A cada acción le corresponde un cuadro de diálogo con opciones específicas que podremos configurar. A lo largo de este capítulo, veremos las más interesantes.

Page 143: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

142

14.3. Llamar JavaScript

La acción Llamar JavaScript nos permitirá usar el panel Comportamientos para ejecutar cualquier función personalizada o línea de código JavaScript cuando se produzca un evento determinado.

Utilizar el comportamiento Llamar JavaScript

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos. 2. Haga clic sobre el botón de signo más (+) y elija Llamar JavaScript en el menú

emergente que aparece. 3. Introduzca el código JavaScript exacto que ejecuta una función en el cuadro de

edición del cuadro de diálogo Llamar JavaScript.

4. Para finalizar, haga clic sobre el botón Aceptar.

14.4. Cambiar propiedad

Con la acción Cambiar propiedad podremos cambiar dinámicamente las propiedades de las siguientes etiquetas:

Utilizar la acción Cambiar propiedad

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos. 2. Haga clic sobre el botón de signo más (+) y elija Cambiar propiedad en el menú

emergente que aparece. Se abre el cuadro de diálogo Cambiar propiedad.

3. En el menú de lista desplegable Tipo de elemento, elija la etiqueta cuya propiedad desee cambiar.

Page 144: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

143

4. En la lista desplegable ID de elemento, elija el objeto de la página que desee modificar.

5. En el área Propiedad, asegúrese de que la opción Seleccionar esté activa. 6. En la lista desplegable situada justo al lado derecho, seleccione la propiedad a

modificar. 7. A continuación, elija el navegador de destino en la pequeña lista desplegable situada

junto a la anterior. 8. Para finalizar, en el cuadro de texto Nuevo valor, escriba los nuevos valores de la

propiedad y haga clic en el botón Aceptar.

14.5. Comprobar Plug-in

Cuando alguna página de nuestro sitio Web requiere el uso de uno o más plug-ins, podemos utilizar

la acción Comprobar plug-in para detectar si un usuario tiene instalados los plug-ins necesarios para

visualizar la totalidad del contenido de nuestra página. Una vez realizada esta comprobación,

podremos redirigir a los navegantes que tengan el plug-in apropiado a un URL, y a aquellos que no lo

tengan, a otra dirección distinta.

Usar la acción Comprobar Plug-in

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos. 2. Haga clic sobre el botón de signo más (+) y elija Comprobar plug-in en el menú

emergente que aparece. Se abre el cuadro de diálogo Comprobar Plug-in.

3. En el área Plug-in, asegúrese de que Seleccionar esté activado y escoja el plug-in que desee en el menú situado a la derecha. Por defecto, Dreamweaver nos ofrece los cinco plug-ins que es capaz de detectar: Flash, Shockwave, LiveAudio, QuickTime y Windows Media Player.

4. Si desea detectar otro plug-in distinto a los predeterminados, active la opción Introducir y escriba el nombre exacto del plug-in en el campo de edición de la derecha.

5. En el campo de edición Si se encuentra, ir a URL, especifique una dirección para los navegantes que tengan instalado el plug-in. Para hacer que los visitantes que dispongan del plug-in permanezcan en la misma página, deje vacío este campo.

6. En el campo de edición De lo contrario, ir a URL, indique la dirección alternativa a la que redireccionará a los usuarios que no dispongan de dicho plug-in.

NOTA: Internet Explorer no permite detectar la mayoría de los plug-ins. De forma predeterminada, cuando esta detección resulta imposible, se redirecciona al navegante al URL indicado en el campo De lo contrario, ir a URL.

Page 145: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

144

7. Active la opción Ir siempre al primer URL si no es posible detectar para hacer que, de forma predeterminada, Dreamweaver dé por hecho que el visitante dispone del plug-in.

8. Para finalizar, haga clic en el botón Aceptar.

14.6. Mensaje emergente

Utilice la acción Mensaje emergente para mostrar un mensaje de alerta de JavaScript con el texto que desee. Las alertas de JavaScript sólo tienen un botón Aceptar y suelen utilizarse para proporcionar algún tipo de información al visitante.

Crear un mensaje emergente de JavaScript

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Mensaje emergente en el menú que

aparece. Se abre el cuadro de diálogo Mensaje emergente.

3. En el campo de edición Mensaje, escriba el mensaje de alerta que desea que

aparezca.

4. Para finalizar, haga clic en el botón Aceptar.

14.7. Arrastrar capa

Utilice la acción Arrastrar elemento PA para permitir a los visitantes de una página Web que desplacen por la pantalla las capas y todo lo que éstas contengan. Dreamweaver nos permitirá, entre otras cosas:

1. Especificar la dirección en la que el visitante puede arrastrar la capa

(horizontalmente, verticalmente o en cualquier dirección).

2. Elegir el destino hasta el que el visitante puede desplazar la capa.

3. Determinar si la capa debe ajustarse al destino cuando aquélla se encuentre a un

cierto número de píxeles del destino.

4. Proporcionar un método alternativo de recorte, dejando que sólo se pueda arrastrar

una parte de la capa.

5. Permitir un orden distinto de almacenamiento de capas mientras se arrastran o al

liberar el botón del ratón.

6. Programar un comando de JavaScript que se ejecute cuando se alcanza el área de

destino o cada vez que se libere la capa.

NOTA: Para que sea posible ejecutar la acción Arrastrar elemento PA, antes tendremos que insertar

las capas en la ventana de documento. Además, deberemos asociar la acción a la etiqueta <body>.

Page 146: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

145

Utilizar la acción Arrastrar elemento PA

1. Si no tiene una capa creada en la ventana de documento de Dreamweaver, créela en

este momento utilizando cualquiera de los métodos vistos con anterioridad.

2. Seleccione la etiqueta <body> en el selector de etiquetas que se encuentra en la

parte inferior izquierda de la ventana de documento

3. En el menú Ventana, seleccione la opción Comportamientos o, si lo prefiere, pulse la

combinación de teclas MAYÚS+F4.

4. En el panel Comportamientos, haga clic sobre el botón de signo más (+) y

elija Arrastrar elemento PA en el menú emergente que aparece.

5. En el área Elemento PA, utilice el menú desplegable para seleccionar la capa que

desea hacer desplazable.

6. Para limitar el movimiento de la capa, cambie la opción de la lista desplegable

Movimiento de Sin restricciones a Restringido.

7. De forma automática, aparecerán los cuadros de edición Arriba, Abajo,

Izquierda y Derecha. Introduzca los valores en píxeles en los cuadros adecuados para

delimitar el área de movimiento.

8. Para establecer un punto de destino para la capa arrastrada, introduzca sus

coordenadas en los cuadros de edición Izquierda y Arriba del área Destino.

9. Haga clic sobre el botón Obtener posición actual para rellenar estos cuadros de

edición con las coordenadas de la posición actual de la capa.

10. Introduzca un valor en píxeles en el cuadro de edición Ajustar si a menos de, para

determinar lo cerca del destino que el visitante tiene que soltar la capa para que ésta

se ajuste automáticamente.

Page 147: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

146

11. Para especificar opciones adicionales, pulse con el ratón sobre la pestaña Avanzado.

12. En el área Arrastrar selector, seleccione en la lista desplegable la opción Área dentro

del elemento para limitar el área a utilizar como control de arrastre.

13. De forma automática, aparecerán los cuadros de edición Izquierda,

Superior, Ancho y Alto. Introduzca los valores en píxeles en los cuadros adecuados

para delimitar el manejador de arrastre.

14. Para controlar la posición de la capa arrastrada, determine las opciones Al

arrastrar que desee utilizar:

Para mantener la capa en la profundidad actual y no traerla al frente

cuando se arrastre, desactive la casilla de verificación Traer la capa al

frente, luego.

Para cambiar el orden de apilamiento de la capa cuando ésta sea

liberada, seleccione en la lista desplegable la opción Mantener arriba o

Restaurar índice z.

15. Para ejecutar un comando de JavaScript mientras se arrastra la capa, introduzca el

código en el cuadro de edición Llamar JavaScript situado en el área Al arrastrar.

16. En el área Al soltar, podremos configurar un comando de JavaScript que se ejecutará

cuando la capa se suelte sobre el lugar de destino. Para ello, deje activada la opción

Sólo si se ajusta e introduzca el código en el cuadro de edición Llamar JavaScript.

17. Para finalizar, haga clic en el botón Aceptar.

Page 148: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

147

14.8. Ir a URL

Utilizando la acción Ir a URL, Dreamweaver nos permitirá abrir un documento HTML en la ventana actual o en un marco que especifiquemos. Esta acción resulta de gran utilidad para cambiar el contenido de dos o más marcos con un solo clic del ratón. También puede utilizarse para saltar a una nueva página después de un intervalo de tiempo especificado.

Usar la acción Ir a URL

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Ir a URL en el menú emergente que

aparece. Se abre el cuadro de diálogo Ir a URL.

3. En el área Abrir en, elija el destino de su enlace utilizando la lista que se muestra en el

cuadro de la derecha. Esta lista muestra los nombres de todas las anclas o marcos

existentes en un documento de forma automática.

4. En el campo de edición URL, introduzca la ruta y el nombre del archivo a abrir o pulse

con el ratón sobre el botón Examinar para localizar el archivo.

5. Para finalizar, haga clic en el botón Aceptar.

14.9. Abrir ventana del navegador

Con la acción Abrir ventana del navegador, podremos abrir un documento HTML en una nueva ventana. El cuadro de diálogo que corresponde a esta acción, nos permitirá configurar las propiedades de la nueva ventana, incluidos su tamaño, sus atributos principales y su nombre.

Utilizar la acción Abrir ventana del navegador

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Abrir ventana del navegador en el

menú emergente que aparece. Se abre el panel Abrir ventana del navegador.

Page 149: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

148

3. En el cuadro de edición Mostrar URL, introduzca la ruta y el nombre del archivo a

abrir o haga clic con el ratón sobre el botón Examinar para localizar el archivo.

4. Para especificar la forma y el tamaño de la ventana, introduzca los valores de alto y

ancho en los cuadros de edición correspondientes.

5. En el área Atributos, marque las casillas de activación de las propiedades que desee

que tenga la nueva ventana:

Barra de herramientas de navegación: Es la fila de botones del

navegador que, entre otras opciones, incluye Atrás, Adelante, Inicio y

Actualizar.

Barra de menús: Es la zona de la ventana del navegador en la que

aparecen menús tales como Archivo, Edición, Ver, Favoritos y Ayuda.

Barra de herramientas de ubicación: Es la fila de opciones del

navegador que incluye el campo de ubicación.

Barras de desplazamiento si necesarias: Especifica que deben

aparecer las barras de desplazamiento sólo cuando el contenido de la

página se extienda más allá de la zona visible.

Barra de estado: Es la zona situada en la parte inferior de la ventana

del navegador en la que suele aparecer información como el tiempo

de carga restante de una página y las direcciones asociadas a los

vínculos.

Selectores de cambio de tamaño: Permite que el navegante pueda

cambiar el tamaño de la ventana, ya sea arrastrando los bordes o bien

por medio del botón Maximizar situado en la esquina superior

derecha de la ventana.

6. Si va a utilizar JavaScript para controlar la ventana, escriba un nombre en el cuadro de

edición Nombre de la ventana. Este nombre, no puede incluir espacios o caracteres

especiales.

7. Para finalizar, haga clic en el botón Aceptar.

14.10. Carga previa de imágenes

Con la acción Carga previa de imágenes, podremos indicar las imágenes que deseamos cargar en la memoria caché del navegador para su uso posterior. Esto contribuirá a evitar los retrasos debidos a la descarga cuando llegue el momento en que tengan que aparecer dichas imágenes.

Utilizar la acción Carga previa de imágenes

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Carga previa de imágenes en el menú

emergente que aparece.

Page 150: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

149

3. En el área Archivo de origen de imagen, haga clic en el botón Examinar para localizar

el archivo de imagen objeto de la carga previa o introduzca la ruta y el nombre en el

cuadro de edición.

4. Para añadir una nueva imagen a la lista Carga previa de imágenes, haga clic con el

ratón en el botón más (+) situado en la parte superior del cuadro de diálogo y repita

el paso anterior.

5. Para eliminar un archivo de la lista Carga previa de imágenes, seleccione la imagen en

la lista y haga clic sobre el botón de signo menos (-).

6. Para finalizar, haga clic en Aceptar.

14.11. Mostrar ocultar elementos

La acción Mostrar-Ocultar elementos proporciona un fácil control sobre los atributos de visibilidad para todas las capas de un documento HTML. Esta acción resulta de gran utilidad para mostrar información a medida que el usuario va interactuando por una página Web.

Utilizar Mostrar-Ocultar capas

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Mostrar-Ocultar elementos en el

menú emergente que aparece. Se abre el cuadro de dialogo Mostrar-Ocultar

elementos.

3. En la lista Elementos, se muestran todas las capas disponibles en el documento HTML

abierto.

4. Para ocultar una capa visible, seleccione su nombre en la lista y haga clic sobre el

botón Ocultar.

5. Para mostrar una capa oculta, seleccione su nombre en la lista y haga clic sobre el

botón Mostrar.

6. Para restablecer la visibilidad predeterminada de una capa, selecciónela en la lista y

haga clic sobre el botón Predeterminada.

7. Para finalizar, haga clic en el botón Aceptar.

Page 151: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

150

14.12. Intercambiar imagen

La acción Intercambiar imagen nos permitirá sustituir una imagen por otra cambiando el atributo src

de la etiqueta <IMG>. Use esta opción para crear sustituciones de botones y otros efectos de

imagen.

Utilizar la acción Intercambiar imagen

1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.

2. Haga clic sobre el botón de signo más (+) y elija Intercambiar imagen en el menú

emergente que aparece. Se abre el cuadro de diálogo Intercambiar imagen.

3. En el área Imágenes, elija un gráfico disponible de la lista.

4. En el cuadro de edición, introduzca la ruta hasta la imagen que va a utilizar para el

cambio. También puede usar el botón Examinar para localizar el archivo.

5. Repita los pasos anteriores con todas las imágenes que desee cambiar.

6. Deje activada la opción Carga previa de imágenes para precargar todas las imágenes

en la memoria caché del navegador al cargar la página.

7. Para finalizar, haga clic en el botón Aceptar.

14.13. Validar formulario

La acción Validar formulario nos permitirá comprobar el contenido de los campos de texto

especificados en un formulario de Dreamweaver para asegurarnos de que el usuario ha introducido

los datos correctamente.

Utilizar la acción Validar formulario

1. Seleccione el objeto que iniciará la acción, por ejemplo, el botón Enviar o un campo

de texto cualquiera del formulario.

2. En el menú Ventana, seleccione la opción Comportamientos o, si lo prefiere, pulse la

combinación de teclas MAYÚS+F4.

Page 152: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

151

3. Haga clic sobre el botón de signo más (+) y elija Validar formulario en el menú

emergente que aparece. Se abre el cuadro de diálogo Validar formulario.

4. En la lista Campos, seleccione el campo de texto que desee validar.

5. En el área Valor, active la casilla de verificación Obligatorio para hacer que el campo

seleccionado sea de cumplimentación obligatoria.

6. En el área Aceptar, active una de las opciones disponibles:

Cualquier cosa: Acepta cualquier tipo de entrada.

Número: Permite cualquier tipo de entrada numérica.

Dirección de correo electrónico: Requiere una dirección de e-mail con

el carácter @.

Número del: Nos permite comprobar que el campo contiene

solamente caracteres numéricos comprendidos dentro de un rango

determinado.

7. Repita este proceso con todos los campos de un formulario que desee validar.

8. Para finalizar, haga clic en el botón Aceptar.

14.14. Práctica: Diseño Web parte X-

Esta práctica quizás sea la más importante, ya que nos permitirá controlar el funcionamiento de

todos los archivos que hemos ido diseñando a lo largo de las prácticas anteriores. Además,

completaremos el diseño de la misma creando los documentos que nos faltan. Cuando termine la

práctica, habrá aprendido a crear mensajes de advertencia, a abrir ventanas de navegador con un

tamaño predeterminado, a utilizar llamadas de JavaScript para cerrar ventanas, a utilizar acciones

para detectar si el usuario tiene instalado el plug-in necesario para ver el contenido de un

documento y a hacer que las capas aparezcan y desaparezcan cuando nosotros queramos.

Page 153: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

152

Recuerda…

Arrastrar capa es un comportamiento que permitirá a los visitantes de una página Web que desplacen por la pantalla las capas y todo lo que éstas contengan.

La combinación de teclas MAYÚS+F4 nos abrirá el panel Comportamientos de Dreamweaver.

Un mensaje emergente es un comportamiento que utilizaremos para mostrar un mensaje de alerta de JavaScript.

Comprobar navegador es un comportamiento que podemos utilizar para redireccionar a los visitantes a distintas páginas dependiendo de las marcas y versiones de sus navegadores.

Llamar JavaScript es un comportamiento de Dreamweaver que nos permitirá ejecutar una función personalizada o línea de código de JavaScript.

Validar formulario es un comportamiento que nos permitirá comprobar el contenido de los campos de texto de un formulario para asegurarnos de que se han introducido correctamente.

15. DISEÑO WEB CON SPRY

Page 154: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

153

En este último tema, vamos a trabajar con el framework de Spry que es una biblioteca JavaScript que proporciona a los diseñadores Web la capacidad de crear páginas que ofrezcan una experiencia más completa a los visitantes.

Con Spry, puede utilizar HTML, CSS y una cantidad mínima de código JavaScript para incorporar datos XML a los documentos HTML, crear widgets, como acordeones y barras de menú, y añadir tipos distintos de efectos para varios elementos de la página.

15.1. Los widgets de Spry Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto, ofrece una experiencia más completa. Un widget de Spry consta de las siguientes partes:

Estructura de widget: Bloque de código HTML que define la composición estructural del widget.

Comportamiento del widget: JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario.

Estilo del widget: CSS que especifica el aspecto del widget.

El framework de Spry admite un conjunto de widgets reutilizables escritos en código HTML, CSS y JavaScript estándar. Puede insertar fácilmente estos widgets y, a continuación, aplicar el estilo al widget. Los comportamientos del framework incluyen funciones que permiten a los usuarios mostrar u ocultar contenido de la página, cambiar el aspecto de la página, interactuar con los elementos de menú y mucho más.

Cada widget del framework de Spry está asociado a archivos CSS y JavaScript exclusivos. El archivo CSS contiene todo lo necesario para aplicar estilos al widget y el JavaScript dota al widget de su funcionalidad. Cuando se inserta un widget a través de la interfaz de Dreamweaver, Dreamweaver vincula automáticamente esos archivos a la página, para que el widget tenga funcionalidad y estilo.

15.2. Widget de acordeón

Un widget de acordeón es un conjunto de paneles que pueden contraerse y que tienen capacidad para almacenar una gran cantidad de contenido en un espacio reducido. Los visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el contenido almacenado en el acordeón. Los paneles del acordeón se amplían o contraen en función de las fichas que elijan los visitantes. Solamente puede haber un panel de contenido abierto y visible en un acordeón en cada momento.

Inserción y edición de un widget en acordeón

Page 155: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

154

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Acordeón de Spry. Automáticamente el widget aparece en el documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. En el panel Propiedades, haga clic en el botón Más (+) del área Paneles para añadir una

nueva etiqueta.

4. Para modificar el texto del panel diríjase a la vista Diseño y edítelo. Recuerde que puede

utilizar el panel Propiedades para cambiar las características principales del texto.

5. Para abrir un panel un panel para editar su contenido, coloque el puntero del ratón sobre

la ficha del panel que desea abrir en la vista Diseño y, a continuación, haga clic en el icono

de ojo que aparece a la derecha de la ficha.

6. Para cambiar el orden de los paneles, seleccione un widget de acordeón en la ventana del

documento y en el panel Propiedades, seleccione el nombre del panel Acordeón que

desea mover y haga clic en las flechas arriba o abajo para mover el panel en la dirección

deseada.

Limitación del ancho de un acordeón

Page 156: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

155

1. De forma predeterminada, el widget de acordeón se amplía para llenar el espacio

disponible. No obstante, puede limitar el ancho de un widget de acordeón

estableciendo una propiedad de ancho para el contenedor del acordeón.

2. Abra el archivo que contiene el acordeón que desea limitar y localice la regla

.Accordion en el panel Estilos CSS. Esta regla define las propiedades del elemento de

contenedor principal del widget de acordeón.

3. Añada una propiedad y un valor de ancho a la regla, por ejemplo Width: 400px.

15.3. Widget de barra de menús

Page 157: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

156

Un widget de barra de menús es un conjunto de botones de menú de navegación que muestran submenús cuando el visitante de un sitio sitúa el puntero del ratón sobre uno de ellos. Las barras de menús permiten visualizar una gran cantidad de información de navegación en un espacio reducido, y ofrecen a los visitantes una idea de lo que está disponible en el sitio sin necesidad de realizar una navegación exhaustiva. Dreamweaver permite insertar dos tipos de widgets de barra de menús: verticales y horizontales.

Inserción y edición de un widget de barra de menús

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece

escoja Barra de menús de Spry. Aparece el cuadro de dialogo Barra de menús de Spry.

2. Seleccione Horizontal o Vertical y haga clic en Aceptar. Automáticamente, el widget aparece en el documento.

3. Seleccione el widget de acordeón en la ventana de documento y observe el panel Propiedades.

4. En el campo de edición Barra de menús cambie el nombre asignado al widget por defecto.

5. Para añadir un elemento de menú principal, haga clic en el botón más (+) situado

sobre la primera columna.

Page 158: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

157

6. Para cambiar el nombre del nuevo elemento de menú, modifique el texto

predeterminado en la ventana de documento o en el cuadro Texto del

panel Propiedades.

7. Para añadir un elemento de submenú principal, haga clic en el botón más (+) situado

sobre la segunda columna.

8. Para crear un vínculo escriba el link correspondiente en el cuadro de texto Vínculo o

haga clic en el icono de carpeta para buscar un archivo.

9. Introduzca uno de los cuatro atributos en el cuadro Destino:

_blank: Abre la página vinculada en una nueva ventana del navegador.

_self: Carga la página vinculada en la misma ventana del navegador.

Ésta es la opción predeterminada.

_parent: Carga el documento vinculado en el conjunto de marcos

padre inmediato del documento.

_top: Carga la página vinculada en la ventana superior de un conjunto

de marcos.

Cambio de la orientación de un widget de barra de menús

1. En Dreamweaver, abra la página que contiene un widget de barra de menús

horizontal.

2. Inserte un widget de barra de menús vertical y guarde los cambios en la página. Este

paso garantiza que se incluya en el sitio el archivo CSS correcto para una barra de

menús vertical.

3. Elimine la barra de menús vertical.

4. En vista Código, localice la clase MenuBarHorizontal y cámbiela por

MenuBarVertical.

5. Para finalizar guarde la página y haga una prueba para comprobar los resultados.

15.4. Widget de paneles que pueden contraerse

Page 159: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

158

Un widget de panel que puede contraerse es un panel que puede almacenar contenido en un espacio reducido. Los usuarios pueden hacer clic en la ficha del widget para mostrar u ocultar el contenido almacenado en el panel de forma rápida.

Inserción y edición de un widget que puede contraerse

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Panel que puede contraerse de Spry. Automáticamente el widget aparece en el

documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. Para abrir o cerrar el panel en la vista Diseño, pase el puntero del ratón por la ficha

del panel en la vista Diseño y, a continuación, haga clic en el icono de ojo que aparece

a la derecha de la ficha.

4. Puede definir el estado predeterminado del widget desde el desplegable Estado

predeterminado. Seleccione Abierto o Cerrado.

5. De forma predeterminada, la casilla Activar animación aparece marcada de tal forma,

que el panel se abre y se cierra de forma gradual y suave cuando el visitante del sitio

hace clic en la ficha del panel. Si desactiva esta opción, el panel se abre y se cierra

bruscamente.

15.5. Widget de paneles en fichas

Page 160: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

159

Un widget de paneles en fichas es un conjunto de paneles que pueden almacenar contenido en un espacio reducido. Los visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el contenido almacenado en los paneles en fichas a los que desean acceder. Los paneles del widget se amplían o contraen en función de las fichas que elijan los visitantes. Solamente puede haber un panel de contenido abierto en un widget de paneles de fichas en cada momento.

Inserción y edición de paneles en fichas

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Panel en fichas de Spry. Automáticamente el widget aparece en el documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. En el panel Propiedades, haga clic en el botón más (+) del área Paneles para añadir

una nueva ficha.

4. Para modificar el texto del panel diríjase a la vista Diseño y edítelo. Recuerde que

puede utilizar el panel Propiedades para cambiar las características principales del

texto.

5. Para cambiar el orden de los paneles en el panel Propiedades, seleccione el nombre

del panel que desea mover y haga clic en las flechas arriba o abajo para mover el

panel en la dirección deseada.

6. Puede definir el panel del widget de paneles en fichas que se abrirá de forma

predeterminada al abrir la página en un navegador, utilice el desplegable Estado

predeterminado del panel Propiedades.

15.6. Widget de grupo de opciones

Page 161: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

160

El widget de grupo de opciones de validación es un grupo de botones que nos permiten la validación de una selección. El widget nos fuerza a seleccionar una opción dentro de un grupo de opciones de validación.

Insertar y editar un widget de grupo de opciones de validación

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Grupo de opciones de validación de Spry. Se abre el cuadro de diálogo Grupo

de opciones de validación de Spry.

2. En el cuadro de texto Nombre, introduzca un nombre para el grupo de opciones.

3. Añada o quite botones de opciones del grupo haciendo clic en los botones de signo

más (+) o menos (-).

4. En la columna Label, haga clic en el nombre de cada botón de opción para que el

campo sea editable y asigne un nombre exclusivo a cada botón de opción.

5. En la columna Value, haga clic en cada valor para que el campo sea editable y asigne

un valor exclusivo a cada botón de opción.

6. Seleccione un tipo de disposición para el grupo de opciones:

Saltos de línea: Sitúa cada botón de opción en una línea independiente

empleando saltos de línea (etiquetas br).

Tabla: Sitúa cada botón de opción en una línea independiente

empleando filas de tabla individuales (etiquetas tr).

7. Haga clic en Aceptar. El grupo de opciones aparece en el documento.

Especificar el momento en que debe producirse la validación

Page 162: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

161

1. Seleccione un widget de grupo de opciones de validación en la ventana de

documento haciendo clic en su ficha azul.

2. En el panel Propiedades, seleccione la opción que indica cuándo desea que se

produzca la validación. Por defecto la opción onSubmit (Enviar) para que la validación

del formulario se produzca cuando el usuario envíe el formulario.

3. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario

hace clic fuera del grupo de opciones.

4. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario

realiza selecciones.

15.7. Widget de campo de texto

Un widget de campo de texto de validación es un campo de texto que muestra los estados válidos o no válidos cuando el visitante introduce texto. Por ejemplo, puede añadir un widget de campo de texto de validación a un formulario en el que el visitante introduce su dirección de correo electrónico. Si no introducen el símbolo “@” y un punto en la dirección de correo electrónico, el widget devuelve un mensaje indicando que la información introducida por el usuario no es válida.

Insertar y editar un widget de campo de texto de validación

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Campo de texto de validación de Spry. Automáticamente el widget aparece en

el documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. Seleccione un tipo de validación en el menú Tipo:

Ninguno: No requiere un tipo particular de formato.

Page 163: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

162

Entero: El campo de texto sólo acepta números. Dirección de correo electrónico: El campo de texto acepta direcciones de

correo electrónico que contienen @ y un punto (.) precedido y seguido de al menos una letra.

Fecha: Los formatos varían. Deberemos elegir una opción en el menú emergente Formato del panel Propiedades.

Hora: Los formatos varían. Deberemos elegir una opción en el menú emergente Formato del panel Propiedades.

Tarjeta de crédito: Los formatos varían. Deberemos elegir una opción en el menú emergente Formato del panel Propiedades. Puede elegir aceptar todas las tarjetas de crédito o especificar un determinado tipo de tarjeta (MasterCard, Visa, etc.). El campo de texto no acepta espacios en los números de tarjetas de crédito.

Código postal: Los formatos varían. Deberemos elegir una opción en el menú emergente Formato del panel Propiedades.

Número telefónico: El campo de texto acepta números de teléfono con el formato utilizado en EE.UU. y Canadá (000) 000-0000 o formatos personalizados. Si seleccionamos como opción un formato personalizado, deberemos introducir el formato deseado en el cuadro de texto Patrón.

Número de Seguridad Social: El cuadro de texto acepta números de la Seguridad Social con el formato 000-00-0000. Si desea utilizar un formato distinto, seleccione Personalizado como tipo de validación y especifique un patrón. El mecanismo de validación del patrón sólo acepta caracteres ASCII.

Moneda: El campo de texto acepta moneda con el formato 1.000.000,00 o 1,000,000.00.

Número real-Notación científica: Valida varios tipos de números: enteros (por ejemplo, 1); valores flotantes (por ejemplo, 12, 123); y valores flotantes en notación científica (por ejemplo, 1,212e+12, 1,221e-12, donde e se utiliza como potencia de 10).

Dirección IP: Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades.

URL: El campo de texto acepta URL con el formato http://xxx.xxx.xxx o ftp://xxx.xxx.xxx.

Personalizado: Permite especificar un tipo y formato de validación personalizado. Introduzca el patrón de formato (y sugerencia, si lo desea) en el inspector de propiedades. El mecanismo de validación del patrón sólo acepta caracteres ASCII.

4. En el panel Propiedades, seleccione la opción que indica cuándo desea que se produzca la validación. Por defecto la opción onSubmit (Enviar) para que la validación del formulario se produzca cuando el usuario envíe el formulario.

5. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario hace clic fuera del grupo de opciones.

6. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario realiza selecciones.

7. En el área Estados de vista previa del panel Propiedades, seleccione el estado de visualización del widget en la vista Diseño. Por ejemplo, si desea ver el widget en su estado válido, seleccione Válido.

8. Para finalizar, podremos impedir que los usuarios introduzcan caracteres no válidos en un widget de campo de texto de validación activando la opción Aplicar patrón dentro del panel Propiedades.

15.8. Widget de área de texto

Page 164: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

163

Un widget de área de texto de validación es un área de texto que muestra los estados válidos o no válidos cuando el visitante introduce frases de texto. Si el área de texto la configuramos como obligatorio y el usuario no introduce texto, el widget devolverá un mensaje de error indicando que tenemos que introducir un valor en el área.

Insertar y editar un widget de área de texto de validación

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Área de texto de validación de Spry. Automáticamente el widget aparece en el

documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. En el panel Propiedades, seleccione la opción que indica cuándo desea que se

produzca la validación. Por defecto la opción onSubmit (Enviar) para que la validación

del formulario se produzca cuando el usuario envíe el formulario.

4. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario

hace clic fuera del grupo de opciones.

5. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario

realiza selecciones.

6. Especifique del número máximo y mínimo de caracteres introduciendo un número en

el cuadro de texto Car. mín. o Car. máx. Por ejemplo, si introduce el número 10 en el

cuadro Car. mín., el widget sólo valida el campo si el usuario introduce 10 caracteres

o más en el área de texto.

7. Para finalizar, puede impedir que los usuarios introduzcan más caracteres de los

permitidos en un widget de área de texto de validación activando la opción Bloquear

caracteres extra dentro del panel Propiedades.

15.9. Widget de selección

Page 165: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

164

Un widget de selección de validación es un menú desplegable que muestra los estados válido y no válido cuando el usuario realiza una selección. Por ejemplo, puede insertar un widget de selección de validación que contenga una lista de estados, agrupados en diferentes secciones y divididos por líneas horizontales. Si el usuario selecciona de forma accidental una de las líneas de división en lugar de uno de los estados, el widget de selección de validación devuelve un mensaje al usuario indicando que la selección no es válida.

Insertar un widget de selección de validación

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Selección de validación de Spry. Automáticamente el widget aparece en el

documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. Seleccione el campo de selección. Ahora el panel Propiedades cambia para

mostrarnos las propiedades del campo que nos permite añadir las etiquetas.

4. Pulse el botón Valores de lista. Se abre el cuadro de diálogo Lista valores.

Page 166: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

165

5. Añada tantas etiquetas como desee pulsando el botón de signo más (+) y ordénelas

utilizando las flechas.

6. Para terminar de definir la lista pulse el botón Aceptar.

15.10. Widget de contraseña de validación

Un widget de contraseña de validación de Spry es un campo de texto de contraseña que puede utilizarse para aplicar reglas de contraseña (por ejemplo, el número y tipo de caracteres). El widget proporciona mensajes de advertencia o error en función de lo que haya introducido el usuario.

Insertar y editar un widget de contraseña de validación

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare

escoja Contraseña de validación de Spry. Automáticamente el widget aparece en el

documento.

2. Seleccione el widget de acordeón en la ventana de documento y observe el

panel Propiedades.

3. De forma predeterminada, todos los widgets de contraseña de validación que

insertemos con Dreamweaver requieren la introducción de texto por parte del

usuario una vez publicados en la Web. Sin embargo, puede hacer opcional la

Page 167: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

166

obligación de introducir texto de contraseña en los campos por parte del usuario

desactivando la opción Obligatorio del panel Propiedades.

4. En el panel Propiedades, seleccione la opción que indica cuándo desea que se

produzca la validación. Por defecto la opción onSubmit (Enviar) para que la validación

del formulario se produzca cuando el usuario envíe el formulario.

5. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario

hace clic fuera del grupo de opciones.

6. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario

realiza selecciones.

7. Los números que introduzca en los campos de opciones de la parte baja del

panel Propiedades serán los números exigidos en la validación del widget. Por

ejemplo, si introduce 8 en el cuadro Mín. car., el widget no realizará la validación a no

ser que el usuario haya introducido al menos ocho caracteres en el campo de texto de

contraseña. Podremos configurar las siguientes opciones:

Mín./Máx. car.: Especifica el número mínimo y máximo de caracteres

exigido para que la contraseña sea válida.

Mín./Máx. letras: Especifica el número mínimo y máximo de letras (a, b,

c...) exigido para que la contraseña sea válida.

Mín./Máx. números: Especifica el número mínimo y máximo de números

(1, 2, 3...) exigido para que la contraseña sea válida.

Mín./Máx. mayúsculas: Especifica el número mínimo y máximo de letras

mayúsculas (A, B, C...) exigido para que la contraseña sea válida.

Mín./Máx. car. especiales: Especifica el número mínimo y máximo de

caracteres especiales (!, @, #, etc.) exigido para que la contraseña sea

válida.

8. Si alguna de las opciones anteriores se deja en blanco, el widget no puede validarse

frente a ese criterio. Por ejemplo, si deja las opciones Mín./Máx. números en blanco,

el widget no buscará números en la cadena de contraseña.

15.11. Efectos de Spry

Los efectos de Spry son mejoras visuales que se pueden aplicar a casi cualquier elemento de una página HTML mediante JavaScript. Los efectos se utilizan con frecuencia para resaltar información, crear transiciones animadas o modificar una página visualmente durante algún tiempo. Puede aplicar efectos a elementos HTML sin tener que utilizar otras etiquetas personalizadas. Dreamweaver incluye los siguientes efectos de Spry:

Aparecer/Desvanecer: Este efecto hace que aparezca o desaparezca el elemento.

Resaltado: Cambia el color de fondo de un elemento.

Persiana: Nos permite simular la persiana de una ventana que sube o baja para ocultar o

mostrar el elemento.

Deslizar: Mueve el elemento hacia arriba o hacia abajo.

Aumentar/Reducir: Aumenta o reduce el tamaño del elemento.

Agitar: Simula la agitación del elemento de izquierda a derecha.

Arrinconar: Hace que desaparezca el elemento por la esquina superior izquierda de la

página.

Aplicación de un efecto Aparecer/Desvanecer

Page 168: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

167

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto. 2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Aparecer/Desvanecer.

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.

5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Desvanecer o Aparecer.

6. En el cuadro Desvanecer desde, defina el porcentaje de opacidad que desea que tenga el efecto cuando aparezca.

7. En el cuadro Desvanecer hasta, defina el porcentaje de opacidad que desea que tenga el efecto cuando desaparezca.

8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que desaparezca y aparezca (y viceversa) con clics sucesivos.

9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Persiana

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto. 2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Persiana.

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

Page 169: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

168

4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.

5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Subir persiana o Bajar persiana.

6. En el cuadro Subir desde/Bajar desde, defina el punto de inicial de desplazamiento de la persiana como porcentaje o como número de píxeles. Estos valores se calculan desde la parte superior del elemento.

7. En el cuadro Subir hasta/Bajar hasta, defina el punto de final de desplazamiento de la persiana como porcentaje o como número de píxeles. Estos valores se calculan desde la parte superior del elemento.

8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que la persiana suba y baje con clics sucesivos.

9. Para finalizar, pulse el botón Aceptar.

Aplicación de un efecto Aumentar/Reducir

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto. 2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Aumentar/Reducir.

3. Seleccione el ID del elemento en el menú emergente Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.

5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Aumentar o Reducir.

6. En el cuadro Aumentar desde/Reducir desde, defina el tamaño del elemento cuando se inicie el efecto. Puede elegir un porcentaje o un valor en píxeles.

7. En el cuadro Aumentar hasta/Reducir hasta, defina el tamaño del elemento cuando finalice el efecto. Puede elegir un porcentaje o un valor en píxeles.

8. Seleccione si desea que el elemento aumente o disminuya de tamaño en la esquina superior izquierda de la página o en el centro de la misma.

9. Active Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento aumente o disminuya de tamaño con clics sucesivos.

10. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Resaltado

Page 170: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

169

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.

2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Resaltado.

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha

seleccionado un elemento, elija <Selección actual>.

4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que

dure el efecto.

5. Seleccione el color con el que desea que se inicie el resaltado en el área Color inicial.

6. Seleccione el color con el que desea que se finalice el resaltado en el área Color final.

Este color se mantiene solamente el tiempo definido en Duración del efecto.

7. En el área Color tras el efecto, seleccione el color del elemento una vez finalizado el

resaltado.

8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que vaya de un

color a otro del resaltado con clics sucesivos.

9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Agitar

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.

2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Agitar.

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha

seleccionado un elemento, elija <Selección actual>.

4. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Deslizar

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.

Page 171: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

170

2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la opción Efectos y en el nuevo submenú la opción Deslizar.

3. Seleccione el ID de la etiqueta contenedora en el menú Elemento de destino. Si el contenedor ya está seleccionado, elija <Selección actual>.

4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.

5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Deslizar arriba o Deslizar abajo.

6. En el cuadro Deslizar arriba desde, defina el punto de inicial de deslizamiento como porcentaje o como número de píxeles.

7. En el cuadro Deslizar arriba hasta, defina el punto de final de deslizamiento como porcentaje o como número positivo de píxeles.

8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento se deslice hacia arriba y hacia abajo con clics sucesivos.

9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Arrinconar

1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto. 2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la

opción Efectos y en el nuevo submenú la opción Arrinconar.

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

4. Para finalizar, pulse el botón Aceptar.

Recuerda…

Page 172: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

171

Los mensajes de error son configurables.

Las casillas de verificación de Spry pueden mostrarse en grupo.

Los estados de validación muestran mensajes de error si la evaluación del campo introducido es negativa.

La caja de texto de Spry admite la validación de correos electrónicos, fechas y números de teléfonos y otros elementos.

Los controles de validación de Spry no se insertan por fuerza dentro de un formulario.

Si no seleccionamos ninguna validación, por defecto el campo se evaluará al enviar el formulario.

Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry.

Para el patrón 0000, la respuesta es 1234.

16. COMANDO DE TECLADO

Page 173: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

172

En este tema, se incluyen unas tablas en las que se exponen las combinaciones de teclas correspondientes a comandos y herramientas de Adobe Dreamweaver. El uso del teclado puede resultar un modo rápido de acceder a cualquier opción disponible en el programa.

16.1. Teclas de función de Dreamweaver

MENÚ ARCHIVO COMBINACIÓN DE TECLAS

Archivo > Nuevo CTRL+N

Archivo > Abrir CTRL+O

Archivo > Examinar en Bridge CTRL+ALT+O

Archivo > Abrir en marco CTRL+MAYÚS+O

Archivo > Cerrar CTRL+W

Archivo > Cerrar todos CTRL+MAYÚS+W

Archivo > Guardar CTRL+S

Archivo > Guardar como CTRL+MAYÚS+S

Archivo > Imprimir código CTRL+P

Archivo > Vista previa en el navegador F12

Archivo > Vista previa en el navegador > Device Central CTRL+ALT+F12

Archivo > Vista previa en el navegador > Adobe BrowserLab CTRL+MAYÚS+F12

Archivo > Comprobar página > Comprobar vínculos MAYÚS+F8

Archivo > Salir CTRL+Q

Page 174: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

173

MENÚ EDICIÓN COMBINACIÓN DE TECLAS

Edición > Deshacer CTRL+Z

Edición > Rehacer CTRL+Y

Edición > Cortar CTRL+X

Edición > Copiar CTRL+C

Edición > Pegar CTRL+V

Edición > Pegado especial CTRL+MAYÚS+V

Edición > Seleccionar todo CTRL+A

Edición > Seleccionar etiqueta padre CTRL+Ñ

Edición > Seleccionar hijo CTRL+Ç

Edición > Buscar y reemplazar CTRL+F

Edición > Buscar selección MAYÚS+F3

Edición > Buscar siguiente F3

Edición > Ir a línea CTRL+G

Edición > Mostrar sugerencias para el código CTRL+ESPACIO

Edición > Actualizar sugerencias para el código CTRL+.

Page 175: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

174

MENÚ EDICIÓN COMBINACIÓN DE TECLAS

Edición > Aplicar sangría al código CTRL+MAYÚS+>

Edición > Anular sangría de código CTRL+,

Edición > Equilibrar llaves CTRL+’

Edición > Contraer código > Contraer selección CTRL+MAYÚS+C

Edición > Contraer código > Contraer fuera de la selección CTRL+ALT+C

Edición > Contraer código > Expandir selección CTRL+MAYÚS+E

Edición > Contraer código > Contraer etiqueta completa CTRL+MAYÚS+J

Edición > Contraer código > Contraer fuera de etiqueta completa CTRL+ALT+J

Edición > Contraer código > Expandir todo CTRL+ALT+MAYÚS+E

Edición > Preferencias CTRL+U

MENÚ VER COMBINACIÓN DE TECLAS

Ver > Acercar CTRL++

Ver > Alejar CTRL+-

Ver > Aumentar y reducir > 50% CTRL+ALT+MAYÚS+5

Ver > Aumentar y reducir > 100% CTRL+ALT+MAYÚS+1

Page 176: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

175

MENÚ VER COMBINACIÓN DE TECLAS

Ver > Aumentar y reducir > 200% CTRL+ALT+MAYÚS+2

Ver > Aumentar y reducir > 300% CTRL+ALT+MAYÚS+3

Ver > Aumentar y reducir > 400% CTRL+ALT+MAYÚS+4

Ver > Aumentar y reducir > 800% CTRL+ALT+MAYÚS+8

Ver > Aumentar y reducir > 1600% CTRL+ALT+MAYÚS+6

Ver > Ajustar selección CTRL+ALT+0

Ver > Ajustar todo CTRL+ MAYÚS+0

Ver > Ajustar ancho CTRL+ALT+MAYÚS+0

Ver > Alternar vistas CTRL+;

Ver > Actualizar vista de diseño F5

Ver > Vista en vivo ALT+F11

Ver > Opciones de Vista en vivo > Congelar JavaScript F6

Ver > Inspeccionar ALT+MAYÚS+F11

Ver > Contenido de Head CTRL+MAYÚS+H

Ver > Modo de tabla > Modo de tablas expandidas ALT+ F6

Ver > Ayudas visuales > Ocultar todo CTRL+MAYÚS+I

Page 177: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

176

MENÚ VER COMBINACIÓN DE TECLAS

Ver > Reglas > Mostrar CTRL+ALT+R

Ver > Cuadrícula > Mostrar cuadrícula CTRL+ALT+G

Ver > Cuadrícula > Ajustar a cuadrícula CTRL+ALT+MAYÚS+G

Ver > Guías > Mostrar guías CTRL+MAYÚS+,

Ver > Guías > Bloquear guías CTRL+ALT+,

Ver > Guías > Ajustar a guías CTRL+MAYÚS+.

Ver > Guías > Ajustar guías a elementos CTRL+ALT+.

Ver > Plug-ins > Reproducir CTRL+ALT+P

Ver > Plug-ins > Detener CTRL+ALT+X

Ver > Plug-ins > Reproducir todo CTRL+ALT+MAYÚS+P

Ver > Plug-ins > Detener todo CTRL+ALT+MAYÚS+X

Ver > Ocultar paneles F4

Ver > Navegador de código CTRL+ALT+N

MENÚ INSERTAR COMBINACIÓN DE TECLAS

Insertar > Etiqueta CTRL+E

Page 178: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

177

MENÚ INSERTAR COMBINACIÓN DE TECLAS

Insertar > Imagen CTRL+ALT+I

Insertar > Media > Flash CTRL+ALT+F

Insertar > Tabla CTRL+ALT+T

Insertar > Anclaje con nombre CTRL+ALT+A

Insertar > HTML > Caracteres especiales > Salto de línea MAYÚS+INTRO

Insertar > HTML > Caracteres especiales > Espacio indivisible CTRL+MAYÚS+ESPACIO

Insertar > Objetos de plantilla > Región editable CTRL+ALT+V

MENÚ MODIFICAR COMBINACIÓN DE TECLAS

Modificar > Propiedades de la página CTRL+J

Modificar > Estilos CSS MAYÚS+F11

Modificar > Quick Tag Editor CTRL+T

Modificar > Crear vínculo CTRL+L

Modificar > Quitar vínculo CTRL+MAYÚS+L

Modificar > Tabla > Combinar celdas CTRL+ALT+M

Modificar > Tabla > Dividir celda CTRL+ALT+S

Page 179: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

178

MENÚ MODIFICAR COMBINACIÓN DE TECLAS

Modificar > Tabla > Insertar fila CTRL+M

Modificar > Tabla > Insertar columna CTRL+MAYÚS+A

Modificar > Tabla > Eliminar fila CTRL+MAYÚS+M

Modificar > Tabla > Eliminar columna CTRL+MAYÚS+-

Modificar > Tabla > Aumentar tamaño de columna CTRL+MAYÚS+Ç

Modificar > Tabla > Reducir tamaño de columna CTRL+MAYÚS+Ñ

Modificar > Organizar > Alinear a izquierda CTRL+MAYÚS+1

Modificar > Organizar > Alinear a la derecha CTRL+MAYÚS+3

Modificar > Organizar > Alinear con el borde superior CTRL+MAYÚS+4

Modificar > Organizar > Alinear con el borde inferior CTRL+MAYÚS+6

Modificar > Organizar > Asignar mismo ancho CTRL+MAYÚS+7

Modificar > Organizar > Asignar mismo alto CTRL+MAYÚS+9

MENÚ FORMATO COMBINACIÓN DE TECLAS

Formato > Sangría CTRL+ALT+-

Formato > Anular sangría CTRL+ALT+Ñ

Page 180: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

179

MENÚ FORMATO COMBINACIÓN DE TECLAS

Formato > Formato de párrafo > Ninguno CTRL+0

Formato > Formato de párrafo > Párrafo CTRL+MAYÚS+P

Formato > Formato de párrafo > Encabezado 1 CTRL+1

Formato > Formato de párrafo > Encabezado 2 CTRL+2

Formato > Formato de párrafo > Encabezado 3 CTRL+3

Formato > Formato de párrafo > Encabezado 4 CTRL+4

Formato > Formato de párrafo > Encabezado 5 CTRL+5

Formato > Formato de párrafo > Encabezado 6 CTRL+6

Formato > Alinear > Izquierda CTRL+ALT+MAYÚS+L

Formato > Alinear > Centro CTRL+ALT+MAYÚS+C

Formato > Alinear > Derecha CTRL+ALT+MAYÚS+R

Formato > Alinear > Justificar CTRL+ALT+MAYÚS+J

Formato > Estilo > Negrita CTRL+B

Formato > Estilo > Cursiva CTRL+I

MENÚ COMANDOS COMBINACIÓN DE TECLAS

Page 181: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

180

MENÚ COMANDOS COMBINACIÓN DE TECLAS

Comandos > Iniciar grabación CTRL+MAYÚS+X

Comandos > Ortografía MAYÚS+F7

MENÚ SITIO COMBINACIÓN DE TECLAS

Sitio > Obtener CTRL+MAYÚS+D

Sitio > Proteger CTRL+ALT+MAYÚS+D

Sitio > Colocar CTRL+MAYÚS+U

Sitio > Desproteger CTRL+ALT+MAYÚS+U

Sitio > Comprobar vínculos en todo el sitio CTRL+F8

MENÚ VENTANA COMBINACIÓN DE TECLAS

Ventana > Insertar CTRL+F2

Ventana > Propiedades CTRL+F3

Ventana > Estilos CSS MAYÚS+F11

Ventana > Elementos PA F2

Ventana > Business Catalyst CTRL+MAYÚS+B

Page 182: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

181

MENÚ VENTANA COMBINACIÓN DE TECLAS

Ventana > Bases de datos CTRL+MAYÚS+F10

Ventana > Vinculaciones CTRL+F10

Ventana > Comportamientos del servidor CTRL+F9

Ventana > Componentes CTRL+F7

Ventana > Archivos F8

Ventana > Fragmentos MAYÚS+F9

Ventana > Inspector de etiquetas F9

Ventana > Comportamientos MAYÚS+F4

Ventana > Historial MAYÚS+F10

Ventana > Marcos MAYÚS+F2

Ventana > Inspector de código F10

Ventana > Resultados > Buscar F7

Ventana > Inspector de código F4

MENÚ AYUDA COMBINACIÓN DE TECLAS

Ayuda > Ayuda de Dreamweaver F1

Page 183: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

182

MENÚ AYUDA COMBINACIÓN DE TECLAS

Ayuda > Ayuda de ColdFusión CTRL+F1

Ayuda > Referencia MAYÚS+F1

Page 184: Dreamweaver CS5

ADOBE DREAMWEAVER CS5

183

Resumen General de la Unidad

Utilizaremos las casillas de verificación en un formulario cuando queramos que el usuario pueda escoger tantas opciones como desee.

Los siguientes formatos de imágenes son soportados por Dreamweaver:

- JPEG.

- PNG.

- GIF.

La opción Bucle del panel Líneas de tiempo deberemos activar si queremos que una animación se repita indefinidamente una vez que ésta haya alcanzado el cuadro final.

Se denomina conjunto de marcos anidado a un conjunto de marcos que está dentro de otro.

Es posible localizar un texto determinado en un documento de Dreamweaver y reemplazarlo por otro, mediante la opción Buscar y reemplazar.

La tecla TAB deberemos mantenerla pulsada para pasar a la celda siguiente de una tabla.

El parámetro AutoPlay de QuickTime permitirá comenzar la reproducción de una película en cuanto se haya descargado suficientemente.

Comprobar navegador es un comportamiento que podemos utilizar para redireccionar a los visitantes a distintas páginas dependiendo de las marcas y versiones de sus navegadores.

Podremos cambiar el color de resalte de las regiones editables de una plantilla utilizando la categoría Resaltando del cuadro de diálogo Preferencias.

La herramienta que podemos utilizar para organizar mejor la información en un documento de Dreamweaver es la Reglas Horizontales.

Si se activa la opción caché en la categoría Datos locales del cuadro de diálogo Definición de sitio, mejoraremos la velocidad de las tareas de administración de vínculos y sitios.

Un menú de salto es un menú de lista emergente que muestra opciones con vínculos a documentos o archivos.

Si realizamos una modificación a un elemento incluido en la biblioteca debemos actuar en la actualización de los documentos que usan ese elemento.

Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry.

La función principal del Panel Activos es administrar de forma rápida todos los archivos de nuestro sitio Web.