La prima pagina
Dopo aver definito le impostazioni generali per il sito negli scorsi articoli, possiamo passare a creare le pagine. Prima di cominciare, è importante ricordare che la pagina principale di un sito web deve avere un nome specifico, in modo che il web server la riconosca come tale e la mostri anche se l’utente digita soltanto il nome del sito senza indicare il nome specifico della pagina.
Il nome che deve avere l’homepage dipende da come è stato configurato il web server. Normalmente il nome è index.html o default.html, ma occorre che vi informiate presso il vostro provider.
Dopo questa doverosa premessa, creiamo una nuova pagina. Per farlo scegliete File > Nuovo e Dreamweaver vi mostrerà la finestra Nuovo documento, visibile in figura 1.
Da questa finestra si possono creare diversi tipi di documento. Potete scegliere il tipo di documento da creare nel riquadro Tipo di pagina. In questo articolo creeremo documenti HTML o (X)HTML, quindi dovete selezionare la voce HTML. Fatto questo, nella casella Layout potete scegliere di creare un documento vuoto, selezionando la voce <nessuno>, oppure un documento in cui è già predisposta una particolare struttura di pagina (1 colonna, 2 colone, ecc.).
Questa struttura viene realizzata per mezzo di istruzioni CSS. Dreamweaver permette di scegliere dove memorizzare queste istruzioni CSS.
Figura 1: la finestra Nuovo documento
Una volta scelto il tipo di layout, aprite l’elenco a discesa Layout CSS in basso a destra nella figura 1.
Qui trovate una serie di opzioni visibili in figura 2:
- Aggiungi a Head: le istruzioni CSS sono salvate all’interno del documento HTML, nella sua intestazione;
- Crea nuovo file: le istruzioni CSS sono salvate in un file CSS esterno al file HTML nel quale sono poi richiamate;
- Collega ad un file esistente: le istruzioni CSS necessarie sono già state salvate in precedenza in un file esterno (questo capita, per esempio, se si è già creato un file con questo layout e si è scelto di salvare le istruzioni in un file CSS esterno). In quest’ultimo caso, si deve specificare nella casella Associa file CSS il file che si desidera utilizzare.
Figura 2: scegliere dove memorizzare le istruzioni CSS
Anche se non si sceglie di usare un layout predefinito, in fase di creazione di una pagina è possibile associarle un foglio di stile creato in precedenza, specificandolo nella casella Associa file CSS di cui abbiamo già parlato.
Per avviare la scelta del foglio di stile, è necessario premere il pulsante a forma di catena posto appena sopra la casella.
Dreamweaver vi mostrerà la finestra Collega foglio di stile esterno, visibile in figura 3.
Figura 3: la finestra Collega foglio di stile esterno
Premete il pulsante Sfoglia per selezionare il file CSS da associare e poi scegliete se volete importare le istruzioni CSS nel file HTML (Importazione) o se volete semplicemente collegarle (Collegamento). Quando avete terminato, premete OK per tornare alla finestra Nuovo documento.
Una volta definite le opzioni per il nuovo documento (per ora creiamo un file vuoto, senza indicazioni di stile), premete il pulsante Crea per avviarne la creazione. Dreamweaver vi mostrerà la nuova pagina, come abbiamo già visto nello scorso articolo, intitolato "Configurare e gestire un sito con Dreamweaver CS4".
Ora vediamo come impostare le proprietà generali della pagina, come il colore di sfondo, il font di base, i colori dei testi e dei link ecc.
Dreamweaver permette di definire tutte queste caratteristiche, sia mediante istruzioni CSS sia mediante i tag HTML. In conformità alle indicazioni del W3C, che raccomanda l’uso dei CSS per tutte le indicazioni di stile e per definire l’aspetto delle pagine, ci sentiamo di consigliare di evitare l’utilizzo dei tag HTML per queste indicazioni, ma di ricorrere alla formattazione CSS.
Nota
W3C (The World Wide Web Consortium) è il principale ente che si occupa di standard per Internet. Per maggiori informazioni è possibile consultare il sito del W3C.
Vediamo subito come definire le proprietà complessive della pagina. Scegliete Elabora > Proprietà di pagina oppure premete il pulsante Proprietà di pagina sulla Finestra di ispezione delle Proprietà. Sarà visualizzata la finestra Proprietà pagina, visibile in figura 4.
Figura 4: la finestra Proprietà pagina
Le proprietà sono suddivise per categorie. Nell’ottica di evitare l’utilizzo di indicazioni HTML per la formattazione delle pagine, vi sconsigliamo di usare la categoria Aspetto (HTML). Utilizzate piuttosto tutte le altre categorie. Cominciamo la nostra descrizione dalla categoria Aspetto CSS (che è la categoria predefinita). Qui è possibile impostare i colori per il testo, lo sfondo e le dimensioni dei margini della pagina. Per quanto riguarda lo sfondo, potete scegliere quale immagine utilizzare ed, eventualmente, se volete ripeterla più volte nella pagina (se le sue dimensioni lo consentono).
Invece, per quanto riguarda i caratteri da utilizzare per il testo della pagina, Dreamweaver dispone di combinazioni di caratteri predefinite, che si possono scegliere dall’elenco a discesa Carattere pagina. Se la combinazione desiderata non è presente nell’elenco, scegliete la voce Modifica elenco caratteri.
Nota
È opportuno specificare una combinazione di caratteri, dato che il carattere specificato viene recuperato sul PC dell’utente finale e non viene accluso alle pagine. Quindi è bene fornire un’alternativa nel caso in cui il carattere specificato per primo non sia disponibile.
Dreamweaver vi mostrerà una finestra da cui potete scegliere la combinazione di caratteri che preferite. La nuova combinazione di caratteri sarà poi disponibile anche per le pagine successive. Dopo aver fatto le vostre scelte, portatevi nella categoria Collegamenti (CSS), visibile in figura 5. Qui si possono impostare le proprietà dei collegamenti della pagina.
Figura 5: la categoria Collegamenti (CSS)
Oltre al carattere e alle sue dimensioni, potete scegliere lo stile del collegamento o, meglio, il tipo di sottolineatura che utilizza e i colori dei collegamenti mai visitati, di quelli già visitati e di quelli attivi (ossia quelli su cui si è appena fatto clic). Si può stabilire anche il colore che assume un collegamento quando il puntatore del mouse passa su di esso (Rollover collegamenti).
Qualunque scelta facciate per il colore dei collegamenti, è bene che manteniate evidente la distinzione tra collegamenti già visitati e collegamenti da visitare, per aiutare gli utenti a orientarsi nelle pagine.
Nella categoria Intestazioni (CSS), si può stabilire l’aspetto e la dimensione dei titoli della pagina, da quelli di primo livello a quelli di sesto livello.
Nella categoria Titolo/Codifica, visibile in figura 6, potete, innanzitutto, definire il titolo della vostra pagina.
Figura 6: la categoria Titolo/Codifica
Il titolo del documento è molto importante ed è il primo elemento che un utente vede della vostra pagina, visto che appare nella barra del titolo del documento stesso ed è usato anche per memorizzare la pagina nei Preferiti. Pertanto sceglietelo con cura e non dimenticate di impostarlo per tutte le pagine. Oltre che in questa finestra, è possibile definire il titolo di un documento nella casella apposita sulla barra degli strumenti del documento, visibile in figura 7.
Nota
Il Titolo di una pagina è molto importante per il posizionamento nei motori di ricerca, scegliete accuratamente parole chiave che distinguano la pagina e costruite una frase con esse. Questa è una delle tecniche di SEO, sul quale Come fare a... ha pubblicato un intero speciale.
Figura 7: definire il titolo di un documento
Abbiamo già parlato di doctype, mentre non abbiamo ancora affrontato la questione della codifica, ossia il modo in cui i caratteri che digitiamo vengono convertiti in un formato numerico tale da poter essere memorizzato sul PC.
W3C raccomanda, quando possibile, l’utilizzo della codifica Unicode (UTF-8), che è anche la codifica predefinita in Dreamweaver.
Quando si sceglie questa codifica, Dreamweaver chiede anche di specificare come si vuole effettuare la normalizzazione Unicode. Per normalizzazione Unicode si intende un processo in cui si eliminano soluzioni diverse per codificare la stessa lettera composta.
Facciamo un po’ di chiarezza. Unicode considera le lettere composte da un carattere e un segno diacritico (ä, ã, à…) come se si trattasse di due elementi distinti: il carattere e il diacritico. Sarà poi il motore di rendering a “ricomporre” l’unità della lettera. Questo sistema permette di aggiungere il diacritico a qualsiasi lettera dell’alfabeto.
Però, a causa dei limiti dei vecchi sistemi di rendering e per compatibilità con le codifiche pre-Unicode, Unicode comprende anche molte centinaia di caratteri precomposti, che codificano con un solo codice la sequenza formata da una lettera e il diacritico.
Per ottimizzare il testo, è opportuno procedere alla normalizzazione Unicode e utilizzare un solo sistema (combinazione carattere + segno diacritico o carattere composto) per esprimere la stessa lettera.
Esistono diversi sistemi per farlo. Il sistema più diffuso è il sistema detto C ed è quello che vi consigliamo di usare.
Per maggiori informazioni sulla normalizzazione Unicode, consultate questa pagina.
Per la codifica UTF 8 è disponibile anche l’opzione (obbligatoria per le codifiche UTF 16 e UTF 32) Include firma Unicode (BOM).
Una firma BOM (Byte Order Mark) contiene da 2 a 4 byte inseriti all’inizio di un file di testo e identifica il file come Unicode, definendo anche l’ordine dei byte successivi. Se usate la codifica UTF 8, potete tranquillamente ignorare questa voce.
Per concludere questa panoramica sulle proprietà di pagina, accenniamo brevemente alla categoria Immagine di ricalco.
Un’immagine di ricalco è un’immagine preparata magari da un grafico, o comunque da una terza persona, da utilizzare come base per creare il layout della pagina.
Dreamweaver permette di visualizzare questa immagine come sfondo della pagina e usarla come guida durante la costruzione della pagina stessa.
Per selezionare un’immagine di ricalco, è sufficiente portarsi all’apposita categoria e, in corrispondenza della casella Immagine di ricalco, premere il pulsante Sfoglia.
Se il file scelto non si trova all’interno della cartella del sito, Dreamweaver vi avvisa e vi chiede se volete salvarla nella cartella del sito.
Se desiderate tenere tutto il materiale relativo al sito in un’unica cartella (opzione raccomandabile), scegliete di copiare il file nella cartella del sito. Una volta terminata la creazione della pagina, si potrà tornare alla finestra Proprietà di pagina per eliminare l’immagine di ricalco semplicemente cancellando il suo nome e percorso dall’apposita casella.
Qualsiasi scelta abbiate fatto per le proprietà della pagina (noi abbiamo impostato uno sfondo bianco, il font Verdana per il testo, il colore rosso senza sottolineatura per i collegamenti non visitati e l’arancio per quelli visitati, l’effetto di sottolineatura per i rollover, e anche le dimensioni e i colori dei titoli principali della pagina H1 e H2), noterete che sono state definite tramite CSS, come visibile nella figura 8.
Figura 8: il codice CSS che imposta le proprietà della pagina
Proviamo a lavorare un po’, in maniera semplice, su questa pagina.
Per cominciare, inseriamo al suo interno del contenuto, ottenendo un documento simile a quello della figura 9.
Figura 9: il testo digitato direttamente
Per inserire le formattazioni presenti nel documento originale (o comunque quelle che desiderate), potete usare i comandi che trovate nella finestra di ispezione delle Proprietà, che si trova nella parte bassa della schermata di Dreamweaver.
Fate clic all’interno del titolo e, nella finestra di ispezione delle Proprietà, aprite il menu a discesa Formato e scegliete Titolo 1 come mostrato nella figura 10. Come vedete nella figura 11, il titolo appare con le caratteristiche indicate nelle proprietà della pagina per i titoli H1.
Figura 10: applicare lo stile Titolo 1
Nota
Per ora inseriamo solo alcune semplici impostazioni di formattazione. Per la formattazione generale creeremo un foglio di stile. Sarebbe opportuno applicare tramite CSS anche le formattazioni che applichiamo ora, data la raccomandazione del WC3 di separare in maniera netta i contenuti e le indicazioni di formattazione. È utile comunque esplorare tutte le potenzialità di Dreamweaver.
Figura 11: al titolo della pagina è stato applicato lo stile Titolo 1
Attraverso la finestra di ispezione delle Proprietà, potete impostare anche altre formattazioni per la pagina. Per esempio, selezionate una parola e poi premete il tasto B, visibile in figura 12, per impostare il grassetto.
Figura 12: applicare il grassetto
Esistono anche opzioni di formattazione non accessibili dalla finestra di ispezione delle Proprietà, come la sottolineatura. In questo caso, dopo aver evidenziato l’ultimo paragrafo (che nel documento originale è sottolineato), dovrete scegliere Formato > Stile > Selezionato. Sia per il grassetto sia per la sottolineatura, Dreamweaver usa i tag HTML per definire lo stile. È possibile, e addirittura auspicabile, ricorrere ai fogli di stile CSS.
Figura 13: le indicazioni di stile date con i tag HTML
Notate, comunque, che per il grassetto Dreamweaver utilizza il tag <strong>, in ogni caso preferibile a <b> in quanto si tratta di uno stile logico e non fisico. In altre parole, <strong> non indica come deve apparire il testo, ma che quel testo deve avere una funzione di rilievo nel documento. Questo rilievo viene poi reso visivamente con il grassetto.
|
