Dreamweaver
Clase IV
APUNTES
DE
DREAMWEAVER
CLASE VI
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
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)
copiar
Producto1
del
celda
el
texto
Dreamweaver
Clase IV
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:
novedades1, novedades2 y novedades 3 del archivo
textos_para_copiar.txt. Ver modelo terminado
3
Dreamweaver
Clase IV
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:
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).
4
Dreamweaver
Clase IV
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
vínculo escribir: mailto:
[email protected].
correo, en
5
Dreamweaver
Clase IV
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.
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.
6
Dreamweaver
Clase IV
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
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:
7
Dreamweaver
Clase IV
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
9
Comentarios de: APUNTES DE DREAMWEAVER - CLASE VI (0)
No hay comentarios