Que es un template

Template - Derivados - Cómo funciona - Herramientas necesarias - Esquema del sitio

PARA DUMMIES: una template (plantilla) es una forma, molde, o el patrón utilizado comCómo funcionao guía para hacer algo.

A) EL MODELO UTILIZADO PARA ARCHIVOS HTML

Para crear una plantilla HTML, después de la construcción de la propia página, uno se divide su código html en partes que se pueden editar, es decir, que se pueden modificar, y partes que no pueden editarse. Damos el código necesario para introducirse en las líneas de la página de códigos de crear un área editable.

LISTADO 1. Simulamos aquí un listado de una página web, para establecer las instrucciones de la plantilla y individuar las partes que se pueden editar

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Aquí un código NO EDITABLE entre etiquetas HEAD y / HEAD
Para crear una zona editable, que es una zona de que puede cambiar el código, insertar un comando de la siguiente manera

Aquí está una zona EDITABLE del código, la cual debe tener su propio nombre único
Para cerrarla usted debe escribir un comando de la siguiente manera

Aquí hay otra zona, entre las etiquetas HEAD y / HEAD, de que no se puede editar el código
Recuerde que es posible establecer una zona no editable en todas partes - antes y después de texto o instrucciones completas

</head>

<body>

Aquí un código NO EDITABLE entre etiquetas BODT y /BODY
Para crear una zona editable, que es una zona de que puede cambiar el código, insertar un comando de la siguiente manera



Aquí está una zona EDITABLE del código, la cual debe tener su propio nombre único
Para cerrarla usted debe escribir un comando de la siguiente manera



Aquí hay otra zona, entre las etiquetas BODY y /BODY, de que no se puede editar el código
Recuerde que es posible establecer una zona no editable en todas partes - antes y después de texto o instrucciones completas

</body>

</html>

Estos comandos le permiten obtener una página derivada donde se puede cambiar el código sólo donde se necesita bajo el lay-out de una página original htm.

B ) ARCHIVOS DERIVADOS

Desde el archivo anterior guardado como .dwt (plantilla) o también como HTM se puede obtener un archivo HTM derivado mediante la introducción de dos líneas de código. La primera va inmediatamente después de la etiqueta HTML y el segundo se añade justo antes de la etiqueta /HTML
Así hay el primer problema, ya que se debe utilizar un software de edición de especialista tanto para manipular su plantilla tanto para adjuntarlo adjuntar a su nuevo archivo htm o html. Usted puede hacerlo con las herramientas del desarrollador ofrecidos por los navegadores.

Sin embargo recomiendo utilizar Adobe Dreamweaver, que tiene menos vínculos con el desarrollador.

A nosotros que somos MANIQUÍES sugiero utilizar archivos htm clonados para construir nuevas páginas:

copiad o duplicad su archivo htm y cambiad su nombre
Abrid con su editor y cancelad las partes que desean renovar en las zonas editables
Escribid o poned cosas en las zonas editables de su archivo htm

Para llamar a su nuevo archivo desde un menu se debe enlazar en un elemento del menú mismo, con el TARGET asignado a la zona donde usted quiere que su página se muestre. Tomemos un ejemplo, supongamos que ha depositado en cada zona un IFRAME con el nombre dado en la figura:

Top_side
left_menu	center	right_menu
Bot_menu

Supongamos que han puesto en la izquierda (IFRAME 'left_menu') una pàgina con menú donde tenemos los enlaces que llevan dirección al central ("center" IFRAME). Si se debe poner una nueva página .htm en el centro, sólo necesitamos añadir el nombre de la página en el área editable de una línea de la pàgina del menú.

Ya que tenemos modelos estándar de clonar para cada tipo de página, a comenzar desde la página principal, la que inicialmente tiene IFRAME de las distintas zonas, cadauno con sus páginas iniciales asignadas, podemos actuar de esta manera:

poner pàginas de menu clonadas y modificadas, así como quaquiera pàgina en qualquiera parte con asignar como target el nombre de IFRAME a un enlace de un menu
pasar a otra homepage con asignar como target "_top" o "_blank" a un enlace de un menu
también poner enlaces en el medio para cambiar cualquier otra sección incluso la de 'center'.

C ) CÓMO FUNCIONA

LA CREACIÓN DE UN HTML DERIVADO DEL MODELO NO ES TAN FÁCIL, a menos de utilizar un editor especial que permite al desarrollador de aplicar el .dwt plantilla y guardar el derivado como un file HTM. Es más fácil de conseguir una plantilla con un editor especializado. Recuerde que la extensión de una plantilla dada por diferentes editores puede ser otro que DWT. Así que yo les aconsejo que usen siempre el mismo editor especializado.
Para obtener un archivo html de la plantilla que debe guardar con hos propio nombre. Es decir, si usted tiene la plantilla llamada top_horizontal_ menu.dwt puede aplicar esta plantilla a una página HTML en blanco usando su editor especializado y luego guardarlo donde quieras dándole el nombre y la extensión htm o html. En este caso tenemos que comprobar enlaces a los mismos archivos CSS y de la escritura, para comprobar y ajustar las direcciones con el directorio..

ENTONCE AQUÍ TENEMOS YA PREPARADAS, LAS PÁGINAS htm derivadas de las plantillas de Lino, que se pueden clonar, cambiar el contenido y utilizar facilmente con otro nombre diferente. De hecho, las plantillas se han diseñado en la forma en que se le permite cambiar fácilmente los enlaces a sus hojas de estilo y otros archivos.
Por supuesto que debe haber preparado todas las páginas y archivos listos para sus propósitos, y poner en los archivos derivados todos lo que usted necesita..

EJERCICIO

en una ventana del explorador buscad y duplicad este file html (hace clic) que os mostramos. ADVERTENCIA: no guarden con nombre este archivo abierto en su navegador. Lo damos solo para que se pueda ver su ubicación en carpeta desde su enlace de vuelta.
En la ventanas del explorador cambien su nombre a otro dando la misma extensión (es decir, HTM). Advertencia: este archivo debe residir en un mismo sitio.
Ahora se puede abrir al archivo con el editor escribir algo, o añadir material ya preparado.

D ) HERRAMIENTAS: mínimo requerido

Para crear sitios necesitan las herramientas adecuadas:

UN EDITOR HTML

que debe tener la capacidad de ver el resultado del código que estás escribiendo a medida que escribe, y que tiene una ayuda contextual que le permita de asignar las propiedades del objeto, escribir y adjuntar uno o más archivos en el código CSS o una canción, o una página, proporcionando alternativas directas a asignar a una propiedad específica de un objeto.
Sería otra manera extremadamente larga construir las páginas web, incluso si comienzan a partir de una o más plantillas. Como editor encontré Adobe DREAMWEAVER muy útil, ya que ofrece más libertad y facilidad para ver, editar, copiar y manipular archivos dentro y fuera del sitio.
Sin embargo también he intentado otro Software, pero le encontré difícil y menos intuitivo de usar.
Un editor de imágenes que permita los siguientes:

abrir todo tipo de imagen o casi
cortar zonas de una imagen
ampliar o reducir la imagen o su fondo
componer imágenes a partir de imágenes existentes
hacer as imágenes y / o sus fondo parcialmente o totalmente transparentes
guardar las imágenes para la red web en una variedad de formatos (GIF, PNG, JPEG) para que se pueda elegir las mejores imágenes y con menos "peso" a fin de reducir el tiempo que necesita al navegador para descargar.

El uso de HTML básico es una buena cosa, porque resulta que todos los días se encuentra una nueva función para mejorar sus habilidades.
Pero para aprender a desarrollar y a realizar sus ideas necesita trabajo batante pesado. Si usted es perezoso mejor ni siquiera comenzar.

E )ESQUEMA DEL SITIO

Antes de pasar a las instrucciones restantes para instalar el sitio, hablamos de como hemos organizadas ahora sus carpetas. Cuando hemos descargado y extraído el archivo comprimido, por ejemplo, en el escritorio, ampliando las carpetas encontraremos
<

Miosito Carpeta del sitio

|--- index.htm Archivo con apertura automática

|--- main_framepage_f.htm Homepage en francés

|--- main_framepage_i.htm Homepage ien italiano

|--- main_framepage_s.htm Homepage en español

|

|--- htmpages Carpeta de páginas html

|    |

| |---- horizmenus Carpeta para los menu en línea

|    |

| |---- simples Carpeta de paginas sin menu

|    |

| |---- vertmenus Carpeta para los menu enn columna

|    |

| |---- withmenus páginas con menú en la parte superior

|

| immagini Carpeta para imágenes

|

| stylesheets Carpeta para CSS

|

|--- templates Carpeta para modelos (templates)

Por supuesto que podemos añadir todas las carpetas que más sirven y todos los archivos que se desea de acuerdo a nuestras necesidades, con duplicar desde análogo archivo .htm, o también desde templates .dwt