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