Dream Weaver Clase Iii Teoria

APUNTES DE

DREAMWEAVER CLASE III

PROF. VIVIANA LLORET

http://aulamatic.blogspot.com

1

DREAMWEAVER – CLASE III En esta clase aprenderemos a realizar un index.html utilizando tablas, insertar una película Flash, transformar una lista en lista desordenada (colocándole viñetas),insertar tablas dentro de otra, combinar y dividir celdas , cambiar color de fondo de la página, de la tabla, vínculo correo electrónico. Para comenzar crea un sitio, computacionxls_apellido, el cual tendrá cuatro páginas, la primera guárdala con el nombre index.html, la segunda producto.html, la tercera novedades.html, y la cuarta contacto.html. En esta clase trabajaremos solo con la página inicial (index.html). (Ver modelo terminado). PUNTO 0 1. Título del documento: COMPUTACIONXLS 2. guardarlo como index.html 3. Fondo color del documento: #333333 4. Crear una tabla principal de 1 columna, 1 fila, 600 px de ancho y alineación centrado. 5. Crear una tabla adentro de la tabla principal que tenga 8 filas y una columna Para 1. Clic en PROPIEDADES DE LA PAGINA > Categoría >TítuloCodificación: Computacionxls. Para 3. Clic en PROPIEDADES DE LA PAGINA > Categoría >Aspecto>Color de fondo: #333333 Para 4. Clic en Insertar >Tabla , definir cantidad filas, columnas, ancho (en pixeles), para alineación: Seleccionar tabla > Alinear :Centro

Para 5: Colocar el cursor dentro de la tabla: Clic en Insertar > Tabla…. PUNTO 1: Crear la hoja de estilo externa, cuyo nombre es: estilos1.css y vincularla con index.html Los elementos son: 2

.textos: Arial, 12px, color: #666666; .titulo: Arial, 16px, negrita, color: #FF0000 Para crear una hoja de estilo externa (es un archivo que contiene varios estilos creados por nosotros para formatear, títulos, textos, etc) , clic en Texto > Estilos css > Nuevo

Al aceptar se abre una nueva ventana donde escribimos el nombre del estilo: estilos1.css

3

FILA 1: 1. Crear tabla de 5 columnas y 1 fila. Insertar ahí adentro la imagen del logo (logo.jpg) e insertar las imágenes: bt_quienes.jpg, bt_quienes2.jpg, bt_producto.jpg, bt_producto 2.jpg, bt_novedades.jpg, bt_novedades 2.jpg, bt_contacto.jpg, bt_contacto 2.jpg. Aplicar efecto de Rollover a las imágenes. 2. Vinculaciones de cada botón. Estas se abrirán en una nueva ventana. BOTON QUIENES: quienes.html BOTON PRODUCTOS: productos.html BOTON NOVEDADES: novedades.html BOTON CONTACTO: contacto.html

Al hacer clic en Guardar, se abre una nueva ventana, donde seleccionamos el formato pedido,

Para crear el segundo estilo repetir los pasos y donde dice definir en: dejar estilos1.css. Para vincular la hoja de estilo a nuestra página: Texto > Estilo CSS > Adjuntar Hoja de Estilo, Clic en examinar, seleccionar estilos1.css.

4

PUNTO 2: FILA 1: 1.

Crear tabla de 5 columnas y 1 fila. Insertar ahí adentro la imagen del logo (sm_logo1) e insertar las imágenes: bt_quienes.jpg, bt_quienes2.jpg, bt_producto.jpg, bt_producto 2.jpg, bt_novedades.jpg, bt_novedades 2.jpg, bt_contacto.jpg, bt_contacto 2.jpg. Aplicar efecto de Rollover a las imágenes.

2. Vinculaciones de cada botón. Estas se abrirán en una nueva ventana. BOTON QUIENES: quienes.html BOTON PRODUCTOS: productos.html BOTON NOVEDADES: novedades.html BOTON CONTACTO: contacto.html Para ello: Insertar > Objeto de imagen > Imagen de sustitución: FILA 2: 1. Crear una tabla de 2 columnas y 1 fila. Insertar ahí adentro la animación. 2. Armar el contenido según el modelo, se puede insertar o eliminar tablas, combinar filas y celdas, colores, utilizar vista estándar y vista de disposición, tamaño de las tablas en píxeles o en porcentajes. 3. Aplicar estilos Para 1. Insertar animación: Clic en Flash, Seleccionar banner.swf.

5

FILA 4: Crear una tabla de 10 columnas y 1 fila. Armar el contenido según el modelo, se puede insertar o eliminar tablas, combinar filas y celdas, colores, utilizar vista estándar y vista de disposición, tamaño de las tablas en píxeles o en porcentajes. 3. Insertar las imágenes: 1.jpg, 2.jpg y 3.jpg 4. Aplicar estilos. 5. Aplicar 2 Vínculos. Todas las vinculaciones son en una ventana nueva. 1. 2.

Para 5. Cuando el vínculo es a una página web se debe especificar

6

http://www.ciudad.com.ar/, (es una dirección absoluta), en cambio, cuando es a una página del mismo sitio, solo se escribe nombreCarpeta_nombrePagina.(es una dirección relativa).

FILA 6: 1. Crear una tabla de 3 columnas y 1 fila. 2. Armar el contenido según el modelo, se puede insertar o eliminar tablas, combinar filas y celdas, colores, utilizar vista estándar y vista de disposición, tamaño de las tablas en píxeles o en porcentajes. 3. Insertar la imagen: img03.jpg 4. Aplicar estilos. FILA8: Vínculo correo electrónico: maito:[email protected]

7

Modelo terminado (Volver)

8

9