5 Creare un layout di pagina

5
Creare un layout di pagina
Panoramica della lezione
In questa lezione imparerai:
• Le nozioni fondamentali sulla progettazione delle pagine web
• Come creare miniature e wireframe di progettazione
• Come inserire e formattare nuovi componenti in un layout CSS
predefinito
• Come utilizzare Navigazione codice per identificare la formattazione
CSS
• Come verificare la compatibilità con i browser
Per completare questa lezione occorrono circa 1 ora e 30 minuti. Prima di
cominciare, assicurati di avere a disposizione sul disco rigido i file di esempio della cartella lesson05, come descritto nella sezione “Iniziare” all’inizio
del volume. Se non stai completando le lezioni del libro nell’ordine in cui
sono presentate, utilizza il metodo descritto in “Svolgere le lezioni in ordine
casuale” nella sezione “Iniziare” all’inizio del volume.
80
Se utilizzi miniature e wireframe, o anche solo una fervida
immaginazione, Dreamweaver può aiutarti a trasformare
rapidamente i concetti di progettazione in layout CSS
completi basati su standard.
81
Nozioni fondamentali sul web design
Prima di iniziare qualsiasi progetto di web design per te o per un cliente devi rispondere
a tre importanti domande:
• Qual è lo scopo del sito web?
• Chi è il cliente?
• Come arrivano qui?
Qual è lo scopo del sito web?
Il sito web venderà o supporterà un prodotto o un servizio? Il sito ha fini di intrattenimento o di gioco? Fornirai informazioni e/o notizie? Avrai bisogno di un carrello
acquisti o di un database? Devi accettare pagamenti con carta di credito o trasferimenti
elettronici? Lo scopo del sito web permette di capire quale tipo di contenuto dovrai
sviluppare e quali tecnologie dovrai integrare nel sito.
Chi è il cliente?
I clienti sono adulti, bambini, anziani, professionisti, appassionati, uomini, donne?
Sapere chi è il tuo target è fondamentale per la progettazione e per le funzionalità: un
sito destinato ai bambini necessita probabilmente di animazioni, interattività e colori
vivaci, mentre gli adulti necessitano di contenuti seri e analisi approfondite. Gli anziani
potrebbero apprezzare il testo in caratteri grandi e altre funzioni di accessibilità.
Un buon primo passo può essere la valutazione della concorrenza: esiste un sito web
che svolge lo stesso servizio o vende lo stesso prodotto? Ha successo? Non dovrai
necessariamente copiare gli altri, solo perché il tuo scopo è lo stesso. Prendi Google e
Yahoo: offrono lo stesso servizio di base ma i loro siti non potrebbero essere più diversi.
Esistono due siti più diversi di Google e Yahoo?
Eppure entrambi svolgono lo stesso servizio.
82 LEZIONE 5 Creare un layout di pagina
Come arrivano qui?
Sembra una domanda strana, visto che si parla di Internet, ma come nel caso di
un’azienda tradizionale i clienti online possono raggiungerti in numerosi modi diversi.
Per esempio, accedono al sito da un computer desktop, da un portatile, da un PDA o
da un telefono cellulare? Utilizzano Internet ad alta velocità o un servizio di connessione remota? Quale browser preferiscono utilizzare e quali sono le dimensioni e la
risoluzione dello schermo? Queste risposte possono dirti molto sul tipo di esperienza
che i tuoi clienti si aspettano. Gli utenti delle connessioni remote e dei telefoni cellulari non vogliono vedere molta grafica o video, mentre gli utenti con grandi monitor
a schermo piatto e connessioni ad alta velocità possono esigere tutto il movimento e
l’animazione che puoi inviare loro.
Dove puoi procurarti queste informazioni? Alcune puoi ottenerle attraverso minuziose
ricerche e analisi demografiche, altre puoi recuperarle effettuando tentativi basati sui
tuoi gusti e sulla conoscenza del mercato. Molte di queste informazioni sono però già
disponibili su Internet. W3C, per esempio, tiene traccia di numerose statistiche relative
all’accesso e all’utilizzo, aggiornandole regolarmente:
• www.w3schools.com/browsers/browsers_stats.asp: fornisce ulteriori informazioni
sulle statistiche relative ai browser (informazioni in inglese).
• www.w3schools.com/browsers/browsers_os.asp: fornisce la suddivisione per
sistema operativo (informazioni in inglese).
• www.w3schools.com/browsers/browsers_display.asp: consente di ottenere le
più recenti informazioni sulle risoluzioni degli schermi (informazioni in inglese).
Se stai riprogettando un sito esistente sarà il servizio di web hosting a fornirti preziose
statistiche sugli schemi storici del traffico e persino sui visitatori del sito. Se il sito è
ospitato su un serve di tua proprietà puoi ricorrere a strumenti di terze parti, come
Google Analytics e Adobe Omniture, da integrare nel codice per effettuare le rilevazioni
gratuitamente o comunque a un costo contenuto.
Analizzando le statistiche puoi scoprire che Windows domina Internet (dall’80 al
90%) e gli utenti sono quasi equamente divisi tra Firefox (46%) e le diverse versioni di
Internet Explorer (37%). La risoluzione dello schermo scelta dalla maggior parte degli
utenti è 1024 per 768 pixel o superiore. Se non fosse per i telefoni cellulari e i PDA,
queste statistiche rappresenterebbero un’ottima notizia per la maggior parte dei web
designer e degli sviluppatori. La verità è che l’ambito e la penetrazione dell’uso dei
telefoni cellulari su Internet sono ancora informazioni sconosciute.
Ogni giorno sempre più persone utilizzano i cellulari per accedere a Internet; gli utenti
più giovani li utilizzano per accedere a Internet ancora più spesso di quanto non utilizzino i computer desktop. Si pone così uno spinoso problema per i web designer. Da
una parte, la dimensione degli schermi dei telefoni cellulari è una frazione di quella
dei monitor a schermo piatto, anche dei più piccoli: come puoi adattare un progetto
di pagina su due o tre colonne a uno spazio di 200-300 pixel?
Adobe dreamweaver CS5 Classroom in a Book 83
Un altro problema riguarda il fatto che solo gli smartphone di fascia alta sono in grado
di eseguire il contenuto Flash e altre applicazioni basate su client disponibili oggi: devi
tenerne conto durante la progettazione del sito.
Molti dei concetti della progettazione per
la stampa non possono essere applicati al
web, perché in questo
caso non detieni il controllo sull’esperienza
dell’utente. Una pagina progettata con cura
per un tipico monitor
a schermo piatto può
rivelarsi inutilizzabile su
un telefono cellulare.
Scenario
In questo libro hai già lavorato al sito web di Meridien GreenStart, un’organizzazione
fittizia dedita all’investimento e agli interventi nel campo dell’ecologia. Questo sito
web offrirà numerosi prodotti e servizi diversi; di conseguenza necessita di un’ampia
varietà di tipi di pagine web, tra cui pagine dinamiche che utilizzano tecnologie server
come ASP, ColdFusion e PHP.
I tuoi clienti appartengono a un vasto settore anagrafico che comprende visitatori di
ogni età e con diversi livelli di istruzione. Sono persone interessate alle condizioni
dell’ambiente e che si impegnano nella conservazione, nel riciclaggio e nel riutilizzo
delle risorse umane e naturali.
Le ricerche di marketing indicano che la maggior parte dei clienti utilizza computer
desktop o portatili e si connette tramite servizi Internet ad alta velocità; puoi però prevedere che il 10-20% dei visitatori utilizzi il telefono cellulare e altri dispositivi mobili.
Lavorare con miniature e wireframe
Dopo l’analisi delle tre domande sullo scopo del sito web, sui clienti e sul metodo di
accesso, il prossimo passaggio è valutare il numero di pagine necessarie, lo scopo di
tali pagine e, infine, il loro aspetto.
84 LEZIONE 5 Creare un layout di pagina
Creare miniature
Molti web designer iniziano dal disegno di miniature con carta e matita. Le miniature
rappresentano una sorta di elenco grafico delle pagine che devi creare per il sito web.
Le miniature possono anche aiutarti a elaborare la navigazione nel sito web: puoi disegnare linee tra le miniature per dimostrare il collegamento tra esse per la navigazione.
Le miniature elencano
le pagine da creare e i
collegamenti tra esse.
La maggior parte dei siti è divisa in livelli: il primo livello include tutte le pagine nella
navigazione principale, quelle che un visitatore può raggiungere direttamente dalla
home page; il secondo livello include le pagine che puoi raggiungere solo con azioni
specifiche o da posizioni prestabilite, per esempio un carrello acquisti o una pagina
con i dettagli di un prodotto.
Creare un progetto di pagina
Dopo aver capito ciò di cui hai bisogno per il sito in termini di pagine, prodotti e servizi,
puoi passare a stabilire quale sarà l’aspetto di queste pagine. Crea un elenco dei componenti
da inserire su ogni pagina, per esempio intestazioni e piè di pagina, navigazione e aree per
il contenuto principale e le barre laterali (se presenti), e metti da parte gli elementi che
non saranno necessari su ogni pagina. Quali altri fattori devi prendere in considerazione?
L’identificazione dei
componenti fondamentali per ogni pagina aiuta
a creare un progetto di
pagina efficace in grado di soddisfare le tue
esigenze.
Adobe dreamweaver CS5 Classroom in a Book 85
Hai a disposizione un logo aziendale, un’identità aziendale, un’immagine grafica o una
combinazione di colori da accentuare? Possiedi pubblicazioni, brochure o annunci
pubblicitari da emulare? È utile raccogliere tutto il materiale in una cartellina per
valutarlo nell’insieme sulla scrivania o sul tavolo della sala conferenze: se sei fortunato,
da questo “collage” potrà nascere un tema.
Dopo aver creato l’elenco di controllo dei componenti necessari su ogni pagina, sviluppa alcune bozze del layout utilizzabile con questi componenti. La maggior parte dei
designer si accontenta di un progetto di base che rappresenti un buon compromesso
tra flessibilità e interesse visivo. La riduzione al minimo del numero di progetti di
pagina potrebbe sembrare limitante, ma è fondamentale per produrre un sito professionale. Il motivo è lo stesso per cui i professionisti, per esempio i medici e i piloti
delle linee aeree, indossano un’uniforme: la coerenza trasmette ai visitatori un senso
di professionalità e fiducia.
I wireframe consentono di sperimentare in
modo facile e veloce
vari progetti di pagina
senza perdere tempo
nella scrittura di codice.
Mentre valuti l’aspetto delle pagine devi prendere in considerazione anche la dimensione e la posizione dei componenti di base. La posizione di un componente può
influire drasticamente sull’impatto e sull’utilità dello stesso. Nel settore della stampa
i designer sanno che l’angolo superiore sinistro di un layout è una delle “posizioni di
potere”, dove inserire gli aspetti importanti di un progetto come un logo o un titolo: il
motivo è che nella cultura occidentale leggiamo da sinistra a destra e dall’alto verso il
basso. La seconda posizione di potere è quindi l’angolo inferiore destro, corrispondente
all’ultimo elemento visto al termine della lettura.
Purtroppo, nel web design questa teoria non è altrettanto valida per un motivo molto
semplice: non puoi mai essere certo del modo in cui l’utente vede il tuo progetto (utilizza
uno schermo piatto da 20 pollici o un telefono cellulare da 2 pollici?).
L’unica cosa di cui puoi essere certo è che l’utente vedrà l’angolo superiore sinistro
della pagina. Vuoi sprecare questa sezione inserendovi il logo dell’azienda? Non sarebbe
più utile posizionarvi un menu di navigazione? Questo è uno dei principali dilemmi
del web designer: preferisci ottenere una progettazione interessante dal punto di vista
visivo, prettamente utile o una via di mezzo?
86 LEZIONE 5 Creare un layout di pagina
Creare wireframe
Per decidere quale sarà la progettazione vincente puoi ricorrere ai wireframe, un mezzo
rapido per elaborare la struttura di ogni pagina nel sito. Un wireframe è una versione
più estesa di una miniatura che delinea una bozza di ogni pagina introducendo maggiori dettagli sui componenti, per esempio i nomi dei collegamenti e i titoli principali.
Questo passaggio aiuta a rilevare o prevedere i problemi prima di accorgersene durante
il lavoro sul codice.
Il wireframe per il progetto finale dovrebbe
identificare i componenti e le caratteristiche relative a contenuto, colori
e dimensioni.
IE8 13.3%
Una volta elaborati i concetti di base, molti designer compiono un altro passo avanti
creando una bozza a dimensioni reali o una dimostrazione di fattibilità utilizzando un
programma come Adobe Fireworks, Photoshop o persino Illustrator. È utile saperlo,
IE7 13.3%
perché scoprirai che alcuni clienti non sono per nulla propensi a concedere l’approvazione
solo sulla base di alcuni schizzi a matita. Il vantaggio è questi programmi permettono
di esportare i risultati in un’immagine a dimensioni reali (in formato JPEG, GIF o PNG)
che puoi visualizzare in un browser. Tali
bozze sono perfette per mostrare l’aspetto
IE6 11.1%
effettivo del progetto, ma richiedono poco tempo per la loro creazione.
E Suggerimento: Per
anni i designer hanno
iniziato la progettazione
in Fireworks, dove potevano creare una bozza
totalmente funzionante
con menu, collegamenti
e aree attive; la bozza
poteva poi essere esportata in un layout HTML
basato su CSS e modificata in Dreamweaver.
In alcuni casi la creazione di una bozza in
Photoshop o Fireworks
può farti risparmiare
molte ore di scrittura
di codice prima di ottenere l’approvazione.
Adobe dreamweaver CS5 Classroom in a Book 87
Visualizzare in anteprima la pagina completata
Per comprendere il layout su cui lavorerai in questa lezione puoi visualizzare la pagina
completata in anteprima nel browser.
1 Apri Adobe Dreamweaver CS5.
2 Se necessario, premi F8 per aprire il pannello File e seleziona DW-CIB dall’elenco
dei siti.
3 Espandi la cartella lesson05 nel pannello File.
4 Fai doppio clic su layout_final.html per aprirlo.
Questa pagina rappresenta il layout che creerai nella lezione; per certi aspetti è
simile alla pagina che hai creato nella lezione 4, “Primi passi”, ma differisce da essa
per l’area laterale a sinistra e per i due componenti di navigazione.
5 Scegli File > Chiudi.
Modificare un layout CSS esistente
I layout CSS predefiniti forniti da Dreamweaver sono sempre un valido punto di partenza: sono facili da modificare e adattabili alla maggior parte dei progetti. Ora creerai
una pagina di prova corrispondente al progetto del wireframe finale utilizzando un
layout CSS di Dreamweaver. Questa pagina sarà poi utilizzata per creare il modello
di progetto principale nelle lezioni successive. Per iniziare, individuerai il layout che
meglio corrisponde al wireframe:
88 LEZIONE 5 Creare un layout di pagina
1 Scegli File > Nuovo.
2 Scegli Pagina vuota > HTML nella finestra di dialogo Nuovo documento. Esamina
i 16 layout CSS di esempio per trovare quello più adatto alle tue esigenze.
Il layout 2 colonne fisse, barra laterale sinistra, intestazione e piè di pagina è quello
che ha più elementi in comune con il progetto di destinazione.
3 Seleziona 2 colonne fisse, barra laterale sinistra, intestazione e piè di pagina dall’elenco
dei layout. Fai clic su Apri/Crea.
4 Passa alla vista Progettazione, se necessario. Fai clic in ciascuna area del contenuto
e analizza la struttura dei componenti della pagina utilizzando il selettore di tag
nella parte inferiore della finestra del documento. Non aver paura di utilizzare la
vista Codice, se pensi possa esserti utile.
Adobe dreamweaver CS5 Classroom in a Book 89
Utilizzando le competenze apprese nelle ultime lezioni dovresti essere in grado di
sezionare facilmente questo layout CSS. La pagina è costituita da quattro elementi
<div> di contenuto (header, footer, sidebar1 e content) e da un <div> che racchiude
tutti gli altri (container). Per capire esattamente il legame tra questo progetto e CSS
può essere utile disattivare gli stili CSS.
5 Scegli Visualizza > Stile di rendering > Visualizza stili per disattivare gli stili CSS.
La visualizzazione degli stili è attiva per impostazione predefinita (come indicato
dal segno di spunta nel menu); selezionando il comando puoi disattivare temporaneamente gli stili CSS.
6 Osserva l’identità e l’ordine di ogni componente della pagina.
Senza CSS puoi vedere chiaramente lo “scheletro” HTML della pagina: è istruttivo
capire quale sarà l’aspetto della pagina se per qualche ragione CSS è disabilitato o
non è supportato da un particolare browser. Puoi anche identificare con facilità i
componenti della pagina e la loro struttura.
In effetti l’ordine degli elementi è un aspetto importante del funzionamento degli stili
CSS e del posizionamento (che a volte non funziona). Sebbene non sia obbligatorio,
gli elementi visualizzati più in alto nella pagina, come l’intestazione, di solito sono
inseriti prima degli elementi visualizzati in basso; allo stesso modo, gli elementi
allineati a sinistra dovrebbero essere inseriti prima di quelli allineati a destra. Di
conseguenza, l’ordine degli elementi in questo layout (header, sidebar1, content e
footer) è conforme alle procedure consigliate di CSS. div.container riunisce tutti gli
elementi e aiuta a fare in modo che si comportino correttamente nei diversi browser.
L’ultimo aspetto importante che devi osservare è il menu di navigazione, che senza
gli stili CSS è ritornato a essere un semplice elenco puntato di collegamenti ipertestuali. Pochi anni fa questo menu sarebbe stato realizzato con immagini e complesse
90 LEZIONE 5 Creare un layout di pagina
animazioni di rollover: in caso di errore tale menu diveniva confuso e inutilizzabile.
Anche se i collegamenti ipertestuali erano ancora funzionanti, senza le immagini
non esistevano parole che indicassero all’utente che cosa selezionare. In questo
caso, invece, anche senza gli stili i collegamenti ipertestuali sono sempre utilizzabili.
7 Scegli Visualizza > Stile di rendering > Visualizza stili per riattivare gli stili CSS.
È buona norma abituarsi a salvare i file prima di modificare le impostazioni o di
aggiungere contenuto. Dreamweaver non offre funzionalità di backup o recupero
dei file; se si verifica un arresto anomalo prima del salvataggio, tutto il lavoro che
hai svolto nei file aperti e non salvati sarà perso.
8 Scegli File > Salva. Quando viene visualizzata la finestra di dialogo Salva con nome,
individua la cartella principale del sito, se necessario. Assegna al file il nome mylayout.html e fai clic su Salva.
Dreamweaver di solito salva i file HTML nella cartella predefinita specificata nella
definizione del sito, ma è buona norma ricontrollare la destinazione per garantire
che i file siano al posto giusto. Tutte le pagine HTML create per il sito finale saranno
salvate nella cartella principale del sito.
Aggiungere un’immagine di
sfondo all’intestazione
Il progetto finale contiene un banner simile a quello utilizzato nella lezione precedente.
Puoi inserire il banner direttamente nell’intestazione, ma se lo aggiungi come immagine
di sfondo potrai mantenere il <div> libero per altri contenuti.
1 Scegli Finestra > Stili CSS per visualizzare il pannello Stili CSS, se necessario.
2 Seleziona il segnaposto dell’immagine Insert_logo (180 x 90) nell’intestazione e
premi Canc.
Dopo l’eliminazione del segnaposto dell’immagine, l’intestazione vuota viene ridotta
a una frazione della dimensione precedente, in quanto non esiste più una specifica
di altezza CSS.
3 Fai doppio clic sulla regola .header.
4 Nella categoria Sfondo della finestra di dialogo Definizione regola CSS per .header,
fai clic sul pulsante Sfoglia accanto al campo Background-image.
5 Seleziona banner2.jpg e osserva le dimensioni dell’immagine. Fai clic su OK/Scegli.
Adobe dreamweaver CS5 Classroom in a Book 91
Osserva che questo banner non presenta lo spazio bianco aggiuntivo nella parte
inferiore come nella lezione 4. Il nuovo banner conterrà meglio il menu di navigazione orizzontale mostrato nel progetto del wireframe. L’eliminazione della parte
bianca consente anche di proteggere l’aspetto complessivo della pagina nel caso
in cui l’intestazione debba essere espansa in altezza (eventualità in cui tale parte
dell’immagine risulterebbe esposta). Tuttavia, non sei completamente fuori dai guai:
ricordati che le immagini di sfondo vengono ripetute sia in verticale sia in orizzontale
per impostazione predefinita. Per garantire che l’impostazione non provochi effetti
indesiderati devi cambiare il comportamento di ripetizione.
6 Scegli no-repeat dal menu Background-repeat.
7 Fai clic su Applica per visualizzare il risultato.
L’intestazione è larga ma non alta a sufficienza per visualizzare l’intera immagine di
sfondo. Le immagini di sfondo non sono realmente inserite in un elemento, quindi
non hanno effetto sulle dimensioni di un contenitore. Per garantire che il <div>
abbia una larghezza sufficiente per visualizzare l’intera immagine devi aggiungere
una specifica di altezza alla regola .header.
8 Nella categoria Elementi di pagina digita 130 nel campo Height e scegli px dal menu
Unità di misura. Fai clic su Applica.
In questo caso non ha senso specificare l’attributo di larghezza: hai imparato nella
lezione 4 che la larghezza del layout in quell’esempio era specificata nella regola
.container. È quindi probabile che accada anche in questo layout.
Aggiungi qualche tocco finale all’intestazione prima di fare clic su OK.
9 Nella categoria Sfondo, digita #090 nel campo Background-color. Fai clic su OK.
È importante iniziare a prevedere che cosa accadrà nel caso qualcosa vada storto,
per esempio se l’immagine di sfondo non viene visualizzata. Il verde specificato
fa parte della combinazione di colori del sito e sarà utilizzato nell’intero sito web.
10 Scegli File > Salva.
92 LEZIONE 5 Creare un layout di pagina
Inserire nuovi componenti <div>
Il progetto del wireframe mostra due nuovi elementi <div> aggiunti al layout predefinito: il primo contiene l’immagine della farfalla, il secondo la barra di navigazione
orizzontale. Hai notato che la farfalla si sovrappone sia all’intestazione sia alla barra di
navigazione orizzontale? Esistono diversi modi per ottenere questo effetto; in questo
caso può essere utile un <div> con posizionamento assoluto.
1 Posiziona il cursore nell’intestazione, se necessario. Seleziona il selettore di tag
<div.header>. Premi il tasto Freccia sinistra.
##Nota: Per capire me-
glio il funzionamento
di questa tecnica puoi
provare a eseguirla nella
vista Dividi.
Con questa procedura il cursore dovrebbe essere posto prima del tag di apertura
<div> per l’intestazione. Se hai premuto il tasto Freccia destra il cursore si è invece
spostato all’esterno del tag di chiusura </div> dell’intestazione. Tieni a mente questa
tecnica: la utilizzerai spesso in Dreamweaver per inserire il cursore in una posizione
specifica prima o dopo un elemento di codice senza dover passare alla vista Codice.
2 Scegli Inserisci > Oggetti layout > Div PA.
In alto a sinistra nell’intestazione viene inserito un div PA. Osserva l’ID (#apDiv1)
assegnato al nuovo div nel selettore di tag: al pannello Stili CSS è stata aggiunta
una regola corrispondente.
Nelle precedenti versioni di HTML sarebbe stato necessario assegnare dimensione
e posizione di un div AP utilizzando gli attributi HTML inline; per favorire i nuovi
standard web basati su CSS, ora queste specifiche vengono applicate da CSS attraverso un ID univoco creato da Dreamweaver all’inserimento dell’elemento.
3 Fai clic sul selettore di tag <div#apDiv1>.
Nella finestra di ispezione proprietà vengono visualizzate le proprietà per <div#apDiv1>.
Osserva le specifiche di altezza e larghezza visualizzate nella finestra di ispezione
proprietà: questi valori sono effettivamente archiviati nella regola #apDiv1 generata
da Dreamweaver.
##Nota: Nelle precedenti versioni di
Dreamweaver, i valori
immessi nella finestra
di ispezione proprietà
erano aggiunti come
attributi HTML inline;
in CS5 la maggior parte
dei valori sarà aggiunta come marcatura CSS
personalizzata.
Adobe dreamweaver CS5 Classroom in a Book 93
4 Posiziona il cursore in <div#apDiv1>.
5 Scegli Inserisci > Immagine. Seleziona butterfly-ovr.gif dalla cartella images. Osserva
le dimensioni dell’immagine, pari a 170 per 150 pixel.
6 Fai clic su OK/Scegli.
Viene visualizzata la finestra di dialogo Attributi di accessibilità tag immagine.
##Nota: Nella maggior
parte dei casi un’immagine più grande del relativo contenitore provocherà una distorsione
dello stesso. L’utilizzo di
immagini troppo grandi
può distruggere un layout CSS progettato con
cura. Presta particolare
attenzione alle dimensioni delle immagini
utilizzate nel sito.
7 Digita GreenStart Logo nel campo Testo alternativo della finestra di dialogo Attributi di accessibilità tag immagine. Fai clic su OK.
Il div PA è leggermente più grande dell’immagine della farfalla: anche se lo spazio
aggiuntivo non causa alcun problema, è bene che le dimensioni del contenitore
corrispondano a quelle dell’immagine.
8 Fai doppio clic sulla regola #apDiv1 nel pannello Stili CSS.
Viene visualizzata la finestra di dialogo Definizione regola CSS per #apDiv1.
9 Nella categoria Elementi di pagina digita 170 nel campo Width, quindi digita 150
nel campo Altezza.
Le dimensioni del <div> ora corrispondono all’altezza e alla larghezza dell’immagine.
10 Deseleziona la casella di controllo Uguale per tutto nel riquadro Margin.
11 Digita 15 px nel campo Top di Margin e digita 30 px nel campo Left di Margin. Fai
clic su OK.
Una volta chiusa la finestra di dialogo di definizione della regola, <div#apDiv1>
appare come elemento mobile sopra l’intestazione, a 15 pixel dalla parte superiore
e a 30 pixel da sinistra.
Un div AP si comporta come un agente libero: ignora gli altri componenti della
pagina e può essere posizionato anche sopra o sotto altri elementi <div> e contenuti.
94 LEZIONE 5 Creare un layout di pagina
<div#apDiv1> è completo; ora creerai il <div> per la barra di navigazione orizzontale.
12 Posiziona di nuovo il cursore nell’intestazione. Fai clic sul selettore di tag <div.
header>. Premi il tasto Freccia destra.
Il cursore dovrebbe essere posto dopo il tag di chiusura </div> dell’intestazione.
13 Scegli Finestra > Inserisci, se il pannello Inserisci non è visibile. Scegli Layout dal
menu Categoria e fai clic su Inserisci tag Div.
Viene visualizzata la finestra di dialogo Inserisci tag Div. Osserva che nel menu
Inserisci è indicato “Nel punto di inserimento”: il nuovo <div> sarà inserito nel
codice in tale posizione e non sarà disposto attorno ad alcun altro elemento.
14 Digita h-navbar nel campo ID e fai clic sul pulsante Nuova regola CSS.
Viene visualizzata la finestra di dialogo Nuova regola CSS, in cui è stato immesso
automaticamente #h-navbar nel campo Nome selettore. Fai clic su OK.
15 Nella categoria Tipo digita 90 nel campo Font-size e seleziona il simbolo di percentuale (%) dall’elenco a comparsa. Digita #FFC nel campo Color.
16 Nella categoria Sfondo digita #090 nel campo Background-color. Fai clic sul pulsante
Sfoglia accanto al campo Background-image.
17 Seleziona background.jpg dalla cartella images. Fai clic su OK/Scegli.
18 Scegli repeat-x dal menu Background-repeat.
19 Nella categoria Blocco di testo scegli right nel campo Text-align.
Adobe dreamweaver CS5 Classroom in a Book 95
20 Nella categoria Elementi di pagina deseleziona la casella di controllo Uguale per
tutto nel riquadro Padding. Digita 5 px nel campo Top di Padding, 20 px nel campo
Right e 5 px nel campo Bottom.
21 Nella categoria Bordo immetti i seguenti valori solo nei campi Bottom: solid, 2 px,
#060. Fai clic su OK nella finestra di dialogo Definizione regola CSS. Fai clic su OK
nella finestra di dialogo Inserisci tag Div.
##Nota: Per immet-
tere i valori nel campo
Bottom, ricorda di deselezionare le caselle
di controllo Uguale per
tutto in ogni sezione.
Il <div#h-navbar> viene visualizzato sotto l’intestazione ed è completamente
formattato e riempito con un testo segnaposto.
22 Elimina il testo segnaposto. Come segnaposti per i collegamenti di navigazione
dell’organizzazione digita Home | About Us | Contact Us in <div#h-navbar>.
Convertirai questi elementi di testo in collegamenti ipertestuali nella lezione 10,
“Impostare la navigazione”.
23 Premi Ctrl+S (Windows) Comando+S (Mac OS) per salvare il file.
Modificare la larghezza e il colore
di sfondo della pagina
Prima di convertire questo file nel modello di progetto puoi rafforzarne la formattazione
e il contenuto dei segnaposti. Come hai fatto nell’ultima lezione, dovrai modificare la
larghezza complessiva affinché corrisponda all’immagine del banner.
1 Fai doppio clic sulla regola .container nel pannello Stili CSS.
2 Cambia la larghezza in 950 px nella categoria Elementi di pagina. Fai clic su OK.
L’elemento <div.container> ora corrisponde alla larghezza dell’immagine dal
banner, ma hai sicuramente notato la conseguenza imprevista dovuta al cambiamento
della larghezza complessiva. L’area del contenuto principale è stata spostata sotto
la barra laterale. Per capire che cosa è accaduto devi svolgere una rapida indagine.
3 Fai clic sulla regola .content nel pannello Stili CSS e controlla le sue proprietà.
Osserva in particolare la sua larghezza di 780 pixel.
96 LEZIONE 5 Creare un layout di pagina
4 Fai clic sulla regola .sidebar1 e controlla la sua larghezza, pari a 180 pixel.
Nell’insieme i due elementi <div> occupano 960 pixel, quindi sono troppo larghi
per essere affiancati nel contenitore principale. Questo tipo di errore è comune nel
web design, ma può essere risolto facilmente.
5 Fai clic sulla regola .content nel pannello Stili CSS. Cambia la larghezza in 770
px nella sezione Proprietà del pannello.
L’elemento <div.content> ritorna nella posizione prevista. Questo esercizio
dovrebbe aiutarti a ricordare che la dimensione, la posizione e le specifiche degli
elementi di pagina interagiscono tra loro e possono influire sul progetto finale e
sulla visualizzazione.
Ora rimuoverai il colore di sfondo della pagina.
6 Fai doppio clic sulla regola body. Nella categoria Sfondo cambia Background-color
in #FFF. Fai clic su OK.
Osserva che l’assenza del colore di sfondo produce l’impressione che l’area del
contenuto della pagina si allontani poco a poco nella pagina espansa. Puoi assegnare
a <div.container> un colore di sfondo, oppure puoi semplicemente aggiungere
un bordo che definisca la pagina.
7 Fai doppio clic sulla regola .container. Nella categoria Bordo seleziona l’opzione
Uguale per tutto e immetti i seguenti valori per tutti i campi: solid, 2 px, #060. Fai
clic su OK.
8 Salva il file.
Modificare la formattazione e
il contenuto esistente
Come puoi vedere il layout CSS è già fornito di un menu di navigazione verticale; i
collegamenti ipertestuali generici sono semplicemente segnaposti in attesa del contenuto definitivo. Ora cambierai il testo segnaposto nel menu affinché corrisponda alle
pagine descritte nelle miniature e modificherai i colori in modo che corrispondano alla
combinazione di colori del sito.
1 Seleziona il testo segnaposto Collegamento uno
nel primo pulsante di menu e digita Green News.
Cambia Collegamento due in Green Products,
Collegamento tre in Green Events e Collegamento
quattro in Green Travel.
Uno dei vantaggi dell’utilizzo di elenchi puntati
come menu di navigazione è la facilità con cui
puoi inserire nuovi collegamenti.
2 Premi Invio con il cursore ancora alla fine delle
parole Green Travel. Digita Green Tips.
Adobe dreamweaver CS5 Classroom in a Book 97
Il nuovo testo appare nella struttura di un pulsante, ma il colore di sfondo non corrisponde e il testo non è allineato alle altre voci di menu. È probabile che tu capisca
che cosa non va già nella vista Progettazione, ma in questo caso puoi identificare
più velocemente il problema nella vista Codice.
3 Seleziona la vista Codice mantenendo il cursore nel menu. Osserva le voci di menu
e confronta le prime quattro con l’ultima: riesci a vedere la differenza?
Questa differenza è evidente nella vista Codice: l’ultima voce è formattata con
l’elemento <li> come le altre (questo elemento indica l’appartenenza all’elenco
puntato) ma non dispone del codice <a href=”#”> utilizzato come segnaposto per
il collegamento ipertestuale. Affinché Green Tips corrisponda alle altre voci di menu
devi quindi aggiungere un collegamento ipertestuale, o almeno un segnaposto simile.
4 Seleziona il testo Green Tips. Digita # nel campo Collegamento della finestra di
ispezione proprietà HTML e premi Invio.
Ora il codice è identico per tutte le voci.
5 Seleziona la vista Progettazione.
Tutte le voci di menu hanno ora una formattazione identica. Otterrai ulteriori
informazioni sulla formattazione del testo in CSS per creare un menu nella lezione
6, “Utilizzare i fogli di stile CSS”.
Il colore del menu corrente non corrisponde alla combinazione di colori del sito: per
cambiarlo dovrai fare qualche indagine per capire quale regola CSS controlla questa
formattazione. Ecco un buon momento per imparare a utilizzare Navigazione codice.
6 Posiziona il cursore in una delle voci di menu.
Dopo qualche istante viene visualizzata l’icona di Navigazione codice (
98 LEZIONE 5 Creare un layout di pagina
).
7 Fai clic sull’icona di Navigazione codice.
Viene visualizzata una finestrella con un elenco di 11 regole CSS che influiscono
sull’elemento selezionato. L’elenco è in ordine di specificità, quindi la regola più
potente si trova in basso. In alcuni casi le regole elencate possono influire sull’elemento per vie traverse, come nel caso della regola body che influisce su tutti gli
elementi HTML della pagina.
8 Posiziona il puntatore del mouse sulla prima regola CSS nell’elenco e osserva i
formati visualizzati.
Viene visualizzata un’altra finestra che elenca tutti i formati specificati nella regola
selezionata. Nell’esempio stai cercando il colore di sfondo applicato alle voci di
menu. Presta attenzione: è probabile che nelle regole elencate siano presenti più
background-color, quindi se ne trovi uno devi determinare se agisce effettivamente
sul menu o se influisce su qualcos’altro.
9 Esamina ogni regola fino a trovare quella pertinente.
La regola .sidebar1 specifica un background-color, che però influisce sul <div> e
non sul menu. Quello che stai cercando è invece applicato dalla regola ul.nav a,
ul.nav a:visited, che specifica un background-color per un <ul> (elenco non
ordinato) con un attributo di classe nav contenente un elemento <a> (collegamento
ipertestuale). Sembra quello giusto!
Adobe dreamweaver CS5 Classroom in a Book 99
10 Individua e seleziona la regola ul.nav a, ul.nav a:visited nel pannello Stili
CSS. Cambia background-color in #090 nella sezione Proprietà del pannello.
Ora il colore delle voci di menu corrisponde a quello di <div#h-navbar>. Il testo
nero è difficile da leggere sul colore di sfondo verde. Puoi utilizzare la sezione Proprietà del pannello Stili CSS per aggiungere e modificare le proprietà degli elementi.
11 Fai clic sul collegamento Aggiungi proprietà nella sezione Proprietà del pannello
Stili CSS.
Viene visualizzato un nuovo campo di proprietà.
12 Scegli color dal menu del campo Property e immetti #FFC nel campo Valore. Premi
Invio per completare la nuova proprietà della regola.
13 Salva il file.
Inserire un segnaposto per immagini
La barra laterale conterrà fotografie, didascalie e brevi editoriali su argomenti legati all’ambiente. Ora inserirai un’immagine segnaposto con una didascalia sotto il menu verticale.
1 Posiziona il cursore nel testo subito sotto il menu verticale. Fai clic sul selettore di
tag <p>.
L’immagine segnaposto non dovrebbe essere inserita nell’elemento <p>, in quanto
erediterebbe tutte le impostazioni di margini, spaziatura interna e formattazione
applicate al paragrafo, causando interruzioni nel layout.
E
Suggerimento: Utilizza
la vista Dividi quando hai
dei dubbi sulla posizione
del cursore.
2 Premi il tasto Freccia sinistra.
Il cursore si sposta a sinistra del tag di apertura <p>.
3 Scegli Inserisci > Oggetti immagine > Segnaposto immagine.
Viene visualizzata la finestra di dialogo Segnaposto immagine.
4 Digita Sidebar nel campo Nome della finestra di dialogo Segnaposto immagine.
Digita 150 nel campo Larghezza.
Digita 150 nel campo Altezza.
Fai clic su OK.
Un segnaposto per immagini viene mostrato in <div.sidebar1> sotto il menu
verticale.
100 LEZIONE 5 Creare un layout di pagina
5 Seleziona tutto il testo sotto il segnaposto per immagini e digita Insert caption
here.
Il segnaposto per la didascalia sostituisce il testo.
6 Premi Ctrl+S (Windows) o Comando+S (Mac OS) per salvare.
Inserire testo segnaposto
Ora semplificherai il layout sostituendo i titoli e il testo esistenti nell’area del contenuto principale.
1 Fai doppio clic per selezionare il titolo Istruzioni. Digita Insert main heading here
per sostituire il testo.
2 Seleziona il testo rimanente in <div.content> e digita Insert content here per
sostituire il testo.
3 Premi Ctrl+S (Windows) o Comando+S (Mac OS) per salvare.
Modificare il piè di pagina
Non ti resta che riformattare il piè di pagina e inserire le informazioni di copyright.
1 Fai doppio clic sulla regola .footer nel pannello Stili CSS.
2 Nella categoria Tipo digita 90% nel campo Type-size e #FFC nel campo Color.
3 Nella categoria Sfondo fai clic sul pulsante Sfoglia e inserisci images/background.
jpg nel campo Background-image.
4 Fai clic su OK/Scegli.
5 Scegli repeat-x dal menu del campo Background-repeat.
6 Digita #090 nel campo Background-color. Fai clic su OK.
7 Seleziona il testo segnaposto nel piè di pagina e digita Copyright 2010 Meridien
GreenStart, All rights reserved.
8 Premi Ctrl+S (Windows) o Comando+S (Mac OS) per salvare.
Il layout di base della pagina è completo.
Adobe dreamweaver CS5 Classroom in a Book 101
Controllare la compatibilità con i browser
I layout CSS inclusi in Dreamweaver sono stati provati con cura per garantirne il funzionamento in tutti i principali browser. Tuttavia, nel corso della lezione hai apportato
importanti modifiche al layout originale: queste modifiche potrebbero comportare
problemi di compatibilità del codice in alcuni browser. Prima di utilizzare questa pagina
come modello di progetto dovresti quindi verificarne la compatibilità.
1 Se necessario, apri layout.html in Dreamweaver.
2 Scegli File > Controlla pagina > Compatibilità browser.
Nel riquadro visualizzato non dovrebbero essere elencati problemi.
3 Per chiudere il rapporto, fai doppio clic sulla linguetta Compatibilità browser nel
pannello dei rapporti oppure fai clic destro sulla linguetta e scegli Chiudi gruppo di
schede dal menu di contesto.
Complimenti. Hai creato un layout di pagina di base per il modello di progetto e hai
imparato come inserire componenti aggiuntivi, segnaposti per le immagini, testo e
titoli. Sei in grado di modificare la formattazione CSS e di controllare la compatibilità
nei browser.
102 LEZIONE 5 Creare un layout di pagina
Domande di verifica
1 Quali tre domande si dovrebbero porre in relazione a qualsiasi progetto di web design?
2 Qual è lo scopo dell’utilizzo di miniature e wireframe?
3 Quale è il vantaggio dell’inserimento del banner come immagine di sfondo?
4 Come è possibile inserire il cursore prima o dopo un elemento senza utilizzare la vista
Codice?
5 Quale assistenza offre Navigazione codice nella progettazione del layout del sito web?
Risposte
1 Qual è lo scopo del sito web? Chi è il cliente? Come arrivano qui? Queste domande con le
loro risposte sono essenziali per lo sviluppo del progetto, del contenuto e della strategia
del sito.
2 Le miniature e i wireframe rappresentano tecniche veloci per stabilire il progetto e la
struttura del sito senza dover perdere tempo nella scrittura di codice per le pagine di
esempio.
3 Inserendo il banner o altre immagini grandi come immagine di sfondo è possibile lasciare
il contenitore libero per altri contenuti.
4 Selezionare un elemento con il relativo selettore di tag e premere il tasto Freccia sinistra
o destra per spostare il cursore prima o dopo l’elemento selezionato.
5 Navigazione codice adempie al ruolo di detective in CSS: consente di indagare e scoprire
quali regole CSS agiscono sulla formattazione di un elemento selezionato e in che modo
sono applicate.
Adobe dreamweaver CS5 Classroom in a Book 103