PER NOI DUMMIES: un modello è uno schema, che viene utilizzato come guida per fare qualcosa. Nel nostro caso si tratta di uno schema di pagina di sito web che serve per creare altre pagine che hanno uguale forma e disposizione dei loro elementi, ma contenuto differente.
A) MODELLO USATO PER ARCHIVI HTML
Per creare un TEMPLATE per HTML dopo aver costruito la pagina che ci serve, e averla salvata, dividiamo il codice in parti che possono essere modificate e in parti non modificabili. Qui sotto diamo un esempio di codice usato per creare aree editabili in una pagina web.
LISTATO 1
Simuliamo qui un listato di una pagina web, per inserire le istruzioni e per evidenziare e individuare le parti che potranno essere cambiate quando si edita il file con il proprio editore.
<!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>
| Ecco una zona di codice non modificabile tra i TAG HEAD e / HEAD Per creare una zona dove è possibile modificare il codice, si inserisce un comando come di seguito |
<!-- TemplateBeginEditable name="Nome ..." -->
| Ecco la zona EDITABLE di un codice, che deve avere un suo nome univoco Per chiuderla si deve scrivere un comando come di seguito |
<!-- TemplateEndEditable -->
| Questa è un'altra zona non modificabile del codice tra i TAGS HEAD e / HEAD È possibile impostare una zona non modificabile ovunque - prima e dopo il testo o le istruzioni complete |
<body>
| Ecco una zona di codice non modificabile tra i TAG BODY e /BODY Per creare una zona dove è possibile modificare il codice, si inserisce un comando come di seguito |
<!-- TemplateBeginEditable name="Nome ..." -->
| Ecco una zona EDITABILE del codice, che deve avere un suo nome univoco Per chiuderla si deve scrivere un comando come di seguito |
<!-- TemplateEndEditable -->
| Questa è un'altra zona non modificabile del codice tra i TAGS BODY e / BODY È possibile impostare una zona non modificabile ovunque - prima e dopo il testo o le istruzioni complete |
</html>
Tali comandi consentono di ottenere una pagina derivata in cui sarà permesso editare il codice unicamente nelle zone che abbiamo indicato come editabili nel lay-out della pagina.
SE PER ESEMPIO VOLETE TRADURRE IN TEDESCO QUESTA PAGINA, PRIMA DUPLICATELA, POI CAMBIATEGLI NOME, E INFINE APRITELA NEL VOSTRO EDITOR, CHE DOVREBBE CONSENTIRVI DI TRADURRE SOLO NELLE ZONE EDITABILI. QUINDI SALVATELA.
È possibile salvare come HTM e ottenere un derivato con l'introduzione di due righe di codice.La prima riga va scritta subito dopo il TAG <html> e la seconda viene aggiunta appena prima del tag </ html>
Ecco il primo problema, dato che è necessario utilizzare un editor particolare sia per manipolare il modello che per collegarlo al vostro nuovo file htm o html. Si può magari fare con gli strumenti per sviluppatori offerti dai browser. Comunque io consiglio di utilizzare Adobe Dreamweaver, che offre meno vincoli per lo sviluppatore.
Pour nous qui sommes DUMMIES j'ai suggéré de na pas partir du modèle, mais de cloner les fichier .htm prêt à construire vos nouvelles pages:Per noi che siamo DUMMIES suggerisco non partire da template, ma di clonare file htm giâ pronti per costruire le vostre nuove pagine:
- copiate e incollate il file che prendete come modello e che volete duplicare, e cambiategli il nome
- Aprirelo con l'editor e cancellate nelle zone modificabili le parti che volete rinnovare
- Scrivetete, o aggiungete quello che volete mettere nelle zone modificabili
Per poter poi richiamare il nuovo file è necessario collegarlo a una voce di un menu, dove al link si assegna come TARGET la zona in cui si desidera che la sia visualizzata la pagina. Facciamo un esempio, supponendo di aver piazzato in ogni zona un IFRAME con il nome assegnato in figura:
| Top_side | ||
| left_menu | center | right_menu |
| Bot_menu | ||
Supponiamo di avere messo nella zona a sinistra (IFRAME 'left_menu') un menu in cui abbiamo i links che rimandano per default alla pagina centrale (IFRAME 'center'). Se abbiamo una nuova pagina htm da mettere nella zona centrale, è sufficiente aggiungere il nome della pagina nella zona editabile di una riga del menu.
Poiché abbiamo modelli standard da clonare per ogni tipo di pagina, partendo dalla homepage, nella quale abbiamo inizialmente assegnato le pagine agli IFRAME delle varie zone, cliccando i links iniziali assegnati possiamo in tal modo:
- piazzare qualunque pagina tipo menu o altro nelle zone dei menu o sopra, o al centro
- piazzare qualunque pagina al centro, nella parte superiore o inferiore
- passare a un'altra homepage con altri links
- mettere anche dei links nella parte centrale per cambiare qualunque altra sezione.
- cambiare ogni sezione da ogni altra pagina.
C ) COME FUNZIONA
LA CREAZIONE DI UN HTML DERIVATI DA MODELLO non è così facile a meno che non si utilizzi un editor speciale che consente allo sviluppatore di applicare il modello .dwt e salvare il derivato come file HTM.
Ê
piû facile ottenere un modello usando un editor specializzato. Ricordate che l'estensione di un modello di data da editori diversi può essere altro che dwt. Quindi vi consiglio di utilizzare sempre lo stesso editor specializzato.
Per ottenere un file HTML dal modello si dovrebbe salvarlo con il proprio nome. Vale a dire, se avete il modello denominato top_horizontal_ menu.dwt è possibile applicare questo modello a una pagina vuota html utilizzando il vostro editor specializzato e quindi salvarlo ovunque ne abbiate bisogno dandogli il nome e l'estensione htm o html.
Dobbiamo sempre controllare i collegamenti ad esso i file CSS e script, per controllare e regolare i riferimenti alle directory, se diverse da quello del file DWT.
Qui abbiamo preparato le pagine htm derivate da modelli preparati dall'amico Lino, che si possono facilmente clonare e utilizzare con un altro nome.
In realtà, tali modelli sono progettati in modo che sia permesso cambiare facilmente i collegamenti a fogli di stile, di figure, e ad altri file.
Naturalmente è necessario sapere quello che si vuole e preparare di conseguenza tutte le pagine e file di collegamento per i vostri scopi, e mettere nei file derivati tutti quello che vi serve.
ESERCIZIO
- in una finestra di Explorer ricercate e duplicate questo file html (clicca) )che vi facciamo vedere. Attenzione: NON salvate con nome questo file aperto nel vostro browser. Ve lo facciamo vedere perché possiate risalire dal link alla sua posizione nelle cartelle.
- Quando lo avete salvato con un semplice copia-incolla, sempre nella finestra di explorer cambiatene il suo nome dando la stessa estensione (es HTM). Attenzione: per poter manipolare con l'editor specializzato, questo file cambiato deve stare nella directory principale dei vostri file decompressi cioè deve risiedere all'interno del sito.
D ) MINIMI STRUMENTI NECESSARI - 
MINIMUM NEEDED TOOLS
Per creare siti sono necessari degli strumenti adatti:
- UN EDITOR HTML che abbia 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à ammesse per ognuno 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 utile 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 software ma li trovo più 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.
- IL SOFTWARE DI PROTEZIONE CHE VI CONSENTA DI NON IMPORTARE VIRUS O ALTRO MALWARE NELLA VOSTRA RETE O NEL VOSTRO PC, DI RIPULIRE PERIODICAMENTE I BROWSERS, DI ELIMINARE IL GRIME, E DI RIPULIRE IL VOSTRO REGISTRO DI WINDOWS
Usare il linguaggio HTML di base è soddisfacente, perché usandolo si scopre ogni giorno qualcosa di nuovo, una nuova funzione per migliorare la propria abilità, ma per imparare il necessario ci vuole un lavoro pesante. Se siete pigri meglio non iniziare nemmeno.
E ) SCHEMA DEL SITO
Prima di passare alle istruzioni successive per installare il sito parliamo ora di come sono organizzate le sue cartelle. Quando avremo scaricato ed estratto il file compresso, per esempio sul desktop, se espandiamo le cartelle troveremo:
| Miosito | Cartella del sito | ||||||
| |--- | index.htm | File con apertura automatica | |||||
| |--- | main_framepage_f.htm | Homepage in francese | |||||
| |--- | main_framepage_i.htm | Homepage in italiano | |||||
| |--- | main_framepage_s.htm | Homepage in spagnolo | |||||
| |--- | main_framepage_skem.dwt | Template homepage | |||||
| | | |||||||
| |--- | htmpages | Cartella con le pagine html | |||||
| | | | | ||||||
| | | |---- | horizmenus | Cartella dei menu orizzontali | ||||
| | | | | ||||||
| | | |---- | simples | Cartella delle pagine senza il menu | ||||
| | | | | ||||||
| | | |---- | vertmenus | Cartella dei menu in colonna | ||||
| | | | | ||||||
| | | |---- | withmenus | pagine scorrevoli con menu in testa | ||||
| | | |||||||
| | | immagini | Cartella con files immagine | |||||
| | | |||||||
| | | stylesheets | Cartella dei fogli di stile | |||||
| | | |||||||
| |--- | templates | Cartella dei modelli templates | |||||
Naturalmente potremo aggiungere tutte le cartelle che vorremo e tutti i file che desideriamo a seconda delle nostre esigenze, duplicandoli dai modelli htm.