Dreamwever

Unidad III.

Creación de páginas web.

1.- CONOCIENDO A DREAMWEAVER.

1.1. Espacio de trabajo.

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.

En Windows®, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.

1.2. Inspector de Propiedades

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen de la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).

1.3. Grupos de paneles

En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse y acoplarse o desacoplarse con otros grupos de paneles.

Los grupos de paneles también se pueden acoplar a la ventana de aplicación integrada (sólo en Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.

1.4. Herramientas de visualización

Utilice las barras de herramientas Documento y Estándar para realizar operaciones relacionadas con documentos y de edición estándar, la barra de herramientas Codificación para insertar código rápidamente y la barra de herramientas

Representación de estilos para mostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea, puede seleccionar la opción de mostrar u ocultar las barras de herramientas.

• Seleccione Ver > Barras de herramientas y, después, seleccione la barra de herramientas que desee.

• Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en cualquiera de las barras de herramientas en el menú contextual.

1.5. Vistas de trabajo

Vistas Código y Diseño: Le permite ver las dos vistas, Código y Diseño, para el mismo documento en una sola ventana.

Puede configurar la vista Diseño para que muestre el contenido dinámico mientras trabaja en el documento.

Vista Diseño: En esta vista, se muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.

Vista Código: Un entorno de codificación manual para escribir y editar código HTML, Java Script, código de lenguaje deservidor, como por ejemplo PHP o Cold Fusion Markup Language (CFML), y otros tipos de código.

Es posible ver el mismo documento en Código y Diseño, en una sola ventana de documento. Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.

1.6. Propiedades de página.

Para cada página que cree en Dreamweaver, puede especificar las propiedades de diseño y formato mediante el cuadro de diálogo Propiedades de la página (Modificar > Propiedades de la página). El cuadro de diálogo Propiedades de la página permite especificar la familia y el tamaño de fuente predeterminada, el color de fondo, los márgenes, los estilos de los vínculos y otros muchos aspectos relacionados con el diseño de páginas. Puede asignar nuevas propiedades de página a cada página que cree, así como modificar las propiedades de las páginas existentes.

De forma predeterminada, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada (CSS). Puede cambiar las preferencias de formato de página a formato HTML con el cuadro de diálogo Preferencias (Edición > Preferencias).

Cuando utiliza las propiedades de página de CSS, se utilizan etiquetas CSS para todas las propiedades definidas en las categorías Aspecto, Vínculos y Encabezados del cuadro de diálogo Propiedades de la página. Las etiquetas CSS que definen estos atributos están incluidas en la sección head de la página.

1.7. Establecimiento de guías de diseño

Las guías son líneas que puede arrastrar sobre el documento desde las reglas. Con ellas puede situar y alinear objetos de forma más precisa. También puede utilizar guías para medir el tamaño de los elementos de la página o emular los pliegues (áreas visibles) de los navegadores Web.

Con el fin de ayudarle a alinear elementos, puede ajustar elementos a las guías y ajustar guías a los elementos. (Los elementos deben tener posición absoluta para que funcione la función de ajuste.) También puede bloquear las guías para impedir que otro usuario las mueva accidentalmente.

1.8. Establecimiento de reglas

Las reglas ayudan a medir, organizar y planificar el diseño. Pueden aparecer en los bordes izquierdo y superior de la página, expresadas en píxeles, pulgadas o centímetros.

Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar.

Para cambiar el origen, arrastre a cualquier parte de la página el icono de origen de la regla (situado en la esquina superior izquierda de la vista Diseño de la ventana de documento).

Para restablecer el origen a su posición predeterminada, seleccione Ver > Reglas > Restablecer origen.

Para cambiar la unidad de medida, seleccione Ver > Reglas y elija Píxeles, Pulgadas o Centímetros.

2. CONFIGURACIÓN DE UN SITIO

2.1 Creación de un sitio de prueba

Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común. Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarlo para crear documentos individuales y sitios Web completos.

En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener

...