PDF de programación - 1.8 Uso de plantillas

Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0

59



1.8 Uso de plantillas



Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0

60


8. Uso de plantillas


1.8.1 ¿Para qué sirve una plantilla?

Una plantilla HTML se utiliza como base para crear varias páginas con un diseño similar pero
con distinto contenido. Un administrador de la web puede diseñar las plantillas propias de su
sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseño de
páginas HTML. De esta forma se asegura cierta uniformidad en las páginas de un sitio web.


1.8.2 Crear una plantilla

En este ejemplo vamos a crear una plantilla que nos permita diseñar webquests para nuestros
alumnos con sólo rellenar sus áreas editables.


1. Antes de comenzar la práctica en sí, utiliza el explorador de archivos para crear una

subcarpeta de nombre plantillas dentro de miweb.

2. Abre Kompozer y selecciona Archivo > Nuevo.
3. En el cuadro de diálogo Crear un nuevo documento o plantilla activa la opción Una

plantilla vacía y pulsa en el botón Crear.



4. Pulsa 3-4 veces la tecla <enter> y luego haz clic para situar el cursor en la primera

línea de la página.

5. Selecciona Insertar > Plantillas > Insertar área editable.
6. Se muestra el cuadro Insertar un área editable. En Nombre de área introduce la
palabra Título, en Tipo de área selecciona Bloque (si eliges texto fluido el área
tendrá una anchura expandible en función del texto que se va introduciendo). Clic en
el botón Aceptar.



Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0



61



7. Selecciona el texto que aparece en la caja Titulo y en la lista desplegable de

formatos selecciona Título 1 para este párrafo

8. Repite los pasos 5 y 6 para crear las siguientes áreas editables: Subtítulo, Edades,
Introducción, Tarea, Proceso, Recursos, Evaluación, Conclusión y Créditos. Puedes
introducir en cada caja uno o varios <enter> para definir su altura.

9. Sitúate en la última línea y teclea el año y denominación de tu centro de trabajo.

Este texto no será editable.


Nota:
Sobre esta página se pueden definir párrafos fijos o áreas editables con distintos formatos.
Incluso se pueden insertar imágenes, color de fondo, etc como si se tratase de una página
HTML normal.


10. Selecciona Archivo > Guardar.
11. En el cuadro de diálogo Título de la página NO es conveniente introducir título

porque se trata de una plantilla. Pulsa en el botón Aceptar.

12. Se muestra la ventana Guardar página como.



Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0



62



13. En la lista desplegable Guardar en selecciona la carpeta plantillas. En Nombre
introduce, por ejemplo, miplantilla.mzt . Recuerda que Kompozer utiliza la
extensión de archivo *.mzt para guardar plantillas HTML de los documentos.

14. Para cerrar la plantilla elige Archivo > Cerrar o bien pulsa en el icono con forma de X

en rojo que aparece en la esquina superior derecha del documento.

Un nuevo documento basado en una plantilla

3. Pulsa el botón Elegir archivo … y elige la plantilla anteriormente creada.
4. Clic en el botón Crear.



1.8.3 Crear una página HTML a partir de una plantilla


1. Elige Archivo > Nuevo
2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción

Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0

63



5. En la nueva página sustituye el texto de las áreas editables por el texto definitivo.
Observa que cada área es extensible hacia abajo para alojar el texto o imágenes que
se deseen insertar. Por otra parte el pie con la identificación del centro no se puede
editar al no haberse incluido en un área editable durante el diseño de la plantilla
original.

6. Elige Archivo > Guardar como
7. En el cuadro Título de la página introduce el título de la página. Será el texto que
aparecerá en la barra de título del navegador web cuando se navegue por la página.
Por ejemplo: “Mi primer webquest”. Clic en el botón Aceptar.

8. En el cuadro Guardar página como selecciona la carpeta miweb e introduce como

Nombre: webquest.html. Clic en el botón Guardar.







Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0



Notas:

•

64



9. Para visualizar el aspecto final de esta página pulsa en el botón Navegar situado en la
barra de herramientas de Redacción. (Este botón sólo funciona si tienes instalado
Firefox como navegador por defecto. Esta opción se configura abriendo Firefox y
seleccionando Herramientas > Opciones > Principal > Valores predeterminados del
sistema).

10. Cuando se visualiza una página web basada en una plantilla no se visualizan las

etiquetas de las áreas editables.



Si durante la edición de un documento HTML deseas separar un documento de la
plantilla a partir de la cual se ha creado selecciona Editar > Separar de la plantilla.
• Cualquier modificación posterior de la plantilla NO afecta a las páginas creadas con

• Es posible transformar una página HTML en una plantilla selecciona Formato > Título

y propiedades de la página. En el cuadro de diálogo Propiedades de la página la
opción Plantillas > Esta página es una plantilla

anterioridad.



Páginas web ::: Uso de plantillas
Diseño de materiales multimedia. Web 2.0



65