Título de la obra:
Aprender Dreamweaver CS4 con 100 ejercicios prácticos
Primera edición, 2009
© 2009 MEDIAactive
Pallars, 141-143 5o B
08018 Barcelona
www.mediaactive.es
© 2009 MARCOMBO, S.A.
Gran Via de les Corts Catalanes, 594
08007 Barcelona
www.marcombo.com
Diseño de la cubierta: OENE DISSENY
ISBN: 978-84-267-1615-6
Quedan rigurosamente prohibidas, sin la autorización escrita de los titulares del copyright, bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático, así como la distribución de ejemplares mediante alquiler o préstamo públicos.
APRENDER DREAMWEAVER CS4 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 CS4, 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 CS4.
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 CS4
Dreamweaver CS4 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 sencillo y a la vez 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…” |
001 La Ventana de bienvenida
002 La nueva interfaz de usuario
003 Crear documentos
004 Visualizar varios archivos simultáneamente
005 Diseño y código de páginas web
006 Conocer los elementos de una página web
007 Trabajar con los comandos básicos
008 Crear sitios locales
009 Administrar sitios locales
010 Aplicar un fondo
011 Aplicar una imagen de fondo
012 Imágenes de rastreo y notas de diseño
013 Exportar y eliminar sitios
014 importar sitios
015 Duplicar y editar sitios
016 introducir texto
017 Copiar y pegar texto
018 Cambiar el formato de párrafo
019 Modificar las propiedades de fuentes
020 Cambiar el color del texto
021 Crear archivos de InContext Editing
022 Establecer márgenes y alineación
023 Añadir sangrías y crear listas
024 Estilos y elementos de listas
025 Caracteres especiales y reglas horizontales
026 Insertar imágenes
027 Origen y copia de imágenes
028 Cambiar tamaño y dimensiones de imágenes
029 Alinear imágenes
030 Editar imágenes
031 Origen base, espaciado y zonas interactivas
032 Insertar documentos PSD de Photoshop
033 Insertar enlaces
034 Errores y navegadores
035 Vista previa y enlaces
036 Utilizar la nueva Vista en vivo
037 Enlaces y propiedades de las páginas
038 Insertar tablas
039 Trabajar con filas, columnas y celdas
040 Cambiar las propiedades de tabla
041 Propiedades de filas, columnas y celdas
042 Dividir y combinar celdas
043 Combinar Dreamweaver con Word y Excel
044 Limpiar HTML
045 Anidar tablas
046 Ordenar tablas
047 Exportar e importar datos de tablas
048 Modos de trabajo con tablas
049 Propiedades de la página y estilos CSS
050 Aplicar estilos CSS
051 Aplicar hojas de estilos de muestra
052 Definir estilos de etiquetas HTML
053 Trabajar con archivos relacionados
054 Editar hojas de estilos
055 Definir nuevas reglas de estilos
056 Importar y vincular hojas de estilos
057 Navegar al código relacionado
058 Crear estilos de clase
059 Duplicar y aplicar estilos de clase
060 Combinar hojas de estilos
061 Categorías de definición de estilos
062 Identificadores y estilos
063 Conjuntos de marcos
064 Cambiar el origen de los marcos
065 Insertar marcos
066 Propiedades de marcos
067 Marcadores de posición de imagen
068 Crear imágenes de sustitución
069 Insertar barras de navegación
070 Editar barras de navegación
071 Insertar películas Flash
072 Insertar vídeos Flash
073 Vincular sonidos
074 Incrustar sonidos
075 Enlaces, marcos y destinos
076 Anclajes con nombre
077 Insertar elementos PA
078 Propiedades de elementos PA
079 Elementos PA y tablas
080 Crear formularios
081 Objetos de formularios
082 Añadir comportamientos
083 Acciones de formulario
084 Funciones de JavaScript
085 Llamar JavaScript
086 Utilizar sugerencias para el código JavaScript
087 Crear plantillas y regiones editables
088 Crear documentos a partir de plantillas
089 El panel Historial y los comandos personalizados
090 Crear un conjunto de datos con Spry
091 Insertar tablas y regiones Spry
092 Insertar widgets
093 Aplicar efectos Spry
094 El panel Activos
095 Elementos de Biblioteca
096 Comprobar un sitio
097 Configurar un sitio remoto
098 Colocar y obtener archivos
099 Actualizar con Subversion
100 Utilizar la ayuda de Dreamweaver
| 001 |
La Ventana de bienvenida |
AL ACCEDER A DREAMWEAVER CS4, 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 también se puede acceder a una visita guiada o a un tutorial del producto, con el fin de profundizar en los conocimientos sobre el programa.
- En el Escritorio, haga clic en el botón Iniciar de la Barra de tareas, pulse en la opción Todos los programas, haga clic en la carpeta de la suite de Adobe y elija Dreamweaver CS4.
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 Ventana de bienvenida. Por defecto, Dreamweaver utiliza el espacio de trabajo Diseñador. Los grupos de paneles se pueden ocultar y mostrar según las preferencias del usuario. 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. Pulse sobre el icono del programa, situado en el extremo izquierdo de la Barra de la aplicación, novedad en Dreamweaver CS4 y, del menú de control que aparece, elija la opción Minimizar.
También puede encontrar estas opciones de control en forma de botones en el extremo derecho de la Barra de la aplicación.
- El programa queda reducido a un botón en la Barra de tareas. Haga clic en él, abra el menú Archivo y elija la opción Cerrar.
- El cierre del documento comporta la reaparición de la Ventana de bienvenida. Además de las tradicionales páginas web HTML, Dreamweaver permite crear y editar documentos basados en otros lenguajes de programación. Haga clic en el enlace PHP y después pulse el botón de aspa de la pestaña del documento.
- El enlace Más del apartado Crear nuevo conduce al cuadro Nuevo documento que permite crear todo tipo de documentos editables con el programa. El enlace Sitio de Dreamweaver, por su parte, conduce al cuadro de diálogo Definición del sitio . Compruébelo y salga del asistente pulsando el botón Cancelar.
El botón Sitio de Dreamweaver abre un asistente para la creación de un sitio.
En el apartado Elementos destacados, la Ventana de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS4. También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana.
| 002 |
La nueva interfaz de usuario |
EL DISEÑO DE LA INTERFAZ de los diferentes componentes de Adobe Creative Suite CS4, entre los que se encuentra Dreamweaver, es ahora más cómodo e intuitivo y permite trabajar de forma más rápida y racional. El nuevo 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. Además, los documentos abiertos aparecen distribuidos en fichas independientes por las que se puede navegar fácilmente.
- En la parte superior de la interfaz de Dreamweaver CS4 se ubica la nueva Barra de la aplicación, que contiene un conmutador de espacios de trabajo, los menús y otros controles de la aplicación. Haga clic en el tercer icono de esa barra y pulse sobre la opción Nuevo sitio.
La nueva Barra de la aplicación ofrece acceso directo a las operaciones más comunes que se llevan a cabo con Dreamweaver, como la creación de un sitio web.
- Puede acceder así fácil y rápidamente al asistente para la creación de un nuevo sitio web. Ciérrelo pulsando el botón Cancelar.
- Para seguir conociendo el entorno de Dreamweaver, cree un documento en blanco pulsando el botón HTML de la Ventana 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 Barra de la aplicación se ubica 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 v entana , 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. Debajo de la Ventana del documento hallamos el Inspector de propiedades, un utilísimo panel que nos 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. Ciérrelo pulsando Cancelar.
- Por último, 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. Para volver a mostrar en primer plano el panel Estilos CSS y acabar el ejercicio abra dicho menú y pulse sobre esa opción.
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 ordenar la generación automática de un documento nuevo basado en el tipo predeterminado definido.
- Para empezar, haga clic en el enlace HTML de la Ventana de bienvenida. Después, en el nuevo documento en blanco que se ha creado, abra el menú Archivo y elija la opción Nuevo.
Puede acceder al cuadro de diálogo Nuevo documento usando la opción Nuevo del menú Archivo o bien pulsando la combinación de teclas Ctrl.+N. En ese cuadro deberá elegir el tipo de documento que va a crear con Dreamweaver.
- La primera columna de opciones del cuadro Nuevo documento permite la creación de una página en blanco, una plantilla en blanco, 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 Página de plantilla.
- El panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro.
Los tipos de archivo de la categoría Otro están destinados a programadores experimentados.
- Los tipos de archivo listados en esta categoría 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. Pulse sobre la categoría Página de muestra.
- Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.
- Aparece el nuevo documento CSS modificado en su creación, como indica el asterisco junto al nombre del archivo en su pestaña. 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 primer diseño de página de 2 columnas elásticas para ver su aspecto.
- Pulse el botón Preferencias y, en el cuadro Preferencias, haga clic en el botón de flecha de la opción Documento predeterminado para acceder a sus opciones.
- Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Mantenga seleccionada la opción HTML y haga clic en Aceptar.
Desde el cuadro de preferencias de Dreamweaver puede indicar qué tipo de documento será el documento predeterminado.
- 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.
| 004 |
Visualizar varios archivos simultáneamente |
DREAMWEAVER MUESTRA LOS DIFERENTES documentos abiertos distribuidos en fichas. Sus pestañas los identifican y permiten activarlos fácilmente. De forma predeterminada, las fichas se muestran en el orden de creación o apertura de los archivos pero se pueden arrastrar para cambiarlas de posición. Las fichas sólo se muestran cuando la ventana del archivo se encuentra maximizada; en caso contrario, las ventanas funcionan como las tradicionales de Windows. Dreamweaver también permite disponer los archivos en forma de Cascada y Mosaico, opciones clásicas de distribución de ventanas del sistema operativo de Microsoft.
- Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, debe disponer de una página HTML de ejemplo almacenada en su equipo. Abra el menú Archivo y pulse en la opción Abrir.
Puede acceder al cuadro de diálogo Abrir usando esa opción del menú Archivo o bien la combinación de teclas Ctrl.+O.
- La acción nos conduce al cuadro de diálogo Abrir. Localice y seleccione su archivo de ejemplo y pulse el botón Abrir.
- Abra el menú Ventana y pulse sobre uno de los documentos sin título para mostrarlo en primer plano.
En la parte final del menú Ventana puede ver la lista de todos los documentos abiertos en estos momentos. Puede activarlos pulsando sobre ellos.
- El archivo de ejemplo sigue abierto, pero permanece inactivo. Haga clic en la pestaña de ese archivo para activarlo.
- Esta disposición en forma de fichas facilita la selección de los archivos para su edición. Pero el programa permite distribuirlos de otras maneras. Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Ábralo y seleccione la opción Cascada.
Dreamweaver permite mostrar las ventanas de los diferentes documentos abiertos en forma de cascada, de mosaico horizontal o de mosaico vertical.
- Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows . Para activar un documento, basta con hacer clic sobre su ventana. Los botones de control de la ventana, en el extremo derecho de su Barra de título, permiten controlar su estado de modo directo. Pulse el botón Minimizar de la ventana del documento de ejemplo.
- El documento queda ubicado en la esquina inferior izquierda del área de trabajo. Pulse el botón Maximizar del siguiente archivo.
- El área de trabajo recupera su distribución inicial, distribuyendo los diferentes documentos en fichas. Abra el menú Ventana y seleccione la opción Mosaico horizontal.
- El documento de ejemplo sigue minimizado. En su Barra de título, el primero de los botones de control muestra el icono identificativo del comando Restaurar , que devolverá a la ventana el aspecto que presentaba antes de ser minimizada. Púlselo.
Utilice los botones Restaurar, Maximizar y Minimizar de las Barras de título de las ventanas de los documentos para cambiar el tamaño de las mismas.
- Además el programa permite aplicar ciertas acciones a la totalidad de documentos en uso. Abra el menú Archivo y pulse en la opción Cerrar todos.
- Aparece un cuadro de advertencia que propone almacenar los cambios en los documentos que han sido modificados. Si los documentos no se guardan será imposible recuperarlos. Pulse el botón No para dar por acabado el ejercicio.
Si va a cerrar un documento que ha sido modificado, el programa le pregunta antes si desea almacenar esas modificaciones.
| 005 |
Diseño y código de páginas web |
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.
- Toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación. Con su documento de ejemplo abierto en Dreamweaver, despliegue el menú Ver.
- 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. Seleccione la opción Código.
Para cambiar de una vista a otra utilice las opciones disponibles en el menú Ver o bien los botones de la Barra de herramientas Documentos. Recuerde que puede mostrar esta barra seleccionándola en la opción Barras de herramientas del 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. Haga clic en el botón Diseño de la barra de herramientas Documento.
En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa para modificar su aspecto.
- 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 una imagen de su página y haga clic en el botón Código de la barra Documento.
- El lenguaje HTML se basa en la introducción de 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 superior se muestra el código y en la inferior 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.
Para trabajar conjuntamente con el código y con el diseño de una página, active la vista Dividir, que divide en dos partes el área de trabajo.
- 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.
En la Barra de estado se encuentra el Selector de etiquetas, que permite seleccionarlas para modificarlas.
- 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.
| 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.
- Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head. (Puede encontrar este archivo en nuestra página de descargas).
- 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.
Los iconos para acceder al contenido de Head aparecen bajo la Barra de herramientas Documento.
- 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 Inspector de propiedades. Seleccione mediante el arrastre la expresión Documento sin título, que aparece en el cuadro Título de la barra de herramientas Documento.
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 de la Barra de herramientas Documento o del Inspector 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. Escriba la palabra prueba y pulse la tecla Retorno para confirmar el cambio.
- Haga clic en el segundo icono de la sección head.
La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. 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.
- La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento . 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, pulse el icono Ver opciones, el cuarto empezando por la derecha, y haga clic en la opción Contenido de Head.
Para ocultar el Contenido de Head, desactive esa opción en el menú de opciones 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. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.
En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este manual, MEDIAactive.
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, vídeos y diversos tipos de elementos multimedia.
| 007 |
Trabajar con los comandos básicos |
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.
- 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 en un documento consiste en la ejecución del comando Guardar desde el menú Archivo. Este comando puede ser ejecutado directamente mediante la combinación de teclas Ctrl.+S. Abra el menú Archivo y pulse en el comando Guardar.
- 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 en servidor remoto y Guardar como plantilla. Abra el menú Archivo y elija la opción Guardar como.
El cuadro Guardar como, al que se accede usando esa opción del menú Archivo, es similar al cuadro Abrir y permite seleccionar el directorio en el que se almacenará el archivo. Para ello presenta el cuadro desplegable Guardar en y el panel de accesos directos. Además permite el cambio del nombre del documento.
- 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, similar al cuadro Abrir, 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 para almacenar el archivo con el nuevo nombre.
Al guardar una copia de un documento a través del cuadro Guardar como, tanto ésta como el original continúan abiertas en el programa.
- Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición . El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. La selección del comando Guardar en servidor remoto, por su parte, conduce al cuadro de diálogo Guardar archivo que permite almacenar los documentos en los equipos remotos utilizados para publicar los sitios. Abra el menú Archivo y seleccione el comando Guardar como plantilla.
- El uso de plantillas sólo es posible si previamente se ha creado un sitio. Pulse el botón Cancelar del cuadro informativo.
Para poder guardar plantillas, debe existir un sitio.
- La barra de herramientas Estándar proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición. 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.
La Barra de herramientas Estándar puede visualizarse desde el comando Barras de herramientas del menú Ver.
- 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 Aceptar.
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.
- La aplicación cuenta con un menú que contiene los comandos relacionados con la creación y gestión de sitios. También puede acceder a algunos de esos comandos utilizando el botón Sitio de la nueva Barra de la aplicación. Pulse ese botón, el tercero de dicha barra, y seleccione la opción Administrar sitios.
El icono Sitio de la nueva Barra de la aplicación contiene dos opciones que permiten acceder directamente al asistente para la creación de un nuevo sitio y al administrador de sitios.
Configurar un sitio de Dreamweaver permite organizar los documentos asociados. Los sitios se pueden gestionar y crear desde el cuadro Administrar sitios. Al seleccionar la opción Nuevo sitio de este cuadro se accede al asistente para la creación de sitios.
- Haga clic en el botón Nuevo y seleccione la opción Sitio.
- El asistente para la definición del sitio presenta tres secciones: Editando archivos, Comprobando archivos y Compartiendo archivos. El primer paso consiste en asignar un nombre al sitio. Pulse la tecla Suprimir para eliminar el nombre propuesto por el programa, escriba la palabra elemental y pulse el botón Siguiente.
- El segundo paso permite indicar si está creando una aplicación Web. Mantenga seleccionada la opción No, no deseo utilizar una tecnología de servidor y pulse en Siguiente.
- 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. El campo ¿En qué lugar desea almacenar los archivos? presenta como ubicación provisional la carpeta elemental contenida en el directorio Documentos. Para cambiarla, pulse en el icono de la carpeta.
Utilice el icono de carpeta del campo ¿En qué lugar del equipo desea almacenar los archivos? para localizar su carpeta raíz.
- En el cuadro Elegir carpeta raíz local para el sitio elemental. pulse el botón Escritorio del panel de accesos directos y haga clic en el botón Nueva carpeta, el tercero del grupo de botones de la parte superior.
- Esta carpeta será la raíz de nuestro sitio local. Escriba la palabra elemental y pulse dos veces la tecla Retorno.
- Pulse el botón Seleccionar para marcar la nueva carpeta como carpeta local raíz de nuestro sitio y haga clic en Siguiente.
- Para transferir archivos a un servidor o desarrollar aplicaciones Web se deben añadir los datos de configuración de un sitio remoto y de un servidor de prueba. Pulse el botón de flecha del cuadro ¿Cómo conecta con su servidor remoto?
- En la carpeta remota se almacenan los archivos, según el entorno de desarrollo, para fines de prueba, producción y colaboración. Seleccione la opción Ninguno y pulse el botón Siguiente.
La carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web y en ella se guardan los archivos para fines de colaboración.
- La pantalla final, llamada Resumen, muestra la configuración seleccionada para el sitio elemental. Pulse el botón Completado y, para crear definitivamente el sitio local, haga clic en el botón Listo del cuadro de diálogo Administrar sitios.