Читать книгу: «Manual de Dreamweaver CS5»
Manual de
Manual de
Manual de Dreamweaver CS5
© MEDIAactive
Primera edición, abril 2011
© 2011 MARCOMBO, S.A.
Gran Via de les Corts Catalanes, 594
08007 Barcelona (España)
www.marcombo.com
en coedición con:
© 2011 ALFAOMEGA GRUPO EDITOR, S.A. de C.V.
C/ Pitágoras 1139 - Colonia del Valle
03100 – México D.F. (México)
www.alfaomega.com.mx
Diseño de la cubierta: NDNU DISSENY GRÀFIC
Con la colaboración de:
«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-1860-0
ISBN por Alfaomega: 978-60-770-7141-9
ISBN (obra completa): 978-84-267-1674-3
D.L.:
Printed in Spain
Índice
Presentación
Espacio de trabajo y gestión de archivos
Introducción
Lección 1. Acceder a Dreamweaver: la Ventana de bienvenida
Lección 2. Conocer la interfaz de usuario del programa
Lección 3. Gestionar los conjuntos de paneles
Lección 4. Crear nuevos documentos
Lección 5. Ver distintos archivos a la vez
Lección 6. Alternar entre las vistas de diseño y de código
Lección 7. Elementos básicos de una página web
Lección 8. Uso de comandos básicos en Dreamweaver
Gestión de sitios y páginas
Introducción
Lección 9. Creación de un sitio web local
Lección 10. Administración de un sitio local
Lección 11. Aplicar un color de fondo a una página
Lección 12. Insertar una imagen de fondo a una página
Lección 13. Insertar una imagen de rastreo
Lección 14. Insertar notas de diseño
Lección 15. Exportar y eliminar un sitio local
Lección 16. Importar un sitio local a Dreamweaver
Lección 17. Duplicar y editar un sitio local
El texto en Dreamweaver
Introducción
Lección 18. Insertar texto
Lección 19. Seleccionar, copiar y pegar texto
Lección 20. Modificar el formato de un párrafo
Lección 21. Cambiar el tipo y el tamaño de la fuente
Lección 22. Aplicar un estilo al texto
Lección 23. Aplicar color al texto
Lección 24. Trabajar con colores personalizados y seguros
Lección 25. Cambiar márgenes y alineación
Lección 26. Aplicar sangrías y crear lista de elementos
Lección 27. Cambiar el formato de una lista
Lección 28. Insertar caracteres especiales
Lección 29. Insertar reglas horizontales
Lección 30. Crear archivos de InContext Editing
Lección 31. Revisar la ortografía de un documento
Lección 32. Buscar y reemplazar texto
Gestión de imágenes
Introducción
Lección 33. Insertar una imagen en una página
Lección 34. Cargar y copiar imágenes
Lección 35. Redimensionar y recortar imágenes
Lección 36. Alinear imágenes
Lección 37. Editar una imagen para modificarla
Lección 38. Trabajar con editores externos
Lección 39. Insertar una instancia de imagen
Lección 40. Insertar una imagen desde Photoshop
Gestión de enlaces y previsualización
Introducción
Lección 41. Insertar un enlace
Lección 42. Crear enlaces a correo electrónico y a imágenes
Lección 43. Comprobar la previsualización en un navegador
Lección 44. Previsualizar una página web
Lección 45. Modificar las propiedades de los enlaces
Lección 46. Aplicar formato a los hipertextos
Lección 47. Navegar en la Vista en vivo
El trabajo con tablas
Introducción
Lección 48. Insertar una tabla
Lección 49. Gestionar filas, columnas y celdas
Lección 50. Cambiar el tamaño de la tabla, las columnas y las filas
Lección 51. Consultar y modificar las propiedades de una tabla
Lección 52. Modificar las propiedades de columnas y filas
Lección 53. División y combinación de celdas
Lección 54. La interacción de Dreamweaver con Word
Lección 55. La interacción de Dreamweaver con Excel
Lección 56. Limpieza de código HTML
Lección 57. Crear tablas anidadas
Lección 58. Ordenar las tablas existentes
Lección 59. Exportar e importar datos de una tabla
Lección 60. Conocer los modos de trabajo con tablas
Lección 61. Utilizar la cuadrícula y las reglas
Etiquetas HTML y estilos
Introducción
Lección 62. Configurar los estilos CSS
Lección 63. Aplicar estilos CSS
Lección 64. Trabajar con hojas de estilos de muestra
Lección 65. Definir estilos para etiquetas HTML
Lección 66. Los archivos relacionados
Lección 67. Editar una hoja de estilos
Lección 68. Definición de nuevas reglas de estilo
Lección 69. Incrustar, importar y vincular hojas de estilo
Lección 70. Utilizar un diseño de inicio CSS
Lección 71. El Navegador de código
Lección 72. Crear un estilo de clase
Lección 73. Duplicar y aplicar un estilo de clase
Lección 74. Combinación de hojas de estilo
Lección 75. Conocer las categorías de definición de estilos
Lección 76. Reglas de estilo avanzadas
Lección 77. Trabajar con el nuevo modo de inspección CSS
Uso de marcos y multimedia
Introducción
Lección 78. Crear conjuntos de marcos
Lección 79. Cambiar el origen de los marcos
Lección 80. Insertar un marco
Lección 81. Modificar las propiedades de un marco
Lección 82. Insertar un marcador de posición de imagen
Lección 83. Crear una imagen de sustitución
Lección 84. Insertar un vídeo de Flash
Lección 85. Insertar un botón de Flash
Lección 86. Vincular e incrustar sonidos
Lección 87. Cambiar el destino de un enlace
Lección 88. Insertar anclajes con nombre
Conceptos avanzados
Introducción
Lección 89. Insertar elementos PA
Lección 90. Manipular las propiedades de los elementos PA
Lección 91. Convertir un elemento PA en tabla
Lección 92. Crear un formulario
Lección 93. Insertar objetos en el formulario
Lección 94. Agregar comportamientos
Lección 95. Asignar una acción a un formulario
Lección 96. Insertar funciones de Javascript
Lección 97. Definir comportamientos con JavaScript
Lección 98. Usar sugerencias para el código JavaScript
Lección 99. Plantillas y regiones editables
Lección 100. Crear un documento a partir de una plantilla
Lección 101. Automatizar tareas desde el panel Historial
Lección 102. Generar un conjunto de datos de Spry
Lección 103. Insertar tablas y regiones de Spry
Lección 104. Trabajar con widgets
Lección 105. Insertar barras de menús de Spry
Lección 106. Aplicar efectos Spry
Gestión avanzada de sitios
Introducción
Lección 107. Conocer el panel Activos
Lección 108. Elementos de biblioteca
Lección 109. Opciones de visualización del panel Archivos
Lección 110. Comprobar localmente un sitio
Lección 111. Configurar un servidor remoto
Lección 112. Colocar y obtener archivos
Lección 113. Proteger y desproteger archivos
Lección 114. Obtener ayuda en Dreamweaver CS5
Presentación
Dreamweaver CS5 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 las lecciones que componen este manual.
La versión CS5 de Dreamweaver no presenta muchas novedades, aunque las pocas existentes pueden calificarse de interesantes y necesarias. Así, el lector podrá activar y deshabilitar las propiedades de CSS directamente desde el panel Estilos CSS, acción ésta mucho más directa que antes; dispondrá del modo de inspección, gracias al cual podrá consultar visualmente las propiedades del modelo del cuadro CSS, incluidos el relleno, el borde y el margen de los elementos de las páginas, de forma detallada y sin necesidad de leer el código ni de utilizar ninguna utilidad independiente. Los diseños de inicio de CSS también han sido incorporados como novedad en esta versión del programa, concretamente actualizados y simplificados; cabe destacar que han sido eliminados los complejos selectores descendentes de los diseños incluidos en la versión CS4 y han sido reemplazados por clases simplificadas mucho más fáciles de comprender.
La función Archivos relacionados dinámicamente, la navegación en la denominada Vista en vivo, la configuración simplificada de sitios y las sugerencias para el código específicas de cada sitio son otras novedades que el usuario encontrará en la versión CS5 de Dreamweaver.
Nuestro método de aprendizaje
El método de aprendizaje en que se basa esta colección de manuales permite que el lector ejercite las funciones sobre el programa real desde el primer momento, pudiendo personalizar los ejercicios según sean sus necesidades o preferencias. Nuestro método se caracteriza por no dar nada por sabido guiando cuidadosamente al usuario desde los prime-ros pasos hasta el perfecto dominio del programa. Una serie de capturas de pantalla que acompañan a los ejercicios permiten asegurarse en todo momento de que el proceso se está ejecutando correctamente.
A lo largo de las lecciones que conforman el presente manual, no se trabajará con un único archivo sino que se utilizará más de uno, según la finalidad de las funciones presentadas. La continuidad en el proceso de creación que presentan muchas de las lecciones hacen que sea muy recomendable estudiarlas de forma ordenada y empezando por el principio, para así ir encontrando los documentos necesarios tal y como quedaron al ser manipulados por última vez. No obstante, con la finalidad de optimizar el curso y evitar la repetición innecesaria de procedimientos ya estudiados, algunos de los ejercicios parten de archivos de ejemplo ya creados. El lector puede optar en estos casos por realizar los ejercicios sobre un documento cualquiera creado y guardado por el alumno, o por descargar los archivos necesarios desde nuestra página Web. Es recomendable, a fin de no interrumpir el ritmo de estudio, descargarse todos los documentos necesarios y guardarlos en una carpeta del disco, antes de empezar la práctica.
En la confección de este manual, hemos tenido en cuenta que sea igualmente útil como curso completo de Dreamweaver CS5 y como libro de consulta complementario sobre este programa de creación y edición de sitios web. En cada una de las lecciones encontrará una breve descripción teórica del tema que se trata, a modo de introducción, y un ejercicio guiado paso a paso y pulsación a pulsación.
Espacio de trabajo y gestión de archivos
Introducción
Dreamweaver es el programa incluido en la suite de Adobe destinado a la creación y la gestión de sitios web. La versión CS5 del producto presenta interesantes novedades en cuanto a funciones y comandos se refiere, aunque no tantas respecto a su interfaz. En las primeras lecciones que conforman este manual, el lector tendrá una primera toma de contacto con esta interfaz y con los espacios de trabajo, así como con los elementos básicos que forman parte de una página web sencilla.
Dreamweaver cuenta con la denominada Ventana de bienvenida, que aparece por defecto al acceder al programa y que, como se verá en su momento, es posible activar y desactivar según las preferencias del usuario. Podría decirse que esta ventana de bienvenida es la puerta de entrada al trabajo más habitual con el programa, puesto que desde ella es posible abrir documentos existentes o iniciar el proceso de creación de otros nuevos. Además, dispone de vínculos de ayuda que puede proporcionarle confianza en sus primeros pasos con Dreamweaver.
La posibilidad de trabajar sobre distintos espacios de trabajo resulta una ventaja puesto que permite contar sólo con aquellos elementos de interfaz que más se utilizan.
La Ventana de bienvenida, antes denominada Página de inicio, es la puerta de entrada al trabajo con Dreamweaver.
La interfaz de Dreamweaver es bastante similar a la de otras aplicaciones de la suite de Adobe. Por ella, realizaremos un paseo en las primeras lecciones de este apartado, así como por los distintos espacios de trabajo disponibles. Los espacios de trabajo suponen la reorganización de los elementos de la interfaz de usuario basada en el tipo de documentos que se vaya a preparar. El espacio por defecto es el denominado Diseñador y ofrece una disposición de barras de herramientas y paneles muy intuitiva.
Sin ninguna duda, las primeras lecciones servirán para familiarizarse a un nivel general con la representación de los elementos contenidos en una página web en las líneas de programación de la misma.
La creación de un nuevo documento se lleva a cabo desde el cuadro de diálogo Nuevo documento, desde el cual es posible elegir entre diseños predeterminados para crear una página básica.
La creación de documentos básicos también se trata en este apartado, así como la visualización y la gestión de estos documentos. Además, en esta sección se aprovecha para mostrar las diferencias entre las vistas en que se puede mostrar un documento (Diseño, Código o ambas a la vez), conocer las distintas partes básicas de una página web (head y body) y aquellos elementos que se presentan casi como imprescindibles en una página web (imágenes, texto, vínculos, etc.).
El apartado concluye con una lección dedicada a los comandos más básicos de Dreamweaver, comandos propios de cualquier aplicación que se ejecute en un entorno Windows (Guardar, Copiar, Pegar, Deshacer...).
Lección 1. Acceder a Dreamweaver: la Ventana de bienvenida
Al acceder a Dreamweaver CS5, se carga la denominada Ventana de bienvenida, ya presente en versiones precedentes. La Ventana de bienvenida permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando la ventana del programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales del programa 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, a fin de profundizar en los conocimientos sobre Dreamweaver.
RECUERDE
Un sitio Web es un conjunto de documentos vinculados con atributos compartidos. Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de documentos por separado.
1 En esta primera lección del curso realizaremos una aproximación al espacio de trabajo de Dreamweaver CS5 y conoceremos la útil Ventana de bienvenida. La lección comienza en el Escritorio de Windows. Desde la Barra de tareas, haga clic en el botón Inicio y seleccione con un clic el directorio Todos los programas.
2 En principio, la práctica totalidad de los programas que instala en su ordenador quedan reflejados en el menú que se despliega. Haga clic en la carpeta Adobe Master Collection CS5 y, por último, pulse en la opción Adobe Dreamweaver CS5 para que se ejecute el programa.
3 Previamente a su carga propiamente dicha, la primera vez que accede a Dreamweaver, aparece la ventana Editor predeterminado, que permite designar aquellos formatos de archivo para los cuales el programa se establecerá como editor preestablecido. En este caso, se encuentran marcados los formatos más habituales con los que se trabaja, por lo que pulse en Aceptar para confirmar esta designación y continuar con la carga. (1)
Dreamweaver forma parte de la suite programas Adobe Creative Suite, que contiene aplicaciones tan conocidas y utilizadas como Photoshop, InDesign, Illustrator o Flash.
La ventana de bienvenida también se conoce en Dreamweaver como Página de inicio.
4 Ahora sí, Dreamweaver se carga y se abre mostrando en su parte central la Ventana de bienvenida. (2) Esta pantalla permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando la ventana del programa no tiene ningún documento abierto. Las opciones de la Ventana de bienvenida se dividen en cuatro bloques. Pulse el enlace Abrir del apartado Abrir un elemento reciente.
5 La acción nos conduce al cuadro de diálogo Abrir, que posibilita la selección y apertura de documentos previamente creados. Regresaremos a este cuadro de diálogo en una lección posterior, a fin de conocer su funcionamiento. De momento, pulse el botón Cancelar para salir de este cuadro.
6 El segundo bloque de la Ventana de bienvenida, 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. Éste es el formato tradicional de las páginas Web. Pulse sobre este enlace.
7 Automáticamente se crea un documento HTML en blanco. (3) Pulse sobre el icono del programa, situado en el extremo izquierdo de la barra superior del programa. (4)
El menú de control también es accesible mediante la pulsación del botón derecho sobre una zona libre de la barra superior del programa.
El comando Restaurar devuelve la ventana a las dimensiones originales.
8 La pulsación sobre el icono del programa nos conduce al menú de control. Sus opciones permiten gestionar la ventana de la aplicación y son las mismas que las situadas en el extremo derecho de la barra superior de la aplicación. Pulse sobre la opción Minimizar.
9 El programa queda reducido a un botón en la Barra de tareas de Windows. Haga clic en dicho botón para restaurar la ventana del programa.
10 Bajo la barra superior de aplicación se sitúa la Barra de menús, que contiene las diferentes opciones que componen el programa. Haga clic en el menú Archivo.
11 El primer grupo de comandos del menú Archivo se encuentra relacionado con la creación, apertura y cierre de documentos. Así, la selección del comando Cerrar y Cerrar todos comporta la clausura del o los documentos en uso. En cambio la del último de los comandos, Salir, implica el cierre de la aplicación. Pulse sobre la opción Cerrar. (5)
La combinación de teclas Ctrl + W también cierra el documento activo.
12 El cierre del documento comporta la reaparición de la Ventana de bienvenida. (6) Además en otros lenguajes de programación: XML, XSLT, PHP, entre otros. El listado del apartado Crear nuevo se cierra con dos enlaces especiales. El último, llamado Más, conduce al cuadro de diálogo Nuevo documento. Éste permite la creación de todos los tipos de documentos cuya edición es posible mediante el programa, no sólo de los listados en este apartado. El enlace Sitio de Dreamweaver, por su parte, conduce al cuadro de diálogo Configuración del sitio. Pulse sobre dicho enlace.
13 La versión CS5 de Dreamweaver ha mejorado notablemente el cuadro de diálogo Configuración del sitio, antes denominado Definición del sitio, renovando su diseño y facilitando la configuración de un sitio local. (7) Desde este cuadro, tal y como veremos más adelante, es posible crear páginas web de inmediato. En este caso, haga clic en el botón Cancelar sin realizar ningún cambio.
En la versión anterior de Dreamweaver, este cuadro se denominaba Definición del sitio.
También la combinación de teclas Ctrl + N permite acceder al cuadro de diálogo Nuevo documento.
14 El apartado Elementos destacados de la Ventana de bienvenida proporciona diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS5. También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana. Haga clic sobre el vínculo Nuevas funciones del apartado inferior izquierdo de la Ventana de bienvenida. (8)
15 Se abre de este modo el navegador que tenga predeterminado en su equipo mostrando la sección de novedades de Dreamweaver CS5 de la página de ayuda del programa. (16) Más adelante veremos cómo buscar información en este completo sistema de ayuda. Cierre el navegador pulsando el botón de aspa de su Barra de título.
16 Observe que en la parte inferior de la Ventana de bienvenida se presenta la opción: No volver a mostrar esta Ventana de bienvenida. Su activación omite la Ventana de bienvenida, que no es más que una alternativa al uso de los comandos tradicionales para el acceso a determinadas funciones. Despliegue el menú Archivo y pulse sobre la opción Nuevo para comprobar que esta opción, al igual que el enlace Más de la Ventana de bienvenida, conduce al cuadro de diálogo Nuevo documento.
17 Estudiaremos con mayor detenimiento más adelante el funcionamiento del cuadro de diálogo Nuevo documento. De momento basta con saber que permite la creación de todos los tipos de documentos editables mediante el programa. Por defecto se encuentra seleccionada la creación de una página en blanco sobre un archivo del tipo XHTML Pulse el botón Crear
18 Dreamweaver CS5 cuenta con un cuadro de diálogo en el que se pueden determinar toda una serie de especificaciones relativas al entorno de trabajo. Para acceder a él, despliegue el menú Edición y pulse sobre el último de sus comandos, Preferencias. (9)
19 El cuadro de diálogo Preferencias distribuye sus funciones en diferentes categorías. La categoría General, seleccionada por defecto, presenta dos apartados. El primero de ellos, Opciones de documento, incluye algunas opciones correspondientes al diseño del espacio de trabajo. Pulse sobre la casilla de verificación Mostrar pantalla de bienvenida para deseleccionarla. (10)
La combinación de teclas Ctrl + U también da acceso al cuadro de preferencias de Dreamweaver.
La opción Volver a abrir documentos al iniciar indica que el programa se abra cargando todos los documentos que estaban abiertos en el momento en que fue cerrado. Si esta opción no está seleccionada, Dreamweaver muestra la Ventana de bienvenida o, en su defecto, una pantalla vacía al iniciarse.
20 De este modo la Ventana de bienvenida queda desactivada, aunque esta preferencia no podremos comprobarla hasta que accedamos de nuevo a la aplicación. Haga clic sobre el botón Aceptar.
21 El conmutador de espacios de trabajo situado en la Barra superior de la aplicación permite cambiar el espacio de trabajo predeterminado. Haga clic sobre ese conmutador, que muestra el espacio de trabajo Diseñador.
22 Las primeras opciones corresponden a los espacios de trabajo disponibles. Haga clic sobre la opción Programador. (11)
23 Como puede comprobar, se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda. Despliegue ahora el menú Ventana, haga clic sobre el comando Diseño del espacio de trabajo y pulse esta vez sobre el espacio Pantalla doble. (12)
24 La pantalla doble permite organizar un diseño si dispone de un segundo monitor. (13) Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de código en el principal. Cierre la ventana Inspector de código pulsando sobre el botón de aspa de su cabecera.
25 Terminaremos esta lección volviendo al espacio de trabajo predeterminado, saliendo del programa y volviendo a acceder a él para comprobar así que la Ventana de bienvenida no aparece, tal y como hemos marcado en el cuadro de preferencias. Pulse el conmutador de espacio de trabajo de la Barra superior de la aplicación y elija el espacio Diseñador.
26 Seguidamente, pulse el botón de aspa situado en el extremo derecho de la ventana del programa para cerrar Dreamweaver.
27 Por último, y como hemos indicado, accederemos de nuevo a Dreamweaver y comprobaremos que la Ventana de bienvenida ya no aparece. Despliegue el menú de Inicio, haga clic sobre el directorio Todos los programas, abra con un clic la carpeta Adobe Master Collection CS5 y pulse sobre el acceso Adobe Dreamweaver CS5. (14)
En versiones anteriores del programa, el espacio de trabajo Programador se denominaba Código.
En versiones anteriores de Dreamweaver el espacio de trabajo podía cambiarse desde el cuadro de preferencias o bien desde el menú Ventana.
Lección 2. Conocer la interfaz de usuario del programa
El diseño de la interfaz de los diferentes componentes de Adobe Creative Suite CS5, entre los que se encuentra Dreamweaver, es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo predeterminado de Dreamweaver, denominado Diseñador, 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. La Barra de aplicación, situada en la parte superior de la ventana de Dreamweaver, ha sido levemente retocada; en ella, se ubican los comandos que permiten cambiar el espacio de trabajo de Dreamweaver, un cuadro de búsqueda y un acceso a CS Live. Cuando se dispone de un documento abierto, aparece la barra de herramientas Documento, situada bajo la pestaña del documento, que presenta opciones relativas a su visualización y a la transferencia entre los sitios.
RECUERDE
Cabe destacar que según las dimensiones y la resolución de la pantalla con que se esté trabajando, la Barra de menús puede integrarse en la Barra de la aplicación, a continuación del icono del programa, o bien por debajo de la misma.
1 En esta lección, realizaremos una aproximación a la interfaz de usuario de Dreamweaver, en su espacio de trabajo predeterminado, el denominado Diseñador. Para ello, y para poder comprobar todos los elementos del área de trabajo, empezaremos creando un nuevo documento. Aunque trabajaremos la creación de sitios web más adelante, debe saber que el menú Sitio dispone del comando Nuevo sitio, que le permitirá crear un nuevo sitio de forma rápida y sencilla. Despliegue el menú Archivo y haga clic sobre el comando Nuevo.
2 Crearemos en este caso un documento HTML sencillo. En el cuadro de diálogo Nuevo documento, mantenga el tipo de página, el diseño y el tipo de documento que aparecen seleccionados por defecto y pulse el botón Crear.
3 Se abre el nuevo documento, denominado por defecto Untitled-1, como puede comprobar en la pestaña del documento. Debajo de la pestaña del documento 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. (1) Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la ventana, (2) acceda a la vista Diseño pulsando en ese botón.
La vista Código dividida, incluida en el botón Dividir de la barra de herramientas Documento, proporciona una versión dividida de la vista Código que permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.
La disposición de los documentos en pestañas facilita la navegación por los mismos.
4 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. (3)
El Inspector de propiedades no se muestra expandido de forma predeterminada en el diseño del espacio de trabajo Programador.
Otra forma de acceder al cuadro de diálogo Propiedades de la página desde el menú Modificar o mediante la combinación de teclas Ctrl + J.
5 Desde el cuadro Propiedades de la página es posible modificar las características de la página. En lecciones posteriores, durante el desarrollo de nuestro sitio web, accederemos de nuevo a este cuadro y completaremos algunos de sus campos. Por el momento, ciérrelo pulsando el botón Cancelar. (4)
6 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. (5)
7 Nos ocuparemos de los elementos PA en la parte de conceptos avanzados de este curso. También puede activar los paneles desde el menú Ventana. Para mostrar de nuevo en primer plano el panel Estilos CSS, pulse sobre su pestaña.
8 Los grupos de paneles pueden contraerse de forma individual de manera que sólo muestren sus pestañas. Para contraer los paneles Estilos CSS y Elementos PA, haga doble clic sobre la pestaña del primero. (6)
El panel Elementos PA comparte espacio con el panel Estilos CSS.
Si desea cerrar un grupo de paneles, puede utilizar la opción Cerrar grupo de fichas del menú de opciones del grupo en cuestión.
9 Para volver a expandir un panel contraído, puede hacer doble clic de nuevo sobre su pestaña o bien utilizar el comando Expandir panel de su menú contextual. Para ello, haga clic con el botón derecho del ratón sobre la pestaña del panel Estilos CSS y, en el menú contextual que se despliega, pulse sobre el comando Expandir panel.
10 La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo predeterminado) contiene botones para las operaciones más habituales de los menús Archivo y Edición, y queda situada bajo las barras de herramientas Documento, la cual contiene comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. Para visualizar esta barra de herramientas, despliegue el menú Ver, pulse sobre el comando Barras de herramientas y elija la opción Estándar. (7)
Según las dimensiones y la resolución de su pantalla, el menú Ver no podrá mostrarse por completo a simple vista; puede desplazarse por él mediante las puntas de flecha situadas en la parte superior e inferior del mismo.
11 Como puede comprobar, la barra de herramientas Estándar contiene los comandos Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. (8) Ya conocemos el modo de visualizar y ocultar las diferentes barras de herramientas. En la parte final de esta práctica nos centraremos en el panel Insertar, que colocaremos a modo de barra de herramientas sobre la ficha del documento abierto. Haga clic sobre el botón contraído del panel Insertar (9) y, sin soltar el botón del ratón, arrástrelo hasta situarlo encima de la pestaña del documento. (10)
Una línea de color azul le indicará el punto en que puede soltar el botón del ratón para que el panel quede perfectamente encajado a modo de barra de herramientas.
12 Desde la barra Insertar es posible añadir a un documento diferentes tipos de elementos, que se distribuyen en fichas. La primera de ellas, Común, facilita la inserción de los objetos más habituales en la composición de las páginas Web. (11) El resto de categorías, predefinidas por el programa, agrupan objetos relacionados con su epígrafe, excepto la última de ellas, Favoritos, personalizable por el usuario. En este caso, le mostraremos como ejemplo cómo funciona la categoría Favoritos. Seleccione con un clic dicha categoría. (12)
13 Haga clic con el botón derecho del ratón en la barra de herramientas Insertar y, en el menú contextual que se despliega, seleccione la opción Personalizar favoritos. (13)
14 El comando Personalizar favoritos da acceso al cuadro de diálogo Personalizar objetos favoritos que presenta dos apartados. (14) El situado a la izquierda, Objetos disponibles, va encabezado por un cuadro desplegable mediante el cual es posible discriminar el tipo de objetos que van a ser incluidos en esta categoría. Pulse en el botón de flecha del desplegable del apartado Objetos disponibles, que presenta seleccionada por defecto la opción Todo, y tras comprobar las opciones que contiene, pulse nuevamente sobre el botón de flecha para cerrar el cuadro sin modificar la opción preseleccionada.
15 Bajo el desplegable se listan los objetos que es posible incorporar a la categoría. Al haber dejado seleccionada la opción Todo, se muestran la totalidad de objetos disponibles. Para incluir un objeto en la categoría Favoritos deberemos seleccionarlo en la lista Objetos disponibles y pulsar el botón situado entre este listado y el apartado Objetos favoritos. Seleccione con un clic la opción Hipervínculo y haga clic en este, el que presenta una doble punta de flecha apuntando a la derecha. (15)
16 Inmediatamente, el objeto Hipervínculo se incorpora a la lista Objetos favoritos. Para incorporar un segundo objeto utilizaremos otro método. Haga doble clic en el objeto Imagen del panel Objetos disponibles. (16)
La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado.
17 La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado, Hipervínculo, añadido anteriormente. El apartado Objetos favoritos presenta una serie de botones. El situado en la parte inferior, Añadir separador, posibilita la diferenciación de grupos de objetos dentro de la categoría Favoritos. Pulse dicho botón.
18 El separador queda situado por debajo del objeto favorito que se encontraba seleccionado en el momento de su inclusión. (17) El orden del listado determina la aparición de los diferentes botones, representativos de los objetos, en la barra Insertar. Pero éste puede ser alterado mediante los botones de flecha situados en la parte superior del apartado Objetos disponibles. Con el separador seleccionado en el listado, haga clic en el botón de flecha que apunta hacia arriba. (18)
La inclusión de separadores en la barra de herramientas Insertar permite organizar con claridad el contenido de la misma.
19 El separador sube una posición dentro del listado, quedando situado bajo el objeto añadido en primer lugar, Hipervínculo. Incluiremos un tercer objeto. Para que quede situado en la última posición de la lista Objetos favoritos, deberemos seleccionar el objeto que la ocupa actualmente. Haga clic sobre el objeto Imagen y haga doble clic sobre el objeto Imagen de sustitución en el otro panel. (19)
20 Por último, el apartado Objetos favoritos cuenta con un botón que permite la supresión de los objetos sobrantes. Pulse el botón Eliminar objeto favorito seleccionado, representado por el icono de un cubo de basura.
21 La pulsación del botón conlleva la eliminación del objeto favorito que se encontraba seleccionado. Haga clic en el botón Aceptar.
22 Tras la aceptación de la configuración, en la barra de herramientas Insertar se sitúan los botones correspondientes a los objetos favoritos seleccionados, con el separador entre ellos tal y como establecimos en el cuadro de diálogo. (20) Haga clic sobre la palabra Común en la barra de herramientas Insertar para acceder a esta categoría y finalizar de este modo la presente práctica.
RECUERDE
La categoría Spry incluida en la barra de herramientas Insertar consiste en una biblioteca JavaScript y CSS que permite crear páginas Web más completas. Puede utilizar este framework para visualizar datos XML y crear elementos de página interactivos que muestren datos dinámicos sin necesidad de actualizar la página entera.
Lección 3. Gestionar los conjuntos de paneles
Los paneles, accesibles desde el menú Ventana, contienen las opciones y los comandos que permiten modificar el comportamiento de los documentos y de los elementos que los componen. Adobe, en su suite de programas, ha desarrollado una interfaz común para todos sus productos, cambiando el sistema de mostrar los diferentes paneles, reduciéndolos al mínimo y agrupándolos en conjuntos. En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. El programa, además, permite disponer de ellos de la manera que el usuario desee. Mediante la técnica de arrastre se pueden situar los diferentes grupos en el lugar elegido de la pantalla, bloqueándolos en alguno de los laterales (bien acoplándolos en algún grupo existente, bien conformando uno nuevo) o ubicándolos como flotantes. Los paneles incluyen un menú emergente con opciones adicionales al que se accede mediante el icono que aparece en su esquina superior derecha.
1 El panel Propiedades, conocido más usualmente como Inspector de propiedades, es uno de los principales de la aplicación y, por defecto, se encuentra acoplado en la parte inferior de la pantalla. Cada panel presenta en su parte superior una pestaña con su título seguida de una barra con el botón de opciones. Como ya vimos en la lección anterior, para contraer un panel es posible hacer doble clic sobre su pestaña, aunque también puede utilizar el menú contextual de la misma. En este caso y a modo de ejemplo, haga clic con el botón derecho del ratón sobre la pestaña del panel Propiedades y, en el menú contextual que se despliega, pulse sobre el comando Minimizar. (1)
En versiones anteriores del programa, era posible contraer un panel con un único clic en su cabecera.
2 Efectivamente, de este modo el panel queda contraído en este caso en la parte inferior de la pantalla, mostrando sólo la pestaña que lo encabeza. (2) Para mostrarlo nuevamente expandido, haga doble clic sobre dicha pestaña.
3 Dada la complejidad de sus funciones, Dreamweaver cuenta con un gran número de paneles. La mayoría de ellos se encuentran apilados en el lateral derecho de la pantalla en el espacio de trabajo predeterminado Diseñador. Algunos de estos paneles se presentan de forma independiente, aunque la mayoría se ven agrupados con paneles relacionados, como el panel Archivos y el panel Activos. Esto no significa que no puedan gestionarse por separado. Abra el menú Ventana y seleccione la opción Activos.
4 La ficha Activos pasa a primer plano dentro del grupo llamado Archivos. No es necesario utilizar el menú Ventana cada vez que se quiera alternar la ficha del grupo de paneles activa. Como ya sabe, para acceder a un panel activo basta con pulsar sobre su pestaña. Haga clic en la pestaña Archivos para visualizar de nuevo su contenido.
5 Los grupos pueden ser desacoplados mediante la técnica de arrastre y situados como flotantes en el lugar elegido del área de trabajo. Además de esta reubicación, los paneles pueden ser expandidos de manera que ocupen toda la pantalla, opción muy útil en aquellos casos en que la estructura del sitio Web creado sea muy amplia. Haga clic sobre el botón de opciones del panel Archivos y, del menú que se despliega, pulse sobre el comando Expandir panel de archivos. (3)
6 El panel Archivos adquiere el aspecto de ventana independiente. (4) Para contraer de nuevo el panel, pulse sobre el primer icono empezando por la derecha de la barra de herramientas de esta ventana.
Una vez contraído un panel, puede volver a expandirlo desplegando el menú contextual del panel contraído y pulsando sobre el comando Expandir panel.
Algunos paneles pueden mostrarse y ocultarse mediante la pulsación de una tecla o una combinación de teclas; en el caso del panel Archivos, esta tecla es la de función F8.
7 Despliegue de nuevo el menú Ventana y haga clic sobre el nombre del panel Inspector de etiquetas.
8 Se abre el panel Inspector de etiquetas compartiendo espacio con el conjunto de paneles Estilos CSS y Elementos PA. (5) El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada etiqueta. Este panel contiene los subpaneles Atributos y Comportamientos. Despliegue el menú de opciones del panel.
9 El menú de opciones, pese a contener comandos diferenciados en su parte superior referidos a las funciones específicas del panel, presenta en la inferior una serie de opciones comunes. La primera abre la ayuda del programa en el punto en que ofrece información relativa al funcionamiento del panel. Las últimas opciones del menú posibilitan el cierre del panel o del grupo entero. En el menú emergente, pulse sobre la opción Cerrar grupo de fichas. (6)
El panel Inspector de etiquetas puede mostrarse y ocultarse mediante la pulsación de la tecla de función F9.
El comando Cerrar del menú de opciones de un conjunto de paneles permite ocultar sólo el panel activo.
10 El conjunto de paneles se oculta. No todos los paneles se presentan por defecto integrados El panel o ventana Inspector en la ventana de la aplicación. Despliegue de nuevo el menú Ventana y seleccione la opción Ins-de código puede mostrarse
El panel o ventana Inspector de código puede mostrarse pulsando la tecla de función F10.
11 El panel Inspector de código se dispone de manera independiente en forma de ventana flotante. (8) La disposición de grupos y paneles inicial viene configurada por la elección del espacio de trabajo. Sabemos que podemos resituar los paneles mediante la técnica de arrastre. Para añadir un panel a un grupo, basta con arrastrarlo hasta situarlo dentro del grupo deseado. Haga clic en la cabecera del panel Inspector de código y arrástrelo hasta situarlo dentro del grupo de paneles Archivos y Activos. (9)
Al situar el elemento arrastrado sobre la ubicación de destino, aparece un marco azul que indica si se encuentra dentro o fuera del grupo y, por tanto, el momento idóneo para soltar el botón del ratón.
12 De este modo, el panel Inspector de código pasa a formar parte del conjunto encabezado por el panel Archivos. (10) El programa permite contraer en iconos todos los conjuntos de paneles a la vez, liberando el espacio de trabajo. Para ello, pulse sobre la doble punta de flecha situada en la parte superior derecha del espacio de paneles. (11)
Encontrará el comando Contraer en iconos también en el menú contextual de la cabecera de los conjuntos de paneles.
13 De esta forma los paneles se muestran en forma de iconos (12) Como novedad en la versión CS5 de Dreamweaver, entre los paneles predeterminados se incluyen los denominados Adobe BrowserLab y Business Catalyst. El programa se integra con Adobe BrowserLab, uno de los nuevos servicios en línea de CS Live, que proporciona una solución rápida y precisa para realizar pruebas de compatibilidad con múltiples navegadores. Por su parte, Business Catalyst es una aplicación alojada que sustituye las herramientas de escritorio tradicionales por una plataforma central para diseñadores web. Además de efectuar la contracción de los paneles, también puede ocultarlos por completo para conseguir así todavía más espacio en el área de trabajo. Para ello, despliegue el menú Ventana y haga clic sobre el comando Mostrar paneles. (13)
14 Efectivamente, los conjuntos de paneles han desaparecido y ahora dispone de toda la ventana central del programa para trabajar. (14) Para dar por acabado este ejercicio, despliegue de nuevo el menú Ventana y pulse sobre el comando Mostrar paneles.
La tecla de función F4 también permite mostrar y ocultar los conjuntos de paneles.
Debe saber que puede encontrar el comando Mostrar paneles del menú Ventana también en el menú Ver.
RECUERDE
Los accesos a los paneles Insertar y Propiedades componen el primer grupo de comandos del menú Ventana . Esto es debido a que se trata de los paneles de mayor importancia de la aplicación.
Lección 4. Crear nuevos documentos
En los inicios de Internet las páginas Web eran creadas con simples editores de texto. En ellos se introducía el código HTML necesario, por lo que era imprescindible conocer los comandos y sintaxis propios de este lenguaje. Actualmente, el código HTML se ha visto complementado por otros de mayor complejidad. Dreamweaver CS5 ofrece un entorno flexible para trabajar con una gran variedad de documentos de diseño y desarrollo de páginas Web. Además de documentos HTML, es posible crear una gran variedad de documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro de diálogo Nuevo documento ordena en categorías los diferentes tipos de archivo con los que se puede trabajar con el programa. Evidentemente, con algunos de ellos sólo se podrá trabajar editando el código directamente, siendo imposible la edición visual, una de las grandes ventajas del trabajo con Dreamweaver. Los archivos generados, documentos y plantillas, pueden ser creados en blanco, sin contenido, o basados en los diseños de página preestablecidos ofrecidos por el programa.
RECUERDE
Dreamweaver permite trabajar con una gran variedad de tipos de archivos, siendo el tipo de archivo principal el archivo HTML. Estos archivos HTML —o archivos en lenguaje de formato de hipertexto— incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Los archivos HTML se pueden almacenar con la extensión .html o .htm.
1 En esta lección conoceremos el modo de crear diferentes tipos de archivo mediante el cuadro de diálogo Nuevo documento. Sin embargo, antes cerraremos el documento que creamos a modo de ejemplo en lecciones anteriores. Pulse en el botón de aspa situado en la pestaña de este documento.
2 El área de trabajo se muestra ahora vacía. Para acceder al cuadro de diálogo Nuevo documento, despliegue el menú Archivo y pulse sobre la opción Nuevo. (1)
3 Como ya vimos en una lección anterior, el cuadro de diálogo Nuevo documento está formado principalmente por tres columnas. La primera de ellas 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. En este caso, y estando seleccionado el tipo Página en blanco, se encuentra marcada la opción HTML, aunque esta categoría nos permite generar documentos basados en lenguajes tales como ActionScript, propio de Flash, CSS o JavaScript. Seleccione la categoría Plantilla en blanco con un clic de ratón. (2)
También puede acceder al cuadro de diálogo Nuevo documento pulsando la combinación de teclas Ctrl + N.
4 Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos seleccionables en el listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. De momento no contamos con ninguna plantilla almacenada. Vamos a comprobarlo. Pulse sobre la categoría Página de plantilla. (3)
5 Efectivamente, el panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro con un clic de ratón. (4)
Desde el cuadro de diálogo Nuevo documento puede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver, aunque también puede utilizar el panel Activos para crear un documento nuevo a partir de una plantilla existente.
Al elegir la categoría Otro, deberá seleccionar el tipo de página que desea crear en la columna Tipo de página y pulsar en el botón Crear.
6 Los tipos de archivo listados en esta categoría están destinados a programadores experimentados en estos lenguajes (incluidas páginas C#, VBScript), basados en texto, con los que no es posible trabajar de forma visual mediante el programa. Pulse esta vez sobre la categoría Página de muestra. (5)
7 Dreamweaver cuenta con distintos archivos de marcos de página (carpeta Conjunto de marcos) y de diseño CSS (carpeta Hojas de estilo CSS) desarrollados por profesionales que pueden ser utilizados como punto de partida para el diseño de páginas propias. 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. La columna Página de muestra que aparece al pulsar sobre la categoría del mismo nombre proporciona todas las características de estos estilos, así como una vista previa y una descripción del estilo seleccionado. En este caso, y como ejemplo, haga clic sobre la opción Colores: Azul de este panel. (6)
Al crear un documento basado en un archivo de muestra, Dreamweaver crea una copia del archivo.
8 Mediante los estilos se pueden controlar el aspecto y los colores del texto y de otros elementos de las páginas, como el fondo y las tablas. Pulse el botón Crear.
9 Automáticamente aparece en el área de trabajo el nuevo documento CSS, mostrando el código del contenido de partida, que define los diferentes parámetros del estilo. (7) De momento, regresaremos al cuadro de diálogo Nuevo documento para seguir conociendo sus opciones. En este caso, pulse la combinación de teclas Ctrl + N.
10 En el panel Carpeta de muestra, seleccione en esta ocasión el directorio Conjunto de marcos. (8)
El cuadro de diálogo Nuevo documento recuerda los parámetros utilizados en el último uso.
11 Los marcos se utilizan para distribuir los elementos de una página, dividiéndola en diferentes archivos HTML integrados en un documento principal. Pulse ahora sobre la categoría Página en blanco para seleccionarla.
12 Mantenga seleccionada como tipo de documento la opción HTML y haga clic sobre el primer diseño de página de 2 columnas, denominado 2 columnas fijas, barra lateral derecha. (9)
13 El cuadro de diálogo se completa con un enlace y una serie de botones en su parte inferior. Además de los botones que permiten la creación del documento seleccionado y la cancelación de la operación, aparecen los encargados de conducir a la ayuda del programa y al cuadro de diálogo Preferencias. Pulse el botón Preferencias.
14 El acceso al cuadro de diálogo Preferencias desde el cuadro de diálogo Nuevo documento comporta que se muestre directamente la categoría del mismo nombre. Pulse el botón de flecha del cuadro desplegable Documento predeterminado para acceder a sus opciones. (10)
Es posible crear páginas con una diseño CSS prediseñado o bien crear completamente en blanco y realizar su propio diseño.
Estas opciones permiten establecer un tipo de documento como predeterminado.
15 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. En este curso trabajaremos principalmente con documentos HTML, de modo que no cambiaremos la opción configurada por defecto. Haga clic nuevamente sobre el botón flecha del desplegable Documento predeterminado para ocultar la lista de opciones.
16 La desactivación de la casilla de verificación Mostrar el cuadro de diálogo Nuevo documento con Control + N permite omitir la aparición del mencionado cuadro para acceder a la creación de documentos a través del método abreviado de teclado correspondiente. Haga clic en Aceptar. (11)
17 Por último, 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 el nuevo documento (12) y dar por terminado este ejercicio.
Además de acceder al cuadro de Preferencias desde el cuadro de diálogo Nuevo documento, también dispone de un acceso en el menú Edición del programa.
La disposición en pestañas de los documentos abiertos en Dreamweaver permite una fácil navegación por los mismos.
RECUERDE
Los archivos de Hojas de estilos en cascada tienen la extensión .css y se utilizan para aplicar formato al contenido HTML y controlar la posición de los distintos elementos de la página.
Lección 5. Ver distintos archivos a la vez
Dreamweaver, al igual que la práctica totalidad de los programas creados para Windows, permite visualizar varios archivos simultáneamente, si bien sólo es posible manipular uno de ellos cada vez. La versión CS5 de Dreamweaver presenta la disposición en forma de fichas de los diferentes documentos abiertos. Las pestañas identifican cada uno de los documentos 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. 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.
RECUERDE
La disposición en forma de fichas facilita la selección de los diferentes archivos para su edición; sin embargo, el programa permite distribuirlos del modo que el usuario considere más oportuno.
1 Contamos al inicio de la lección con dos documentos en pantalla, creados en las prácticas anteriores. En la primera parte de esta lección conoceremos el modo de abrir archivos en Dreamweaver. Para ello, vamos a utilizar un archivo de muestra, denominado precisamente muestra.htm, que puede descargar desde nuestra página web junto con la imagen foto-flor.jpg y guardarlas ambas en la carpeta de documentos de su equipo. Una vez disponga de él, despliegue el menú Archivo y pulse sobre la opción Abrir.
2 El cuadro de diálogo Abrir se abre por defecto mostrando el contenido de la carpeta de documentos del equipo. Seleccione el documento muestra.htm y pulse sobre el botón Abrir para ejecutarlo en Dreamweaver.
3 El nuevo documento abierto se sitúa en primer plano, pero los otros continúan abiertos, como podemos comprobar viendo sus pestañas. A continuación, despliegue el menú Ventana.
4 En la parte inferior del menú Ventana se listan los documentos en uso. Pulse sobre el nombre del documento Untitled-2. (1)
La combinación de teclas Ctrl + O también nos conduce al cuadro de diálogo Abrir.
5 El documento seleccionado pasa a estar en primer plano. (2) Como hemos dicho, en la parte superior de la ventana del documento los archivos quedan representados por pestañas. Haga clic en la pestaña del documento muestra.htm para poner este documento en primer plano.
6 Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Despliegue de nuevo este menú y seleccione con un clic el comando Cascada.
7 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows. Para activar un documento (es decir, para que las acciones y modificaciones que se realicen se apliquen en él), basta con hacer clic dentro de la ventana que contiene dicho archivo. 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 muestra.htm, situada en primer plano. (3)
El menú contextual de las ventanas dispuestas en cascada también contiene las opciones de minimizar/ restaurar, maximizar y cerrar.
8 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. (4) Pulse el botón Maximizar del archivo Untitled-3. (5)
9 El área de trabajo recupera su distribución inicial, representando los diferentes documentos en forma de fichas y recuperando incluso la ventana que habíamos minimizado. El icono situado en el extremo derecho de la barra de pestañas permite recuperar la última organización en ventanas. Compruébelo pulsando en dicho icono. (6)
10 Efectivamente, ahora disponemos de dos ventanas y el documento muestra minimizado. En la Barra de título de este documento, el primero de los botones de control muestra el icono identificativo del comando Restaurar tamaño, con lo que su pulsación devolverá a la ventana el aspecto que presentaba antes de ser minimizada. Pulse ese botón.
11 Despliegue ahora el menú Ventana y haga clic sobre el comando Mosaico horizontal.
12 Compruebe la reorganización del área de trabajo; de esta forma, es posible visualizar parte del contenido de todas las ventanas abiertas. Dreamweaver permite aplicar ciertas acciones a la totalidad de documentos en uso. Despliegue el menú Archivo.
13 El menú Archivo presenta las opciones Cerrar todos y Guardar todo. La selección del primero de ellos implica el cierre de todos los documentos en uso manteniéndose abierto el programa. Seleccione con un clic este comando Cerrar todos.
14 Los tres documentos se han cerrado directamente, puesto que no habían sufrido cambios desde su apertura. Conoceremos los modos de almacenar diferentes tipos de archivo en las prácticas de este curso. En la parte final de la lección recuperaremos el documento muestra mediante la lista de archivos usados recientemente del programa. Para ello, despliegue de nuevo el menú Archivo, pulse sobre el comando Abrir reciente. (7)
15 Se despliega un submenú con el listado de los documentos que han sido editados con anterioridad. En él evidentemente sólo aparecen los archivos almacenados en disco y, por tanto, recuperables. Haga clic en el documento muestra.htm para abrir este documento.
16 El documento se presenta en el área de trabajo en la disposición que presentaba en el momento de ser cerrado, en forma de ventana de Windows. (8) Para concluir la práctica recuperaremos la disposición de fichas característica de Dreamweaver. Pulse el botón Maximizar de la ventana del documento muestra.
La opción Volver a abrir documentos al iniciar incluida en el comando Abrir reciente permite indicar que al volver a acceder al programa se abran los documentos actuales.
RECUERDE
El comando Mosaico vertical permite reorganizar verticalmente todos los documentos abiertos.
Lección 6. Alternar entre las vistas de diseño y de código
Dreamweaver es un editor visual de páginas Web, de manera que no es necesario conocer el lenguaje de programación de las mismas 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 edición visual más intuitiva posibilita la creación de vistosas páginas HTML sin necesidad de tener conocimientos previos de programación. 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 de la página). La primera contiene las etiquetas necesarias para que la página sea correctamente visualizada en Internet, y la sección body, los elementos que conforman propiamente la página.
RECUERDE
La ventana del documento presenta en su parte inferior la Barra de estado, que contiene el Selector de etiquetas y un área informativa desde la que es posible acceder a la categoría Barra de estado del cuadro de diálogo Preferencias. En éste 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.
1 En la lección anterior abrimos el documento de ejemplo muestra.htm, una página Web con formato HTML. Con él practicaremos con las vistas Diseño y Código. Los documentos HTML pueden ser visualizados de tres modos. La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. El espacio de trabajo predeterminado Diseñador presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Para cambiar esta vista, pulse el botón Código en la barra de herramientas Documento.
2 El documento pasa a mostrarse en forma de código. (1) De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, los estilos CSS por ejemplo, no pueden ser editados de forma visual ya que sólo es posible editarlos tecleando el código correspondiente. Pero los documentos HTML pueden ser editados de forma visual, es decir, controlando en todo momento el aspecto que presentará el documento editado. La barra de herramientas Documento contiene botones que permiten cambiar las vistas de modo directo. Las páginas HTML pueden ser visualizadas de tres modos. Haga clic de nuevo en el botón Diseño de la barra de herramientas Documento.
El menú Ver también permite alternar entre las vistas del documento disponibles.
3 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo el aspecto que deben presentar. Pulse sobre la imagen que aparece en la página. (2)
4 Y si dominamos el lenguaje de programación podemos acceder a la vista Código y modificar los elementos directamente cambiando las etiquetas de programación. Con la imagen seleccionada, pulse el botón Código de la barra Documento.
5 El lenguaje HTML se basa en la introducción de las llamadas etiquetas (tags en inglés). Si seleccionamos un elemento de la página en la vista Diseño, la etiqueta correspondiente queda resaltada de color azul en la vista Código. Para comprobarlo, pulse el botón Dividir de la barra de herramientas Documento.
6 Este modo de visualización divide la ventana del documento en dos partes. (3) A diferencia de versiones anteriores del programa, la división de las áreas de diseño y código se realiza verticalmente, siendo la parte izquierda la reservada al código y la derecha, al diseño. Haga doble clic sobre la palabra Imagen en la ventana de diseño. (4)
Debe saber que toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación.
En la ventana de código, compruebe como, efectivamente, la palabra Imagen, actualmente resaltada de color gris, se encuentra entre el código strong.
7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, que proporciona información adicional sobre el archivo que está siendo editado. La parte inicial de la mencionada barra queda reservada al Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. En el caso del texto Imagen, el cual se encuentra seleccionado, muestra la etiqueta strong, debido al estilo aplicado, el estilo negrita. Este texto se encuentra en el interior de una tabla. Haga clic en la etiqueta <table> de la Barra de estado. (5)
8 La pulsación sobre la etiqueta en la Barra de estado implica la selección del elemento definido por ésta en la vista Diseño, en este caso la tabla, y el correspondiente fragmento de programación en la vista Código. Pulse el botón Código de la barra de herramientas Documento. (6)
9 Así la etiqueta table contiene toda la programación correspondiente a los elementos incluidos en la tabla. Y a su vez la tabla pertenece al cuerpo de la página. Haga clic en la etiqueta body de la Barra de estado.
10 Una página Web se compone de dos secciones diferenciadas. La primera se denomina head (cabecera) y contiene las instrucciones genéricas que definen el documento y posibilitan su posterior visualización en Internet. La segunda se denomina body y contiene el cuerpo de la página, es decir, el código necesario para representar los diferentes elementos que la componen. La selección de la etiqueta body comporta por tanto la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento.
11 La Barra de estado se completa con la zona informativa. Ésta ocupa el extremo derecho de la barra y presenta el campo Tamaño de descarga/Tiempo de descarga, situada junto al porcentaje de zoom, que sólo aparece en la vista Diseño, que muestra una estimación del tamaño del documento y del tiempo de descarga de la página. Este campo permite cambiar el tamaño de la ventana del documento para que adopte dimensiones predeterminadas o personalizadas. Despliegue este campo para ver su contenido. (7)
La selección de la etiqueta body comporta la selección de todo el contenido de la página en la vista Diseño.
12 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. Pero los tamaños preestablecidos tan 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. Seleccione con un clic la única opción activa del menú, Editar tamaños.
13 Se abre así el cuadro de preferencias del programa mostrando la categoría Barra de estado. (8) En ella podemos variar alguno de los tamaños preestablecidos, a fin de personalizarlos, o crear un tamaño nuevo propio. Los diferentes tamaños predefinidos quedan listados en el cuadro Tamaños de ventana, que presenta tres columnas. El primer tamaño permanece incompleto, quedando establecido únicamente el valor correspondiente a la anchura. El valor de la columna Ancho determina la cantidad de píxeles, puntos de información de color, que presentará horizontalmente la ventana del documento. Haga clic sobre el valor 592, en la primera posición de la columna Ancho, para seleccionarlo, introduzca el número 300 y pulse la tecla Retorno.
14 El valor Alto, por tanto, determina la cantidad de píxeles verticales de la ventana. Haga clic en el espacio en blanco de la columna Alto, inserte la cifra 100 y pulse la tecla Retorno.
15 El valor incluido en el campo Descripción también aparece en el campo Tamaño de descarga/Tiempo de descarga, facilitando la selección de la opción adecuada. Haga clic en el espacio en blanco de la columna Descripción para situar el cursor de edición en este punto, escriba la palabra publicidad y pulse la tecla Retorno. (9)
16 La categoría Barra de estado se completa con el campo Velocidad de conexión. Para calcular este dato, el programa realiza una estimación de la velocidad de transmisión de datos. Pero el tiempo de descarga real dependerá de las condiciones generales de Internet y principalmente de la velocidad de conexión del usuario. El programa permite seleccionar una de las velocidades de conexión predeterminadas. La velocidad de descarga de las páginas es primordial, ya que los usuarios no acostumbran a tener paciencia. Resulta en todo caso aconsejable utilizar un valor de descarga bajo, en previsión de usuarios que no dispongan de buenas conexiones a Internet, de modo que la descarga de nuestras páginas no sea lenta ni en estos casos. Mientras que los tamaños de ventana preestablecidos sólo pueden ser aplicados en la disposición clásica de ventanas, la información del tiempo de descarga de la Barra de estado resulta de gran ayuda para valorar la relación calidad/tamaño de nuestros documentos durante su edición. Haga clic en Aceptar para abandonar el cuadro de diálogo Preferencias.
17 Para terminar la presente práctica, haga clic en una zona libre de la página para eliminar la selección actual del contenido. (10)
Si no se encuentra ningún elemento de la página seleccionado, tampoco ninguna etiqueta del Selector de etiquetas se encuentra activada.
Lección 7. Elementos básicos 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 la cabecera de la página también de forma visual. Para ello, debe mostrarse el denominado contenido head. Cada una de las etiquetas de esta sección puede ser modificada mediante el Inspector de propiedades, el panel de Dreamweaver sensible al contexto. Este panel de la aplicación muestra las propiedades del elemento seleccionado y permite modificarlas. De este modo, el usuario puede definir fácilmente las propiedades del documento, como el título, las etiquetas meta o los estilos de color empleados en el mismo. El panel de propiedades también se emplea para modificar los elementos contenidos en el cuerpo de la página. El texto, los vínculos y las imágenes son elementos fundamentales en la composición de una página Web. Dreamweaver permite insertar y editar este tipo de objetos, entre otros (archivos multimedia, tablas, formularios), en los documentos y facilita su edición visual.
RECUERDE
No debe confundirse el título de la página con el nombre del archivo. El título, que también aparece en la Barra de título de la ventana del documento de Dreamweaver, se muestra en la Barra de título del navegador cuando se visualiza la página publicada, a diferencia del nombre del documento.
1 Las páginas web contienen elementos que describen la información de la página y que son utilizados por los navegadores de búsqueda. Ya en la lección anterior comentamos que una página HTML se divide principalmente en dos secciones: head y body. La primera de ellas por defecto no tiene representación visual en la vista Diseño; sin embargo, Dreamweaver permite definir las propiedades de elementos head para controlar cómo se identifican las páginas. Para consultar este contenido despliegue el menú Ver y seleccione la opción Contenido de Head. (1)
El comando Contenido de Head también puede ejecutarse mediante la combinación de teclas Ctrl + Mayús + H.
Debe saber que si la ventana de documento está configurada para mostrarse sólo en la vista Código, el comando Contenido de Head del menú Ver no se encontrará activo.
2 Aparece la representación visual de la sección head bajo la barra de herramientas Estándar. (2) Para mostrar el código correspondiente, haga clic en el botón Dividir de esta barra. (3)
3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head, permitiendo de este modo su selección directa. Seleccione, con un clic de ratón sobre su icono, el primer elemento de dicha sección.
4 Compruebe el cambio tanto en la ventana de código como en el panel de propiedades y en el Selector de etiquetes. La etiqueta correspondiente, title, queda seleccionada. El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, la que se refleja en el campo Título. Desde el panel de propiedades podemos modificar el texto del título. Seleccione el contenido del campo Título, escriba la palabra muestra y pulse la tecla retorno para confirmar el cambio.
5 El título también puede ser modificado en el campo Título de la barra de herramientas Documento, así como en la correspondiente línea de código. Compruebe como el nuevo título se refleja tanto en el inspector de propiedades como en el mencionado campo, así como en la línea de código correspondiente. (3) Haga clic en el segundo icono de la sección head. (4)
Al mostrar el código y el diseño de la página, el contenido de head se sitúa siempre en la parte superior de la ventana del diseño.
El Inspector de propiedades presenta como principal característica su sensibilidad al contexto, cambia su contenido adaptándose a la herramienta o el elemento seleccionado.
6 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Una etiqueta meta es un elemento de head que contiene información sobre la página actual, como la codificación de caracteres, el autor, el copyright o las palabras clave; también pueden facilitar información al servidor, como la fecha de caducidad o el intervalo de actualización de la página. Toda esta información consta de tres propiedades y queda establecida automáticamente durante la generación del documento, en función del formato que éste presente. Seleccione el tercer y último elemento de la sección head. (5)
7 La sección head del documento se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Puede consultar estos atributos en las líneas de código seleccionadas en este momento. Haga clic en el botón Diseño de la barra de herramientas Documento.
8 En la segunda parte de esta lección realizaremos un acercamiento a los contenidos más usuales de las páginas Web. Ocultaremos por tanto el contenido de la cabecera en la vista Diseño. Para ello, despliegue el menú Ver y pulse sobre el comando Contenido de Head. (6)
Es posible insertar y editar cualquiera nuevos componentes de head. Para agregar un componente de head, es preciso dirigirse al menú Insertar, desplegar el comando HTML y seleccionar la opción Etiquetas head.
9 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.
10 El texto es un componente básico de las páginas Web, ya que resulta fundamental para transmitir la información. Dreamweaver permite introducir y editar el texto de las páginas, así como configurar su aspecto. El panel Propiedades, sensible al contexto, presenta los atributos del texto que encabeza la página, actualmente seleccionado. Haga doble clic sobre la palabra Texto, en la primera celda de la tabla.
11 La información contenida en el Inspector de propiedades se actualiza automáticamente, mostrando los atributos de la selección. De este modo, por ejemplo, el panel muestra activo el botón B, indicativo de la aplicación del atributo negrita al texto seleccionado. Haga doble clic en la palabra Bienvenido, en la primera celda de la segunda columna de la tabla.
12 En cambio, este texto no presenta el atributo negrita y, por tanto, el botón B del Inspector de propiedades se muestra desactivado. Los enlaces son otros elementos importantes de las páginas web. Seleccione con un doble clic la palabra Pulse.
13 Los enlaces permiten la navegación, conectan las páginas con otras y suelen presentarse con aspecto de texto subrayado. Pero la única propiedad fundamental que diferencia un enlace de un texto normal puede apreciarse en el Inspector de propiedades. El texto definido como enlace se muestra en el cuadro Vínculo de este panel. En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este curso, MEDIAactive. Seleccione la imagen con un clic de ratón. (7)
14 Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo visual. Para distribuir los diferentes elementos de forma ordenada suelen utilizarse tablas. Nuestra página de ejemplo cuenta con una. Tras la selección de los elementos contenidos en ella han aparecido en su parte superior unas ayudas visuales, de color verde. Haga clic en la punta de flecha que aparece a la derecha de la cifra 175 de la ayuda visual.
Los enlaces también pueden ser incluidos en imágenes.
15 Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Haga clic en el comando Seleccionar tabla. (8)
16 Para desactivar las ayudas visuales puede optarse por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales. Pulse dicho botón de la barra Documento, que muestra la imagen de un ojo, y haga clic en el comando Ocultar todas las ayudas visuales.
17 Evidentemente las páginas Web pueden contar con más elementos. Pueden ser insertados sonidos, vídeos y diversos tipos de elementos multimedia. También se puede dotar de interactividad a las páginas. Iremos conociendo todas las posibilidades de edición con Dreamweaver así como el funcionamiento del Inspector de propiedades durante este curso. De momento, para finalizar este ejercicio, volveremos a mostrar las ayudas visuales, en este caso de un modo distinto. Despliegue el menú Ver, haga clic sobre el comando Ayudas visuales y, en el submenú que se despliega, pulse sobre la opción Ocultar todo para activarla de nuevo. (9)
18 Por último, pulse en una zona libre de la ventana del documento para eliminar la selección actual. (10)
El comando Ocultar todas las ayudas visuales puede ejecutarse mediante la combinación de teclas Ctrl + Mayús + I.
RECUERDE
Al seleccionar un elemento en la ventana del documento, aparece un icono; se trata de un indicador que permite abrir el navegador de código. El navegador de código muestra una lista de fuentes de código relacionadas con la selección actual de la página, como reglas CSS internas y externas, server-side includes, archivos JavaS-cript externos, archivos de plantilla padre, archivos de biblioteca y archivos de origen de iframe. Conoceremos todos los detalles del nuevo Navegador de código en una lección posterior de este curso.
Lección 8. Uso de comandos básicos en Dreamweaver
Entendemos por comandos básicos aquellas funciones que, por su aplicación, suelen utilizarse y ejecutarse con cierta frecuencia durante el trabajo con Dreamweaver. Se trata de comandos comunes a prácticamente todas las aplicaciones informáticas: copia y pegado de contenido, almacenamiento de archivos, anulación de acciones, etc. Todas estas funciones básicas se encuentran repartidas entre el menú Archivo y el menú Edición, aunque también son accesibles desde la barra de herramientas Estándar. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo. 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, habitual en todas las aplicaciones que trabajan bajo el entorno de Windows. En esta lección realizaremos un acercamiento a estas funciones y conoceremos el modo de ejecutarlas.
1 En la práctica anterior hemos modificado el documento muestra.htm, cambiando su título. Es por este motivo que aparece un asterisco en la pestaña del documento. (1) El método más sencillo para almacenar los cambios efectuados en un documento consiste en la ejecución del comando Guardar. Accesible desde el menú Archivo, este comando puede ser ejecutado directamente pulsando el botón del mismo nombre de la barra de herramientas Estándar, identificado por el dibujo de un disquete acompañado de una flecha. Para empezar, pulse dicho botón. (2)
Si en la pestaña del documento no aparece ningún asterisco significa que no está pendiente de almacenar cambio alguno.
La combinación de teclas que ejecuta el comando Guardar es Ctrl + S.
2 El programa almacena los cambios efectuados, conservando la ubicación original y el nombre del documento. Observe que el asterisco situado en la pestaña del documento ha desaparecido. (3) Seguidamente, vamos a guardar una copia del documento actual. Para ello, debemos utilizar el comando Guardar como. Despliegue el menú Archivo.
3 El menú Archivo da acceso a todos los comandos relacionados con el almacenamiento de documentos. Así, la opción Guardar, utilizada anteriormente, se ve complementada por los comandos Guardar como, Guardar todo, Guardar todos los archivos relacionados y Guardar como plantilla. Seleccione el comando Guardar como. (4)
La combinación de teclas Ctrl + Mayús + S también ejecuta el comando Guardar como.
4 La utilización del comando Guardar como está indicada para almacenar los documentos editados como copia de los originales. La selección de este comando 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. Para ello presenta el cuadro desplegable Guardar en y el panel de accesos directos. Además permite el cambio del nombre del documento. 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. (5)
El comando Guardar todo, también disponible en la barra de herramientas Estándar, ejecuta el almacenado simultáneo de los documentos en uso.
5 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se encuentra en primer plano en Dreamweaver para su edición. (6) Despliegue nuevamente el menú Archivo y seleccione el comando Guardar como plantilla.
6 El uso de plantillas sólo es posible si previamente se ha creado un sitio. Como trataremos la creación de sitios locales a partir de la lección siguiente, cancelaremos este proceso. De momento, pulse el botón Cancelar.
7 La barra de herramientas Estándar proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición. Seleccione, con un clic de ratón, la imagen situada en el centro de la página.
8 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 accesibles desde el menú Edición. De ese modo, el primero de ellos, que presenta el dibujo de unas tijeras, ejecuta el comando Cortar y el siguiente, representado por dos hojas, el comando Copiar. Haga clic en el botón Cortar de esta barra. (7)
La combinación de teclas que ejecuta la función Cortar es Ctrl + X, y la que ejecuta el comando Copiar es Ctrl + C. Estos atajos de teclado coinciden con los de cualquier otra aplicación que se ejecute en el entorno Windows.
9 La principal diferencia entre los comandos Cortar y Copiar reside en que mientras el primero elimina el elemento seleccionado del documento, el segundo lo mantiene. (8) Ambos envían el elemento al Portapapeles de Windows, una memoria temporal del sistema que guarda la información necesaria para utilizarla con posterioridad. Despliegue el menú Edición.
10 El elemento cortado o copiado puede ser pegado en el documento actual o en otro. Seleccione el comando Pegar. (9)
La combinación de teclas que ejecuta el comando Pegar es Ctrl + V.
11 El comando Pegar también puede ejecutarse pulsando el antepenúltimo botón de la barra de herramientas Estándar o mediante la típica combinación de teclas Ctrl + V. Al pegar el elemento copiado, en este caso concreto una imagen, el programa lanza el cuadro de diálogo Descripción de la imagen (texto alt), relacionado directamente con la accesibilidad en Dreamweaver. Gracias a esta descripción, personas con problemas visuales que utilizan herramientas de lectura para páginas web podrán tener acceso a un texto descriptivo de la imagen. Como éste no es el tema propuesto en esta lección, haga clic en Cancelar en este cuadro de diálogo.
12 Ahora puede comprobar cómo la imagen se ha pegado en el punto de origen, por ser el punto en que se encontraba el cursor de edición. La barra de herramientas Estándar se cierra con los también botones básicos Deshacer y Rehacer. Haga clic en el botón Deshacer, penúltimo de dicha barra. (11)
13 El comando Deshacer anula la última acción realizada, en este caso, el pegado de la imagen. La pulsación del último de los botones de la barra de herramientas Estándar, el comando Rehacer, la recuperaría. En esta práctica, aprovechando que la información necesaria sigue en el Portapapeles, volveremos a pegar la imagen. En este caso, pulse sobre el comando Pegar de la barra de herramientas Estándar (12) y pulse el botón Cancelar en el cuadro de accesibilidad que aparece.
La combinación de teclas Ctrl + Z deshace la última acción realizada.
14 Ya por último almacenaremos los cambios realizados en el documento. Pulse el comando Guardar de la barra de herramientas Estándar.
15 Terminaremos esta lección cerrando los dos documentos abiertos. Para ello, despliegue el menú Archivo y haga clic en el comando Cerrar todos.
Gestión de sitios y páginas
Introducción
El segundo apartado de este manual está dedicado íntegramente a la gestión de sitios locales y de los archivos que forman parte de este tipo de sitios. Un sitio Web es un conjunto de archivos enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver se presenta como un editor visual de sitios web, hecho que implica un uso y un funcionamiento del programa completamente intuitivo y, sin lugar a dudas, cada vez más sencillo para aquellos usuarios que no se consideran experimentados.
La versión CS5 de Dreamweaver, la que nos ocupa en este manual, ha simplificado todavía el proceso de creación y configuración de sitios; así, ha rediseñado y mejorado funcionalmente el cuadro de diálogo destinado a tal fin para que el usuario sólo necesite, de entrada, dar un nombre al sitio y otorgar una ubicación para los archivos que formarán parte de él. Una vez creado el sitio local, resulta realmente sencillo administrarlo, es decir, crear y manipular las distintas carpetas que albergarán documentos, imágenes y otros elementos que suelen aparecer en un sitio web.
El cuadro de diálogo Configuración del sitio para..., denominado en versiones anteriores del programa Definición del sitio para..., ha sido mejorado en la versión CS5.
Una vez creado el sitio local, resulta muy sencillo gestionarlo gracias a la accesibilidad al mismo desde el panel Archivos y el trabajo en el cuadro Administrar sitios.
En este apartado, el lector tendrá una primera toma de contacto con algún aspecto relacionado con el diseño de las páginas de un sitio; en concreto, aprenderá de un modo básico y sencillo, a insertar en una página colores e imágenes como fondo de la misma. Además, también conocerá unos elementos concretos que pueden servir de ayuda en el momento de la creación de un sitio web: las llamadas imágenes de rastreo.
El uso de imágenes de fondo para las páginas de un sitio web es una buena solución visual, siempre y cuando no dificulte la correcta visualización del contenido de las mismas.
Las imágenes de rastreo son meras guías visuales que ayudan al desarrollador de un sitio web a configurarlo; son recomendables, por tanto, en aquellos casos en que sea más de una persona la que está trabajando en un mismo proyecto.
Este tipo de imágenes son estructuras que pueden ser creadas en otros programas e insertadas como fondo en una página web para que sirva de guía. Las imágenes de rastreo sólo se visualizan en Dreamweaver, nunca en el navegador web en el que se muestra el sitio.
En las últimas lecciones de este apartado el lector aprenderá a realizar distintas tareas de administración y gestión de un sitio local, como exportarlo, importarlo y duplicarlo. Todas estas acciones se llevan a cabo desde un mismo cuadro de diálogo, el denominado Administrar sitios, cuyo uso acaba siendo imprescindible para la realización de muchos procedimientos.
Lección 9. Creación de un sitio web local
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. En esta lección aprenderemos el modo de crear un sitio Web local, cuyo contenido iremos confeccionando a lo largo del curso. La creación en sí tan sólo requiere la determinación del directorio que se convertirá en la carpeta raíz del sitio. En esta carpeta se almacenan los archivos que formarán parte del sitio web (imágenes, texto, páginas web…). Un sitio de Dreamweaver necesita, como máximo, tres carpetas, según el entorno de desarrollo y el tipo de sitio Web que se desarrolle: la carpeta raíz local, donde se guardan los archivos con los que está trabajando y el programa denomina “sitio local”; la carpeta remota, en la cual se almacenan los archivos para pruebas, producción, colaboración, etc. y que Dreamweaver denomina “sitio remoto”, y la carpeta de servidor de prueba, en la que el programa procesa páginas dinámicas. Para facilitar la configuración de estas opciones el programa incluye un asistente de creación de sitios, el cual va presentando diferentes pantallas en función del tipo de Web seleccionado.
RECUERDE
Para desarrolladores experimentados, el programa posibilita la introducción directa de los datos de configuración del sitio en la ficha Configuración avanzada del cuadro de diálogo Configuración del sitio para...
1 Dreamweaver, además de editor visual de páginas Web, es un gestor de sitios. Un sitio Web es un conjunto de documentos y archivos vinculados con atributos compartidos. La aplicación cuenta con un menú que contiene los comandos relacionados con la creación y gestión de sitios. Sin embargo, la versión CS5 facilita todavía más la creación de sitios locales gracias a la mejora del asistente de configuración. Empecemos. Despliegue el menú Sitio y haga clic sobre el comando Nuevo sitio. (1)
El cuadro de diálogo Configuración del sitio para… se denominaba en lecciones anteriores del programa Definición del sitio.
2 Se abre de esta forma el cuadro de diálogo Configuración del sitio para…, el cual en esta versión CS5 de Dreamweaver presenta un diseño totalmente renovado que permite realizar el proceso de forma mucho más sencilla. El asistente para la definición del sitio presenta tres categorías, a parte de una cuarta, denominada Configuración avanzada, destinada a los desarrolladores más experimentados y cuyo uso, por tanto, omitiremos en este curso: Sitio, Servidores y Control de versión. La categoría Sitio es la única que deberá completar para comenzar a trabajar en el sitio de Dreamweaver. En ella, debemos especificar un nombre para el sitio y la carpeta local en la que almacenará todos los archivos del sitio. En el campo Nombre del sitio, escriba la palabra elemental. (2)
3 El nombre del sitio aparece en el panel Archivos y en el cuadro de diálogo Administrar sitios, no en el navegador web. La carpeta del sitio local suele ubicarse en el equipo local, aunque también se puede encontrar en un servidor de red. Debe saber que, en general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. La carpeta remota incluye los archivos a los que los usuarios acceden en Internet. Las carpetas locales y remotas permiten transferir archivos entre el disco duro local y el servidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican en la carpeta remota cuando se desea que otras personas los puedan ver. Por defecto, el programa propone la carpeta de documentos del equipo. Para variar esta ubicación predeterminada del sitio local, pulse en el icono de la carpeta situada a la derecha del campo Carpeta del sitio local. (3)
La configuración de un sitio de Dreamweaver permite organizar los documentos asociados.
4 La acción nos conduce al cuadro de diálogo Elegir carpeta raíz. En este cuadro, haga clic en el botón Escritorio del panel de accesos directos. (4)
5 Todos estos cuadros de diálogo presentan un grupo de botones a la derecha del desplegable de la parte superior. La pulsación del tercero de ellos posibilita la creación directa de una carpeta. Pulse el botón Nueva carpeta, el tercero del grupo de botones de la parte superior del cuadro de diálogo.
6 Esta carpeta será la raíz, el nivel jerárquico superior, de nuestro sitio local, en la que iremos almacenando todos los archivos necesarios para el correcto funcionamiento del sitio. Asignaremos por tanto el nombre elemental a la carpeta creada. Escriba dicha palabra y pulse dos veces la tecla Retorno, la primera para confirmar el nombre y la segunda para abrir la nueva carpeta.
7 Por último procederemos a seleccionar la nueva carpeta, elemental, como carpeta local raíz de nuestro sitio. Pulse el botón Seleccionar.
8 La ruta de la nueva carpeta local ya se refleja en el campo Carpeta del sitio local. Haga clic en Guardar para generar el nuevo sitio. (5)
9 De esta forma tan sencilla hemos creado nuestro primer sitio web. El programa muestra el contenido del panel Archivos, en el cual se refleja nuestro sitio. (6) La categoría Control de versión permite obtener y desproteger archivos mediante Subversion. Subversion (SVN) es un sistema de control de versiones que permite a los usuarios editar y administrar archivos en colaboración en servidores Web remotos. Aunque Dreamweaver no es un cliente SVN completo, sí permite a los usuarios obtener las versiones más recientes de los archivos, realizar cambios y aceptarlos en los archivos. En la siguiente lección veremos cómo administrar un sitio web local. Para terminar este sencillísimo ejercicio, oculte el panel pulsando sobre la doble flecha de su cabecera.
Lección 10. Administración de un sitio local
Para facilitar su gestión posterior, Dreamweaver permite estructurar un sitio antes de empezar a editar los diferentes documentos contenidos en él. El programa dispone de un panel, Archivos, que permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. Las páginas Web tradicionales, por ejemplo, vienen identificadas por la extensión html. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar. Dicho panel posibilita, asimismo, la creación de subcarpetas dentro de la carpeta raíz del sitio. Dependiendo de la complejidad del sitio se deberá crear una estructura de carpetas que permita diferenciar fácilmente los documentos contenidos. En todo caso siempre es aconsejable crear una carpeta que contenga en exclusiva las imágenes utilizadas en el sitio.
RECUERDE
Entre los datos configurables en la categoría Configuración avanzada del cuadro de diálogo Configuración del sitio para… existe la posibilidad de predeterminar una carpeta como continente de este tipo de archivos.
1 Finalizamos la pasada lección creando el sitio Web elemental y continuamos en ésta administrando el contenido de este sitio. Para empezar, expanda el panel Archivos pulsando sobre su nombre en la parte derecha del área de trabajo.
2 Este panel permite visualizar archivos y carpetas, saber si están asociados a un sitio de Dreamweaver y realizar operaciones de mantenimiento. En la parte superior del panel se encuentra el campo Mostrar, que contiene el nombre del sitio web elemental, creado en la lección anterior. Este campo posibilita el acceso directo a todos los sitios configurados y al Escritorio, así como a las unidades de almacenamiento del equipo. Despliegue este campo y seleccione en este caso la opción Escritorio. (1)
3 En la parte central del panel se muestra, siguiendo la estructura en árbol tradicional del sistema operativo Windows, el contenido del directorio seleccionado, en este caso el Escritorio. Haga clic en el signo + que precede a la carpeta Elementos de escritorio, en la parte central del panel Archivos. (2)
Recuerde que puede mostrar y ocultar los paneles del programa desde el menú Ventana.
Los iconos de las carpetas y los archivos pertenecientes a un sitio web son de color verde.
4 En el Escritorio se encuentra la carpeta raíz, elemental, de nuestro sitio Web local. Dreamweaver diferencia visualmente, mediante el tono verde de los iconos, las carpetas y archivos pertenecientes a un sitio. Tras realizar esta comprobación visual de la ubicación de nuestro sitio web en el panel Archivos, iniciaremos la administración del mismo. Para ello, pulse el vínculo Administrar sitios, situado a la derecha del campo Mostrar.
5 Se abre así el cuadro de diálogo Administrar sitios, desde el cual es posible iniciar el proceso de edición de nuestro sitio web. Al seleccionar el nombre de un sitio web existente, se activan todos los botones del cuadro de diálogo. El botón Duplicar crea una copia del sitio seleccionado, sobre la cual puede realizar cambios para obtener así nuevos sitios basados en uno ya existente. El botón Quitar permite eliminar el sitio seleccionado. Es importante tener en cuenta que la eliminación de sitios es irreversible, es decir, no se puede deshacer. El botón Exportar permite exportar la configuración de un sitio como archivo XML (con extensión .ste), y el botón Importar permite seleccionar un archivo de configuración de un sitio existente (también con la extensión de archivo .ste). Seleccione el sitio elemental pulsando sobre su nombre y haga clic en el botón Editar. (3)
Al situar el puntero del ratón sobre el vínculo Administrar sitios, en el panel Archivos, éste cambia de color y pasa a mostrarse de color magenta.
El cuadro Administrar sitios también permite la creación de nuevos sitios web. Para ello es preciso pulsar el botón Nuevo en dicho cuadro.
6 La acción nos conduce al cuadro de diálogo Configuración del sitio para elemental, desde el cual realizaremos los ajustes de configuración que necesitamos. Nuestra intención es crear nuevas carpetas y archivos que formarán parte de nuestro sitio web. Haga clic sobre la categoría Configuración avanzada. (4)
7 El programa permite fijar la estructura del sitio antes de empezar a editar los diferentes archivos contenidos en él. Resulta habitual reservar una carpeta del sitio para contener los archivos de imagen utilizados en las páginas y permite incluso predeterminarla para que el programa la utilice cuando añada imágenes a los documentos. Para ello, en el apartado Información local, seleccionado por defecto en esta categoría, pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes. (5)
8 Vamos a crear una carpeta para las imágenes dentro de la carpeta local. En el cuadro de diálogo Elegir la carpeta de imágenes, que muestra por defecto el contenido (en este caso todavía nulo) de la carpeta raíz elemental, pulse el botón Crear nueva carpeta. (6)
Puede utilizar el menú contextual para crear nuevas carpetas y nuevos archivos.
9 Resulta aconsejable la asignación de nombres que faciliten la rápida identificación del contenido de carpetas y archivos. Escriba la expresión inglesa images y pulse dos veces la tecla Retorno, la primera para confirmar el nombre (7) y la segunda para abrir la nueva carpeta.
10 Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar.
El botón Ayuda del cuadro de diálogo Administrar sitios permite acceder a la ayuda del programa relativa a la administración y la edición de sitios web.
11 El campo Vínculos relativos a permite especificar el tipo de vínculos que crea Dreamweaver al crear enlaces con otros activos o páginas del sitio. El programa puede crear dos tipos de vínculos: relativos al documento y relativos a la raíz del sitio. Nos ocuparemos de la creación y la gestión de enlaces más adelante en este libro. De vuelta al cuadro de diálogo de configuración del sitio, pulse el botón Guardar y, en el cuadro de diálogo Administrar sitios, haga clic en el botón Listo. (8)
12 Automáticamente el panel Archivos se actualiza y muestra el contenido del sitio elemental una vez modificado. Así en el cuadro central del panel se puede observar como la carpeta raíz contiene la carpeta preestablecida para albergar las imágenes, images. (9) Dreamweaver permite gestionar la estructura del sitio web directamente desde el panel Archivos. Vamos a comprobarlo para agregar un nuevo archivo a nuestro sitio. Despliegue el menú de opciones del panel pulsando en el icono situado en el extremo derecho de su cabecera, pulse sobre el comando Archivo y seleccione la opción Nuevo archivo. (10)
Si pulsa la combinación de teclas Ctrl + Mayús + N también iniciará el proceso para crear un nuevo archivo.
13 Pendiente de la carpeta raíz del sitio web en el panel Archivos aparece un nuevo documento, denominado por defecto untitled.htm. Si bien cada usuario puede asignar libremente el nombre a sus archivos y carpetas, el nombre de la página principal de un sitio viene determinada. Habitualmente se utiliza el nombre index para identificar la página principal de un sitio, pero en todo caso este nombre dependerá de la configuración del servidor que hospedará el sitio para su visualización en Internet. Utilizaremos esta nueva página como la inicial del sitio, la que se cargará en el navegador en primera instancia. Escriba la expresión index y pulse la tecla Retorno. (11)
14 Otra forma de modificar o ampliar la estructura del sitio web desde el panel Archivos es mediante los comandos de su menú contextual. Para comprobarlo, crearemos una carpeta que contendrá los documentos dependientes de la página principal. Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y, en el menú contextual que se despliega, seleccione el comando Nueva carpeta. (12)
El resultado es el mismo que si utilizara los comandos del menú de opciones del panel Archivos; en ese caso, recuerde siempre seleccionar la ubicación de la estructura en la que desea situar los nuevos elementos, ya sean archivos o carpetas.
15 Escriba la palabra documentos para renombrar la nueva carpeta y pulse la tecla Retorno. (13)
16 Vamos a incluir una página en blanco dentro de esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y, en el menú contextual, seleccione la opción Nuevo archivo. (14)
En el panel Archivos, puede consultar el tipo de elemento, así como la fecha de creación de los mismos.
Resulta altamente recomendable estructurar el sitio de manera ordenada.
17 Este documento nos servirá para realizar algunas prácticas del próximo apartado del curso, relacionadas con la edición de texto. Escriba la palabra texto como nombre del nuevo documento y pulse la tecla Retorno.
18 Desde el panel Archivos es posible efectuar múltiples funciones, como abrir los documentos para su edición. Para comprobarlo, haga doble clic en el icono del documento texto.html. (15)
19 La página en blanco se abre en el área de trabajo del programa, lista para ser editada. (16) Iremos conociendo ésta y otras funciones del panel Archivos en el transcurso de las siguientes lecciones. Para finalizar este ejemplo práctico, pulse el botón de aspa del documento abierto para cerrarlo sin realizar en él ningún cambio.
Lección 11. Aplicar un color de fondo a una página
Entre los muchos aspectos configurables mediante etiquetas HTML se encuentran el color de fondo, el título y la codificación de las páginas. Estas propiedades son incluidas en la cabecera de la página automáticamente por Dreamweaver durante la generación de los documentos. Posteriormente pueden ser modificados en el cuadro de diálogo Propiedades de la página, que presenta sus opciones diferenciadas en categorías. El campo Fondo de la categoría Apariencia (HTML) da acceso a una paleta emergente, en la que es posible seleccionar una de las muestras para aplicar la tonalidad seleccionada al fondo de la página. La categoría Título/Codificación, por su parte, permite cambiar el título preestablecido durante la generación del programa, sustituyéndolo en el cuadro de texto propuesto a tal efecto. El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Por último, las opciones del desplegable Codificación permiten la correcta visualización de páginas cuyos textos estén escritos en idiomas que presenten caracteres especiales.
RECUERDE
Tanto desde el cuadro de diálogo Propiedades de la página como desde el panel Propiedades es posible crear nuevas reglas CSS obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.
1 En esta lección aprenderemos a definir las propiedades de una página Web; en concreto, aplicaremos un color de fondo y asignaremos un título a nuestra página principal. Para empezar, muestre el panel Archivos y, en él, haga doble clic sobre la página index.htm para abrirla en el área de trabajo del programa. (1)
2 Una vez hemos abierto la página que deseamos modificar, vamos a acceder al cuadro de diálogo Propiedades de la página desde el cual es posible especificar las propiedades de diseño y formato. Para ello, despliegue el menú Modificar y seleccione el comando Propiedades de la página. (2)
Además de utilizar el doble clic para abrir un archivo, también puede pulsar sobre el comando Abrir del menú contextual del elemento en cuestión.
También puede acceder al cuadro de diálogo Propiedades de la página mediante el botón del mismo nombre del panel Propiedades o bien utilizando la combinación de teclas Ctrl + J.
3 El cuadro de diálogo Propiedades de la página se muestra ordenado por categorías, siendo la llamada Apariencia (CSS) la activa por defecto. De forma predeterminada, Dreamweaver utiliza estilos CSS en lugar de etiquetas HTML para definir las propiedades de las páginas. Esto hace que el cuadro de diálogo Propiedades de la página presente opciones complementarias, ya que el uso de estilos ofrece mayores posibilidades de control de propiedades que la simple introducción de código HTML. Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la categoría Apariencia (HTML) del panel de la izquierda.
4 Desde la categoría Apariencia (HTML) es posible asignar una imagen de fondo, así como un color tanto para el fondo como para el texto y los enlaces de la página. Además, también es posible especificar los márgenes izquierdo y superior de la página y la anchura y la altura del margen. En este caso, pulse sobre la punta de flecha de la muestra de color del campo Fondo y seleccione con un clic la última muestra de la octava columna de la paleta emergente. (3)
5 Si utiliza para su página web una apariencia basada en estilos CSS, puede definir la fuente predeterminada, el tamaño de la fuente y los colores de los vínculos, los vínculos visitados y los vínculos activos basados en estos estilos. Para ello, pulse sobre la categoría Vínculos (CSS) para consultar su contenido. (4)
Al seleccionar un color de la paleta emergente, se refleja en el campo Fondo, junto a la muestra, el código correspondiente.
6 Desde el cuadro de propiedades también puede definir el formato que deben presentar los encabezados de la página. En este caso, acceda a la categoría Encabezados (CSS) pulsando sobre su nombre.
7 Pero en este ejemplo práctico, nos interesa modificar únicamente aspectos definibles mediante etiquetas HTML. Haga clic en la categoría Título/Codificación para acceder al contenido de esta categoría. (5)
8 En esta categoría puede consultar en todo momento la ubicación de la carpeta en la que se encuentra el documento que se está modificando (carpeta de documentos) y la ubicación de la carpeta del sitio. El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabemos, no es necesario cambiar directamente la etiqueta desde la vista Código para variar el título que el programa preestablece para la página, Documento sin título; en una lección anterior conocimos el modo de introducir el título de una página en el campo correspondiente del panel de propiedades y también en la barra de herramientas Documento. Indicaremos en este caso que la página index.html es la principal del sitio. En el campo Título escriba la palabra principal y pulse el botón Aceptar. (6)
9 Los cambios se reflejan en la página index.htm, en concreto en el color de fondo y en el título de la página. (7) Muestre de nuevo el panel Archivos y haga doble clic ahora sobre la página texto.html para abrirla. (8)
La categoría Imagen de rastreo permite insertar un archivo de imagen para utilizarlo como guía al diseñar la página. En una lección posterior nos ocuparemos con detalle de la inserción de imágenes de rastreo en una página web.
10 Como las propiedades asignadas sólo se aplican a la página activa, el fondo del documento texto.html sigue presentando el color blanco predeterminado. Para armonizar el fondo de esta página con el de la página principal, accederemos de nuevo al cuadro de propiedades. Para ello, haga clic en el botón Propiedades de la página del panel Propiedades.
11 En el cuadro de diálogo Propiedades de la página, haga clic en la categoría Apariencia (HTML), despliegue el campo Fondo y seleccione el mismo tono azul que en la ocasión anterior.
12 Haga clic en la categoría Título/Codificación para acceder a su contenido.
13 En el campo Título, escriba la palabra secundaria y pulse el botón Aceptar para confirmar los cambios realizados. (9)
14 El título y el color de fondo se aplican correctamente. En la próxima lección veremos el modo de utilizar una imagen como fondo de la página. Para finalizar la presente, guardaremos simultáneamente los cambios realizados en los documentos index.htm y texto.htm. En la barra de herramientas Estándar, pulse sobre el comando Guardar todo, que muestra, como ya sabe, la imagen de dos disquetes. (10)
Recuerde que si no dispone de esta barra visible en el área de trabajo, puede utilizar el comando Guardar todo del menú Archivo.
RECUERDE
La codificación, también incluida en el encabezado, adapta la página al idioma utilizado. En principio, los navegadores de Internet están configurados para el idioma del país al que pertenecen. Si la intención del usuario es que las páginas contengan caracteres específicos de un idioma, puede seleccionarlo en el campo Codificación de la categoría Título/ Codificación del cuadro de propiedades.
Lección 12. Insertar una imagen de fondo a una página
Dreamweaver permite el uso de imágenes como alternativa al color de fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. En el caso de haber seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente efectúa una copia del documento original en la mencionada carpeta. Si la imagen utilizada no ocupa toda la ventana del navegador, Dreamweaver forma un mosaico, a menos que sean utilizados estilos CSS. En todo caso debe seleccionar una imagen que se ajuste correctamente a esta función. Así deben evitarse los documentos de imagen de tamaño elevado, ya que aumentan el tiempo de descarga de la página, y es recomendable seleccionar fondos de imagen que permitan visualizar correctamente los contenidos de la página. Por último, debe saber que el uso de imágenes como fondo es incompatible con el coloreado del mismo.
1 En la práctica anterior cambiamos el color de fondo de los documentos index.html y texto. html mediante las opciones del cuadro de diálogo Propiedades de la página. En esta lección aprenderemos a utilizar una imagen como fondo de un documento Web. Esta imagen puede descargarla desde nuestra página web, con el nombre fondo.jpg, y guardarla en la carpeta de imágenes en su equipo. Empezaremos la práctica creando una copia de la página texto.html, ya que nos interesa conservar este documento en su estado actual. Vamos allá. Muestre el panel Archivos y seleccione con un clic el archivo texto.htm.
2 Seguidamente, despliegue el menú de opciones del panel, haga clic sobre el comando Edición y seleccione la opción Duplicar. (1)
Si prefiere trabajar desde el teclado, pulse la combinación de teclas Ctrl D para obtener el duplicado de la página seleccionada.
El menú contextual que aparece el pulsar con el botón derecho del ratón sobre cualquier elemento del panel Archivos también contiene el comando Edición con la opción Duplicar.
3 La copia se sitúa en el mismo directorio que el original, es decir, en la carpeta documentos del sitio elemental, y el programa le asigna el nombre texto-Copia.html. Seleccione el nuevo archivo pulsando sobre su icono en el panel Archivos. (2)
4 Asignaremos un nombre a la página que describa mejor su contenido. Tenemos varias opciones para cambiar el nombre de un documento, tras su selección en el panel Archivos. Una opción consiste en seleccionar el comando Cambiar nombre, bien en el menú de opciones del panel, bien en el menú contextual del documento. La pulsación de la tecla F2 selecciona el nombre del documento de forma directa, posibilitando su variación, y lo mismo ocurre con la pulsación con el ratón sobre el nombre. Pulse de nuevo sobre el nombre del documento texto-Copia.html, escriba la palabra foto y pulse dos veces la tecla Retorno, la primera para confirmar el nombre y la segunda para abrir el archivo. (3)
Recuerde que también puede acceder al cuadro de diálogo Propiedades de la página mediante el comando del mismo nombre del menú Modificar.
5 Vamos a iniciar el proceso para suprimir el color de fondo y aplicar la imagen en cuestión. Pulse el botón Propiedades de la página del panel Propiedades.
6 Se abre el cuadro de diálogo Propiedades de la página, con el cual trabajamos en la lección anterior. En este cuadro, pulse sobre la categoría Apariencia (HTML).
7 Para utilizar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Haga clic en el botón Examinar, situado a la derecha del campo Imagen de fondo. (4)
8 Aparece el cuadro de diálogo Seleccionar origen de imagen. Sus opciones se dividen en diversos apartados. La parte superior queda reservada a la selección del tipo de archivo de imagen que va a ser utilizado. Esto es debido a que Dreamweaver permite la inserción de imágenes dinámicas, es decir, que cambian de contenido. De momento nos limitaremos a insertar documentos de imagen estáticos en nuestras páginas, por lo que dejaremos seleccionada la opción establecida por defecto, Sistema de archivos. De este modo el cuadro de diálogo muestra en su parte central las opciones relacionadas con la búsqueda y selección del documento de imagen. Lo que debemos hacer ahora es localizar la carpeta Imágenes del equipo, en la que usted habrá guardado el archivo de ejemplo fondo.jpg. Pulse el botón Subir un nivel, que muestra el dibujo de una carpeta y una flecha de color verde. (5)
9 La carpeta de imágenes se encuentra entre las bibliotecas del equipo. Localice el directorio Bibliotecas, haga doble clic sobre él y haga doble clic también en la biblioteca Imágenes. (6)
La opción Fuentes de datos, que permite la inserción de imágenes dinámicas, requiere la configuración de un sitio de prueba que utilice una tecnología que permita el control de datos.
10 En la carpeta de imágenes, seleccione con un clic el archivo fondo.jpg pulsando en su icono. (7)
El tamaño en disco de una imagen depende de diversos factores, siendo sus dimensiones uno de los principales. Debe saber que el tamaño en disco guarda relación directa con el tiempo de descarga de la imagen y, por tanto, siempre es aconsejable utilizar archivos de tamaño reducido.
11 En lecciones posteriores trataremos con mayor detenimiento las opciones que presenta la sección inferior del cuadro de diálogo. De momento cabe destacar que entre éstas se encuentra la que activa la vista previa del documento de imagen en la sección derecha del cuadro de diálogo. Bajo esta vista preliminar se muestran las propiedades básicas del archivo seleccionado: dimensiones, formato, tamaño en disco y tiempo de descarga estimado. Haga clic en Aceptar.
12 Tras la selección del archivo, el campo Imagen de fondo pasa a contener la ruta del mismo, su situación dentro del sistema de archivos empezando por el nivel jerárquico superior. Sin embargo, observe que no aparece la carpeta Imágenes, a la que hemos accedido para seleccionar el archivo, sino el nombre de la configurada como predeterminada en lecciones anteriores, images, para contener las imágenes del sitio local. Pulse el botón Aceptar del cuadro de diálogo Propiedades de la página para aplicar como fondo la imagen seleccionada. (8)
13 Al mismo tiempo que se inserta la imagen como fondo, Dreamweaver realiza automáticamente una copia del documento original en la carpeta images. El programa se asegura de este modo que el documento utilizado se encuentra dentro del sitio local y utiliza la carpeta predeterminada para ubicarlo. Muestre el panel Archivos y en él haga clic en el botón + que precede a la carpeta images para comprobarlo. (9)
14 Efectivamente la carpeta images del sitio contiene la imagen aplicada como fondo. Pulse el botón de aspa de la pestaña del documento foto.html y, en el cuadro de diálogo en el cual se solicita confirmación para almacenar los cambios, pulse en Sí para finalizar este ejemplo práctico. (10)
Debe saber que si decide no almacenar los cambios en la página actual, el archivo correspondiente a la imagen insertada como fondo permanecería en la carpeta images del sitio local.
Lección 13. Insertar una imagen de rastreo
Dreamweaver facilita la utilización de imágenes a modo de referencia de diseño de las páginas. La categoría Imagen de rastreo del cuadro de diálogo Propiedades de la página permite la selección del documento de imagen original. En el caso de haber seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente efectúa una copia del documento original en la mencionada carpeta. Antes de su aplicación como imagen de rastreo, el programa permite la aplicación de un índice de transparencia, de manera que no obstaculice el correcto visionado de los elementos que componen la página realmente, los que serán mostrados al ser cargada en el navegador de Internet. Las imágenes de rastreo son meras guías de diseño, por lo que no aparecen en el navegador cuando se carga la página.
RECUERDE
En lugar de trabajar desde el cuadro de diálogo Propiedades de la página para insertar una imagen de rastreo en una página web, también puede dirigirse al menú Ver, seleccionar el comando Imagen de rastreo y del submenú que contiene elegir la opción Cargar. Tras esta acción, se abrirá el cuadro de diálogo Seleccionar origen de imagen, en el cual deberá localizar y seleccionar la imagen que desea utilizar como guía para el documento.
1 Tras conocer en la lección anterior el modo de utilizar una imagen como fondo de una página Web, insertaremos en la presente práctica una imagen de rastreo, la cual podría servir de guía de diseño para la posterior elaboración de nuestro sitio web. Para ello utilizaremos la página principal de nuestro sitio elemental, index.html, que se encuentra abierta en segundo plano, así como un nuevo archivo de ejemplo que puede descargar desde nuestra página web con el nombre rastreo.jpg. Cuando disponga de esta nueva imagen almacenada en la carpeta de imágenes de su equipo, ponga en primer plano el documento index.html haciendo clic en su pestaña.
2 El proceso para insertar una imagen de rastreo es prácticamente el mismo que el que utilizamos para insertar una imagen de fondo a una página. Por lo tanto, despliegue el menú Modificar y haga clic sobre el comando Propiedades de la página. (1)
Las imágenes de rastreo pueden encontrarse en formato JPEG, GIF o PNG.
La combinación de teclas Ctrl + J también abre el cuadro de diálogo Propiedades de la página.
3 El cuadro de diálogo Propiedades de la página cuenta con una categoría dedicada específicamente a la inserción de imágenes de rastreo. Haga clic en dicha categoría, denominada precisamente Imagen de rastreo. (2)
4 Como en el caso anterior, cuando utilizamos las imágenes como fondo de las páginas, en primer lugar deberemos especificar el directorio en el que se encuentra el documento que va a ser utilizado como imagen de rastreo. Pulse el botón Examinar situado a la derecha del campo Imagen de rastreo.
5 Aparece el cuadro de diálogo Seleccionar origen de imagen, que nos permite seleccionar directamente el documento que va a ser utilizado como imagen de rastreo. Este cuadro se abre mostrando la última ubicación con la que ha trabajado, en este caso, la carpeta de imágenes del equipo, en la que precisamente se encontrará la imagen que necesitamos. Seleccione el documento rastreo.jpg y pulse el botón Aceptar. (3)
Al seleccionar un archivo en el cuadro Seleccionar origen de imagen, se muestra la vista previa del mismo en la parte derecha de este cuadro, siempre y cuando la opción Vista previa de imagen se encuentre activada.
Si pulsa el botón Aplicar en el cuadro Propiedades de la página podrá comprobar el resultado sobre la página activa antes de aceptar los cambios definitivamente.
6 También como en el caso de las imágenes de fondo, el programa determina realizar una copia del archivo seleccionado en el directorio preestablecido para albergar este tipo de archivos dentro del sitio, la carpeta images. Pulse el botón Aceptar.
7 La imagen queda incrustada en el fondo como guía visual para facilitar la edición de la página y su correcta estructuración. (4) A diferencia de la utilizada como fondo de la página, la imagen de rastreo sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador de Internet. Es por ello que el programa permite aplicar un índice de transparencia a este tipo de imágenes. Vamos a comprobarlo. Pulse sobre el botón Propiedades de la página del panel Propiedades.
8 En el cuadro Propiedades de la página, seleccione de nuevo la categoría Imagen de rastreo. (5)
9 Por defecto las imágenes se muestran completamente opacas. La barra deslizante del campo Transparencia permite determinar el índice de opacidad de la imagen de rastreo. Así el 100% actual indica la opacidad absoluta de la imagen. Haga clic en la parte izquierda de la barra Transparencia para establecer una opacidad del 20%. (6)
En lugar de trabajar mediante clics, puede arrastrar el botón deslizante del parámetro Transparencia hasta el punto que necesite.
10 La imagen de rastreo será por tanto un 80% transparente. Para comprobarlo, pulse el botón Aceptar.
11 De este modo la imagen podrá ser utilizada de guía, sin que resulte visualmente molesta, para situar los diferentes elementos que compondrán la página. (7) Muestre el panel Archivos y compruebe como el programa ha situado automáticamente el archivo utilizado como imagen de rastreo en la carpeta predeterminada del sitio. (8)
Una vez insertada la imagen de rastreo, ésta puede ser modificada, además de respecto a su transparencia, ajustando su posición y la alineación en la página. Para ello, es preciso dirigirse al comando Imagen de rastreo del menú Ver.
Lección 14. Insertar notas de diseño
Las notas de diseño, denominadas en Dreamweaver Design Notes, facilitan la conservación de información adicional asociada a los documentos, como los nombres de los archivos de imagen y comentarios sobre el estado del archivo. Se trata de notas que el desarrollador del sitio crea para un archivo, asociándose a éste pero almacenándose en un documento aparte. También es posible utilizar las notas de diseño para realizar el seguimiento de información confidencial que no puede introducir en un documento por motivos de seguridad. El cuadro de diálogo Design Notes permite su introducción y activación. Dreamweaver permite crear notas de diseño para cada documento o plantilla del sitio, así como para applets, controles ActiveX, imágenes, contenido Flash, objetos Shockwave y campos de imagen en los documentos.
RECUERDE
Tenga en cuenta que si el archivo al que desea asociar la nota de diseño se encuentra en un sitio remoto, primero debe proteger u obtener el documento en cuestión y, a continuación, seleccionarlo en la carpeta local.
1 En esta lección conoceremos el modo de introducir un tipo de ayudas que proporciona el programa para facilitar el control del trabajo realizado, las llamadas Design Notes o notas de diseño. Despliegue el menú Archivo y seleccione el comando Design Notes. (1)
2 Las Design Notes son notas de diseño que el usuario crea para un archivo, las cuales se asocian al archivo que describen, pero se guardan en un archivo aparte. El cuadro de diálogo Design Notes, el cual consta de dos pestañas (Información básica y Toda la información), presenta en su parte superior un desplegable que permite designar el estado para la nota de diseño. Despliegue el campo Estado y, tras comprobar las opciones que contiene, mantenga seleccionada la opción Borrador. (2)
También es posible acceder al cuadro de diálogo Design Notes desde el menú contextual del documento al que deseemos asociar la nota.
3 Seguidamente, haga clic en el icono situado en la parte superior derecha del cuadro de texto Nota para que aparezca la fecha local actual en la nota.
4 Efectivamente, la fecha actual se inserta al inicio del espacio reservado para el texto de la nota. (3) Las notas de diseño pueden ser utilizadas para mantener información adicional asociada a los documentos, como comentarios sobre el estado del archivo. En el campo Nota, haga clic por debajo de la fecha actual, escriba la frase borrar referencia y pulse la tecla Retorno. (4)
5 Las notas de diseño también pueden ser empleadas para realizar el seguimiento de la información confidencial que no puede introducir en un documento por motivos de seguridad. Active con un clic la casilla de verificación de la opción Mostrar al abrir el archivo para activarla.
6 De este modo la nota pasa a estar activa y será mostrada antes de poder iniciar la edición del documento al que se encuentra asociada. Haga clic en la pestaña Toda la información para acceder a esta ficha.
7 La ficha Toda la información muestra en la parte superior el nombre y la ubicación del archivo al que la nota quedará asociada, en este caso la página principal, index.html, del sitio elemental. El botón que muestra el signo + permite la introducción de nuevos elementos en la nota, los parámetros de los cuales pueden ser definidos en los cuadros Nombre y Valor. Vamos a comprobarlo. Haga clic sobre el signo +. (5)
8 El cursor de edición se sitúa en el campo Nombre, lo que significa que podemos insertar la nueva nota. Como ejemplo, en este campo escriba la palabra Autor.
9 Haga clic en el campo Valor y escriba el nombre Sonia. (6)
El botón que muestra el signo – elimina de la nota el elemento seleccionado en el campo Información.
Si necesita información acerca de la creación y el uso de las notas de diseño, pulse el botón Ayuda.
10 De esta forma hemos agregado un nuevo par de elementos en la misma nota de diseño. Pulse el botón Aceptar.
11 Para comprobar que la nota ha quedado activada y asociada correctamente al archivo index.html, en primer lugar deberemos cerrarlo. Pulse el botón de aspa de la pestaña del documento y haga clic en el botón Sí del cuadro de advertencia para almacenar las modificaciones.
12 Dreamweaver guarda las notas de diseño en una carpeta llamada _notes en la misma ubicación que el archivo actual. El nombre de archivo será el nombre del documento más la extensión .mno. A continuación, despliegue el panel Archivos y haga doble clic sobre la página index.html para abrirla de nuevo en el área de trabajo.
13 Efectivamente, el programa, antes de cargar la página para su edición, muestra la nota asociada al archivo en el mismo cuadro de diálogo Design Notes. En este cuadro, pulse en la casilla de verificación de la opción Mostrar al abrir el archivo para desactivarla y, seguidamente, haga clic en Aceptar.
14 Automáticamente el programa carga la página index.html, posibilitando su edición. La nota sigue asociada al documento, pese a que no volverá a ser mostrada a menos que sea activada de nuevo. ¿Cómo podemos saber si una página en un sitio web cuenta con notas de diseño asociadas? Dreamweaver permite añadir una columna en el panel Archivos denominada Notas que indica la existencia o no de este tipo de notas. Por defecto, esta columna se encuentra oculta. Veamos cómo mostrarla. Despliegue el menú Sitio y haga clic sobre el comando Administrar sitios. (7)
Si necesita recordar algún aspecto acerca de la creación de un sitio local, no dude en consultar las lecciones 9 y 10 de este manual.
Mediante el botón + situado debajo del cuadro de columnas puede insertar columnas personalizadas en el panel Archivos.
15 En el cuadro de diálogo Administrar sitios, con el sitio elemental seleccionado, haga clic en el botón Editar para acceder al cuadro de configuración del sitio.
16 Se abre así el cuadro de diálogo Configuración del sitio para elemental, en el cual debemos acceder a las opciones de configuración avanzadas. Para ello, haga clic sobre la categoría Configuración avanzada y muestre la sección Columnas vista archivo. (8)
17 En esta sección se muestran todas las columnas que aparecen en el panel Archivos con la información referente a las páginas y los elementos de un sitio web. En este caso, compruebe que todas las columnas se encuentran activas (con el estado Mostrar en la columna del mismo nombre), excepto la de las notas (con el estado Ocultar). Haga doble clic sobre el nombre de la columna Nota para editarla.
18 A continuación, marque la opción Mostrar en el apartado Opciones para cambiar el estado de la columna de notas y haga clic en Guardar para confirmar el cambio. (9)
19 Efectivamente, el cambio se refleja ahora en el cuadro de columnas. Pulse en Guardar en el cuadro de configuración del sitio. (10)
La opción Activar columnas compartidas, desactivada por defecto en el cuadro de configuración del sitio, permite compartir las notas de diseño con el resto de los documentos del sitio. La activación de esta opción requiere, sin embargo, activar las Design Notes, así como la carga de las mismas.
20 De vuelta al cuadro Administrar sitios, pulse el botón Listo para confirmar los cambios realizados.
21 Efectivamente, en el panel Archivos ya puede comprobar la aparición de la columna Nota y del icono de color amarillo que indica que la página index.html cuenta con una nota de diseño asociada. (11) Ahora puede consultar la nota de diseño directamente desde el panel Archivos. Para ello, haga doble clic sobre el icono de color amarillo.
22 Efectivamente, se abre el cuadro de diálogo Design notes mostrando los datos de la nota asociada. (12) Pulse el botón Aceptar para salir de este cuadro y dar así por terminada esta lección.
Si desea eliminar todos los archivos locales de Design Notes del sitio, acceda al cuadro de configuración del sitio, concretamente a las opciones de configuración avanzada, y en la sección Design Notes, haga clic en Limpiar, confirmando la operación de eliminación cuando el programa lo solicite.
Lección 15. Exportar y eliminar un sitio local
Dreamweaver guarda las diferentes configuraciones establecidas para los sitios creados en una de las carpetas que el sistema destina a almacenar los datos de cada usuario. Pero cada vez resulta más habitual trasladar la diferente información, bien para realizar el trabajo en equipo, bien por necesidad. Dreamweaver permite exportar la configuración de cada uno de los sitios en archivos de extensión .ste. Estos archivos de definición almacenan únicamente la configuración del sitio, nunca los archivos que lo componen. Del mismo modo, la eliminación de uno de los sitios definidos sólo conlleva la supresión de su configuración. Para exportar o eliminar sitios hay que acudir al cuadro de diálogo Administrar sitios. En cualquier caso, resulta conveniente exportar los sitios con regularidad, de modo que siempre se disponga de una copia de seguridad por si ocurre algún problema, evitando de este modo la pérdida accidental de información.
1 Resulta cada día más habitual desarrollar en equipo el trabajo con los documentos de un sitio, dada la complejidad que puede llegar a alcanzar, así como que un mismo usuario trabaje en diferentes equipos. Dreamweaver permite almacenar la configuración establecida para definir un sitio, de forma que pueda ser utilizada con posterioridad en el equipo original o en otros. Veamos cómo llevar a cabo la exportación de nuestro sitio web. Para empezar, despliegue el menú de opciones del panel Archivos, haga clic sobre el comando Sitio y, en el submenú que contiene, pulse sobre la opción Administrar sitios. (1)
2 El cuadro Administrar sitios permite gestionar toda la información referente a un sitio web. En este cuadro de diálogo, y con el sitio elemental seleccionado, pulse el botón Exportar. (2)
Recuerde que puede acceder al cuadro de diálogo Administrar sitios mediante el comando del mismo nombre del menú Sitio, y también el enlace situado en el campo Mostrar de este panel.
Si dispone de más de un sitio local configurado en su equipo, no olvide seleccionar el sitio que desea gestionar.
3 La acción conduce al cuadro de diálogo Exportar sitio. En él sólo deberemos seleccionar el directorio en el que deseamos almacenar el archivo de definición del sitio. Haga clic en el botón Escritorio del panel de accesos directos.
4 Los archivos de definición de sitios presentan la extensión .ste, como puede comprobar en el campo Tipo de este cuadro. El programa atribuye automáticamente esta extensión y conserva el nombre original del sitio, elemental, que puede ser sustituido en el cuadro de texto propuesto al efecto. Pulse el botón Guardar.
5 Una vez exportada la configuración, en forma de archivo de extensión .ste, el programa nos devuelve al cuadro de diálogo Administrar sitios. La exportación no ha supuesto alteración alguna de la configuración original del sitio elemental. Pulse el botón Listo.
6 De este modo el programa sigue cargando correctamente la estructura del sitio elemental en el panel Archivos e identifica sus carpetas con la característica tonalidad verde. Despliegue el cuadro Mostrar en este panel pulsando en su botón de flecha y seleccione la opción Escritorio. (3)
7 En la siguiente lección importaremos el archivo exportado anteriormente. Pero antes fingiremos encontrarnos en otro sistema para mostrarle así cómo eliminare el sitio elemental. Para ello, deberemos acceder de nuevo al cuadro de diálogo Administrar sitios. Haga clic en el enlace Administrar sitios del panel Archivos, a la derecha del campo Mostrar. (4)
8 En el cuadro de diálogo del mismo nombre, seleccione el sitio elemental y pulse el botón Quitar. (5)
Recuerde que al suprimir un sitio sólo eliminamos la configuración que lo define, lo que significa que el programa conserva toda la estructura de carpetas y archivos que lo componían.
9 El programa muestra un cuadro de advertencia. (6) La configuración del sitio no podrá ser recuperada si se procede a su eliminación. Pero nosotros contamos con un documento de definición del sitio elemental que nos permitirá recuperar esta configuración en cualquier momento. Haga clic en el botón Sí para eliminar definitivamente el sitio y pulse el botón Listo del cuadro de diálogo Administrar sitios.
10 Al quitar el sitio sólo eliminamos la configuración que lo define, conservándose toda la estructura de carpetas y archivos que lo componían. Así la carpeta elemental sigue situada en el Escritorio, aunque en el panel Archivos se muestra de color amarillo, como el resto de carpetas del sistema. Para finalizar esta práctica, antes de recuperar la configuración en la próxima, cambiaremos de ubicación la carpeta que contiene la estructura del sitio creada anteriormente. Para ello deberemos antes cerrar los documentos contenidos en ella que permanecen cargados en Dreamweaver. Despliegue el menú Archivo y seleccione el comando Cerrar todos.
11 El panel Archivos permite resituar las diferentes carpetas de modo directo, pero para ello los documentos que contienen no pueden estar siendo utilizados por ninguna aplicación. Muestre de nuevo el panel Archivos, haga clic con el botón derecho del ratón sobre la carpeta elemental, pulse sobre el comando Edición y elija la opción Cortar del menú contextual. (7)
También puede seleccionar la carpeta en cuestión y pulsar la combinación de teclas Ctrl + X.
12 Compruebe que la carpeta cortada aparece ahora atenuada en el panel Archivos. Situaremos la carpeta elemental dentro de una nueva carpeta que crearemos en el Escritorio. Pulse con el botón derecho del ratón en el icono de la carpeta Elementos de escritorio y, en el menú contextual, seleccione el comando Nueva carpeta. (8)
13 En esta carpeta almacenaremos los diferentes sitios creados en las prácticas del curso. Escriba la palabra sitios y pulse la tecla Retorno.
14 La carpeta cortada sigue en el Portapapeles de Windows. Con la carpeta sitios seleccionada, despliegue el menú de opciones del panel Archivos, haga clic sobre el comando Edición y elija esta vez la opción Pegar. (9)
15 La carpeta cortada y todo su contenido se encuentran ahora dentro del directorio sitios. En la siguiente lección importaremos la configuración guardada anteriormente para comprobar los problemas que pueden surgir durante la importación de un sitio en un equipo diferente al original. Pero antes de finalizar la práctica actual comprobaremos que el contenido de la carpeta elemental ha sido trasladado correctamente. En el panel Archivos, pulse el botón + de dicha carpeta para expandirla. (10)
RECUERDE
Debe tener precaución al utilizar el comando Cortar, ya que una segunda aplicación del mencionado comando borra del Portapapeles la información del primer elemento cortado. Además puede conllevar la pérdida del elemento original, en función de la versión del sistema operativo utilizado.
Lección 16. Importar un sitio local a Dreamweaver
Dreamweaver permite guardar la configuración de los sitios como archivos de definición. Estos archivos pueden ser importados desde el propio programa para recuperar esta información, en el equipo del desarrollador o en cualquier otro. Para facilitar la importación, los documentos contenidos en el sitio definido en el archivo .ste deben estar estructurados como los del equipo de origen en el que se realiza la importación. Si la carpeta raíz del sitio no se encuentra ubicada en el mismo directorio en el que se encontraba cuando se creó el archivo de definición del sitio, la importación no es directa. En esos casos, se deberá indicar la carpeta raíz, la carpeta predeterminada de imágenes (en caso de querer utilizar este recurso de la aplicación) y establecer la página principal del sitio.
1 En la lección anterior exportamos la configuración del sitio elemental. Esta información quedó almacenada en forma de archivo para la definición de sitio con extensión .ste. Posteriormente cambiamos de ubicación la carpeta elemental que contenía la estructura del sitio propiamente dicha. En esta lección, importaremos la configuración guardada y veremos el modo de utilizarla en un equipo diferente al original. El cuadro de diálogo Administrar sitios presenta un botón que activa la importación de sitios. En el panel Archivos, haga clic en el enlace Administrar sitios y, en este cuadro, pulse el botón Importar. (1)
2 El cuadro de diálogo Importar sitio permite localizar el documento resultante de la exportación del sitio. En la práctica anterior, situamos en el Escritorio el documento elemental.ste y, por tanto, es el único seleccionable en este cuadro. Haga clic en el icono de dicho archivo y pulse el botón Abrir. (2)
El cuadro Administrar sitios no muestra ahora ningún sitio web, puesto que en la lección anterior eliminamos el existente.
3 Trasladamos la carpeta elemental tras exportar el sitio. El documento .ste conserva la información relativa a la situación de la carpeta raíz anterior. Surge por tanto el primer problema. El programa no puede localizar la mencionada carpeta en el directorio que ocupaba en el momento de ser exportado el sitio y muestra el cuadro de diálogo que permite seleccionar la carpeta que va a ser utilizada como raíz. En el cuadro de diálogo Elegir la carpeta raíz local para el sitio elemental, abra la carpeta sitios con un doble clic sobre su icono.
4 A continuación, haga doble clic sobre la carpeta elemental para acceder a su contenido.
5 En una lección anterior, asociamos una nota de diseño a la página index.html, que el programa ubicó en una carpeta específica denominada _notes. (3) En el panel Archivos no se muestra esta carpeta dentro de la estructura jerárquica del sitio, puesto que su contenido no es utilizado para la visualización de las páginas en el navegador. Sólo se trata de notas de interés para los desarrolladores. Conoceremos el modo de eliminar las Design Notes en la parte final de este ejemplo. Ahora, siguiendo con la importación del sitio, pulse el botón Seleccionar para que la carpeta elemental pase a ser la raíz del sitio importado y haga clic también en Seleccionar para indicar que la carpeta de imágenes será la misma.
La información relativa a la estructura del sitio se almacena en una memoria, denominada caché, que facilita la rápida gestión de los documentos que pertenecen a un sitio local.
6 El programa carga la configuración del nuevo sitio y éste queda seleccionado en el cuadro de diálogo Administrar sitios. Pulse el botón Listo. (4)
7 El cambio de directorio de la carpeta raíz también implica que el programa deba generar de nuevo la información relativa a la estructura del sitio para mostrarla correctamente en el panel Archivos. (5) Esta información se guarda en una memoria, denominada caché, que facilita la rápida gestión de los documentos pertenecientes a los sitios desde el mencionado panel. Expanda la carpeta raíz del sitio pulsando el signo + que precede su nombre. (6)
Al importar un sitio con todas sus carpetas, éstas muestran el identificativo color verde en el panel Archivos.
8 Automáticamente muestra todo su contenido con la tonalidad verde identificativa de la pertenencia a un sitio. Lo que guarda la importación es la configuración del sitio, los datos que establecimos para su creación, no los archivos contenidos en el sitio. Para acceder a estos datos, pulse el botón de flecha del cuadro Mostrar del panel Archivos y seleccione la opción Administrar sitios.
9 Con el sitio elemental seleccionado, pulse el botón Editar.
10 Lo que haremos a continuación será desactivar la aparición de la nota de diseño creada en una lección anterior. Para ello, en el cuadro de diálogo Configuración del sitio para elemental, muestre la categoría Configuración avanzada y seleccione el apartado Design Notes. (7)
11 Pulse el botón Limpiar Design Notes.
12 La pulsación de este botón activa la supresión de las notas contenidas en el sitio y elimina la carpeta _notes del sitio y todo su contenido. Haga clic en el botón Sí para proceder con la eliminación de las notas de diseño del sitio. (8)
Recuerde que una nota activa se muestra al abrir el documento al que se encuentra asociada.
13 No realizaremos más cambios en la configuración del sitio, por lo que haga clic en Guardar y, en el cuadro de diálogo Administrar sitios, pulse el botón Listo.
14 Ya por último, eliminaremos el archivo de configuración del sitio exportado, que ya no se ajusta a la actualmente establecida. Pulse el botón de flecha del cuadro Mostrar del panel Archivos y seleccione la opción Escritorio.
15 Recuerde exportar la configuración de su sitio cada vez que realice cambios en ella. De este modo se evitará definir nuevamente los sitios ante una pérdida accidental de esta información. Haga clic en el icono del documento elemental.ste y pulse la tecla Suprimir. (9)
16 Además la configuración de un sitio puede ser duplicada para una posterior edición de la copia. De este tema tratará la siguiente lección. Para finalizar el presente ejemplo práctico, pulse el botón Sí para eliminar definitivamente el documento. (10)
Lección 17. Duplicar y editar un sitio local
Dreamweaver permite el duplicado directo de sitios, entre las opciones del cuadro de diálogo Administrar sitios. No debe confundirse el duplicado de un sitio con el de los documentos que lo componen. Duplicando un sitio desde el mencionado cuadro de diálogo conseguimos una copia de la configuración del sitio original. Posteriormente podemos editar esta copia, es decir, alterar sus parámetros de configuración. De nuevo el cuadro de diálogo Administrar sitio posibilita esta opción. El duplicado de sitios puede presentar varias funciones. Se puede cambiar la configuración de un sitio duplicado, de manera que se conserve una copia de la configuración original por si surgen problemas. También se puede adaptar el duplicado para configurar un sitio similar al original. Para ello se deberá seleccionar la carpeta raíz del nuevo sitio y variar los datos de configuración necesarios.
RECUERDE
El panel Archivos posibilita el duplicado directo de los archivos de un sitio, mediante la técnica de arrastre. Para que la operación se complete correctamente, la carpeta de destino del duplicado debe pertenecer a su vez a un sitio.
1 En esta lección comprobaremos la diferencia entre la duplicación de la configuración de un sitio y la de su contenido. Para duplicar la configuración de un sitio se debe acceder al cuadro de diálogo Administrar sitios. Pulse en el enlace Administrar sitios del panel Archivos. (1)
2 Se abre de este modo el cuadro de diálogo Administrar sitios. Seleccione en este cuadro el sitio elemental y pulse el botón Duplicar. (2)
En el cuadro de diálogo Administrar sitios, cuando no se encuentra seleccionado ningún sitio, sólo se muestran activos los botones Nuevo e Importar.
3 Automáticamente el duplicado, al que el programa atribuye el nombre elemental copia, queda seleccionado en el cuadro central. Pulse el botón Editar. (3)
4 Se abre el cuadro de diálogo Configuración del sitio para elemental copia, en el cual, en primer lugar, atribuiremos al duplicado un nombre identificativo. En el campo Nombre del sitio, escriba la palabra estilos y pulse el icono de la carpeta situado a la derecha del cuadro de texto Carpeta del sitio local. (4)
5 Asociaremos la configuración a una carpeta raíz local diferente a la actual, para evitar conflictos en la posterior gestión de los dos sitios que podamos realizar con el programa. Situaremos la carpeta raíz del nuevo sitio en el mismo nivel que la del sitio elemental. En el cuadro de diálogo Elegir la carpeta raíz, haga clic en el botón Subir un nivel y, en la carpeta sitios, pulse el botón Crear nueva carpeta. (5)
6 Para una correcta identificación le daremos el mismo nombre que antes hemos atribuido al sitio creado como duplicado. Escriba la palabra estilos y pulse dos veces la tecla Retorno, la primera para confirmar el nombre de la carpeta (6) y la segunda para abrirla.
Otra forma de crear una carpeta nueva en el directorio actual es mediante el menú contextual que aparece al pulsar con el botón derecho del ratón en el centro del cuadro de diálogo, en una zona libre.
7 Una vez situados en la carpeta que deseamos utilizar como raíz del sitio, la carpeta estilos, pulse el botón Seleccionar.
8 Por último eliminaremos la referencia a la carpeta predeterminada de imágenes, ya que nos interesa conocer el modo de actuación del programa cuando carece de este parámetro de configuración. Muestre el contenido de la categoría Configuración avanzada y haga clic sobre la sección Información local.
9 Seguidamente, haga doble clic en el campo Carpeta predeterminada de imágenes para seleccionar todo su contenido, pulse la tecla Suprimir (7) y, para confirmar el cambio, haga clic en el botón Guardar.
10 El nuevo sitio que hemos denominado estilos aparece ya en el cuadro de administración de sitios. En este cuadro, haga clic en el botón Listo. (8)
La opción Activar caché, marcada por defecto, indica la creación de un caché local para mejorar la velocidad de las tareas de administración del sitio.
11 Dreamweaver carga el sitio en el panel Archivos, mostrando un signo + a la izquierda de su nombre. (9) Haga clic en dicho signo para acceder al contenido del sitio. (10)
12 Pero en este caso el signo + no indica la presencia de contenido en el interior de la carpeta, ya que ésta fue creada sin él. Despliegue el cuadro Mostrar y seleccione la opción Escritorio.
13 Vimos en la lección dedicada a la exportación de sitios el modo de trasladar archivos mediante el corte y el posterior pegado. Como deseamos conservar los documentos originales, éstos deberán ser copiados en lugar de cortados. Duplicaremos todos los archivos del sitio elemental en el interior de la carpeta estilos, conservando su estructura. Pulse en el icono de la carpeta documentos para seleccionarla, pulse la tecla Mayúsculas y, sin soltarla, haga clic en el icono de la página index.htm. (11)
14 A continuación, despliegue el menú de opciones del panel Archivos, haga clic sobre el comando Edición y, en el submenú que contiene, elija la opción Copiar. (12)
Para seleccionar elementos no consecutivos en el panel Archivos, es preciso pulsar sobre cada archivo mientras se mantiene pulsada la tecla Control.
15 Seguidamente, haga clic con el botón derecho del ratón sobre el icono del sitio estilos, pulse sobre el comando Edición y elija en este caso la opción Pegar.
16 Automáticamente el programa duplica los archivos originales. Despliegue el cuadro Mostrar y seleccione el sitio estilos.
17 De este modo la estructura del sitio estilos es idéntica a la del duplicado anteriormente, elemental. El sitio estilos no tiene preestablecida carpeta alguna como predeterminada para contener los documentos de imagen. En las lecciones dedicadas al uso de estilos veremos cómo crearla sin necesidad de acceder al cuadro de diálogo Configuración del sitio para. Por esta razón, eliminaremos la carpeta de imágenes existente. Seleccione la carpeta images con un clic sobre su icono, pulse la tecla Suprimir y haga clic en el botón Sí del cuadro de confirmación.
18 De momento, antes de concluir este ejemplo práctico, compruebe que todos los documentos han sido duplicados correctamente. Haga clic en el signo + que precede al icono de la carpeta documentos.
19 En las siguientes lecciones empezaremos a insertar contenido en las páginas del sitio elemental, prescindiendo por el momento del uso de estilos CSS. Pulse el botón de flecha del cuadro Mostrar y seleccione el sitio elemental y dé así por terminada esta lección.
RECUERDE
En el cuadro de confirmación que aparece al pulsar la tecla Suprimir el programa informa acerca de los vínculos incluidos en la carpeta que está a punto de eliminar y da la posibilidad de actualizar dichos vínculos en el nuevo sitio.
El texto en Dreamweaver
Introducción
Aunque Dreamweaver no es, lógicamente, un programa dedicado al procesamiento de textos, la aplicación permite la inserción y la edición de escritos en sus páginas web. Sin ninguna duda, el texto es una parte fundamental de un sitio web, sea cual sea el contenido que presente, y por tanto es fundamental el conocimiento acerca de cómo insertarlo y editarlo.
La versión CS5 de Dreamweaver no presenta novedad alguna respecto al texto. En las lecciones que conforman este apartado, el lector aprenderá a insertar texto en las páginas, tanto directamente desde el teclado como procedente de otros documentos. En este caso, aprenderá que con los comandos típicos de selección, copia y pegado es posible traspasar información de un documento a otro. Una vez insertado el texto, es muy importante saber cómo editarlo para modificarlo en cuanto a formato se refiere. Así, en una serie de lecciones, se muestra cómo cambio la fuente, el tamaño del tipo de letra y el color de la misma, aprovechando para conocer las distintas paletas de colores de que dispone la aplicación.
La modificación de algunos aspectos relacionados con el formato de texto, como las combinaciones de fuente, requieren en esta versión del programa la creación de nuevas reglas de estilos CSS.
Dreamweaver presenta un formato de texto predeterminado que utiliza en todas las páginas web creadas. Sin embargo, el usuario puede modificar este formato en cuanto a fuente, tamaño y color según sus preferencias.
La gestión de párrafos también se trata en estas lecciones; es interesante comprobar cómo se reflejan los distintos párrafos en el selector de etiquetas de la Barra de estado de la aplicación, así como los distintos estilos de texto.
Según el contenido de las páginas web creadas en Dreamweaver, el uso de listas numeradas o no numeradas puede resultar una gran solución.
Dreamweaver cuenta con distintas paletas de colores, recomendables según el destino del sitio web que se esté creando.
Entre el texto que se puede insertar una página web se encuentran los caracteres especiales y las listas, ambos elementos tratados por separado en sus correspondientes lecciones. Las listas pueden ser ordenadas o no ordenadas, y su estado puede ser modificadas una vez creadas.
En las últimas lecciones de este apartado, el lector aprenderá a crear regiones editables con archivos de InContext Editing, a revisar ortográficamente los documentos y a utilizar la función de búsqueda y reemplazo de Dreamweaver.
Lección 18. Insertar texto
El texto es el principal componente de una página Web y, además de ser un perfecto transmisor de información, presenta la ventaja de su escaso tamaño en bytes, por lo que su inclusión en las páginas no repercute prácticamente en el tiempo de descarga. Dreamweaver funciona de manera similar a muchas aplicaciones de tratamiento de textos. Los textos de una página quedan divididos en párrafos mediante los saltos de carro. La pulsación de la tecla Retorno implica la creación de un nuevo párrafo. Los navegadores Web insertan automáticamente una línea en blanco de espacio entre los párrafos. El programa permite añadir una única línea de espacio entre los párrafos mediante la inserción de un salto de línea. El menú Insertar y la barra de herramientas del mismo nombre dan acceso a la inserción de este tipo de carácter especial. Para introducir un salto de línea mediante el teclado debe ser utilizada la combinación Mayúsculas + Retorno.
RECUERDE
Lógicamente, debido a que no es un procesador de textos, Dreamweaver presenta ciertas limitaciones relacionadas con la inserción de texto, por ejemplo, la imposibilidad de insertar dos espacios en blanco seguidos.
1 En esta primera lección dedicada a la inclusión de contenidos en la página conoceremos el modo de insertar texto. Para realizar las prácticas de texto utilizaremos las páginas del sitio elemental, creado en lecciones anteriores. Empezaremos editando su página principal. Desde el panel Archivos, haga doble clic en el icono del archivo index.html.
2 Como recordará, esta página principal cuenta con una imagen de rastreo que insertamos en una lección anterior. Antes de continuar, y para poder trabajar en este caso con total comodidad, ocultaremos esta imagen. Para ello, despliegue el menú Ver, haga clic en el comando Imagen de rastreo y pulse sobre la opción Mostrar. (1)
Si prefiere eliminar por completo la imagen de rastreo, recuerde que debe acceder al cuadro de diálogo Propiedades de la página, acceder a la categoría Imagen de rastreo y suprimir la ruta de archivo referente a la imagen en cuestión.
3 La imagen ya no aparece en la página, aunque continúa presente en el sitio. (2) Dreamweaver se comporta de manera similar a la mayoría de los editores de texto del mercado. Así, en los documentos carentes de contenido el cursor de edición queda situado en la primera línea de la página. Para introducir un texto basta con teclearlo. Al inicio de la página, escriba la palabra velero y pulse la barra espaciadora de su teclado.
4 El programa presenta una serie de limitaciones en la edición de texto. Por ejemplo, en principio resulta imposible insertar más de un espacio entre palabras. Pulse nuevamente la barra espaciadora del teclado para comprobarlo, complete la frase escribiendo el término de ocasión y pulse la tecla Retorno.
5 Al igual que la mayoría de procesadores de texto, Dreamweaver se encarga de pasar a la siguiente línea cuando el texto alcanza el margen derecho de la página. Para insertar un salto de carro hemos optado por pulsar la tecla Retorno. La pulsación de esta tecla comporta la creación de un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento: p. Teclee la frase de ejemplo Entre para ver más. (3)
La combinación de teclas Mayús + Intro inserta automáticamente un salto de línea en el punto en que se encuentra el cursor de edición.
6 Entre el párrafo inicial y el nuevo queda una línea en blanco, ya que los navegadores Web la insertan automáticamente para espaciar los diferentes bloques de texto de una página. Pero el programa permite la inserción de los llamados saltos de línea. Uno de los menús de la aplicación posibilita la introducción de todos los elementos que puede contener una página. Despliegue el menú Insertar, pulse en el comando HTML y, en su submenú, seleccione la opción Caracteres especiales. (4)
7 El programa posibilita de esta forma la introducción de elementos de texto cuya inserción mediante el teclado no es intuitiva, o no resulta posible. Seleccione el comando Salto de línea.
8 La nueva línea forma parte del mismo párrafo que la anterior. Dreamweaver permite definir el comportamiento de los saltos de línea en el cuadro de diálogo Preferencias. De momento, seguiremos insertando texto en la página. En la nueva línea, escriba la frase de ejemplo ver fotos. (5)
9 La barra de herramientas Insertar, ubicada debajo de la Barra de menús, permite la inserción de todo tipo de elementos. Organizada por categorías, esta barra de herramientas presenta una ficha dedicada en exclusiva a los elementos de texto, la cual, al estar escribiendo en la página, se muestra activa. Haga clic en la pestaña Texto. (6)
10 Las opciones que presenta la pestaña Texto permiten la inserción directa de etiquetas HTML relacionadas con el texto. El último de los comandos muestra una punta de flecha a la derecha de su icono. Haga clic en esta punta de flecha para consultar su contenido.
11 El programa agrupa en un solo comando de la barra todos los caracteres especiales. El seleccionado por defecto es el que aparece en la primera posición de la lista desplegada, Salto de línea. La pulsación del botón, en lugar de la punta de flecha, hubiera insertado un salto de línea en el documento de forma directa. Tras la pulsación en la punta de flecha, para insertar uno de los elementos listados basta con pulsar sobre él. Seleccione el comando Salto de línea. (7)
12 En la siguiente lección conoceremos el modo de insertar texto procedente de otros documentos. Dejaremos en este punto, por tanto, la presente, no sin antes almacenar las modificaciones efectuadas. Recuerde que si quiere conservar el documento en su estado original puede utilizar el comando Guardar como para crear una copia. Pulse el comando Guardar de la barra de herramientas Estándar. (8)
Resulta conveniente almacenar frecuentemente los cambios para evitar pérdidas accidentales.
RECUERDE
Por defecto, la barra de herramientas Insertar se presenta en el espacio de trabajo a modo de panel, en la parte derecha del área de trabajo; en las primeras lecciones de este curso desplazamos este panel hasta situarlo a modo de barra de herramientas.
Lección 19. Seleccionar, copiar y pegar texto
La copia y pegado de texto resulta una alternativa a su introducción directa mediante el teclado. Entre los tipos de documentos que los profesionales de la Web reciben con contenido de texto para incorporarlos en las páginas Web, se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos de MS Office. Dreamweaver posibilita la extracción de texto de cualquiera de estos tipos de archivos y su posterior incorporación a una página Web. El programa no mantiene el formato de texto aplicado en el resto de aplicaciones, pero conserva los saltos de línea. El texto debe ser seleccionado para poder proceder a su copia. Una vez seleccionado, el texto puede ser copiado mediante la combinación de teclas Control + C, el menú contextual de la selección o el menú de edición del programa. El método abreviado de teclado correspondiente al pegado es Control +V y tanto éste como el de copia son comunes en todas las aplicaciones que trabajan bajo el entorno de Windows. Copiando y pegando texto ahorramos tiempo en la edición de los documentos.
1 Si en la práctica anterior insertamos mediante el teclado una serie de textos en la página principal del sitio elemental, index.html, en esta lección conoceremos el modo de incluir textos mediante la selección, copia y pegado de los mismos. Para ello, vamos a utilizar un par de documentos de texto, presentación.docx y descripción.docx, creados con Microsoft Word, el procesador de textos de Office, que puede descargar desde nuestra página web y guardar en la carpeta de documentos de su equipo. Cuando disponga de ellos, empezaremos abriendo el primero en su aplicación original. Para ello, despliegue el menú de Inicio y haga clic en el elemento Documentos. (1)
Existen múltiples métodos de selección de texto mediante el ratón, el teclado o la combinación de ambos.
2 De esta forma accedemos directamente a la carpeta de documentos del equipo. Haga doble clic en el icono del documento de texto presentación.docx.
3 Se abre el programa Microsoft Word, con el que ha sido creado el documento en cuestión. Antes de continuar, debemos advertirle que, como comprobará enseguida, el texto presenta graves errores ortográficos; no se preocupe ni los corrija, puesto que estos nos servirán más adelante para practicar con la revisión de textos en Dreamweaver. Dicho esto, pulse la combinación de teclas Ctrl + E para seleccionar todo el texto del documento. (2)
4 El comando Copiar viene identificado en todos los programas por el icono de la doble hoja. Sin embargo, y dado que no tiene por qué conocer los elementos de la interfaz de Word, utilizaremos una nueva combinación de teclas para copiar el contenido seleccionado. Pulse para ello la combinación Ctrl + C.
5 Una vez copiado el texto, haga clic en el botón de aspa de la Barra de título del programa para salir de él.
6 Mantendremos abierta la carpeta de documentos, puesto que utilizaremos otro de sus documentos más tarde. Sitúe el puntero en la parte inferior de la pantalla y, en la Barra de tareas, pulse en el botón correspondiente a Dreamweaver para restaurar esta aplicación.
7 Nos interesa que el texto copiado quede pegado en la parte inicial de la página. Para ello deberemos situar el cursor de edición ante la primera letra incluida. Pulse delante de la letra inicial de la primera línea, despliegue el menú Edición y seleccione el comando Pegar. (3)
La combinación de teclas para pegar un elemento previamente copiado o cortado es Ctrl + V.
8 El pegado se efectúa a partir del punto en el que se encontraba el cursor de edición. (4) Este texto es la presentación de una empresa ficticia de compra-venta de embarcaciones. Para empezar copiaremos el nombre de la empresa. Haga clic delante de la palabra MAR, al inicio del texto, pulse la tecla Mayúsculas y, sin soltarla, haga clic detrás de la palabra tierra. (5)
9 Y para copiar un elemento seleccionado, independientemente de su formato, podemos utilizar la combinación de teclas correspondiente, la barra de herramientas Estándar, el menú Edición del programa o el menú contextual de la selección. En este caso, pulse sobre el comando Copiar de la barra de herramientas Estándar, octavo icono de dicha barra. (6)
El método más sencillo para seleccionar una única palabra consiste en hacer doble clic sobre ella.
La combinación de teclas para copiar un elemento es Ctrl + C.
10 Para deseleccionar una palabra basta con pulsar en otro punto de la página, en el cual quedará situado el cursor de edición. Pulse al inicio de la línea y haga clic sobre el comando Pegar de la barra de herramientas Estándar, el noveno icono de dicha barra.
11 La palabra pegada queda incluida como parte del párrafo. Para que la nueva palabra constituya un párrafo independiente, pulse la tecla Retorno.
12 Para seleccionar un fragmento de un párrafo pueden ser utilizados diversos métodos. Quizás el más intuitivo resulta pulsar ante la primera letra que quiera ser seleccionada y utilizar la técnica de arrastre, soltando el botón del ratón al situar el puntero sobre la última. La combinación de teclado y ratón también facilita esta operación. Así en prácticas anteriores vimos cómo seleccionar fragmentos de texto con la ayuda de la tecla Mayúsculas. Si lo que se pretende es seleccionar una línea completa basta con pulsar a su izquierda, en el margen de la página. Haga clic en el margen izquierdo de la página, a la altura de la primera línea del segundo párrafo.
13 Si se desea seleccionar un párrafo completo se puede utilizar la etiqueta correspondiente de la Barra de estado. En este caso, haga clic en la etiqueta párrafo, p. (7)
Al situar el puntero del ratón al inicio de una línea, la forma de dicho puntero cambia para mostrar una flecha.
Para seleccionar un párrafo entero, también es posible hacer un triple clic en el margen de dicho párrafo.
A diferencia de otros programas, en Dreamweaver el método abreviado de teclado correspondiente es Ctrl + A.
14 Y si lo que se quiere es seleccionar la totalidad del contenido de la página, puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo. En este caso, despliegue el menú Edición y pulse sobre dicho comando. (8)
15 Haga clic al final de la página, fuera de la selección, para situar el cursor de edición en este punto.
16 En la segunda parte de esta práctica utilizaremos el documento texto.html del sitio elemental. No cerraremos el archivo actual, index.html, sino que nos limitaremos a almacenar las modificaciones efectuadas. Pulse sobre el comando Guardar de la barra de herramientas Estándar. (9)
17 Abriremos el documento desde el panel Archivos. Muestre dicho panel, expanda la carpeta documentos pulsando en el signo + que precede su nombre y haga doble clic en el icono del documento texto.html. (10)
RECUERDE
La tecla Control permite variar la función de las teclas Inicio y Fin. Así la combinación de Control con la primera sitúa el cursor al inicio de la pá-gina, no de la línea. Si se pulsan simultáneamente las teclas Control y Fin el cursor de edición queda posicionado al final de la página.
18 En esta página insertaremos el contenido del documento de texto descripción.docx. Desplace el puntero a la parte inferior de la pantalla y, en la Barra de tareas, pulse en el botón correspondiente a la carpeta Documentos, que permanece abierta.
19 Haga doble clic en el icono del documento de texto descripción.docx para abrir la aplicación asociada al mismo.
20 El texto presenta un formato diferente al anteriormente copiado, concretamente un tipo de letra diferente. Copiaremos todo el texto para comprobar si Dreamweaver mantiene el formato original del texto. Para ello, en primer lugar deberemos seleccionarlo. Pulse la combinación de teclas Ctrl + E y, a continuación, pulse la combinación Ctrl + C para copiar este contenido.
21 Para seguir adelante, cierre la aplicación pulsando el botón de aspa de su Barra de título.
22 Como no necesitaremos utilizar más documentos para realizar las prácticas del curso relativas al texto en Dreamweaver, cierre la ventana de documentos haciendo clic en el botón de aspa de su Barra de título.
23 Finalmente pegaremos el texto copiado. Despliegue de nuevo el menú Edición y haga clic sobre el comando Pegar. (11)
24 Dreamweaver no respeta el formato original del texto. El texto pegado presenta en la página el mismo tipo de letra que el tecleado en el documento index.html y el pegado posteriormente en él, procedente del archivo presentación.docx. El programa tiene predeterminado un formato y lo aplica para presentar los textos que carecen de él. En las próximas lecciones conoceremos el modo de dar formato a los textos en Dreamweaver. Para finalizar este ejercicio, guarde los cambios realizados pulsando sobre el comando Guardar. (12)
Lección 20. Modificar el formato de un párrafo
Una vez introducido el texto en las páginas, Dreamweaver posibilita la edición de su formato. En principio los diferentes bloques de texto de una página presentan el formato llamado Párrafo, y la etiqueta correspondiente en el selector de la Barra de estado permite su selección directa. El formato Párrafo presenta las características normales del texto visualizado en Dreamweaver, el tamaño y estilo de fuente predeterminados. Estas características no siempre se corresponden exactamente con las del texto posteriormente visualizado en el navegador. El programa, además de la opción que permite la selección de un formato predeterminado, que aplica la fuente y el tamaño de la misma establecidos como Fuente fija entre las preferencias del programa, también posibilita la definición de formatos relativos para los diferentes bloques de texto de una página: los encabezados. Un encabezado define una serie de parámetros, tamaño de letra y estilo, de un bloque de texto completo.
RECUERDE
Dreamweaver permite definir siete tipos de encabezados, siendo el primero de ellos, Encabezado 1, el que aplica un tamaño de letra mayor a los textos. A cada encabezado le corresponde una etiqueta HTML, que se identifica con la letra h seguida del número de encabezado correspondiente. Cuando se aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto como un párrafo sencillo.
1 En esta lección le mostraremos cómo cambiar el formato de un párrafo incluido en una página de Dreamweaver. Para empezar, aprenderá que también es posible copiar y pegar el texto de una página en otra del mismo sitio web. Empecemos. En el documento texto.html, pulse en el margen izquierdo de la página a la altura de la primera línea. (1)
2 Copiaremos el texto seleccionado para posteriormente pegarlo en la parte final de la página principal del sitio elemental, de modo que, mientras que en la página original el texto queda como un párrafo independiente, en el documento index.html quede integrado como una simple línea de un párrafo. Pulse sobre el comando Copiar de la barra de herramientas Estándar para copiar el texto seleccionado (2) y ponga en primer plano la página index.html pulsando en su pestaña.
Recuerde que si lo prefiere también puede utilizar la técnica de arrastre o la combinación del teclado y el ratón para seleccionar una línea de texto.
3 El cursor de edición se encuentra situado al final de la página index.html, en una línea vacía que fue creada con un salto de línea. Pulse ahora sobre el comando Pegar de la barra de herramientas Estándar. (3)
4 El texto pegado pasa a conformar la segunda línea del quinto párrafo de la página, todos ellos separados por un salto de carro y la consiguiente línea libre. A continuación, seleccione la primera línea de esta página, MAR y tierra. (4)
5 De este modo el texto seleccionado constituye en sí mismo un párrafo independiente. El programa permite aplicar opciones de formato a los diferentes párrafos de una página. El menú Formato contiene, agrupados, todos los comandos relativos al formato de los textos. Despliegue este menú y haga clic sobre el comando Formato de párrafo.
6 Las diferentes opciones de formato de párrafos vienen recogidas en el submenú desplegado. Por defecto los textos tienen asignado un formato llamado precisamente Párrafo. A la izquierda de este comando del submenú se muestra el signo que lo verifica. Seleccione la opción Texto preformateado. (5)
Al seleccionar la opción Texto preformateado aplicamos al texto la etiqueta pre y, por consiguiente, el tipo y tamaño de letra configurado en Dreamweaver como Fuente fija. Veremos la diferencia entre la fuente proporcional y la fuente fija en las próximas lecciones.
7 Los formatos de párrafo definen diversas características del texto, entre ellas el estilo y el tamaño de la fuente. (6) Pero todos estos parámetros son relativos, ya que el texto visualizado en Dreamweaver no siempre se corresponde con el que muestra el navegador. Existen muchos factores que alteran la visualización de las páginas. La pestaña Texto de la barra de herramientas Insertar permite aplicar a un párrafo el formato de encabezado, aunque con ciertas limitaciones. Mientras que el submenú Formato de párrafo presenta siete opciones diferenciadas de encabezado, la mencionada barra de herramientas únicamente muestra tres. Haga clic en el botón h1 de la barra de herramientas Insertar. (7)
8 El texto seleccionado queda definido como un encabezado de Estilo 1 y, por tanto, aparece en la Barra de estado la etiqueta correspondiente, h1. (8) Este tipo de encabezado define al tiempo el aumento de tamaño y la aplicación del estilo negrita al texto. Para observar mejor el resultado de la aplicación de la etiqueta encabezado, pulse al final de la palabra seleccionada. (9)
Los encabezados quedan identificados en la Barra de estado por la letra (h) a la que sigue el número de encabezado correspondiente.
Al eliminar la selección del texto, la etiqueta correspondiente deja de estar activa, aunque continúa reflejándose en la Barra de estado.
9 Cabría suponer que la introducción de un salto de carro implicaría la creación de un nuevo párrafo con el mismo formato de encabezado; sin embargo, por defecto el programa crea los nuevos párrafos sin aplicar el formato anterior. Para comprobarlo, pulse la tecla Retorno.
10 Efectivamente, vea el cambio de etiqueta en la Barra de estado Veamos cómo cambiar esta característica del programa. Despliegue el menú Edición y pulse sobre el comando Preferencias.
11 El apartado Opciones de edición de la categoría General del cuadro de preferencias permite definir si los nuevos párrafos deben preservar el formato de los precedentes. Por defecto se encuentra activada la opción Cambiar a párrafo sencillo tras el encabezado. Esto es debido a que en la mayoría de las ocasiones interesa trabajar con párrafos sencillos, carentes de formato inicial. Haga clic en Aceptar sin realizar ningún cambio. (10)
Recuerde que puede acceder al cuadro de preferencias del programa pulsando la combinación de teclas Ctrl + U.
12 Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página, pero antes, pulse la tecla Suprimir para eliminar un salto de carro y, por tanto, una de las líneas carentes de contenido.
13 Combinaremos ratón y teclado para seleccionar los dos siguientes párrafos conjuntamente. Con el cursor de edición situado delante de la primera palabra del segundo párrafo, haga clic tras la última letra de la palabra ocasión, en el tercer párrafo de la página, mientras mantiene pulsada la tecla Mayúsculas. (11)
14 Para definir los párrafos seleccionados como encabezados, pulse esta vez el comando h2 de la barra de herramientas Insertar. (12)
15 El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo. Ahora comprobaremos que para aplicar un tipo de encabezado a un párrafo no es necesario que éste se encuentre totalmente seleccionado. Para ello, seleccione el término MAR y tierra que encabeza la selección actual (13) y haga clic en el comando h3 de la barra de herramientas Insertar.
16 Los formatos de párrafo se aplican a la totalidad del bloque de texto. (14) Así la etiqueta h3 del selector de la Barra de estado que ha aparecido nos permite seleccionar de modo directo el párrafo que presenta este formato de encabezado. Para comprobarlo, pulse en dicha etiqueta.
17 Por último el Inspector de propiedades también permite la aplicación de formatos de párrafo a los textos. Despliegue el campo Formato de este panel y seleccione, en este caso, la opción Encabezado 4. (15)
18 Los encabezados de mayor numeración aplican tamaños de letra menores, además del estilo negrita común a todo este tipo de párrafos. (16) En las siguientes lecciones veremos el modo de cambiar las propiedades de fragmentos de texto. Haga clic al inicio de la página actual y, por último, pulse el comando Guardar de la barra de herramientas Estándar para almacenar los cambios realizados.
Cuando un texto se encuentra seleccionado, el Inspector de propiedades presenta una serie de cuadros que permiten definir las opciones relativas a este tipo de elementos.
La opción Ninguno del campo Formato del panel Propiedades permite desactivar todas las opciones de formato aplicadas a un párrafo, devolviendo así su formato inicial.
Lección 21. Cambiar el tipo y el tamaño de la fuente
Dreamweaver presenta los textos por defecto con la fuente Times New Roman. Este tipo, habitual en todos los sistemas, viene definido como fuente proporcional en el cuadro Preferencias de la aplicación. La fuente proporcional es la utilizada para mostrar los textos a los que no les ha sido aplicado formato alguno. Pero no todos los usuarios que accedan a nuestras páginas presentarán esta misma configuración en sus sistemas, lo que puede alterar el visionado en el navegador de los documentos. El programa permite asignar tipos diferentes al predeterminado mediante la inclusión de etiquetas de fuente. Para ello debe ser seleccionada una de las combinaciones de fuente disponibles. Los navegadores utilizan la primera fuente de la combinación que se localice en el sistema del usuario. Si la primera no puede ser encontrada en el sistema, el navegador pasa a utilizar la segunda, y así sucesivamente.
RECUERDE
El desarrollador de las páginas puede crear sus propias listas de fuentes personalizadas. El cuadro de diálogo Editar lista de fuentes permite crear listas añadiendo las fuentes y familias de fuentes disponibles en el sistema.
1 En la lección anterior conocimos el modo de aplicar formatos de encabezado a los párrafos de texto en Dreamweaver. Tras las acciones realizadas anteriormente, nos encontramos con la página principal del sitio elemental, index.html, situada en primer plano y el primero de sus párrafos seleccionado. En esta lección conoceremos el sistema de fuentes utilizado por el programa. Despliegue el menú Formato y seleccione la opción Fuente.
2 El signo de verificación que muestra la opción Predeterminada del submenú indica que es la opción actualmente activa. Además, Dreamweaver presenta una serie de listas de fuentes para su elección directa. Las combinaciones de fuentes determinan cómo muestra un navegador el texto de la página Web. Un navegador utiliza la primera fuente de la combinación que se encuentre en el sistema del usuario; si no está instalada ninguna de las fuentes de la combinación, el navegador mostrará el texto de acuerdo con las preferencias que tenga definidas. En el submenú desplegado seleccione la lista de fuentes Arial, Helvetica, sans-serif. (1)
La lista que presenta el comando Fuente del menú Formato son combinaciones de fuentes que presenta el programa por defecto.
3 Los cambios de combinaciones de fuentes y de colores de fuentes deben realizarse definiendo reglas para los estilos CSS, por lo que el programa abre el cuadro Nueva regla CSS. Por el momento, y dado que todavía no hemos trabajado con los estilos CSS, cierre este cuadro pulsando el botón Cancelar. (2)
4 A continuación, despliegue el menú Edición y haga clic sobre el comando Preferencias.
5 Se abre de esta forma el cuadro de preferencias del programa. Active la categoría Fuentes.
6 La parte superior de este cuadro queda reservada a la configuración de fuentes, que permite especificar el conjunto de fuentes que se emplea en Dreamweaver para documentos que utilizan un determinado tipo de codificación. Despliegue el campo Fuente proporcional pulsando en su botón de flecha. (3)
El valor predeterminado del campo Fuente proporcional depende de las fuentes que se encuentren instaladas en el sistema.
La fuente utilizada para todo el texto que aparece en la vista Código del inspector de código se refleja en el campo Vista de Código del cuadro de preferencias.
7 La fuente proporcional es la que utiliza Dreamweaver para mostrar texto normal de las páginas, mientras que la fuente fija es la que utiliza para mostrar texto en las etiquetas pre, code y tt. Dreamweaver predetermina representar los textos bajo un aspecto seguro, por lo que se encuentra seleccionada una de las fuentes clásicas, Times New Roman, disponible en la práctica totalidad de sistemas. Teclee la letra c para mostrar las fuentes que empiezan por dicha letra, seleccione la fuente Courier New y pulse el botón Aceptar.
8 Dreamweaver aplica el tipo de letra elegido a todos los textos de las páginas del sitio actual, no sólo al seleccionado. (4) También puede cambiar las fuentes desde el cuadro Propiedades de la página. Pulse ese botón del Inspector de propiedades.
9 En el cuadro de diálogo Propiedades de la página, mostrando el contenido de la categoría Apariencia (CSS). El cambio de fuente debe realizarse en esta categoría. Despliegue el campo Fuente de página, seleccione la opción Arial, Helvética, sans-serif y pulse Aceptar. (5)
10 Ahora sí, se aplica la primera fuente de la combinación elegida, aunque en este caso sólo en el fragmento seleccionado. (6) Pulse el icono Guardar de la barra de herramientas Estándar para guardar los cambios realizados en la página index.html.
El orden que aparece en la lista de combinaciones de fuentes en el cuadro Propiedades de la página es el mismo que se refleja en el submenú Fuentes del menú Formato.
11 Precisamente para solventar los problemas derivados de la hipotética carencia de fuentes en los sistemas, Dreamweaver permite la selección de listas de fuentes en lugar de fuentes individuales. La selección de una combinación dota de alternativas la posible ausencia de fuentes en el equipo del usuario final de las páginas. Despliegue el menú Formato, despliegue el comando Fuente y, en éste, seleccione la opción Editar lista de fuentes. (7)
Al tiempo que va escribiendo el nombre de la fuente, el cuadro Fuentes disponibles se va actualizando con los tipos de letra que coinciden con el texto insertado.
12 El cuadro de diálogo Editar lista de fuentes permite definir listas de fuentes personalizadas. El cuadro superior muestra las diversas combinaciones de fuentes preexistentes, de posible selección para su aplicación. El cuadro Fuentes disponibles muestra todos los tipos de nuestro sistema. En el campo situado en la parte inferior del cuadro Fuentes disponibles, escriba el nombre Courier, seleccione la fuente Courier New de este cuadro y haga clic sobre el botón que presenta una doble punta de flecha apuntando a la izquierda. (8)
13 Compruebe como la fuente seleccionada se inserta en el cuadro Fuentes elegidas y pasa a ser la primera de la lista personalizada. A continuación, haga doble clic sobre la fuente disponible llamada Courier.
14 La nueva fuente seleccionada, Courier, queda en la segunda posición de la lista. Ésta es la que cargará el navegador si el equipo del usuario no dispone de la primera de las fuentes seleccionadas, Courier New. Podemos añadir a la lista personalizada el número de fuentes de nuestro sistema que creamos oportuno. Haga doble clic en el campo situado debajo del cuadro Fuentes disponibles, que muestra la fuente Courier para seleccionarla, escriba las letras ar y, cuando se actualice el cuadro de fuentes disponibles, haga doble clic, por este orden, en las fuentes Arial y Arial Black. (9)
15 También podemos eliminar las fuentes elegidas que no deseemos utilizar. Haga clic sobre la fuente Arial Black en el cuadro Fuentes elegidas para seleccionarla y pulse el botón que presenta dos flechas apuntando a la derecha. (10)
Compruebe como, a medida que va insertando nuevas fuentes en el cuadro Fuentes elegidas, éstas pasan a formar parte también del cuadro Lista de fuentes.
16 Por otra parte, los botones de la parte superior del cuadro de diálogo Editar lista de fuentes permiten organizar las diferentes listas, determinando el orden en el que quedarán dispuestas para su selección. El botón (+) permite la creación de una nueva lista mientras que el botón (-) elimina la combinación seleccionada. Haga clic en el botón de la parte superior del cuadro que muestra una punta de flecha apuntando hacia arriba.
17 Una vez configurada la nueva combinación, pulse el botón Aceptar.
18 La lista de fuentes personalizada pasa a estar disponible para su aplicación. Acceda al cuadro Propiedades de la página pulsando el correspondiente botón del Inspector de propiedades.
19 Despliegue el campo Fuente de página, seleccione la nueva combinación Courier, Courier New, Arial y pulse el botón Aceptar.
20 Compruebe el aspecto de la página tras estos cambios. (11) Pulse sobre el comando Guardar de la barra de herramientas Estándar para almacenar los cambios realizados en la página index.html y ponga en primer plano el documento texto.html pulsando en su pestaña.
21 Al igual que sucede con la fuente, Dreamweaver predetermina un tamaño para mostrar los textos que no han sido modificados. Este tamaño, 12 puntos, guarda relación con la fuente proporcional seleccionada en el cuadro Preferencias. Veremos ahora el modo de cambiar el tamaño de los textos en Dreamweaver sin necesidad de definir encabezados. Despliegue el menú Edición y pulse sobre el comando Preferencias.
22 En pasos anteriores establecimos la fuente Courier New como la predeterminada para mostrar los textos en Dreamweaver. Todos los textos de la página actual se muestran con este tipo. Despliegue el campo Tamaño correspondiente a la fuente proporcional y seleccione la opción correspondiente a 11 puntos, 11 pt.
23 Para comprobar que el nuevo tamaño se aplica a la totalidad de párrafos de la página, haga clic en Aceptar.
24 El cambio afecta a la totalidad de bloques de texto de la página ya que todos están definidos como párrafos y, por tanto, todo el texto presenta la fuente y el tamaño establecidos como fuente proporcional. (12) Acabe este ejercicio guardando los cambios mediante la pulsación del comando Guardar de la Barra de herramientas Estándar.
Resulta aconsejable incluir en la lista alguna de las llamadas familias genéricas de fuentes: cursiva, fantasía, monoespacio, sans-serif y serif.
La nueva combinación de fuentes personalizada también estará disponible en el submenú del comando Fuentes del menú Formato.
El programa predetermina un tamaño para el texto que carece de formato.
RECUERDE
Si ninguna de las fuentes de la lista Fuentes elegidas está disponible en el sistema del usuario, el texto aparecerá en la fuente predeterminada asociada con la familia genérica de fuentes.
Lección 22. Aplicar un estilo al texto
Dreamweaver aplica automáticamente el estilo de fuente negrita a los textos que presentan formato de encabezado. La propia etiqueta que define el encabezado contiene las instrucciones para la aplicación del estilo de fuente mencionado. Pero el programa permite además la definición de diferentes estilos de fuente para los fragmentos del texto. Así los estilos negrita y cursiva, clásicos en todos los editores de texto, pueden ser aplicados mediante las opciones de la barra de herramientas Insertar, las de la Barra de menús y las del panel Propiedades. Por defecto, así queda definido en el cuadro de diálogo Preferencias, el programa no aplica las tradicionales etiquetas de estos estilos (b e i, respectivamente) sino que utiliza otras que consiguen el mismo resultado transmitiendo un mayor número de información al navegador. Se trata de las etiquetas strong y em, correspondientes a los estilos de fuente Destacado y Énfasis.
RECUERDE
El submenú Estilo del menú Formato posibilita la selección de estilos de fuente adicionales, entre ellos el subrayado, que suele reservarse a los textos que presentan un enlace y que no aparece ni en el Inspector de propiedades ni en la ficha Texto de la barra de herramientas o el panel Insertar.
1 Vimos en las lecciones anteriores cómo el establecimiento de encabezados suponía una alteración del tamaño de los textos, al tiempo que se les modificaba el estilo de fuente. En este ejemplo práctico conoceremos el modo de aplicar estilos de fuente a los diferentes fragmentos de texto. Continuamos trabajando con la página texto.html, actualmente en primer plano en el área de trabajo del programa. Para empezar, seleccione completamente la primera línea de la página pulsando en su margen izquierdo. (1)
Recuerde que también puede seleccionar un fragmento de texto mediante la técnica de arrastre.
Los estilos de fuente ofrecidos son variados, siendo los tres primeros (Negrita, Cursiva y Subrayado) los principales.
2 Dreamweaver permite asignar la totalidad de estilos de fuente aplicables mediante las opciones de la Barra de menús. Despliegue el menú Formato, seleccione la opción Estilo y, en el submenú desplegado, pulse en la opción Subrayado. (2)
3 El texto seleccionado queda subrayado. (3) Como veremos en lecciones posteriores, habitualmente se reserva el subrayado para los textos que funcionan como enlaces. Es por ello que el Inspector de propiedades no muestra opción de subrayado cuando un texto se encuentra seleccionado. En cambio sí presenta los botones correspondientes a los otros dos estilos principales, comunes en la mayoría de los editores: Negrita y Cursiva. La pulsación del botón Negrita, identificado con la letra B, permite la aplicación directa de este estilo de fuente. Pulse el botón Negrita del panel Propiedades.
4 El botón correspondiente al estilo Cursiva queda identificado por la letra I. Haga clic en dicho botón del Inspector de propiedades.
5 Dreamweaver permite la aplicación de estos estilos de fuente básicos mediante el uso de etiquetas alternativas a las tradicionalmente utilizadas. Despliegue el menú Edición, pulse sobre el comando Preferencias y, en el cuadro de preferencias del programa, seleccione la categoría General.
6 Entre las configuraciones establecidas por defecto, queda fijada la utilización de la etiqueta strong en lugar de la tradicional del estilo de fuente negrita, b. Del mismo modo el programa utiliza por defecto etiquetas em para indicar la aplicación del estilo cursiva, tradicionalmente aplicado mediante la etiqueta i. Puede comprobarlo viendo la correspondiente opción en la sección Opciones de edición. (3) Las etiquetas strong y em proporcionan al navegador más información semántica que las anteriormente utilizadas. Pulse el botón Aceptar sin realizar modificaciones.
Recuerde que la combinación de teclas que ejecuta la apertura del cuadro de preferencias del programa es Ctrl + U.
Si desea que el programa prescinda de las etiquetas strong y em y utilice las típicas b e i, desmarque la opción Utilizar <strong> y <em> en lugar de <b> y <i>.
La etiqueta <u> del selector de etiquetas es la que indica la aplicación del estilo subrayado.
También es posible aplicar los estilos Negrita y Cursiva a través de la barra de herramientas Insertar.
7 De este modo el selector de la Barra de estado muestra las etiquetas strong y em, que indican la aplicación al texto seleccionado de los estilos negrita y cursiva, aunque la etiqueta que aparece seleccionada es sólo la última de ellas, <em>. (4) Haga doble clic en la primera palabra del segundo párrafo para seleccionarla. (5)
8 La definición de párrafos como encabezados implica la aplicación del estilo negrita a todo el bloque de texto, al tiempo que define su tamaño. Pero los estilos de fuente se aplican únicamente a los fragmentos de texto seleccionados. Pulse el botón Negrita de la barra de herramientas Insertar. (6)
9 Haga doble clic en la primera palabra del tercer párrafo, la palabra Cabinas, y, una vez seleccionada, pulse en la etiqueta <p> de la Barra de estado. (7)
El selector de la Barra de estado muestra todas las etiquetas que afectan a la selección actual y permite la selección directa de los fragmentos de texto modificados y, en todo caso, siempre facilita la selección completa de los diferentes bloques de texto.
10 La barra de herramientas Insertar presenta botones específicos para la inserción de etiquetas strong y em. De este modo se posibilita su introducción en caso de haber cambiado la configuración de las preferencias del programa, de modo que se puedan introducir las etiquetas b e i tradicionales de los estilos de fuente. Pulse el botón Énfasis, situado en la cuarta posición de la mencionada barra.
11 Automáticamente se aplica la etiqueta em al texto seleccionado, que pasa a mostrar el estilo de fuente Énfasis. (8) El resultado es idéntico al conseguido mediante la aplicación del atributo cursiva. Pulse sobre el comando Guardar de la barra de herramientas Estándar para guardar los cambios realizados y ponga en primer plano la página index.html haciendo clic en su pestaña.
12 Seleccione el término MAR y tierra que encabeza el segundo párrafo y pulse el botón Destacado de la barra de herramientas Insertar, identificado por la letra S. (9)
Los estilos de texto negrita y cursiva pueden aplicarse también mediante las combinaciones de teclas Ctrl + B y Ctrl + I, respectivamente.
13 La pulsación del botón Destacado aplica la etiqueta strong al texto seleccionado. La barra de herramientas Insertar también permite aplicar de modo directo estilos de párrafo. El botón Párrafo, quinto de los botones de la mencionada barra, permite eliminar los encabezados, recuperando el texto el aspecto predeterminado para la fuente proporcional en el cuadro de diálogo Preferencias. Pulse dicho botón.
14 La eliminación del encabezado supone la eliminación del estilo negrita en el párrafo, exceptuando el término seleccionado del mismo, al que fue aplicado este atributo de forma individual. Haga clic en la etiqueta p de la Barra de estado y pulse el botón Destacado de la barra de herramientas Insertar.
15 Los siguientes dos botones, agrupados junto al botón Párrafo en la barra de herramientas Insertar, permiten establecer otro tipo de formatos de párrafo predefinidos. Pulse el botón Comillas en versalita, situado a la derecha del botón Párrafo. (10)
16 La aplicación de esta opción comporta la aplicación de sangrías al párrafo. (11) Conoceremos el modo de sangrar textos en una lección posterior. Por su parte la pulsación del botón Texto preformateado, pre, aplica al texto el formato configurado como fuente fija en el cuadro de diálogo de propiedades. Haga doble clic sobre la primera palabra del tercer párrafo de la página, la palabra velero, y pulse en la etiqueta h2 de la Barra de estado.
17 Por último, el menú Formato presenta una serie de estilos de fuente adicionales. Despliegue dicho menú, muestre con un clic su submenú Estilo y, en éste, seleccione la opción Teclado.
18 No realizaremos más modificaciones por el momento. En la siguiente lección conoceremos el modo de cambiar el color de los textos. Guarde los cambios realizados pulsando sobre el comando Guardar de la barra de herramientas Estándar para finalizar este ejemplo práctico.
Lección 23. Aplicar color al texto
Dreamweaver predetermina la aplicación del color negro a los textos incluidos en las páginas. El programa permite cambiar esta configuración desde la categoría Apariencia HTML del cuadro de diálogo Propiedades de la página. El campo Texto de esa categoría da acceso a un selector de color, que permite elegir el tono entre las diferentes muestras propuestas en una paleta emergente, o directamente capturar el color de pantalla. Además, Dreamweaver posibilita el cambio de color del texto seleccionado, de modo que el nuevo tono prevalezca sobre el preestablecido para la página, aunque para ello se debe definir una clase para el estilo CSS. Las paletas de Dreamweaver presentan una serie de botones en su parte superior. El botón de flecha del extremo derecho da paso a un menú de opciones que permite cargar diferentes paletas de color. La pulsación del botón Color predeterminado devuelve al texto el color establecido en las propiedades de la página. El botón Colores del sistema conduce al cuadro de diálogo Color, que posibilita la personalización de los tonos a través de seis parámetros. Tres hacen referencia a los colores primarios utilizados en la mezcla y los otros tres son los correspondientes al matiz, la saturación y el brillo.
Бесплатный фрагмент закончился.
