LOS MENÚS DE DREAMWEAVER

La mejor manera de entrar en materia y empezar a conocer el programa es viendo, uno por uno, sus menús y opciones de la barra de menús. Desde ellos podrás acceder a cada una de las herramientas y acciones de Dreamweaver. Podemos dividir los menús de Dreamweaver en dos grandes grupos: los menús de edición y los menús de control.

Los menús de edición

Menú Edición

En este menú se encuentran las opciones más utilizadas para la edición de un documento, como son Seleccionar, Copiar, Pegar, Deshacer, Repetir, Buscar y Reemplazar. Además, en este menú encontramos una opción importantísima para controlar Dreamweaver: las Preferencias del programa.

Menú Insertar

En este menú encontraremos todas las opciones necesarias para llenar nuestra página con distintos elementos: imágenes, elementos multimedia, tablas, capas, formularios, etc. Muchos de estos elementos se pueden insertar también desde la Paleta de objetos.

Menú Modificar

Desde este menú podremos modificar las propiedades de los elementos incluidos en nuestra página y también otros elementos relacionados con el sitio en el que estamos trabajando, como puede ser la Biblioteca o las Plantillas. En general, para trabajar con tablas y capas deberemos acudir a este menú.

Menú Texto

Accederemos a este menú para editar cualquier característica del texto, desde la Alineación, a los Estilos, pasando por el Tamaño, tipo de Fuente, etc. Desde este menú podremos crear hojas de estilo personalizadas (Estilos HTML) y dinámicas (Estilos CSS). La última opción de este menú también es importante, pues nos da acceso a la corrección ortográfica.

Menú Comando

Desde este menú se accede a la mayoría de los comandos destinados a automatizar las tareas repetitivas en la composición de documentos, como Formatear y Ordenar Tabla, Limpiar HTML, etc. Dreamweaver también nos da opciones para crear nuestros propios comandos.

Menú Sitio

Desde este menú gestionaremos de forma completa un sitio web desde el programa. Algunas de estas opciones las veremos en el siguiente capítulo.

LOS MENÚS DE CONTROL

Menú archivo

En este menú se encuentran las opciones comunes de Abrir, Guardar, Cerrar y Salir. También encontraremos aquí las opciones de Importar y Exportar, las opciones de Vista previa en el explorador, así como opciones para comprobar que los enlaces de un documento funcionan a la perfección. En este menú también nos aparece un listado de acceso rápido a los últimos documentos editados.

Menú Vista

Aquí encontramos las opciones que nos permitirán Mostrar o Esconder distintos elementos de la página, como head, bordes, elementos invisibles, reglas y cuadrícula. En este menú, se encuentra una opción que será muy importante cuando trabajemos con capas: Evitar solapamiento de capas.

Menú Ventana

Desde este menú accederemos a las opciones que nos permiten abrir las distintas ventanas y paletas flotantes de Dreamweaver y ordenarlas en el área de trabajo, de forma que queden organizadas. También podemos acceder a los distintos documentos que se encuentran abiertos en el momento, así como navegar por los distintos documentos que estén actualmente abiertos. En general, si no estás seguro dónde buscar un elemento de Dreamweaver, acude al menú Ventana.

Menú Ayuda

Con este menú podremos acceder a la ayuda que ofrece Dreamweaver. Ésta es muy completa y se recomienda acceder a ella siempre que nos encontremos con algún problema o no sepamos cómo hacer algo.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Algunas de las opciones de dentro de los menús de Dreamweaver poseen ‘atajos’ mediante combinaciones de teclas, como puedes ver si navegas por los menús. Es importante que te aprendas los atajos que más vas a utilizar porque conseguirás ahorrar un montón de tiempo.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

EL ÁREA DE TRABAJO

El área de trabajo de Dreamweaver es donde vas a editar las páginas web. Es un espacio muy flexible, lo que te permitirá adaptarlo hasta encontrar una disposición de elementos en la que te encuentres cómodo. El área de trabajo se compone de distintos elementos.

La ventana de documento

La ventana de documento muestra el documento actual aproximadamente como aparecerá cuando se vea en un explorador. Cuando se crea un documento nuevo nos encontraremos con una ventana como la de esta imagen.

La ventana en blanco es el documento sobre el que ya podemos empezar a trabajar. En realidad, esta ventana es el cuerpo de un documento HTML que Dreamweaver ha creado mediante las tag correspondientes. Puedes verlo si accedes a Menú Ventana > Fuente HTML.

En la ventana de documento hay que distinguir varios elementos (de arriba abajo): la barra de título, la barra de menús (que ya hemos visto), y la barra de estado. Vamos a verlos en más profundidad.

LA BARRA DE TÍTULO

Esta es la barra de título de un documento de Dreamweaver:

En esta barra nos aparece información sobre el documento: el título de la página y, entre paréntesis, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados. La diferencia entre ambos merece ser explicada. Todo documento HTML puede tener un título de la página que será mostrado por los exploradores en la parte superior de la ventana cuando los estamos visualizando. Este título es, además, utilizado por algunos buscadores para indexar nuestro documento e incluirlo en su base de datos.
Por su parte, el nombre del archivo es el nombre con el que éste será almacenado en el disco duro. Ambos títulos no tienen porqué coincidir.

LA BARRA DE ESTADO

Esta es la barra de estado de la ventana de Dreamweaver:

La barra inferior, llamada barra de estado, posee dos partes diferenciadas. En la esquina izquierda se sitúa el Selector de etiquetas, que controlan el texto u objeto seleccionado. Es una forma rápida de selección, ya que, por ejemplo, si haces clic en <body> puedes seleccionar todo el cuerpo del documento.

Siguiendo hacia la derecha, se sitúa el menú desplegable Tamaño de ventana, permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Este menú es de gran ayuda a la hora de diseñar una página, ya que simula con gran precisión cómo se verá la página en un explorador. Como norma general, recomendamos utilizar un tamaño de 800 x 600, que actualmente se puede considerar el mínimo común.

Situado un poco más a la derecha, aparece una pequeña celda que contiene el peso y el tiempo (aproximado) de descarga de la página en un explorador. Este cálculo se hace en función de la velocidad de la conexión que hayamos establecido por defecto en las preferencias del programa. Esta información es de mucha utilidad para optimizar los documentos y controlar el exceso de peso de nuestras páginas.

Finalmente, el elemento situado más a la derecha, el Minilanzador, se trata de una versión reducida del lanzador. Los botones que aparecen de forma predeterminada en el minilanzador son iguales que los del lanzador: permiten abrir la ventana Sitio, la paleta de bibliotecas, la paleta de estilos HTML, la paleta de estilos CSS, el inspector de comportamientos, la paleta de marcador y el inspector de código fuente HTML. Podemos personalizar los botones que aparecerán en el Minilanzador tal y como veremos más adelante.

LAS PALETAS Y LOS MENÚS CONTEXTUALES

Las paletas de Dreamweaver son las barras de herramientas flotantes que nos permiten acceder de forma rápida a cada una de las opciones de los distintos menús. El manejo de las paletas, junto con el de las teclas de acceso rápido, te permitirá un uso mucho más ágil del programa.

LAS PALETAS DE DREAMWEAVER

La paleta de objetos

La paleta de objetos contiene botones que te permitirán insertar diversos tipos de objetos, como tablas, capas e imágenes. Para mostrar o esconder la paleta de objetos, elige Menú Ventana > Objetos. Para insertar un objeto, haz clic en el botón correspondiente de la paleta de objetos o arrastra el icono del botón a la ventana de documento.

La paleta de objetos contiene seis paneles de forma predeterminada: Caracteres, Común, Formularios, Head, Invisibles y Marcos. El panel Caracteres contiene caracteres especiales, como los símbolos de copyright y marca registrada y las comillas angulares. Es posible que estos símbolos no se muestren correctamente en exploradores anteriores a Netscape Navigator 4 e Internet Explorer 4. El panel Común contiene los objetos más utilizados, como las imágenes, las tablas y las capas. El panel Formularios contiene botones que permiten crear formularios y elementos de formulario. El panel Head contiene botones que permiten agregar diversos elementos de cabecera, como el título de la página o palabras clave. El panel Invisibles contiene botones que permiten crear objetos no visibles en la ventana de documento, como los puntos de fijación con nombre. El panel Marcos contiene diseños preestablecidos de conjuntos de marcos.

Para pasar de un panel a otro utiliza el menú emergente de la parte superior de la paleta. Esta paleta es totalmente personalizable, por lo que puedes modificar cualquier objeto de la paleta, crear tus propios objetos o instalar nuevos objetos que puedes encontrar en la red.

El inspector de propiedades

El inspector de propiedades es la paleta que permite examinar y editar las propiedades del elemento que tenemos seleccionado actualmente. Un elemento de página es, por ejemplo, un objeto, una tabla o un texto. Para mostrar o esconder el inspector de propiedades, elige Menú Ventana > Propiedades.

Una La gran mayoría de los cambios realizados en el inspector de propiedades se aplicarán de inmediato en el elemento seleccionado. Sin embargo, para aplicar un cambio en algunas propiedades es necesario hacer clic fuera del campo de edición o pulsar la tecla Tabulador para pasar a otra propiedad.

Debes tener en cuenta que el inspector de propiedades es una paleta cambiante. Es decir, que las propiedades que aparecen en él dependen del elemento seleccionado. Por ejemplo, en la imagen aparecen las propiedades de un objeto ActiveX que son distintas, a las de un texto, una tabla, ect. El inspector de propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizan con mayor frecuencia. Si quieres obtener más propiedades, haz clic en la flecha de ampliación, situada en la esquina inferior derecha. En el ejemplo que te hemos propuesto, el inspector de propiedades está ya ampliado.

El lanzador

A estas alturas del curso ya debes saber lo que es el Minilanzador, situado en la parte derecha de la barra de estado. Pues bien, el lanzador contiene los mismos botones que el minilanzador (botones que permiten abrir y cerrar diversos inspectores, paletas y ventanas). La diferencia es que el primero es una paleta flotante y el segundo una paleta fija. El uso de uno u otro dependerá de tus preferencias. Para mostrar o esconder el lanzador, elige Menú Ventana > Lanzador.

Puedes especificar especificar qué botones aparecen en el lanzador (y en el minilanzador) utilizando las Preferencias de Dreamweaver. Esto lo veremos en la siguiente lección.
También puedes cambiar la orientación horizontal (por defecto) del lanzador por la vertical. Para ello haz clic en el icono de orientación situado en la parte inferior derecha.

LAS PALETAS FLOTANTES

Como acabas de ver, desde el lanzador se accede a otras paletas y ventanas que se encuentran en el Menú Ventana. Desde algunas de estas ventanas se controlan opciones avanzadas que exceden las pretensiones de un curso básico como es éste. Otras ventanas las iremos viendo en los siguientes capítulos. En esta lección nos fijaremos solamente en la paleta Historial.

La mayoría de las paletas e inspectores de Dreamweaver se pueden acoplar o combinar en una única paleta flotante con múltiples fichas de selección como puedes ver en la imagen. Esto facilita el acceso a la información sin saturar el espacio de trabajo. Debes tener en cuenta que el lanzador, el inspector de propiedades y la ventana Sitio no se pueden acoplar.

Para combinar dos o más paletas y crear una paleta con fichas de selección arrastra la ficha (no la barra de título) de una paleta flotante sobre otra paleta flotante. Cuando aparezca un borde resaltado alrededor de la paleta de destino, suelta el botón del ratón. Para quitar una paleta de la paleta con fichas de selección arrastra su ficha fuera de la ventana.

La paleta Historial (en el dibujo pone Marcador, pero la versión 4 pone Historial)

Una BBLa paleta de Historial muestra una lista de todos los pasos dados en el documento activo desde que éste se ha creado o abierto. La paleta de Historial no muestra los pasos dados en otras ventanas de documento. Podrás comprobar su utilidad, porque permite deshacer uno o varios pasos, así como repetir pasos y crear nuevos comandos para automatizar tareas repetitivas. El control deslizante de la paleta de marcador señala inicialmente el último paso que ha dado. Para mostrar o esconder la paleta de Historial, elige Menú Ventana > Historial (o bien accede a ella a través del lanzador o del minilanzador).

LOS MENÚS CONTEXTUALES

Al trabajar con Dreamweaver te serán muy útiles los menús contextuales, ya que proporcionan un método para acceder rápidamente a los comandos y las propiedades más comunes relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales sólo aparecen los comandos que corresponden a la selección actual.

Para abrir menús contextuales haz clic con el botón derecho del ratón. Después selecciona el comando que necesitas del menú contextual y suelta el botón del ratón.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

PLANIFICAR UN SITIO

Un sitio Web es un conjunto de documentos enlazados que poseen elementos compartidos: un mismo tema, un mismo diseño o un objetivo común. Dreamweaver ofrece potentes herramientas para la creación y administración de sitios web complejos.

¿QUÉ ES UN SITIO WEB?

Evidentemente, con Dreamweaver puedes crear documentos individuales, pero éstos raramente tienen un fin en sí mismos, sino que están al servicio de un ente mayor: el sitio web. Un sitio agrupa páginas web que están relacionadas entre sí. El primer paso a la hora de crear un sitio consiste en planificarlo cuidadosamente.

LA ESTRUCTURA

Tómate tu tiempo para pensar la estructura que va a tener el sitio. No creas que es un tiempo perdido, ya que tener en la cabeza de antemano la estructura de un sitio te va a ahorrar después mucho tiempo y problemas.

1. Crea una jerarquía lógica
Piensa que secciones y subsecciones tendrá el sitio para colocar las páginas relacionadas en la misma carpeta. Por ejemplo, si estás planificando un sitio de una empresa de material deportivo deberás crear una carpeta para información sobre la empresa y para contactos, otra para comunicados de prensa, y otra para productos. La carpeta de productos, a su vez, puede estar dividida en deportes: tenis, esquí, fútbol. Evidentemente, la organización del sitio dependerá de su naturaleza y de sus pretensiones.

2. Separa los elementos de una misma carpeta por naturaleza
Es conveniente separar las imágenes, los archivos de sonido y otros elementos de los documentos HTML, que se suelen dejar sueltos. Los diseñadores profesionales suelen colocar todos los elementos que desean utilizar en un sitio y que no son documentos HTML en una carpeta llamada Activos. A su vez, esta carpeta puede contener otras carpetas, como Imágenes, Sonidos y Flash.

3. Utiliza siempre la misma estructura para sitios locales y remotos
El sitio local y el sitio web remoto deberán tener exactamente la misma estructura (las mismas carpetas y subcarpetas). Esto es muy importante, porque de lo contrario puedes encontrarte con que muchos de los vínculos que has creado y que funcionan en tu máquina no lo hacen una vez que has cargado el sitio en Internet.

LA NAVEGACIÓN

Otra cosa en la que debes pensar atentamente es en el sistema de navegación a través del sitio. Un sitio web debe poseer una estructura lógica y unos recursos de navegación para que el visitante no se sienta perdido. Para ello existen distintos recursos. Uno de ellos es un enlace a la página principal (home) desde donde parten todos los caminos. Otro es dar el camino completo desde la home para que en todo momento el visitante sepa en qué lugar del sitio se encuentra. Otro es crear una página de mapa del sitio, algo así como la estructura de contenidos organizada de forma jerárquica. Otra es ofrecer un sistema de búsqueda para que el visitante encuentre fácilmente la información que desea... Sean cuales sean los sistemas de navegación que elijas, debes tenerlos presentes para crear el sitio.

En este ejemplo puedes ver que se ofrecen muchos recursos de navegación: un enlace a la página principal, servicios de búsqueda y una columna lateral para acceder a las distintas secciones y subsecciones del sitio.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Todo este proceso de planificación de un sitio es mejor realizarlo sobre un papel. No comiences todavía a crear las carpetas hasta que no tengas decidido el modelo de organización que vas a seguir en el diseño del sitio.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

LA VENTANA SITIO

Desde la ventana sitio se controlan todas las operaciones llevadas a cabo con los archivos que componen el sitio. A ella se puede acceder mediante el lanzador y el minilanzador y a través de Menú Sitio > Archivos del sitio.

EL CENTRO DE TRANSFERENCIA

La ventana sitio te permite crear documentos HTML, mover archivos, crear carpetas y organizarlas. Además es el centro desde el que transferimos los archivos entre los sitios local y remoto. De forma predeterminada, el sitio remoto aparece en el panel izquierdo y el sitio local, en el derecho. Puedes cambiar esta configuración en las preferencias de FTP del sitio tal y como hemos visto en una lección precedente.

BOTONES DE VISUALIZACIÓN DE LA VENTANA SITIO

1. Archivos del sitio

Cuando abres la ventan sitio, ésta la vista predeterminada que te sale. Muestra la estructura de archivos del sitio remoto o local.

2. Mapa del sitio

En esta vista se muestra un mapa visual del sitio basado en los enlaces establecidos entre documentos. Puedes elegir que te muestre una vista Sólo mapa o Mapa y archivos.

3. Menú emergente de sitios actuales

Muestra los sitios que has creado. Para cambiar a otro sitio distinto del actual, selecciónalo de la lista. Para agregar un sitio o editar uno existente, elige la última opción de la lista: Definir sitios.

BOTONES DE TRANFERENCIA DE LA VENTANA SITIO

4. Conectar/desconectar

Con este botón conectamos o desconectamos el sitio remoto mediante FTP. Como ya hemos visto, de forma predeterminada, Dreamweaver desconecta del sitio remoto si permanece inactivo durante más de 30 minutos.

5. Actualizar

Presionando este botón actualizaremos las listas de los directorios local y remoto. Lo utilizaremos cuando hayamos hecho cambios en la estructura de archivos o en algún documento. En algunos programas de FTP a esta acción se la llama ‘refrescar’.

6. Obtener

Con este botón copiamos los archivos seleccionados desde el sitio remoto hasta el sitio local. Ten en cuenta que si está activada la opción Permitir desproteger y proteger archivo, las copias al sitio local serán de sólo lectura. Por el contrario, si está desactivada esta opción los archivos transferidos pueden ser modificados.

7. Colocar

Este botón copia los archivos seleccionados desde el sitio local hasta el sitio remoto. Es la acción inversa de obtener.

8. Proteger

Con este botón transferimos una copia del archivo seleccionado desde el sitio remoto hasta el sitio local y el archivo queda marcado como protegido en el servidor.

9. Desproteger

Con este botón transferimos una copia del archivo local al sitio remoto y permite que otros usuarios lo editen. A su vez, el archivo local se convierte en archivo de sólo lectura.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Puede ser que ya hayas manejado con anterioridad algún programa de FTP (transferencia de archivos). Verás que la ventana sitio de Dreamweaver no es muy distinta de la interfaz y la forma de funcionamiento de estos programas. Sin embargo, la ventana sitio de Dreamweaver ofrece opciones de mantenimiento de sitios que no ofrecen otros programas FTP, como la reparación automática de vínculos rotos, comprobación del sitio, etc.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

EJERCICIO

Este primer ejercicio consistirá en la creación desde cero de un sitio nuevo: una página web de un colegio. Al final, habrás definido en tu ordenador la estructura de carpetas y subcarpetas que contendrán todos los archivos del sitio.

DESARROLLO

Lo primero de todo es definir el nuevo sitio en tu ordenador. Para ello, sigue estos pasos:

1. Elige Menú Sitio > Sitio nuevo y sitúate en la categoría Datos locales. Te aparece un cuadro de diálogo.

2. En el campo Nombre de sitio, escribe ‘Colegio2004’. Éste es el nombre del colegio y es el nombre que también vamos a utilizar para diferenciarlo de los demás sitios con los que trabajamos. Utilizaremos este sitio para todos los ejercicios del curso. Escribe siempre en minúsculas, pues algunos servidores diferencian entre minúsculas y mayúsculas.

3. En el campo Carpeta raíz local, escribe ‘C:\colegio2004\’. En esta carpeta se almacenará todos los archivos que van a componer el sitio.

4. Activa la opción Actualizar lista archivos locales autom.

5. En el campo Dirección HTTP, escribe la dirección URL donde vas a colgar el sitio web. Si todavía no lo sabes con certeza, déjalo en blanco. Cuando lo sepas, elige Menú Sitio > Definir sitios > Editar.

6. Activa la opción Caché.

El cuadro de diálogo debe quedar como ves en la imagen de abajo. Solamente te queda Aceptar para crear el sitio depornet2002 en tu ordenador.

El siguiente paso es crear la estructura de carpetas y subcarpetas que contendrán los archivos del sitio. Piensa que vas a necesitar una carpeta que agrupe los documentos html y otra carpeta para las imágenes. Con estas dos carpetas será suficiente para crear un sitio sencillo. Para ello, sigue estos pasos:

1. Abre la ventana sitio y, después, el sitio colegio2004. Verás que está vacío.

2. Elige Menú Archivo > Nueva carpeta. Llámala ‘html’.

3. Sitúate en la carpeta raíz colegio2004 y haz lo mismo que en el paso 2. Llama a esta nueva carpeta ‘imagenes’. No utilices nunca acentos, pues dan problemas en algunos servidores.

RESULTADO

Ya tienes creadas las subcarpetas que contendrán los elementos del sitio depornet2002. La ventana sitio debe quedar como ésta:

COMPROBACIÓN DE VÍNCULOS

Antes de colocar el sitio en un servidor y dejarlo listo para las visitas de los internautas, conviene comprobarlo localmente. Uno de los pasos imprescindibles es asegurarse de que no hay vínculos rotos entre los documentos.

COMPROBAR VÍNCULOS

La función Comprobar vínculos se utiliza para buscar vínculos rotos y archivos sin referencia en archivos de un sitio local. Los únicos vínculos que Dreamweaver verificará son los establecidos entre documentos del sitio, aunque también recopila una lista de los vínculos externos, pero sin verificarlos.

Para comprobar los vínculos de una parte de un sitio local:

1. Abre la ventana sitio y elige un sitio del menú emergente.

2. En el panel Local, selecciona los archivos o las carpetas que deseas comprobar.

3. Inicia la comprobación. Puedes utilizar dos métodos: mediante Menú Archivo > Comprobar vínculos, o con el menú contextual.

4. Tras efectuar la comprobación, Dreamweaver te muestra el cuadro de diálogo Verificador de vínculos:

5. Dreamweaver distingue entre vínculos rotos (vínculos a archivos no encontrados en el disco local), vínculos externos (vínculos que Dreamweaver no puede comprobar porque están fuera del sitio) y archivos huérfanos (archivos a los que no están vinculados otros documentos). Puedes desplegar el menú emergente Ver para ir de una lista a otra. Debajo de la lista se muestra el resumen completo de la comprobación que ha efectuado Dreamweaver.

Para comprobar los vínculos de todo el sitio elige Menú Sitio > Comprobar vínculos en todo el sitio. Para guardar todo el informe como archivo de texto con tabulaciones, haz clic en Guardar. Si no deseas guardar el informe, haz clic en Cerrar.

REPARAR VÍNCULOS ROTOS

Puedes reparar los vínculos rotos directamente en el cuadro de diálogo Verificador de vínculos. Para ello:

1. Selecciona el vínculo roto en el cuadro de diálogo Verificador de vínculos.

2. Haz clic en el icono de carpeta para localizar el archivo con el que quieres establecer el vínculo o escribe su ruta y nombre.

3. Pulsa la tecla Tabulación o Entrar.

4. Si hay otras referencias rotas a este mismo archivo, aparecerá un cuadro de diálogo para saber si Dreamweaver debe reparar las referencias en los otros archivos. Haz clic en Sí para actualizar todos los documentos de la lista que hacen referencia a este archivo. Haz clic en No para actualizar únicamente la referencia actual.

5. A medida que los vínculos se van reparando, sus entradas desaparecen de la lista Vínculos rotos.

Comprobar los vínculos consiste en hacer un chequeo a tu sitio local para asegurarte que todos los links funcionan correctamente. Esto se puede hacer sencillamente desde la ventana sitio de Dreamweaver.

DESARROLLO

A estas alturas del curso todavía no has aprendido a crear vínculos, por ello deberías leer las lecciones y hacer los ejercicios del capítulo 7 antes de hacer este ejercicio. Nosotros vamos a suponer que así lo has hecho y que tu sitio “colegio2004” ya posee los vínculos que vamos a comprobar aquí. Sigue estos pasos:

1. Abre la ventana sitio de colegio2004 y elige Menú Archivo > Comprobar vínculos. Dreamweaver te muestra el cuadro de diálogo Verificador de vínculos.

2. Si has hecho bien todos los ejercicios no deberías tener ningún vínculo roto (vínculos a archivos no encontrados en el disco local de tu ordenador). De todas formas vamos a crear un vínculo roto para que vas qué fácil es repararlos desde esta misma ventana de Verificador de vínculos.

3. Desde la ventana sitio, selecciona la imagen ‘mapa’ de la carpeta de imágenes y llévala hasta la carpeta de html. Ahora vuelve a hacer una comprobación de vínculos y observa cómo en la página información.htm hay un vínculo roto.

4. Vamos a reparar este vínculo roto. Selecciónalo y haz clic en el icono de carpeta para localizar la nueva ubicación del archivo. Recuerda que lo habíamos situado en la carpeta ‘html’. Luego pulsa la tecla Enter.

RESULTADO

Cuando Dreamweaver a reparado el vínculo, elimina su entrada de la lista de vínculos rotos.

CREAR Y EDITAR DOCUMENTOS HTML

Los documentos HTML son las páginas web que el internauta verá en el explorador al navegar por nuestro sitio remoto. Es conveniente tener abierta la ventana sitio, ya que desde allí accederemos a las diferentes opciones para gestionar documentos.

CREAR UN DOCUMENTO HTML EN BLANCO

Puedes hacerlo de dos maneras distintas:

1. Desde la ventana de documento, elige Menú Archivo > Nuevo. Aparece un documento totalmente en blanco.

Si eliges esta opción, después deberás guardar el archivo en la carpeta correspondiente del sitio local. Para ello elige Menú Archivo > Guardar y especifica la carpeta y el nombre correspondiente.

2. Desde la ventana sitio y con la carpeta donde queremos que se guarde el archivo seleccionada, elige Menú Archivo > Nuevo archivo. Dreamweaver creará un nuevo documento en blanco dentro de la carpeta seleccionada, aunque no lo abrirá.

ABRIR UN ARCHIVO HTML EXISTENTE

Puedes hacerlo de dos maneras distintas:

1. Desde la ventana de documento, selecciona Menú Archivo > Abrir. Indica la ruta y el documento que quieres abrir.

2. Desde la ventana sitio, haz doble clic sobre el archivo que quieres abrir o elige Menú Archivo > Abrir.

BORRAR UN ARCHIVO HTML EXISTENTE

Puedes hacerlo de dos maneras distintas:

1. Desde la ventana sitio, selecciona el documento que quieres borrar y elige Menú Archivo > Borrar.

2. Desde la ventana sitio, selecciona el documento que quieres borrar y pulsa la tecla Supr (Suprimir).

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Puedes abrir un documento existente desde la ventana sitio seleccionándolo previamente y después elegir Menú Archivo > Abrir seleccionado.

DEFINIR LAS PROPIEDADES DE UN DOCUMENTO

Desde Menú Modificar (o el menú contextual haciendo clic en la ventana de documento) se accede a las Propiedades de la página actual. En ese cuadro de diálogo se determinan las configuraciones generales que va a tener el documento HTML.

OPCIONES DE PROPIEDADES DE PÁGINA

Este es el cuadro de diálogo para definir las propiedades de un documento. Vamos a ver sus opciones.

Título

No debes confundir entre título de la página y nombre de archivo. Ambos pueden ser distintos. El título de la página es lo aparece en la barra de título de la ventana de documento y en la ventana del explorador. Por ello, debe ser un nombre descriptivo, para que el visitante sepa de primeras el contenido de la página.

Imagen de fondo y Fondo

Especifican una imagen y un color de fondo para la página. Si la imagen no ocupa toda la ventana, Dreamweaver forma un mosaico con ella (la duplica).

Texto y Vínculos

Estos campos definen los colores predeterminados de texto, vínculo, vínculo visitado y vínculo activo (el vínculo activo es aquel sobre el cual se está haciendo clic).

Margen izquierdo y Margen superior

Estos campos especifican los tamaños de los márgenes de la página en la etiqueta BODY. Internet Explorer sí muestra estos valores, pero no así Netscape Navigator. Para que la página se vea como queremos en ambos exploradores debes introducir también valores en los campos Ancho del margen y Alto del margen cada vez que establezcas las opciones Margen izquierdo y Margen superior. Ten en cuenta que Dreamweaver no te muestra márgenes de página en la ventana de documento, pero sí puedes verlos en Vista previa en el explorador (F12).

Ancho del margen y Alto del margen

Estos campos también especifican los tamaños de los márgenes de la página en la etiqueta BODY, pero sólo son detectados por Netscape Navigator, no por Internet Explorer. Por ello, para que la página se vea como queremos en ambos exploradores debes introducir también valores en los campos Margen izquierdo y Margen superior cada vez que establezcas las opciones Ancho del margen y Alto del margen. Si quieres ver los márgenes deberás hacerlo en Vista previa en el explorador (F12).

Codificación del doc.

Especifica la codificación empleada para los caracteres del documento. Elige Occidental para los idiomas de Europa occidental. Todos los idiomas asiáticos utilizan codificación de doble byte.

Imagen de rastreo

Una imagen de rastreo es una imagen que se va a emplear como guía para copiar un diseño. Una imagen de rastreo puede ser un archivo JPEG, GIF o PNG y se sitúa en el fondo de la ventana de documento. Puedes ocultar la imagen, configurar su opacidad mediante la barra de deslizamiento que te aparece en el cuadro de diálogo Propiedades de la página, así como cambiar su posición. La imagen de rastreo sólo se encuentra visible en Dreamweaver. Ésta nunca podrá verse en la página desde un explorador.

Transparencia imagen

Determina la transparencia de la imagen de rastreo, desde completamente transparente hasta completamente opaca.

Carpeta de docs.

Muestra la carpeta en la que está guardado el documento actual.

Carpeta del sitio

Muestra la ruta de la carpeta raíz local del sitio en el que se ha guardado el documento actual.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Puedes ver y ocultar una imagen de rastreo mediante Menú Ver > Imagen de rastreo > Mostrar.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

EJERCICIO

Las propiedades de una página web definen características comunes como el título de la página, sus márgenes, los colores de fondo y de vínculos, etc. En esta lección estableceremos un título y un color de fondo para cada página de nuestro web.

DESARROLLO

1. Abre la página index.htm del sitio COLEGIO2004. Para ello elige Menú Archivo > Abrir (desde la ventana de documento) o haz doble clic sobre su icono en la ventana sitio.

2. Elige Menú Modificar > Propiedades de la página. En el campo título escribe ‘colegio2004 – educación siglo XXI’. En el campo Fondo elige un color azul verdoso como color de fondo, por ejemplo el 00CCCC. En el campo Texto elige el negro (color 000000). Haz clic en Aceptar y guarda el documento.

INSERTAR ELEMENTOS EN LA CABECERA

La cabecera de un documento HTML contiene metainformación sobre el documento. La cabecera está definida por la etiqueta HEAD y no suele estar visible para los visitantes, a excepción del título de la página.

CONTENIDO DE HEAD

La cabecera contiene información importante además del título del documento: tipo de documento, la codificación de idioma, las palabras clave, los indicadores de contenido para motores de búsqueda, etc. No es necesario incluir todos estos elementos para cada página. Lo más normal es hacerlo para la página principal únicamente.
Para ver los elementos de la cabecera de un documento, elige Menú Ver > Contenido de Head. Cada icono que aparece en la parte superior de la ventana es un elemento de la cabecera. Para editar los elementos de cabecera, haz clic en uno de los iconos y define o modifica sus propiedades en el inspector de propiedades. Para insertar más elementos de cabecera, elige Menú Insertar > Head y elige el tipo de elemento. Después define o modifica sus propiedades en el cuadro de diálogo que aparece o en el inspector de propiedades. Vamos a ver someramente los distintos elementos de cabecera:

TÍTULO

Es el título que aparecerá en la barra de título de la ventana de documento y en la barra de título del explorador cuando se ve la página en un programa de este tipo. De él ya hemos hablado en la lección anterior.

OTROS ELEMENTOS DE CABECERA

Meta

Palabras clave

Descripción

Actualización

Base

Vínculo

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

DESARROLLO

1. Abre la página index.htm del sitio. Elige Menú Ver > Contenido de Head.

2. Elige Menú Ventana > Objetos para visualizar la paleta de objetos. Sitúate en el panel Head del menú desplegable superior.

3. Elige el icono de la llave para insertar las palabras clave

4. Escribe palabras clave separadas por comas: educación, infantil, primaria, secundaria, concertado. Haz clic en Aceptar. Guarda la página.

RESULTADO

Ahora puedes ver en el contenido de head que te ha aparecido el icono de la llave, identificador de que la página web contiene palabras clave.

PROPIEDADES DE TEXTO

La mayoría de los atributos de texto más comunes (negrita, cursiva, fuente, tamaño de fuente, ect) se pueden controlar desde el inspector de propiedades. Éste muestra inicialmente las propiedades utilizadas con mayor frecuencia. Para ver todas las propiedades haz clic en la flecha de ampliación, situada en el ángulo inferior derecho.

INSPECTOR DE PROPIEDADES

Al seleccionar un texto, o al colocar el punto de inserción en él, podemos ver en el inspector de propiedades la mayoría de sus atributos. Vamos a ver sus opciones y botones uno por uno.

Formato

Elige una opción del menú emergente si quieres aplicar un estilo de bloque predeterminado al texto que está seleccionado. Los estilos de encabezado se utilizan para aplicar una estructura jerárquica al texto. Cuanto menor sea el número del encabezado, mayor será el tamaño del encabezado. Es decir, Encabezado 1 hace referencia al encabezado más importante.

Fuentes

Las fuentes no se muestran en solitario sino en combinación con otras. Esto es así porque el explorador podría encontrarse con el caso de que en el ordenador del internauta no se encontrara instalada la fuente que nosotros hemos decidido aplicar. Gracias a la combinación de fuentes, el explorador busca en ordenador del usuario la primera fuente que tenga instalada de la serie de fuentes y convierte el texto a esa fuente. Por ejemplo, si el internauta no tiene instalada la fuente Verdana, buscará la fuente Arial, y luego la Helvética... hasta encontrar una sí instalada.

Tamaño

Aplica un tamaño de fuente específico (de 1 a 7) o un tamaño de fuente (de –7 a + 7) relativo al tamaño BASEFONT (el valor predeterminado es 3). Debes saber que es imposible especificar un tamaño concreto en puntos, al menos mediante una etiqueta HTML.

Color del texto

Aquí puedes seleccionar el color con el que quieres que sea mostrado el texto seleccionado.

Negrita y cursiva

Aplican al texto el estilo correspondiente.

Alinear a la izquierda, al centro o a la derecha

Aplican al texto la alineación correspondiente.

Vínculo

Con esta opción podemos convertir el texto seleccionado en un hipervínculo. Para ello deberemos especificar una URL haciendo clic en el icono de carpeta para localizar una página del sitio o escribiendo directamente la URL.

Destino

Este campo especifica el marco o la ventana donde se cargará la página vinculada. En la lista figuran los nombres de todos los marcos del documento actual si los tuviera y las opciones básicas que ya vimos en una lección anterior (_blank, _parent, _self y _top).

Lista sin ordenar

Apretando este botón se convierte el párrafo o los párrafos seleccionados en un elemento de una lista con viñetas (listas con entradas gráficas de posición).

Lista ordenada o numerada

Este botón convierte el párrafo o los párrafos seleccionados en un elemento de una lista numerada.

Sangría y Anular sangría

El botón de la izquierda anula y el de la derecha inserta sangría en el texto seleccionado.

Elemento de lista

Este botón abre el cuadro de diálogo Propiedades de lista. Lo veremos con más detenimiento en una lección posterior.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Puedes convertir un texto seleccionado en un hipervínculo arrastrando un archivo (que se convertirá en el destino del vínculo) desde la ventana Sitio hasta el cuadro Vínculo del inspector de propiedades.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

ejercicio

En Dreamweaver puedes dar formato al texto de una página web de forma similar a como lo harías en un editor de textos como, por ejemplo, Word. En este ejercicio aprenderás a hacerlo usando el inspector de propiedades.

DESARROLLO

1. Abre la página index.htm del sitio. Elige Menú Ventana > Propiedades para abrir el inspector de propiedades.

2. Escribe en la primera línea estas palabras ‘Página principal de COLEGIO2004’. Selecciona esta línea y dale este formato: Formato: Párrafo, Fuente: Arial, Helvética, sans-serif, Tamaño: 5, Negrita, Color: 003366, Centrado.

3. Selecciona el siguiente párrafo y dale el mismo formato, cambiando solamente el Tamaño, que será 2. Recuerda que si te equivocas, siempre puedes Deshacer acciones o volver unos pasos atrás con la paleta Marcador.

RESULTADO

Como puedes ver, aplicando formatos con el inspector de propiedades puedes jerarquizar la información. En este ejemplo, la línea superior es interpretada como un titular por los internautas y el párrafo inferior como una entradilla. Guarda el documento.

APLICAR FORMATO CON ETIQUETAS HTML

La forma más usual de aplicar formato a un texto con Dreamweaver consiste en utilizar las etiquetas HTML. Este formato se aplica desde el inspector de propiedades, donde aparecen las opciones más comunes, o desde el Menú Texto, donde se encuentran más opciones. Al elegir una de estas opciones de formato, se inserta automáticamente una etiqueta en el código fuente HTML.

MODIFICAR COMBINACIONES DE FUENTES

Puedes borrar, modificar o agregar fuentes con el comando Editar lista de fuentes del menú emergente del inspector de propiedades y o en Menú Texto > Fuente > Editar lista de fuentes.

Para modificar las combinaciones de fuentes selecciona una de la lista superior del cuadro de diálogo. Acto seguido, las fuentes de la combinación seleccionada aparecerán en la lista Fuentes elegidas, situada en la esquina inferior izquierda del cuadro de diálogo. A la derecha de ésta se encuentra una lista con todas las fuentes instaladas en el sistema. Para agregar o quitar fuentes de una combinación, haz clic en el botón << o >> entre las listas Fuentes elegidas y Fuentes disponibles. Para agregar o quitar una combinación de fuentes, haz clic, respectivamente, en los botones + y - de la parte superior del cuadro de diálogo. Para desplazarse por la lista de combinaciones de fuentes, haga clic en los botones de flecha de la parte superior del cuadro de diálogo.

ESTILOS DE FUENTE

Como hemos visto con anterioridad, en el inspector de propiedades se muestran dos opciones de estilo de fuente: negrita y cursiva. En Menú Texto > Estilo dispones de muchas más opciones: subrayado, tachado, cita, etc.

ELEGIR EL COLOR

Todos los colores de la paleta de color del inspector de propiedades (ver imagen) son seguros para la web. Esto quiere decir que son visualizados con exactitud tanto por Netscape Navigator como Microsoft Internet Explorer en los sistemas Windows y Macintosh en el modo de 256 colores. En realidad son menos: se suele decir que hay 212 colores seguros para la web, que son los que conforman la paleta de colores de Dreamweaver.

Con el cuentagotas puedes seleccionar cualquier color en cualquier punto del monitor del ordenador, incluso fuera de las ventanas de Dreamweaver. Si haces clic en otra aplicación, Dreamweaver recogerá el color donde hayas hecho clic. Para limitar la selección a colores seguros para la Web con esta herramienta, debes activar el botón de cuentagotas de colores seguros para la Web (el primero de la izquierda de la parte inferior derecha). Cuando esta opción está activada, el color seleccionado cambiará por el color seguro para la Web más próximo. Con el botón central se elimina el color actual sin elegir otro diferente. El botón de más a la derecha abre el selector de colores del sistema. Vamos a verlo con más detenimiento.

El selector de color se utiliza para elegir un color no incluido en la gama segura para la Web. Se accede a él a partir del botón de la paleta y (si tenemos un texto seleccionado) Menú Texto > Color. El selector de colores del sistema no se limita a los colores seguros para la Web. Puedes seleccionar cualquier color haciendo clic en cualquier punto de la gama de colores o introduciendo los valores RGB. También puedes agregar cualquier color a una lista personalizada de colores.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

En lenguaje HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo, 0066FF) o con nombres (red). Cualquier valor hexadecimal que combine los pares 00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y 255, respectivamente) representa un color seguro para la Web, a excepción de cuatro combinaciones: Internet Explorer en Windows no muestra correctamente los colores 0033FF (0,51,255), 3300FF (51,0,255), 00FF33 (0,255,51) y 33FF00 (51,255,0).
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

EJERCICIO

Si quieres añadir nuevas fuentes a la lista de fuentes de Dreamweaver debes tener en cuenta las consideraciones que hacíamos en una lección anterior. Por ello, debes elegir fuentes que sean comunes entre los internautas. Cuanto más 'rara' sea la fuente, menos posibilidades tendrás de que tus visitantes la tengan instalada.

DESARROLLO

1. Abre la página index.htm del sitio. Elige Menú Texto > Fuente > Editar lista de fuente.

2. Selecciona la opción Agregar fuentes de la lista de fuentes (es la última opción de la lista superior).

3. En la lista Fuentes disponibles se muestran las fuentes instaladas en tu ordenador. Elige una y pásala a la lista Fuentes elegidas con el botón de flechas correspondientes.

4. Repite el paso 3 para cada una de las fuentes que formarán parte de la nueva combinación de fuentes.

5. Haz clic en Aceptar.

RESULTADO

En el inspector de propiedades puedes ver la nueva combinación de fuentes que has creado y que ya está lista para su aplicación sobre un texto.

Las útiles tablas.

Si observamos una página importante vemos que el texto y las imágenes están organizados o repartidos en varias filas y columnas.

El contenido de las páginas se organiza colocándolo dentro de tablas con líneas ocultas. Para emplear tablas con líneas no visibles ponemos cero "0" como tamaño del borde.

Para añadir una tabla simplemente.

Pulsamos sobre Insertar (Insert) en la Barra superior.
Pulsamos sobre Tabla.

Aparece un Cuadro Insert Table o Insertar Tabla para definir las características de la tabla.

En este cuadro podemos definir el número de Filas (Rows) de la tabla. En nuestro ejemplo hemos puesto una fila.
Definimos también el número de Columnas. En nuestro ejemplo hemos puesto 2 columnas.
El tamaño de la tabla o ancho (Width) lo podemos definir en porcentaje del ancho de la página. Si ponemos 100 la tabla ocupará de lado a lado de la página. Si colocamos la tabla dentro de otra tabla se ajusta en función de la tabla en la que se encuentra. En nuestro ejemplo colocamos 75 de forma el ancho será el 75% del ancho.
Y definimos el tamaño del Borde. En nuestro ejemplo hemos puesto Borde de tamaño 1 de forma que la tabla será visible al acceder con el navegador.

Y el resultado es el siguiente.

Modificar las Tablas

La composición de las páginas Web se organiza insertando los elementos como texto e imágenes en tablas. Suele ser por tanto necesario ajustar y modificar las tablas.

Vamos a crear una tabla y luego a modificarla.

Pulsamos Insertar en la barra superior.
Pulsamos Tabla en el menú que aparece.

Nos aparece el Cuadro Insertar Tabla que nos permite definir la Tabla. En nuestro ejemplo crearemos una tabla de 3 columnas y 4 filas (Rows) tal como se muestra en la imagen. Pulsamos OK o Aceptar.

Y el resultado se muestra a continuación.

Ahora seleccionamos la tabla para modificarla. Nos colocamos en una esquina de la tabla y justo cuando pasamos por el vértice aparece una cruz, pulsando el botón izquierdo del ratón seleccionamos la tabla. La selección de la tabla se muestra en la siguiente imagen.

Otra forma de seleccionar la tabla es colocar el cursor sobre la tabla y en la barra que aparece en la parte inferior de la pantalla, mostrando las instrucciones del lenguaje HTML pulsar sobre <table>. Tal como se muestra en la siguiente imagen.

Y una forma rápida de seleccionar la tabla para poder modificarla es:

Colocamos el cursor dentro de la tabla.
Pulsamos el botón DERECHO del ratón.
En el menú que aparece nos colocamos sobre Tabla.
Pulsamos Seleccionar.

Una vez seleccionada la tabla el cuadro o ventana flotante mostrará el cuadro que nos permite modificar la tabla.

Para que aparezca tiene que tener activada esta Ventana. En caso de no estar activada debe pulsar en la Barra superior sobre Ventana (Window) y Properties.

Ahora podemos cambiar la tabla. Por ejemplo cambiamos la alineación de la tabla para que quede con alineación a la derecha. Lo hacemos, seleccionando Alineación y Derecha (Right) tal como se muestra en la imagen.

Las tablas de posición.

Vista disposición, vista estándar

En el panel de objetos encontramos los iconos que nos permiten decidir en que tipo de vista vamos a trabajar.

DW nos proporciona la posibilidad de trabajar en

vista estándar (la habitual en los programas de este tipo) dibujando tablas en las que insertaremos objetos, y

vista disposición que nos permite dibujar celdas aisladas en torno a las cuales el programa dibujará una tabla.

Comenzaremos por la vista de disposición. Pinchando en el icono dibujar celda, trazaremos en el espacio en blanco de la página una celda. Vemos que de forma automática se traza una tabla que contiene esta celda. Podemos trazar mas celdas de distintos tamaños o variar el tamaño de cualquiera de ellas, seleccionándola y arrastrando los cuadrados de selección que aparecen en los lados.

Si queremos dar a nuestra celda un tamaño fijo, lo hacemos en el panel de propiedades. Teniendo seleccionada la celda, escribimos en los espacios correspondientes las medidas que debe tener.

A continuación, agruparemos las celdas que hemos creado en una tabla, para ello, pinchamos el icono dibujar tabla y trazamos un rectángulo que contiene las celdas que queremos agrupar. El resultado será:

Creando una tabla que agrupa a un número determinado de celdas, podemos moverlas a la vez o definir propiedades comunes a todas ellas.

En vista disposición podemos dar color al fondo de las celdas utilizando el panel de propiedades.

Una vez completado el trazado de celdas y tablas, hacemos clic en el icono de vista estándar para apreciar el resultado.

En vista estándar podemos modificar el tamaño y definir propiedades de las tablas seleccionándolas y trabajando en el panel de propiedades. Podemos decidir también algunos cambios mediante el menú contextual (pinchado dentro de una celda con el botón derecho del ratón). Si tenemos el cursor activo dentro de una celda, podemos aplicarle un estilo o mediante el panel de propiedades cambiar el formato, color y tamaño de la fuente que vayamos a utilizar.

Celdas y tablas , propiedades

Dibujando celdas y tablas de disposición, podemos verificar las propiedades cambiando los datos en el panel que aparece al seleccionar la celda o tabla correspondiente.

Para una celda, si tenemos seleccionado el borde, las propiedades son:

Si por el contrario, el cursor está dentro de la celda, las propiedades que aparecen en el panel son las correspondientes al texto que se inserte dentro de la celda:<E P aparece al seleccionar la celda o tabla correspondiente.<>

Para una tabla en la vista disposición, las propiedades son:

Y por último si optamos por la vista estándar, las propiedades para la tabla, s/P>

Estilos

Podemos definir un estilo para el texto de una celda o tabla, guardarlo y aplicarlo en otros elementos de la página o del sitio.

Para practicar esta posibilidad, seleccionamos una celda y en el panel estilos, pestaña HTML o CSS,

pinchamos con el botón derecho del ratón eligiendo nuevo estilo en el menú desplegable. Aparece una ventana en la que damos nombre al nuevo estilo y al aceptar el programa nos pide que lo guardemos.

Al aceptar, el nombre del estilo aparecerá en el panel de estilos

Una vez hecho esto, vamos definiendo las propiedades que queremos aplicar al estilo y aceptamos.

Para aplicar el estilo a cualquier texto del sitio, solo tenemos que seleccionar el texto correspondiente, (también cuadro de texto, celda, tabla) y pinchar en el nombre del estilo situado en el panel estilos.

VÍNCULOS

Vinculo a un punto de la misma página

Para vincular un texto u objeto a un punto de la misma página, insertamos en ese punto un 'marcador' que en el programa aparece como una etiqueta invisible: punto de fijación con nombre

Damos nombre al punto de fijación y aceptamos. En el lugar indicado aparece un icono . Para crear un vinculo a este punto solo tenemos que escribir en el cuadro de texto vinculo de las propiedades del objeto que queremos vincular, la expresión: #nombredelpunto, siendo nombredelpunto el nombre que le hemos dado.

Vinculo a otro archivo del sitio

Podemos vincular un objeto a cualquier archivo del sitio uniendo el punto que se encuentra al lado del cuadro de texto para el vínculo con el archivo del sitio en la pantalla de carpetas del sitio. Podemos también buscarlo abriendo la carpeta o escribir la ruta.

Vinculo a un archivo externo

Si hacemos un vínculo a un documento html externo, debemos insertar delante la expresión: http://

Vinculo a una dirección de e-mail

Para crear un vínculo a una dirección de e-mail, copiar dicha dirección en el cuadro de texto vínculo, precedida de mailto:.

Descargas

Si hacemos un vínculo a un archivo comprimido o cuya extensión es desconocida para el navegador, al activar el vinculo, se genera una orden de descarga del archivo en el ordenador del usuario.

INSERTAR IMÁGENES

FORMATOS GIF, JPG Y PNG

veremos en este curso básico, donde nos centraremos en la inserción de imágenes. El primer requisito que debe tener una imagen para la web es que debe poder ser vista en diferentes exploradores y sistemas. Otro requisito importante es su tamaño, ya que debemos intentar que éste sea el menor posible para que la página que contiene la imagen no tarde mucho tiempo en descargarse.

En resumidas cuentas, podemos decir que existen tres tipos de formato de imagen que están pensados para la web: GIF, JPG y PNG. Vamos verlos uno por uno.

GIF (*.gif)

El formato GIF (también conocido como GIF89) utiliza una paleta de color indexado, que puede tener un máximo de 256 colores. Para simular más colores de los que hay en la paleta, este tipo de ficheros utilizan una técnica llamada 'dithering' por la cual se mezclan pequeños puntos de distintos colores para simular colores que no existen en la paleta. Otra de sus posibilidades es que podemos elegir uno o varios colores de la paleta para que sean transparentes, es decir, que esos colores desaparezcan para dejar ver los elementos que se encuentren por debajo. GIF es, hoy por hoy, el único formato que permite mostrar animaciones, gracias a una técnica por la que distintos frames se ejecutan secuencialmente. Muy utilizado hace unos años, el GIF animado está perdiendo su lugar de preeminencia a favor de tecnologías como Flash.

JPG (*.jpg)

JPG es una maravilla por sus posibilidades de compresión. Gracias a ella podemos tener una imagen con millones de colores RGB sin que por ello el tamaño del archivo sea muy grande. JPG es un formato compatible con casi todos los navegadores actuales, aunque tiene como desventaja frente al GIF que no puede mostrar animaciones y que tampoco puede tener colores transparentes, ya que esta no se basa en colores indexados. En resumen, podemos decir que el formato JPG da más realismo a la imagen que el formato GIF.

PNG (*.png)

EL PROCEDIMIENTO

Cuando insertamos una imagen en Dreamweaver se genera una etiqueta en el código fuente HTML que informará al explorador dónde se encuentra esa imagen. Cuando se carga una página web en un explorador, éste busca esa imagen y la presenta en el documento con a los parámetros que se hayan ajustado con anterioridad (tamaño, posición, alineación, etc.).

Para insertar una imagen en Dreamweaver se deben seguir dos sencillos pasos:

1. Sitúa el punto de inserción dentro de la ventana de documento, justamente en el lugar donde quieres que aparezca la imagen y, a continuación, elige Menú Insertar > Imagen o haz clic en el botón Insertar imagen del panel Común de la paleta de objetos.

2. Aparece un cuadro de diálogo para elegir el archivo que quieres insertar. Haz clic en Examinar (Windows) o Seleccionar (Macintosh) o bien escribe la ruta de acceso.

Hecho esto, Dreamweaver inserta la imagen que hemos seleccionado en el punto que hemos definido. Ahora sólo queda determinar las propiedades de la imagen en el inspector de propiedades, cosa que veremos en la siguiente lección.

EL INSPECTOR DE PROPIEDADES

Desde el inspector de propiedades podemos controlar algunas propiedades de una imagen.

CREAR UN 'ROLLOVER' O IMAGEN DE SUSTITUCIÓN

Procedimiento

Los efectos de rollover se consiguen mediante funciones de javascript, aunque si usas Dreamweaver para crearlos, no necesitarás escribir ni una sola línea de código, pues el programa lo hará por ti. Para crear una imagen de sustitución deberás seguir estos pasos:

1. En primer lugar, has de crear las dos imágenes que formarán el rollover. La primera imagen será la que se visualice desde que el explorador descargue la página y la segunda imagen sólo aparecerá en cuanto el visitante pase el ratón por encima de ella. Es conveniente que ambas tengan el mismo tamaño y que estén guardadas en una carpeta del sitio. Éste es un ejemplo muy simple de dos imágenes que vamos a utilizar como elementos de rollover:

2. Sitúa el cursor en el punto en el que quieras agregar la imagen de sustitución y elige Menú Insertar > Imagen de sustitución o bien haz clic en el botón correspondiente de la paleta de objetos.

3. Te aparece un cuadro de diálogo como el que puedes ver abajo y deberás rellenar sus campos.

Nombre de la imagen

En este campo escribirás un nombre para la imagen de manera que javascript pueda reconocerla y distinguirla de otras.

Imagen original

En este campo has de escribir la URL de la imagen inicial, la que será visible en el primer momento. También puedes hacer clic en el botón de carpeta para localizar la imagen en la estructura de directorios del sitio.

Imagen de sustitución

En este campo escribirás la URL de la imagen sustitutoria, la que se mostrará cuando el visitante pase por encima con el ratón. Como en el caso anterior, también puedes hacer uso del botón de carpeta.

Carga previa de imagen de sustitución

Si activas esta opción, el explorador cargará las dos imágenes en cuanto comience a descargar la página, de forma que el rollover será instantáneo. Si la desactivas, la imagen de sustitución no se cargará hasta que no sea invocada y, por tanto, el rollover no se producirá de forma instantánea. Siempre es recomendable activar esta opción.

Al hacer clic, ir a URL

En muchas ocasiones, utilizarás la imagen de sustitución como elemento botón con un enlace. En estos casos, debes introducir la URL del documento o recurso enlazado en este campo. Puedes utilizar el botón de carpeta para seleccionarlo.

4. Una vez rellenados estos campos haz clic en Aceptar. Con estos pasos ya habrás creado tu primer rollover. Si quieres puedes ver su efecto en el explorador haciendo clic en la tecla F12.

CREAR MAPAS DE IMAGEN

Con Dreamweaver puedes hacer que dentro de una misma imagen existan distintos vínculos. Es decir, que cada zona de la imagen que determines lleve a un documento o a una parte del documento distinto.

Introducción

Los mapas de imagen, también llamados mapas sensibles o mapas de imagen del lado del cliente, son imágenes que han sido divididas en regiones o zonas interactivas que contienen vínculos. El ejemplo más claro que te puede ayudar a comprender su funcionalidad es que te imagines una imagen de un mapa de Europa dividido por países. Gracias al mapa de imagen puedes hacer que al pulsar sobre cada país el explorador lleve al visitante a la página que contiene la información sobre él. Los mapas de imagen son compatibles con Netscape Navigator 2.0 o posterior y todas las versiones de Microsoft Internet Explorer.

Crear un mapa de imagen

1. En la ventana de documento, selecciona la imagen que vas a utilizar como mapa.

2. Abre el inspector de propiedades y, si está contraído, amplíalo con la flecha para ver todas las propiedades de la imagen. Los controles que utilizarás para crear un mapa de imagen están localizados en la esquina inferior izquierda del inspector de propiedades.

En el campo Mapa debes definir un nombre unívoco para el mapa que vas a crear. La herramienta Puntero sirve para seleccionar las distintas zonas que ya están definidas en la imagen, para que puedas ajustar sus propiedades o posicionarlas con más precisión dentro de la imagen. Las herramientas Rectángulo, Óvalo y Polígono son las que definen las zonas dentro del mapa. Cada una de ellas realiza una selección geométrica distinta. Selecciona la que mejor te convenga y dibuja sobre la imagen la zona interactiva.

3. Una vez definida la zona, el inspector de propiedades cambia a este aspecto:

En el campo Vínculo establecerás la URL del vínculo, siguiendo los mismos parámetros que si lo hicieras para una imagen única. También puedes rellenar, si quieres, el campo Destino y el campo Alt, con un texto alternativo por si el visitante no puede ver la imagen.

4. Repite los tres primeros pasos para cada nueva zona que quieras incluir en el mapa de imagen.

CREAR BARRAS DE EXPLORACIÓN

Una barra de exploración es uno de los elementos más recurridos para facilitar la navegación a través del sitio web. Mediante este elemento podrás crear vínculos a las principales secciones del sitio además de introducir interactividad a tus páginas.

Estados de los botones

Básicamente, una barra de exploración es un conjunto de imágenes con funciones de botones de menú que están dispuestas, o bien horizontalmente en la parte superior de un documento o al pie del mismo, o bien verticalmente a un lado del documento (normalmente el izquierdo). En un ejemplo anterior ya vimos un tipo de barra de exploración vertical. Es éste:

Estos botones funcionan de forma similar a las imágenes de sustitución que ya vimos en una lección anterior (es decir, responden a acciones del visitante), aunque poseen dos estados más que los rollover. Si recuerdas la lección en la que se habló de ello, un rollover poseía una imagen original (el estado que será visible cuando el visitante no interactúa sobre ella o estado Arriba) y una imagen de sustitución (el estado que aparecía al pasar el ratón sobre ella o estado Sobre). Pues bien, mediante una barra de exploración, puedes crear dos estados más:

Abajo

Este estado será el que muestre la imagen una vez que el visitante ha hecho clic sobre el botón y, por tanto, ha abierto el vínculo relacionado. El estado Abajo es muy útil para mostrar en qué lugar del sitio se encuentra el visitante en esos momentos. En el instante en que el visitante hace clic sobre otro botón, el botón actual vuelve a su posición Arriba. Por tanto, sólo una imagen de la barra de navegación puede estar en posición Abajo al mismo tiempo.

Sobre mientras abajo

Este estado será el que muestre la imagen cuando el botón se encuentre en su estado Abajo y el visitante pase el ratón por encima.

Insertar una barra de exploración

1. Lo primero de todo es crear las imágenes que formarán parte de cada uno de los cuatro estados. Debes saber que no es necesario que cada estado tenga una imagen definida. Por ejemplo, puedes decidir que solamente vas a crear los estados Arriba, Sobre y Abajo. Asimismo, puedes elegir que dos o más estados estén asociados a la misma imagen. El único estado que es imprescindible definir es Arriba.

2. Elige Menú Insertar > Barra de exploración o haz clic en el botón correspondiente del panel común de la paleta de objetos.

3. Aparece el cuadro de diálogo Insertar barra de exploración.

4. Rellena el cuadro de diálogo atendiendo a estas opciones:

Elementos de la barra de exploración

Cada uno de los botones que crees para la barra de exploración aparecerán en este listado. Encima del listado, en la parte izquierda, hay dos botones ( + y -) para añadir o borrar elementos de la barra. También encima del listado, pero en su parte derecha, hay dos botones con flechas para cambiar la posición en la lista del botón seleccionado.

Nombre de elemento

En este campo debes introducir un nombre para cada botón que quieras crear en la barra de exploración.

Arriba, Sobre, Abajo y Sobre mientras abajo

Son los cuatro estados posibles de un botón de la barra de exploración. En estos campos debes introducir la ruta que lleva a la imagen en cuestión o seleccionarla tras hacer clic en el icono de carpeta.

Al hacer clic, ir a URL

En este campo debes introducir la URL del documento destino del vínculo. En el menú desplegable de la derecha selecciona una ubicación en la que se abrirá el archivo. Las opciones que hay son Ventana principal (para abrir el archivo en la misma ventana) o Marco (selecciona uno de los marcos que tiene la página actual).

Carga previa de imágenes

Con esta opción seleccionada el explorador carga todos los estados de los botones al iniciar la carga de la página. Si esta opción no está seleccionada, es posible que se produzca una demora cuando el visitante mueva el cursor sobre el botón.

Mostrar 'Imagen abajo' inicialmente

Con esta opción seleccionada el explorador muestra el botón seleccionado en su estado abajo cuando se carga la página. Esto te servirá, por ejemplo, si tienes un botón para ir a la página principal en la barra de exploración. De esa forma cuando se carga la página principal, el botón de dicha página estará en su estado abajo.

Insertar

Puedes escoger entre barra de exploración vertical u horizontal con el menú emergente. Para insertar los elementos de barra de exploración en una tabla, activa la casilla de verificación Usar tablas.

5. Cuando hayas rellenado el cuadro de diálogo con el primer elemento de la barra de exploración, haz clic en el botón más (+) para agregar otro botón.

6. Cuando hayas agregado todos los botones para tu barra de exploración haz clic en Aceptar.

INSERTAR UNA BARRA DE EXPLORACIÓN CON FLASH

Puedes crear una barra de exploración con el menú objetos, multimedia y sale directamente.

9. MARCOS

Página con Marcos.

Mediante la utilización de Marcos o Frames podemos dividir una página en varias áreas. De esta forma podemos gestionar de forma independiente las distintas zonas. Permitiendo que una parte cambien en función de los enlaces que pulsamos mientras que otras permanecen fijas. Por ejemplo queremos que a la izquierda se muestre un índice de enlaces que permanezca mientras que el resto de la página cambia.

Activamos la ventana de Objetos. Puede que se encuentre ya activada.

Aparece la ventana Objetos, seguramente con el menú común. Cambiamos al menú de los Marcos. Pulsamos sobre el triangulo que se encuentra en la parte superior. Y seleccionamos el menú de Marcos o Frames.

Aparece un menú que nos permite seleccionar el Marco deseado. En nuestro ejemplo elegimos la primera opción para tener un marco vertical a la izquierda

Y aparece la página dividida en dos partes tal como se muestra a continuación.

La imagen anterior nos muestra la página dividida entre el marco de la izquierda y el resto de la página. Podemos modificar el ancho del marco de forma sencilla pulsando sobre la línea de división y manteniendo el botón pulsado nos movemos.

Al crear el marco anterior se generan tres ficheros o documentos, el que contiene el marco, el resto de la página y un documento que contiene la estructura de la página. Si creamos dos marcos se generan cuatro ficheros, el que contiene la estructura, dos ficheros de marcos y otro que contiene el resto de la página. En la siguiente imagen se muestra el botón que genera dos marcos uno superior y otro a la izquierda.

Podemos modificar las características del marco. En el siguiente ejemplo hacemos visible la división, definimos el tamaño de la linea de separación y seleccionamos el color rojo para la separación. En Borders cambiamos a Yes, en Ancho de borde ponemos 4 y en color de borde seleccionamos rojo.

Y en la vista de diseño se verá como se muestra en la siguiente imagen.

Al definir un marco se genera un fichero que contiene la estructura del marco y otro fichero por cada parte en la que se divide la página. En nuestro primer ejemplo seleccionamos un marco a la izquierda por lo que se generan tres ficheros uno que contiene la estructura, otro el marco izquierdo y otro la zona principal de la página.

Una vez hemos añadido los elementos deseados al marco y al resto de la página es preciso guardar los ficheros.

Podemos guardar los ficheros "uno a uno"

Pulsamos Archivo o "File" en la Barra superior
Pulsamos sobre Guardar Marco o "Save Frame"

Podemos guardar todos los ficheros generados a la vez.
Pulsamos Archivo o "File" en la Barra superior.
Y seleccionamos Guardar Todos los Marcos.

Nos aparece el Cuadro Guardar. Seleccionamos el directorio donde guardar los ficheros. Lo normal es guardar los ficheros en el directorio que hemos definido anteriormente como el Sitio para la Web. Es importante recordar que si guardamos los ficheros en un directorio del disco duro y luego los movemos, copiandolos en otro, puede afectar a los enlaces.

Nos aparece por defecto un nombre de archivo en la parte inferior del Cuadro. Lo normal es borrarlo y sustituirlo por el nombre que deseemos para ese marco.

En nuestro ejemplo el nombre que ponemos al fichero que contiene la estructura es Marco1, tal como se muestra a continuación.

8. CAPAS

Propiedades de las capas

Las capas son contenedores de elementos de una página que tienen la particularidad de poderse superponer, apilar, ocultar o mostrar,... y otras características que nos permiten mayor flexibilidad en el diseño.

Para dibujar y manejar capas es necesario trabajar en vista estándar.

Las propiedades de la capa son:

Insertar objetos en capas

Las capas pueden contener imágenes, texto y otros objetos de la misma forma que las celdas o tablas que ya conocemos. Los objetos incluidos en una capa se mostrarán u ocultarán, se arrastrarán o se moverán con la capa que los contiene.

Control a través del panel capas

En el panel 'capas' aparecen ordenadas las capas contenidas en la página y se muestran las propiedades de orden de apilamiento, visibilidad y nombre de la capa. Teniendo abierto el panel 'capas' podemos cambiar estas propiedades.

Convertir capas en tablas

Seleccionamos las capas y desde Modificar: convertir: capas en tablas y señalando las opciones de diseño deseadas en la ventana de diálogo, podemos convertir un conjunto de capas en una tabla. También podemos realizar la opción inversa.

Comportamientos aplicados a capas

En el panel comportamientos, encontramos dos comportamientos orientados a capas.

Mostrar y ocultar capas

Para ver el funcionamiento de este comportamiento, abrimos una página en blanco y dibujamos una capa con fondo azul y cuya propiedad de visibilidad sea hidden

Insertamos en la página un objeto (otra capa, imagen o texto) y teniéndolo seleccionado abrimos la lista de comportamientos y elegimos mostrar-ocultar capas

Elegimos la capa entre la lista y añadimos mostrar, aceptamos y comprobamos el funcionamiento.

Podemos asociar el comportamiento ocultar capa a la misma capa que debe ocultarse.

Arrastrar capa

Este comportamiento permite al usuario arrastrar una capa. Para definir este comportamiento vamos a seleccionar la etiqueta <body> (cuerpo de la página) que se encuentra a la izquierda de la barra de tareas. Cuando esta etiqueta aparece en negrita, abrimos la lista de comportamientos y elegimos arrastrar capa. Se abrirá un cuadro de dialogo en el que podemos definir algunas características, como la dirección del movimiento de arrastre o el lugar al que debe ser arrastrada la capa. El evento debe ser onLoad.

Realizar animaciones con capas

Podemos utilizar líneas de tiempo para animar capas.

Abrimos el panel de líneas de tiempo y teniendo seleccionada la capa que queremos animar, elegimos en el menú Modificar: línea de tiempo: agregar objeto a línea de tiempo

En el panel veremos una línea de tono azul que corresponde al tiempo en el que se realizará la animación.

Activamos con el cursor el punto inicial de la línea de tiempo y arrastramos la capa a la posición inicial, a continuación activamos el punto final de la línea de tiempo y arrastramos la capa a la posición final dentro de la página.

Para ver la animación al abrir la página activaremos el cuadro verificación Reproducción automática del panel líneas de tiempo. Para que la animación se repita constantemente activaremos el cuadro de verificación Bucle

Comprobamos el resultado.

Si queremos convertir la trayectoria en una curva, señalamos un punto intermedio de la línea de tiempo asignada a nuestra capa y pinchando con el botón derecho del ratón, elegimos Agregar cuadro clave en el panel desplegable. Estando activado este punto, pinchamos la capa y la movemos. Veremos que la trayectoria se transforma en una curva, conservándose el punto inicial y final del recorrido. Comprobamos el resultado.

Podemos poner la animación en marcha o detenerla desde el panel comportamientos, asociando estos a algún objeto de la página.