What is a template

Template - Derivative - How does it work - Needed tools - Site's pattern

FOR DUMMIES: A template (template) is a form mold or pattern used as a guide to do something.

A) The model used for HTML FILES

To create an HTML template, after building the page itself, your html code is divided into parts that can be edited, ie, modifiable, and parts that can not be edited. We need to enter the lines of code into the page to create editable areas.

LISTING 1. let's. simulate here a list of a site, to establish the template and instructions to individuate the editable parts.

<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>

Here's a code part NOT EDITABLE between HEAD and / HEAD
To create an editable area, that is, an area that you can change the code,
insert a command as follows

Here is an editable code area , which must have its own unique name
To close it you must type a command follows

Here's another area between the HEAD tags and / HEAD, that you cannot edit the code Remember that it is possible to establish a non-editable area everywhere
- before and after text or a complete instruction -

</head>

<body>

Here's a code part NOT EDITABLE between BODY and / BODY TAGS
To create an editable area, that is, an area where you can change the code,
insert a command as follows



Here is an editable code area , which must have its own unique name
To close it you must type a command follows



Here's another area between the BODY tags and / BODY, that you can not edit the code Remember that it is possible to establish a non-editable area everywhere
- before and after text or complete instructions

</body>

</html>

These commands let you get a derived page where you can change the code only where needed on the lay-out of an original htm page.

B ) DERIVATIVE FILES

From the previous file saved with a dwt (template) you can save it as HTM and obtain a derivative HTM file by introducing two lines of code. The first one goes immediately after the TAG <html> and the second is added just before the tag
Here' s the first problem, because you should use a specialist editor software both to manipulate your template both to attach it attach to your new htm or html file. You could do it with the developer's tools offered by browsers.

However I recommend to use Adobe Dreamweaver, which has less ties to the developer.

TO US WHO ARE DUMMIES I suggest to use cloned htm files to build your new pages:

copy or duplicate your file and change its name
Open with your editor and cancel the parts that you want renew into the editable zones
Write or put things into the editable zones of your htm file

To call your new file from a menu, it should be linked in the same menu item, the TARGET assigned to the area where you want your page to be displayed. Taking an example, suppose that you have placed in each zone an IFRAME with name as in the figure:

Top_side
left_menu	center	right_menu
Bot_menu

Suppose you have at left (IFRAME 'left_menu') a menu page where we have links leading to the center (IFRAME "center"). Whether to put a new .htm page in the center, only we need to link the name of the page in the edit area of a line in the menu.
Since we have standard pages to clone for each type of page, starting from the home page, which is initially IFRAMEd in different zones, each with its initial pages allocated, we can act in this following way:

to post a cloned and modified page into a zone, you should assign the page itself a link in another page (i.e. a menu or whosoever other page) with its TARGET assigned as the name of IFRAME where you want to post it
to move to a new browser tab, assign "_blank" as target to its link
to set this page to replace the present one assign "_top" as target to its link

C ) HOW DOES IT WORK

CREATING A HTML DERIVED FROM MODEL TEMPLATE IS NOT SO EASY UNLESS WE USE A SPECIAL EDITOR which allows the developer to apply the template .dwt and save the derivate as an HTM file.
It's easies instead to get a template using a specialized editor. Remember that the extension of a template given by different editors can be other than dwt. So I advise you to use always the same specialized editor.
To obtain an html file from the template you should save it with his own name. Ie, if you have the template named top_horizontal_ menu.dwt you can apply this template to a blank html page using your specialized editor and then save it wherever you need giving it the name and extension htm or html. In this case we have to check links to it css and script files, to check and adjust other links too.

Here we have prepared htm pages derived from Lino's templates, that you can easily clone and use with another name. In fact,those templates are designed in the way that you're allowed to easily change links to stylesheets, to figures, and to other files.
Of course you must have prepared all the pages and files to link for your purposes, and put into the derived files all the matters that you need.

EXERCISE

with windows exlorer search and duplicate - copy and paste - this html file (click) derived by a template. WARNING: do not use 'save with name' from your browser. We take it from here just so you can see your folder location from your link back.
By the windows explorer change its filename to another giving the same extension (ie HTM). Warning: to reside in your site this new file must not be ouside your site, that is, the directory of your unzipped files .
Now you can open the file with the editor to cancel, modify, and write something, or add your own material already prepared.

D ) MINIMUM NEEDED TOOLS

To create your sites you need the right minimum tools:

AN HTML EDITOR . that must have the ability to view the result of the code you're writing as you write, and that has a contextual help that allows you to assign object properties, write and attach one or more files in CSS code or a song a page, providing direct alternatives to be assigned to a specific property of an object.
It would be otherwise extremely long to build web pages even if they start from one or more templates.
As an editor I found very useful Adobe DREAMWEAVER , because it offers more freedom and ease to view, edit, copy and manipulate files within and outside the site. However I have also tried other software pou but I find them challenging and less intuitive to use.
AN IMAGES' EDITOR THAT ALLOWS YOU THE FOLLOWING:
- opening all kinds of image or almost crop areas of images
- growing up or shrink the image dimensions or its background
- composing images from existing images
- making images totally transparent and / or their backgrounds
- saving images for the web in a variety of formats (GIF, PNG, JPEG), and allowing you to choose the best images with less 'weight' in order to reduce the time it takes the browser to load them.

Using the basic HTML language is a very good thing because one discovers every day a new function to improve his own skill, but a heavy works to learn the necessary is needed. Do not even begin if you're lazy.

Before moving to the remaining instructions and installing the site, let's tell how we have organized its folders. When downloaded and extracted the compressed file, for example on the desktop, if we expand the folders we will find:
<

Miosito Site's folder

|--- index.htm index file

|--- main_framepage_f.htm
french Homepage

|--- main_framepage_i.htm italian Homepage

|--- main_framepage_s.htm spanish Homepage

|

|--- htmpages folder with htm pages

|    |

| |---- horizmenus folder of horizontal menus

|    |

| |---- simples folder with menuless pages

|    |

| |---- vertmenus folder of column menus

|    |

| |---- withmenus folder of sliding pages with menu on top

|

| immagini Images' folder

|

| stylesheets CSS' folder

|

|--- templates Templates' folder

Of course we can add all the new needed folders that we want and all the files according to our needs, duplicating from htm or getting them by dwt models.