Universidad Bicentenaria de Aragua Ctedra: Informtica IV

Adobe Dreamweaver
Realizado por: Lic. Rebeca Aponte

Creacin de un documento

Para ello haremos clic en Archivo / Nuevo A continuacin aparece un cuadro de dialogo (Fig. 1) Selecciona: A la izquierda: Pgina en blanco. En la columna titulada Tipo de pgina, seleccionaremos HTML. A continuacin, deberemos seleccionar el tipo de diseo que deseamos realizar. (Diseo: 2 columnas fija, barra lateral izquierda, encabezado y pie)

Fig. 1. Cuadro de dialogo Nuevo documento.

2

Modificacin del Diseo

La primera modificacin que haremos son los encabezados y sus correspondientes prrafos: Al hacer clic en la vista de diseo, aparecer un cursor parpadeante, indicando que podemos modificar el texto. Todas las modificaciones de texto, pueden realizarse en ambas vistas y los resultados sern mostrados en ambas. Borramos el texto por defecto Instrucciones y sustituimos por uno nuevo. As sucesivamente con el prrafo del mismo, el siguiente encabezado y sus respectivos prrafos y los nombres de los vnculos.

Modificacin del Diseo

Si mantenemos el cursor en la misma posicin, aparecer un icono con un timn (Fig.2). Al hacer clic sobre l, se abrir una ventana en la cual aparecen todas las etiquetas CSS que estn relacionadas con el elemento seleccionado. Al posar el puntero sobre cada una de estas etiquetas, aparecern los atributos de la etiqueta y sus valores.

Fig. 2. Icono timn.

Modificacin del Diseo

Luego modificaremos algunas etiquetas: En la vista de cdigo, aparece la etiqueta body del cdigo CSS. body { font: 100%/1.4 Verdana, Arial, Helvetica, sansserif; background: #42413C; margin: 0; padding: 0; color: #000; } En el modificars:Times New Roman, Times, serif con el se cambiaran todos los textos.

Importante: Algunos de estos Atributos no son conveniente modificar, dado que tal, estn destinado a compatibilizar la pgina a ciertos Navegadores.

Cambiando el color de fondo

Fondo de la barra izquierda, ubicada en la etiqueta sidebar1 (ubicado en la zona de cdigo) .sidebar1 { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px; } Esa modificacin se puede realizar con el atributo background. Tambin puedes cambiar el fondo de las etiquetas: .footer (el pie de la pagina), sidebar1 (columna de la izquierda) y .header (columna superior). .

Colores en Hexadecimal
Aqu tienes los colores en hexamedecimal, estos los puedes implementar para las posibles combinaciones de los fondos de la pgina.

Agregar propiedades a tu pgina

Uno de las caractersticas del CSS que es ms valorada por los diseadores, es la flexibilidad. El diseador puede establecer una fuente por defecto (al igual que otros atributos). Ejemplo: h1 { color: #060; } h2 { Importante: color: #00C; Esto se agregara, } en la vista de cdigo, body,td,th { justo antes del body font-family: "Times New Roman", Times, serif; }

Enlazar a otras paginas

Debes crear las paginas que deseas enlazar, guardarlas en todas en una misma carpeta, para luego acceder a cada una de ellas. Para vincular los archivos debes seguir los siguientes pasos: 1. Dar clic en la palabra vinculo (Fig. 3).

Fig. 3. Cdigo que contiene las divisiones para los vnculos.

9

Enlazar a otras paginas

2. Dar clic en cuadro propiedades, especificamente vinculo, justo donde se ubica la imagen de una carpeta y luego buscar la direccin del enlace (Fig. 4).

Fig. 4. Panel de propiedades.

10