Ejercicio 1.4: Diseñar el aspecto y funcionamiento del sitio Web

Mostrar

Antes de empezar a diseñar el sitio Web, debe realizar el Ejercicio 1.3: Llenar el sitio Web con páginas Web.

Como unidad, las páginas Web que forman un sitio Web deben tener un diseño visual similar. Las páginas individuales deben aparecer relacionadas a fin de que el sitio Web sea cohesivo. Una buena práctica consiste en empezar un proyecto pensando primero en el diseño del sitio Web y, a continuación, crear las páginas Web individuales. De lo contrario, puede obtener un sitio Web formado por varias páginas desunidas sin organización ni relación visual aparente.

La mejor forma de crear un aspecto común para el sitio Web consiste en utilizar una plantilla de página. Una plantilla de página es un solo archivo que puede utilizarse para controlar elementos comunes de todas las páginas del sitio. Una vez aplicada la plantilla a las páginas, podrá minimizar el esfuerzo de futuros cambios de diseño realizando el cambio una sola vez en la plantilla; a continuación, el cambio se aplicará a todas las páginas que utilicen la plantilla.

La plantilla de página está diseñada con áreas comunes y áreas de contenido. Un área común es un área compartida común a todas las páginas que utilizan la plantilla de página, que resulta de utilidad para los elementos que son iguales en todas las páginas, como por ejemplo mensajes de cabecera y áreas de navegación. El área de contenido será diferente en cada página. Una vez aplicada la plantilla a páginas individuales, podrá editar las áreas de contenido de dichas páginas para añadir información específica de las mismas. Los elementos de página tales como texto e imágenes específicas de una página determinada son los tipos de elementos que se incluyen en las áreas de contenido de la plantilla de página. Puede crear cuantas áreas de contenido y áreas comunes desee en una plantilla.

Una plantilla de página controla el aspecto del diseño de un sitio de forma muy diferente a una hoja de estilo. Más información acerca de la diferencia entre las plantillas de página y las hojas de estilos.

En esta guía de aprendizaje, crearemos una plantilla de página y definiremos áreas de contenido y comunes a fin de diseñar un aspecto coherente de todo el sitio de Anuncios clasificados. Esta plantilla de página garantizará que cada una de las páginas se ajusta el siguiente diseño:

Diseño de sitio básico

Crear una plantilla de página nueva

  1. En la vista Explorador de proyectos, pulse el nombre del proyecto, ClassifiedsTutorial, con el botón derecho del ratón.
  2. Seleccione Nuevo > Archivo de plantilla de página en el menú emergente. Se abrirá el asistente Archivo de plantilla de página nuevo.
  3. Acepte la carpeta por omisión (/ClassifiedsTutorial/WebContent). Esta será la ubicación del archivo de plantilla una vez creado.
  4. Escriba un nombre para el archivo de plantilla en el campo Nombre de archivo. En esta guía de aprendizaje, el nombre del archivo es template. Tenga en cuenta que el nombre completo del archivo resultante será template.jtpl.
  5. Asegúrese de que HTML está seleccionado en como lenguaje de codificación.
  6. Seleccione Plantilla que contiene JSP como Modelo.
  7. Deje sin marcar el recuadro de selección Configurar opciones avanzadas.
  8. Pulse Finalizar. La plantilla nueva se abrirá en Page Designer. Cuando se abre una plantilla en blanco, un recuadro de diálogo recuerda al usuario que debe añadir como mínimo un área de contenido a la plantilla. Pulse Aceptar para cerrar el recuadro de diálogo.

Añadir algunos elementos a la plantilla en blanco

Una vez creada la plantilla, es necesario añadir algunos elementos a la plantilla en blanco.
  1. Empiece por suprimir el texto Place content here.
  2. Una de las formas más fáciles de diseñar la estructura de una plantilla de página consiste en utilizar una tabla invisible. De ese modo, puede especificar secciones de la página que deben utilizarse de formas diferentes y controlar la colocación de objetos en la página.
    1. En la vista Paleta, expanda la bandeja Códigos HTML pulsando sobre ella.
    2. Arrastre el componente Table de la paleta hasta la plantilla en blanco. Se abre el diálogo Insertar tabla.
    3. Para esta plantilla, necesitará 3 filas y 1 columna. Escriba 3 en el campo Filas y 1 en el campo Columnas.
    4. A continuación, pulse Aceptar. La tabla se visualizará en la página de la plantilla.
  3. Al principio, la tabla será muy pequeña. Es necesario editar los atributos de la tabla para ajustar el tamaño y la estructura de la misma.
    1. Pulse el botón derecho del ratón sobre la tabla y seleccione Propiedades para abrir la vista Propiedades.
    2. En la vista Propiedades, pulse la pestaña Tabla.
    3. En el campo Alineación, seleccione Centrar. Con ello centrará la tabla en la página.
    4. Es necesario aumentar el tamaño global de la tabla a fin de poder expandir la estructura de la plantilla en función del tamaño de la pantalla en la que se visualice la página. De lo contrario, el diseño de las páginas tendrá un tamaño fijo y puede aparecer muy grande en pantallas pequeñas o muy pequeña en pantallas grandes. En los campos Anchura de tabla y Altura de tabla, especifique 90 y seleccione el signo de porcentaje (%).
    5. Puesto que no desea que el esquema de la tabla aparezca realmente en las páginas, también es necesario establecer el Borde en 0 pixels. Page Designer visualiza los bordes de tabla invisibles en forma de líneas de puntos.
  4. Dado que desea que aparezca un mensaje de cabecera en la parte superior de todas las páginas indicando el nombre y los elementos visuales del sitio Web para ensamblar el sitio, es necesario formatear el área adecuadamente en esta tabla de diseño. Asimismo, aunque probablemente un diseñador gráfico creará una imagen de logotipo o mensaje de cabecera para el sitio, puede añadir texto como espacio reservado para el mensaje de cabecera en esta plantilla.
    1. Seleccione la casilla superior de la tabla.
    2. Con esta casilla seleccionada, especifique una Altura de 70 pixels en la pestaña TD de la vista Propiedades. Si sabe que está creando una plantilla que debe incluir un gráfico de mensaje de cabecera que el diseñador gráfico está creando, puede especificar que esta casilla tenga exactamente el mismo tamaño que el gráfico del mensaje de cabecera.
    3. En la vista Propiedades de la pestaña TD, establezca también el Color en Gris en el menú desplegable. Si desea utilizar otro color, puede utilizar la herramienta de cuentagotas para elegir un color de cualquier lugar de la pantalla o escribir el valor RGB (como por ejemplo #808080 para el gris) en el campo.
    4. Pulse en cualquier lugar de la fila superior y escriba Bienvenido a los Anuncios clasificados.
    5. Dado que el texto por omisión es pequeño y difícil de visualizar, es necesario aumentar el tamaño del font. Seleccione toda la frase y pulse Formato > Font.
    6. Para dar al sitio el aspecto de un periódico, seleccione Courier como Font. Seleccione 6 como Tamaño y Blanco como Color para que resalte sobre el fondo gris de esa casilla.
    7. A continuación, pulse Aceptar.
    8. Para centrar el texto del mensaje de cabecera, seleccione de nuevo el texto y pulse Formato > Alinear > Horizontal Centro.
  5. Para que los usuarios puedan desplazarse a otras páginas, es necesario añadir una fila de enlaces debajo del mensaje de cabecera. Más adelante añadirá pestañas para la navegación, pero por ahora formatee la segunda fila para dejar espacio para los botones.
    1. Seleccione la segunda casilla de la tabla.
    2. Establezca esta casilla en el mismo tamaño que la casilla del mensaje de cabecera especificando una Altura de 70 pixels en la vista Propiedades de la pestaña TD.
  6. La tercera fila es donde se ubicará el contenido. Es necesario asegurarse de que el contenido estará alineado con la parte superior de la fila.
    1. Seleccione la tercera fila de la tabla.
    2. En la vista Propiedades de la pestaña TD, seleccione Superior para la Alineación vertical.

Añadir un área de contenido

Necesita un área de la plantilla en la que puedan visualizarse elementos específicos de cada página, como por ejemplo los resultados de búsqueda de la página filtered_records o el formulario que debe rellenarse para colocar un anuncio nuevo en new_record page. Ahora que tiene la estructura común y el esquema de colores definido para el sitio, está preparado para añadir un área de contenido.
  1. En la vista Paleta, pulse la bandeja Plantilla de página.
  2. Arrastre un componente Content Area en la tercera fila. Esta es la ubicación a la que las páginas individuales suministrarán contenido específico. Se abrirá el asistente Insertar área de contenido para plantilla de página.
  3. Puede aceptar el valor por omisión de Nombre área de contenido bodyarea pulsando Aceptar. El nombre del área de contenido permite especificar nombres diferentes para áreas de contenido diferentes a efectos de organización. Por ejemplo, si está diseñando un sitio que va a tener siempre dos áreas de contenido en cada página, puede denominar el área que se llenará con el contenido principal bodyarea y el área que se llenará con los resultados de búsqueda searcharea. Esto también resulta de utilidad si es necesario aplicar la plantilla de página a páginas que ya existen, ya que, a continuación, podrá asignar áreas de páginas existentes mediante códigos de marcación para llenar áreas de contenido específicas de la plantilla. El área de contenido se inserta en la casilla de la tabla.
  4. Guarde los cambios realizados en la plantilla de página.

La estructura de la plantilla básica debe tener este aspecto:

Plantilla de página básica.

Ha creado una plantilla de página con algunas áreas comunes y de contenido definidas para el sitio Web. Está preparado para empezar el Ejercicio 1.5: Aplicar una plantilla de página al sitio Web.

Condiciones de uso | Comentarios

(C) Copyright IBM Corporation 2000, 2004. Reservados todos los derechos.