Usare i Template di Dreamweaver

I Template di Dreamweaver consentono di modificare centralmente la struttura di un sito e i contenuti che si ripetono su più pagine senza essere costretti a modificare le pagine sigolarmente.

L'intestazione, il menu principale e il footer solitamente sono uguali in tutte le pagine. Volendo però apportare una modifica, ad esempio cambiare l'immagine del logo, sarebbe decisamente scomodo dover andare a modificare manualmente ogni pagina del sito, specialmente quando queste sono numerose.

Vantaggi e considerazioni

I grandi vantaggi dell'usare i Template di Dreamweaver rispetto ad altre tecniche, come le Master Pages di Asp.Net o le inclusioni lato server di PHP, sono il fatto che a) non richiedono alcuna conoscenza di programmazione b) non necessitano di un host che supporti un linguaggio come asp o php. Sono quindi totalmente indipendenti dalla piattaforma lato server che si utilizza per sviluppare il sito in quanto si basano solo sull'html.

Altri vantaggi sono la facilità di utilizzo e il pieno supporto di Dreamweaver anche in modalità Design. Significa che in DW si vede correttamente l'anteprima delle pagine web a cui è stato applicato un template.
Infine l'elaborazione avviene a livello di progettazione e non in runtime, quindi senza appensantire la cpu del server.

Tutto ciò ha un prezzo: si resta legati all'editor Dreamweaver. Senza di esso non è praticamente possibile gestire i template.

Un altro svantaggio da tenere in considerazione è che quando si modifica un template è poi necessario fare l'upload di tutte le pagine che usano tale template, e di conseguenza viene aggiornata anche la data di ultima modifica delle pagine.

Creare un Template con Dreamweaver

Bisogna operare all'interno di un progetto Dreamweaver. Per questo esempio ne possiamo creare uno nuovo:

Site >> New Site >> Inserire Site Name e Local Root Folder >> ok

Ora è possibile creare il template vero e proprio:

File >> New >> Template Page >> HTML Template

Notare che esiste anche la possibilità di creare template Asp e Php, o di creare template nidificati.
Si ottiene un codice html simile a questo:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
</body>
</html>

Un template quindi è una pagina html con delle sezioni TemplateBeginEditable e TemplateEndEditable atte a racchiudere il codice che sarà possibile editare su ogni singola pagina.

Per aggiungere nuove regioni editabili posizionarsi con il cursore nel punto in cui vogliamo aggiungerlo, poi:

Insert >> Template Objects >> Editable Region

Questo è un esempio più simile al mondo reale:

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
		<title>Usare i Template con Dreamweaver</title>		
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
		<link rel="stylesheet" type="text/css" media="screen" href="style_screen.css" />
	</head>
	<body>
		<div id="header">Header</div>
		<div id="top-menu">Menu</div>
		<div id="contenuto">
<!-- TemplateBeginEditable name="content" -->Contenuto<!-- TemplateEndEditable -->
		</div>
		<div id="footer">Footer</div>
	</body>
</html>

Infine salvare il file in formato .dwt

Applicare un Template a una pagina Html

Prima si crea una nuova pagina html poi si seleziona il template da applicare.

Modify >> Templates >> Apply Template to Page >> Selezionare il template

Si ottiene un codice simile a quello sottostante; il codice appartenente al template è in grigio e non modificabile. In questo modo si evita di modificarlo accidentalmente e ci si concentra sul contenuto editabile delle singole pagine.

Modificare un Template

Le modifiche apportate si riflettono su tutte le pagine web del progetto alle quali è stato applicato il template.
In pratica Dreamweaver modifica fisicamente il codice html di ogni singola pagina.
Quando si salva ricordarsi di dare conferma al popup che chiede se aggiornare le pagine:

Autore: Sergio Roberto Boarina