Introducción a Dreamweaver MX 2004 CARACTERÍSTICA...

163
Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004 es una completa herramienta de diseño Web utilizada tanto por diseñadores Web principiantes como profesionales. A continuación se indican algunas de las potentes características de Dreamweaver MX 2004. CARACTERÍSTICA BENEFICIOS • Herramientas de diseño para el aspecto artístico • Mejorar la experiencia del usuario final, crear sitios basados en los estándares con CSS, y ahorrar tiempo con la edición de gráficos en Dreamweaver Integración poderosa y abierta. • Trabajar en un entorno abierto, incorpora archivos externos y código, y aumentar la integración con las otras herramientas de Macromedia Studio MX 2004 Diseño y entorno de desarrollo racionalizado • Gestionar mejor las funciones básicas, escribir código más eficientemente, y encontrar las funciones más rápido. Aspectos básicos de la interfaz de Dreamweaver Cuando se inicia Dreamweaver por primera vez, se puede elegir el espacio de trabajo que se desea utilizar en función del sistema operativo instalado en el equipo. En esta sección se describe el modo de configurar Dreamweaver MX para su uso en el desarrollo visual de sitios Web. Inicio de Dreamweaver Cuando se instala Dreamweaver MX en equipos con sistemas operativos Microsoft Windows, pueden elegirse estas opciones de formato para iniciarlo: • Diseñador: Un espacio de trabajo todo-en-uno; con los paneles agrupados y anclados en la derecha de la interfaz de trabajo, y con la vista de diseño como modo de vista inicial. • Codificador: Un espacio de trabajo con los paneles agrupados y anclados en la izquierda de la interfaz de Dreamweaver, y con la vista de código como modo de vista inicial..

Transcript of Introducción a Dreamweaver MX 2004 CARACTERÍSTICA...

Page 1: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Introducción a Dreamweaver MX 2004

Macromedia Dreamweaver MX 2004 es una completa herramienta de diseño Web utilizada tanto por diseñadores Web principiantes como profesionales. A continuación se indican algunas de las potentes características de Dreamweaver MX 2004.

CARACTERÍSTICA BENEFICIOS

• Herramientas de diseño para el aspecto artístico

• Mejorar la experiencia del usuario final, crear sitios basados en los estándares con CSS, y ahorrar tiempo con la edición de gráficos en Dreamweaver

• Integración poderosa y abierta.

• Trabajar en un entorno abierto, incorpora archivos externos y código, y aumentar la integración con las otras herramientas de Macromedia Studio MX 2004

• Diseño y entorno de desarrollo racionalizado

• Gestionar mejor las funciones básicas, escribir código más eficientemente, y encontrar las funciones más rápido.

Aspectos básicos de la interfaz de Dreamweaver

Cuando se inicia Dreamweaver por primera vez, se puede elegir el espacio de trabajo que se desea utilizar en función del sistema operativo instalado en el equipo. En esta sección se describe el modo de configurar Dreamweaver MX para su uso en el desarrollo visual de sitios Web.

Inicio de Dreamweaver Cuando se instala Dreamweaver MX en equipos con sistemas operativos Microsoft Windows, pueden elegirse estas opciones de formato para iniciarlo:

• Diseñador: Un espacio de trabajo todo-en-uno; con los paneles agrupados y anclados en la derecha de la interfaz de trabajo, y con la vista de diseño como modo de vista inicial.

• Codificador: Un espacio de trabajo con los paneles agrupados y anclados en la izquierda de la interfaz de Dreamweaver, y con la vista de código como modo de vista inicial..

Page 2: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Configuración del espacio de trabajo en Windows

Nota: Para cambiar un espacio de trabajo después de haberlo elegido, seleccione Menú Edición >Preferencias y haga clic en Cambiar espacio de trabajo en la categoría General.

En Macintosh sólo está disponible un espacio de trabajo, por lo que no aparece este cuadro de diálogo.

Página de Inicio

Cuando ejecuta Dreamweaver MX 2004, por defecto, muestra siempre la Página de Inicio. Desde esta página, puede abrir elementos recientes con los que estuvo trabajando, crear nuevas páginas, crear nuevos sitios, y crear elementos desde los ejemplos. Puede tomar una visita rápida por la aplicación y realizar un tutorial.

Puede desactivar la página de Inicio activando el casillero “No volver a mostrar este mensaje”. En caso contrario, siempre que no tenga un archivo abierto, Dreamweaver mostrará esta página.

Page 3: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Página de Inicio de Dreamweaver

Espacio de Trabajo de Diseñador en Windows

En el espacio de trabajo para diseñadores, todas las ventanas y paneles están integradas dentro de una ventana de aplicación grande.

Espacio de Trabajo para Diseñadores – Solo en Windows

Page 4: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Elemento de la interfaz

Descripción

Barra Insertar Proporciona botones para insertar objetos en los documentos. El menú Insertar contiene los mismos objetos que la barra

Barra de herramientas Documento

Contiene botones y menús emergentes que proporcionan vistas a la ventana de documento, además de operaciones comunes, como obtener una vista previa en un navegador.

Ventana del Documento

Aparece al abrir una página nueva. Es la zona en la que usted trabaja para diseñar su página

Grupos de paneles

Conjuntos de paneles agrupados juntos y con un mismo encabezado.

Panel Archivos Muestra y permite gestionar loss archivos que forman parte de su sitio. Funciona tambien de forma parecida al Explorador de Windows o al Finder (Macintosh).

Inspector de Propiedades

Permite ver y cambiar una variedad de propiedades en el objeto seleccionado actualmente.

Selector de etiquetas

Se localiza en la barra de de estado; parte inferior de la Ventana de documento, y muestra las etiquetas HTML que preceden a la selección actual. Puede hacer clic sobre una etiqueta para seleccionarla y seleccionar también todos sus contenidos.

Espacio de Trabajo en Macintosh

En Macintosh, la interfaz tiene los mismos elementos, pero la disposición es distinta. El grupo de paneles no está integrado dentro de una ventana de aplicación sencilla y grande. Puede mover los grupos de paneles, la barra Insertar, el panel Archivos o el inspector de propiedades a cualquier sitio de la pantalla. La interfaz inicial se parece a la que se muestra a continuación:

Page 5: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Creación de un Sitio Web

Antes de comenzar a crear páginas Web, debería tener alguna idea de su contenido. El desarrollo de páginas Web es similar al diseño de materiales impresos: en primer lugar se desarrolla el concepto. Debe preguntarse — o preguntar a su cliente— algunas cuestiones básicas:

• ¿Por qué se necesita el sitio Web?

• ¿Qué intenta comunicar?

• ¿Quiénes son los visitantes potenciales de las páginas?

• ¿Qué desea que se lleven los visitantes tras la visita?

Tenga en cuenta la probabilidad de que los usuarios sean muy sofisticados, lo cual indicará también la probabilidad de que dispongan de los navegadores más recientes y de los últimos complementos. La pregunta relacionada con el navegador podría determinar si se pueden utilizar hojas de estilos CSS o capas al crear las páginas.

También debe desarrollar un esquema del sitio. Este esquema es similar al guión de un proyecto multimedia o de una película, y proporciona una idea del ámbito del proyecto y un punto de inicio para configurar la estructura de archivos necesaria. Recopile el texto y los gráficos para las páginas Web y ya estará listo para comenzar a utilizar Dreamweaver MX y crear un sitio a partir de todas esas ideas.

Proceso de Desarrollo

Page 6: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

El proceso de creación de páginas Web incluye:

1. Crear una nueva página utilizando una página en blanco o usando una plantilla existente

2. Asignar un título a la página.

3. Colocar texto, gráficos, y vínculos dentro de la página.

4. Guardar la página.

5. Realizar una vista previa de la página en un navegador Web.

Crear una nueva página HTML Para crear un Nuevo documento haga clic en HTML en la columna Crear Nuevo de la Página de Inicio de Dreamweaver. Se abrirá un documento HTML en blanco. Si la página de Inicio de Dreamweaver no está visible o si tiene otro documento abierto, entonces elija Menú Archivo Nuevo o haga clic en la barra de herramientas estándar. Se le presentará un cuadro de diálogo de Nuevo Documento, que le permite crear páginas en blanco o basadas en elementos existentes.

La columna del medio en la pestaña General de este cuadro de diálogo cambia dependiendo de lo seleccionado en la columna Categoría. Por ejemplo, si selecciona Página Básica como Categoría, la columna del medio muestra HTML, Plantilla HTML, y más.

En este curso solo aprenderá a crear páginas básicas HTML y páginas HTML usando plantillas. .

Cuadro de Diálogo Nuevo Documento

Preferencias del Nuevo Documento Las preferencias se pueden establecer mediante Menú Edición Preferencias (Windows o Macintosh OS 9) o mediante Menú Dreamweaver Preferencias (Macintosh OS X). En el cuadro de diálogo Preferencias, seleccione Nuevo documento en la lista Categoría situada a

Page 7: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

la izquierda.

Existen tres opciones de preferencias que tal vez decida utilizar cuando cree nuevos documentos:

• Elija el tipo de documento predeterminado para nuevos documentos, por ejemplo, utilizar una página HTML para las páginas Web estáticas.

• Omita el cuadro de diálogo Nuevo documento cuando utilice los métodos abreviados de teclado Control+N (Windows) o Comando+N (Macintosh)..

• Hacer el documento acorde al estándar XHTML. XHTML (Extensible Hypertext Markup Language) es la versión siguiente al HTML 4. Es un nuevo estándar del lenguaje HTML que lo hace compatible con datos XML. El XHTML es un lenguaje más estricto y por ello asegura un código HTML más limpio. Más aún, el tamaño de archivo del navegador puede ser minimizado.

Preferencias de Nuevo Documento

Añadiendo un título a la página

Agregue un título a cada documento HTML. El título, que se utiliza principalmente para identificar el documento, se muestra en la barra de título del navegador y como nombre del marcador. Elija una frase corta que describa el objetivo del documento. El título puede tener cualquier longitud, pero puede recortarlo si no cabe en la barra de título del navegador. Dreamweaver utiliza “Documento sin título” como texto predeterminado.

Introduzca el título de la página en la barra de herramientas Documento. Para cambiar el título del documento:

1. Seleccione Documento sin título en el cuadro de texto Título y escriba el nombre de la página.

2. Presione Intro (Windows) o Retorno (Macintosh), o bien haga clic en el documento

Page 8: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

cuando haya terminado.

El título que introduzca para el documento aparece en la barra de título del documento junto al nombre del archivo.

Nota: Si no ve la barra de herramientas, elija Menú Ver Barras de herramientas Documento

Caja de Texto Título en la Ventana del Documento

Nota: Si la barra de título del documento (o la barra de título de Dreamweaver si el documento está maximizado en Windows) indica “Documento sin título (nombre de archivo.htm)”, no le ha asignado un título al documento. También verá “Documento sin título” en el área de título de la barra de herramientas Documento.

Cuando se inserta un título a la página este se sitúa este título entre las etiquetas <title></title>.

Usando Vistas de Desarrollo

Dreamweaver tiene tres modos de vista para crear sus páginas

• Vista de Diseño

• Vista de Código

• Vista Dividir

La vista de Diseño le permite crear sus páginas Web visualmente, y la vista de Código le permite ver el HTML generado y modificarlo manualmente. La vista dividir le permite ver juntos la vista de diseño y la vista de Código simultáneamente

Por ejemplo cuando le da un título a su página en la barra de herramientas del documento, ese texto es situado entre las etiquetas HTML <title></title>. Puede comprobar esto en la ventana de Código.

Page 9: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Puede elegir la vista deseada hacienda clic en los botones de Vista de la barra de herramientas del documento.

Botones de Vista en la Barra de Herramientas del Documento

Nota: Para moverse con rapidez entre las vistas de Código y Diseño presione Control + guión (-) (Windows) o Comando + guión (-) (Macintosh).

Guardando las páginas

Guarde la página en blanco antes de proceder al desarrollo. De este modo, cuando importe gráficos u otros medios a la página, todas las referencias se crearán correctamente.

Como los equipos Unix distinguen entre mayúsculas y minúsculas, es mejor utilizar nombres en minúscula para los archivos. Estas son algunas otras reglas que hay que tener en cuenta:

No utilizar espacios en los nombres de archivos. Utilizar el guión bajo o el carácter guión para simular un espacio que separa palabras

Use letras y números, pero nunca caracteres especiales.

Comience el nombre de sus archivos con una letra, nunca con un número.

Estas mismas reglas también se aplican a los nombres de las carpetas. Además, cree nombres de carpetas cortos. Recuerde que el nombre de las carpetas se convierte en parte del URL que los usuarios escriben para tener acceso a la página.

Para guardar los archivos, lleve a cabo una de estas operaciones:

• Seleccione Archivo Guardar.

Page 10: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Utilice el método abreviado de teclado para guardar un archivo: Control+S (Windows) o Comando+S (Macintosh).

• Haga clic en Guardar en la barra de herramientas Estándar.

Guardar archivos usando la barra de herramientas Estándar

Nota: Si no ve la barra de herramientas Estándar, elija Menú Ver Barras de herramientas Estándar.

Páginas Principales Los sitios Web presentan el concepto de página principal. Una página principal es donde todos los usuarios inician su recorrido por el sitio Web. Estas páginas predeterminadas no tienen que ser especificadas específicamente en el URL, ya que los servidores Web las detectan y muestran automáticamente cuando se encuentran en el directorio principal del sitio Web.

Los nombres de estas páginas iniciales varían de un servidor Web a otro. A continuación se incluyen algunos nombres de archivos habituales:

index.htm default.htm home.htm

index.html default.html home.html

Vista previa de las páginas Cuando desarrolle las páginas Web, visualícelas en un navegador o, mejor aún, en varios navegadores. Dreamweaver tiene métodos abreviados de teclado para visualizar las páginas en dos navegadores distintos, denominados navegador principal y secundario.

Existen tres modos de seleccionar los navegadores para realizar la vista previa de sus páginas:

• Seleccione Archivo Vista Previa en el Navegador Editar Lista de Navegadores.

• Haga clic en Vista previa en Explorador (el icono de globo terráqueo) de la barra de herramientas Documento y, a continuación, elija Editar lista de navegadores..

• Elija Edición Preferencias o Dreamweaver Preferencias en Macintosh OS X, y seleccione Vista en Navegador en la lista de categorías de la izquierda.

Page 11: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Categoría Vista Previa en Navegador en Preferencias

Archivos Temporales Una preferencia para la vista previa de sus páginas es hacerlo usando archivos temporales. Cuando utiliza esta opción, Dreamweaver creará un archivo Nuevo y temporal cada vez que realice la vista previa de sus páginas. Si no activa esta opción, necesitará guardar sus páginas cada vez que quiera realizar una vista previa de éstas.

Cuando usted añade un navegador, puede especificar que este sea el navegador principal o el secundario.

• Cuando presiona en su teclado F12 su página se mostrará en el navegador designado como principal..

• Cuando presiona en su teclado Ctrl+F12 (Window) o Command+F12 (Macintosh), su página se mostrará en el navegador designado como secundario.

Cuadro de diálogo Editar Navegador

Page 12: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Configurando las propiedades del documento

Las propiedades del documento son unos ajustes que se aplican en conjunto a la página. Por ejemplo, el color de fondo de la página es uno de los que puede configurar para su página. Para realizar los cambios a las propiedades de su página, elija Menú Modificar Propiedades de la Página.

Color de Fondo

El color de fondo por defecto de las páginas en Dreamweaver es el blanco. Puede cambiar fácilmente el color de fondo de una página usando una paleta de colores preestablecida conocida como la paleta Web-segura (Web-Safe o Web216). La paleta de colores Web-segura contiene 216 colores que son visualizados correctamente en la mayor parte de los navegadores.

Seleccione Aspecto en la lista de Categorías y después haga clic en la caja de color de fondo dentro del cuadro de diálogo Propiedades de la Página. Mueva el puntero con forma de cuentagotas sobre las muestras de colores, y entonces realice clic para seleccionar el color. También puede mover el cuentagotas sobre un color de una imagen para seleccionar ese color.

Paleta de color para el color de fondo

Color de texto predeterminado Cuando usted cambia el color de fondo, puede también necesitar cambiar el color de texto que se va a mostrar. Por ejemplo, no podrá ver texto de color negro, que es el valor predeterminado, si también selecciona el color de fondo de su página como negro.

Haga Clic en la caja Color del Texto para cambiar el color de texto predeterminado. Si aplica un color de texto sobre la página, éste desplazará al color predeterminado.

Imagen de fondo

Una imagen de fondo suele ser un pequeño gráfico que decora “como un mosaico” detrás del contenido de sus páginas, mediante la repetición de este a lo largo y ancho de la ventana

Page 13: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

del navegador.

Seleccione el botón Examinar (Windows) o Elegir (Macintosh) que esta a la derecha del cuadro de texto Imagen de Fondo y localice la imagen que usted necesite usar para el fondo..

Nota: Puede configurar conjuntamente el color de fondo y la imagen de fondo para su página. El color se mostrará mientras la imagen se descarga. Una vez descargada la imagen, esta se superpone al color de fondo.

Resumen • Dreamweaver es una herramienta de diseño visual para el desarrollo de páginas.

• En Windows, hay dos diferentes espacios de trabajo para el desarrollo que puede elegir cuando inicie por primera vez Dreamweaver, que son: Espacio de Trabajo Diseñador y Espacio de Trabajo Codificador.

• Antes de comenzar a crear páginas Web, cree un sitio local. Un sitio local es el directorio raíz de todos los archivos pertenecientes a un sitio Web .

• Puede diseñar sus páginas en Vista de Diseño, manipular el código HTML en la Vista de Código, y ver conjuntamente Diseño y Código en la Vista Dividir..

• Titule y guarde sus páginas inmediatamente.

• Configure los navegadores para vista previa de modo que pueda utilizar F12 y Control+F12 (Windows) o Comando+F12 (Macintosh) para obtener la vista previa de las páginas a medida que se desarrollan.

• Cambie las propiedades de la página para especificar un color de fono y una imagen de fondo.

Adición de contenidos a un sitio

Adición de contenidos

Como diseñador Web, una de sus tareas principales consiste en introducir texto en una página y aplicarle formato para que sea legible para los usuarios. Después tendrá que modificarlo a medida que cambie el contenido. Existen varios modos de añadir texto a la página:

• Escríbalo como lo haría en un procesador de textos

• Cópielo y péguelo desde un documento de texto existente

• Abra un archivo de texto directamente desde Dreamweaver.

• Importar contenido de Microsoft Word

Importando archivos de texto El contenido que recibe un diseñador Web puede llegar en varios formatos. Por ejemplo,

Page 14: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

en un archivo de texto normal (.txt) creado en el Bloc de notas (Windows) o en TextEdit (Macintosh). Los archivos de texto se abren en la vista de código en Dreamweaver. A continuación, debe copiar el texto en el portapapeles y después pegarlo en su documento en la vista de diseño.

Importar Texto Existen varias formas de importar archivos de texto en su página. Usted puede:

• Arrastrarlo desde el panel Archivos y suéltelo en su página (sólo en Windows con Microsoft Word instalado)

• Abrir el archivo de texto, copiarlo y pegarlo en su página en la vista de Diseño.

Cuando usted abre un archivo de texto, abra el archivo en vista de Código. Puede usar copiar/pegar para copiar los contenidos del archivo de texto, volver a la página Web en vista de diseño y pegar el texto.

Puede utilizar los siguientes métodos abreviados de teclado, para seleccionar, copiar y pegar:

Acción Windows Macintosh

Seleccionar todo Ctrl-A Command-A

Copy Ctrl-C Command-C

Paste Ctrl-V Command-V

Importar contenido de Microsoft Word y Excel Con Dreamweaver MX 2004, puede copiar contenido de Microsoft Word y Excel directamente al portapapeles y después pegue el contenido dentro de Dreamweaver. Dreamweaver procesa la información para visualizarlo lo más parecido como sea posible al formato original. Las hojas de Excel son copiadas en tablas formateadas.

En Windows, si tiene instalados en su sistema Microsoft Word o Microsoft Excel, puede también importar archivos de Word o Excel directamente dentro de Dreamweaver.

Los pasos para importar un archivo de Word o Excel a una página Web nueva o una existente son:

1. Seleccione Archivo Importar Documento de Word/Excel.

2. En el cuadro de diálogo Abrir, elija el documento Word o Excel y después realice clic en Abrir.

Nota: Los submenús Importar Documento de Word/Excel no están habilitados si usted no tiene Word o Excel instalados y no aparecen en sistemas Macintosh.

Limpieza de HTML de Microsoft Word

Page 15: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Microsoft Word le permite convertir un documento en un formato HTML al Guardarlo como Página Web (.htm, .html).

Microsoft Word usa un HTML no-estándar en la página resultante. Puede utilizar Dreamweaver para limpiar el HTML y así eliminar etiquetas específicas de Word.

Para limpiar HTML de Word, elija Menú Comandos Limpiar HTML de Word.

El cuadro de diálogo Limpiar HTML de Word tiene dos pestañas, Básico y Detallada. Dreamweaver intenta determinar que versión de Microsoft Word fue usada para crear el HTML. Asegúrese de que esta la versión correcta en el menú emergente.

Clean Up Word HTML dialog box

Por lo general, necesitará usar todas estas opciones como predeterminadas, entonces haga clic en Aceptar para procesar el documento. Una lista con todo lo que fue eliminado de su documento será mostrada si la opción Mostrar Registro al Terminar esta activada.

Note: Cuando utiliza la característica de importación de documentos de Word, disponible en Windows, Dreamweaver realiza para usted la limpieza del HTML de Word.

Controlando la Estructura del Documento

Una vez que ha colocado el texto en la página, necesita utilizar más tiempo para estructurar la información. Puede estructurar el contenido usando:

• Encabezados, para agrupar la información de forma lógica

• Párrafos, para organizar la información bajo los encabezados.

• Saltos de línea, para mantener información relacionada en proximidad

• Listas, para agrupar información dentro de listas con viñetas o numeradas.

Page 16: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

• Reglas Horizontales, para dividir la información visualmente

• Espacios Indivisibles, para ayudar a separar información con los espacios

Encabezados Los encabezados se utilizan para separar las secciones principales del contenido, y permitir al lector encontrar la información que busca. En HTML hay seis niveles de encabezado, cada uno con un tamaño distinto para distinguirlo en la página. Los distintos tamaños de la fuente para los encabezados vienen determinados por el navegador, pero siempre oscilarán entre el mayor (Encabezado 1) hasta el menor (Encabezado 6). Por lo general, los encabezados se muestran en negrita y tienen un espacio de línea incorporado tras el encabezado.

Seis niveles de encabezados

Buen uso de los encabezados Es recomendable el uso de los encabezados en orden, comenzando con un encabezado 1 y moviéndonos al siguiente (Encabezado 2) para otros encabezados anidados dentro del tipo 1 y continuará así en orden. No se salte ningún encabezado si necesita un contenido bien estructurado.

Nota: Para cambiar la fuente y el tamaño del encabezado, aplique un estilo a esa etiqueta de encabezado, mejor que elegir niveles de encabezados aleatorios. Los Estilos se tratarán en una unidad posterior de este curso.

Utilizando el inspector de propiedades

Para añadir un encabezado a una línea de texto, seleccione el texto y después el nivel de encabezado en el menú emergente Formato del inspector de propiedades.

Page 17: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Menú emergente Formato

No es posible aplicar un encabezado a una sola palabra o frase de un bloque. Por ello es posible colocar el punto de inserción de texto en cualquier lugar del párrafo, ya que no tiene que seleccionar todo el bloque.

Cuando se crea un encabezado se rodea al texto afectado con las etiquetas de encabezado HTML que van desde: <h1></h1> hasta <h6></h6>.

Párrafos

Cada vez que presiona Intro (Windows) o Retorno (Macintosh) se crea un nuevo párrafo. Los párrafos se distinguen por una cantidad fija de espacio por encima y por debajo del texto. Cuando se muestra un párrafo en el navegador, el texto se ajusta en función del tamaño de la ventana del navegador. A medida que el usuario aumenta o disminuye el tamaño de la ventana, el texto vuelve a ajustarse al tamaño de la ventana.

Párrafos en la página

Utilizando el inspector de propiedades Para dar formato al texto como un párrafo, elija Párrafo en el menú emergente Formato del inspector de propiedades.

Formato de parrafo

Cuando se crean párrafos, Dreamweaver MX rodea el texto con etiquetas HTML de

Page 18: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

párrafo: <p></p>.

Saltos de Línea

Puede utilizar un salto de línea para forzar un salto de línea "duro" dentro del bloque de texto. A diferencia de un párrafo el salto de línea inserta una menor cantidad de espaciado entre las líneas. Sin embargo, el salto de línea es útil para mantener cercana la información relacionada y controlar el posicionamiento de la información en líneas distintas. Resulta útil, por ejemplo, para visualizar direcciones, líneas de código, versos, etc.

Espaciado con saltos de línea Puede crear un salto de línea de distintos modos:

Presione Mayús.+Intro (Windows) o Mayús.+Return (Macintosh).

Elija Menú Insertar HTML Caracteres especiales Salto de Línea.

Seleccione la categoría Texto en la barra Insertar, haga clic en el menú Caracteres y elija el salto de línea en el menú emergente.

Salto de línea en la barra insertar

Page 19: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Para borrar un salto de línea en el texto, realice alguno de los siguientes métodos:

• Coloque la barra de inserción al final de la línea y pulse Supr (Windows) o Del (Macintosh).

• Coloque la barra de inserción al principio de la línea siguiente y pulse Retroceso (Windows) o Eliminar (Macintosh).

La etiqueta HTML de un salto de línea es <br>.

Alinear párrafos

Puede situar el cursor de su ratón en cualquier lugar dentro de un párrafo y alinear el párrafo usando una de las siguientes opciones:

• Alinear a la Izquierda (predeterminado)

• Alinear al Centro

• Alinear a la Derecha

• Justificar

Elija el botón de alineación en el Inspector de Propiedades..

Opciones para alinear

Creación de Listas

Puede utilizar tres tipos distintos de listas en HTML:

• Listas sin ordenar

• Listas ordenadas

• Listas de definición

Listas sin ordenar

Las listas sin ordenar suelen ser llamadas listas con viñetas, como la que se muestra a continuación.

Page 20: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Lista sin ordenar

Cada ítem de la lista necesita estar en un párrafo separado para formatear la lista apropiadamente. Para crear una lista sin ordenar, seleccione el texto a formatear, y realice alguno de los siguientes pasos:

• Elegir Menú Texto Lista Lista sin Ordenar

• Haga clic en el botón Lista sin Ordenar (parece una lista con viñetas) en el Inspector de propiedades.

Botón Lista sin Ordenar

Si esta insertando texto en una lista, presione el botón Intro(Windows) o Return (Macintosh) para obtener otro ítem de lista. Presione Intro (Windows) o Return (Macintosh) dos veces para salir de la lista.

Para eliminar la lista sin ordenar del texto, seleccione el texto y después elija Texto Lista Ninguna, o vuelva a hacer clic en el botón Lista sin ordenar del Inspector de Propiedades.

Cambiando las propiedades de la lista

Es posible aplicar dos estilos de viñeta diferentes a la lista sin ordenar:

• Viñeta (un círculo relleno)

• Viñeta cuadrada (un cuadrado relleno)

Page 21: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Para cambiar el estilo:

Sitúe el punto de inserción en una línea de la lista..

Haga clic en el botón Elemento de lista del inspector de propiedades.

Botón Elemento de lista

Nota: Si el botón Elemento de lista no está visible, haga clic en la flecha de ampliación, situada en la esquina inferior derecha del inspector de propiedades. Si el botón Elemento de lista está atenuado, es porque ha seleccionado varias líneas en la lista.

Elija el estilo que necesita utilizar de Menú emergente de Estilo en el cuadro de diálogo Propiedades de Lista.

Propiedades de la Lista con Viñetas

Al crear una lista sin ordenar se crea un conjunto de etiquetas que rodean la lista y cada uno de los elementos de la lista: <ul><li>Elemento de la lista 1</li><li>Elemento de la lista 2</li> </ul>

Listas Ordenadas

Las listas ordenadas permiten numerar los elementos. Por ejemplo, se usaría una lista ordenada para las instrucciones paso a paso que debe seguir el usuario para llevar a cabo una tarea. Se pueden utilizar números o letras para indicar cada elemento de la lista.

Page 22: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Lista ordenada

Para crear una lista ordenada, seleccione el texto al que desea aplicar el formato y después lleve a cabo una de estas operaciones:

• Elija Menú Texto Lista Lista Ordenada.

• Haga clic en Lista Ordenada del Inspector de Propiedades.

Botón Lista Ordenada

Para quitar la lista sin ordenar del texto, seleccione el texto y elija Menú Texto Lista Ninguno, o haga clic otra vez en el botón Lista ordenada en el inspector de propiedades.

Cambiar las propiedades de lista

Es posible aplicar cinco estilos distintos de numeración a la lista ordenada:

• Numeración árabe (1, 2, 3…) que es el estilo predeterminado

• Números romanos en minúscula (i, ii, iii…)

• Números romanos en mayúscula (I, II, III…)

• Alfabeto en minúscula (a, b, c…)

• Alfabeto en mayúscula (A, B, C…)

Page 23: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Para cambiar el estilo:

1. Sitúe el punto de inserción en una línea de la lista.

2. Haga clic en el botón Elemento de lista del inspector de propiedades.

3. En el menú emergente Estilo del cuadro de diálogo Propiedades de lista, elija el estilo que desee utilizar.

Propiedades de lista

HTML El aspecto de las etiquetas HTML de una lista ordenada es similar al de las listas sin ordenar: <ol><li>Elemento de lista 1</li><li>Elemento de lista 2</li> </ol>

Listas de definición

Una lista de definiciones consta de una serie de términos y sus definiciones. No hay ningún carácter inicial como en los tipos de listas anteriores. La palabra o el término que se va a definir está justificado a la izquierda; la definición está sangrada y en la siguiente línea. Para que funcione este formato, cada término y su definición deben estar en un párrafo independiente.

Lista de Definición

Para crear una lista de definiciones, seleccione el término y la definición y elija Texto Lista

Page 24: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Lista de definición o bien, en la categoría Texto de la barra Insertar, haga clic en Lista de definición.

Cuando se crea una lista de definiciones, se crea un conjunto de etiquetas para la lista, el término y la definición: <dl><dt>Este es el t&eacute;rmino</dt><dd>Esta es su definici&oacute;n</dd> </dl>

Listas anidadas

Las listas se pueden anidar unas dentro de otras. Se puede utilizar el mismo tipo de lista, o bien combinar una lista ordenada con otra sin ordenar. El botón Aplicar sangría al texto, cuando se utiliza en una lista, crea automáticamente una lista anidada. Se le aplica sangría a los elementos seleccionados y muestran un tipo distinto de viñeta.

Si el tipo de viñeta es, por ejemplo, un círculo, la viñeta anidada cambia a un cuadrado. Puede cambiar el tipo de viñeta en la lista anidada haciendo clic en el botón Elemento de Lista del Inspector de Propiedades.

.

Listas anidadas

Sugerencias sobre listas

• Para cambiar una lista con viñetas a una lista numerada o viceversa, seleccione toda la lista y después aplique el otro formato de lista.

• Para convertir una lista en texto normal, seleccione la lista y aplique de nuevo el tipo de lista. Funciona como un conmutador para desactivar el formato de la lista.

• Los elementos de lista están separados de forma predeterminada por un sólo espacio. Si desea que el espacio entre las líneas sea mayor, inserte un salto de línea al final de cada línea de la lista.

Regla Horizontal en una página

Para añadir una regla horizontal a la página, lleve a cabo una de estas operaciones:

Page 25: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

• Elija Menú Insertar HTML Regla Horizontal

• En la categoría HTML de la barra Insertar, seleccione Regla horizontal

Regla Horizontal en la Barra Insertar

Utilizando el Inspector de propiedades Para cambiar las propiedades de la regla horizontal, selecciónela y después cambie las opciones en el inspector de propiedades.

Propiedades de la Regla Horizontal

La siguiente tabla describe las opciones disponibles en las reglas horizontales.

Opciones Valor

Anchura (An)

La anchura de la regla expresada en píxeles o como porcentaje de la ventana del navegador.

Altura (Al) La altura (tamaño o grosor) de la regla en píxeles.

Alinear

La ubicación de la regla en la página. Las opciones de alineación son: Izquierda (la predeterminada), Centro o Derecha.

Clase Asignar un estilo de tipo clase CSS a la regla.

Sombreado Crea un aspecto tridimensional de la regla. Cuando se desactiva, la regla aparece sólida.

Una regla horizontal en HTML se crea mediante la etiqueta <hr>.

Espacio indivisible

Cuando los representa un navegador, múltiples espacios se condensan en un sólo espacio. Si desea introducir más de un espacio, debe utilizar un espacio indivisible.

Hay dos modos de insertar un espacio indivisible:

• Utilice el método abreviado de teclado: Control+Mayús+Espacio (Windows) u

Page 26: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Opción+Espacio (Macintosh).

• Elija Menú Insertar Caracteres especiales Espacio indivisible.

Opción de Multiples Espacios en Preferencias

Puede modificar sus preferencias para admitir múltiples espacios mientras escribe. Elija Menú Edición Preferencias o Dreamweaver Preferencias (Macintosh OS X) y, en la categoría General del cuadro de diálogo Preferencias, seleccione Permitir múltiples espacios consecutivos. Dreamweaver MX inserta un espacio indivisible cada vez que se presiona la barra espaciadora.

Opción de Múltiples espacios en Preferencias

Añadiendo Caracteres Especiales

Cuando se trabaja en Dreamweaver MX, por lo general usted escribe mediante el teclado. Sin embargo, a veces se necesitan caracteres a los que no se tiene un acceso directo desde el teclado o que no se pueden insertar en el documento como caracteres literales porque el navegador los trataría erróneamente como parte del código HTML. Estos caracteres se conocen como caracteres especiales.

Puede insertar caracteres especiales de tres modos:

• Elija Menú Insertar HTML Caracteres especiales y seleccione el carácter de la lista.

• Seleccione la categoría Texto de la barra Insertar y después seleccione el carácter del menú emergente de caracteres.

• Para otros caracteres especiales, seleccione Menú Insertar HTML Caracteres especiales Otros. En el cuadro de diálogo Insertar Otros Caracteres Especiales, haga clic en el carácter

Page 27: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

deseado y después en Aceptar.

Cuadro de diálogo Insertar otro carácter

Hay distintos códigos para cada carácter especial, pero todos ellos comienzan con un signo ("&") y terminan con un punto y coma (";"). Por ejemplo, el código para un espacio indivisible es &nbsp;

Usando el Editor Rápido de Etiquetas

El Editor Rápido de Etiquetas (Quick Tag Editor, en inglés) se encuentra en el Inspector de Propiedades. Utilizando este editor, puede insertar o editar etiquetas HTML en su página mientras se encuentra en la vista de diseño. Esta característica es muy útil cuando es un experto en código HTML, y es utilizado para realizar la inserción rápida de etiquetas en el código.

Si necesita rodear un texto con una etiqueta, primero seleccione el texto y después haga clic en el botón del Editor Rápido de Etiquetas que se encuentra en el Inspector de Propiedades.

Editor rápido de etiquetas

Escriba la etiqueta HTML que necesita insertar dentro de signos “menor que” y “mayor que” (< >) mostrados en el Editor Rápido.

Page 28: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Entrada en el editor rápido de etiquetas

Presione Intro o Return para colocar la etiqueta en la página. Si desea ver la etiqueta, tendrá que seleccionar la vista Dividir o Código.

Insertando la fecha y la hora Cuando se añade una fecha a una página, los lectores tienen la sensación de que la información a la que acceden es actual. Añadir una fecha, que se actualice cuando se guarde el archivo, es muy sencillo.

Haga clic en Fecha en la categoría Común de la barra Insertar, o elija Menú Insertar Fecha.

Fecha y hora en la barra Insertar

Elija el formato deseado para la fecha y active Actualizar automáticamente al guardar si desea que la fecha se actualice en la página cada vez que guarde el documento.

Cuadro de diálogo Insertar Fecha

Si selecciona Actualizar automáticamente al guardar, puede editar el formato de fecha después de insertarlo en el documento haciendo clic en el texto formateado y, a continuación, en Editar formato de fecha en el inspector de propiedades.

Nota: Cuando se selecciona Actualizar automáticamente al guardar se inserta un comentario en el código. Este comentario es una etiqueta interna que hace que Dreamweaver inserte una nueva fecha y hora al guardar el documento.

Page 29: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Aplicar Formato al Texto

Formateando Texto

Dreamweaver le permite fácilmente cambiar la fuente tipográfica, su tamaño, su color, y otros atributos del texto en sus páginas. Realizando estos cambios en el texto resalta contenido importante, permite a los usuarios revisar una página para encontrar la información que necesitan, y hace la página más atractiva.

Consideraciones Web

Considere lo siguiente:

• Los usuarios son libres de cambiar el tamaño de la ventana del navegador o cambiar el tamaño de la fuente y el color del texto.

• Existe una diferencia significativa entre los tamaños de fuente en Windows y Macintosh. Macintosh muestran el texto un 75 por ciento más pequeño que el mismo tamaño de texto para Windows.

El contenido publicado, ya sea impreso o sobre una página Web, mostrará un estilo consistente en cada página. El soporte de texto para la Web es muy primitivo en comparación a los documentos impresos. Sin embargo, puede obtener sustancialmente más control sobre el formato de sus páginas Web usando Hojas de Estilo en Cascada (CSS).

Formato de Bloques frente a Formato de Caracteres Puede aplicar cambios al aspecto predeterminado del texto en sus páginas– ya sea a bloques enteros de contenido o a caracteres individuales y palabras. Un bloque es un grupo de contenido como un párrafo o una lista.

Existen ciertas opciones de formato, como la alineación del texto, que deben trabajar en bloques enteros. .

Con el formato de caracteres puede aplicar un tratamiento distinto a la fuente a letras individuales o a palabras, como puede ser convertirlas en negritas o cambiar la fuente.

Cambiando el Tipo de Fuente Tipográfica La fuente predeterminada para texto en las páginas esta configurada en el navegador del usuario. Cambiar la fuente es aplicar formato de caracteres, que significa que puede cambiar la fuente para la página entera o para el texto seleccionado en la página. Sin embargo, la fuente que elija debe estar instalada en el sistema de los usuarios. No crea que todas las Fuentes están instaladas en otros sistemas.

Para cambiar la fuente del texto seleccionado, elija la fuente del menú emergente de Fuentes en el Inspector de Propiedades. El menú emergente contiene una lista de combinaciones de fuentes.

Page 30: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Menú emergente de Fuentes

Estas combinaciones de Fuentes, se usan del modo siguiente:

• Si la primera no esta disponible en el sistema del usuario, el navegador intenta usar la segunda, y si no la encuentra lo intentará con la tercera.

• Si ninguna de las fuentes están disponibles en el sistema del usuario, el texto se muestra en la fuente predeterminada del navegador.

Para eliminar un tipo de fuente del texto, seleccione el texto y después elija Fuente Predeterminada en el menú emergente de Fuente del Inspector de Propiedades.

Cambiar una fuente genera un estilo CSS. Verá estos estilos en la sección siguiente de esta unidad.

Crear su propio conjunto de fuentes Puede crear su propio conjunto de Fuentes eligiendo Editar Lista de Fuentes en el menú emergente de fuente del Inspector del Inspector de Propiedades. Generalmente, necesita elegir dos o tres fuentes para sus conjuntos de Fuentes.

Como ultima elección en su lista, elija un tipo de fuente genérica: cursive, fantasy, monospace, sans-serif, or serif, para el caso de que el usuario no tenga ninguna de las fuentes especificadas instaladas en su sistema..

Page 31: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Editar Lista de Fuentes

Cambiando el tamaño de la fuente El tamaño predeterminado para el texto esta determinado por el navegador. Puede cambiar el tamaño de la fuente del menú emergente de Tamaño en el Inspector de Propiedades.

Opciones de tamaño de fuente El tamaño predeterminado para el texto esta determinado por el navegador. Puede cambiar el tamaño de la fuente del menú emergente de Tamaño en el Inspector de Propiedades.

Opciones de tamaño de fuente

Cambiando el color de la fuente Puede cambiar fácilmente el color de la fuente para el texto. Seleccione el texto y entonces realice alguna de estas operaciones:

• Haga clic en la caja de color de texto en el Inspector de Propiedades. En la paleta emergente, utilice el puntero cuentagotas para seleccionar el color deseado.

• Mueva el mencionado puntero con cuentagotas sobre un gráfico o texto para capturar el color de ese elemento.

• Escriba el código de color (en hexadecimal) en el campo de texto destinado al color de texto.

Page 32: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Paleta emergente para el color de texto

Cambiando el estilo de texto

Puede aplicar negritas y cursivas en Dreamweaver para añadir énfasis o contraste al texto de su documento.

Para añadir negritas o cursiva, seleccione el texto, y haga clic en los botones con la letra B o I del Inspector de propiedades. Para eliminar ese estilo, haga clic en el botón de Nuevo.

Botones de negrita y cursiva

Cuando se aplican negritas, Dreamweaver rodea el texto con las etiquetas <strong></strong>,y en el caso de cursivas con <em> </em>. Puede seleccionar una opción en la categoría general de las Preferencias para usar en cambio <b></b> y <i></i> respectivamente..

Cambiando la Alineación del Texto

La alineación del texto en Dreamweaver funciona igual que en los procesadores de texto. Puede alinear un bloque de texto a la izquierda (predeterminado), centro, derecha, o justificar el texto. Para alinear el texto, haga clic en el Inspector de Propiedades.

Botones de alineación de texto

Cuando se aplica alineación al texto se asigna un atributo a las etiquetas de párrafo

Page 33: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

(<p></p>) o de encabezados (<hn></hn>). En caso contrario, Dreamweaver inserta una etiqueta <div align=xxx>.

Introducción a las Hojas de Estilo en Cascada

La especificación Hojas de Estilo en Cascada (siglas CSS en ingles de Cascading Style Sheets) para HTML, le permite definir el modo en el que será mostrado el contenido de su página. CSS ofrece más flexibilidad y control de la apariencia de la página que el HTML por sí solo.

Por defecto, Dreamweaver utiliza Hojas de Estilo en Cascada (CSS) para formatear texto. Cualquiera de los estilos que aplique utilizando el Inspector de Propiedades o los elementos de menú incrustan reglas de estilo CSS dentro de la etiqueta <head> de su documento.

Configuración CSS

Para activar la configuración CSS predeterminada, Elija Menú Edición Preferencias (Windows) o Dreamweaver Preferencias (Macintosh) y seleccione la categoría General, Verifique que la opción Utilizar CSS en lugar de etiquetas HTML esta activada.

Categoría General en el cuadro de diálogo de Preferencias

Términos CSS • Una regla de estilo, que es un grupo de propiedades de formato identificadas por un solo

Page 34: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

nombre, controla el formato de un bloque de texto. Incluye la fuente, el tamaño de texto, el color de texto, el interlineado, entre otras opciones.

• Una Hoja de Estilo es un grupo de estilos que definen el modo en el que se ven sus páginas Web.

La ventaja de usar hojas de estilo es que cambiando un atributo de ese estilo cambia el formato de inmediato a todo el texto controlado por ese estilo. Las Hojas de Estilo pueden ser también ser usadas para afectar la posición de la las imágenes y otros objetos HTML.

Localización de la definición de los estilos CSS

Hay tres modos en que puede definir los estilos:

• Utilizando una hoja de estilo aparte que esta vinculada– una hoja de estilos externa.

• Insertando directamente el estilo dentro de las páginas – una hoja de estilo interna.

• Aplicando un estilo directamente al fragmento de texto – estilo en línea.

Existen raras ocasiones en las que se usa estilos en línea, y no se recomienda su uso. Trataremos solo las hojas de estilos externas e internas.

Beneficios

Los beneficios del CSS incluyen:

• Mantiene un aspecto consistente en todas las páginas a lo largo del sitio o sección.

• Permite aplicar tipos de formatos a párrafos y texto que no se puede hacer usando HTML.

• Mantiene el diseño y la estructura de contenido separadas..Esto hace más fácil la actualización del sitio.

• Hace más fácil la reutilización del contenido en un contexto distinto, ofreciendo una hoja de estilo alternativa.

• Hace más fácil mantener el sitio conservando todas las especificaciones de formato en un archivo CSS.

• Cumple con el estándar XHTML

Limitaciones

Las hojas de estilo funcionan en navegadores posteriores a la versión 4.0. Microsoft Internet Explorer 3.0 reconoce algunos atributos de estilo. El soporte de las CSS varían entre los Navegadores. Las versiones antiguas ignoran las hojas de estilo.

Fuentes y Estilos de Clase

Cuando utiliza el Inspector de propiedades para cambiar su texto y la opción para uso de CSS esta seleccionada en las preferencias. Dreamweaver crea una regla de estilo CSS.

Por ejemplo, al usar el Inspector de Propiedades para cambiar la fuente y el color de texto

Page 35: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

genera un estilo que puede ver en el panel de estilos CSS.

Para acceder al panel de estilos CSS, elija Menú Ventana Estilos CSS.

Los cambios de Fuente crean reglas de Estilos CSS La regla de estilo resultante es un estilo de clase. Cuando esta regla sólo se encuentra dentro del documento, se llama estilo incrustado o interno.

En cualquier ocasión que aplique formato de fuente al texto, Dreamweaver crea una etiqueta <style> en la sección head del documento y aplica la regla de estilo al texto rodeando y usando las etiquetas <span></span> para formato de caracteres, o utiliza el atributo class de la etiqueta correspondiente al bloque, para formatear el bloque.

Nombrar Estilos de Clase

Cuando modifica texto usando el Inspector de Propiedades, Dreamweaver crea un estilo de clase y le asigna nombres estilo1, .estilo2, etc…. El nombre comienza por un punto que se identifica como estilo de clase.

Puede necesitar renombrar el estilo para que tenga un nombre más significativo. Por ejemplo, si utiliza el estilo para llamar la atención con el nombre de su empresa, puede darle el nombre de rótulo empresa para poder identificarlo y usarlo a lo largo de su página o páginas.

Page 36: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Como regla general, es mejor que asigne nombres a sus clases que sean acordes a su propósito mejor que a su apariencia. La apariencia puede cambiar en el tiempo, mientras que el propósito de la clase suele ser permanecer constante.

Para renombrar el estilo de clase:

Encuentre el estilo en el Panel de Estilos CSS

Haga clic con botón derecho (Windows) o Control-click (Macintosh)

Elija Cambiar el Nombre en el menú contextual.

Opción Cambiar nombre en Estilos CSS

Aplicando Estilos de Clase Para asegurarse que todo su texto esta igualmente formateado, puede aplicar estilos en el Inspector de Propiedades. Seleccione el texto, y entonces elija el estilo que necesite en el menú emergente Estilo. Si después decide cambiar la definición de ese estilo, ese formato será aplicado a todo texto que usa ese estilo.

Page 37: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Aplicar un estilo personalizado

Creando Estilos

Puede también crear sus propios estilos de clase usando el Panel de Estilos CSS. Haciendo esto podemos acceder a opciones que no están disponibles en el Inspector de Propiedades.

Puede crear un Nuevo estilo para el documento usando una de estas tres formas:

• Seleccione Texto Estilos CSS Nuevo

• Seleccione Menú Ventana Estilos CSS para abrir el panel de estilos CSS. Haga clic en el botón Nuevo Estilo CSS en el panel o elija Nuevo en el menú de Opciones del Panel.

Page 38: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Panel de Estilos CSS

• En el Inspector de Propiedades, elija Administrar Estilos del menú emergente de Estilo y después haga clic en Nuevo para crear un Estilo Nuevo.

Administrar Estilos en el Inspector de Propiedades

Nuevos Estilos CSS El cuadro de diálogo Nuevo Estilo CSS la permite crear tres tipos de Estilos:

• Clase, usado cuando se necesita definir un estilo y aplicarlo a cualquier bloque de texto.

• Etiqueta, usado cuando se necesita redefinir el modo en el que se muestra el texto que se encuentra en una etiqueta HTML concreta.

• Avanzada, usado cuando se necesita definir el formato de una combinación de etiquetas o para selectores contextuales.

Para crear un estilo de clase, asignar un nombre, seleccionar Clase como Tipo de Selector, y seleccionar Solo este Documento para indicar que es un documento incrustado.

Page 39: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Creando un Estilo de Clase

Nota: Los nombres de Clase deben empezar con un punto y pueden combinar cualquier combinación de letras y números. Si no comienza su estilo de clase con un periodo, Dreamweaver lo añadirá por usted.

Definir un nuevo estilo CSS En el cuadro de diálogo Definición del Estilo CSS, puede configurar varias opciones de formato. En este ejemplo, el color de fondo para el texto se establece como amarillo (#FFFF33).

Definición de Estilo de Clase

El cuadro de diálogo Definición de Estilo CSS muestra una variedad de opciones que varían dependiendo de la Categoría seleccionada. Se muestra a continuación una breve descripción de las opciones en cada categoría.

Page 40: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Categoría Descripción

Tipo Atributos de tipo de letra tales como la fuente, el tamaño y el color.

Fondo Color o imagen de fondo de la etiqueta, además de otras propiedades para el fondo.

Bloque Alineamiento y sangría del texto, además de otras propiedades para bloques de texto.

Cuadro Márgenes y relleno alrededor del texto.

Borde Permite establecer un borde alrededor de las etiquetas. Tenga en cuenta lo siguiente:

• Para que aparezcan los bordes, deberá establecer el tamaño, el color, el ancho y el estilo de cada lado del borde que debe mostrarse.

• Si desea que los bordes sólo aparezcan en algunos lados, deberá establecer explícitamente el ancho con el valor cero para los lados que no deben tener borde.

Lista Permite cambiar la viñeta y su posición. Las propiedades de lista se aplican normalmente sólo a listas y elementos de listas.

Posición Permite establecer el lugar exacto de la página en el que debe aparecer el texto. Las propiedades de colocación son especialmente compatibles con las capas y se utilizan normalmente con éstas.

Extensiones

• Salto de página fuerza un salto de página al imprimir, delante o detrás del objeto controlado por el estilo. Esta opción no es compatible con la versión 4.0 de ningún navegador. .

• Cursor cambia la imagen del puntero cuando éste se encuentra sobre el objeto controlado por el estilo. Sólo Internet Explorer reconoce este atributo.

• Filtro aplica efectos especiales al objeto controlado por el estilo, incluidas las opciones Blur (borroso) e Invertir. Elija un efecto en el menú emergente. Sólo Internet Explorer reconoce este atributo.

Una vez que ha definido el estilo de clase, puede aplicarlo a cualquier selección de texto en su documento.

Creando Selectores de Etiqueta Los selectores de Etiqueta le permiten aplicar formato a cualquier etiqueta HTML de un

Page 41: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

modo consistente. Por ejemplo, puede crear una regla para todos los encabezados 3 (H3) y ese formato es automáticamente aplicado a todos Encabezado 3 que exista en su documento.

Se comienza abriendo el cuadro de diálogo Nuevo Estilo CSS como aprendió en la sección anterior, usando tanto el Inspector de Propiedades como el panel de Estilos CSS.

Nuevo Estilo CSS para H3

Elegir Etiqueta como Tipo de Selector. Después elija una Etiqueta del menú emergente de Etiqueta o escriba el nombre de la etiqueta en el campo de texto. Seleccione Solo este Documento para crear un estilo interno o incrustado.

Una vez que haga clic en Aceptar, el cuadro de diálogo Definición de Estilo CSS se abre. Puede establecer el formato para esta regla de estilo.

Aplicar el estilo La diferencia entre un estilo de clase y un estilo de etiqueta es que no es necesario que lo aplique manualmente al texto. Una vez que ha creado la regla de estilo, todo texto que se encuentra dentro de esa etiqueta le será aplicado el mismo formato.

Eliminar estilos de clases CSS Si comenzó el desarrollo de su página utilizando el Inspector de Propiedades, ha aplicado por tanto estilos de clase. Si más tarde decide utilizar hacerlo a nivel de etiquetas, puede duplicar el estilo de clase como regla de etiqueta, y después eliminar el estilo de clase que incrustó en su página Dreamweaver. Podrá buscar para el atributo de clase de la etiqueta deseada y eliminarlo de la etiqueta.

Utilizando Buscar y Reemplazar, esta operación se simplifica.

Buscando en su documento

Para buscar texto en los documentos, en la vista de diseño elija Menú Edición Buscar y reemplazar. Si se encuentra en la vista de código, haga clic con el botón derecho (Windows) o mientras presiona Control (Macintosh) y elija Buscar y reemplazar en el menú contextual.

Page 42: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de Diálogo Buscar y Reemplazar

a. Opciones de búsqueda

En el cuadro de diálogo Buscar y reemplazar, elija una opción del menú emergente Buscar en. Las opciones de que dispone son:

• Texto Seleccionado

• Documento actual

• Documentos Abiertos

• Carpeta

• Archivos Seleccionados en el Sitio

• Sitio local actual completo

En el menú emergente Buscar, elija el tipo de búsqueda que necesite realizar:

• Código fuente (para cadenas de texto concretas contenidas en el código)

• Texto (para cadenas de texto contenidas en la ventana de documento)

• Texto (avanzado) (para texto con o sin etiqueta HTML)

• Etiqueta específica (para etiquetas HTML con determinados atributos)

Además, existen opciones de búsqueda avanzadas para ayudarle a realizar búsquedas complejas:

• Coincidir mayúsculas y minúsculas: limita la búsqueda a aquellas palabras en que coincida también en mayúsculas/minúsculas.

• Palabra completa: Limita la búsqueda de texto para que coincida con una o más palabras.

• Ignorar espacios en blanco: Trata todos los espacios en blanco como un solo espacio

Page 43: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

(predeterminado).

• Usar expresiones regulares: proporciona modelos para describir, combinaciones de caracteres en el texto. Deberá utilizar esta opción, por ejemplo, para seleccionar frases que comiencen por “El” o valores de atributos que contengan un número.

Opciones de Reemplazo

También posee opciones para reemplazar el elemento que esta buscando:

• Añadir o cambiar texto

• Añadir o cambiar un valor de un atributo

• Cambiar una etiqueta por otra

• Quitar una etiqueta

• Eliminar una etiqueta y su contenido

Guardando sus criterios de búsqueda

Cuando establece unos complejos criterios de búsqueda y reemplazo, puede necesitar reutilizarlos. Puede guardar estos criterios haciendo clic en el icono del disquete en el cuadro de diálogo Buscar y Reemplazar, y después puede recuperarlos utilizando el icono de carpeta.

Guardar Criterios de Búsqueda

Creando Estilos Avanzados Los Estilos Avanzados son usados para controlar las etiquetas de los siguientes modos:

• Especificar el estilo para parte de un bloque texto, como puede ser la primera letra de un

Page 44: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

párrafo.

• Especificar el estilo para el texto de un cierto estado, como puede ser el hipervínculo que ya ha sido visitado.

• Cambiar el aspecto del texto controlado por una combinación de etiquetas.

Selectores

Cuando crea un Nuevo estilo y selecciona Avanzado como Tipo de Selector, tendrá que insertar un selector. Este selector puede ser alguno de los siguientes:

• Selectores de Pseudo-elementos, para redefinir la primera letra o la primera línea de un bloque de texto.

• Selectores de Combinación:

• Selectores Contextuales, usado para que se aplique a una etiqueta que esta anidada dentro de otra etiqueta especifica.

• Selectores de Grupo, para que un grupo de etiquetas tengan el mismo estilo.

• Selectores de Pseudo-clases, para redefinir el modo en que se muestran los vínculos cuando un usuario interactúa con estos.

• Selectores de ID, usado para que coincida la ID con el valor de id de un elemento (#title), que puede ser aplicado a solo uno de los elementos de una página (el atributo id de las etiquetas, generalmente se usa también para identificar un elemento en particular y hacer referencia a este en el lenguaje de script).

Las Pseudo-clases se tratarán en la Unidad 6: Navegando por su Sitio. Los selectores de ID están fuera del ámbito de este curso.

Usando Selectores de Pseudo-Elementos

Puede crear los elementos first-line y first-letter escribiendo información apropiada en la campo de texto del Selector CSS:

Selector Descripción Ejemplo

{etiqueta}:first-line

Controla el formato de la primera línea de texto para la etiqueta específica.

p:first-line

{etiqueta}:first-letter

Controla el formato de la primera letra de texto para la etiqueta específica.

p:first-letter

Nota: Los pseudo-elementos first-line y first-letter no son ampliamente soportado como las

Page 45: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

pseudo-clases de vínculos y deben ser usadas con precaución. Microsoft Internet Explorer 5.5+, Netscape 6+, y Opera 6+ soportan todos estos tipos de selectores, pero con algunas variaciones en el su proceso para visualizado final.

Selectores de combinación Hay dos tipos de selectores de combinación que puede crear escribiendo el nombre del selector dentro del campo de texto Selector CSS:

Tipo de Selector

Descripción Ejemplo

Contextual Especifica una regla de estilo que se aplica a una etiqueta solo cuando aparece en el contexto de (anidada dentro) de otra etiqueta específica. Son separadas las etiquetas por espacios entre ellas.

En el ejemplo, la regla de estilo se aplica solo a texto dentro de la etiqueta <strong> que esté dentro de <p> y que a su vez este dentro de la etiqueta <td>:

td p strong

Grupo Especifica una regla para que se aplique a un grupo de etiquetas. Son separadas las etiquetas por coma (,) entre ellas.

En este ejemplo, se aplica esta regla a la etiqueta de párrafo, a las de celda(<td>) y a los ítem de lista:

p,td,li

Nota: Usted tendrá que usar selectores de grupo solo cuando se requiera que varias etiquetas tengan exactamente el mismo estilo. CSS no permite múltiples reglas de Estilo para una sola etiqueta HTML en unas hojas de estilo. Esta restricción no se aplica a selectores contextuales.

Exportar Definiciones de Estilos CSS Más aún, todas las reglas de estilo que usted ha creado han sido incluidas en las páginas de HTML. Los beneficios de usar CSS son aún mayores cuando usted guarda que todas sus reglas de estilo en un archivo de hojas de Estilo externo (un archivo con una extensión .css). Usted puede vincular este archivo entonces a algunas o a todas las páginas en su sitio.

Si ya tiene estilos definidos dentro de su página, Dreamweaver le permite exportar a un archivo de Hoja de Estilos externo.

Puede exportar definiciones de estilo desde una página abierta usando uno de estos métodos:

• Texto Estilos CSS Exportar

• Haga clic con el botón derecho (Windows) o Control-click (Macintosh) en <estilo>del

Page 46: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

panel Estilos CSS y elija Exportar.

• Elija Exportar en el Menú de Opciones del panel de Estilos CSS

Exportar en el Menú de Opciones

Será preguntado por la localización y el nombre del archivo .css que va a crear usted.

Adjuntando Hojas de Estilo Externas

Las Hojas de Estilo externas son archivos con la extensión .css que contienen solo reglas de estilo. Estos archivos pueden ser creados con Dreamweaver, o puede escribir la regla de estilo en un editor de texto. Puede adjuntar una o varias hojas de estilo a la página. Las definiciones de estilo, excepto las clases, son aplicadas automáticamente al documento. Necesitará por tanto aplicar las estilos de clase o personalizados a párrafos o el texto seleccionado.

La ventaja de utilizar hojas de estilos externas es que, si cambia una definición de estilo en la hoja de estilos externa, todas las páginas vinculadas a dicho archivo se actualizan para reflejar los cambios.

Para adjuntar una hoja de estilos existente, abra la página a la que desea añadir la hoja de estilos y haga clic en Adjuntar hoja de estilos, situada en la parte inferior del panel Estilos CSS. .

Page 47: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Icono Adjuntar Hoja de Estilos

También puede elegir Administrar hoja de estilos en el menú emergente Estilos en el Inspector de Propiedades y después hacer clic en Adjuntar. .

Administrar Estilos en el Inspector de Propiedades

En el cuadro de diálogo Vincular hoja de estilos externa, haga clic en el botón Examinar, localice el archivo de estilos externo y haga clic en Aceptar.

Page 48: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Vincular hoja de estilos externa

Una vez adjuntada la Hoja de estilo, verá el archivo enlistado en el panel de Estilos CSS.

Hoja de Estilos Vinculada

Vinculación frente a Importación En el cuadro de diálogo Vincular hoja de estilos externa, para crear un vínculo entre el documento y la hoja de estilo externa seleccione Vincular. Esto crea una etiqueta LINK href en la zona head del código HTML, y hace referencias a la URL donde la Hoja de Estilos publicada esta localizada. Este método es soportado por Microsoft Internet Explorer y Netscape Navigator.

No puede usar una etiqueta LINK para añadir una referencia de una hoja de estilos a otra.

Page 49: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Si necesita anidar hojas de estilos, debe usar la importación. Algunos (que no todos) los navegadores reconocen la directiva @import dentro de las páginas (mejor que dentro de hojas de estilos). Hay diferencias sutiles en cómo las propiedades en conflicto son resueltas cuando se solapan las reglas que existen dentro de hojas de estilo externas con las que son importadas a una página. Si lo que necesita es importar, en vez de Vincular, seleccione esta opción cuando Adjunte un Hoja de Estilos Externa.

Creando una nueva Hoja de Estilos Puede crear una hoja de estilos externa desde el comienzo usando Dreamweaver, en vez de exportar los archivos internos.

Creando una Hoja de Estilos Externa Para crear una Hoja de Estilos externa:

1. En el cuadro de diálogo Nuevo estilo CSS, seleccione el botón de opción Nuevo archivo de hoja de estilos para crear una hoja de estilos externa

2. En el cuadro de diálogo Guardar archivo de hoja de estilos como, localice la carpeta en la que desea guardar el archivo y luego escriba el nombre para el archivo de hoja de estilos externa.

3. Haga clic en Guardar.

Nota: Dreamweaver MX añade automáticamente al nombre del archivo la extensión .css, extensión que resulta imprescindible para que la hoja de estilos funcione correctamente.

Ahora esta preparado para añadir reglas de estilos en el cuadro de diálogo Definición de Estilos CSS.

Page 50: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Definición de estilos CSS

Editando Hojas de Estilos

Una vez que cree una hoja de estilos, podrá añadir o cambiar estilos fácilmente. Al editar una hoja de estilos que controla el texto de un documento o del sitio, cambia inmediatamente el formato de todo el texto.

El panel Estilos CSS muestra los estilos actuales incrustados o vinculados al documento actual. Puede utilizar el panel Estilos CSS para ver sus estilos y editarlos realizando una de estas operaciones:

• Haga clic con el botón derecho del ratón (Windows) o presione Control y haga clic (Macintosh) en el estilo y elija Editar.

• Seleccione el estilo y luego haga clic en el botón Editar hoja de estilos (representado por un lápiz) situado en la parte inferior del panel Estilos CSS.

Cambie el estilo de la forma deseada en el cuadro de diálogo Definición de estilos CSS y haga clic en Aceptar.

Utilizando el Inspector de Etiquetas

Puede también utilizar el Inspector de Etiquetas para editar un estilo. Si usted hace doble clic en un estilo del panel Estilos CSS, esa regla de estilo se muestra en el Inspector de Etiquetas. El titulo del inspector de etiquetas se cambia a Regla “etiqueta” donde “etiqueta” muestra el nombre de la etiqueta o clase que esta editando.

Page 51: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Por ejemplo, si realiza doble clic en la definición de una etiqueta <h3> en el panel Estilos CSS, el inspector de etiquetas puede mostrar lo siguiente:

Inspector de Etiqueta: Regla “h3”

Utilizando el Inspector de Etiquetas, se tiene completo control sobre cada opción que puede establecer para el estilo. Haga clic en la columna de la derecha para seleccionar valores válidos o para insertarlo manualmente.

Editando la Hoja de Estilos CSS

En lugar de editar cada estilo individualmente, puede editar la hoja de estilos. Seleccione el nombre de la hoja de estilos (archivo .css) y luego realice una de las siguientes operaciones:

• Haga clic con el botón derecho del ratón (Windows) o presione Control y haga clic (Macintosh) en el estilo y elija Editar.

• Seleccione el estilo y luego haga clic en el botón Editar hoja de estilos (representado por un lápiz) situado en la parte inferior del panel Estilos CSS. .

Page 52: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

El cuadro de diálogo Hoja de Estilos se abre con una lista de todas las reglas de estilo que están en la hoja de estilos Desde este cuadro de diálogo, usted podrá:

• Adjuntar una hoja de estilos

• Crear un Nuevo estilo

• Editar un estilo

• Cambiar el nombre a un estilo

• Duplicar un estilo

• Eliminar un estilo

Edit Style Sheet

Una vez que finalice, sus cambios son guardados en un archivo de estilos externo. Cualquier página que esté vinculada con esta hoja de estilos se actualiza con estos cambios.

Editando Archivos CSS manualmente Si está familiarizado con el formato CSS, puede abrir el archivo CSS desde el panel Sitio para editarlo. El archivo se abre en la vista de código, en la que podrá realizar los cambios que desee:

Page 53: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Vista de Código mostrando una Hoja de Estilos externa

Orden de Cascada y Herencia de Estilos Las reglas de estilos CSS pueden aplicarse al contenido de una página de tres formas:

• Vinculando un archivo .css independiente a la página — un estilo externo

• Incrustando una hoja de estilos en la página — una hoja de estilos interna

• Applying an inline style (class) to text on the page

El orden de los estilos en cascada determina el estilo que aparece en la página cuando se aplican varias reglas de estilo.

Si tiene una hoja de estilos externa vinculada al documento, sus estilos se aplican a todo el documento. Si hay más de un estilo aplicado a la misma etiqueta, existe un orden para su aplicación.

El orden de prioridad es el siguiente:

• Estilos en línea

• Estilo Interno

• Estilos externos

Nota: Como ya hemos mencionado anteriormente, los estilos en línea sólo son necesarios en raras ocasiones y no se abordan en este curso.

Page 54: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Ejemplo

Supongamos que, en una hoja de estilos externa vinculada a una página, existe la siguiente regla para los párrafos:

p {font-family: sans-serif;

color: blue}

En la misma página, hay una hoja de estilos incrustada con su propia regla para los párrafos:

p {font-size: 14pt;

color: green}

Un párrafo de la página tendrá el siguiente estilo:

• Fuente sans-serif (especificada en la hoja de estilos externa)

• Tamaño de fuente de 14 puntos (especificado en la hoja de estilos incrustada)

• Color verde (el valor especificado en la hoja de estilos incrustada tiene prioridad sobre el valor de la hoja de estilos externa).

Ejemplo de herencia

Supongamos que ha definido los siguientes estilos:

p {color: green;

font-weight: normal;

font-family: Arial}

em {font-weight: bold;

color: blue}

.codeRed {color: red;

font-style: italic}

Supongamos que la página contiene el siguiente texto y código HTML :

<p>In case of emergency, <em class=”codeRed”>walk</em> to the nearest exit.</p>

La palabra “walk” se mostrará con la fuente Arial (suponiendo que el equipo cliente disponga de dicha fuente) en negrita y cursiva, y tendrá color rojo.

El motivo de que se obtenga este resultado es la herencia. La etiqueta <em> está anidada en una etiqueta <p>, por lo que hereda las propiedades de estilo de <p>, aunque su propio

Page 55: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

estilo puede añadirse o sustituir a los de la etiqueta <p>. (En este caso, el estilo <em> sustituye a las propiedades de color y grosor de fuente, por lo que sólo hereda la familia de fuentes Arial).

Las clases personalizadas heredan el estilo de la etiqueta de la misma forma. En este caso, codeRed walk hereda la propiedad de familia de fuentes de la etiqueta <p> y la propiedad de grosor de fuente de la etiqueta <em>, pero sustituye la propiedad de color con su propio valor y también añade una propiedad de estilo de fuente.

El orden de prioridad en lo que a herencia se refiere es el siguiente:

• Las propiedades de clase personalizada tienen prioridad sobre las propiedades de estilo para la etiqueta

• Las propiedades de etiqueta anidada tienen prioridad sobre aquéllas de la etiqueta padre

Algunas propiedades nunca se heredan. Puede consultar la Referencia CSS, incluida con Dreamweaver, para averiguar si se hereda o no una propiedad concreta.

Nota: En la mayoría de los casos, no tendrá que preocuparse por la herencia o la ausencia de ésta, ya que las especificaciones CSS están especialmente bien diseñadas en este sentido: normalmente ocurre exactamente lo que se desea que ocurra.

Gráficos en Páginas Web

Los gráficos le dan vida, interés y funcionalidad a las páginas Web. Existen muchos tipos, pero hay tres tipos principales que son compatibles en la Web:

• GIF

• JPEG

• PNG

Conseguir el tipo de gráfico correcto con el tamaño y resolución apropiados es todo un arte. Utilice gráficos con cierto criterio y, cuando sea posible, elija gráficos pequeños con un número mínimo de colores. Los archivos de pequeño tamaño mantienen el tiempo de carga en unos valores mínimos y consiguen mantener felices a los usuarios.

GIF El formato GIF:

• Es el más común en la Web.

• Se utilizan en imágenes de líneas y en imágenes con colores sólidos.

• Pueden contener zonas transparentes y se pueden utilizar para archivos de animación.

• Se guardan en modo de color de 8 bits, lo que significa que sólo se pueden representar 256 colores.

Page 56: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

JPEG El formato JPEG:

• Puede tener un número ilimitado de colores y está indicado para fotografías o imágenes que utilicen gradientes de color.

• Utilizan algoritmos de compresión que reducen el tamaño del archivo. La calidad de las imágenes se reduce a medida que se comprimen, y aparecen distorsionadas y emborronadas si se comprimen demasiado. El índice de compresión óptima para un tamaño de archivo mínimo con una aceptable degradación de la calidad de la imagen variará de una imagen a otra.

Por ejemplo, una foto de un cielo azul con nubes aparece “posterizada” cuando se guarda como GIF. Toda la gama de colores azules serán mapeadas con muy pocos colores. El JPEG, en cambio, guarda la imagen en un modo de 24-bits, manteniendo todos los colores.

PNG El formato Portable Network Graphic (PNG) El formato PNG admite un número ilimitado de colores. Mediante la reducción de la profundidad del color se puede optimizar el tamaño del archivo sin degradar la calidad de la imagen. :

• Se creó con fin de superar algunas de las deficiencias de los formatos GIF y JPEG.

• Admite un número ilimitado de colores.

• Se puede optimizar el tamaño del archivo mediante la reducción de la profundidad del color sin degradar la calidad de la imagen.

• Es admitido solo por los más recientes navegadores: Internet Explorer 4 y superior, y Netscape 6 y superior.

Macromedia Fireworks utiliza el formato PNG como formato nativo de archivo para los gráficos. Cuando se crean gráficos con Fireworks, normalmente las imágenes se exportan como JPEG o como GIF cuando se desean colocar en una página Web.

Colocar gráficos en la página Hay cuatro modos distintos de insertar imágenes en la página Web:

• Utilizando la categoría Común en la barra Insertar.

• Eligiendo Menú Insertar Imagen

• Arrastrar o insertar desde el panel Activos del sitio

• Arrastrar imágenes desde el panel Sitio

Page 57: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Ubicación de imágenes Cuando se inserta una imagen en una página Web, Dreamweaver determina dónde encontrar esa imagen cuando se solicita la página por medio de un servidor Web. Para especificar su ubicación puede usar tanto:

• Ruta relativa al documento

• Ruta Relativa a la raíz del sitio.

Con las referencias relativas al documento, Dreamweaver construye la ruta a la imagen basada en la ubicación relativa del documento HTML respecto al archivo de imagen.

Con las referencias relativas a la raíz del sitio, la ruta se construye hacia la imagen en función de la ubicación relativa del documento HTML con respecto a la raíz del sitio.

En este curso sólo se van a utilizar rutas relativas al documento para las imágenes. Guarde su página Web antes de importar imágenes para que se pueda calcular una ruta relativa al documento. Si no ha guardado la página, Dreamweaver MX le avisa cuando vaya a importar una imagen y corrige el nombre de la ruta cuando guarda el archivo.

Ajustes de accesibilidad Cuando creamos páginas con accesibilidad, necesita asociar información, como pueden ser etiquetas o descripciones, con los objetos de su página Web para que sean accesibles por todos los usuarios.

Puede activar un cuadro de diálogo para las imágenes en la Categoría Accesibilidad de las Preferencias.

Page 58: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Preferencias de Accesibilidad

Activando el casillero Imágenes, Dreamweaver le preguntará por la información que se requiere por los estándares de accesibilidad para las imágenes.

Utilizando la barra Insertar

Para insertar una imagen por medio de la barra Insertar, haga clic en el lugar de la página donde desea insertar la imagen. A continuación, en la categoría Común de la barra Insertar, haga clic en Imagen.

Insertar imagen

Tanto si utiliza la barra Insertar como si selecciona Menú Insertar Imagen, se abre el cuadro de diálogo Seleccionar origen de imagen donde puede acceder a la imagen que desea utilizar en la página. Deje el valor Relativa a: en Documento (valor predeterminado) para utilizar en la imagen una ruta relativa al documento.

Page 59: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Seleccionar origen de imagen

En este ejemplo el sistema de archivos locales contiene el archivo de imagen.

Si tiene activada la configuración de accesibilidad, se abrirá otro cuadro de diálogo para que introduzca el Texto Alternativo y la Descripción Larga..

Atributos de accesibilidad de la etiqueta imagen

Utilizando Activos El panel Activos muestra distintos tipos de medios y elementos del sitio, como se muestra en la siguiente imagen. Puede ver todos los activos del sitio desde un único lugar y después añadir fácilmente el contenido a la página directamente desde el panel. Si no ve este panel, elija Menú Ventana Activos o presione F11.

Page 60: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Panel de activos mostrando las categorías

Insertando una imagen del panel de Activos Todas las imágenes del sitio actual se muestran en la categoría Imágenes de la lista Sitio del panel Activos. Cuando selecciona una imagen en el panel, aparece una vista previa de la misma en la parte superior del panel.

Para añadir una imagen a la página

1. Seleccione la vista previa de la imagen o el nombre del archivo.

2. Arrastre la imagen a la página o haga clic en Insertar.

Si agrega una imagen al sitio, haga clic en Actualizar lista del sitio para actualizar la imagen en el panel Activos.

Añadiendo a imágenes favoritas

El desplazamiento por la lista de imágenes del panel Activos puede llegar a ser tedioso si su sitio tiene muchas imágenes. Si tiene imágenes que se utilizan en todo el sitio, puede añadirlas a la lista Favoritos para poder acceder a ellas fácilmente.

Para añadir a favoritas:

• Haga clic en el panel de Archivos con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Añadir a imágenes favoritas en el menú contextual.

• Desde la lista Sitio del panel Activos, seleccione la imagen y haga clic en Añadir a

Page 61: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

favoritos en la parte inferior derecha del panel, o bien elija Añadir a favoritos desde el menú Opciones situado en la parte superior derecha del panel Activos.

Añadir a imágenes favoritas

Utilización de carpetas de Favoritas Puede organizar sus activos favoritos en carpetas para facilitar la localización de archivos. Para crear una nueva carpeta Favoritos, haga clic en Favoritos en el panel Activos y después lleve a cabo una de estas operaciones:

• En el menú Opciones del panel Activos, elija Nueva carpeta de favoritos.

• En la mitad inferior de la vista Favoritos, haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Nueva carpeta de favoritos en el menú contextual.

Para mover activos a una carpeta, añada primero la imagen a Favoritos y después arrástrela desde ahí hasta una carpeta. Haga clic en el signo más (Windows) o en el triángulo (Macintosh) para ver el contenido de la carpeta.

Page 62: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Carpetas en imágenes favoritas

Añadir imágenes desde el Panel Archivos También puede arrastrar imágenes a la página desde el panel Sitio. Asegúrese de guardar su página para que se pueda calcular una ruta relativa al documento. Cuando se utiliza el panel Sitio no aparece la vista previa de la imagen como lo hace en el panel Activos, pero puede ver la estructura de carpetas de su sitio.

Modificando Propiedades de la Imagen Puede modificar propiedades de una imagen para llevar a cabo lo siguiente:

• Cambiar el tamaño de una imagen

• Ajustar texto alrededor de la imagen

• Modificar el espacio y el borde de una imagen

• Alinear las imágenes con el texto

• Establecer texto alternativo

Cambiando el tamaño de una imagen Puede utilizar el Inspector de Propiedades para cambiar el tamaño de la imagen. Cambie la anchura (An) o altura (Al) de las imágenes utilizando la caja de texto correspondiente.

Una vez que cambie cualquiera de los valores, ya sea ancho o alto, verá una flecha circular

Page 63: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

entre los valores An y Al en el Inspector de Propiedades. Si hace clic a este icono, Dreamweaver restablece estos valores a los de su tamaño original.

Nota: No se recomienda que cambia el tamaño de las imágenes en Dreamweaver ya que podría distorsionarlas. Si necesita cambiar el tamaño, entonces utilice mejor Fireworks.

Propiedades ancho y alto de la imagen

Alineando imágenes en la página Las imágenes de la página se pueden alinear a la izquierda (valor predeterminado), al centro o a la derecha del mismo modo que se alinea el texto. Seleccione la imagen y haga clic en uno de los botones de alineamiento del inspector de propiedades.

Botones de alineación para imágenes

Nota: El texto se ajusta alrededor de las imágenes alineadas a la izquierda o a la derecha según se describe en la siguiente sección, pero no alrededor de las imágenes alineadas al centro.

Ajuste del texto alrededor de las imágenes Para ajustar el texto alrededor de una imagen fácilmente, cambie el alineamiento de la imagen. Las opciones para ajustar varias líneas de texto son:

• Izquierda

• Derecha

Menú emergente alinear respecto a imagen

Page 64: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuando selecciona Derecha en el menú emergente Alinear, se coloca un punto de fijación de imagen en el lugar donde se ha insertado la imagen. Este símbolo indica la etiqueta HTML de la imagen.

Puede mover el punto de fijación hasta un nuevo emplazamiento en el texto, pero el punto debe estar situado al comienzo del párrafo para que el ajuste del texto funcione correctamente. El texto se ajusta con la parte inferior de la imagen y después vuelve al margen izquierdo de la página.

Nota: Si no aparece el punto de fijación, elija Ver Ayudas visuales Elementos invisibles.

Cambiando espacio y borde Cuando se utiliza el menú emergente Alinear para ajustar texto alrededor de los gráficos, tiene la opción de ajustar también el espacio alrededor de la imagen. Mediante el inspector de propiedades se pueden cambiar los siguientes atributos sobre el espaciado y el borde.

Opción Descripción

Espacio V

Este parámetro indica al navegador cuántos píxeles debe dejar en el eje vertical (superior e inferior) de la imagen.

Espacio H

Este parámetro indica al navegador cuántos píxeles debe dejar en los lados horizontales (izquierdo y derecho) de la imagen.

Borde El ancho en píxeles del borde que se va incluir alrededor de la imagen. El color del borde se determina mediante el color predeterminado del texto que se define en Propiedades de la página.

Otras opciones de alineación Cuando sólo tiene una única línea de texto junto a una imagen, tiene varias opciones para alinear el texto con la imagen:

• Línea de base: alinea la parte inferior de la imagen con la línea de base de la línea de texto.

• Superior: alinea la imagen con la parte superior del elemento más alto de la línea.

• Medio: alinea la línea de base de la línea de texto con el centro de la imagen.

• Inferior: idéntico a Línea de base.

• Texto superior: alinea la imagen con la parte superior del texto más alto de la línea (normalmente es igual a Superior, pero no siempre.

• Medio absoluta: alinea el centro de la línea texto con el centro de la imagen.

• Inferior absoluta: alinea la parte inferior de la imagen con la parte inferior de la línea de texto.

Page 65: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

El siguiente diagrama muestra imágenes alineadas de diversos modos.

Comparación entre opciones de alineación de imagen

Estableciendo el texto alternativo El texto alternativo especifica el que aparecerá en lugar de la imagen en los navegadores que sólo admiten texto o en aquellos configurados para no descargar las imágenes. En algunos navegadores, este texto también aparece al situar el puntero sobre la imagen.

Seleccione la imagen y después escriba el texto en el cuadro de texto Alt del inspector de propiedades.

Page 66: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Accesibilidad Las directrices sobre accesibilidad exigen establecer el texto Alt. para todas las imágenes y eso es una práctica aconsejada para asegurarse de que aquellos usuarios que no puedan ver sus imágenes por la razón que sea, tengan al menos una descripción de esta.

Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que sólo admiten texto, el texto se reproduce en voz alta

Editando Imágenes Dreamweaver le permite realizar operaciones básicas de edición de imagen directamente dentro de su interfaz. Dreamweaver incluye la capacidad de autoría de imagen de Macromedia Fireworks MX 2004. Con Fireworks puede crear, editar, y animar gráficos Web usando un conjunto completo de herramientas de mapa de bits y de vectores.

Edición de imágenes en Dreamweaver

Dreamweaver le permite realizar las siguientes operaciones de edición básica de imágenes en imágenes GIF y JPEG dentro de la misma aplicación:

• Recorte permite reducir el área de la imagen.

• Nuevo muestreo de imagen añade o quita píxeles en archivos de imagen JPEG y GIF cuyo tamaño se ha cambiado a fin de que se parezcan lo máximo posible a la imagen original. Al muestrear de nuevo una imagen, se reduce el tamaño del archivo de imagen, lo cual mejora el rendimiento de la descarga.

• Brillo/Contraste modifica el contraste o el brillo de los píxeles de la imagen. Esto afecta a los resaltados, sombras y medios tonos de la imagen. Normalmente, la función Brillo/Contraste se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras.

• Perfilar ajusta el enfoque de una imagen mediante el aumento del contraste de los bordes de dentro de la imagen. Cuando se explora una imagen o se realiza una foto digital, la acción predeterminada de la mayoría del software de captura de imágenes consiste en suavizar los bordes de los objetos que aparecen en la imagen. Esto evita que se pierdan detalles minúsculos en los píxeles de los que se componen las imágenes digitales. Sin embargo, para mostrar estos detalles en los archivos de imagen digital, a menudo es necesario perfilar la imagen, con lo que aumenta el contraste de los bordes y la imagen aparece más definida.

Todas estas opciones están disponibles en el Inspector de Propiedades.

Page 67: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Opciones de edición de imágenes en Dreamweaver

Después de realizar cualquier cambio a la imagen, Dreamweaver le advertirá en un mensaje que se cambiará el archivo en el disco. Puede suprimir este mensaje activando la opción “No mostrar de nuevo este mensaje”.

Advertencia sobre cambios en la imagen

Edición de Imágenes Roundtrip con Fireworks Puede ejecutar Macromedia Fireworks MX directamente desde el inspector de propiedades para modificar y optimizar una imagen. Esto permite utilizar controles de exportación para optimizar las imágenes, proporcionándoles una interactividad avanzada, y exportarlas a Dreamweaver de nuevo. Esta función se conoce como edición Roundtrip (de ida y vuelta).

Configurando preferencias de edición

Para utilizar las funciones de edición Roundtrip entre Fireworks y Dreamweaver, debe tener ambas aplicaciones instaladas en su equipo, y Fireworks debe estar configurado como su editor de imágenes predeterminado para los archivos PNG. Para comprobar si Fireworks está configurado como el editor de imágenes de los archivos PNG, seleccione Menú Edición Preferencias (Windows) o Dreamweaver Preferencias (Macintosh). En la lista Categoría, seleccione Tipos de archivo/editores, seleccione la extensión .png. Si no esta establecido que su editor primario es Fireworks, modifíquelo para que sea el Editor Primario de archivos .png.

Page 68: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Estableciendo el editor de archivos PNG

Optimizar una imagen Mientras trabaja con Dreamweaver MX, tal vez tenga que optimizar un gráfico que haya colocado en la página. Tal vez haya heredado una página de un colaborador con una imagen demasiado grande o que no esté optimizada correctamente.

Puede optimizar imágenes con Fireworks directamente en Dreamweaver. Haga clic en la imagen con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Optimizar en Fireworks en el menú contextual.

Si se abre el cuadro de diálogo Buscar origen, puede buscar la versión PNG original del archivo o bien editar la existente.

Page 69: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo buscar origen Se abre Fireworks, pero en un modo especial. El cuadro de diálogo Optimizar imagen permite cambiar el formato de la imagen, la calidad de las imágenes JPEG o la paleta de las imágenes GIF. La imagen aparecerá en la ventana de vista previa conforme modifique los parámetros.

Cuando termine de cambiar la configuración, haga clic en Actualizar. El archivo se exporta y la imagen se actualiza en su página de Dreamweaver.

Cuadro de diálogo Optimizar Imagen

Añadiendo Películas de Flash Macromedia Flash MX 2004 es una atractiva aplicación para añadir gráficos y animaciones vectoriales a su página. Un gráfico vectorial es el que utiliza fórmulas geométricas para representar imágenes. Por lo general, los gráficos son más pequeños que las imágenes de mapas de bits, por lo que se descargan rápidamente

Puede insertar películas Flash desde cualquiera de estos lugares:

• Menú o barra Insertar

• Panel Activos

Page 70: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

• Panel Archivos

Coloque el cursor en el lugar de la página donde desea que aparezca la película Flash y utilice uno de estos métodos para insertar la película Flash en la página.

Barra Insertar

Haga clic en Media de la Categoría Común de la barra Insertar, y entonces elija Flash del menú emergente.

Menú emergente Media en la Barra Insertar

Para hacerlo usando los menús, elija Menú Insertar Media Flash.

Ambas operaciones abren el cuadro de diálogo Seleccionar archivo. En el cuadro de diálogo Seleccionar archivo, elija el archivo de Flash con extensión .swf y, a continuación, haga clic en Aceptar.

Page 71: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Seleccionar Archivo

Nota: Una película Flash tiene la extensión .swf (pronunciado swif) al final del nombre del archivo. Un archivo Flash con la extensión .fla no se ha publicado en Flash y no se puede importar en Dreamweaver.

La película Flash aparece en la página como un cuadro de color gris. Cuando se selecciona el marcador de posición de Flash, el inspector de propiedades muestra los parámetros que se pueden configurar en la película. Haga clic en Reproducir en el inspector de propiedades para reproducir la película.

Page 72: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Reproduciendo una película de Flash en la vista de diseño

Panel Activos Seleccione el icono Flash situado a la izquierda del panel Activos. Seleccione la película Flash en la lista y después haga clic en Insertar. También puede arrastrar la película Flash desde el panel hasta la página.

Page 73: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Categoría flash en el panel de activos

Panel Archivos Para insertar una película Flash desde el panel Archivos, seleccione la película y arrástrela hasta la página.

Películas Flash en el panel de archivos

Resumen

• Los navegadores Web admiten dos tipos habituales de archivos de imagen: GIF y JPEG. Los archivos PNG también son compatibles, pero no son tan comunes.

• El formato GIF está indicado principalmente para imágenes con un uso limitado del color.

• El formato JPEG puede tener colores ilimitados y está indicado principalmente para fotografías.

• Para colocar imágenes en sus páginas Web puede utilizar la barra Insertar, el panel Activos, y puede arrastrarlas desde el panel Archivos, o bien, utilizar el menú Insertar.

• El inspector de propiedades permite cambiar las propiedades de la imagen relacionadas con el alineamiento, el espaciado, el borde y el texto alternativo.

• Puede editar imágenes en Fireworks desde el mismo Dreamweaver.

• Macromedia Flash MX 2004 crea texto, botones y películas vectoriales que puede añadir a su página.

Page 74: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Navegando por su Sitio

Entender la navegación por un sitio Una vez que ha determinado las metas de su sitio Web, el público objetivo, y las necesidades de datos, esta listo para conceptualizar el esquema de navegación en el sitio. La navegación del sitio describe cómo sus páginas Web se relacionan entre ellas la una con la otra. Específicamente muestra como viajan los usuarios por su sitio cuando ellos realizan clic sobre los vínculos e interactúan con las interfaces de la aplicación. La navegación se implementa por:

• Una barra de navegación, que puede estar hecha con texto, o imágenes que actúan como vínculos de hipertexto.

• Una serie de vínculos de hipertexto incrustado en sus páginas Web.

Vínculos de hipertexto El hipertexto ha sido el principal concepto que ha llevado a la invención de la World Wide Web, que no es ni más ni menos que una ingente cantidad de contenido conectado a través de un gran número de vínculos de hipertexto. Los vínculos de hipertexto:

• Se representan a menudo en una página mediante texto subrayado (aunque los usuarios pueden desactivar esta opción en sus navegadores)

• Pueden “llevar” al usuario a otro documento dentro del mismo sitio Web o a una página de otro sitio Web.

• Se usan en la navegación global del sitio, donde un conjunto vínculos son creados dentro de una barra de navegación.

El ejemplo de abajo muestra hipervínculos (es el texto subrayado):

Page 75: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Documento con vínculos

Tipos de Vínculos Los vínculos que se utilizan en texto en gráficos para navegar a otras páginas se denominan vínculos de hipertexto. Hay varios tipos de vínculos que se pueden crear con texto o con un gráfico:

• Vínculos a otras páginas dentro del mismo sitio.

• Vínculos a otros sitios.

• Vínculos a un lugar con nombre dentro de la misma página.

• Vínculos para enviar un mensaje de e-mail

Vinculación de otros archivos en su sitio Existen varios modos de crear vínculos a documentos en el mismo sitio:

• Señalando el archivo mediante el icono de señalización de archivos • Localizando el archivo mediante el icono de carpeta en el inspector de propiedades

• Escribiendo la ruta y el nombre del archivo en el cuadro de texto Vínculo del inspector de propiedades

Page 76: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Ruta de los archivos Se puede establecer un vínculo a un archivo dentro del mismo sitio de uno de estos dos modos:

• Ruta relativa al documento.

• Ruta relativa a la raíz del sitio.

En este curso sólo se describen las rutas relativas al documento.

Los vínculos relativos a documentos señalan desde una página dentro de un sitio a otra página del mismo sitio. La vinculación relativa es el método más adecuado para los vínculos locales en la mayoría de los sitios Web. Como estas páginas pueden estar en directorios distintos, el nombre correcto de ruta relativa debe apuntar a un archivo.

Guarde siempre antes de crear una ruta relativa al documento; el nombre de la ruta no es válido sin un punto de inicio definitivo.

Si crea un vínculo con una ruta relativa al documento antes de guardar el documento, Dreamweaver usará temporalmente una ruta absoluta que comienza por file:// hasta que el archivo sea guardado. Cuando guarde su documento, Dreamweaver convertirá la ruta en una ruta relativa.

Jerarquía de carpetas relativas

La tabla siguiente muestra la nomenclatura usada para resolver una ruta en la jerarquía de carpetas:

Nomenclatura Significado

../ Un directorio por encima del directorio actual

nombredirectorio/ Nombre del subdirectorio llamado “nombredirectorio” por debajo del directorio actual

Por ejemplo, supongamos que tiene un sitio con esta estructura:

Page 77: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Estructura de directorios en un sitio

Para establecer un vínculo desde contents.html hasta otros archivos:

• Para establecer un vínculo desde contents.html hasta hours.html, la ruta del archivo es: hours.html.

• Para establecer un vínculo con tips.html, utilice la ruta relativa: resources/tips.html.

• Para establecer un vínculo con index.html, utilice la ruta relativa: ../index.html.

• Para establecer un vínculo con catalog.html, utilice la ruta relativa: ../products/catalog.html.

Page 78: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Vinculando archivos del sitio El panel Archivos proporciona una lista de todos los archivos del sitio y es un modo sencillo de añadir vínculos a la página. En el panel Archivos se pueden ver todos los archivos, por lo que basta con señalar el archivo que desea establecer como vínculo.

Seleccione el texto que necesita para su vínculo y después use el icono de señalización de archivos en el Inspector de Propiedades para señalar el archivo a vincular en el Panel de Archivos.

Usando el señalizador de archivos para vincular

Nota: Si el archivo que desea para el vínculo se encuentra dentro de una carpeta del panel Sitio, deténgase sobre la carpeta hasta que se abra y después señale el archivo.

Vinculando mediante selección de archivo

Otro modo de crear un vínculo es mediante el icono de carpeta del inspector de propiedades. Seleccione el texto del documento que desea convertir en vínculo y después haga clic en el icono de carpeta.

Icono carpeta para vincular archivos

Nota: También puede seleccionar el texto del vínculo y después elegir Modificar Crear vínculo. Se abre el mismo cuadro de diálogo Seleccionar archivo que cuando se hace clic en el icono de carpeta..

Page 79: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

En el cuadro de diálogo Seleccionar archivo, busque el archivo para el vínculo.

Seleccionando una archivo para vincularlo

Cuando se crea un vínculo a un archivo, Dreamweaver MX crea una etiqueta de punto de fijación:<a href="directorio_relativo/file.htm">Texto del vínculo</a>

Actualizar vínculos

Cuando se crea un vínculo a una página, el nombre de la ruta de ese vínculo se incrusta en el código HTML. Si sitúa un archivo con vínculos en otra carpeta fuera de Dreamweaver, la ruta del vínculo puede ser distinta y el vínculo no funcionaría.

• Utilice el panel Archivos para mover archivos. Al mover un archivo, Dreamweaver MX actualiza los vínculos y gráficos correspondientes en la página para mantener la ruta adecuada.

• Si mueve los archivos con el Explorador de Windows o Finder de Macintosh, Dreamweaver MX no tiene forma de mantener los vínculos. Tendrá entonces que actualizar esas páginas manualmente.

Nota: Dreamweaver MX tiene una utilidad Verificador de vínculos para buscar los vínculos rotos en su documento o sitio, pero de todos modos tendrá que restablecer cada vínculo roto del documento de forma manual. La verificación de vínculos se describe en la Unidad 10.

Cambiando el color de los vínculos

Utilice las propiedades de la página para cambiar los colores predeterminados de los vínculos. Cuando cambie los colores de los vínculos tendrá que considerar lo siguiente:

• No elija colores que puedan confundir a sus visitantes. Si usa el mismo color para el vínculo normal y el vínculo visitado, sus visitantes podrían pensar que ellos ya han visitado

Page 80: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

todas las páginas de su sitio y no explorarían más en su sitio Web.

• Los colores de los vínculos deben contrastar con el color de fondo de la página para preservar su legibilidad..

Elija Menú Modificar Propiedades de la Página para cambiar los colores de los vínculos. Haga clic la caja de color para cada tipo de vínculo y elija un color de la paleta.

Paleta de colores para los vínculos

Estados de los vínculos Un vínculo puede tener tres estados. En la siguiente tabla se muestran tales estados. Cada estado de vínculo tiene un color predeterminado distinto en el navegador.

Tipo de vínculo

Descripción

Vínculos Color inicial de un vínculo, antes de hacer clic en él. El color normal predeterminado del navegador para los vínculos es azul.

Vínculos Visitados

Color al que cambia el vínculo cuando el usuario hace clic en él. El color predeterminado es púrpura.

Vínculos Activos

Color al que cambia el vínculo si un usuario mantiene presionado el botón del ratón después de hacer clic en él. El color predeterminado es rojo

Nota: El color del vínculo activo destacaba más cuando se necesitaba un menor tiempo de respuesta para indicar los vínculos en los que se hacía clic. Puede que algunos navegadores no admitan este atributo.

Utilizando selectores CSS de pseudo-clases

Cuando cambia los colores por defecto de los estados de un vínculo, Dreamweaver crea

Page 81: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

selectores CSS de pseudo-clases. Puede modificar los colores predeterminados usando el panel CSS. Seleccione Avanzado en el cuadro de diálogo Nuevo Estilo CSS. En el menú emergente Selector puede elegir entre los cuatro estados::

• a:link

• a:visited

• a:hover

• a:active

Opciones de vínculo

Vínculos a otros sitios Web Para crear un vínculo mediante el inspector de propiedades, seleccione el texto o el gráfico del vínculo y después escriba el URL o el nombre de ruta en el cuadro de texto Vínculo. En este ejemplo, el vínculo se utiliza para conectarle a un sitio Web distinto.

URL en el campo de texto Vínculo

Recuerde que el URL en el cuadro de texto Vínculo debe comenzar por http://. Los vínculos con sitios externos se consideran vínculos absolutos.

Una vez creado el vínculo en una página del sitio, estará disponible en el menú emergente Vínculo. Seleccione el texto y después elija el vínculo en el menú emergente.

Menú emergente de Vínculo

Cuando se crea un vínculo a un sitio,Dreamweaver MX crea una etiqueta de punto de

Page 82: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

fijación: <a href="http://www.site.com">Texto del vínculo</a>

Destino de los vínculos Cuando se establece un vínculo con una página, la página vinculada sustituye a la página actual del navegador. Tal vez desee mostrar la página del navegador en una ubicación o ventana nueva. Si los vínculos externos abren una nueva ventana del navegador, la página permanece en la ventana original.

Para abrir una página en una nueva ventana de navegador, elija _blank en el menú emergente Destino del inspector de propiedades. (Los destinos distintos a _blank sólo funcionan cuando se crean marcos en la página, lo cual esta fuera del ámbito de este curso).

Menú emergente Destino

Nota: Tenga cuidado a la hora de añadir destinos a nuevas ventanas del navegador abiertas. Las nuevas ventanas incrementan las necesidades de RAM del sistema del usuario a medida que se abre cada ventana. El usuario también se puede confundir si la nueva ventana se abre sobre la existente

Vínculos a anclajes con nombre Cuando los usuarios hacen clic en un vínculo, se muestra la parte superior de la página vinculada. Si un documento es extenso o tiene muchos apartados, tal vez desee crear un vínculo que lleve al usuario a un lugar concreto del documento. Así evita tener que desplazarse por el documento. Para ello, debe crear una posición con nombre, un anclaje con nombre, al que pueda hacer referencia como vínculo.

Crear un anclaje con nombre Un anclaje con nombre consta de dos partes:

• Una entidad con nombre (el anclaje con nombre) en el lugar de la página HTML donde desea que llegue el visitante

• Un vínculo a ese anclaje con nombre.

Un anclaje se puede colocar en cualquier punto de una página Web. Este punto especifica el lugar donde llevará el vínculo dentro del documento.

Coloque el punto de inserción al principio de la sección donde desea llevar al usuario y elija Menú Insertar Anclaje con nombre, o haga clic en el botón Anclaje con nombre de la categoría Común de la barra Insertar. Escriba el nombre de su anclaje en el campo de texto Nombre de Anclaje del cuadro de diálogo Anclaje con nombre.

Page 83: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo anclaje con nombre

Los puntos de fijación con nombre distinguen entre mayúsculas y minúsculas y no pueden estar repetidos en la página. Los nombres sólo pueden contener letras y números, no se permiten espacios ni caracteres especiales.

Nota: Si coloca un punto de fijación al final de un encabezado, algunos navegadores (por ejemplo, Internet Explorer en Macintosh) muestran el contenido tras el encabezado, no el propio encabezado

Activar elementos invisibles Los puntos de fijación que se colocan en la página son elementos invisibles. Dreamweaver MX le avisa si no tiene activados los elementos invisibles al insertar un punto de fijación.

Advertencia sobre elementos invisibles

Nota: Si está activada la opción para no mostrar el mensaje, no aparecerá esta advertencia.

Para ver los puntos de fijación, seleccione Menú Ver Ayudas visuales Elementos invisibles. Una vez activados los elementos invisibles, aparecerá un icono de color amarillo junto al texto elegido como punto de fijación.

Page 84: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Iconos anclajes con nombre

Vinculando al anclaje con nombre Una vez que ha añadido un punto de fijación a la página Web, puede utilizar ese punto de fijación en un vínculo. Seleccione el texto que desea establecer como vínculo. En el cuadro de texto Vínculo del inspector de propiedades, introduzca un signo de número y después el nombre del punto de fijación. No añada espacios detrás del signo de número.

Vincular a anclaje con nombre

Icono señalar archivo También puede crear un vínculo común anclaje con nombre si arrastra el icono de señalización de archivos del inspector de propiedades hasta el anclaje con nombre en la página:

Page 85: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Vínculando a un anclaje con nombre con el icono Señalizador de Archivos

Anclajes en otras páginas Para crear un vínculo a un punto de fijación en otra página, cree el vínculo a la página como de costumbre y después adjunte el nombre del punto de fijación al final del nombre de la página, como en “trips.htm#hawaii”..

Cuando se crea un vínculo au n punto de fijación de otra página, Dreamweaver MX añade tras el nombre de archivo una etiqueta de punto de fijación : <a href="directorio_relativo/archivo.htm#anclaje">Texto vinculado</a>

Si el punto de fijación está en la misma página que el vínculo, la etiqueta tiene este aspecto:

<a href="#anclaje">Texto vinculado</a>

Añadir vínculos de e-mail

Añadir un vínculo de correo electrónico a la página es un modo de proporcionar a los usuarios un método para ponerse en contacto con alguien para comentar la información proporcionada en el sitio Web. El vínculo de correo electrónico abre una nueva ventana de mensaje en el programa de correo asociado al navegador del usuario..

Crear un vínculo de correo electrónico Puede añadir un vínculo de correo electrónico al texto existente en la página o bien utilizar el cuadro de diálogo para añadir el texto y el vínculo.

Si hay texto, selecciónelo y, en la categoría Común de la barra Insertar, haga clic en Vínculo de correo electrónico o bien seleccione Menú Insertar Vínculo de correo electrónico.

Page 86: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Botón Vínculo de correo electrónico en la barra Insertar

En el cuadro de diálogo Vínculo de correo electrónico, el texto seleccionado aparece en el campo Texto. Escriba la información sobre el correo electrónico en el cuadro de texto Correo electrónico. Puede dejar el texto tal cual o realizar las modificaciones necesarias.

Cuadro de diálogo Vínculo de Correo electrónico

Si no existe el texto para el vínculo de correo electrónico, coloque el punto de inserción en el lugar donde desea que aparezca el vínculo y después elija Menú Insertar Vínculo de correo electrónico. Escriba el texto deseado en el campo Texto y después escriba la información sobre el correo electrónico en el cuadro de texto Correo electrónico.

.

Cuando se crea un vínculo de correo electrónico, Dreamweaver crea una etiqueta de anclaje utilizando la opción HREF mailto: <a href=mailto:[email protected]> [email protected] </a>

Vínculos en imágenes

Para añadir un vínculo a un gráfico, seleccione el gráfico en la página y utilice las opciones Vínculo del inspector de propiedades para señalar el archivo o bien seleccionar el archivo desde un cuadro de diálogo. El usuario puede hacer clic en cualquier parte de la imagen para ir a esa página vinculada.

Cuando se crea un vínculo en una imagen se coloca una etiqueta de punto de fijación al principio y al final de la etiqueta de imagen: <a href=http://www.macromedia.com alt=”macromedia image”><img src="mm.gif"></a>.

Mapas de imagen Si tiene una imagen con varias zonas para trasladar al usuario a distintos destinos, debe crear un mapa de imagen.

Por ejemplo, suponga que tiene un mapa del mundo y que desea crear un vínculo en cada país. Utilice un mapa de imagen para distinguir los distintos contornos de cada país y

Page 87: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

después asigne un vínculo diferente a cada contorno.

Las zonas de vínculo sobre un mapa de imagen se conocen como zonas interactivas. Una zona interactiva de un mapa de imagen puede tener una de estas tres formas: un rectángulo, un círculo o un polígono.

Para crear un mapa de imagen se utilizan las herramientas de mapa del inspector de propiedades. Para ver las herramientas de mapa, seleccione la imagen y amplíe el inspector de propiedades.

Herramientas de zonas interactivas en el Inspector de Propiedades

En el cuadro de texto Mapa, asigne un nombre exclusivo a cada mapa de imagen de la página. A continuación, elija una de las herramientas de zona interactiva y delimite la zona interactiva en la imagen.

Rectángulos y óvalos Las herramientas Zona interactiva rectangular y oval, funcionan de forma similar a las herramientas de las aplicaciones de diseño; arrástrela por la zona para dibujar la forma con zona interactiva. Si desea mover o cambiar el tamaño, seleccione la herramienta Puntero para efectuar cambios.

Zona interactiva rectangular en la imagen

Polígonos La herramienta Zona interactiva poligonal funciona de forma distinta.

• Haga clic alrededor de la forma en la imagen, continuando en una dirección. Cada clic crea un punto en la zona interactiva.

Page 88: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

• Cada punto se conecta por medio de una línea con el punto anterior.

• Tras el tercer clic, aparecerá la forma rellena de la zona interactiva.

• Continúe haciendo clic hasta que consiga la forma deseada.

Zona interactiva de Polígono en la imagen

Si desea mover la zona interactiva, seleccione la herramienta Puntero de zona interactiva, coloque el puntero en el interior de la zona interactiva y después arrástrela hasta la nueva ubicación. Si desea mover un punto de la zona interactiva, mueva el punto con la herramienta Puntero.

Cuando termine la zona interactiva, el inspector de propiedades cambia y muestra las opciones de la zona interactiva. Aquí puede introducir el vínculo de la zona interactiva y el texto alternativo que aparece cuando el usuario mueve el puntero por esa zona.

Vínculo de la zona interactiva

Crear una barra de navegación Dreamweaver le permite crear una barra de navegación para sus sitios Web utilizando el objeto Barra de navegación. Una barra de navegación consiste en una imagen (o conjunto de estas) que muestran cambios basados en la interacción con el usuario.

Por ejemplo, la barra de navegación podría contener un conjunto de imágenes con texto de navegación que cambian cuando un usuario sitúa el ratón sobre la imagen de la barra de navegación, como se muestra en el siguiente ejemplo:

Barra de navegación

Page 89: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Insertando una barra de navegación Cuando inserta una barra de navegación, se asignan los nombres a los elementos de navegación y se seleccionan las imágenes para usarlas con estos. Puede insertar una barra de navegación de cualquiera de estas dos maneras:

• Elija Insertar Objetos de Imagen Barra de Navegación.

• En la categoría común de la barra Insertar, elija en el menú emergente de imágenes la opción Barra de Navegación.

El cuadro de diálogo Insertar Barra de Navegación aparece entonces.

Insertar Barra de Navegación

Cada elemento corresponde a un botón con una presentación de hasta cuatro estados. La única imagen requerida obligatoriamente es la Imagen arriba. Las imágenes de los otros estados son opcionales..

• La Imagen arriba representa el estado en el que la barra de navegación se muestra por primera vez, cuando no se ha hecho clic en el elemento de menú o el cursor no pasa por encima de éste..

• La Imagen sobre muestra el estado en el que se muestra la imagen cuando el usuario pasa el puntero del ratón sobre la imagen. displays.

• La Imagen abajo se muestra después de que el usuario ha hecho clic en la imagen.

• El estado Sobre mientras imagen abajo se muestra cuando el usuario pasa el puntero del ratón por encima de una imagen es estado Abajo.

Los nombres de los elementos aparecen en la “Lista de Elementos de la barra de navegación”. Utilice los botones con flechas para organizar el orden de estos elementos en la barra de navegación. Haga clic en el botón con el signo de sumar (+) para añadir elementos a la barra de navegación.

En el cuadro de texto “Al hacerse clic, ir a URL” haga clic en el botón examinar para

Page 90: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

seleccionar un archivo vinculado que desee abrir y después seleccione en el menú emergente la localización donde desea que se abra el archivo. Seleccione alguno de las siguientes localizaciones:

• Ventana principal, para abrirlo en la misma ventana que la barra.

• Un marco en el que abrir el archivo, si la barra de navegación se encuentra en un conjunto de marcos.

También se puede configurar adicionalmente:

Configuración Efecto

Carga Previa de Imágenes

Seleccionar para descargar las imágenes cuando se carga la página. Si no elige esta opción el usuario puede experimentar un retardo en el efecto rollover; cuando pasa el cursor por encima de la imagen.

Show "Imagen abajo" inicialmente

Seleccione para mostrar el elemento seleccionado en el estado abajo; cuando la página se muestra; en vez de mostrar el estado Arriba inicialmente.

Cuando selecciona esta opción, un asterisco aparece detrás del elemento: en la lista de elementos de la barra de navegación.

Insertar Elija para insertar los elementos de la barra de navegación horizontalmente o verticalmente en el documento..

Utilizar Tablas Seleccionar para insertar los elementos de barra de navegación dispuestos en una tabla.

Consideraciones de accesibilidad Existen una serie de consideraciones a tener en cuenta para mantener la navegación de su sitio accesible:

• Asegúrese siempre que las imágenes destinadas a la navegación poseen definido un texto alternativo para los lectores de pantalla.

• No usen elementos de navegación que requieran de rutinas de javascript para que puedan funcionar correctamente.

Crear un menú de salto

Un menú de salto es un menú emergente que contiene vínculos con otras páginas del sitio o con otros sitios Web. Un ejemplo de menú de salto se muestra a continuación:

Page 91: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Menú de salto

Para insertar un menú de salto, puede hacerlo tanto desde los menús (Menú Insertar Formulario Menú de Salto) carcomo desde la barra Insertar (Categoría Formulario, clic en el botón Menú de Salto).

Menú de salto

El cuadro de diálogo Insertar Menú de Salto aparece.

Cuadro de diálogo Insertar menú de salto

Introduzca el texto que desea se muestre para la opción de menú y la URL a la deberá ir

Page 92: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

cuando se seleccione esa opción. La opción “Abrir URL en:” es aplicable sólo cuando esta usando marcos en su aplicación.

El menú de salto puede inmediatamente desplazarse a la página deseada cuando el usuario elija una opción del menú. Como alternativa, puede insertar un botón Ir para que los usuarios hagan clic después de elegir una de las opciones y así se desplacen a la página deseada.

Resumen • Un vínculo es un texto o un gráfico que usuario presiona para: mostrar una página del sitio que esta visitando; mostrar una página de otro sitio Web; o para saltar a una sección de la página actual.

• El inspector de propiedades es usado para escribir un vínculo, elegir un vínculo creado previamente, navegar hasta un archivo que vincular, o arrastrar el icono señalizador de archivos a un archivo del panel de Archivos.

• Puede vincular a una sección de un documento usando anclajes con nombre.

• Los vínculos de e-mail permiten a los usuarios enviar e-mail desde el software cliente de e-mail predeterminado.

• Puede crear un vínculo dentro de una imagen.

• Las zonas interactivas permiten a los usuarios navegar a diferentes páginas dependiendo de la zona de la imagen en la que se haga clic.

• La barra de navegación se usa para crear una barra de herramientas de navegación que visualmente cambia dependiendo de la acción del usuario con el ratón.

Diseñando la disposición de la página

Creando contenedores Puede comenzar el diseño de su página Web creando un conjunto de contenedores lógicos. Estos contenedores son regiones de la página que contienen los objetos del sitio. Por ejemplo, los contenedores pueden incluir las siguientes regiones:

• Región de encabezado

• Región del Logotipo de la Empresa

• Región de la Barra de Herramientas de Navegación

• Región del Contenido

• Región del pie de página

Dentro de los contenidos puede necesitar separar la página en otras regiones adicionales. En el diseño de abajo, nosotros separaremos la página en estas regiones o contenedores:

Page 93: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Ejemplo de diseño de disposición

Controlando la disposición Con Dreamweaver, existen varios modos en el que puede controlar la disposición de sus páginas:

• Utilizar tablas para crear cada contenedor.

• Utilizar capas para crear cada contenedor.

Estructurando la disposición de la página con tablas

Las tablas le dan control sobre la disposición de su página y la situación de su contenido. Las tablas están pensadas para mostrar información de forma muy organizada. Tienen dos usos principales. Las tablas le permiten:

• Mostrar información en filas y columnas, de forma bastante parecida a una hoja de cálculo

• Controlar la disposición de una página Web con algunos controles sobre la ubicación del texto y los gráficos.

Crear una tabla Puede crear una tabla en Dreamweaver MX mediante la categoría Común de la barra Insertar o bien mediante los menús Insertar Tabla.

Page 94: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Botón Insertar Tabla

En el cuadro de diálogo Insertar tabla, introduzca los parámetros deseados para la tabla. Estos parámetros se pueden modificar después de insertar la tabla en la página.

.

Cuadro de diálogo Insertar Tabla

Propiedades de la tabla Las propiedades de las tablas y sus valores se describen a continuación:

Opción Valor

Filas Número de filas que desea tener en la tabla. Siempre puede añadir o quitar filas posteriormente.

Columnas Número de columnas que desea tener en la tabla. Siempre puede añadir o

Page 95: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

quitarlas posteriormente.

Ancho de Tabla Ancho de la tabla en la página, especificado en píxeles o en porcentaje.

Borde Ancho en píxeles del borde alrededor de cada celda de la tabla.

Relleno de celda

Margen en píxeles alrededor del contenido de cada celda.

Espacio entre celdas

Espacio en píxeles entre cada celda.

Encabezado Permite crear los encabezados de tabla a la izquierda, arriba, ambos lados o ninguno.

Texto Muestra un titulo de la tabla que se muestra fuera de esta.

Alineación de texto

Especifica donde aparecerá alineado el texto anterior (título) con respecto a la tabla

Resumen Muestra una descripción de la tabla. Los lectores de pantalla leen este resumen, pero el texto no aparece en el navegador del usuario.

Cuando se inserta una tabla se emplean las siguientes etiquetas HTML:

<tabla></tabla> define la tabla en su conjunto

<tr></tr> define una fila de la tabla

<td></td> define una celda de datos de la tabla

<th></th> define una celda de encabezado de la tabla

Seleccionar elementos de tabla

Después de crear la tabla, tiene la opción de cambiar las propiedades de toda la tabla, de una celda concreta o de un grupo de celdas. Hay varias formas de seleccionar celdas en Dreamweaver:

• Arrastre el puntero sobre una fila

• Arrastre el puntero sobre una columna

• Haga clic mientras mantiene presionada la tecla Mayús o la tecla Ctrl (Windows), o bien la tecla Comando (Macintosh) para seleccionar varias columnas y filas

• Sitúese a la izquierda de una fila, o sobre una columna, y seleccione la fila o la columna con la flecha de selección

Una vez realizada la selección, las propiedades que cambie se aplican a todas las celdas seleccionadas.

Edición de tablas usando el Modo Ampliado

Page 96: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Dreamweaver MX 2004 añadió la posibilidad de ver su tabla en un modo ampliado para editarla con mayor facilidad. Puede iniciar su modo expandido en la categoría Diseño de la barra Insertar. Una vez activado, recibirá un mensaje de advertencia para comenzar, mensaje que podrá desactivar para cuando vuelva a usar el modo ampliado de nuevo.

Comenzar con el modo ampliado de edición de tablas

Como se describe en el cuadro de diálogo, este modo no muestra las tablas como se verían en un navegador. El modo ampliado para tablas añade de forma temporal relleno de celda y espacio entre celdas a todas las tablas del documento, e incrementa los bordes de tabla para hacer su edición más fácil. Este modo le permite seleccionar elementos en las tablas o situar con precisión un punto de inserción.

Por ejemplo, puede ampliar una tabla para situar un punto de inserción a la izquierda o derecha de una imagen sin que inadvertidamente seleccione la imagen o la celda de tabla.

Sin el modo ampliado para tablas

Page 97: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Con el modo ampliado para tablas

Una vez que ha realizado su selección, o hubiere situado su punto de inserción, puede volver al modo estándar o de diseño para continuar la edición. Algunas operaciones visuales, como el cambio de tamaño, no mostrarán los resultados esperados en el modo ampliado de edición.

Nota Si desactiva los indicadores de ancho para las tablas, puede volver a activarlos seleccionando Menú Ver Ayudas Visuales Anchos de tabla

Configurando las propiedades de la celda Una vez seleccionada la celda o el grupo de celdas, puede cambiar las propiedades del grupo con el inspector de propiedades. A continuación, se muestra el inspector de propiedades de la celda de una tabla:

Propiedades de celda

La tabla describe las propiedades que se aplican a las celdas y filas de una tabla:

Opción Valor

Alineamiento horizontal (Horiz)

Alinea el contenido de la celda a la izquierda (predeterminado), al centro o a la derecha.

Alineamiento Vertical (Vert)

Alinea el contenido de la celda hacia la parte inferior, al centro (predeterminado) o hacia la parte superior de la celda.

Ancho (W) Establece el ancho mínimo de la celda en píxeles (la celda automáticamente se amplia si el ancho del contenido supera el ancho mínimo)

Page 98: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Alto (H) Establece la altura mínima de la celda en píxeles (la celda se ampliará automáticamente si la altura del contenido supera la altura mínima)

Imagen de fondo (cuadro de texto Fnd)

Establece una imagen de fondo en una celda, una fila o una tabla

Color de fondo (cuadro de texto Fnd)

Establece un color de fondo en una celda, una fila o una tabla

Color de Borde (Brdr) Establece un color para el borde de la tabla. Si el borde de la tabla se establece en 0, no se aplicará el color de borde en las celdas de la tabla.

Combinar celdas Transforma varias celdas en una sola.

Dividir Celdas Divide las celdas en varias celdas en horizontal o vertical( para una celda solo )

No ajustar (No aj.) Evita el ajuste de líneas del contenido de una celda, una fila o una tabla. .

Encabezado(Enc) Crea un encabezado en una o varias celdas. Los encabezados son en negrita y centrados.

Editar filas Las operaciones que puede realizar para modificar filas y columnas serían:

• Añadir

• Borrar

• Combinar

• Dividir

Añadir filas y columnas Una vez creada la tabla, puede añadir una fila o una columna. Puede hacerlo de cualquiera de las siguientes formas:

• Haga clic en la última celda de una fila y presione la tecla Tab. Se añade una nueva fila al final de la tabla.

• Seleccione Modificar Tabla Insertar fila. Se añadirá una fila nueva antes de la fila seleccionada.

• Haga clic en la tabla con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y elija Tabla Insertar fila en el menú contextual. Se añadirá una fila nueva antes de la fila seleccionada.

Page 99: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Para especificar que se inserten filas por encima o por debajo de la fila actual, elija Menú Modificar Tabla Insertar filas o columnas. El cuadro de diálogo resultante permite controlar el emplazamiento de las nuevas filas y columnas.

Cuadro de diálogo insertar Filas o Columnas

Borrar una fila Puede quitar filas de la tabla si resalta la fila y después lleva a cabo una de estas operaciones:

• Seleccione Menú Modificar Tabla Eliminar fila

• Haga clic en la tabla con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Tabla Eliminar fila en el menú contextual. .

Combinación de filas y columnas Después de resaltar las celdas que desea combinar, lleve a cabo una de estas operaciones:

• Haga clic en Combinar celdas en el inspector de propiedades.

• Elija Menú Modificar Tabla Combinar celdas

División de filas y columnas

Después de resaltar la celda que desea dividir, lleve a cabo una de estas operaciones:

• Haga clic en Dividir celdas en el inspector de propiedades.

• Elija Menú Modificar Tabla Dividir celdas

Se devuelve el número de celdas al original si han sido combinadas previamente, o bien permite dividir una celda en un número determinado de filas o columnas.

Ordenar Tablas

Puede realizar una ordenación sencilla de la tabla ordenando los contenidos de una sola columna, o bien, una ordenación más compleja ordenando los contenidos de dos columnas.

Nota: Las tablas que contienen celdas combinadas no se pueden ordenar.

Para ordenar una tabla, selecciónela y elija Menú Comandos Ordenar tabla. En el cuadro

Page 100: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

de diálogo Ordenar tabla, elija la columna que se va a ordenar y el modo de ordenación. Si desea añadir una segunda columna, seleccione la columna en el menú emergente Después por. La configuración predeterminada no ordena la primera fila de la tabla. .

Cuadro de diálogo Ordenar Tabla

Importar Datos de Tabla Si el contenido que tiene almacenado está en una hoja de cálculo, en una tabla de Microsoft Word o en un archivo de texto separado por comas, Dreamweaver permite importar esa información en la página Web fácilmente.

Para importar los datos de tabla, lleve a cabo una de estas operaciones::

• Elija Menú Archivo Importar Datos de Tabla

• Elija Menú Insertar Objetos de Tabla Importar Datos de Tabla

En el cuadro de diálogo Importar datos de tabla, elija el archivo que desea importar, el delimitador del archivo y los parámetros que desea utilizar en la tabla.

Page 101: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Importar Datos de Tabla

Nota: También puede exportar datos en datos de tabla desde el Menú Archivo Exportar Tabla.

Usando el Modo de Diseño con Tablas En Dreamweaver MX, puede crear o ver tablas en la página de uno de estos modos:

• Estándar

• Diseño

• Ampliado

Cuando se utiliza el comando Insertar tabla, se crea una tabla en la vista estándar.

La vista de Diseño trabaja como programas de diseño que dibujan ciertos contenedores en la página y los rellenan con texto o gráfico. Puede cambiar el tamaño de los contenedores, y puede situarlos en cualquier lugar de la página.

Para usar tabla para la disposición, seleccione Vista de Diseño en la Categoría Diseño de la barra Insertar. Podrá ver un mensaje que le indica que va a trabajar con este modo y puede elegir no ver este mensaje de nuevo.

Page 102: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Comenzar con el modo de diseño

La barra Insertar tiene dos opciones que puede usar en vista de Diseño:

Dibujar una tabla de Diseño

Dibujar una celda de Diseño

Categoría Diseño en la Barra Insertar

Usando la cuadrícula Puede necesitar mostrar la cuadrícula dentro del modo de Diseño para que le ayude visualmente a alinear y colocar tablas de diseño. Para activar la cuadrícula elija Menú Ver Cuadrícula Mostrar Cuadrícula. Para cambiar las opciones de la Cuadrícula elija Menú Ver Cuadrícula Configuración de la Cuadrícula. Elija Ajustar a Cuadrícula para hacer que los elementos de la página se ajusten mientras los mueve. Elija Puntos si lo que necesita es ver líneas punteadas en vez de líneas sólidas.

Page 103: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Configuración de la cuadrícula

Para mostrar las reglas, elija Menú Ver Reglas Mostrar. Las reglas aparecen en la parte superior y a la izquierda de la página, con marcas en píxeles, pulgadas o centímetros.

Dibujando una celda de diseño

Cuando trabaja en la Vista Diseño de edición de tablas, puede añadir Celdas de Diseño o Tablas de Diseño a su página.

Para dibujar una celda de diseño asegúrese de que este en el modo de edición de Diseño y después:

Haga clic en el botón Dibujar celda de diseño en la categoría Diseño de la barra Insertar. El puntero del ratón se convierte en una cruz.

Coloque el puntero en el lugar de la página donde desea que aparezca la celda y arrástrelo para dibujarla.

Nota: Para dibujar varias celdas sin tener que hacer clic en Dibujar celda de disposición más de una vez, mantenga presionada la tecla ctrl. (Windows) o Comando (Macintosh) mientras dibuja la primera celda. Puede seguir dibujando celdas nuevas hasta que seleccione una celda que desee mover o modificar

Se dibuja automáticamente una tabla que contiene la celda. La tabla se dibuja con el mismo ancho que la ventana del documento, pero puede cambiar luego su tamaño a cualquier otro.

Las Tablas de diseño aparecen con una barra por la parte superior de la tabla. Esta barra hace fácil la identificación. La parte inferior contiene los anchos de las celdas y de la tabla.

Page 104: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Celdas de Tabla en la Modo Diseño de Edición de Tablas

Códigos de Color La codificación por colores permite trabajar fácilmente con la tabla:

• La tabla aparece en verde (predeterminado)

• El contorno de la celda es de color azul (predeterminado)

• Cuando se mueve el puntero sobre el borde de una celda, éste cambia a rojo para indicar la celda sobre la que se encuentra.(predeterminado)

Nota: Puede cambiar los colores predeterminados de tabla en la Categoría Diseño de Preferencias.

Page 105: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Moviendo o cambiando de tamaño las celdas

Para mover o cambiar el tamaño de una celda, siga estos pasos:

1. Haga clic en el borde rojo para seleccionar la celda.

2. Arrastre los selectores que aparecen para cambiar el tamaño de la celda

3. Arrastre el borde de la celda (no el selector) para mover la celda.

Nota: Las celdas no pueden solaparse.

Puede utilizar las teclas de flecha para mover la celda seleccionada de píxel en píxel. Mantenga presionada la tecla mayús. y utilice las teclas de flecha para moverla de 10 en 10 píxeles.

Nota: También puede pulsar la tecla Control (Windows) o Comando (Macintosh) y hacer clic dentro de una celda para mostrar los selectores de cambio de tamaño.

Tablas anidadas Puede dibujar una tabla dentro de otra tabla para crear una tabla anidada. Una vez creada la tabla, lleve a cabo las siguientes operaciones para anidar una tabla dentro de otra existente:

1. Haga clic en el botón Dibujar tabla de diseño en la categoría Diseño de la barra Insertar y el puntero se convertirá en cruz.

2. Desplace el puntero hasta una zona gris dentro de la tabla existente y arrástrelo para crear la tabla anidada.

Page 106: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Tablas anidadas

La vista de disposición permite dibujar una tabla dentro de otra tabla, pero no dentro de una celda concreta de la tabla.

Nota: La tabla aparece con un fondo gris, mientras que la celda aparece con un fondo blanco. Si intenta dibujar una tabla dentro de una celda (dentro de una zona blanca), Dreamweaver muestra el símbolo universal No indicando que no se no puede dibujar una tabla dentro de una celda. Se trata de una restricción de Dreamweaver, no de HTML. Si necesita insertar una tabla dentro de una celda, debe cambiar al modo estándar para poder insertarla.

Usando capas para la disposición Las capas son una característica del HTML Dinámico soportada por los navegadores de versión 4.0 o superiores. Son contenedores rectangulares de contenido HTML que puede

Page 107: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

situar en una posición exacta de la ventana del navegador. Las capas pueden contener:

• Texto

• Imágenes

• Tablas

• Otras Capas.

Cualquier cosa que puede colocar en un documento HTML puede ser insertado dentro de una capa.

Soporte por los Navegadores Web

En otras herramientas de desarrollo, puede haber visto como se le llaman “divs,” una indicación de que las capas son creadas con la etiqueta an <div>. Las siguientes versiones de navegador soportan las capas creadas con la etiqueta <div>:

• Internet Explorer 4.0 y superior

• Netscape Navigator 4.0 y superior

Las versiones Navigator 4.x también admiten capas creadas mediante las etiquetas no estándar LAYER e ILAYER. No obstante, Netscape no incorporó esa compatibilidad en las versiones posteriores del navegador, por lo que no se recomienda el uso de dichas etiquetas.

Las versiones anteriores a la 4.0 de Internet Explorer y Netscape Navigator muestran los contenidos que están dentro de las capas pero no posicionan la capa. Los contenidos de la capa aparecen en el punto de la página donde se encuentra el código; por ejemplo, si el código de la capa está al comienzo de la página, entonces los contenidos de esta capa aparecerán al comienzo de la página en aquellos navegadores que no soportan el uso de capas.

Creando capas Elija la categoría Diseño de la barra Insertar. Debe tener activada la vista Estándar para crear capas. Entonces puede hacer cualquiera de lo siguiente:

• Haga clic en Dibujar Capa en la categoría Diseño de la barra Insertar y después dibuje una capa arrastrando con el ratón, del mismo modo que dibuja rectángulos en un programa de dibujo.

• Elija Menú Insertar Capa para situar una capa en la página, utilizando el ancho y alto que esta configurado en las Preferencias. .

Page 108: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Opción Dibujar Capa en la categoría Diseño de la barra Insertar

El resultado en vista diseño es una sencilla caja:

Capa Nueva

Nota: Puede crear capas de manera consecutiva. Mantenga pulsado la tecla Control (Windows) o Command (Macintosh) mientras dibuja sus capas. Podrá entonces continuar dibujando capas mientras tenga pulsada la tecla Control o Command .

Después de crear una capa puede agregarle contenido simplemente colocando el punto de inserción dentro de la capa, después puede agregar contenido del mismo modo que lo hace en la página.

Seleccionando una capa

Debe seleccionar una capa para poder realizar cambios en ella. Existen varias formas de seleccionar una capa:

• Haga clic en el manejador de la capa que aparece en la esquina superior izquierda después de hacer clic dentro de la capa.

• Presione Ctrl+Mayús (Windows) o Comando+Mayús (Macintosh) y haga clic dentro de la capa.

• Haga clic en cualquier borde de la capa.

• Haga clic en cualquier lugar del borde de la capa.

Una vez que ha seleccionado la capa, verá la capa seleccionada con manejadores de cambio de tamaño.

Page 109: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Usando el panel de capas El panel Capas ofrece una representación gráfica de las capas en la página. Puede utilizarlo para seleccionar una capa, asignar un nombre a una capa, cambiar la visibilidad de la capa, cambiar el orden de apilamiento o seleccionar múltiples capas en la página. Conforme cree capas, la última que cree se situará sobre todas las demás.

Para acceder al panel de capas, elija Menú Ventana Capas o presione la tecla F2.

Panel de capas

Manipular las propiedades de la capa Una vez que una capa esta creada y seleccionada, puede modificar distintas propiedades de la capa en el Inspector de Propiedades. Puede, por ejemplo:

• Cambiar de nombre una capa asignándole un Nuevo nombre en el valor ID de capa del Inspector de Propiedades. Dreamweaver asigna nombres automáticos a las capas (layer1, layer2, etc…), pero puede necesitar asignarle un nombre más significativo y único. No utilice espacios o caracteres especiales.

• Posicionar una capa arrastrándola por la pantalla, o situarla de forma precisa especificando los valores de Iz (izquierda) y Sup(Superior).

• Cambiar de tamaño una capa arrastrando los manejadores de cambio de tamaño o ajustando los valores de An (Anchura) y Al (Altura).

• Añadir un color de fondo para la capa eligiendo un color de la caja de color Col. Fondo.

Configurando propiedades de la capa

Usando el comportamiento Reparación cambio de tamaño de Netscape

Page 110: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Netscape (versión 4.7) tiene un problema con el texto de las capas cuando se cambia el tamaño de la ventana del navegador: la capa cambia de forma cuando cambia el tamaño de la ventana del navegador. Si utiliza capas para controlar el diseño de la página, no le parecerá adecuado el resultado que ofrece Netscape cuando el usuario cambia el tamaño de la ventana del navegador.

De forma predeterminada, cuando inserta alguna capa, se agrega un código javascript que repara este problema.

Puede resolver el problema eligiendo Menú Comandos Agregar/Quitar reparación de cambio de tamaño de Netscape. También puede eliminar este código Javascript del mismo modo.

Nota: Puede cambiar sus preferencias para insertar la reparación del código cuando inserte una capa. Elija Menú Edición Preferencias o Dreamweaver Preferencias en Macintosh OS X, seleccione la categoría Capas y elija Compatibilidad con Netscape 4.

Ocultar y mostrar capas Puede cambiar la visibilidad de una capa.. Por defecto, las capas son visibles en la ventana del navegador. Puede, por ejemplo, hacer una capa invisible para mostrarla posteriormente en respuesta a la interacción con el usuario. Puede hacer que aparezca, por ejemplo, un submenú cuando un usuario haga clic en un elemento del menú.

Puede cambiar la visibilidad de una capa en respuesta a una acción del usuario mediante el uso de un comportamiento.

Comprender los comportamientos

Los comportamientos permiten añadir interactividad a las páginas. Hacen posible que la página cambie de alguna forma en respuesta a una acción del usuario. Dreamweaver MX añade código JavaScript en diversas partes de la página para que funcionen los comportamientos.

El uso de scripts (normalmente JavaScript) para manipular la apariencia de objetos HTML se denomina HTML dinámico o DHTML.

Entre los comportamientos más utilizados figuran los siguientes:

• Validación de los datos introducidos por un usuario en un campo de formulario.

• Apertura de una página en una nueva ventana del navegador

• Cambio de una imagen por otra (efecto de sustitución o rollover)

• Visualización de mensajes y menús emergentes

• Conversión de un menú de formulario en un menú de navegación compacto

• Visualización de texto que inicialmente se encuentra oculto

Compatibilidad con los navegadores Web Netscape y Microsoft incorporaron DHTML casi simultáneamente cuando publicaron la

Page 111: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

versión 4.0 de sus respectivos navegadores. El tratamiento dado por Netscape y Microsoft al DHTML es distinto, por lo que ha sido difícil lograr efectos DHTML compatibles con todos los navegadores. Al utilizar los comportamientos DHTML incorporados en Dreamweaver, la compatibilidad con los distintos navegadores se resuelve automáticamente.

Ocultar las capas en la vista de diseño Puede ocultar una capa ya en el navegador y en la vista de diseño de Dreamweaver, ajustando la propiedad visibilidad en el panel Capas.

Haga clic en la columna de la izquierda del nombre de la capa para cambiar su visibilidad.

• Si el ojo está abierto, significa que la capa es visible.

• Si el ojo está cerrado, la capa es invisible.

• Si no hay ningún icono, la capa padre determina la visibilidad de la capa. Esto es válido para capas anidadas.

• Para cambiar la visibilidad de todas las capas al mismo tiempo, haga clic en el icono de ojo situado en la parte superior de la columna.

Panel capas

Una capa invisible no se mostrará en la vista de diseño. Utilice el panel de capas para mantener estas capas ocultas y seleccionarlas.

Nota: Utilice la categoría Capas en Preferencias para establecer la visibilidad predeterminada para las nuevas capas.

Page 112: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Añadir el comportamiento Mostrar/Ocultar Capas

La acción Mostrar-Ocultar capas muestra u oculta una o varias capas en respuesta a una acción del usuario. Puede emplear esta opción para mostrar información acerca de un objeto de la página cuando el usuario pasa el puntero sobre él o hace clic en un botón.

Para añadir la acción Mostrar-Ocultar capas:

1. Seleccione el elemento para la acción (por ejemplo una imagen o un vínculo). También puede hacerlo seleccionando la etiqueta <body>

2. En el grupo de paneles etiquetas, haga clic en el panel Comportamientos o elija Menú Ventana Comportamientos Seleccione Mostrar-Ocultar capas del menú emergente Acciones.

3. Seleccione la capa de la lista Capas con nombre en el cuadro de diálogo Mostrar-Ocultar capas. Haga clic en Mostrar u Ocultar. Haga clic en Aceptar.

Cuadro de diálogo Mostrar-Ocultar Capas

Lanzando el comportamiento Después de añadir un comportamiento a un objeto, necesitará especificar un evento que dispare la acción del comportamiento. El evento predeterminado asignado por Dreamweaver puede no ser el deseado para conseguir sus propósitos. Por esa razón, puede cambiar un evento, seleccionándolo en el panel de Comportamientos y eligiendo un nuevo evento en el menú emergente de Eventos que aparecerá.

Page 113: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Eventos para Mostrar/Ocultar Capas

Convertir Tablas a Capas

Puede utilizar Dreamweaver para convertir un diseño creado con tablas a otro que use capas. Para hacerlo utilice el cuadro de diálogo Convertir Tablas a Capas que puede abrir eligiendo Menú Modificar Convertir Tablas a Capas.

Cuadro de diálogo Convertir Tablas a capas

Las opciones para convertir tablas a capas incluyen:

• Evitar solapamiento de capas limita las posiciones de las capas cuando se crean, mueven y cambian de tamaño para evitar que se solapen.

• Mostrar el panel de capas, muestra el panel de capas.

• Mostrar cuadrícula y Ajustar a cuadrícula permiten utilizar una cuadrícula para facilitar la colocación de las capas.

Las tablas se convertirán en capas. Las celdas vacías no se convierten en capas a menos que tengan colores de fondo.

Nota: los elementos de la página que estaban situados fuera de las tablas también se colocarán en capas.

Page 114: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Convertir Capas en Tablas Las capas son problemáticas para los sitios Web que deben cumplir con las líneas guía de Accesibilidad. Si desea ofrecer una versión alternativa con tablas de su sitio Web, puede convertir sus capas a tablas.

Para hacer esto utilice el cuadro de diálogo Convertir Capas a Tablas eligiendo Menú Modificar Convertir Capas a Tablas. Aparecerá el siguiente cuadro de diálogo:

Convertir capas en tablas

Las opciones de Diseño de Tabla incluyen:

• Más preciso, crea una celda para cada capa, junto con las celdas adicionales necesarias para conservar el espacio entre capas..

• Mínimo: Contrae celdas vacías que se son de ancho menos que los píxeles especificados y las capas deben alinearse si se sitúan a menos de la distancia especificada en píxeles.

• Utilizar GIF transparentes rellena la última fila de la tabla con GIF transparentes. De este modo se garantiza que la tabla aparezca con las mismas anchuras de columnas en todos los navegadores. Cuando esta opción está activada, no se puede editar la tabla resultante arrastrando sus columnas. Cuando la opción está desactivada, la tabla resultante no contendrá GIF transparentes, pero los anchos de las columnas pueden variar según el navegador.

• Centrar en página centra la tabla resultante en la página..

Las Opciones de herramientas de diseño incluyen:

• Prevenir solapamiento de capas

• Mostrar panel de capas

• Mostrar cuadrícula

• Ajustar a cuadrícula

Page 115: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Resumen • Las Tablas pueden ser usadas para mostrar datos en un formato parecido a hoja de cálculo o para organizar la disposición del texto y gráficos sobre la página.

• Puede importar datos de hojas de cálculo, una tabla de Microsoft Word, un archivo de texto separado por comas, o separado por tabulador, y Dreamweaver los importará dentro de un formato de tabla.

• La vista Diseño de Tabla puede ser utilizada para diseñar su página usando tablas; dibujando en este modo celdas de disposición en la página fácilmente.

• El modo de tablas Ampliada puede ser usado para seleccionar fácilmente los contenidos que se encuentran en las celdas.

• Las capas puede ser usadas como alternativa para crear contenedores para elementos HTML de su sitio Web..

• Puede mostrar y ocultar capas en respuesta a los eventos del usurio, como por ejemplo: un clic del ratón.

Usando la Biblioteca y las Plantillas

Elementos de la Biblioteca del sitio Un elemento de biblioteca es un archivo especial de Dreamweaver MX que contiene una colección de elementos de página (como texto o gráficos) que pueden añadirse fácilmente a cualquier página del sitio actual. No son páginas HTML en sí, sino elementos de página reutilizables. Cuando necesite modificar el diseño de la página con elementos de Biblioteca o lo agregue a nuevas páginas, solo necesitará editar el elemento de Biblioteca en vez de las páginas individualmente.

Los elementos de Biblioteca:

• Son reutilizables y actualizables en un lugar.

• Son ideales para contenidos como encabezados de página, pies de página o barras de navegación.

• Están completamente bloqueados y no pueden ser editados en las páginas en las que se usan.

Crear elementos de Biblioteca Puede crear un elemento de biblioteca partiendo de cero, o puede crear uno seleccionado los contenidos de una página.

La Biblioteca se encuentra en el panel de Activos. Haga clic en la Categoría Biblioteca del panel de Activos y después haga clic en el botón Nuevo Elemento de Biblioteca en la parte inferior del panel Activos.

Page 116: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Creado un Nuevo elemento de Biblioteca

Puede también seleccionar objetos, y después elegir Menú Modificar Biblioteca Agregar Objetos a Biblioteca, o arrastre los objetos seleccionados de la ventana del Documento a la mitad inferior del panel de Activos (con categoría Biblioteca seleccionada) para crear un nuevo elemento de Biblioteca.

Nuevos elementos de Biblioteca

El nuevo elemento se añade a la lista con el nombre Untitled. Después, puede cambiar el nombre del elemento para que refleje su contenido.

Una vez que seleccione contenido y cree un elemento de Biblioteca, el contenido es resaltado en el color configurado en las preferencias (el color predeterminado es el Amarillo) para expresar que es un elemento de biblioteca y no puede ser modificado en la página.

Nota: Si tiene un estilo aplicado al contenido que esta convirtiendo en elemento de Biblioteca, verá un mensaje de alerta advirtiendo que la selección podría no tener el mismo aspecto en otros documentos porque las especificaciones del estilo no se incluyen con elementos de biblioteca. Para asegurarse de que el estilo es incluido, utilice hojas de estilos externas y recuerde vincular en todos los documentos que usen los estilos.

Localización de almacenamiento

Los elementos de biblioteca (con extensión .lbi) se guardan en la carpeta Library y se almacenan en la carpeta del sitio. Dreamweaver MX añade la carpeta Library a la carpeta del sitio si todavía no existe. La carpeta Library siempre debe estar al nivel de la raíz.

Visualizando elementos de la Biblioteca

Para ver los elementos de biblioteca existentes en su sitio, haga clic en la categoría Biblioteca del panel Activos y después seleccione el elemento en la lista. En la parte superior del panel Activos aparecerá una vista previa del elemento seleccionado.

Page 117: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Elementos de Biblioteca en el panel de Activos

Colocando los elementos de la biblioteca en la página Para colocar un elemento de biblioteca en una página puede seleccionar ele elemento de biblioteca a insertar y hacer clic en el botón insertar de la parte inferior izquierda del panel de activos, pero también puede arrastrarlo desde el panel de activos a la página.

El contenido de la biblioteca aparece en la página, resaltado en amarillo. No puede modificar directamente nada que forme parte del elemento en la página del documento.

Elemento de Biblioteca resaltado

Modificar los elementos de la biblioteca Para modificar un elemento de biblioteca, selecciónelo en la lista de elementos de la categoría Biblioteca en el panel Activos y, a continuación, haga clic en Editar. El elemento de biblioteca se abre en una ventana de documento donde puede realizar los cambios.

Page 118: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Editar un elemento de Biblioteca

Como alternativa, puede seleccionar el elemento de biblioteca en la página y utilizar el Inspector de Propiedades para ver las propiedades del elemento. La opción Origen muestra el nombre del elemento de Biblioteca. Haga clic en Abrir para editar el elemento de Biblioteca.

Actualizaciones inmediatas Cuando guarda el elemento de biblioteca, Dreamweaver MX comprueba todos los documentos que utilizan dicho elemento y pregunta si desea actualizar los archivos. Se actualizan y se guardan todos los archivos que contienen el elemento de biblioteca y que no están abiertos en ese momento. Los archivos que están abiertos se actualizan, pero no se guardan.

Cuadro de diálogo Actualizar Elementos de Biblioteca

Si pulsa actualizar, aparecerá el cuadro de diálogo Actualizar Páginas donde puede elegir que y donde actualizar.

Page 119: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Actualizar Páginas

Actualizaciones aplazadas Un sitio grande con muchos archivos podría necesitar algún tiempo para actualizar todos los archivos y tal vez decida actualizarlos cuando tenga tiempo libre.

Para actualizar el sitio con el nuevo elemento de biblioteca:

1. Seleccione el elemento en el panel Activos.

2. Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Actualizar sitio en el menú contextual.

3. Si sólo desea actualizar la página actual, elija Actualizar página actual en el menú contextual.

Separando elementos del original Si desea evitar que se actualice un caso concreto de un elemento de biblioteca, puede separar el elemento de la biblioteca seleccionando el elemento y haciendo clic Separar del Original en el Inspector de Propiedades.

Botón Separar Del Original

Nota: También puede hacer clic dentro del elemento en la página con el botón derecho del ratón (Windows) o mientras mantiene presionada la tecla Control (Macintosh) y después elegir Separar del original en el menú contextual.

Recibirá una advertencia que le informará de que el contenido separado no estará más vinculado al documento del original.

Page 120: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Advertencia al separar un elemento del original

Si desea insertar un elemento de biblioteca que esta separado, mantenga pulsado Control (Windows) o Option (Macintosh) y arrastre el elemento de biblioteca desde el panel de activos al documento.

Volver a crear elementos de la Biblioteca Si borra un elemento de biblioteca del panel Activos, puede volver a crearlo a partir de los documentos que utilizaban ese elemento. Seleccione el elemento en el documento y después haga clic en Volver a crear, en el inspector de propiedades.

Volver a crear elementos de Biblioteca

Crear Plantillas del Sitio Cuando el sitio es grande o hay varias páginas que comparten un diseño común, tal vez desee crear una plantilla. Una plantilla es una página inicial que contiene los elementos de diseño para cada página de su sitio. Puede crear plantillas y después usar esas plantillas para crear las páginas de su sitio. Para ser útiles, las plantillas pueden contener:

• Completo diseño de la página – con colores, disposición, y una hoja de estilo externa.

• Elementos de navegación común para todas las páginas de su sitio.

• Regiones de la página comunes, como puede ser un pie de página.

Con una plantilla puede actualizar el aspecto del sitio, cambiando varias páginas en pocos minutos.

Regiones de las Plantillas Las plantillas suelen tener cualquier tipo de las siguientes regiones:

• Regiones Editables, donde los desarrolladores y proveedores de contenidos colocan los contenidos del sitio.

• Regionales Opcionales, que pueden mostrarse o no basándose en una condición.

• Regiones repetidas que puede mostrar varios elementos, como podría ser un conjunto de noticias.

Page 121: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cualquier otro contenido en la página que no sea una de estas regiones se considera bloqueado. Por ejemplo, si tiene una sección de navegación en la página, con gráficos para los vínculos, puede definirlos en la plantilla y después “bloquearlos” en la página. Si cambian los vínculos, basta con realizar el cambio en la plantilla y se actualizan todas las páginas diseñadas con la plantilla.

Crear Plantillas Las plantillas que se crean aparecen en la lista del panel Activos. Puede crear una plantilla desde el principio o bien utilizar una página HTML existente y guardarla como plantilla.

Para crear una plantilla a partir una página HTML existente, elija Menú Archivo Guardar como plantilla y asigne un nombre a la plantilla.

Para crear un nueva plantilla:

Haga clic en la categoría Plantillas en el panel Activos.

Haga clic en el botón Nueva plantilla situado en la parte inferior del panel o bien, en el menú Opciones del panel Activos situado en la parte superior derecha del panel, elija Nueva plantilla.

Asigne un nombre a la plantilla

Añadir una nueva plantilla

Haga clic en Editar para modificar las regiones de la plantilla.

Localización del almacenamiento Los archivos de plantillas (con extensión .dwt) se guardan en la carpeta Templates y se almacenan en la carpeta del sitio. Dreamweaver MX añade la carpeta Templates a la carpeta del sitio si todavía no existe. La carpeta Templates siempre debe estar al nivel de la raíz.

Definir Regiones Editables

Page 122: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Por definición, todas las regiones de una plantilla están bloqueadas a menos que se creen regiones editables. Puede cambiar tanto las regiones editables como las regiones bloqueadas de una plantilla. En una página creada a partir de una plantilla, sólo se pueden cambiar las regiones editables.

Para crear una región editable:

Seleccione la zona de la página que desea designar como editable.

Elegir Menú Insertar Objetos de Plantilla Región editable.

En el cuadro de diálogo Nueva región editable, introduzca un nombre exclusivo para la región. No utilice caracteres especiales en el nombre de la región.

Nueva Región Editable

Una zona resaltada dentro de la región muestra el nombre de la región. Si no pyuede ver los nombres de las regiones, elija Menú Ver ayudas Visuales Elementos Invisibles.

Región editable en la página

Nota: También puede hacer clic con el botón derecho del ratón (Windows) o manteniendo presionada la tecla Control (Macintosh) en la zona y elegir Plantillas Nueva región editable en el menú contextual Como alternativa puede elegir Región Editable en el menú de plantillas de la categoría común en la barra Insertar.

Nota: No puede diseñar una sola región editable usando varias celdas de tabla. Si necesita que varias celdas sean editables, entonces deberá hacer toda la tabla editable, o crear una

Page 123: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

zona editable para cada celda. Si intenta seleccionar varias celdas dentro de una tabla para hacerlas editables, la tabla completa se convertirá en región editable.

Eliminar Regiones Editables

Puede eliminar una región editable en una plantilla y de esa manera bloquear esa región para todas las páginas basadas en la plantilla. Seleccione la región y después Menú Modificar Plantillas Quitar Formato de Plantilla.

Si elimina una región editable de la plantilla con la que se han construido otras páginas, esa región se convierte al contenido original de la Plantilla. Podrá tener la opción de almacenar el contenido desplazado en otra región.

Códigos de color

Puede cambiar tanto el color de las regiones resaltadas como el color de las zonas bloqueadas. El color de la región editable aparece en la propia plantilla y en los documentos basados en ella; el color de la región bloqueada aparece solamente en los documentos basados en la plantilla. Elija Menú Edición Preferencias o Dreamweaver Preferencias (Macintosh OS X) y seleccione la categoría Resaltado.

Preferencias de resaltado para las regiones editables de Plantillas

Usar Plantillas Después de crear la plantilla puede comenzar a crear las páginas basadas en ella. Las únicas zonas de la página que se pueden cambiar son las partes definidas como editables.

Para crear un nuevo documento basado en una plantilla:

1. Elija Menú Archivo Nuevo.

2. Haga clic en la ficha Plantillas del cuadro de diálogo Nuevo documento. (El nombre del cuadro de diálogo cambia a Nuevo desde plantilla).

Page 124: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

3. Seleccione de la lista la plantilla que desea utilizar.

4. Haga clic en crear.

Nuevo Archivo usando plantillas

Utilizando este método le permite usar una plantilla de cualquier sitio definido. Para buscar una plantilla sólo en el sitio actual, selecciónela en la categoría Plantilla del panel Activos y, a continuación, en el menú Opción del panel Activos, elija Nueva de plantilla.

Page 125: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Nuevo archivo usando plantillas en el menú de opciones

Nota: También puede arrastrar una plantilla desde el panel Activos sobre un nuevo documento en blanco para aplicarla.

Modificar Plantillas El ahorro real de tiempo se produce cuando hay que aplicar cambios a todas las páginas que se crearon con la plantilla. Sin plantillas, habría que modificar cada página; con plantillas, basta con modificar una y se actualizan todas las páginas creadas con ella.

Al guardar cambios en la plantilla, el cuadro de diálogo Actualizar archivos de plantilla muestra una lista de todos los archivos creados a partir de esta plantilla.

Page 126: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Actualizar archivos de plantilla

Al hacer clic en Actualizar, esos archivos se actualizan con los cambios. Tras realizar las actualizaciones, aparece una lista de cambios en el cuadro de diálogo Actualizar páginas. Haga clic en Cerrar para salir.

Cuadro de diálogo Actualizar Páginas

Nota: Para guardar cambios en una plantilla, utilice el comando Guardar. Si utiliza el comando Guardar como plantilla, vuelve a crearse la plantilla y esta nueva plantilla no se adjunta a las páginas existentes..

Aplicar una Plantilla a una página existente Una vez creada la plantilla, puede aplicarla a otras páginas para actualizar y cambiar rápidamente su diseño. Cuando se aplica una plantilla, Dreamweaver intenta establecer una correspondencia entre el contenido existente y las regiones de la plantilla.

Para aplicar una plantilla a una página:

1. Abra la página a la que desea aplicar la plantilla.

2. Seleccione la plantilla que desea utilizar en el panel Activos y después haga clic en el botón Aplicar de la parte inferior del panel.

Page 127: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

También puede arrastrar la plantilla a la página o bien hacer clic en la plantilla con el botón derecho del ratón (Windows) o manteniendo presionada la tecla Control (Macintosh) y hacer clic en Aplicar, en el menú contextual.

Aplicando una Plantilla

Nombres de regiones no coincidentes Si Dreamweaver MX no puede establecer la correspondencia del contenido, aparece un cuadro de diálogo que permite hacerlo de forma manual. .

Nombres de regiones no coincidentes: asignación de contenido a las regiones

Page 128: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Resumen

• La Biblioteca es una colección de elementos de página que pueden ser reutilizados fácilmente en múltiples páginas.

• Los ítems (elementos) de la Biblioteca pueden ser modificados y los cambios se aplican a todas aquellas páginas que utilicen los elementos de Biblioteca modificados.

• Una plantilla puede ser utilizada para aplicar el mismo diseño a un sitio completo o un conjunto de páginas de su sitio Web.

• Las plantillas contienen regiones editables y bloqueadas.

• Las regiones editables pueden ser modificadas en cualquier documento que use la plantilla.

• Las regiones bloqueadas no pueden ser modificados en aquellos documentos que usen la plantilla.

• Las plantillas pueden ser usadas para crear nuevas páginas y que puedan ser aplicadas a las páginas existentes.

Crear Formularios

Conocer los Formularios Los formularios son partes esenciales de los sitios Web más profesionales, ya que ofrecen el único modo, en HTML, para que los usuarios envíen datos al sitio. Los formularios se utilizan para diversos fines, entre los que se encuentran::

• Pedidos de productos

• Registro de Usuarios

• Especificación de los criterios de búsqueda en una base de datos

• Administración de bases de datos en sistemas de Intranet y Extranet

Los formularios incluyen diversos objetos que permiten a los usuarios introducir datos o seleccionar opciones, además de un botón Enviar para el envío de los datos al servidor.

Crear un formulario

Para añadir un formulario, primero se inserta una etiqueta de formulario en la página. El formulario incluirá objetos en los que los usuarios introducen información, y especificará lo que debe hacerse con los datos.

Para insertar un formulario, elija Menú Insertar FormularioFormulario o, en la categoría Formularios de la barra Insertar, haga clic en el botón Formulario.

Page 129: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Botón Formulario en la barra Insertar

Las líneas de puntos en rojo definen visualmente el área del formulario en la ventana Documento. Debe colocar todos los elementos del formulario dentro de la zona de puntos en rojo. Las líneas de puntos se amplían conforme se coloca contenido en el área del formulario.

Líneas punteadas rodeando el área del formulario

Propiedades de Formulario Para seleccionar el formulario puede:

• Hacer clic sobre la línea punteada roja

• Haga clic en cualquier parte dentro del área del formulario y después haga clic en <form> en el selector de etiquetas.

Nota: Cuando se insertan formularios en la vista de diseño de Dreamweaver se crean automáticamente un nombre de formulario y un atributo ID para la etiqueta de formulario. El nombre y atributo ID del formulario generado en primer lugar es form1, por lo que el selector de etiquetas mostrará la etiqueta form y su ID precedida de un signo #, de este modo <form#form1>. Si crea más formularios se incrementará el numero final de la ID, por ejemplo form2, form3 y así sucesivamente.

Selector de etiquetas: seleccionando el formulario

El inspector de propiedades muestra las propiedades del formulario.

Page 130: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Propiedades de formulario

Las propiedades de formulario se describen a continuación:

Propiedad Descripción

Nombre del formulario

Se utiliza para la validación del formulario con JavaScript. El nombre debe ser único en la página.

Acción Ruta a la página o el script que procesa el formulario.

Método Determina el modo de transmitir los datos del formulario al servidor.

Enctype Especifica el tipo de codificación MIME de los datos enviados.

Destino Especifique la ventana en la que se muestran los datos devueltos por la aplicación que procesa el formulario.

Clase Selector de Clase CSS usado para aplicar un formato de diseño al formulario.

Usando Objetos de Formulario Los objetos se utilizan para que el usuario pueda introducir datos en el formulario. Puede permitir que los usuarios introduzcan datos o efectúen selecciones de las siguientes formas:

• Campos de texto – para introducir caracteres alfanuméricos

• Casillas de verificación – para seleccionar varias opciones

• Botones de opción – para seleccionar una opción entre varias

• Listas/menús – para seleccionar varias opciones en una lista de desplazamiento o una única opción en un menú emergente

• Botones – para llevar a cabo una acción

Hay otros tipos de objetos de formulario, pero éstos son los más utilizados.

Los objetos de formulario se pueden insertar a través del menú Insertar Formulario, y después elegir uno de los objetos del submenú. También puede seleccionar la categoría Formularios de la barra Insertar y después hacer clic en uno de los botones del panel.

Categoría Formularios en la barra Insertar

Page 131: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Campos de Texto Puede permitir que los usuarios introduzcan texto en uno de estos elementos:

• Texto – líneas individuales de texto como un nombre o una dirección de e-mail

• Área de texto – varias líneas de texto, por ejemplo, un comentario.

• Contraseña – tipo especial de texto donde el texto que se introduce se sustituye por asteriscos o viñetas a medida que el usuario escribe en el

Campo de texto, contraseña y área de texto en un formulario

Puede insertar un objeto de campo de texto mediante el menú Insertar Formulario Campo de Texto o bien, en la categoría Formularios de la barra Insertar, haciendo clic en el botón Campo de texto.

Campo de texto en la barra Insertar

También puede elegir Insertar Formulario Área de Texto para crear un objeto de texto multilínea.

Use el inspector de propiedades para cambiar las propiedades del campo.

Propiedades de campo de texto

La siguiente tabla muestra otras propiedades para el objeto de texto.

Propiedad Descripción

Campo de Texto El nombre para el campo de texto

Ancho Car. Número máximo de caracteres visibles en el campo

Page 132: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Car. máx. (Campos de Texto y Contraseña)

Número máximo de caracteres que puede escribir el usuario en el campo

Tipo

• Una línea

• Varias líneas

• Contraseña

Clase Selector de clase CSS para aplicar formato de diseño al campo de texto

Val. Inicial Texto predeterminado que aparece en el campo cuando se carga la página

Líneas Num. (Área de texto)

Número máximo de líneas visibles de texto

Ajuste (Área de texto)

• Predeterminado (predeterminado por el navegador)

• Desactivado (el texto de desplaza hacia la izquierda a menos que el usuario presione Intro o Retorno)

• Virtual (las líneas de texto se ajustan a la ventana del navegador; los datos enviados no contienen saltos de línea)

• Físico (las líneas de texto se ajustan a la ventana, los códigos de control de salto de línea están incrustados en el texto enviado como puntos de ajuste)

Sugerencias de uso de campos de texto en formularios Las siguientes propiedades pueden ser críticas para el proceso de los datos:

• Nombre del campo: si los datos se van a enviar a una base de datos, el nombre de los campos debe coincidir con el nombre del campo de la base de datos..

• Car. máx: si los datos se van a enviar a una base de datos, el valor de la propiedad Car. máx debe coincidir con la longitud del campo correspondiente en la base de datos. .

• Campos de contraseña: la contraseña se oculta únicamente en la ventana del navegador. Cuando se envía el formulario, la contraseña se transmite en texto normal y puede ser interceptada. Cuando se teme por la seguridad, como en los sitios de comercio electrónico, la información debe enviarse a través de SSL (Secure Sockets Layer).

Cuando se crean objetos de campo de texto, Dreamweaver MX utiliza las siguientes

Page 133: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

etiquetas HTML::

Texto: <input type=”text”>

Área de texto: <textarea name="textarea"></textarea>

Contraseña: <input type=”password”>

Casillas de Verificación

Las casillas de verificación permiten que los usuarios seleccionen una o varias opciones de un grupo de opciones relacionadas. El usuario puede activar o desactivar una casilla de verificación.

Ejemplos de Casillas de Verificación

Para insertar un objeto de casilla de verificación, seleccione Insertar Formulario Casilla de Verificación o bien, en la categoría Formularios de la barra Insertar, haga clic en el botón Casilla de verificación.

Casilla de Verificación en la barra Insertar

Dreamweaver proporciona un nombre predeterminado y exclusivo, el cual puede modificar en el inspector de propiedades. Este nombre debe ser exclusivo entre los objetos de formulario de la página.

Propiedades de la Casilla de Verificación

Las demás propiedades son las siguientes:

Propiedad Descripción

Nombre de casilla

Un nombre para la casilla de verificación.

Valor Activado Valor enviado si se selecciona la casilla de verificación

Estado inicial

• Activada (la casilla de verificación está activada inicialmente)

• Desactivado (la casilla de verificación no está activada)

Page 134: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Clase Selector de clase CSS para aplicar formato de diseño al objeto de formulario

Sugerencias de uso de casillas de verificación Las siguientes propiedades podrían ser críticas para el proceso de los datos:

• Valor activado: en muchos casos, una aplicación realiza pruebas para ver si la casilla estaba activada, pero tal vez espere un valor concreto.

• Si se utilizan varias casillas de verificación conjuntamente para permitir varias respuestas en cuestionarios y otras preguntas, las casillas de verificación de ese grupo deben tener el mismo nombre, pero distintos valores activados.

La creación de una casilla de verificación genera la etiqueta HTML: <input type=″checkbox″>

Botones de Opción

Los botones de opción se utilizan cuando el usuario debe seleccionar una de las opciones de un grupo de opciones. Generalmente, los botones de opción se utilizan en grupos. Si sólo hay un botón, no hay forma de que el usuario anule la selección de la opción. Si el usuario selecciona un botón de opción, los demás botones de opción del grupo se desactivan automáticamente.

Ejemplo de botones de opción

Para insertar un objeto de botón de opción, seleccione Menú Insertar Formulario Botón de opción o bien, en la categoría Formularios de la barra Insertar, haga clic en Botón de opción.

Botón de Opción en la Barra Insertar

Dreamweaver proporciona un nombre predeterminado y exclusivo, que conviene que modifique. Los botones de opción del mismo grupo deben tener el mismo nombre, o no funcionarán correctamente.

Page 135: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Propiedades del Botón de Opción

Las demás propiedades del botón de opción son las siguientes:

Propiedad Descripción

Botón de opción Nombre del grupo de botones de opción.

Valor Activado Valor enviado si se selecciona el botón de opción

Estado Inicial

• Activada (el botón de opción está activado inicialmente)

• Desactivado (el botón de opción no está activado inicialmente)

Clase Selector de clase CSS para aplicar formato al objeto

Grupo de botones de Opción También puede insertar un grupo de botones de opción si selecciona Menú Insertar Formulario Grupo de opción o bien, en la categoría Formularios de la barra Insertar, haga clic en Grupo de opción.

Grupo de Botones de Opción en la barra Insertar

En el cuadro de diálogo Grupo de opciones, escriba el nombre del grupo de botones de opción y después introduzca la etiqueta y el valor de cada botón. Elija entre saltos de página o tablas para separar los botones de opción. Si desea que los botones estén en la misma línea, elija saltos de línea y después quite los saltos de la página.

Page 136: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo de Grupo de botones de opción

La creación de un botón de opción genera la etiqueta HTML: <input type=″radio″>

Campo Lista/menú

Una lista/menú permite a los usuarios elegir de una lista de desplazamiento o de un menú. El menú limita a los usuarios a una selección, pero pueden elegir una o más opciones de una lista si presionan la tecla Control mientras hacen clic en varios elementos. (Se trata de una opción del navegador, pero tanto Netscape Navigator como Microsoft Internet Explorer utilizan Control en las plataformas Windows y Macintosh.)

Ejemplo de elección en Menú

Para insertar un objeto de lista/menú, seleccione Insertar Formulario Lista/menú o bien, en la categoría Formularios de la barra Insertar, haga clic en el icono Lista/menú.

Lista/Menú en la barra Insertar

Dreamweaver inserta un objeto de menú en el formulario. El inspector de propiedades permite cambiar el objeto de menú a una lista.

El cuadro de texto situado a la izquierda del inspector de propiedades contiene el nombre de la lista/menú. Dreamweaver proporciona un nombre predeterminado y exclusivo, que conviene que modifique.

Page 137: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Propiedades Lista/Menú

Para cambiar de un menú a una lista, seleccione Lista en la opción Tipo. Las demás propiedades son las siguientes:

Propiedad Descripción

Tipo Indica si se trata de una lista o de un menú

Altura (sólo Listas) Elementos mostrados simultáneamente

Selecciones (sólo Listas)

Si se activa Permitir múltiples selecciones, el usuario podrá efectuar varias selecciones en la Lista

Seleccionado Inicialmente

El elemento seleccionado estará activado cuando se abra la página

Note: Sólo se puede elegir inicialmente un elemento de lista/menú en los menús y listas que no permiten múltiples selecciones

Clase Selector de clase CSS para aplicar formato al objeto

Valores de Lista Para añadir elementos a la lista o al menú, haga clic en el botón Valores de lista del inspector de propiedades. En el cuadro de diálogo Listar valores, introduzca la etiqueta que desea mostrar al usuario y el valor que se envía si el usuario selecciona esa opción. Utilice los botones más (+) y menos (-) para añadir o quitar elementos, y las flechas arriba y abajo para mover el elemento seleccionado hacia arriba o hacia abajo en la lista.

Cuadro de diálogo Valores de Lista

Page 138: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Sugerencias para el uso de listas Cuando utilice listas que permiten múltiples selecciones, indique algo que sugiera que se pueden seleccionar varios elementos e instrucciones sobre cómo realizar varias selecciones. Si la lista contiene menos de cinco elementos, utilice casillas de verificación en lugar de un menú o una lista. .

La creación de una lista/menú genera las etiquetas HTML: <select name="selname"> <option value=″value″>display</option> </select>

Botones

Los botones se utilizan para enviar formularios o para restablecer todos los campos a sus valores iniciales, como se muestra en el siguiente formulario.

Formulario con botones

Para insertar un objeto de botón, seleccione Insertar Formulario Botón, o bien, en la categoría Formularios de la barra Insertar, haga clic en el objeto Botón.

Botón de Formulario en la barra Insertar

El cuadro de texto situado a la izquierda del inspector de propiedades contiene el nombre del botón. Dreamweaver proporciona un nombre predeterminado, el cual puede modificar.

Propiedades del Botón

Las demás propiedades son las siguientes:

Propiedad Descripción

Etiqueta Etiqueta de texto que aparece en el botón

Page 139: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Acción

• Enviar formulario

• Restablecer formulario

• Ninguno (los botones sin acción se utilizan para establecer vínculos con otros documentos o para ejecutar comandos JavaScript)

Clase Selector de clase CSS para aplicar formato al objeto

Sugerencias para el uso de botones Las siguientes propiedades podrían ser críticas para el proceso y el uso de los datos:

• Algunas aplicaciones de proceso de datos comprueban la existencia de un nombre de botón asociado al botón Enviar para asegurarse de que se ha enviado el formulario. Pregunte al programador de la aplicación o consulte la documentación si su botón Enviar debe tener un nombre concreto.

• A la hora de enviar formularios, muchos usuarios hacen clic por error en los botones Restablecer, lo que provoca que se pierdan los datos introducidos, situación ésta que puede llegar a ser frustrante. Por lo tanto, tal vez sea conveniente que prescinda del botón Restablecer a menos que considere que va a ser útil para el usuario. Si finalmente decide utilizar un botón Restablecer, asegúrese de que la etiqueta del mismo es clara e intente colocarlo en la página de modo que las posibilidades de que un usuario haga clic en él por error sean mínimas.

Cuando se añaden botones se genera una de las siguientes etiquetas HTML: <input type="submit" name="Enviar" value="Submit">

<input type="reset" name="Restablecer" value="Reset">

<input type="button" name="Botón" value="Button">

Procesar formularios Una vez que añade los objetos de formulario a la página, debe configurar los parámetros en el formulario para recopilar los datos una vez que el usuario hace clic en el botón Enviar. Tal vez decida procesar los datos de las siguientes formas:

• Grabarlos en una base de datos.

• Utilizarlos para proporcionar parámetros de búsqueda en una base de datos.

• Enviarlos como un correo electrónico.

• Realizar cálculos (como el pago de un préstamo) en función de los datos y devolver el resultado al usuario.

Page 140: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Acción del formulario Un formulario HTML siempre va acompañado de una acción, que es una de las propiedades del formulario.

La acción especifica un URL que procesa el formulario. El URL puede señalar a:

• Una dirección de correo electrónico, en cuyo caso los datos del formulario se envían en un mensaje de correo electrónico a una dirección especificada, y el navegador vuelve a cargar la página de formulario.

• Una página de aplicación del lado del servidor, como una página ColdFusion o JSP, que procesa los datos del formulario, utilizándolos quizás para buscar o actualizar una tabla de base de datos y después devolver los resultados al navegador como HTML.

• Un programa CGI (Common Gateway Interface), escrito en un lenguaje como Perl o Java, que procese los datos del mismo modo que lo hace la página de aplicación del lado del servidor y que después redireccione la solicitud a otra página HTML que se va a devolver al navegador.

Nota: En este curso no se trata la programación del lado del servidor por lo tanto, esta unidad no describe el proceso real de los datos. Si le interesa aprender más sobre la creación de aplicaciones Web que puedan procesar datos de formularios, este tema relacionado con distintos servidores de aplicaciones se trata en la formación dirigida a instructores de Macromedia. Si desea obtener más información sobre estos cursos, visite http://www.macromedia.com/training.

.

Datos de Formulario y métodos

Cuando se envía el formulario, los datos del mismo se añaden de forma predeterminada al URL y se envían a la página de acción. A continuación se muestra un ejemplo de datos de formulario en un URL:

URL mostrando datos de formulario

El atributo Método del formulario determina el modo de enviar los datos del formulario al servidor. Los valores posibles son:

• GET - el valor predeterminado para HTML – los datos del formulario se envían en la cadena de consulta del URL, como en este ejemplo: http://www.site.com/action.cgi?name=Jane&age=33 Donde las dos entradas de formulario son name=Jane y age=33 y se envían a action.cgi para procesarlas.

• POST – los datos se envían en el encabezado de HTML, que es invisible al usuario

El método que escoja dependerá de lo que espere la página de acción. Si trabaja con un

Page 141: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

desarrollador de aplicaciones que gestiona el procesamiento del lado del servidor, pregúntele el método que debe utilizarse.

El método se establece en el inspector de propiedades del formulario seleccionado. Si selecciona Predeterminado, el método se establece en GET.

Menú emergente de métodos de envio de Formulario

Ajustar el foco en un formulario Cuando se muestra un formulario en el navegador, el punto de inserción no se coloca automáticamente en el primer objeto del formulario. Esta funcionalidad es una cortesía hacia los usuarios, y les evita tener que hacer clic en el campo (o desplazarse con el tabulador) antes de escribir. Establecer el punto de inserción se conoce como establecer el foco. Puede añadir un pequeño código JavaScript al formulario para establecer el foco en el primer campo, facilitando a los usuarios la tarea de rellenar el formulario.

Añadir JavaScript

Para añadir código JavaScript para establecer el foco en el primer campo del formulario, se necesita el nombre del formulario y el nombre del campo. Dreamweaver MX añade un nombre predeterminado al formulario, o bien puede cambiar el nombre por otro más descriptivo. Seleccione el formulario y después busque el nombre en el inspector de propiedades.

Nombre del formulario en en el Inspector de Propiedades

La sentencia JavaScript necesaria es:

window.document.formname.fieldname.focus()

Donde “formname” y “fieldname” sonlos nombres reales de los elementos de la página. Focus() es un comando JavaScript integrado para los campos de formulario.

Desea ejecutar el código JavaScript en cuanto se carga la página. Para ello, utilice el evento onLoad, que puede especificarse como un atributo de la etiqueta <body>. Entonces, para establecer el foco en el campo deseado debe cambiar a la vista de código o a la vista de código y diseño y editar la etiqueta <body> para añadir el atributo onload:

<body onLoad=”window.document.formname.fieldname.focus()”>

Page 142: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Si la etiqueta <body> tiene otros atributos, la adición de este otro no les afectará.

Resumen

• Los formularios son el único mecanismo en HTML para la entrada de datos por parte de los usuarios.

• Un formulario consta de un contenedor de formulario que tiene distintos objetos de formulario dentro de este.

• El formulario y los campos de formulario pueden insertarse usando el Menú Insertar o la Categoría Formularios de la barra Insertar.

• Uno de los objetos de formulario debe ser un botón de envio que permita a los usuarios presionarlo para enviar los datos del formulario.

• La propiedad Acción de Formulario debe ser una URL a la que se enviarán los datos, y suele ser una dirección de email o una página de aplicación del lado de servidor.

• Los datos de Formulario puede ser enviados utilizando los métodos POST o GET.

Comprobación, mantenimiento y carga

Comprobando su sitio

Una vez que haya acabado de crear las páginas del sitio, deberá comprobar todos los archivos localmente para asegurarse de que todos los vínculos funcionan y de que no faltan archivos.

Debería comprobar lo siguiente:

• Comprobar la accesibilidad

• Comprobar la compatibilidad con los navegadores.

• Comprobar que los vínculos no están rotos.

• Comprobar que se han cumplido las especificaciones de codificación correctas.

• Revisar la ortografía.

Comprobando la accesibilidad La comprobación de accesibilidad genera un informe detallado de conflictos entre su contenido y las líneas guía de la Sección 508 de la ley de USA de rehabilitación de 1998(1998 Rehabilitation Act). Puede validar la accesibilidad del documento actual, archivos seleccionados o el sitio completo.

Para comprobar la página actual, elija Menú Archivo Comprobar Página Comprobar Accesibilidad

Page 143: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

El grupo de paneles Resultados mostrará entonces cualquier advertencia o errores de accesibilidad. Haga clic en Más info., para abrir el panel de Referencias y que muestre la línea guía relevante. También se resalta en Vista de código la línea de código que genera el error o advertencia.

Problemas de accesibilidad en el grupo de paneles Resultados

Comprobando los vínculos Los vínculos rotos son extremadamente molestos para los usuarios. Aunque Dreamweaver MX es muy adecuado para reparar vínculos cuando se modifican los archivos del sitio, deberá comprobarlos antes de cargar las páginas en el servidor.

Puede comprobar los vínculos del documento actual, de una carpeta del sitio o del sitio completo. Dreamweaver sólo comprueba los vínculos con otros documentos del sitio. Los vínculos externos se enumeran pero no se comprueban.

Documento actual

Para comprobar los vínculos del documento actual:

1. Guarde el archivo.

2. Elija Menú Archivo Comprobar página Comprobar Vínculos, o presione las teclas Mayús.+ F8 de su teclado.

El informe aparece en el panel Verificador de Vínculos del grupo de paneles Resultados.

Comprobar Vínculos – Vínculos Rotos

Dreamweaver genera varios informes sobre los vínculos existentes en la página. Seleccione un informe del menú emergente Mostrar para ver otro informe. Las opciones de informes son::

• Vínculos rotos

Page 144: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

• Vínculos externos

• Archivos huérfanos

Los archivos huérfanos son aquellos para los que no existe ningún vínculo en ninguna otra página del sitio. Algunos de estos archivos pueden ser activos tales como archivos de origen de Fireworks (png) que desee mantener en el sitio. Otros podrían ser archivos obsoletos que probablemente desee eliminar antes de cargar los archivos en el servidor.

Comprobación del sitio Para comprobar los vínculos del sitio elija Menú Sitio Comprobar vínculos en todo el sitio.

Para comprobar los vínculos de una carpeta o archivo seleccionado del sitio, seleccione la carpeta o los archivos en el panel Sitio. Haga clic en uno de los archivos seleccionados con el botón derecho del ratón (Windows) o mientras presiona Control (Macintosh) y elija Comprobar vínculos Archivos/carpetas seleccionados del menú contextual. El informe aparece en el panel Verificador de vínculos del grupo de paneles Resultados.

Reparando vínculos rotos Puede reparar los vínculos rotos en el panel Verificador de vínculos o abrir los archivos desde la lista y reparar los vínculos en el Inspector de Propiedades.

Para reparar los vínculos desde el panel Verificador de vínculos:

1. Seleccione el archivo de la columna Vínculos rotos. Aparecerá un icono de carpeta junto al vínculo roto.

2. Haga clic en el icono de carpeta y localice el archivo correcto para el vínculo.

Archivo seleccionado en la columna vínculos rotos

Si hay otras referencias al mismo archivo que también están rotas, Dreamweaver le preguntará si desea repararlas.

Page 145: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Reparar otros Vínculos

También puede hacer doble clic en el archivo desde la columna Archivos en el panel Verificador de vínculos. Dreamweaver abre el documento y selecciona el vínculo o la imagen de la página con una referencia rota. Seguidamente podrá reparar el vínculo en el inspector de propiedades.

Comprobando la compatibilidad con navegadores Web Debe prever los navegadores de que dispondrán los usuarios teniendo en cuenta el objetivo del sitio y qué sabe acerca de ellos.

• Los sitios de intranets son normalmente los más sencillos, ya que lo más probable es que exista un navegador estándar para toda la organización.

• Puede hacer suposiciones sobre los usuarios, incluso para los sitios de acceso público, con bastantes posibilidades de acertar. Por ejemplo, si el sitio proporciona noticias y vende productos relacionados con el desarrollo Web, es de suponer que los usuarios dispondrán de versiones actualizadas de Internet Explorer o de Netscape..

La función de comprobación de navegadores analiza el HTML de las páginas para ver si hay etiquetas o atributos incompatibles con los navegadores de destino. Existen dos formas en Dreamweaver MX 2004 para comprobar la compatibilidad con navegadores Web:

• Utilizando el comprobador automático de navegadores de destino.

• Comprobando manualmente la compatibilidad con los navegadores.

Comprobación automática de compatibilidad con navegadores Dreamweaver MX 2004 utiliza un comprobador automático de soporte con navegadores de destino que esta activado de forma predeterminada. Cada página se valida cuando se abre, y los resultados pueden ser encontrados en el panel Resultado cuando lo requiera.

La barra de documento contiene un botón para la función de comprobación de soporte de navegador. Este botón contiene un signo de advertencia Amarillo si encuentra errores. Haga clic en el botón para acceder a los elementos disponibles en su menú.

Page 146: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Comprobación automática de navegadores de destino con errores

Configuración Puede hacer clic en la opción de configuración para seleccionar los navegadores para los que se realizará la comprobación.

Navegadores de destino

Mostrar todos los errores Eligiendo “Mostrar todos lo errores” en el menú de Comprobación automática de navegadores de destino, hará que el grupo de paneles Resultados muestre en el panel Revisión de navegadores de destino, todos los errores encontrados. Puede hacer doble clic en el error para seleccionar el código que genera el error.

Revisión de navegadores de destino

Comprobación manual del documento Para comprobar navegadores de destino manualmente, la función comprobar navegadores le muestra un informe de lo que ha encontrado, pero sus documentos no se alteran de ningún modo.

Puede ejecutar una comprobación en un documento, en una carpeta o en un sitio completo.

Page 147: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Para ejecutar una comprobación de navegadores de destino en un documento:

Guarde la página. Dreamweaver sólo comprueba la última versión guardada del archivo.

Elija Menú Archivo Comprobar Página Comprobar navegadores de destino.

Aparece un informe en el panel Revisión del navegador de destino (en el grupo de paneles Resultados) en el que se muestra el tipo de problema y su gravedad, así como la línea en laque ha ocurrido el problema. Una vez corregidos los errores, deberá ejecutar de nuevo la comprobación para asegurarse de que las correcciones que ha realizado no han originado nuevos problemas.

Panel Revisión de navegadores de destino con resultados

Nota: No todos los elementos incluidos en el informe son problemas, sino tan sólo avisos y mensajes informativos.

Para guardar el informe, haga clic en el botón Guardar informe (disquete) del panel Revisión del navegador de destino. El informe es un archivo temporal que se perderá si no lo guarda.

Si no ve el panel Resultados, elija Menú Ventana Resultados Revisión del navegador de destino.

Comprobación manual del sitio

Para ejecutar una comprobación de los navegadores de destino en el sitio:

1. Seleccione el panel Revisión del navegador de destino en el grupo de paneles Resultados.

2. Haga clic en la flecha verde situada en la parte izquierda del panel.

3. Seleccione Configuración y elija los navegadores de destino en el cuadro de diálogo y posteriormente haga clic en Aceptar

4. Elija Revisar navegadores de destino para todo el sitio.

Page 148: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Comprobador navegadores de destino en todo el sitio

Haga clic con el botón derecho (Windows) o presione Control mientras hace clic (Macintosh) en un elemento de la lista y elija “Más info” en el menú contextual para ver una descripción más completa del problema. Las mismas opciones se encuentran disponibles si utiliza el menú Opciones, situado en la parte superior derecha del panel. También puede elegir Abrir resultados en el navegador para ver los resultados en una página con formato HTML que podrá imprimir.

Menú contextual para acceder a más información

Realizar informes de su sitio Puede generar informes sobre diversos elementos HTML de un sitio mediante el comando Informes. Puede comprobar si existen etiquetas de fuentes anidadas, texto alternativo que no está presente y documentos que carecen de título, entre otras posibilidades. Una vez que ejecute el informe, podrá guardarlo como archivo XML.

Elija Menú Sitio Informes y elija las opciones que desee comprobar del cuadro de diálogo Informes. Puede comprobar el documento actual, el sitio completo, archivos seleccionados o una carpeta del sitio.

Page 149: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo de Informes del Sitio

Estos son algunos de los elementos sobre los que puede generar informes:

Elemento del informe Descripción

Protegido por Lista de archivos protegidos por un miembro del equipo

Design Notes Lista de todas las Design Notes

Modificado recientemente Lista de todos los archivos que han sido actualizados recientemente

Etiquetas de fuentes anidadas combinables

Lista de etiquetas de fuentes anidadas que podrían combinarse en una sola etiqueta para simplificar el código HTML

Accesibilidad Directrices incumplidas de la sección 508.

Falta texto Alt Lista de textos alternativos de imágenes que no están presentes y que son importantes para cumplir las normas de accesibilidad.

Etiquetas anidadas redundantes

Lista de etiquetas anidadas que no tienen efecto alguno

Etiquetas vacías eliminables

Lista de etiquetas vacías que pueden eliminarse sin que ello afecte al contenido o al formato de la página

Documentos sin título Lista de documentos sin título

Page 150: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Comprobar ortografía Un aspecto importante y que, sin embargo, suele olvidarse es la comprobación ortográfica del contenido de la página. Para comprobar la ortografía, abra cada página del sitio y elija Menú Texto Ortografía para abrir el comprobador ortográfico.

Cuadro de diálogo Comprobar Ortografía

Mantenimiento de archivos

El trabajo con los archivos del sitio, implicará en ocasiones la necesidad de mover un archivo, eliminarlo o cambiarlo de nombre. Una vez que haya definido un sitio, deberá utilizar el panel Sitio para realizar cambios en los archivos. Al realizar el mantenimiento de archivos en el panel Sitio, tendrá la seguridad de que la información de vínculos permanece correcta.

Por el contrario, si realiza cambios en archivos o carpetas en el Explorador de Windows (Windows) o Finder (Macintosh), Dreamweaver no reconocerá el cambio y no podrá mantener los vínculos correctamente.

Cambiar de nombre los archivos Para cambiar el nombre de un archivo o una carpeta:

1. Seleccione el nombre en el panel Sitio. Haga clic de nuevo. Aparecerá un rectángulo alrededor del nombre para indicar que puede editarlo.

2. Escriba el nuevo nombre y presione Intro (Windows) o Return (Macintosh). Se abrirá el cuadro de diálogo Actualizar archivos, en el que se enumeran todos los archivos afectados por el cambio de nombre (en el caso de que los haya).

3. Haga clic en Actualizar.

Page 151: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Actualizar Archivos mostrando archivos para ser modificados.

Nota: Dreamweaver abre cada uno de los archivos de la lista, realiza el cambio, guarda el archivo y lo cierra. Si alguno de los archivos de la lista está abierto actualmente, Dreamweaver realiza el cambio pero no guarda ni cierra el archivo.

Mover archivos

Si un archivo o carpeta no está en el lugar correcto, puede moverlo fácilmente a su ubicación correcta. Al hacerlo en el panel Sitio, se asegurará de que toda la información de vínculos permanezca intacta y correcta.

Arrastre el archivo del panel Sitio a la nueva ubicación. Se abrirá el cuadro de diálogo Actualizar archivos con la lista de archivos afectados por el traslado del archivo o carpeta.

El explorador de archivos integrado

El explorador de archivos integrado en el panel Sitio le proporciona acceso a los archivos de su escritorio, de la unidad de disco duro o de cualquier unidad de la red local. El explorador de archivos funciona de la misma forma que el Explorador de Windows o Finder de Macintosh por lo que se refiere a mover archivos, eliminarlos o cambiar sus nombres.

• Si arrastra un archivo de un sitio a otro o a una carpeta no asociada al sitio, Dreamweaver crea una copia del archivo en la nueva ubicación.

• Si arrastra un archivo no asociado al sitio a otra ubicación no asociada a ningún sitio, Dreamweaver mueve el archivo.

Para utilizar el explorador de archivos integrado haga clic en el menú emergente Sitios. Verá su disco duro local y cualquier otro de la red.

Page 152: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Explorador de Archivos Integrado

Conectar con un sitio remoto

Cuando termine la comprobación local de sus archivos, deberá enviar los archivos al servidor Web. Al transferir los archivos de su sitio local a un sitio remoto, Dreamweaver MX mantiene exactamente la misma estructura de carpetas en ambos sitios. Si una carpeta no existe en el sitio remoto, Dreamweaver la crea. Esta función garantiza que los vínculos relativos creados en el sitio local continúen funcionando en el sitio remoto, ya que los sitios son idénticos.

Añadir un sitio remoto

Deberá utilizar el comando Administrar sitios para establecer la conexión remota. Una vez establecida la carpeta remota y el método de conexión con el sitio remoto, podrá transferir los archivos locales. .

1. Elija Menú Sitio Administrar Sitios.

2. Seleccione el sitio que requiere la conexión remota.

3. Haga clic en Editar.

Page 153: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Cuadro de diálogo Administrar sitios

En el cuadro de diálogo Definición del sitio, haga clic en la ficha Avanzadas si aparece el asistente Definición del sitio. Seleccione Datos remotos de la lista Categoría.

Page 154: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Categoría Datos Remotos en el cuadro de diálogo Definición del sitio

Elija el método de acceso para la conexión con la ubicación remota. Las opciones enumeradas en el panel varían en función del método de acceso. Por ejemplo, si elige FTP, deberá introducir un nombre y una contraseña de conexión. Si selecciona Desproteger/proteger, podrá introducir su nombre y dirección de correo electrónico.

Los métodos de acceso son:

• FTP (File Transfer Protocol : Protocolo de transferencia de archivos)

• Local/red (para una unidad local o asignada)

• RDS (Remote Development Services; Servicios de desarrollo remoto)

• Base de datos SourceSafe

• WebDAV (Web-based Distributed Authoring and Versioning; Creación y control de versiones distribuido basado en la Web es un conjunto de extensiones del protocolo HTTP que permite a los usuarios editar y administrar archivos en colaboración en servidores Web remotos).

Page 155: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Ajustes FTP El acceso FTP se utiliza habitualmente para obtener archivos o colocarlos en un sitio remoto. Cuando elija FTP como método, verá lo siguiente:

Configuración FTP

A continuación se enumeran las opciones para FTP:

Opciones Valor

Servidor FTP Nombre de Internet o dirección IP del servidor FTP

Directorio del servidor Directorio del sitio remoto en el que se almacenan los documentos públicos.

Usuario y contraseña Información de acceso

Utilizar FTP pasivo Se utiliza si su configuración de cortafuegos requiere FTP pasivo

Page 156: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Utilizar Cortafuegos Seleccione esta opción si conecta con un servidor remoto desde dentro de un cortafuegos

Utilizar FTP seguro (SFTP) Seleccione si necesita crear una conexión segura. SFTP utiliza encriptación y seguridad de clave pública para hacer segura la conexión con el servidor remoto.

Cargar archivos en el servidor automáticamente al guardar

Cada vez que guarde el archivo, sera colocado también en el servidor remoto.

Permitir desproteger y proteger archivos

Permite el bloqueo de archivos cuando un miembro del equipo esta trabajando en el archivo.

Ocultar carpetas y archivos La ocultación de elementos de un sitio permite excluir carpetas y tipos de archivos al realizar operaciones como Obtener o Colocar. Por ejemplo, no necesita los archivos de origen de Fireworks o Flash en el servidor. Los archivos ocultos permanecen en el sitio local y no se cargan en el servidor a no ser que cambie manualmente la configuración de ocultación.

Puede ocultar carpetas y archivos para excluirlos de estas operaciones:

• Colocar, Obtener, Desproteger y Proteger

• Informes

• Sincronización

• Visualización en el panel Activos

• Actualizaciones de plantillas y bibliotecas

• Operaciones que afectan a todo el sitio, como la comprobación de vínculos y las búsquedas y sustituciones

• Seleccionar local más reciente y Seleccionar remoto más reciente

Ocultar tipos de archivos específicos Puede indicar los tipos de archivos concretos que Dreamweaver MX debe ocultar utilizando la extensión de archivo o cualquier terminación del nombre de archivo.

Para ocultar tipos de archivos:

1. En el menú de opciones de panel Archivos elija Sitio Ocultación Configuración.

2. Seleccione Ocultar archivos que terminen en e introduzca el tipo de archivo en el cuadro de texto. Separe los tipos de archivo con un espacio; no utilice comas ni signos de punto y coma.

Page 157: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Categoría Ocultación en el cuadro de diálogo Definición del sitio

Los nombres de los archivos afectados aparecen tachados con una línea roja en el panel Sitio para indicar que se encuentran ocultos.

Page 158: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Archivos ocultados en el panel Archivos

Para ocultar un archivo o una carpeta:

Selecciónelo y elija Ocultación Ocultar.

Para anular la ocultación de un archivo o una carpeta: Selecciónelo y elija Sitio Ocultación Anular ocultación.

Puede también hacer clic con el botón derecho(Windows) o Control-clic (Macintosh) en la carpeta y elegir una opción en el submenú Ocultación del menú contextual.

Subir archivos al servidor remoto Una vez que haya definido el sitio remoto, podrá utilizar Dreamweaver para cargar los archivos. Para ver el sitio local y el remoto de forma simultanea, haga clic en el icono Expandir/Contraer de la barra de herramientas del panel Archivos.

Expandir/contraer en el Panel de archivos

Page 159: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Conectar al servidor Si desea ver los archivos del sitio remoto antes de colocar sus archivos, haga clic en Conectar. Si el panel Archivos está ampliado, verá el sitio remoto a la izquierda y el local a la derecha. Si el panel Archivos no está ampliado, éste sólo mostrará el sitio remoto.

Panel archivos ampliado mostrando el botón Conectar

Colocar archivos frente a Desproteger archivos Para copiar archivos del sitio local al remoto, puede usar tanto la opción colocar Archivo como Proteger Archivo. Si es la única persona que trabaja en el sitio, puede utilizar los comandos colocar y obtener para copiar archivos del sitio local al remoto. Si está trabajando en un equipo, puede utilizar mejor los comandos proteger y desproteger para lo mismo.

Page 160: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Panel de archivos mostrando los botones Obtener y Colocar

Seleccione el archivo o carpeta que necesita copiar al sitio remoto y después haga clic en Colocar. Si no esta conectado con el sitio remoto, Dreamweaver conectará y copiara el archive en el sitio remoto.

Archivos dependientes Como las páginas Web pueden contener muchos recursos, como imágenes, el hecho de colocar una nueva versión de estas puede requerir también colocar las nuevas imágenes o elementos incluidos.

Cuando coloca un archivo en el servidor remoto, un cuadro de diálogo aparece preguntando si desea subir también los archivos dependientes, como imágenes, que están incrustados en la página. Si existen esto archivos en el servidor remoto, haga clic en No. En caso contrario, haga clic en Si y serán copiados también. Para evitar este mensaje en el futuro puede seleccionar la opción “No mostrar este mensaje de nuevo”.

Cuadro de diálogo archivos dependientes

Encontrar archivos más recientes Puede buscar manualmente archivos que sean mas recientes en el servidor local o remoto y

Page 161: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

después obtenerlos o colocarlos para sincronizar el sitio.

Seleccionar archivos locales más recientes

Para comprobar que archivos son más recientes en el sitio local sin sincronizar; elija Edición Seleccionar local más reciente en el menú de opciones del panel Archivos.

Los archivos locales más recientes son seleccionados en el panel de archivos. Podrá entonces colocar los archivos en el sitio remoto.

Seleccionar archivos remotos más recientes

Para comprobar que archivos son más recientes en el sitio remoto sin sincronizar; elija Edición Seleccionar remoto más reciente en el menú de opciones del panel Archivos. .

Los archivos remotos más recientes son seleccionados en el panel de archivos. Podrá entonces obtener los archivos del sitio remoto.

Menú de Opciones en el Panel Archivos

Sincronizar Archivos

Después de cargar sus archivos locales en el sitio remoto, podrá sincronizar los archivos de ambos sitios. Esta operación sólo carga los archivos más recientes que han sido modificados localmente.

Para sincronizar los archivos:

1. Seleccione los archivos o carpetas que desea sincronizar. Si desea sincronizar el sitio completo, seleccione la carpeta raíz.

2. Elija Sitio Sincronizar (en el menú de opciones del panel Archivos). También puede hacer clic en un archivo o carpeta con el botón derecho (Windows) o mientras presiona Control (Macintosh) y elegir Sincronizar en el menú contextual.

Page 162: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Sincronizar Archivos

3. En el cuadro de diálogo Sincronizar archivos, elija la sincronización de los archivos o del sitio completo en el menú emergente Sincronizar.

4. Seleccione la opción que desee del menú emergente Dirección. Las opciones disponibles son: Colocar archivos más nuevos en remoto, Obtener archivos más nuevos de remoto u Obtener y colocar archivos más nuevos.

5. Haga clic en Vista previa para comenzar con el proceso

Vista Previa de sincronizar

6. Aparecerá un informe con los archivos que requieren sincronización. Podrá optar por actualizar todos los archivos o anular la selección de archivos de la lista.

7. Cuando haga clic en Aceptar, se actualizarán todos los archivos seleccionados.

Page 163: Introducción a Dreamweaver MX 2004 CARACTERÍSTICA …fergut.com/diseno/menu/apoyos/dwwd600_StudentGuide_ES.pdf · Introducción a Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004

Resultados del comando sincronizar

Resumen

• Siempre debe comprobar el sitio antes de cargarlo en el servidor.

Asegúrese que su sitio cumple con las directrices de accesibilidad.

Asegúrese de que el sitio funciona en los navegadores que vayan a utilizar los usuarios a los que va destinado.

Asegúrese de que todos los vínculos continúan funcionando antes de cargar el sitio.

Compruebe la ortografía de los documentos.

• Asegúrese de usar el panel de Archivos de Dreamweaver para la gestión de los archivos del sitio para que sus vínculos siempre funcionen.

• Puede utilizar FTP y local/red, entre otros métodos, para cargar archivos.

• Sólo es necesario que cargue los archivos que hayan cambiado como resultado de sus operaciones de mantenimiento usando la función Sincronizar. Fuente: Macromedia, Inc. 275 Grove Street Newton, MA 02466 (617) 219-2000 http://www.macromedia.com Traducción al castellano: Juan A. Jiménez López (Team Macromedia – Dreamweaver ) Octubre 2003