Práctica N° 4 – Dreamweaver

Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
Práctica N° 4 – Dreamweaver
La práctica consiste en incorporar un Slider, con el uso de la versión gratuita del Software WOW Slider.
Además hacer los vínculos, trabajar con estilos, tablas e imágenes.
1. Elabore una estructura de carpetas, en el lugar que usted destina en su equipo, para almacenar las
prácticas:
practica-4
css
images
2. Descargue las imágenes para la práctica, del sitio web profemaria.com.
3. Descargue e instale el programa WOW Slider.
4. Realice un Slider con el programa, siga la instrucción de la docente o ayúdese con la guía que se da a
continuación. El slider debe almacenarse en la carpeta practica-4.
a) Abra el programa WOW Slider.
b) Agregue las imágenes que se utilizarán para el slider (1-11).
c) Coloque un título a cada imagen.
1
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
d) Para más opciones clic en
e) El tamaño es 960px X 300px.
f) Elija la plantilla, efecto, fuente y otro que desee.
g) Clic en publicar
h) Clic en navegar para buscar la carpeta practica-4
Clic en
Verás como el navegador abre un ejemplo de página con el Slider, además, esta página
tiene las instrucciones para insertar el Slider. (en nuestro caso, lo haremos en index).
i)
j)
5. Diríjase a Dreamweaver y cree un nuevo sitio.
6. Abra un nuevo documento HTML en Dreamweaver, guárdelo con el nombre index.
7. Inserte una tabla: 5 filas, 1 columna, 960 px de ancho y grosor de del borde en cero. Centre la tabla.
a) En la primera fila, inserte la imagen encabezado. Texto alternativo: Zapatos exclusivos.
8. En la segunda fila colocamos el slider, para lo cual:
a) Nos dirigimos a la página web que nos abrió WOW Slider (la que tiene el ejemplo).
b) Seleccionamos el código que se encuentra en Header y con clic derecho los copiamos.
c) En Dreamweaver, vamos a la vista Dividir, para tener el código de un lado y el diseño de la
página del otro lado.
2
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
d) En la parte del código buscamos la sección <header> </header> y pegamos el código en medio
de estas etiquetas.
e)
En parte del diseño, colocamos el cursor en la segunda fila, para que en la parte del
código se ubique automáticamente. Ahí pegaremos el siguiente código.
9. Cambiar a la vista diseño.
10. La tercera fila, dividirla en cuatro columnas. Para colocar ahí las opciones de los vínculos (Inicio,
Nosotros, Galería, Contacto)
11. Apliquemos formato a las opciones (estilos CSS)



Seleccionar los textos.
Inspector de propiedades  sección CSS  clic en el botón de centrar
Mostrará la ventana para crear estilos
3
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
I

o 1- En tipo de selector  elija clase.
o 2- En nombre del selector  escriba titulos-tabla (sin tildar, en minúscula, sin espacio)
o 3- En definición de regla  seleccione nuevo archivo de hojas de estilos. (style , son los
estilos del slider)
Luego presionar Aceptar  aparecerá la siguiente ventana para guardar los estilos:


1- Debes abrir la carpeta css (doble clic en la carpeta CSS)
2- En nombre del archivo escribes: estilos, luego clic en guardar. (Lo anterior se hace para
almacenar el código de los estilos en un archivo separado dentro de la carpeta css)
4
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
12. Cambie las propiedades de la página: inspector de propiedades  propiedades de la página.
 Márgenes: 25 px (para cada uno)
13. Coloque como título a la página: Zapatos Exclusivos.
14. Ubicarse en la última celda. Escribir lo siguiente: Todos los derechos reservados. Prohibida la
reproducción total o parcial de los contenidos de este sitio sin la autorización expresa de Zapatos
Exclusivos de Costa Rica.
a) Seleccionar el texto
b) Inspector de propiedades  sección CSS  en regla de destino  clic en Nueva Regla
CSS.
c) Elegir fuente: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
En la ventana que aparece:
1- En tipo de selector  elija ID.
2- En nombre del selector  escriba pie
3- En definición de regla  seleccione estilos.css
Además, elija estas opciones para el estilo:
Tamaño: 12px;
color: #CCC;
Negrita;
15. Rellene el fondo de la celda, donde está el pie, de color negro.
16. Guarde los cambios.
17. Duplique las páginas. (nosotros, galeria, contacto)
Personalice cada una de las páginas (lo hará en la cuarta fila)
Index
1. Inserte una tabla de 1 fila y 4 columnas. Centre la tabla. Escriba el texto e inserte la imagen que se
indica.
Zapatos Exclusivos,
es una línea que
importa sus productos
index-1
index-2
index-3
desde Europa. Todos
son diseños pensados
para usted.
2. Para el texto que se escribió cree el estilo clase: parrafo (este se utilizará para las demás páginas):
 Fuente: Georgia, "Times New Roman", Times, serif;
 color: #900;
 Tamaño: 12px;
5
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
Nosotros
1. Digite el texto: Nacimos en 1980. En los inicios de Zapatos Exclusivos, sólo teníamos líneas para
Damas, posteriormente en el año de 1998, ingresamos productos para caballero y a partir del año 2005,
incursionamos con buen suceso en zapatos para niños.
2. Coloque el cursor al inicio del texto, inserte la imagen nosotros, clic derecho encima de la imagen 
alinear  izquierda.
Galería
1. Inserte una tabla de 3 filas y 2 columnas. Centre la tabla. Inserte las imágenes que se indican.
galeria-1
galeria-3
galeria-5
galeria-2
galeria-4
galeria-6
Contacto
1. Inserte una tabla de 1 fila y 2 columnas. Centre la tabla. Inserte las imágenes que se indican.
contacto
Contáctenos
Correo: info@zapatosexclusivos.cr
Teléfono: (506) - 2224-4560
Escazú. Plaza Real Site
Costa Rica
6