Modelli di aiutano i Web designer risparmiare tempo riutilizzando gli elementi HTML. Un sito di vendite di fotocamera, ad esempio, potrebbe essere necessario visualizzare lo stesso colore di intestazione e lo sfondo su tutte le pagine del sito. Anziché impostare le proprietà per ogni pagina HTML, gli sviluppatori di siti creare un singolo modello e rendono ogni pagina fanno riferimento a tale modello. Se si decide successivamente di creare pagine con colori diversi, possono aggiornare il modello. Se si utilizza KompoZer, un editor HTML gratuito, cambiare il colore di un modello esistente utilizzando editor di "CaScadeS" del programma.

Istruzioni

Creare Template

1

Avviare KompoZer e fare clic su "File". Fare clic su "Nuovo" quindi fare clic su "Un modello vuoto." Un modello HTML vuoto viene visualizzato nella finestra di modifica.

2

Premere "CTRL" e "S" e tipo "modello di Test 1" nella casella di testo "Titolo". Fare clic su "OK". La finestra "Salva pagina con nome" apre e visualizza le cartelle del disco rigido. Fare clic su una delle cartelle e quindi digitare un "modello di Test 1" nella casella di testo "Nome File". Fare clic su "Salva". KompoZer crea un nuovo modello e salvarlo nella cartella selezionata.

3

Fare clic sul pulsante "CaScadeS" nella parte superiore di KompoZer per aprire la finestra di fogli di stile CSS. Questa finestra consente di creare un nuovo foglio di stile per il modello.

4

Fare clic su "Foglio di stile interno" e quindi fare clic sulla casella a discesa situata sul lato destro della finestra per visualizzare un elenco di elementi HTML che è possibile lo stile. Fare clic sull'elemento "corpo" e quindi fare clic su "Crea regola."

5

Fare clic su "Sfondo" e quindi fare clic sul pulsante "Colore" per visualizzare la finestra di colore. Fare clic su uno dei colori nella finestra e quindi fare clic su "OK". KompoZer imposta il colore del corpo di foglio di stile al colore selezionato. Poiché il modello utilizza il foglio di stile, il suo colore mostrerà anche quel colore.

6

Fare clic su "Inserisci". Appare un menu a discesa. Fare clic su HTML e quindi digitare il seguente codice nella casella di testo che viene visualizzato:

< h1 > questo è il titolo di modello < / h1 >

Fare nuovamente clic su "Inserisci". KompoZer aggiunge un'intestazione per il modello. A questo punto, il modello contiene un'intestazione e un colore di sfondo al colore selezionato per il foglio di stile del modello.

7

Premere "CTRL" e "N" per aprire la finestra Crea un nuovo documento. Fare clic su "Un nuovo documento basato su un modello" e fare clic sul pulsante "Cartella" per visualizzare la finestra "Scegli File". Individuare il file di modello creato e fare doppio clic su tale file.

8

Clicca su "Crea". Una nuova pagina HTML viene visualizzato nell'editor. Poiché utilizza il modello, questa pagina verrà visualizzato il modello intestazione e colore di sfondo. Qualsiasi pagina si creano quella riferimenti questo modello mostrerà il modello intestazione e colore di sfondo. Se successivamente si decide che è necessario creare pagine che hanno colori diversi, può farlo modificando il modello come illustrato nella sezione successiva.

Cambiare i colori del Template

9

Premere "CTRL" e "O" per visualizzare la finestra Apri File HTML.

10

Fare clic sulla freccia a discesa di "HTML Files" e quindi fare clic su "Modelli HTML." Nella finestra viene visualizzato un elenco di modelli esistenti.

11

Fare doppio clic il modello creato per aprirlo nell'editor. Il colore di sfondo corrisponde al colore che impostato quando hai creato il modello.

12

Fare clic sul pulsante "CaScadeS" per aprire la finestra di fogli di stile CSS. Fai clic sul link "corpo" nel pannello di sinistra della finestra e quindi fare clic su "Background".

13

Fare clic sul pulsante "Colore" per visualizzare la finestra di colore. Scegliere il nuovo colore che si desidera utilizzare per il modello e fare clic su "OK". KompoZer cambia colore del modello a quella selezionata. I nuovi documenti HTML che crei basato su questo modello utilizzeranno il nuovo colore.

Consigli & Avvertenze

• Questo esempio crea un modello semplice che imposta il colore di sfondo di un documento HTML. È possibile utilizzare gli stessi principi per impostare i colori di altri elementi quali pulsanti, etichette, paragrafi e caselle di testo. Pagine HTML che fanno riferimento al modello verranno applicati quei colori per gli elementi HTML appropriati. Successivamente è possibile modificare i colori del modello, come illustrato nella procedura. Nuovi documenti HTML creati che fanno riferimento al modello utilizzerà i nuovi colori. Pagina Web di KompoZer