PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB

Transcripción

1 PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB Las plantillas son herramientas de las que disponemos para crear un formato determinado para que todas las páginas tengan unas características similares, de forma que lo único que tengamos que cambiar sea su contenido. Ejercicio 1. Diseña un plantilla Web con Nvu siguiendo los pasos especificados en esta práctica. Utiliza las imágenes correspondientes a esta práctica núm. 3), que puedes descargar de cada uno de los enlaces que se facilitan en el blog de de informática. La plantilla debe tener este aspecto final: PASOS A SEGUIR 1. Crea una carpeta en tu disco externo con el nombre plantilla. En esta carpeta guardarás el archivo que contiene tu plantilla Web. Crea una nueva carpeta dentro de la carpeta plantilla, con el nombre imagenes. En esta última carpeta debes introducir las imágenes que contiene la practica número 3 que se supone que has descargado previamente. 2. Una vez iniciado el programa, abre el menú Archivo y selecciona la opción Nuevo. Activa la opción Una plantilla vacía. Guarda la plantilla con el nombre miplantilla dentro de la carpeta plantilla que has creado (utiliza el menú Archivo > Guardar como). 3. Inserta una tabla de 16 filas y 2 columnas, con una anchura del 100% de la ventana y un borde de 0. El resto de parámetros déjalos con la configuración por defecto. 1

2 4. Accede al menú Tabla > Propiedades de la tabla y aplica la siguiente configuración: 5. Une las dos columnas de la primera fila. Para realizar este operación, selecciona ambas columnas, según muestra la figura: Accede al menú Tabla > Unir celdas seleccionadas. Obtendrás un resultado como el de la figura: 2

3 6. Aplica los mismos pasos del punto 5 a las filas de la 3 a la 15 de la columna 2. Una vez unidas las celdas, obtendrás un resultado como el de la figura: Ya tienes definida la estructura de tu plantilla, el siguiente paso consiste en aplicar las medidas a las celdas de la tabla que componen tu plantilla. 7. Para modificar las propiedades de una celda haz doble clic sobre ésta, se abrirá un cuadro de dialogo como el de la figura: 3

4 Para facilitar la identificación de las filas y las columnas a partir de ahora se hará referencia a éstas mediante el nombre que se les aplica en la siguiente figura: 8. Aplica la siguiente configuración a cada una de las celdas. Tamaño Alineación del contenido Celda Altura (píxel) Anchura (píxel) Vertical Horizontal Carátula Superior Izquierda Carátula Superior Izquierda Carátula Superior Izquierda Hueco Superior Izquierda Menú 1 hasta Superior Izquierda Menú 11 Hueco Superior Izquierda Base Superior Izquierda Base Superior Izquierda V. Contenido Superior Izquierda 4

5 Nota: debes aplicar la configuración especificada a todas las celdas manualmente, aunque el programa en algunas de ellas la aplique de forma automática. Una vez aplicada la configuración a cada una de las celdas, obtendrás un resultado similar al de la figura: 9. Aplica un color de fondo gris claro (rojo:246; verde:246; azul: 246) a las celdas Hueco 2, Base 1 y Base Inserta la siguiente línea de texto en la celda Base 2: Curso 2008/2009. Plantilla diseñada por Nombre del diseñador Web 11. Inserta las imágenes que has guardado en la carpeta imágenes en cada una de las celdas de tu plantilla. Fíjate que el nombre y tamaño de cada imagen coincide con el nombre y tamaño asignado a cada una de las celdas 5

6 en las que tienes que insertar dichas imágenes. Para insertar las imágenes en las celdas procede tal y como aprendiste en la práctica 2. Obtendrás un resultado como el de la figura: 12. Guarda los cambio de tu plantilla. 13. Para crear una página Web a partir de la plantilla creada, una vez que inicias Nvu, en el menú Archivo > Nuevo, debes activar la pestaña Un nuevo documento basado en una plantilla. Se activará el cuadro de dialogo que te permite establecer la ruta en la que se encuentra dicha plantilla. Una vez abierto el archivo, haz clic en crear. 14. Ya puedes comenzar a introducir contenido en tu página Web. 6