Definición de secciones

Definición de secciones para nuestro primer sitio Web con BauDocWriter



Está claro que nuestro sitio Web de ejemplo ha mejorado mucho desde nuestra primera página hasta ahora, pero aún le falta muchas cosas para poder decir que es un sitio Web comercial o moderno.

Si nos fijamos en otros sitios que pululan por Internet veremos que nos faltan por los menos cabecera y pies e incluso alguna barra lateral y menús o un apartado de últimas noticias o páginas relacionadas.

Este tipo de contenido que se repite en varias páginas es lo que en BauDocWriter se conoce como sección . Una sección es un bloque de código común para todas nuestras páginas.

Crear una sección es bastante sencillo y sigue las mismas pautas que la creación de páginas o categorías que hemos visto en los pasos anteriores.

Lo primero que vamos a hacer es crear una sección de cabecera, es decir, la parte superior de las páginas de nuestro sitio Web. Para ello, vamos al nodo Application /Sections que dejamos vacío en nuestro sitio web de ejemplo (podemos verlo en la imagen superior del artículo) y pulsamos la opción Nuevo | Archivo :

Ventana creación de sección

En el cuadro de diálogo hemos introducido Header como nombre de archivo y Sección como tipo de documento. Una vez pulsemos el botón Aceptar se nos abrirá una ventana con el contenido de la sección:

Ventana de contenido de sección

El combo que indica el ámbito de la sección, a la derecha, nos ofrece cuatro opciones:

  • Web: una sección que se utilizará para todas las páginas.
  • Página: una sección con datos particulares para la página en la que se utiliza.
  • Mapa del sitio: la plantilla a utilizar para un mapa del sitio.
  • Noticias: para secciones que muestran las últimas noticias o los últimos artículos de una o varias categorías.

En este caso vamos a elegir Web como ámbito de la sección dado que la cabecera se repite en todas las páginas y vamos a escribir este código en el Contenido de la sección:

	
%div { class = "GridRow" }
	%a { href = " index" rel="nofollow"} #img {src=" Images\Logo.png" alt=$WebName} #

%div { class = "GridRow" }
	%nav { class = "menu-main" }
		%ul  
			%li #a { href=" index" title="Página principal de la web" } Inicio # 
			%li #a { href=" Manual" title="Manual" } Manual #
	

En esta sección indicamos que en la cabecera vamos a tener una imagen ( ImagesLogo.png) que por supuesto debemos añadir a nuestro sitio y un menú con vínculos a la página de índice y a la página de manuales. Además, nos encontramos con una variable nueva $WebName que muestra el nombre del sitio Web que hemos definido en la ventana de propiedades del proyecto.

Pero, por supuesto, además tendremos que modificar nuestra plantilla para que aparezca la sección en nuestra página. Para ésto, abrimos la plantilla Main.tpt y en la sección body escribimos el siguiente código:

	
%body
	&Page
		
		%header
			$Header
	

Como podemos ver, para hacer referencia a una sección utilizamos la misma estructura que para escribir una variable pero en este caso utilizamos el nombre de la sección: $Header.

Antes de continuar vamos a crear dos secciones más, una para la barra lateral y otra para el pie. Para ello creamos dos secciones nuevas, LateralBar y Footer . En LateralBar vamos a tener este contenido:

	
%div { class = "panel bg-clr-secondary shadow-rotated" }
	%header { class = "panel-header brd-bottom-dotted"}
		%h4 { class = "ts-blue" } Acerca de
	%p Información general sobre el mejor sitio Web de Internet...
	

En el que por ahora nos limitamos a escribir algo de publicidad de dudosa calidad mientras que en la sección Footer escribimos lo siguiente:

	
%footer { class = "bg-clr-body-foot" }
	%div { class = "GridRow" }
		%section { class="GridCell33 panel" }
			%header { class = "panel-body-footer-header"}
				%h4 Ejemplo
			%p Un ejemplo de sección de pie

		%section { class="GridCell33 panel" }
			%header { class = "panel-body-footer-header"}
				%h4 Noticias
			%p Aquí dejamos sitio para las noticias 
						
		%section { class="GridCell33 panel" }
			%header { class = "panel-body-footer-header"}
				%h4 Enlaces
			%nav { class = "list-vertical-dotted"}
				%ul
					%li #a {href="http://www.microsoft.com" target="_blank" } Microsoft #
					%li #a {href="http://www.google.com/" target = "_blank" } Y Google #
					
	%div { class = "GridRow panel-body-footer-copyright bg-clr-body-foot-copyright txt-small" }
		%div { class="GridCell50" }
			%p © De mi sitio
		%div { class="GridCell50" }
			%nav { class = "list-horizontal-dotted fr" }
				%ul
					%li #a { href = " Index" } Inicio #
					%li #a { href = " Manual" } Manual #
						

que puede parecer mucho más complejo pero en el que simplemente hemos puesto tres bloques de información: uno con información general del sitio, otro con las últimas noticias (que veremos cómo se rellena automáticamente en la página de secciones de noticias ) y por último un bloque con una serie de enlaces.

La última parte del pie muestra el copyright y un menú secundario que nos dirige nuevamente a las páginas de inicio y manual (lo malo de tener un sitio Web tan pequeño es que no tenemos mucho donde elegir).

Todo esto está muy bien, pero debemos modificar la plantilla Main.tpt de nuevo para incluir el pie y la barra lateral. En concreto, nuestra plantilla completa tendrá esta forma:

	
%html {lang="es"}
	%head
		%title $FullTitle
		%meta { content = "text/html; charset=utf-8" http-equiv="Content-Type" }
		%meta { name = "viewport" content="width=device-width, initial-scale=1.0" }
		%meta { name = "revisit-after" content = "2 days"}
		%meta { name = "robots" content = "index,follow"}
		%meta { name = "publisher" content = $Author }
		%meta { name = "copyright" content = "Creative Commons"}
		%meta { name = "author" content = $Author }
		%meta { name = "distribution" content ="global"}
		%meta { name = "description" content = $Description }
		%meta { name = "keywords" content = $Keywords }
		%meta { name = "Content-Type" content = "Content-Type: text/html; charset=utf-8" }
		%meta { name = "generator" content = "BauDocWriter" }
		%meta { name="lang" content="es" }
		%meta { name="siteinfo" content="robots.txt" }
		%link { href=" Styles\Layout.css" rel="stylesheet" }
	%body
		&Page
			
			%header
				$Header

			
			%section { class = "MainBar" }
				<%if $Content != "" %>
					%div
						$Content
				
				<%if $AdditionalContent != "" && $AdditionalContent != "null" %>
					%div
						$AdditionalContent

			%aside { class = "LateralBar" }
				$LateralBar
			
			%NoTag
				$Footer 
	

Con estos últimos cambios, ya podemos compilar el sitio y ver cómo queda una de nuestras páginas:

Página 2 completa con cabecera, pie y barra lateral

Dado que hemos cambiado la plantilla principal, estas modificaciones también se reflejan en nuestra página de la categoría Manual :

Categoría Manual completa

Con esto terminamos nuestro primer manual sobre secciones y pasamos a ver las secciones de noticias que nos darán mucho juego en el futuro.



Páginas relacionadas