DREAMWEAVER CLASE IV
of 9
-
Upload
vivianalloret -
Category
Documents
-
view
222 -
download
0
Transcript of DREAMWEAVER CLASE IV
-
8/14/2019 DREAMWEAVER CLASE IV
1/9
Dreamweaver Clase IV Prof. Viviana Lloret
APUNTES
DE
DREAMWEAVER
CLASE VI
PROF. VIVIANA LLORET
http://aulamatic.blogspot.com
1
http://aulamatic.blogspot.com/http://aulamatic.blogspot.com/ -
8/14/2019 DREAMWEAVER CLASE IV
2/9
DREAMWEAVER CLASE IV
En la presente clase se disear las pginas PRODUCTO, NOVEDADESy CONTACTO, correspondientes al sitio COMPUTACIONXLS.Para crear la pgina PRODUCTO insertar una tabla de 7 filas y 1
columna, ancho 600 pxeles, centrada, color de fondo: blanco. Elcolor de fondo de toda la pgina es #666666, ttulo de la pginaProducto (Propiedades de la pgina > Ttulo-Codificacin: Producto).En la primer fila copiar la primer fila de la tabla que figura en lapgina 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 COMPUTACINXLS encuentre todas los productos para Puntos de Venta disponiblesde las marcas ms 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 endividir).Hacer lo mismo con la sexta y sptima fila.
En la quinta fila, primer celda insertar la imagen compu1.jpg, en lasegunda celda copiar el texto Producto1 del archivo
texto_para_copiar.txt.En la sexta fila primera celda copiar el texto producto2 (del archivoanterior) e insertar en la segunda celda la imagen compu2.jpg.En la sptima fila, primer celda insertar la imagen imp3.jpg y en lasegunda celda el texto producto3.Aplicar a toda la tabla un espaciadode celda de 5.(Modelo terminado)
Dividir filas
-
8/14/2019 DREAMWEAVER CLASE IV
3/9
Dreamweaver Clase IV Prof. Viviana Lloret
Pgina producto.html
Para crear la pgina novedades.html insertar una tabla de 5 filas, 2columnas, de 600 pxeles, centrada, color de fondo: blanco, borde 0,espaciado celda 5. Color de fondo de la pgina #666666.En la primer fila copiar la primer fila de tabla que figura en laspginas anteriores (la del logo y los botones).En la segunda se ha insertado un texto flash con la leyendaNOVEDADES, Se han insertado las imgenes novedades.jpg,
novedades2.jpg y novedades3.jpg, y se han copiado los textos:
3
-
8/14/2019 DREAMWEAVER CLASE IV
4/9
Dreamweaver Clase IV Prof. Viviana Lloret
novedades1, novedades2 y novedades 3 del archivotextos_para_copiar.txt. Ver modelo terminado
Pgina contacto.html: Para crear la pgina CONTACTO insertar unatabla de 3 filas, 1 columnas, de 600 pxeles, centrada, color de fondo:
4
-
8/14/2019 DREAMWEAVER CLASE IV
5/9
Dreamweaver Clase IV Prof. Viviana Lloret
blanco, borde 0, espaciado celda 5. Color de fondo de la pgina#666666.En la primer fila copiar la primer fila de la tabla que figura en laspginas 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 [email protected], mediante el cual, al hacer clic en l seabre el Outlook Express.
Un mapa de imagen es una zona que se crea sobre una imagen, conlos botones destacados en la imagen superior, para asignarle algncomportamiento, en este caso, se le ha dado un vnculo a correo
electrnico. Para ello una vez insertada la imagen (centrada), se haceclic en Herramienta zona interactiva rectangulary se dibuja un rectngulo sobre la direccin de correo, envnculo escribir: mailto:[email protected].
5
mailto:[email protected]:[email protected]:[email protected]:[email protected] -
8/14/2019 DREAMWEAVER CLASE IV
6/9
Dreamweaver Clase IV Prof. Viviana Lloret
En la tercera fila se ha insertado un formulario: Insertar >Formulario> Formulario. Se dibujar un rectngulo en rojo. Dentro del se insert una tabla de 6 filas, 2 columnas; ancho 80 (enporcentajes), borde 0, centrada, color #CCCCCC, donde se insertaronlos distintos elementos que conforman el formulario: campo de texto,campo de texto contrasea, botones de opcin, lista /men, campode texto (varias lneas) 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, paraello: Insertar > Formulario > Campo de texto. Seleccionar dichocuadro, y en propiedades escribir: Nombre: nombre, Car. Mx: 50(Cantidad de caracteres mximo), Tipo: una lnea.
En la segunda fila, primera columna escribir Contrasea, y en lasegunda columna Insertar > Campo de texto, en Nombre:contrasea, Car. Mx: 10 (Cantidad de caracteres mximo), Tipo:contrasea.
6
-
8/14/2019 DREAMWEAVER CLASE IV
7/9
Dreamweaver Clase IV Prof. Viviana Lloret
Para sexo, utilizamos Grupo de opcin, (Ver imagen pginasiguiente): Hacemos clic en Opcin (debajo de Label) y escribimosfemenino, en el siguiente masculino, ACEPTAR.
Modificamos sus propiedades, como indica la siguiente imagen
Para pas utilizamos un Men: Insertar>Formulario > Lista/Men >ACEPTAR. Seleccionamos el control y aparece la siguiente ventana depropiedades: Clic en Valores de Lista:
Haciendo clic en el signo + de la nueva ventana agregamos los
Escribimos femenino
Escribimos masculino
7
-
8/14/2019 DREAMWEAVER CLASE IV
8/9
Dreamweaver Clase IV Prof. Viviana Lloret
elementos de la lista, en este caso los nombres de los pases.En la quinta fila escribir Comentario, e insertar cuadro de texto, Tipo:varias lneas, Lneas 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 yRestablecer, para ello: Insertar > Formulario > botn, enpropiedades, donde dice Accin tipear la opcin Enviar Formulario yRestablecer Formulario respectivamente. (Ver pgina terminada)
8
-
8/14/2019 DREAMWEAVER CLASE IV
9/9
Dreamweaver Clase IV Prof. Viviana Lloret
9
