Práctica N° 3 – Dreamweaver

Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
Práctica N° 3 – Dreamweaver
La práctica consiste en repasar lo visto en las prácticas anteriores en cuanto a la creación de sitios,
inserción de imágenes, tablas. Además incorpora la creación de estilos y modificación de propiedades
de página.
1. Elabore una estructura de carpetas, en el lugar que usted destina en su equipo, para almacenar las
prácticas, copiar la imagen acuario en la carpeta de images:
practica-3
css
images
2. Diríjase a Dreamweaver y cree un nuevo sitio.
3. Abra un nuevo documento HTML en Dreamweaver
4. Coloque un título a la página: Acuario el Colosal
Nota: Coloque siempre un título a todas las páginas que realice.
5. Guarde la página con el nombre index (este es el nombre que se utiliza para la primer página de un
sitio, es decir la página inicial)
6. Volviendo a la página, escriba
Acuario el Colosal
7. Ahora, apliquemos formato al Título (estilos CSS)



Seleccionar el texto.
Clic derecho  estilos CSS  Nuevo
Nota: también podemos ir al inspector de propiedades  sección CSS  en regla de destino <nueva
regla CSS>
1
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver

o 1- En tipo de selector  elija clase.
o 2- En nombre del selector  escriba titulos (sin tildar, en minúscula)
o 3- En definición de regla  seleccione nuevo archivo de hojas de estilos.
Luego presionar Aceptar  aparecerá la siguiente ventana para guardar los estilos:

1- Debes abrir la carpeta css (doble clic en la carpeta CSS)
2
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver

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)
Luego seleccione las siguientes opciones:
o Font-family: Georgia, Times New Roman, Times, serif
o Font-weight: bold
o Font-size: 36pt
o color: 3300CC
o en la sección Bloque, text-align: center
Nota: en caso de no aplicarse el estilo, debes ir al inspector de propiedades  en la sección CSS  en
regla de destino  elegir: .titulos (teniendo el texto Acuario el colosal seleccionado).
8. Insertar  tabla (Ctrl + Alt + T). con las siguientes características:


Centre la tabla.
Combinar las tres filas.
3
Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver

Ubíquese en la segunda fila y divídala en cinco celdas: clic derecho  tabla  elija columnas
 coloque el número 5.
9. Insertar la imagen del acuario en la primera fila  menú insertar  imagen  abrir la carpeta images,
luego elegir la imagen encabezado.
Aparecerá la siguiente ventana (escribe siempre un texto alternativo para las imágenes)
10. En la segunda fila escriba lo siguiente en cada celda:
Centre los textos.
11. Realice los hipervínculos
a Seleccione la opción del menú, ejemplo: Inicio
b En el inspector de propiedades  sección HTML  en la opción vínculo  escriba el nombre
de la página index.html
c Recuerde que para las demás páginas debe hacer también el vínculo, las páginas se enlistan
seguidamente:
nosotros.html
tours.html paquetes.html
contacto.html
12. Cambie las propiedades de la página: inspector de propiedades  propiedades de la página.
 Color de fondo: 99CCFF
 Márgenes: 25 px (para cada uno)
13. Guarde los cambios (Archivo  guardar (ctrl + S)). Duplique las páginas (archivo guardar como
(Ctrl + Shift + S)): nosotros, tours, paquetes, contacto.
14. Coloque para cada página una imagen o texto que las diferencia.
15. Guarde todo y verifique los hipervínculos.
4