Aprender Dreamweaver CS6 con 100 ejercicios prácticos E-Book

MEDIAactive

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Serie: Aprender...con 100 ejercicios prácticos
• Sprache: Spanisch
• Veröffentlichungsjahr: 2013

Seitenzahl: 312

Beschreibung

Dreamweaver es el programa de creación y edición de páginas web por excelencia. Se trata del software ideal tanto para diseñadores y desarrolladores web como para diseñadores gráficos. Con este manual aprenderá a manejar el programa de forma fácil y cómoda. En esta versión de Dreamweaver, Adobe ha añadido interesantes novedades, tanto en su aspecto como en sus herramientas y funciones, que aumentan las posibilidades de edición. Además, ofrece varias características dirigidas especialmente a aquellos usuarios que se sienten igual de cómodos trabajando tanto con HTML como con CSS y JavaScript. Con este libro a color: Cree páginas web de aspecto totalmente profesional y con el mínimo esfuerzo Conozca el nuevo diseño CSS basado en cuadrícula fluida y trabaje con mayor comodidad que antes con las opciones multipantalla Realice transiciones basadas en CSS3 para aplicar cambios suaves en las propiedades de los elementos de una página Aplique sobre un mismo elemento múltiples clases de CSS Utilice fuentes Web creativas compatibles con Internet en Dreamweaver

Leseprobe

Aprender Dreamweaver CS6 con 100 ejercicios prácticos

© 2012 MEDIAactive

Primera edición, 2012

© 2012 MARCOMBO, S.A.Gran Via de les Corts Catalanes, 59408007 Barcelonawww.marcombo.com

En coedición con:

© 2012 ALFAOMEGA GRUPO EDITOR, S.A. de C.V.C/ Pitágoras 1139 - Colonia del Valle03100 - México D.F. (México)www.alfaomega.com.mx

Diseño de la cubierta: NDENU DISSENY GRÀFIC

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».

ISBN por Marcombo: 978-84-267-1840-2

ISBN por Alfaomega:

D.L.:Printed in Spain

Presentación

APRENDER DREAMWEAVER CS6 CON 100 EJERCICIOS PRÁCTICOS

100 ejercicios prácticos resueltos que conforman un recorrido por las principales funciones del programa. Si bien es imposible recoger en las páginas de este libro todas las prestaciones de Dreamweaver CS6, hemos escogido las más interesantes y utilizadas. Una vez realizados a conciencia los 100 ejercicios que componen este manual, el lector será capaz de manejar con soltura el programa y llevar a cabo todas aquellas tareas que se realizan normalmente para crear, editar y publicar una página web.

LA FORMA DE APRENDER

Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.

Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario será capaz de desenvolverse cómodamente con el programa y sacar el máximo partido de las múltiples prestaciones que ofrece Dreamweaver CS6.

LOS ARCHIVOS NECESARIOS

En el caso de que desee utilizar los archivos de ejemplo de este libro puede descargarlos desde la zona de descargas de la página de Marcombo (www.marcombo.com) y desde la página específica de este libro.

A QUIÉN VA DIRIGIDO EL MANUAL

Si se inicia usted en la práctica y el trabajo con Dreamweaver, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en el programa, le resultará también muy útil para consultar determinados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.

Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y llevarlo a cabo sobre su propio documento de Dreamweaver.

DREAMWEAVER CS6

Dreamweaver es uno de los programas más utilizados para el diseño, el desarrollo y el mantenimiento de aplicaciones y sitios web basados en estándares. Con las múltiples y avanzadas herramientas que ofrece es posible crear fácil y rápidamente sitios Web y aplicaciones con aspecto completamente profesional, por lo que es una de las aplicaciones preferidas de diseñadores gráficos y diseñadores y desarrolladores web.

Con este completísimo editor de HTML visual resulta fácil crear complejas y sofisticadas páginas web dinámicas. Las robustas propiedades para la integración y el diseño basado en CSS, hojas de estilos en cascadas, hacen de Dreamweaver una estupenda aplicación que permite crear y manipular cualquier sitio web con enorme facilidad y precisión. La alta calidad de los diseños creados con Dreamweaver queda garantizada gracias a sus potentes y mejorados controles y herramientas, que irá conociendo a lo largo de los 100 ejercicios que componen este manual.

Cómo funcionan los libros

“Aprender…”

Índice

001 Acceder a Dreamweaver CS6

002 Conocer la interfaz de Dreamweaver CS6

003 Crear nuevos documentos

004 Crear nuevos diseños de cuadrícula fluida

005 Trabajar con el diseño y el código

006 Conocer los elementos de una página web

007 Guardar y editar básicamente un documento

008 Crear sitios locales

009 Administrar sitios locales

010 Aplicar un color y una imagen de fondo

011 Imágenes de rastreo y notas de diseño

012 Exportar y eliminar sitios

013 Importar sitios

014 Duplicar y editar sitios

015 Insertar texto

016 Copiar y pegar texto entre documentos

017 Modificar el formato de un texto

018 Cambiar las propiedades y el color del texto

019 Crear archivos de InContext Editing

020 Importar y utilizar fuentes Web

021 Cambiar los márgenes y la alineación

022 Agregar sangrías y crear listas

023 Crear estilos y elementos de listas

024 Insertar caracteres especiales

025 Insertar imágenes

026 Compartir imágenes entre páginas

027 Cambiar las dimensiones de una imagen

028 Alinear imágenes

029 Conocer las funciones de edición de imágenes

030 Crear mapas de imagen y otros ajustes

031 Insertar y actualizar documentos PSD

032 Agregar enlaces

033 Comprobar errores de navegación

034 Previsualizar las páginas

035 Cambiar las propiedades de los vínculos

036 Insertar tablas

037 Trabajar con filas, columnas y celdas

038 Cambiar las propiedades de tabla

039 Editar filas, columnas y celdas

040 Dividir y combinar celdas

041 Combinar Dreamweaver con Word y Excel

042 Limpiar el código HTML

043 Anidar tablas

044 Ordenar tablas

045 Exportar e importar los datos de una tabla

046 Trabajar con el modo de tablas expandidas

047 Empezar a trabajar con estilos CSS

048 Aplicar estilos CSS

049 Aplicar hojas de estilos de muestra

050 Definir estilos de etiquetas HTML

051 Trabajar con archivos relacionados

052 Editar hojas de estilos

053 Crear nuevas reglas de estilos

054 Adjuntar hojas de estilos externas

055 Generar un documento basado en CSS

056 Mostrar el código de una selección

057 Crear estilos de clase

058 Duplicar estilos de clase

059 Aplicar varias clases CSS

060 Trabajar con el nuevo panel Transiciones CSS

061 Combinar hojas de estilos

062 Definir categorías para definir reglas de estilo

063 Crear reglas de estilo de identificador

064 Insertar marcos

065 Ajustar un conjunto de marcos

066 Asignar el origen de los marcos

067 Cambiar las propiedades de los marcos

068 Insertar marcadores de posición de imagen

069 Crear imágenes de sustitución

070 Insertar películas Flash

071 Insertar vídeos Flash

072 Insertar botones de Flash

073 Vincular sonidos

074 Incrustar sonidos

075 Enlazar páginas y modificar su carga

076 Crear anclajes con nombre

077 Insertar elementos PA

078 Cambiar las propiedades de los elementos PA

079 Convertir elementos PA en tablas

080 Crear formularios

081 Insertar objetos de formularios

082 Añadir comportamientos

083 Asignar acciones de formulario

084 Crear documentos en JavaScript

085 Llamar JavaScript

086 Usar sugerencias para el código JavaScript

087 Crear plantillas y regiones editables

088 Crear documentos a partir de plantillas

089 Automatizar tareas

090 Crear un conjunto de datos de Spry

091 Insertar tablas y regiones Spry

092 Insertar widgets de spry

093 Insertar barras de menús de Spry

094 Aplicar efectos de Spry

095 Trabajar con la Vista en vivo

096 Inspeccionar estilos CSS

097 Trabajar con el panel Activos

098 Editar elementos de biblioteca

099 Configurar un sitio remoto

100 Colocar y obtener archivos

001

Acceder a Dreamweaver CS6

AL ACCEDER A DREAMWEAVER CS6, aparece la Ventana de bienvenida, que permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando el programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales para la creación y apertura de documentos. Además, desde la Ventana de bienvenida se puede acceder a una visita guiada o a un tutorial del producto, con el fin de profundizar en los conocimientos sobre el programa.

IMPORTANTE

Active la opción No volver a mostrar esta página de inicio de la parte inferior de la pantalla de bienvenida o bien desactive la opción Mostrar pantalla de bienvenida en la categoría General del cuadro de preferencias de Dreamweaver para que dicha ventana no aparezca cada vez que acceda al programa.

En el

Escritorio

, haga clic en el botón

Iniciar

de la

Barra de tareas

y haga clic en el acceso a Dreamweaver CS6.

Antes de cargarse la interfaz del programa propiamente dicha, aparece la ventana Editor predeterminado, desde la cual puede indicar los tipos de archivo para los cuales Dreamweaver será el editor predeterminado. Mantenga seleccionados los tipos por defecto y pulse el botón

Aceptar

.

Después de abrir Dreamweaver por primera vez, dispondrá de un acceso directo al programa en el menú Inicio.

Se abre la aplicación mostrando en su parte central la pantalla de bienvenida. Desde aquí puede abrir un elemento reciente, crear nuevos documentos y consultar temas de ayuda. Además, en la parte inferior dispone de vínculos a páginas que le ayudarán durante sus primeros pasos en Dreamweaver, le informarán acerca de las nuevas funciones del programa y le darán acceso a otros recursos. Pulse el enlace

Abrir

, el único del apartado

Abrir un elemento reciente

.

La acción nos conduce al cuadro de diálogo

Abrir

, que posibilita la selección y apertura de documentos previamente creados. Pulse el botón

Cancelar

para salir de él.

El segundo bloque,

Crear nuevo

, ofrece una lista de tipos de archivo más usuales que puede seleccionar para crear un documento rápidamente. La lista se ve encabezada por la opción HTML, formato tradicional de las páginas web. Pulse sobre ella.

Automáticamente se crea un documento HTML en blanco. Haga clic sobre el botón de aspa de la pestaña de este documento, denominado por defecto

Untitled-1

, para salir de él.

El cierre del documento comporta la reaparición de la pantalla de bienvenida. Como novedad en esta versión del programa, la sección

Crear nuevo

contiene dos entradas más:

Diseño de cuadrícula fluida

, un sistema para diseñar sitios web adaptables, y Sitio de Business Catalyst, que permite utilizar el panel integrado de Business Catalyst en Dreamweaver. Por último, en el apartado

Elementos destacados

de la pantalla de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS6. Pulse por ejemplo sobre el enlace Información general de CS6 y consulte su contenido en el navegador Web predeterminado.

IMPORTANTE

También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana Nuevas funciones y Comenzar a trabajar.

002

Conocer la interfaz de Dreamweaver CS6

EL DISEÑO DE LA INTERFAZ de Dreamweaver CS6 es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo de Dreamweaver permite ver en todo momento las propiedades de los documentos y de los objetos y muestra todas las ventanas y los paneles integrados en una única ventana.

IMPORTANTE

Usando el botón de doble punta de flecha, que aparece en la cabecera de los paneles, puede contraerlos para mostrarlos en forma de iconos y ahorrar así espacio.

La sencilla interfaz de Dreamweaver CS6 cuenta con una barra de menús en la parte superior y la reducida Barra de la aplicación, que cuenta únicamente con un conmutador de espacios de trabajo y un campo de búsqueda. Para conocer con todo detalle el entorno de Dreamweaver, cree un documento en blanco pulsando el botón

HTML

de la pantalla de bienvenida.

Sepa que también puede acceder a las diferentes opciones de creación de documentos desde la opción Nuevo del menú Archivo.

Debajo de la pestaña del documento, se encuentra la

Barra de herramientas Documento

, que contiene los botones adecuados para cambiar las vistas de la ventana y las opciones de visualización, para obtener vistas previas y para dar nombre al documento, entre otras acciones habituales. Haga clic en el botón

Código

de esta barra y, tras comprobar cómo cambia el aspecto de la ventana, recupere la vista

Diseño

pulsando en ese botón.

Compruebe cómo cambia el aspecto de la Ventana del documento al activar la vista Código y después vuelva a la predeterminada, la vista Diseño.

Ocupando la mayor parte del espacio de la interfaz se encuentra la ventana del documento, donde se muestra el documento actual mientras lo está creando y editando. En la parte inferior de esta ventana se ubica la

Barra de estado

, que incluye un

selector de etiquetas

, botones para cambiar la visualización e información acerca del documento y por debajo el

Inspector de propiedades

, un útil panel que permite ver y modificar en cualquier momento las propiedades de la página, del objeto o del texto seleccionados. Pulse el botón

Propiedades de la página

del inspector.

También puede acceder al cuadro Propiedades de la página desde el menú Modificar o pulsando la combinación de teclas Ctrl.+J

Desde el cuadro

Propiedades de la página

es posible modificar las características de la página. Como esto lo veremos más adelante en este libro, ciérrelo pulsando

Cancelar

.

A la derecha de la interfaz se encuentran los paneles, que le ayudarán a supervisar y cambiar el trabajo realizado. Puede reducir y ampliar los paneles haciendo doble clic en sus pestañas, y pasar de uno a otro pulsando sobre ellas. Haga clic sobre la pestaña

Elementos PA

.

Para poner en primer plano un panel basta con que pulse sobre su pestaña. Si hace doble clic, la minimizará.

También puede activar los paneles desde el menú

Ventana

. El conmutador de espacios de trabajo de la Barra de la aplicación se utiliza para cambiar el espacio de trabajo. Despliegue este campo, que muestra pro defecto el espacio

Diseñador

, y elija la opción

Programador

.

Vea que se trata del mismo espacio de trabajo integrado que el de

Diseñador

, pero con los grupos de paneles apilados a la izquierda y mostrando de forma predeterminada la vista

Código

. Termine este ejercicio volviendo al espacio de trabajo

Diseñador

.

IMPORTANTE

El espacio de trabajo denominado Pantalla doble permite organizar un diseño si dispone de un segundo monitor. Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de propiedades en el principal.

003

Crear nuevos documentos

ADEMÁS DE DOCUMENTOS HTML, Dreamweaver permite crear documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro Nuevo documento ordena en categorías los diferentes tipos de archivo que se pueden obtener. Los archivos pueden ser creados en blanco o basados en los diseños de página preestablecidos. La categoría Nuevo documento del cuadro Preferencias permite establecer un tipo de documento como predeterminado y generar automáticamente un documento nuevo basado en el tipo predeterminado definido.

IMPORTANTE

Ya sabe que puede utilizar el enlace pertinente de la pantalla de bienvenida para crear nuevos documentos en Dreamweaver.

Para empezar, con el documento en blanco creado en el ejercicio anterior abierto en el área de trabajo de Dreamweaver, despliegue el menú

Archivo

y elija la opción

Nuevo

.

La primera columna del cuadro

Nuevo documento

permite la creación de una página en blanco, una plantilla en blanco, un diseño de cuadrícula fluida (novedad en esta versión del programa), una página de plantilla, una página de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de página, que varían según el tipo de documento seleccionado. La segunda parte de este panel incluye los tipos de páginas dinámicas. Seleccione la categoría

Plantilla en blanco

.

Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos del listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. Pulse sobre la categoría

Diseño de cuadrícula fluida

.

Por tratarse de una nueva función en la versión CS6 del programa, nos ocuparemos de ella en exclusiva en el siguiente ejercicio, por lo que seleccione la categoría

Página de muestra

.

Los estilos CSS permiten dotar de unas características comunes a las páginas, controlando parámetros relacionados con el aspecto que deben presentar los diferentes elementos que las componen, como el fondo y las tablas. Haga clic sobre la opción

Colores: Rojo

del panel

Página de muestra

y pulse el botón

Crear

.

Desde el cuadro de preferencias de Dreamweaver puede indicar qué tipo de documento será el documento predeterminado.

Aparece el nuevo documento CSS en pantalla en vista de código. Seguidamente, pulse la combinación de teclas

Ctrl+N

.

Pulse sobre la categoría

Página en blanco

, mantenga seleccionada la opción

HTML

y haga clic sobre el diseño de página de

2 columnas flotantes, barra lateral derecha

para ver su aspecto.

Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Para ello, pulse el botón

Preferencias

y, en el cuadro que aparece, seleccione el tipo de archivo que desee en el campo Documento predeterminado. En este caso, mantenga seleccionada la opción

HTML

y haga clic en

Aceptar

.

El enlace

Obtener más contenido

inicia Dreamweaver Exchange, que permite descargar más contenido de diseño de páginas. Pulse el botón

Crear

para crear un nuevo documento.

IMPORTANTE

Los tipos de archivo listados en la categoría Otro del cuadro Nuevo documento están destinados a programadores experimentados en estos lenguajes, basados en texto, con los que no es posible trabajar de forma visual mediante el programa.

004

Crear nuevos diseños de cuadrícula fluida

COMO PRINCIPAL NOVEDAD EN SU VERSIÓN CS6, Dreamweaver proporciona una nueva opción para la creación de documentos. Se trata del denominado Diseño de cuadrícula fluida, cuya ejecución puede iniciarse tanto desde el menú Archivo como desde el cuadro de diálogo Nuevo documento. En cualquier caso, el programa proporciona una plantilla para crear diseños web compatibles con diferentes plataformas y navegadores con un eficaz sistema basado en CSS3.

IMPORTANTE

¿Qué es CSS3? Se trata de la última versión de las hojas de estilo CSS (Cascading Style Sheets); estas hojas de estilo permiten definir de manera eficiente la representación de las páginas creadas con un programa como Dreamweaver. CSS3 contiene desde opciones de sombreado y redondeado hasta funciones avanzadas de movimiento y transformación.

Para empezar, despliegue el menú

Archivo

y haga clic sobre el nuevo comando

Nuevo diseño de cuadrícula fluida

.

Si necesita ayuda acerca del nuevo Diseño de cuadrícula fluida, puede pulsar el botón Ayuda del cuadro Nuevo documento.

Esta acción nos conduce al cuadro de diálogo

Nuevo documento

, con el que hemos trabajado en el ejercicio anterior. El cuadro se abre directamente mostrando las características del tipo de archivo elegido,

Diseño de cuadrícula fluida

. La principal característica de esta nueva función es la posibilidad de elegir el tipo de pantalla de destino sobre la cual se visualizará su sitio o página web: móvil, tableta o escritorio. El ajuste del diseño se basa en porcentajes y es totalmente gráfico desde la misma ventana de creación. Como ejemplo, sobre el esquema de la tableta, cambie el número predeterminado de columnas por el valor

6

.

El campo que muestra un porcentaje en la parte inferior de este esquema indica la proporción de la pantalla que ocupará la página o sitio web. En este caso, disminuya el valor hasta un

90%

.

Si una vez modificados estos valores por defecto desea recuperarlos, no dude en pulsar el botón Restablecer predeterminado en este mismo cuadro de diálogo. El campo

Tipo de documento

permite elegir entre diferentes tipos de archivo de salida, siendo el tipo predeterminado

HTML 5

. Despliegue este campo para comprobar las opciones que contiene y mantenga el valor por defecto.

En cuanto al campo

Adjuntar archivo CSS

, como su nombre indica, permite asignar al nuevo documento una hoja de estilos CSS determinada. Sin embargo, y dado que todavía no hemos trabajado con estos elementos, pulse el botón

Crear

.

En este caso, se abre el cuadro de diálogo

Guardar archivo de hoja de estilos como

, en el cual debemos asignar un nombre y una ubicación al nuevo documento. Como no vamos a trabajar con él, pulse el botón

Guardar

sin realizar ningún cambio.

En la parte superior del documento generado aparece un pequeño recuadro con algunas indicaciones acerca de cómo completar páginas de este tipo.

IMPORTANTE

Una vez creado el documento con diseño de cuadrícula fluida, compruebe como en la barra de estado se muestran distintos iconos que le permitirán cambiar entre los modos de pantalla disponibles.

005

Trabajar con el diseño y el código

DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.

IMPORTANTE

En la categoría Tamaños de ventana del cuadro de diálogo Preferencias se pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.

Para realizar este ejercicio, descargue desde nuestra web el archivo

muestra.htm

y ábralo en Dreamweaver mediante el comando

Abrir

del menú

Archivo

.

La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. En el espacio de trabajo

Diseñador

, Dreamweaver presenta en la vista

Diseño

todos los documentos que permiten este modo de visualización. Haga clic en el botón

Código

de la barra de herramientas

Documento

.

Para cambiar de una vista a otra también puede utilizar las opciones disponibles en el menú Ver.

El documento pasa a mostrarse en forma de código. De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, como los estilos CSS, no pueden ser editados de forma visual y sólo es posible editarlos tecleando el código. Pero los documentos HTML pueden ser editados de forma visual. Vuelva a la vista

Diseño

.

En la vista

Diseño

podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo su aspecto. Pulse sobre la imagen de la página y pase a la vista

Código

.

El lenguaje HTML está basado en etiquetas. Si seleccionamos un elemento de la página en la vista

Diseño

, su etiqueta quedará seleccionada en la vista

Código

. Compruébelo pulsando el botón

Dividir

de la barra de herramientas Documento.

Este modo de visualización divide la ventana del documento en dos partes. En la izquierda se muestra el código y en la derecha se ve la representación visual del archivo. Haga doble clic sobre una de las palabras de la página en la ventana de diseño.

En la parte inferior de la ventana del documento se sitúa la

Barra de estado

, donde se encuentra el

Selector de etiquetas

, que muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en una de las etiquetas y compruebe que se selecciona el elemento definido por ésta en la vista

Diseño

y el correspondiente fragmento de programación en la vista

Código

.

Pulse el botón

Código

de la barra de herramientas Documento y haga clic en la etiqueta

body

de la

Barra de estado

.

La selección de esta etiqueta comporta la de todos los elementos contenidos en la página. Cambie a la vista

Diseño

pulsando este botón de la barra Documento para dar por acabado el ejercicio.

IMPORTANTE

Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Los tamaños preestablecidos sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas.

006

Conocer los elementos de una página web

LA VISTA DISEÑO SÓLO MUESTRA por defecto el contenido del cuerpo de la página, pero Dreamweaver permite editar su cabecera también de forma visual. Para ello, debe mostrarse el Contenido de head. Cada una de las etiquetas de esta sección puede ser modificada a través del Inspector de propiedades. El usuario puede definir fácilmente propiedades como el título, las etiquetas meta o los estilos de color empleados. El panel de propiedades también se usa para modificar los elementos contenidos en el cuerpo de la página.

IMPORTANTE

Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.

Con el documento

muestra.html

abierto en Dreamweaver, despliegue el menú

Ver

y seleccione la opción

Contenido de Head

.

Aparece la representación visual de la sección

head

bajo la barra de herramientas Documento. Para mostrar el código correspondiente, haga clic en el botón

Dividir

de esa barra.

Cuando divida el área de trabajo en las dos vistas, los elementos de head continuarán en la parte superior de la vista Diseño.

Dreamweaver muestra un icono por cada uno de los elementos de la sección head. Seleccione el primero.

La etiqueta correspondiente,

title

, se selecciona. El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, Título, que se muestra ya en el panel de propiedades. No debe confundirse el título de la página con el nombre del archivo: el título se muestra en la

Barra de título

del navegador cuando se visualiza la página publicada. Seleccione el texto del campo

Título

de la

Barra de herramientas Documento

, escriba la palabra

muestra

y pulse la tecla

Retorno

para confirmar el cambio.

También puede cambiar el título de su página escribiéndolo directamente en la etiqueta del código o bien en el campo Título del Inspector de propiedades.

La codificación del documento se almacena en una etiqueta

meta

en el área de encabezado del documento. Para comprobarlo, haga clic en el segundo icono de la sección

head

.

Esta información, que consta de tres propiedades, queda establecida automáticamente durante la generación del documento, en función del formato que éste presente.

Esta etiqueta indica al navegador cómo se debe descodificar el documento y qué fuentes se deben utilizar para mostrar el texto descodificado. Seleccione el tercer elemento de la sección

head

.

Esta sección se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Haga clic en el botón

Diseño

de la

Barra de herramientas Documento

.

Nuestra página de ejemplo cuenta con algunos de los elementos clásicos que conforman una página web. Haga doble clic, en la ventana del documento, sobre la palabra

Página

.

El panel Propiedades presenta los atributos del texto actualmente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra

Pulse

.

El texto definido como enlace aparece en el campo

Vínculo

. Los enlaces también pueden añadirse a imágenes. Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, videos y diversos tipos de elementos multimedia. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.

IMPORTANTE

Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Para desactivarlas puede optar por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales y activar la opción Ocultar todas las ayudas visuales.

007

Guardar y editar básicamente un documento

PUEDE GUARDAR LOS DOCUMENTOS de Dreamweaver con el nombre y ubicación predefinidos por el programa o modificarlos desde el cuadro de diálogo Guardar como. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo y las funciones habituales de copia, pegado, etc., se encuentran en el menú Edición.

IMPORTANTE

El cuadro de diálogo que aparece al ejecutar el comando Pegar permite insertar un texto descriptivo del elemento pegado; dicho texto servirá de ayuda para aquellas personas con problemas visuales.

En el ejercicio anterior hemos utilizado el documento HTML

muestra

, que ha sido modificado. Por eso aparece un asterisco en su pestaña. El método más sencillo para almacenar los cambios efectuados consiste en la ejecución del comando

Guardar

desde el menú

Archivo

. Hágalo.

El programa guarda los cambios efectuados, conservando la ubicación original y el nombre del documento. La opción

Guardar

se ve complementada por los comandos

Guardar como, Guardar todo, Guardar todos los archivos relacionados

y

Guardar como plantilla

. Abra el menú

Archivo

y elija la opción

Guardar como

.

La utilización de este comando está indicada para almacenar los documentos editados como copia de los originales. Su ejecución conduce al cuadro de diálogo

Guardar como

, que también se muestra al almacenar un documento por primera vez. Este cuadro permite seleccionar el directorio en el que se almacenará el archivo y cambiar su nombre. En el campo

Nombre

, pulse tras la última letra de la palabra

muestra

, inserte un número 2 y haga clic en el botón

Guardar

.

En el cuadro de diálogo que aparece, pulse en Sí para actualizar los vínculos, aunque no hayamos realizado ningún cambio sobre los mismos.

Ahora contamos con dos documentos iguales, siendo la copia,

muestra2

, la que se muestra activada para su edición. En la segunda parte del ejercicio trabajaremos con la barra de herramientas Estándar, la cual proporciona acceso directo a las funciones más utilizadas de los menús

Archivo

y

Edición

y que, por defecto, se encuentra oculta. Para mostrarla, abra el menú

Ver

, pulse sobre la opción

Barras de herramientas

y haga clic en

Estándar

.

Como en cualquier otro programa que trabaje en el entorno Windows, el comando Cortar responde a la combinación de teclas Ctrl + X y el comando Pegar, a la combinación Ctrl + V.

La barra de herramientas

Estándar

se sitúa por debajo de la barra

Documento

. Seleccione la imagen situada en el centro de la página.

Los seis primeros botones de la barra Estándar dan acceso a las funciones

Nuevo, Abrir, Examinar en Bridge, Guardar, Guardar todo

e

Imprimir código

, todas ellas incluidas en el menú

Archivo

. El siguiente grupo de botones se corresponde con comandos del menú

Edición

. Haga clic en el botón

Cortar

, cuyo icono muestra unas tijeras.

Abra el menú

Edición

y seleccione el comando

Pegar

.

En el cuadro de diálogo que aparece puede añadir si lo desea una descripción de la imagen. Pulse

Cancelar

.

IMPORTANTE

El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. Por su parte, el comando Guardar como plantilla sólo es posible si previamente se ha creado un sitio.

008

Crear sitios locales

UN SITIO WEB ES UN CONJUNTO DE ARCHIVOS enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver es una herramienta de creación y gestión de sitios Web completos, además de un editor visual de páginas. Para crear un sitio Web local tan sólo es necesario determinar el directorio del equipo que se convertirá en la carpeta raíz del sitio. En la carpeta local se almacenan los archivos con los que está trabajando en un sitio de Dreamweaver.

IMPORTANTE

Para desarrolladores experimentados, el programa posibilita la introducción directa de los datos de configuración del sitio en la ficha Avanzadas del cuadro de diálogo configuración del sitio para…

Para crear un nuevo sitio haga clic en el enlace

Administrar sitios

del panel

Archivos

, en la parte inferior derecha del área de trabajo, y, en el cuadro de diálogo del mismo nombre, pulse en el botón

Nuevo Sitio

.

Se abre de este modo el cuadro

Configuración del sitio para…

En primer lugar es necesario nombrar y ubicar el nuevo sitio. En el campo

Nombre del sitio

introduzca

elemental

.

Un sitio consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web seleccionado. La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como

sitio local

y puede estar tanto en el equipo local como en un servidor de red. Haga clic sobre el icono

Examinar

del campo carpeta de sitio local.

Se abre la ventana

Elegir la carpeta raíz

en la que debe seleccionar la ubicación del nuevo sitio. Seleccione el

escritorio

y cree una carpeta usando el botón

crear nueva carpeta

con el nombre

elemental

.

Abra la nueva carpeta y pulse el botón

Seleccionar

.

La carpeta raíz, en la que se almacenarán todos los archivos necesarios para la creación de nuestra web está seleccionada. De momento dejaremos todas las opciones de la configuración avanzada tal y como están y procederemos a la creación definitiva del nuevo sitio. Para ello, pulse el botón

Guardar

y, en el cuadro de advertencia que aparece, pulse el botón

Aceptar

.

El nuevo sitio se encuentra ahora en la ventana

Administrar sitio

. Desde esta ventana es posible editar, modificar y eliminar los sitios creados. Ahora pulse el botón

Listo

para acabar con el proceso de creación de un nuevo sitio.

El nuevo sitio se ha creado y podemos comprobarlo desde el panel

Archivos

. Haga doble clic sobre la palabra

elemental

que se encuentra en el botón desplegable de la parte superior del panel

Archivo

.

Verá que de este modo se abre de nuevo el cuadro

Configuración del sitio para elemental

. Puesto que en este momento no realizaremos ninguna modificación en el sitio elemental pulse el botón

Cancelar

.

Por último sepa que es posible crear más sitios nuevos o eliminar los creados desde el cuadro Administrar de sitios, al cual ahora accederemos desplegando el panel de carpetas en el que vemos la carpeta elemental.

IMPORTANTE

Una aplicación Web es un conjunto de páginas que interactúan entre sí, con el usuario y con diversos recursos en un servidor Web, incluidas bases de datos. Haga clic en el botón más (+) dentro de la categoría Servidores para activar el cuadro con las distintas tecnologías de servidor. Dreamweaver posibilita la creación de aplicaciones Web mediante las tecnologías de servidor ColdFusion, ASP. NET, ASP, JSP y PHP. Cada una corresponde a un tipo de documento en Dreamweaver. La elección de una tecnología de servidor para la aplicación Web depende de diversos factores, incluidos su grado de conocimiento de los lenguajes de programación y la configuración del servidor de aplicaciones que vaya a utilizar.

009

Administrar sitios locales

PARA FACILITAR SU GESTIÓN POSTERIOR, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar.

IMPORTANTE

Además de cambiar su aspecto, el cuadro Administrar sitios presenta como novedad los botones Importar sitio de Business Catalyst y Nuevo sitio de Business Catalyst.

Para empezar, pulse el botón de flecha de la palabra

elemental

, incluida en el desplegable

Mostrar

del panel

Archivos

.

El desplegable

Mostrar

posibilita el acceso a todos los sitios configurados, al

Escritorio

, y a las unidades de almacenamiento del equipo. Seleccione la opción

Escritorio

y pulse en el signo + que precede a la carpeta

Elementos de escritorio

.

En el

Escritorio