DTO. TECNOLOGÍA INFORMÁTICA

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

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

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.

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:

última carpeta debes introducir las imágenes que contiene la practicanúmero 3 que se supone que has descargado previamente.

DTO. TECNOLOGÍA INFORMÁTICA

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:

DTO. TECNOLOGÍA INFORMÁTICA

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:

DTO. TECNOLOGÍA INFORMÁTICA

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 1 150 977 Superior Izquierda Carátula 2 30 807 Superior Izquierda Carátula 3 30 170 Superior Izquierda Hueco 1 2 170 Superior Izquierda

Menú 1 hasta Menú 11

30 170 Superior Izquierda

Hueco 2 368 170 Superior Izquierda Base 1 25 170 Superior Izquierda Base 2 25 807 Superior Izquierda

V. Contenido 700 807 Superior Izquierda

DTO. TECNOLOGÍA INFORMÁTICA

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 2.

10. Inserta la siguiente línea de texto en la celda Base 2:

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

Curso 2008/2009. Plantilla diseñada por “Nombre del diseñador Web”

DTO. TECNOLOGÍA INFORMÁTICA

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:

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.

12. Guarda los cambio de tu plantilla.

14. Ya puedes comenzar a introducir contenido en tu página Web.