Dreamweaver Clase Iv

Dreamweaver

Clase IV

Prof. Viviana Lloret

APUNTES DE

DREAMWEAVER CLASE VI

PROF. VIVIANA LLORET

http://aulamatic.blogspot.com

1

DREAMWEAVER CLASE IV En la presente clase se diseñará las páginas PRODUCTO, NOVEDADES y CONTACTO, correspondientes al sitio COMPUTACIONXLS. Para crear la página PRODUCTO insertar una tabla de 7 filas y 1 columna, ancho 600 píxeles, centrada, color de fondo: blanco. El color de fondo de toda la página es #666666, título de la página Producto (Propiedades de la página > Título-Codificación: Producto). En la primer fila copiar la primer fila de la tabla que figura en la página index (la que contiene el logo y los botones Quienes, Producto, Novedades y contacto). En la tercera fila insertar como texto flash la palabra Producto. En la cuarta fila copiar centrado el texto: “Ahora en COMPUTACIÓN XLS encuentre todas los productos para Puntos de Venta disponibles de las marcas más importantes del mercado, con la seguridad y confianza de estar trabajando con un DISTRIBUIDOR AUTORIZADO. Estos son algunos de los productos que le ofrecemos:” Dividir la quinta fila en dos columnas (Seleccionar la fila clic en dividir).Hacer lo mismo con la sexta y séptima fila.

Dividir filas En la quinta fila, primer celda insertar la imagen compu1.jpg, en la segunda celda copiar el texto Producto1 del archivo texto_para_copiar.txt. En la sexta fila primera celda copiar el texto producto2 (del archivo anterior) e insertar en la segunda celda la imagen compu2.jpg. En la séptima fila, primer celda insertar la imagen imp3.jpg y en la segunda celda el texto producto3.Aplicar a toda la tabla un espaciado de celda de 5.(Modelo terminado)

Dreamweaver

Clase IV

Prof. Viviana Lloret

Página producto.html

Para crear la página novedades.html insertar una tabla de 5 filas, 2 columnas, de 600 píxeles, centrada, color de fondo: blanco, borde 0, espaciado celda 5. Color de fondo de la página #666666. En la primer fila copiar la primer fila de tabla que figura en las páginas anteriores (la del logo y los botones). En la segunda se ha insertado un texto flash con la leyenda NOVEDADES, Se han insertado las imágenes novedades.jpg, novedades2.jpg y novedades3.jpg, y se han copiado los textos:

3

Dreamweaver

Clase IV

Prof. Viviana Lloret

novedades1, novedades2 y novedades 3 del archivo textos_para_copiar.txt. Ver modelo terminado Página contacto.html: Para crear la página CONTACTO insertar una tabla de 3 filas, 1 columnas, de 600 píxeles, centrada, color de fondo:

4

Dreamweaver

Clase IV

Prof. Viviana Lloret

blanco, borde 0, espaciado celda 5. Color de fondo de la página #666666. En la primer fila copiar la primer fila de la tabla que figura en las páginas anteriores (la del logo y los botones). En la segunda se ha insertado una imagen: contactos.jpg, y en la misma se ha creado un mapa de imagen, sobre el texto [email protected], mediante el cual, al hacer clic en él se abre el Outlook Express.

Un mapa de imagen es una zona que se crea sobre una imagen, con los botones destacados en la imagen superior, para asignarle algún comportamiento, en este caso, se le ha dado un vínculo a correo electrónico. Para ello una vez insertada la imagen (centrada), se hace clic en Herramienta zona interactiva rectangular y se dibuja un rectángulo sobre la dirección de correo, en vínculo escribir: mailto:[email protected].

5

Dreamweaver

Clase IV

Prof. Viviana Lloret

En la tercera fila se ha insertado un formulario: Insertar > Formulario> Formulario. Se dibujará un rectángulo en rojo. Dentro de él se insertó una tabla de 6 filas, 2 columnas; ancho 80 (en porcentajes), borde 0, centrada, color #CCCCCC, donde se insertaron los distintos elementos que conforman el formulario: campo de texto, campo de texto contraseña, botones de opción, lista /menú, campo de texto (varias líneas) y botones Enviar y Restablecer. En la primera celda de la tabla escribir: Nombre de usuario, en la segunda celda de la primera fila insertar un cuadro de texto, para ello: Insertar > Formulario > Campo de texto. Seleccionar dicho cuadro, y en propiedades escribir: Nombre: nombre, Car. Máx: 50 (Cantidad de caracteres máximo), Tipo: una línea.

En la segunda fila, primera columna escribir Contraseña, y en la segunda columna Insertar > Campo de texto, en Nombre: contraseña, Car. Máx: 10 (Cantidad de caracteres máximo), Tipo: contraseña.

6

Dreamweaver

Clase IV

Prof. Viviana Lloret

Para sexo, utilizamos Grupo de opción, (Ver imagen página siguiente): Hacemos clic en Opción (debajo de Label) y escribimos femenino, en el siguiente masculino, ACEPTAR.

Escribimos femenino Escribimos masculino

Modificamos sus propiedades, como indica la siguiente imagen

Para país utilizamos un Menú: Insertar>Formulario > Lista/Menú > ACEPTAR. Seleccionamos el control y aparece la siguiente ventana de propiedades: Clic en Valores de Lista: Haciendo clic en el signo + de la nueva ventana agregamos los

7

Dreamweaver

Clase IV

Prof. Viviana Lloret

elementos de la lista, en este caso los nombres de los países. En la quinta fila escribir Comentario, e insertar cuadro de texto, Tipo: varias líneas, Líneas num.: 6, Valor inicial: Haga aquí su comentario. Observa como se han modificado sus propiedades:

Por último se agregó en la fila inferior los botones Enviar y Restablecer, para ello: Insertar > Formulario > botón, en propiedades, donde dice Acción tipear la opción Enviar Formulario y Restablecer Formulario respectivamente. (Ver página terminada)

8

Dreamweaver

Clase IV

Prof. Viviana Lloret

9