Полная версия:
MEDIAactive Aprender Dreamweaver CS5 con 100 ejercicios prácticos
- + Увеличить шрифт
- - Уменьшить шрифт
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.
1.Para empezar, haga clic en el enlace HTML de la Ventana de bienvenida. Después, en el nuevo documento en blanco que se ha creado, abra el menú Archivo y elija la opción Nuevo.
2.La primera columna del cuadro Nuevo documento permite la creación de una página en blanco, una plantilla en blanco, una página de plantilla, una página de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de página, que varían según el tipo de documento seleccionado. La segunda parte de este panel incluye los tipos de páginas dinámicas. Seleccione la categoría Plantilla en blanco.
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 Página de plantilla.
4.El panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro.
Los tipos de archivo de la categoría Otro están destinados a programadores experimentados.
5.Los tipos de archivo listados en esta categoría están destinados a programadores experimentados en estos lenguajes, basados en texto, con los que no es posible trabajar de forma visual mediante el programa. Pulse sobre la categoría Página de muestra.
6.Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.
7.Aparece el nuevo documento CSS en pantalla. Pulse la combinación de teclas Ctrl.+N.
8.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.
9.Pulse el botón Preferencias y, en el cuadro Preferencias, haga clic en el botón de flecha de la opción Documento predeterminado para acceder a sus opciones.
10.Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Mantenga seleccionada la opción HTML
Desde el cuadro de preferencias de Dreamweaver puede indicar qué tipo de documento será el documento predeterminado.
11.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 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. El cuadro de diálogo Nuevo documento de Dreamweaver ofrece el panel Página de muestra, con todas las características de estos estilos y una vista previa y una descripción del estilo seleccionado.
004Visualizar varios archivos simultáneamente
IMPORTANTE
Dreamweaver ofrece una posibilidad de recuperación directa de los archivos de uso reciente. Se trata de la opción Abrir reciente del menú Archivo, que contiene un submenú con el listado de los documentos que han sido editados y almacenados con anterioridad.
DREAMWEAVER MUESTRA LOS DIFERENTES documentos abiertos distribuidos en fichas. Sus pestañas los identifican y permiten activarlos fácilmente. De forma predeterminada, las fichas se muestran en el orden de creación o apertura de los archivos pero se pueden arrastrar para cambiarlas de posición. Las fichas sólo se muestran cuando la ventana del archivo se encuentra maximizada; en caso contrario, las ventanas funcionan como las tradicionales de Windows. Dreamweaver también permite disponer los archivos en forma de Cascada y Mosaico, opciones clásicas de distribución de ventanas del sistema operativo de Microsoft.
1.Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, descargue desde nuestra web el archivo muestra. htm. Abra el menú Archivo y pulse en la opción Abrir.
2.La acción nos conduce al cuadro de diálogo Abrir. Localice y seleccione su archivo de ejemplo y pulse el botón Abrir.
Puede acceder al cuadro de diálogo Abrir usando esa opción del menú Archivo o bien la combinación de teclas Ctrl.+O.
3.Abra el menú Ventana y pulse sobre uno de los documentos sin título para mostrarlo en primer plano.
En la parte final del menú Ventana puede ver la lista de todos los documentos abiertos en estos momentos. Puede activarlos pulsando sobre ellos.
4.El archivo de ejemplo sigue abierto, pero permanece inactivo. Haga clic en la pestaña de ese archivo para activarlo.
5.Esta disposición en forma de fichas facilita la selección de los archivos para su edición. Pero el programa permite distribuirlos de otras maneras. Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Ábralo y seleccione la opción Cascada.
6.Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows.
Dreamweaver permite mostrar las ventanas de los diferentes documentos abiertos en forma de cascada, de mosaico horizontal o de mosaico vertical.
7.El documento queda en la esquina inferior izquierda del área de trabajo. Pulse el botón Maximizar del siguiente archivo.
8.El área de trabajo recupera su distribución inicial, distribuyendo los diferentes documentos en fichas. Abra el menú Ventana y seleccione la opción Mosaico horizontal.
9.El documento de ejemplo sigue minimizado. En su Barra de título, pulse el primero de los botones de control muestra el icono identificativo del comando Restaurar,
Utilice los botones Restaurar, Maximizar y r Minimizar de las Barras de título de las ventanas de los documentos para cambiar el tamaño de las mismas.
10.Además el programa permite aplicar ciertas acciones a la totalidad de documentos en uso. Abra el menú Archivo y pulse en la opción Cerrar todos.
11.Aparece un cuadro de advertencia que propone almacenar los cambios en los documentos que han sido modificados. Si los documentos no se guardan será imposible recuperarlos. Pulse el botón No para dar por acabado el ejercicio.
Si va a cerrar un documento que ha sido modificado, el programa le pregunta antes si desea almacenar esas modificaciones.
005Diseño y código de páginas web
IMPORTANTE
En la categoría Barra de estado 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.
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.
1.Toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación. Con su documento de ejemplo abierto en Dreamweaver, despliegue el menú Ver.
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. Seleccione la opción Código.
Para cambiar de una vista a otra utilice las opciones disponibles en el menú Ver o bien los botones de la Barra de herramientas Documentos. Recuerde que puede mostrar esta barra seleccionándola en la opción Barras de herramientas del menú Ver.
3.El documento pasa a mostrarse en forma de código.
En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa para modificar su aspecto.
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 una imagen de su página y haga clic en el botón Código de la barra Documento.
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.
Para trabajar conjuntamente con el código y con el diseño de una página, active a vista Dividir, que divide en dos partes el área de trabajo.
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.
En la Barra de estado se encuentra el Selector de etiquetas, que permite seleccionarlas para modificarlas.
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.
006Conocer los elementos de una página web
IMPORTANTE
Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.
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.
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.
Los iconos para acceder al contenido de Head aparecen 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.
Puede cambiar el título de su página escribiéndolo directamente en la etiqueta del código o bien en el campo Título de la Barra de herramientas Documento o del Inspector de propiedades.
5.No debe confundirse el título de la página con el nombre del archivo. El título se muestra en la Barra de título del navegador cuando se visualiza la página publicada. Escriba la palabra prueba y pulse la tecla Retorno para confirmar el cambio.
6.Haga clic en el segundo icono de la sección head.
7.La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento
La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Esta información, que consta de tres propiedades, queda establecida automáticamente durante la generación del documento, en función del formato que éste presente.
8.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.
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.
En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este manual, MEDIAactive.
10.El panel Propiedades presenta los atributos del texto actual-mente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra Pulse.
11.El texto definido como enlace aparece en el campo Vínculo.
Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, vídeos y diversos tipos de elementos multimedia.
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.
