The Dynamic Duo - Plantillas de Páginas

Plantillas de Páginas

Usando Plantillas para JavaScript/CSS es mas fácil de crear un Sitio Web entero que posee de características consistentes por todo el sitio como las barras de herramientas y los default styles.

Con enlazar a cada una de tus páginas a un stylesheet externo (.css files) y usando fichero de JavaScript externos (.js) para escribir tus capas, tu puedes juntar tus páginas rápidamente y tener una localización central para cambiar partes de tus páginas totalmente afuera de tu Sitio Web. Esto es muy similar a Server-Side Includes (SSI) pero cuando usas los ficheros"de JavaScript tendrás mucho mas control a lo que se le escribe al browser. Por ejemplo puedes determinar que browser se esta usando y conformemente cambiar la apariencia de la página, o también puedes hacer otras cosas como centrar todas las capas (como en la Generando Capas )lección anterior.

Si se usan apropiadamente las plantillas puede hacer obsoletos los marcos "frames". Cuando haces uso de marcos juntos con capas, te encuentras limitado de que tus capas no pueden cruzar encima de los bordes de los marcos. Pero al escribir capas dinámicamente por todo tu sitio, puedes hacer lo que quieras en una sola página de capas.

Tus CSS pueden estar enlazadas al origen de un file "fichero" al usar el etiqueta LINK:

<LINK REL=STYLESHEET HREF="filename.css" TYPE="text/css">

Ese fichero puede contener cualquier información que sea necesaria de un stylesheet para ser implementada a través de cualquier número de html files (los cuales deben contener ese etiqueta LINK).

Y similarmente puedes asignarle el fichero de origen para tus JavaScripts con utilizar el atríbuto SRC:

<SCRIPT LANGUAGE="JavaScript" SRC="filename.js"></SCRIPT>

Cuando estés desarrollando plantillas, yo sugeriría que sean desarrollados lo más normales posible (todas en un fichero) y cuando tengas todo trabajando correctamente, corta y pega las piezas en diferentes ficheros. La página siguiente es instalada para que sea fácil de extraer los styles y los JavaScript que son los que escribirán los enlaces de norma para la página:

<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Page Templates Demo 1</TITLE>
<STYLE TYPE="text/css">
<!--
#title {position:absolute; left:100; top:10; width:300; font-size:18pt; font-weight:bold;}
#links {position:absolute; left:10; top:40; width:100; font-size:12pt;}
#content {position:absolute; left:100; top:55; width:400; font-size:10pt;}

BODY {font-family:"Arial";}
-->
</STYLE>
</HEAD>

<BODY>

<DIV ID="title">This is the Title</DIV>

<SCRIPT LANGUAGE="JavaScript">
document.writeln('<DIV ID="links">');
document.writeln('<B>Links:</B>');
document.writeln('<BR><A HREF="#">Page 1</A>');
document.writeln('<BR><A HREF="#">Page 2</A>');
document.writeln('<BR><A HREF="#">Page 3</A>');
document.writeln('</DIV>');
</SCRIPT>

<DIV ID="content">
<P>This is the body content....
</DIV>

</BODY>
</HTML>

Ejemplo: templates1.html [fuente]

Una vez que este funcionando, puedes entonces hacer los CSS y Java Scripts separando los ficheros que hagas los enlaces A:

<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Page Templates Demo 2 [External Files]</TITLE>
<LINK REL=STYLESHEET HREF="mystyles.css" TYPE="text/css">
</HEAD>

<BODY>

<DIV ID="title">This is the Title</DIV>

<SCRIPT LANGUAGE="JavaScript" SRC="mylinks.js"></SCRIPT>

<DIV ID="content">
<P>This is the body content...
</DIV>

</BODY>
</HTML>

Ejemplo: templates2.html [fuente]

Un concepto fácil de comprender. Como sea el caso ciertamente tus páginas serán mas complicadas que esto, bueno: tenga cuidado!