Manual de Dreamweaver CS5

MEDIAactive

• Editorial: Marcombo
• Año: 2012
• ISBN del libro electrónico: 9788426718600
• Edición: 1
• Categoría: Ciencia de la computación
• Categoría: Programación web

Este manual dedicado a Dreamweaver CS5, el conocido programa de creación y edición de sitios y páginas web de la compañía Adobe, se estudia en profundidad el uso de prácticamente todos los comandos de esta aplicación para elaborar sitios web tanto a nivel profesional como particular. Mediante sencillos y a la vez elaborados ejemplos prácticos se describen detalladamente las herramientas del programa. La versión más reciente de Dreamweaver presenta novedades que podrían considerarse indispensables, así como ciertas mejoras que consiguen una vez más la complicidad entre el usuario y la aplicación gracias a un uso cada vez más intuitivo y al alcance de prácticamente todos. De este modo, Dreamweaver presenta entre sus novedades una simplificación en la configuración del sitio web, que consiste sencillamente en la inserción de un nombre y una ruta en la cual se almacenarán los archivos. Sólo con estos datos el programa ya permite empezar a trabajar con la elaboración de las páginas que formarán el sitio web. Entre otras novedades, el usuario encontrará y podrá practicar con los diseños de inicio de CSS, los archivos relacionados dinámicamente o la magnífica navegación de Vista en Vivo, que activa vínculos para poder interactuar con aplicaciones del lado del servidor y con datos dinámicos. Garantizamos que si el lector realiza correctamente todos los ejercicios que componen los 10 apartados de este volumen, se convertirá en un experto en creación y diseño de sitios y páginas web y podrá aplicar los conocimientos avanzados adquiridos sobre sus propias creaciones personales o profesionales, aprovechando así al máximo las principales utilidades que ofrece el programa. Este libro pertenece a la colección Manuales, la cual ofrece cursos prácticos de los más importantes programas del sector informático dirigidos tanto a usuarios noveles como a usuarios que trabajan habitualmente con esos programas y desean ampliar sus conocimientos.

Conceptos avanzados

Introducción

Con el término “Conceptos avanzados” utilizado para designar este apartado entendemos aquellos procedimientos considerados de una cierta dificultad dentro de la dinámica de este curso. De esta forma, en esta sección, el lector encontrará lecciones dedicadas a los elementos PA, a los formularios, a la inserción y gestión de comportamientos, al trabajo con funciones JavaScript y al framework de Spry.

Un elemento PA (elemento con posición absoluta) es un elemento de página HTML que tiene una posición absoluta asignada. Los elementos PA pueden contener texto, imágenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML. En las primeras lecciones de este apartado el lector aprenderá a insertar elementos PA, a manipular las propiedades de estos elementos y a convertirlos en tabla, y viceversa.

Los elementos PA (de posición absoluta) pueden ser convertidos en tabla, así como proceder en el sentido inverso.

Gracias a los numerosos objetos de formulario disponibles en Dreamweaver es posible crear formularios interactivos de aspecto completamente profesional.

Tras estas tres primeras lecciones, se presentan una serie de lecciones dedicadas a los formularios. Cuando un visitante introduce información en un formulario Web visualizado en un navegador Web y pulsa en el botón de envío, la información se transfiere al servidor, donde será procesada por una aplicación o un script del lado del servidor. El servidor responde devolviendo la información procesada al usuario (o cliente) o bien realizando alguna otra acción basada en el contenido del formulario. En las cuatro lecciones dedicadas a los formularios, el usuario aprenderá a crearlos y a insertar objetos en ellos y a agregar comportamientos y acciones.

Con Spry, puede utilizar HTML, CSS y una cantidad mínima de código JavaScript para incorporar datos XML a los documentos HTML, crear widgets, como acordeones y barras de menú, y añadir tipos distintos de efectos para varios elementos de la página.

Las sugerencias para el código JavaScript son una forma intuitiva de trabajar con este código de programación para los usuarios menos avanzados.

Un comportamiento es una combinación de un evento y una acción que desencadena ese evento. En el panel Comportamientos, un comportamiento se añade a una página especificando en primer lugar una acción y, a continuación, el evento que desencadena esa acción. Los comportamientos de Dreamweaver colocan código JavaScript en los documentos para que los visitantes puedan cambiar una página Web de diversas formas o iniciar determinadas tareas. El código JavaScript es tratado de forma muy resumida en algunas lecciones de este apartado, debido a que un estudio más detallado supondría la ejecución de un volumen exclusivo para este código de programación.

Este apartado concluye con una serie de lecciones dedicadas al Framework de spry, una biblioteca JavaScript que proporciona a los diseñadores Web la capacidad de crear páginas Web que ofrezcan una experiencia más completa a los visitantes.

Lección 89. Insertar elementos PA

Dreamweaver posibilita el uso de elementos PA, antes denominados capas, para facilitar el diseño de las páginas. Un elemento PA es un ítem de página HTML que se puede colocar en cualquier parte del documento. Los elementos PA, a su vez, pueden contener los mismos ítems que se pueden situar en el cuerpo de un documento HTML. Al insertar un elemento PA en un documento, Dreamweaver inserta la etiqueta HTML div en el cuerpo de la página. La etiqueta div es un elemento de nivel de bloque, el uso de la cual permite la creación de bloques de contenido diferenciados en un documento. Los elementos PA pueden ser insertados directamente en la página mediante las opciones de la Barra de menús o dibujados en la ventana del documento tras pulsar el botón Dibujar Div PA de la categoría Diseño de la barra de herramientas Insertar. En el primero de los casos, el elemento PA insertado presenta las propiedades configuradas en la categoría Elemento PA del cuadro de diálogo Preferencias de la aplicación. Éstas comprenden opciones de visibilidad de los elementos PA.

RECUERDE

Las opciones de visibilidad de los elementos PA son cuatro: default, inherit, visible y hidden (predeterminado, heredado, visible y oculto). La opción predeterminada, default, no especifica propiedad alguna de visibilidad. La opción inherit determina que la visibilidad del elemento PA dependa del elemento PA padre o, en su defecto, del cuerpo de la página. La opción visible establece que se muestre el contenido del elemento PA, y la opción hidden, que permanezca oculto.

1 En esta lección conoceremos el modo de insertar elementos PA, las antiguas capas, en los documentos. Para ello utilizaremos la página contacto.html del sitio estilos que, creada en una práctica anterior, carece de contenido, y dos archivos de imagen, los cuales puede descargar desde nuestra página web con el nombre min_v01.webp y min_a01.webp, y guardarlos en la carpeta ima del sitio estilos. Cuando disponga de ellos, muestre el panel Archivos pulsando sobre su correspondiente botón, haga clic en la parte superior de la barra de desplazamiento de este panel y haga doble clic en el icono de dicha página.

2 Antes de insertar el primero de los elementos PA en el documento, accederemos al cuadro de diálogo Preferencias para modificar la configuración predeterminada para este tipo de elementos. Despliegue el menú Edición y haga clic sobre el comando Preferencias.

3 El cuadro de diálogo Preferencias cuenta con una categoría que permite definir la configuración predeterminada de los elementos PA nuevos. Seleccione la categoría Elementos PA. (1)

4 Los elementos PA pueden ser visibles o permanecer ocultos. Despliegue el campo Visibilidad y seleccione la opción visible. (2)

El cuadro de diálogo Preferencias también permite predeterminar las dimensiones, anchura y altura, de los elementos PA insertados y establecer un color de fondo para los mismos.

La combinación de teclas Ctrl + U también permite acceder al cuadro de diálogo de preferencias de la aplicación.

5 También en el cuadro de diálogo Preferencias pueden ser especificadas las dimensiones preestablecidas para los elementos PA. Variaremos los valores de anchura y altura de estos elementos, cuya unidad de medida predeterminada son los píxeles. Haga doble clic en el campo Ancho e introduzca mediante el teclado el valor 75.

6 A continuación, haga doble clic en el campo Alto y teclee la cifra 110. (3)

7 También cambiaremos el color de fondo predeterminado para este tipo de elementos. Por defecto, el fondo de los elementos PA carece de tonalidad. Pulse en la punta de flecha del cuadro Color de fondo y seleccione la sexta muestra de la penúltima columna de la paleta emergente. (4)

También puede ser utilizada una imagen como fondo de los elementos PA, sustituyendo al c...

Índice

• Tapa Delantera
• La mitad-Título de la página
• Título de la página
• Copyright página
• Índice
• Presentación
• Espacio de trabajo y gestión de archivos
• Gestión de sitios y páginas
• El texto en Dreamweaver
• Gestión de imágenes
• Gestión de enlaces y previsualización
• El trabajo con tablas
• Etiquetas HTML y estilos
• Uso de marcos y multimedia
• Conceptos avanzados
• Gestión avanzada de sitios