Kitabı oku: «Aprender Dreamweaver CS6 con 100 ejercicios prácticos»
Aprender Dreamweaver CS6 con 100 ejercicios prácticos
© 2012 MEDIAactive
Primera edición, 2012
© 2012 MARCOMBO, S.A.
Gran Via de les Corts Catalanes, 594
08007 Barcelona
www.marcombo.com
En coedición con:
© 2012 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: NDENU DISSENY GRÀFIC
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».
ISBN por Marcombo: 978-84-267-1840-2
ISBN por Alfaomega:
D.L.:
Printed in Spain
| Presentación |
APRENDER DREAMWEAVER CS6 CON 100 EJERCICIOS PRÁCTICOS
100 ejercicios prácticos resueltos que conforman un recorrido por las principales funciones del programa. Si bien es imposible recoger en las páginas de este libro todas las prestaciones de Dreamweaver CS6, hemos escogido las más interesantes y utilizadas. Una vez realizados a conciencia los 100 ejercicios que componen este manual, el lector será capaz de manejar con soltura el programa y llevar a cabo todas aquellas tareas que se realizan normalmente para crear, editar y publicar una página web.
LA FORMA DE APRENDER
Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.
Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario será capaz de desenvolverse cómodamente con el programa y sacar el máximo partido de las múltiples prestaciones que ofrece Dreamweaver CS6.
LOS ARCHIVOS NECESARIOS
En el caso de que desee utilizar los archivos de ejemplo de este libro puede descargarlos desde la zona de descargas de la página de Marcombo (www.marcombo.com) y desde la página específica de este libro.
A QUIÉN VA DIRIGIDO EL MANUAL
Si se inicia usted en la práctica y el trabajo con Dreamweaver, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en el programa, le resultará también muy útil para consultar determinados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.
Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y llevarlo a cabo sobre su propio documento de Dreamweaver.
DREAMWEAVER CS6
Dreamweaver es uno de los programas más utilizados para el diseño, el desarrollo y el mantenimiento de aplicaciones y sitios web basados en estándares. Con las múltiples y avanzadas herramientas que ofrece es posible crear fácil y rápidamente sitios Web y aplicaciones con aspecto completamente profesional, por lo que es una de las aplicaciones preferidas de diseñadores gráficos y diseñadores y desarrolladores web.
Con este completísimo editor de HTML visual resulta fácil crear complejas y sofisticadas páginas web dinámicas. Las robustas propiedades para la integración y el diseño basado en CSS, hojas de estilos en cascadas, hacen de Dreamweaver una estupenda aplicación que permite crear y manipular cualquier sitio web con enorme facilidad y precisión. La alta calidad de los diseños creados con Dreamweaver queda garantizada gracias a sus potentes y mejorados controles y herramientas, que irá conociendo a lo largo de los 100 ejercicios que componen este manual.
| Cómo funcionan los libros “Aprender…” |
| Índice |
001 Acceder a Dreamweaver CS6
002 Conocer la interfaz de Dreamweaver CS6
003 Crear nuevos documentos
004 Crear nuevos diseños de cuadrícula fluida
005 Trabajar con el diseño y el código
006 Conocer los elementos de una página web
007 Guardar y editar básicamente un documento
008 Crear sitios locales
009 Administrar sitios locales
010 Aplicar un color y una imagen de fondo
011 Imágenes de rastreo y notas de diseño
012 Exportar y eliminar sitios
013 Importar sitios
014 Duplicar y editar sitios
015 Insertar texto
016 Copiar y pegar texto entre documentos
017 Modificar el formato de un texto
018 Cambiar las propiedades y el color del texto
019 Crear archivos de InContext Editing
020 Importar y utilizar fuentes Web
021 Cambiar los márgenes y la alineación
022 Agregar sangrías y crear listas
023 Crear estilos y elementos de listas
024 Insertar caracteres especiales
025 Insertar imágenes
026 Compartir imágenes entre páginas
027 Cambiar las dimensiones de una imagen
028 Alinear imágenes
029 Conocer las funciones de edición de imágenes
030 Crear mapas de imagen y otros ajustes
031 Insertar y actualizar documentos PSD
032 Agregar enlaces
033 Comprobar errores de navegación
034 Previsualizar las páginas
035 Cambiar las propiedades de los vínculos
036 Insertar tablas
037 Trabajar con filas, columnas y celdas
038 Cambiar las propiedades de tabla
039 Editar filas, columnas y celdas
040 Dividir y combinar celdas
041 Combinar Dreamweaver con Word y Excel
042 Limpiar el código HTML
043 Anidar tablas
044 Ordenar tablas
045 Exportar e importar los datos de una tabla
046 Trabajar con el modo de tablas expandidas
047 Empezar a trabajar con estilos CSS
048 Aplicar estilos CSS
049 Aplicar hojas de estilos de muestra
050 Definir estilos de etiquetas HTML
051 Trabajar con archivos relacionados
052 Editar hojas de estilos
053 Crear nuevas reglas de estilos
054 Adjuntar hojas de estilos externas
055 Generar un documento basado en CSS
056 Mostrar el código de una selección
057 Crear estilos de clase
058 Duplicar estilos de clase
059 Aplicar varias clases CSS
060 Trabajar con el nuevo panel Transiciones CSS
061 Combinar hojas de estilos
062 Definir categorías para definir reglas de estilo
063 Crear reglas de estilo de identificador
064 Insertar marcos
065 Ajustar un conjunto de marcos
066 Asignar el origen de los marcos
067 Cambiar las propiedades de los marcos
068 Insertar marcadores de posición de imagen
069 Crear imágenes de sustitución
070 Insertar películas Flash
071 Insertar vídeos Flash
072 Insertar botones de Flash
073 Vincular sonidos
074 Incrustar sonidos
075 Enlazar páginas y modificar su carga
076 Crear anclajes con nombre
077 Insertar elementos PA
078 Cambiar las propiedades de los elementos PA
079 Convertir elementos PA en tablas
080 Crear formularios
081 Insertar objetos de formularios
082 Añadir comportamientos
083 Asignar acciones de formulario
084 Crear documentos en JavaScript
085 Llamar JavaScript
086 Usar sugerencias para el código JavaScript
087 Crear plantillas y regiones editables
088 Crear documentos a partir de plantillas
089 Automatizar tareas
090 Crear un conjunto de datos de Spry
091 Insertar tablas y regiones Spry
092 Insertar widgets de spry
093 Insertar barras de menús de Spry
094 Aplicar efectos de Spry
095 Trabajar con la Vista en vivo
096 Inspeccionar estilos CSS
097 Trabajar con el panel Activos
098 Editar elementos de biblioteca
099 Configurar un sitio remoto
100 Colocar y obtener archivos
| 001 | Acceder a Dreamweaver CS6 |
AL ACCEDER A DREAMWEAVER CS6, aparece la Ventana de bienvenida, que permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando el programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales para la creación y apertura de documentos. Además, desde la Ventana de bienvenida se puede acceder a una visita guiada o a un tutorial del producto, con el fin de profundizar en los conocimientos sobre el programa.
IMPORTANTE
Active la opción No volver a mostrar esta página de inicio de la parte inferior de la pantalla de bienvenida o bien desactive la opción Mostrar pantalla de bienvenida en la categoría General del cuadro de preferencias de Dreamweaver para que dicha ventana no aparezca cada vez que acceda al programa.
1 En el Escritorio, haga clic en el botón Iniciar de la Barra de tareas y haga clic en el acceso a Dreamweaver CS6.
2 Antes de cargarse la interfaz del programa propiamente dicha, aparece la ventana Editor predeterminado, desde la cual puede indicar los tipos de archivo para los cuales Dreamweaver será el editor predeterminado. Mantenga seleccionados los tipos por defecto y pulse el botón Aceptar.
Después de abrir Dreamweaver por primera vez, dispondrá de un acceso directo al programa en el menú Inicio.
3 Se abre la aplicación mostrando en su parte central la pantalla de bienvenida.
Desde aquí puede abrir un elemento reciente, crear nuevos documentos y consultar temas de ayuda. Además, en la parte inferior dispone de vínculos a páginas que le ayudarán durante sus primeros pasos en Dreamweaver, le informarán acerca de las nuevas funciones del programa y le darán acceso a otros recursos. Pulse el enlace Abrir, el único del apartado Abrir un elemento reciente.
4 La acción nos conduce al cuadro de diálogo Abrir, que posibilita la selección y apertura de documentos previamente creados. Pulse el botón Cancelar para salir de él.
5 El segundo bloque, Crear nuevo, ofrece una lista de tipos de archivo más usuales que puede seleccionar para crear un documento rápidamente. La lista se ve encabezada por la opción HTML, formato tradicional de las páginas web. Pulse sobre ella.
6 Automáticamente se crea un documento HTML en blanco.
Haga clic sobre el botón de aspa de la pestaña de este documento, denominado por defecto Untitled-1, para salir de él.
7 El cierre del documento comporta la reaparición de la pantalla de bienvenida. Como novedad en esta versión del programa, la sección Crear nuevo contiene dos entradas más: Diseño de cuadrícula fluida,
un sistema para diseñar sitios web adaptables, y Sitio de Business Catalyst, que permite utilizar el panel integrado de Business Catalyst en Dreamweaver. Por último, en el apartado Elementos destacados de la pantalla de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS6. Pulse por ejemplo sobre el enlace Información general de CS6
y consulte su contenido en el navegador Web predeterminado.
IMPORTANTE
También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana Nuevas funciones y Comenzar a trabajar.
| 002 | Conocer la interfaz de Dreamweaver CS6 |
EL DISEÑO DE LA INTERFAZ de Dreamweaver CS6 es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo de Dreamweaver permite ver en todo momento las propiedades de los documentos y de los objetos y muestra todas las ventanas y los paneles integrados en una única ventana.
IMPORTANTE
Usando el botón de doble punta de flecha, que aparece en la cabecera de los paneles, puede contraerlos para mostrarlos en forma de iconos y ahorrar así espacio.
1 La sencilla interfaz de Dreamweaver CS6 cuenta con una barra de menús en la parte superior y la reducida Barra de la aplicación, que cuenta únicamente con un conmutador de espacios de trabajo y un campo de búsqueda. Para conocer con todo detalle el entorno de Dreamweaver, cree un documento en blanco pulsando el botón HTML de la pantalla de bienvenida.
2 Debajo de la pestaña del documento, se encuentra la Barra de herramientas Documento, que contiene los botones adecuados para cambiar las vistas de la ventana y las opciones de visualización, para obtener vistas previas y para dar nombre al documento, entre otras acciones habituales. Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la ventana,
3 Ocupando la mayor parte del espacio de la interfaz se encuentra la ventana del documento, donde se muestra el documento actual mientras lo está creando y editando. En la parte inferior de esta ventana se ubica la Barra de estado, que incluye un selector de etiquetas, botones para cambiar la visualización e información acerca del documento y por debajo el Inspector de propiedades, un útil panel que permite ver y modificar en cualquier momento las propiedades de la página, del objeto o del texto seleccionados. Pulse el botón Propiedades de la página del inspector.
También puede acceder al cuadro Propiedades de la página desde el menú Modificar o pulsando la combinación de teclas Ctrl.+J
4 Desde el cuadro Propiedades de la página es posible modificar las características de la página. Como esto lo veremos más adelante en este libro, ciérrelo pulsando Cancelar.
5 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.
6 También puede activar los paneles desde el menú Ventana. El conmutador de espacios de trabajo de la Barra de la aplicación se utiliza para cambiar el espacio de trabajo. Despliegue este campo, que muestra pro defecto el espacio Diseñador, y elija la opción Programador.
7 Vea que se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda y mostrando de forma predeterminada la vista Código. Termine este ejercicio volviendo al espacio de trabajo Diseñador.
IMPORTANTE
El espacio de trabajo denominado Pantalla doble permite organizar un diseño si dispone de un segundo monitor. Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de propiedades en el principal.
| 003 | Crear nuevos documentos |
ADEMÁS DE DOCUMENTOS HTML, Dreamweaver permite crear documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro Nuevo documento ordena en categorías los diferentes tipos de archivo que se pueden obtener. Los archivos pueden ser creados en blanco o basados en los diseños de página preestablecidos. La categoría Nuevo documento del cuadro Preferencias permite establecer un tipo de documento como predeterminado y generar automáticamente un documento nuevo basado en el tipo predeterminado definido.
IMPORTANTE
Ya sabe que puede utilizar el enlace pertinente de la pantalla de bienvenida para crear nuevos documentos en Dreamweaver.
1 Para empezar, con el documento en blanco creado en el ejercicio anterior abierto en el área de trabajo de Dreamweaver, despliegue el menú Archivo y elija la opción Nuevo.
2 La primera columna del cuadro Nuevo documento permite la creación de una página en blanco, una plantilla en blanco, un diseño de cuadrícula fluida (novedad en esta versión del programa), una página de plantilla, una página de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de página, que varían según el tipo de documento seleccionado. La segunda parte de este panel incluye los tipos de páginas dinámicas. Seleccione la categoría Plantilla en blanco.
3 Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos del listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. Pulse sobre la categoría Diseño de cuadrícula fluida.
4 Por tratarse de una nueva función en la versión CS6 del programa, nos ocuparemos de ella en exclusiva en el siguiente ejercicio, por lo que seleccione la categoría Página de muestra.
5 Los estilos CSS permiten dotar de unas características comunes a las páginas, controlando parámetros relacionados con el aspecto que deben presentar los diferentes elementos que las componen, como el fondo y las tablas. Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.
6 Aparece el nuevo documento CSS en pantalla en vista de código. Seguidamente, pulse la combinación de teclas Ctrl+N.
7 Pulse sobre la categoría Página en blanco, mantenga seleccionada la opción HTML y haga clic sobre el diseño de página de 2 columnas flotantes, barra lateral derecha para ver su aspecto.
8 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Para ello, pulse el botón Preferencias y, en el cuadro que aparece, seleccione el tipo de archivo que desee en el campo Documento predeterminado. En este caso, mantenga seleccionada la opción HTML y haga clic en Aceptar.
9 El enlace Obtener más contenido inicia Dreamweaver Exchange, que permite descargar más contenido de diseño de páginas. Pulse el botón Crear para crear un nuevo documento.
IMPORTANTE
Los tipos de archivo listados en la categoría Otro del cuadro Nuevo documento están destinados a programadores experimentados en estos lenguajes, basados en texto, con los que no es posible trabajar de forma visual mediante el programa.
| 004 | Crear nuevos diseños de cuadrícula fluida |
COMO PRINCIPAL NOVEDAD EN SU VERSIÓN CS6, Dreamweaver proporciona una nueva opción para la creación de documentos. Se trata del denominado Diseño de cuadrícula fluida, cuya ejecución puede iniciarse tanto desde el menú Archivo como desde el cuadro de diálogo Nuevo documento. En cualquier caso, el programa proporciona una plantilla para crear diseños web compatibles con diferentes plataformas y navegadores con un eficaz sistema basado en CSS3.
IMPORTANTE
¿Qué es CSS3? Se trata de la última versión de las hojas de estilo CSS (Cascading Style Sheets); estas hojas de estilo permiten definir de manera eficiente la representación de las páginas creadas con un programa como Dreamweaver. CSS3 contiene desde opciones de sombreado y redondeado hasta funciones avanzadas de movimiento y transformación.
1 Para empezar, despliegue el menú Archivo y haga clic sobre el nuevo comando Nuevo diseño de cuadrícula fluida.
2 Esta acción nos conduce al cuadro de diálogo Nuevo documento, con el que hemos trabajado en el ejercicio anterior. El cuadro se abre directamente mostrando las características del tipo de archivo elegido, Diseño de cuadrícula fluida. La principal característica de esta nueva función es la posibilidad de elegir el tipo de pantalla de destino sobre la cual se visualizará su sitio o página web: móvil, tableta o escritorio. El ajuste del diseño se basa en porcentajes y es totalmente gráfico desde la misma ventana de creación. Como ejemplo, sobre el esquema de la tableta, cambie el número predeterminado de columnas por el valor 6.
3 El campo que muestra un porcentaje en la parte inferior de este esquema indica la proporción de la pantalla que ocupará la página o sitio web. En este caso, disminuya el valor hasta un 90%.
4 Si una vez modificados estos valores por defecto desea recuperarlos, no dude en pulsar el botón Restablecer predeterminado en este mismo cuadro de diálogo. El campo Tipo de documento permite elegir entre diferentes tipos de archivo de salida, siendo el tipo predeterminado HTML 5. Despliegue este campo para comprobar las opciones que contiene y mantenga el valor por defecto.
5 En cuanto al campo Adjuntar archivo CSS, como su nombre indica, permite asignar al nuevo documento una hoja de estilos CSS determinada.
6 En este caso, se abre el cuadro de diálogo Guardar archivo de hoja de estilos como, en el cual debemos asignar un nombre y una ubicación al nuevo documento. Como no vamos a trabajar con él, pulse el botón Guardar sin realizar ningún cambio.
IMPORTANTE
Una vez creado el documento con diseño de cuadrícula fluida, compruebe como en la barra de estado se muestran distintos iconos que le permitirán cambiar entre los modos de pantalla disponibles.
| 005 | Trabajar con el diseño y el código |
DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.
IMPORTANTE
En la categoría Tamaños de ventana del cuadro de diálogo Preferencias se pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.
1 Para realizar este ejercicio, descargue desde nuestra web el archivo muestra.htm y ábralo en Dreamweaver mediante el comando Abrir del menú Archivo.
2 La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. En el espacio de trabajo Diseñador, Dreamweaver presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Haga clic en el botón Código de la barra de herramientas Documento.
3 El documento pasa a mostrarse en forma de código.
4 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo su aspecto. Pulse sobre la imagen de la página y pase a la vista Código.
5 El lenguaje HTML está basado en etiquetas. Si seleccionamos un elemento de la página en la vista Diseño, su etiqueta quedará seleccionada en la vista Código. Compruébelo pulsando el botón Dividir de la barra de herramientas Documento.
6 Este modo de visualización divide la ventana del documento en dos partes. En la izquierda se muestra el código y en la derecha se ve la representación visual del archivo. Haga doble clic sobre una de las palabras de la página en la ventana de diseño.
7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, donde se encuentra el Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en una de las etiquetas y compruebe que se selecciona el elemento definido por ésta en la vista Diseño y el correspondiente fragmento de programación en la vista Código.
8 Pulse el botón Código de la barra de herramientas Documento y haga clic en la etiqueta body de la Barra de estado.
9 La selección de esta etiqueta comporta la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento para dar por acabado el ejercicio.
IMPORTANTE
Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Los tamaños preestablecidos sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas.
| 006 | Conocer los elementos de una página web |
LA VISTA DISEÑO SÓLO MUESTRA por defecto el contenido del cuerpo de la página, pero Dreamweaver permite editar su cabecera también de forma visual. Para ello, debe mostrarse el Contenido de head. Cada una de las etiquetas de esta sección puede ser modificada a través del Inspector de propiedades. El usuario puede definir fácilmente propiedades como el título, las etiquetas meta o los estilos de color empleados. El panel de propiedades también se usa para modificar los elementos contenidos en el cuerpo de la página.
IMPORTANTE
Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.
1 Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head.
2 Aparece la representación visual de la sección head bajo la barra de herramientas Documento.
3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head. Seleccione el primero.
4 La etiqueta correspondiente, title, se selecciona.
5 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Para comprobarlo, haga clic en el segundo icono de la sección head.
6 Esta etiqueta indica al navegador cómo se debe descodificar el documento y qué fuentes se deben utilizar para mostrar el texto descodificado. Seleccione el tercer elemento de la sección head.
7 Esta sección se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Haga clic en el botón Diseño de la Barra de herramientas Documento.
8 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.
9 El panel Propiedades presenta los atributos del texto actualmente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra Pulse.
10 El texto definido como enlace aparece en el campo Vínculo. Los enlaces también pueden añadirse a imágenes. Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, videos y diversos tipos de elementos multimedia. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.
IMPORTANTE
Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Para desactivarlas puede optar por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales y activar la opción Ocultar todas las ayudas visuales.
| 007 | Guardar y editar básicamente un documento |
PUEDE GUARDAR LOS DOCUMENTOS de Dreamweaver con el nombre y ubicación predefinidos por el programa o modificarlos desde el cuadro de diálogo Guardar como. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo y las funciones habituales de copia, pegado, etc., se encuentran en el menú Edición.
IMPORTANTE
El cuadro de diálogo que aparece al ejecutar el comando Pegar permite insertar un texto descriptivo del elemento pegado; dicho texto servirá de ayuda para aquellas personas con problemas visuales.
1 En el ejercicio anterior hemos utilizado el documento HTML muestra, que ha sido modificado. Por eso aparece un asterisco en su pestaña.
2 El programa guarda los cambios efectuados, conservando la ubicación original y el nombre del documento. La opción Guardar se ve complementada por los comandos Guardar como, Guardar todo, Guardar todos los archivos relacionados y Guardar como plantilla. Abra el menú Archivo y elija la opción Guardar como.
3 La utilización de este comando está indicada para almacenar los documentos editados como copia de los originales. Su ejecución conduce al cuadro de diálogo Guardar como,
4 En el cuadro de diálogo que aparece, pulse en Sí para actualizar los vínculos, aunque no hayamos realizado ningún cambio sobre los mismos.
5 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición.
Como en cualquier otro programa que trabaje en el entorno Windows, el comando Cortar responde a la combinación de teclas Ctrl + X y el comando Pegar, a la combinación Ctrl + V.
6 La barra de herramientas Estándar se sitúa por debajo de la barra Documento.
Seleccione la imagen situada en el centro de la página.
7 Los seis primeros botones de la barra Estándar dan acceso a las funciones Nuevo, Abrir, Examinar en Bridge, Guardar, Guardar todo e Imprimir código, todas ellas incluidas en el menú Archivo. El siguiente grupo de botones se corresponde con comandos del menú Edición. Haga clic en el botón Cortar, cuyo icono muestra unas tijeras.
8 Abra el menú Edición y seleccione el comando Pegar.
9 En el cuadro de diálogo que aparece puede añadir si lo desea una descripción de la imagen. Pulse Cancelar.
IMPORTANTE
El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. Por su parte, el comando Guardar como plantilla sólo es posible si previamente se ha creado un sitio.
| 008 | Crear sitios locales |
UN SITIO WEB ES UN CONJUNTO DE ARCHIVOS enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver es una herramienta de creación y gestión de sitios Web completos, además de un editor visual de páginas. Para crear un sitio Web local tan sólo es necesario determinar el directorio del equipo que se convertirá en la carpeta raíz del sitio. En la carpeta local se almacenan los archivos con los que está trabajando en un sitio de Dreamweaver.
IMPORTANTE
Para desarrolladores experimentados, el programa posibilita la introducción directa de los datos de configuración del sitio en la ficha Avanzadas del cuadro de diálogo configuración del sitio para…
1 Para crear un nuevo sitio haga clic en el enlace Administrar sitios del panel Archivos, en la parte inferior derecha del área de trabajo,
2 Se abre de este modo el cuadro Configuración del sitio para… En primer lugar es necesario nombrar y ubicar el nuevo sitio. En el campo Nombre del sitio introduzca elemental.
3 Un sitio consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web seleccionado. La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local y puede estar tanto en el equipo local como en un servidor de red. Haga clic sobre el icono Examinar del campo carpeta de sitio local.
4 Se abre la ventana Elegir la carpeta raíz en la que debe seleccionar la ubicación del nuevo sitio. Seleccione el escritorio y cree una carpeta usando el botón crear nueva carpeta con el nombre elemental.
5 Abra la nueva carpeta y pulse el botón Seleccionar.
6 La carpeta raíz, en la que se almacenarán todos los archivos necesarios para la creación de nuestra web está seleccionada. De momento dejaremos todas las opciones de la configuración avanzada tal y como están y procederemos a la creación definitiva del nuevo sitio. Para ello, pulse el botón Guardar y, en el cuadro de advertencia que aparece, pulse el botón Aceptar.
7 El nuevo sitio se encuentra ahora en la ventana Administrar sitio. Desde esta ventana es posible editar, modificar y eliminar los sitios creados. Ahora pulse el botón Listo para acabar con el proceso de creación de un nuevo sitio.
8 El nuevo sitio se ha creado y podemos comprobarlo desde el panel Archivos.
9 Verá que de este modo se abre de nuevo el cuadro Configuración del sitio para elemental.
Por último sepa que es posible crear más sitios nuevos o eliminar los creados desde el cuadro Administrar de sitios, al cual ahora accederemos desplegando el panel de carpetas en el que vemos la carpeta elemental.
IMPORTANTE
Una aplicación Web es un conjunto de páginas que interactúan entre sí, con el usuario y con diversos recursos en un servidor Web, incluidas bases de datos. Haga clic en el botón más (+) dentro de la categoría Servidores para activar el cuadro con las distintas tecnologías de servidor. Dreamweaver posibilita la creación de aplicaciones Web mediante las tecnologías de servidor ColdFusion, ASP. NET, ASP, JSP y PHP. Cada una corresponde a un tipo de documento en Dreamweaver. La elección de una tecnología de servidor para la aplicación Web depende de diversos factores, incluidos su grado de conocimiento de los lenguajes de programación y la configuración del servidor de aplicaciones que vaya a utilizar.
| 009 | Administrar sitios locales |
PARA FACILITAR SU GESTIÓN POSTERIOR, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar.
IMPORTANTE
Además de cambiar su aspecto, el cuadro Administrar sitios presenta como novedad los botones Importar sitio de Business Catalyst y Nuevo sitio de Business Catalyst.
1 Para empezar, pulse el botón de flecha de la palabra elemental, incluida en el desplegable Mostrar del panel Archivos.
2 El desplegable Mostrar posibilita el acceso a todos los sitios configurados, al Escritorio, y a las unidades de almacenamiento del equipo. Seleccione la opción Escritorio y pulse en el signo + que precede a la carpeta Elementos de escritorio.
3 En el Escritorio colocamos la carpeta raíz, elemental, de nuestro sitio web local. Pulse el vínculo Administrar sitios
4 En el cuadro de diálogo Configuración del sitio para elemental despliegue el panel Configuración avanzada y seleccione Información local.
5 Los datos locales configurados en el asistente se muestran completados. Pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes.
6 Haga clic en el botón Escritorio del panel de accesos directos, abra la carpeta elemental con un doble clic sobre su icono y pulse el botón Nueva carpeta.
7 Escriba la palabra imágenes y pulse dos veces la tecla Retorno.
8 Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar.
9 El panel Archivos se actualiza, pasando a mostrar el contenido del sitio elemental, una vez modificado.
10 Aparece un nuevo documento que usaremos como página inicial del sitio, la primera que se cargará en el navegador.
11 Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y elija la opción Nueva carpeta.
12 Cree una carpeta para los documentos dependientes de la página principal: escriba la palabra documentos y pulse Retorno.
13 De momento, incluiremos una página en blanco en esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y seleccione la opción Nuevo archivo.
14 Escriba la expresión texto.htm como nombre del nuevo documento y pulse la tecla Retorno.
15 Para finalizar el ejercicio, abra el menú Archivo y seleccione el comando Cerrar todos para cerrar así todos los documentos abiertos.
| 010 | Aplicar un color y una imagen de fondo |
ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. También es posible aplicar una imagen de fondo a una página. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML.
IMPORTANTE
El panel Propiedades permite 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 el panel Archivos, haga doble clic en el icono de la página index.htm.
2 Haga clic en el botón Propiedades de la página del Inspector de propiedades.
3 Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.
4 El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo y una muestra de la paleta disponible.
5 Haga clic en la categoría Título/Codificación para acceder al contenido de esta categoría. En el campo Título escriba la palabra principal y pulse Aceptar.
6 Repita la misma operación con la página texto, aplíquele el mismo color de fondo y nómbrela secundaria.
7 Ahora aplicaremos una imagen de fondo a la página. En primer lugar haremos una copia de la página texto. En el panel Archivo haga clic con el botón derecho sobre la página texto, seleccione el comando Edición y pulse la opción Duplicar.
8 Renombre la nueva copia con el texto foto.htm y ábrala.
9 Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.
10 Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.
11 En el cuadro Seleccionar origen de imagen pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde y cree una nueva carpeta en el escritorio.
12 Descargue desde nuestra web los archivos necesarios y guárdelos en esta carpeta, que puede denominar Dreamweaver CS6
13 Desde el cuadro Seleccionar origen de imagen abra dicha carpeta, seleccione el archivo casa.jpg y pulse Aceptar.
14 Pulse el botón Aceptar del cuadro Propiedades de la página.
15 La imagen se ha aplicado como fondo de pantalla.
IMPORTANTE
Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.
| 011 | Imágenes de rastreo y notas de diseño |
LA CATEGORÍA IMAGEN DE RASTREO del cuadro Propiedades de la página permite seleccionar el documento de imagen original. Antes de su aplicación como imagen de rastreo el programa permite asignarle un porcentaje de transparencia para que no obstaculice el correcto visionado de los elementos de la página. Las Design notes facilitan la conservación de información adicional asociada a documentos. Son notas que el desarrollador del sitio crea para un archivo, asociándolas a éste pero guardándolas en un documento aparte.
IMPORTANTE
No es conveniente dejar elementos sobrantes en los sitios, por lo que le recomendamos que vaya eliminando del panel Archivos las imágenes que deja de utilizar.
1 Ponga en primer plano el documento index.htm haciendo clic en su pestaña,
2 Primero debemos especificar el directorio en el que se encuentra el documento que va a ser utilizado como imagen de rastreo. Pulse el botón Examinar.
3 En el cuadro Seleccionar origen de imagen localice y seleccione el documento referencia y pulse Aceptar.
4 El programa realizará una copia en el directorio destinado a albergar este tipo de archivos en el sitio. Pulse el botón Aceptar.
5 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.
6 Por defecto las imágenes de rastreo se muestran completamente opacas. Haga clic en la parte izquierda de la barra Transparencia hasta establecer una opacidad del 20% y pulse Aceptar.
7 De este modo la imagen podrá ser utilizada de guía, sin que moleste. Ahora veremos cómo introducir otro tipo de ayudas para facilitar el control del trabajo, las llamadas Design notes o Notas de diseño. Abra el menú Archivo y elija la opción Design Notes.
8 Las notas de diseño pueden ser utilizadas para mantener información adicional asociada a los documentos, como comentarios sobre el estado del archivo. Haga clic en el campo de texto Nota y escriba la frase de ejemplo Borrar referencia.
9 Y también pueden ser usadas para realizar el seguimiento de la información confidencial que no puede introducir por motivos de seguridad. Active la opción Mostrar al abrir el archivo.
10 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. Pulse el botón Aceptar.
11 Pulse el botón de aspa de la pestaña del archivo index.htm y Sí en el cuadro de advertencia para guardar los cambios.
12 Vuelva a abrir la página index.htm con un doble clic sobre su icono en el panel Archivos, compruebe que, efectivamente, el programa antes de cargar la página para su edición muestra la nota asociada al archivo, desactive la opción Mostrar al abrir el archivo y haga clic en Aceptar.
13 Acceda de nuevo al cuadro Propiedades de la página, active la categoría Imagen de rastreo, seleccione la ruta en ese campo, pulse la tecla Suprimir para eliminarla
IMPORTANTE
La ficha Toda la información del cuadro Design Notes muestra el nombre y la ubicación del archivo al que la nota quedará asociada. El botón con 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. El botón con el signo –, por su parte, elimina de la nota el elemento seleccionado en el cuadro central, llamado Información.
| 012 | Exportar y eliminar sitios |
DREAMWEAVER GUARDA LAS 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 información para realizar el trabajo en equipo o por necesidad. Dreamweaver permite exportar la configuración de cada uno de los sitios en archivos de extensión .ste que 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.
IMPORTANTE
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 Pulse el botón de flecha del cuadro Mostrar del panel Archivos y seleccione la opción Escritorio.
2 Tras definir su configuración, creamos la estructura básica del sitio: la página principal y dos carpetas que contienen documentos e imágenes. Haga clic en el enlace Administrar sitios del panel Archivos.
3 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. Seleccione el sitio elemental y pulse el icono Exportar, el cuarto situado debajo del panel de sitios.
4 En el cuadro Exportar sitio sólo debemos seleccionar el directorio en el que deseamos almacenar el archivo de definición del sitio. Pulse el botón Escritorio del panel de accesos directos y haga clic en el botón Guardar.
5 Una vez exportada la configuración, eliminaremos el sitio elemental. Pulse el primer icono de los situados debajo del panel de sitios, denominado Eliminar.
6 La configuración del sitio no podrá ser recuperada si se elimina. Haga clic en el botón Sí
7 Para acabar, cambiaremos de ubicación la carpeta que contiene la estructura de nuestro sitio. Primero abra el menú Archivo y seleccione el comando Cerrar todos; pulse sí en los dos cuadros que aparecen para guardar los cambios realizados.
8 Haga clic con el botón derecho del ratón sobre la carpeta elemental en el panel Archivos, pulse sobre el comando Edición y elija la opción Cortar del menú contextual.
9 Situaremos esta carpeta 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.
10 En esta carpeta almacenaremos los diferentes sitios creados en estos ejercicios. Escriba la palabra sitios y pulse Retorno.
11 Haga clic con el botón derecho del ratón sobre la carpeta sitios, pulse de nuevo sobre el menú Edición y elija la opción Pegar. Puede comprobar que el contenido de la carpeta elemental ha sido trasladado correctamente.
| 013 | Importar sitios |
LOS ARCHIVOS DE DEFINICIÓN pueden ser importados desde Dreamweaver para recuperar la información de configuració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 en el mismo directorio en el que se encontraba cuando se creó el archivo de definición, se debe indicar la carpeta raíz y la carpeta de imágenes (en caso de querer utilizar este recurso).
IMPORTANTE
Las Design notes, aunque están asociadas a un documento, se guardan como archivos independientes en la carpeta _notes, generada automáticamente por el programa dentro del sitio. En el panel Archivos no se muestra esta carpeta puesto que su contenido no es utilizado para la visualización de las páginas en el navegador, sino que sólo se trata de notas de interés para los desarrolladores.
1 En este ejercicio importaremos la configuración guardada. En el panel Archivos, haga clic en el enlace Administrar sitios y, en ese cuadro, pulse el botón Importar sitio.
2 En el cuadro Importar sitio, haga doble clic en el icono del archivo de definición del sitio elemental.
3 El documento .ste conserva la información relativa a la situación de la carpeta raíz anterior, así el programa no puede localizarla 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. Abra la carpeta sitios y repita la acción con la carpeta elemental.
4 Pulse el botón Seleccionar para que la carpeta elemental pase a ser la raíz del sitio importado.
5 La pérdida de la referencia de la carpeta raíz del sitio conlleva la de la carpeta de imágenes. Aparece, por tanto, el cuadro de diálogo que permite seleccionarla. Abra la carpeta imágenes con un doble clic y pulse el botón Seleccionar.
6 El programa carga la configuración del nuevo sitio. Pulse el botón Listo.
7 El cambio de directorio de la carpeta raíz implica que el programa deba generar de nuevo la información relativa a su estructura para mostrarla correctamente en el panel Archivos. Expanda la carpeta raíz del sitio pulsando el signo + que la precede.
8 Se muestra todo su contenido con el color verde identificativo de la pertenencia a un sitio.
9 Con el sitio elemental seleccionado, pulse el icono Editar.
10 Acceda a la categoría Design Notes dentro de la configuración avanzada y, tras comprobar que se encuentra seleccionada la opción que indica que éstas se deben conservar pese a no estar activas, pulse en la casilla de verificación de la opción Mantener Design Notes para desactivarla
11 Haga clic en Guardar y, en el cuadro de diálogo Administrar sitios, pulse el botón Listo.
| 014 | Duplicar y editar sitios |
EL DUPLICADO DE SITIOS NO DEBE CONFUNDIRSE con el de los documentos que lo componen. Duplicando un sitio conseguimos una copia de la configuración del original que posteriormente podemos editar. También se puede adaptar el duplicado para configurar un sitio similar al original. El panel Archivos posibilita el duplicado directo de los archivos de un sitio, mediante el arrastre. Para que la operación se complete correctamente, la carpeta de destino del duplicado debe pertenecer a su vez a un sitio.
IMPORTANTE
La ficha Información local del cuadro de diálogo Configuración del sitio para presenta opciones adicionales en su parte inferior. La última de ellas, seleccionada por defecto, indica la creación de un caché local para mejorar la velocidad de las tareas de administración del sitio.
1 En este ejercicio comprobaremos la diferencia entre la duplicación de la configuración de un sitio y la de su contenido. Para empezar, pulse en el enlace Administrar sitios del panel Archivos, seleccione el sitio elemental y pulse el icono Duplicar, el tercero del grupo situado debajo del panel de sitios.
2 El duplicado, al que el programa atribuye el nombre elemental copia,
3 En el campo Nombre del sitio escriba la palabra estilos y pulse el icono de carpeta situado junto al campo Carpeta raíz local.
4 Asociaremos la configuración a una carpeta raíz local diferente a la actual para evitar conflictos en la gestión de los sitios. Dentro de la carpeta sitios, pulse el botón Nueva carpeta.
5 Le daremos el mismo nombre que hemos asignado al sitio duplicado. Escriba la palabra estilos,
6 Por último suprimiremos la referencia a la carpeta de imágenes. Despliegue el panel Configuración avanzada y dentro de Información local seleccione la carpeta definida y pulse la tecla Suprimir.
7 Pulse Guardar en el cuadro de configuración y Listo en el cuadro administrador. Abra el cuadro Mostrar y seleccione la opción Escritorio.
8 Duplicaremos todos los archivos del sitio elemental en el interior de la carpeta estilos, conservando su estructura. En el panel Archivos, abra la carpeta elemental y seleccione todo su contenido con la tecla Mayúsculas.
9 Pulse en el icono de opciones del panel Archivos, haga clic sobre el comando Edición y elija la opción Copiar del submenú.
10 Haga clic con el botón derecho del ratón sobre el sitio estilos, pulse en el comando Edición y elija la opción Pegar.
11 Automáticamente el programa duplica los archivos originales.
12 Haga clic en el signo + situado a la izquierda del sitio para comprobar cuál es su estructura.
13 Para acabar, seleccione la carpeta imágenes, pulse la tecla Suprimir y haga clic en el botón Sí del cuadro de confirmación.
| 015 | Insertar texto |
EL TEXTO ES EL PRINCIPAL COMPONENTE de una página web y su inclusión no repercute prácticamente en el tiempo de descarga. En Dreamweaver, en principio, no pueden ser insertados dos espacios en blanco seguidos. Los textos de una página quedan divididos en párrafos que se crean al pulsar la tecla Retorno. 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 un salto de línea que se añade con la combinación Mayúsculas + Retorno.
IMPORTANTE
El panel Insertar, abierto por defecto en esta versión de Dreamweaver, presenta como novedad en su lista de categorías la denominada jQuery Mobile, destinada a la gestión de páginas creadas para móviles.
1 Para realizar las prácticas de texto utilizaremos las páginas del sitio elemental, creado anteriormente. Empezaremos editando su página principal. En el panel Archivos, active ese sitio y haga doble clic en el archivo index.htm para abrirlo.
2 En los documentos carentes de contenido el cursor de edición queda situado en la primera línea de la página. Escriba la palabra casa y pulse la barra espaciadora de su teclado.
3 Pulse nuevamente la barra espaciadora para comprobar que no se pueden insertar dos espacios seguidos, complete la frase escribiendo el término en venta y pulse la tecla Retorno.
4 Se crea así un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento, <p>.
5 Entre los dos párrafos 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. Abra el menú Insertar, pulse en la opción HTML, elija la opción Caracteres especiales y seleccione el comando Salto de línea.
6 La nueva línea forma parte del mismo párrafo que la anterior. De este modo no queda una línea en blanco entre las dos escritas. Pulse la tecla Retroceso.
7 Para introducir un salto de línea mediante el teclado, pulse la combinación de teclas Mayúsculas+Retorno y, en la nueva línea, escriba la frase de ejemplo ampliar imagen.
8 El panel Insertar permite incluir distintos elementos organizador por categorías. Despliegue el campo que muestra por defecto la categoría Diseño
9 Sus opciones permiten la inserción directa de etiquetas HTML relacionadas con el texto.
Haga clic en la opción Caracteres, que engloba todos los caracteres especiales, y seleccione el comando Salto de línea.
El programa permite definir el comportamiento de los saltos de línea en el cuadro de diálogo Preferencias.
10 Para acabar almacenaremos los cambios efectuados. Resulta conveniente hacerlo frecuentemente para evitar pérdidas accidentales. 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, cuyo icono muestra un disquete en la barra de herramientas Estándar.
| 016 | Copiar y pegar texto entre documentos |
LA COPIA Y PEGADO DE TEXTO resultan una alternativa a su introducción directa con el teclado. Entre los tipos de documentos que los profesionales 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 Office.
IMPORTANTE
Copiando y pegando texto ahorramos tiempo en la edición de los documentos. 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.
1 Para realizar este ejercicio, copie en su carpeta de documentos los archivos de texto presentación y descripción que encontrará en nuestra página de descargas. Minimice la ventana de Dreamweaver y abra la carpeta donde los ha almacenado.
2 Los archivos de ejemplo fueron creados con la aplicación WordPad, incluida en el sistema operativo Windows. Seleccione todo el texto del documento presentación utilizando la tecla Mayúsculas. Haga clic con el botón derecho sobre el texto seleccionado y pulse la opción Copiar.
3 De nuevo en Dreamweaver, pulse al inicio de la primera línea de texto, abra el menú Edición y seleccione el comando Pegar.
4 Para separar el texto pegado del precedente, pulse Retorno.
5 Después, seleccione el primer término Casa Amiga y pulse el icono Copiar de la Barra de herramientas Estándar.
6 Pulse al inicio de la línea, haga clic en el comando Pegar de la Barra de herramientas Estándar
7 Pulse el icono Guardar de la barra de herramientas Estándar para almacenar los cambios realizados en la página.
8 En el panel Archivos, expanda la carpeta documentos pulsando en el signo + que precede a su nombre y haga doble clic en el documento texto.htm para abrirlo.
9 Vamos a copiar un nuevo texto procedente de un segundo documento de muestra en esta página. Para ello, abra en procesador de textos el documento descripción.rtf, seleccione todo el texto que contiene, cópielo y vuelva a Dreamweaver.
10 Con la página texto.htm abierta en primer plano, abra de nuevo el menú Edición y elija la opción Pegar.
11 Dreamweaver no respeta el formato original del texto. El texto pegado presenta el mismo tipo de letra que el tecleado en el documento index.htm y el pegado posteriormente en él, procedente del archivo presentación.
IMPORTANTE
Para seleccionar todo el contenido de la página puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo, cuyo método abreviado es Ctrl+A.
| 017 | Modificar el formato de un texto |
LOS BLOQUES DE TEXTO de una página presentan el formato Párrafo y su correspondiente etiqueta, <p>, en el selector de la Barra de estado permite su selección directa. Este formato presenta un tamaño y un estilo de fuente predeterminados. Dreamweaver permite 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.
IMPORTANTE
Se pueden definir siete tipos de encabezados, siendo el Encabezado 1, el que aplica un tamaño de letra mayor a los textos. 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. Para cambiar esta configuración se debe acudir al cuadro de diálogo Preferencias, categoría General.
1 Para empezar, haga clic en el margen izquierdo de la página a la altura de la primera línea para seleccionarla entera y pulse en el icono Copiar de la barra de herramientas Estándar.
2 Seguidamente, active la página index.htm pulsando en su pestaña y, con el cursor de edición al final de la página, pulse en el icono Pegar de la barra de herramientas Estándar.
3 Dreamweaver permite aplicar opciones de formato a los diferentes párrafos de una página. Seleccione el primer término Casa Amiga, abra el menú Formato, pulse en la opción Formato de párrafo y elija Texto preformateado.
4 Los formatos de párrafo definen diversas características del texto, como el estilo y el tamaño de la fuente. Pero estos parámetros son relativos, ya que el texto visualizado en Dreamweaver no siempre se corresponde con el que muestra el navegador. El panel Insertar permite aplicar a un párrafo el formato de encabezado. Pulse la opción h1 de este panel.
5 El texto seleccionado queda definido como un encabezado de Estilo 1 y aparece en la Barra de estado la etiqueta correspondiente, h1.
6 Pulse la tecla Retorno y compruebe que el programa crea los nuevos párrafos sin aplicar el formato anterior, según lo establecido en sus preferencias.
7 Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página. Pulse la tecla Suprimir para eliminar un salto de carro y seleccione las tres líneas de texto siguientes, hasta la palabra venta.
8 Para definir los párrafos seleccionados como encabezados, pulse esta vez la opción h2 del panel Insertar.
9 El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo, h1.
10 La etiqueta h3 del selector de la barra de estado nos permite seleccionar de modo directo todo el párrafo que presenta este formato de encabezado. Púlsela.
11 El panel Propiedades también permite la aplicación de formatos de párrafo a los textos. Pulse el botón de flecha del campo Formato de este panel y elija la opción Encabezado 4.
12 Haga clic al final de la selección y pulse el comando Guardar de la barra de herramientas Estándar.
IMPORTANTE
Seleccionando la opción Texto con formato predeterminado en el panel Insertar aplicamos al texto la etiqueta <pre> y, por consiguiente, el tipo y tamaño de letra configurado en Dreamweaver como Fuente fija.
| 018 | Cambiar las propiedades y el color del texto |
DREAMWEAVER PRESENTA LOS TEXTOS por defecto con la fuente Times New Roman y en color negro, que viene definido en el cuadro Preferencias de la aplicación. El programa permite cambiar las combinaciones de fuente así como el tamaño, el estilo y el color de las fuentes.
IMPORTANTE
Los distintos estilos también pueden ser aplicados utilizando las distintas opciones que se encuentran dentro del comando Estilo del menú Formato.
1 Para empezar este ejercicio, despliegue el menú Edición, haga clic sobre el comando Preferencias y, en el cuadro del mismo nombre, active la categoría Fuentes.
2 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 los documentos que utilizan un determinado tipo de codificación. Haga clic en el botón desplegable del campo Fuente proporcional, seleccione la fuente Courier New y pulse el botón Aceptar.
3 También puede cambiar las fuentes desde el cuadro Propiedades de la página. Pulse ese botón del inspector de propiedades.
4 Pulse en el botón de flecha del campo Fuente de página, seleccione la opción Arial, Helvética, sans-serif.
5 A continuación haga clic en la categoría Apariencia (HTML), despliegue el campo Texto y del panel que se despliega seleccione una muestra.
6 Pulse el botón Aceptar para aplicar la fuente y el color.
7 Se aplica la primera de las fuentes de la lista seleccionada.
8 Acceda de nuevo al cuadro Propiedades de la página, haga clic en el botón de punta de flecha del campo Tamaño y seleccione, por ejemplo, el valor 14.
9 A continuación seleccione la categoría Apariencia (HTML) en el panel lateral izquierdo del cuadro.
10 En HTML, los colores se expresan en forma de valores hexacesimales. El programa permite la definición directa de un tono mediante estos valores. Inserte el valor #0000FF en el campo Texto
11 Ahora veremos cómo aplicar un estilo concreto a un texto seleccionado. Seleccione la primera línea de texto y pulse el botón Negrita del panel Propiedades, representado por una B.
12 Para acabar con este ejercicio guarde los cambios realizados pulsando el icono Guardar de la barra de herramientas Estándar.
IMPORTANTE
Los navegadores utilizan la primera fuente de la combinación que se localice en el sistema. Si ésta no está instalada, el navegador pasa a utilizar la segunda, y así sucesivamente.
| 019 | Crear archivos de InContext Editing |
PARA PERMITIR A LOS USUARIOS FINALES realizar cambios sencillos en una página web sin tener que utilizar otro software o acudir al creador de la misma, Dreamweaver ofrece la función InContext Editing. Gracias a este servicio en línea, es posible limitar los cambios a páginas o regiones concretas y a opciones de formato personalizadas.
IMPORTANTE
Utilice la función Crear región repetida de InContext Editing para definir un área de su página con una estructura y unas propiedades concretas que el usuario puede repetir y en la que se puede añadir contenido directamente desde un navegador.
1 Las etiquetas HTML ice:editable identifican a las regiones editables de InContext Editing, que son las regiones que pueden ser modificadas por el usuario directamente en el navegador. En este ejercicio, vamos a añadir una región editable debajo de la primera línea de la página texto.htm. Haga clic al final de la primera frase de la página y pulse la tecla Retorno para crear un nuevo párrafo.
2 Las funciones de InContext Editing se encuentran tanto en la categoría con ese nombre del panel Insertar como en el menú Insertar. Despliegue la lista de categorías del mencionado panel, pulse sobre la opción InContext Editing
3 Mantenga seleccionada la opción Insertar nueva región editable en el punto de inserción actual en el cuadro Crear región editable y pulse el botón Aceptar.
4 Automáticamente Dreamweaver añade una etiqueta div (contenedor que incluye texto, imágenes, tablas, etc.) en el punto de inserción, como puede ver en la Barra de selección de etiquetas. Además, el panel Propiedades muestra las posibles opciones de edición de este tipo de región. Las opciones que mantenga seleccionadas podrán ser editadas por el usuario en un navegador. Imaginemos, por ejemplo, que sólo queremos que el usuario pueda modificar el color de fondo de la página. Pulse en el botón Desactivar todas
5 Pulse el icono Guardar de la Barra de herramientas para almacenar los cambios realizados en la página.
6 Al ser ésta la primera vez que guardamos un archivo que incluye la funcionalidad InContext Editing, Dreamweaver muestra el cuadro Copiar archivos independientes, que nos informa de que se están añadiendo archivos de compatibilidad que deberán ser cargados al servidor para que la edición sea posible en el navegador. Pulse el botón Aceptar de este cuadro.
7 Para que se añada la carpeta includes con los archivos generados, pulse la tecla F5 para actualizar este panel.
8 Cuando disponga de un servidor remoto configurado para publicar su página deberá utilizar la opción Colocar del menú contextual de esta carpeta para añadir los archivos de InContext Editing y poder así editar la página directamente en el navegador. Para eliminar todo el código asociado a la región editable pulse el botón Quitar región del panel Propiedades.
9 El cuadro de confirmación nos informa de que se eliminará la región editable pero su contenido se mantendrá. Pulse el botón Aceptar y guarde los cambios pulsando el icono Guardar.
| 020 | Importar y utilizar fuentes Web |
OTRA DE LAS NOVEDADES QUE PRESENTA Dreamweaver CS6 es la posibilidad de utilizar en sus páginas y sitios web fuentes creativas compatibles con Internet. El programa cuenta con un administrador de fuentes exclusivo para estos tipos de letra desde el cual se lleva a cabo la importación de la fuente en cuestión al sitio web creado en Dreamweaver. Algunas de las fuentes consideradas web compatibles con Dreamweaver son las fuentes web de Google o las denominadas Typekit.
IMPORTANTE
Si accede al cuadro de configuración de su sitio web, por ejemplo, desde el panel Archivos, podrá cambiar la carpeta predeterminada en la cual se almacenan las fuentes adicionales de este sitio. Para ello, deberá acceder a la categoría Fuentes Web del mencionado cuadro.
1 En este ejercicio le mostraremos cómo importar a Dreamweaver fuentes web para poder utilizarlas en alguna de nuestras páginas. Empiece situando en primer plano la página index.htm.
2 A continuación, debemos acceder al nuevo Administrador de fuentes Web, por lo que despliegue el menú Modificar y haga clic sobre el nuevo comando Fuentes Web.
3 Se abre el cuadro de diálogo Administrador de fuentes Web, el cual por el momento se encuentra vacío. Para agregar nuevas fuentes, haga clic sobre el botón Añadir fuentes.
4 Este botón da paso al cuadro Añadir fuente Web, desde el cual debe seleccionar la fuente que desea utilizar. Existen en Internet miles y miles de sitios proveedores de fuentes, unos gratuitos (como Google) y otros de pago (Typekit). En cualquier caso, es preciso contar con su carpeta de fuentes descargadas almacenada en su equipo para continuar con el paso siguiente. Para llevar a cabo esta práctica puede utilizar, si lo desea, la fuente que encontrará en la carpeta fuentes web de los archivos necesarios del libro. En el cuadro de diálogo Añadir fuente Web, pulse sobre el icono de carpeta del campo Fuente EOT,
5 La fuente pasa a formar parte del cuadro Añadir fuente Web.
6 Ahora la fuente elegida se refleja en el administrador de fuentes web.
7 Nada aparente ha ocurrido; sin embargo la nueva fuente Web se ha añadido a la lista de fuentes disponibles. Para comprobarlo, pulse sobre el botón CSS del panel Propiedades
Efectivamente, en un grupo independiente de fuentes se encuentra la fuente web.
| 021 | Cambiar los márgenes y la alineación |
DREAMWEAVER PERMITE ESTABLECER los márgenes izquierdo y superior de las páginas. Para ello se deben cumplimentar los campos oportunos de la categoría Apariencia HTML del cuadro Propiedades de la página. El programa también permite alinear los párrafos respecto a los márgenes de la página, presentando las cuatro opciones de alineación clásicas de los editores de texto. Se puede acceder a ellas a través de la ruta de menú Formato/Alinear o utilizar los botones mostrados a tal efecto en el Inspector de propiedades en el modo CSS.
1 Con la página texto.htm en primer plano, pulse el botón Propiedades de la página del panel Propiedades y acceda a la categoría Apariencia HTML.
2 Los márgenes de la página quedan establecidos en esta categoría, que presenta cuatro campos a tal efecto, aunque sólo puedan ser definidos dos tipos de márgenes. Pulse en el campo Margen izquierdo y teclee el valor 20.
3 Los valores de los márgenes se establecen en píxeles. En el campo Margen superior, teclee el valor 30
4 Como la mayoría de los editores de texto, Dreamweaver admite cuatro opciones de alineación de párrafos. Abra el menú Formato y despliegue el comando Alinear.
5 En el submenú desplegado, seleccione el comando Derecha.
6 La alineación afecta a todo el párrafo de modo que queda correctamente alineado en el margen derecho de la página.
7 Estableceremos para este documento los mismos márgenes que en el caso anterior. En el panel de propiedades, pulse sobre el botón Propiedades de la página.
8 Active la categoría Apariencia HTML, pulse en el campo Margen izquierdo y teclee el valor 20.
9 Haga clic en el campo Margen superior, teclee el valor 30 y pulse el botón Aceptar.
10 Haga clic al inicio del primer párrafo, despliegue el menú Formato, pulse sobre la opción Alinear y elija Derecha.
11 Haga clic al inicio del segundo párrafo, pulse en el botón CSS del panel de propiedades y haga clic en el botón Justificar, el último de los botones de alineación del panel Propiedades.
12 Al realizar este cambio desde los estilos CSS, éste afecta a toda la página. Compruébelo nuevamente pulsando al inicio del cuarto párrafo y activando la opción Alinear al centro del panel de propiedades.
13 Para alinear a la izquierda únicamente el párrafo activo, abra el menú Formato, pulse en la opción Alinear y elija Izquierda.
14 Acabe el ejercicio guardando los cambios con el icono Guardar de la barra de herramientas Estándar.
IMPORTANTE
Para establecer márgenes que sean respetados por otros navegadores, se deben introducir en los campos Ancho de margen y Alto de margen. Para que no aparezcan márgenes en ninguno de los navegadores, asigne el valor 0 a los cuatro campos.
Ücretsiz ön izlemeyi tamamladınız.
