FOR DUMMIES
A template is a form, mold, or pattern used as a guide to making something.
A) PATTERN USED FOR AN HTML FILES
To create a HTML template, after building the page itself, one divides its html code into parts that can be edited, ie that can be modified, and non editable parts.Below we give the necessary code to be entered in lines of code page to create an editable area.
LISTING 1
- we simulate here a listing of a web page, and individuate the parts that you can edit
<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>
this is a NOT EDITABLE zone of the code betwrr HEAD and /HEAD TAGS |
this is a code's EDITABLE zone, which must have its own unique name |
| this is another NOT EDITABLE zone of the code between head tags. Remember that is possible to set a NOT editable zone everywhere - between complete instructions |
</head>
<body>
A NOT EDITABLE zone of the code between BODY and /BODY begins here |
An EDITABLE zone, which must have its own unique name begins here |
| A NOT EDITABLE zone of the code between BODY and /BODY begins here |
An EDITABLE zone, which must have its own unique name begins here |
| A NOT EDITABLE zone of the code between BODY and /BODY begins here |
</html>
WARNING
- should save the file with his own name and dwt extension.
- the editable zones must have each a different unique name
B ) DERIVATIVE FILES
From the previous file saved with a dwt (template) you can easily get the derived 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
LISTING 2
<!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">
<html>
<head>
....................
</head>
<body>....................
</body>
</html>
At first you shoud type the page and save it as a text file, then insert the commands. This is a quite engaging work, to insert such instructions with a common editor, when the page is a just little bit complex page.
So we should use a special editor. Irecommend to use Adobe Dreamweaver, which has less ties to the programmer.
C ) HOW DOES THE TEMPLATE WORK
CREATING A HTML DERIVED FROM MODEL TEMPLATE: for this we should take the previous file saved as .dwt and insert a statement immediately after the TAG <HTML>, and another just before the tag </ HTML> as shown in Listing 2 .
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 hos 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
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 derivative files all what you need.
EXERCISE
- open with your editor this html file (click) derived bya a template
D ) 
MINIMI STRUMENTI NECESSARI - MINIMUM NEEDED TOOLS
Per creare siti sono necessari degli strumenti adatti:
- UN EDITOR HTML. che deve avere la possibilità di visualizzare il risultato del codice che si sta scrivendo mentre lo si scrive, e che abbia un aiuto contestuale che permette di assegnare le proprietà degli oggetti, di scrivere e collegare uno o più file CSS a un brano di codice o a una pagina, fornendo direttamente le alternative da assegnare a una determinata proprietà di un oggetto.
Sarebbe altrimenti estremamente lungo costruire la pagine web anche se si parte da uno o più templates. Come editor ho trovato molto untile DREAMWEAVER di Adobe, perché offre più libertà e facilità di visualizzare, editare, copiare e manipolare i files dentro e fuori dall'ambiente del sito. Comunque ho anche provato altri siftware ma li trovo poù impegnativi e meno intuitivi da usare. - UN EDITOR DI IMMAGINI CHE CONSENTA LE SEGUENTI OPERAZIONI:
- aprire tutti i tipi di immagine o quasi
- ritagliare zone di immagini
- ingrandire o rimpicciolire l'immagine o il suo sfondo
- comporre immagini da immagini esistenti
- rendere trasparenti totalmente le immagini e/o i loro gli sfondi
- salvare le immagini per il web in vari formati (GIF, PNG, JPEG) per permettere di scegliere le immagini migliori e con minor 'peso' onde ridurre il tempo necessario al browser per caricarle.
Usare il linguaggio HTML di base è una cosa ottima, perché si scopre ogni giorno una nuova funzione per migliorare la propria abilità, mae per imparare il necessario ci vuole un lavoro pesante. Se siete pigri meglio non iniziare nemmeno.
To create 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 siftware 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.