home page con xhtml strict · Tutorial per siti scolastici - home page con xhtml strict 3. La...

TTuuttoorriiaall ppeerr ssiittii ssccoollaassttiiccii hhoommee ppaaggee ccoonn xxhhttmmll ssttrriicctt

Autori Questa guida è stata realizzata dal Progetto Porte Aperte sul Web dell’USR Lombardia con la collaborazione di: - Alberto Ardizzone, prima stesura e riorganizzazione finale dei testi - Sandra Farnedi, correzione delle bozze e revisione di alcune sezioni - Claudia Cantaluppi, alcuni suggerimenti sull’uso di Dreamweaver. Gli autori si sono in parte avvalsi del lavoro ‘Home page con xhtml strict’, curato da Alberto Ardizzone e Luisa Neri e pubblicato in http://www.porteapertesulweb.it/formazione/tut_strict/sommstrict.htm. Ringraziamenti Questo tutorial è stato realizzato grazie al clima di proficua intesa e collaborazione che contraddistingue il Gruppo di Porte Aperte sul Web, fin da quando si è costituito nel marzo 2003. Molti dei contenuti presentati sono, infatti, il frutto dei confronti e delle proposte avanzate dai molti docenti aderenti al Progetto. La guida ha tratto alcuni spunti ed alcuni elementi di approfondimento dall'inesauribile ricchezza di contenuti del sito www.diodati.org, dagli strumenti di lavoro forniti da www.webaccessibile.org, dai templates di www.constile.org e dalle guide di www.html.it. Riferimenti La versione on line della guida, arricchita da ulteriori contributi e riferimenti, è pubblicata in http://www.porteapertesulweb.it/corso2/guida.htm

This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/2.0/

Attribuzione-NonCommerciale-StessaLicenza 2.0 Tu sei libero: - di distribuire, comunicare al pubblico, rappresentare o esporre in pubblico l’opera - di creare opere derivate alle seguenti condizioni

Attribuzione. Devi riconoscere la paternità dell'opera all'autore originario.

Non commerciale. Non puoi utilizzare quest'opera per scopi commerciali.

Condividi sotto la stessa licenza. Se alteri, trasformi o sviluppi quest’opera, puoi distribuire l’opera risultante solo per mezzo di una licenza identica a questa.

http://www.porteapertesulweb.it/formazione/tut_strict/sommstrict.htm

http://www.diodati.org/

http://www.webaccessibile.org/


http://www.html.it/

http://www.porteapertesulweb.it/corso2/guida.htm

http://creativecommons.org/licenses/by-nc-sa/2.0/

Tutorial per siti scolastici - home page con xhtml strict

1. Perchè xhtml strict?

1.1 Motivi per una scelta

La proposta di utilizzare il linguaggio xhtml strict per costruire siti accessibili risponde ad una serie di considerazioni • xhtml strict permette una più rigorosa separazione tra contenuto e presentazione, delegando al foglio

di stile l'inserimento di tutta una serie di attributi (es. il bordo di una tabella o di un'immagine; il colore del testo o dello sfondo;...). In questo modo si ottiene un documento html molto più leggero e semplice da leggere

• la separazione tra contenuto e presentazione facilita le operazioni di modifica stilistica: operando su pochi file (i Fogli di Stile) le modifiche saranno applicate a tutti i file html che ne fanno uso

• la modularità dell'xhtml favorisce l'accessibilià dei contenuti a prescindere dai dispositivi utilizzati (pc, telefonini, palmari,...)

• l'estensibilità dell'xhtml permette la sua aggiornabilità automatica , grazie alla definizione del Tipo di Documento (DTD) utilizzata, a prescindere dalla versione del browser

• questa soluzione ha anche il pregio di predisporre le pagine di un sito a quella finale di un documento universale XML: molto piu' rigoroso, semplice ed efficace rispetto a qualsiasi versione di HTML

1.2. La definizione del Tipo di Documento

Al fine di ottenere documenti xhtml validi, è necessario definire il Tipo di Documento (DTD) inserendo due righe di codice in testa al documento stesso. Nel caso di utilizzi xhtml strict, si dovrà scrivere <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Inserire la dichiarazione del DTD non risponde solo all'esigenza di rendere valida la pagina secondo gli standard del W3C, quasi come se fosse una semplice volontà di "purismo" nel codice. La DTD infatti ha una duplice funzione. Serve a validare la pagine secondo le specifiche del W3C e a indicare ai browser con quale modalità renderizzare (visualizzare) la pagina. I browser più recenti (di quinta generazione), infatti, in questo modo riconoscono che la pagina va visualizzata con una modalità standard "riveduta e corretta", più conforme alle specifiche W3C (è il cosidetto doctype switching; per chi volesse approfondire l'argomento: http://www.web-garbage.com/dtd.php). Non inserendo la DTD insomma si potrebbe incorrere in differenze di visualizzazione di alcuni elementi della pagina.

1.3. Alcune caratteristiche di xhtml

• I documenti devono essere ben formati; ad esempio, tutti gli elementi devono essere correttamente annidati

• Tutti gli elementi e i nomi degli attributi devono essere scritti in lettere minuscole • Tutti gli elementi non vuoti richiedono il tag di chiusura (sia i ‘doppi': <p>...</p> sia i 'singoli': <br />) • I valori degli attributi devono sempre essere compresi fra doppi apici (esempio <div id="top"> • Per identificare frammenti di informazione, si deve usare l'attributo 'id' al posto dell'attributo 'name'

(es. nei collegamenti interni di un documento, utilizza <a id="...">, oppure <a name "..." id="..."> al posto di <a name="...">.

pag. 3

http://www.web-garbage.com/dtd.php


2. Descrizione della pagina da ottenere

2.1.

La p• un

ag• un• il m• un• un

i lide

Ci siillust• m• m• in

illuan

testata

barretta
menu principale
a

ood

contenuto
footer
Descrizione

gina presenta dall'alto verso il basso a sezione testata, contenente il logo, il nome della scuola con l'indirizzo e la data dgiornamento a 'barretta' contenente la data dell’ultimo aggiornamento enu principale orizzontale formato da 5 elementi

a sezione centrale che contiene a sinistra il contenuto principale e a destra il menua sezione di chiusura (footer) in cui è ripetuto il nome della scuola con telefono e fank alla descrizione dei tasti d'accesso, alla mappa del sito e alla modalità per contal sito e il personale della scuola.

propone, ora, di accompagnare il webmaster di siti scolastici nella produzionrandone il suo sviluppo passo a passo strando e commentando il codice xhtml strando e commentando il Foglio di Stile icando le operazioni da seguire nel caso si utilizzi il programma Dreamweaver MX strato nelle sue funzioni principali nella guida al corso base, curata da Laura Fiorinche in http://www.porteapertesulweb.it/corso2/guida.htm.

pag. 4

menu secondario

ell'ultimo

secondario x e sono inseriti ttare i curatori

e della pagina,

2004, già i e pubblicata

http://www.porteapertesulweb.it/corso2/guida.htm

3. La testata

3.1. Il codice xhtml commentato

La prima parte di codice che deve essere presente è: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

La Dichiarazione del Doctype è essenziale per produrre documenti xhtml strict validi. E' possibile copiare ed incollare il codice nelle prime righe del documento html che si sta creando. La specificazione della lingua utilizzata (xml:lang="it" lang="it"), come attributo del tag <html>, è necessaria per specificare ai programmi di sintesi vocali il linguaggio usato. Nel caso di termini stranieri all'interno del contenuto, è necessario segnalare il cambio di lingua (es. <span xml:lang="en">book</span>. Seguendo nel codice, si trova: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <title>Scuola Aperta</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">  </style> <meta name="Keywords" content="scuola, Scuola Aperta, istituto comprensivo, elementare, media, accessibilità" /> <meta name="Description" content="home page del sito di esercitazione della Scuola Aperta" /> <meta name="author" content="inserire autore con email" /> </head>

Nella sezione <head> troviamo per prima cosa l'indicazione del title. E' importante inserirlo ed utilizzare un testo significativo della pagina a cui si riferisce. In questo caso è consigliabile riportare il nome della scuola. Questo permetterà un duplice vantaggio: un aiuto a chi naviga con i sintetizzatori vocali, per capire subito in che pagina web sono entrati, e una buona indicizzazione della pagina nei motori di ricerca. A tal fine è consigliabile anche inserire i metatag relativi alle parole chiave ed alla descrizione del sito, utilizzando un numero limitato di termini, scelti tra quelli più significativi. Il codice che precede </head> (la chiusura del tag) indica al browser che il file richiama un Foglio di Stile esterno importato, ove sono inserite tutte le informazioni di presentazione. La scelta di importare, invece che di collegare, il Foglio di Stile, è dettata dall'esigenza di permettere una visualizzazione accettabile anche da parte dei browser, tipo Netscape 4.5, che gestiscono male i css.

pag. 5


Il codice prosegue con l’inizio del body: <div id="testata"> <img src="img/logoscuola.gif" alt="logo Scuola Aperta" width="100" height="100" /> <h1>Scuola Aperta</h1> indirizzo<br /> telefono, fax </div>

La testata della pagina è costituita da un unico contenitore (#testata), che contiene il logo della scuola con a fianco, centrato, il nome della scuola, l’indirizzo, il numero di telefono e di fax.

3.2. Il Foglio di Stile

selettore

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 90%; color: #000000; background-color: #FFFFFF; }

Nel body si definisce la famiglia di caratteri che saranno utilizzati in questa pagina, precisandone la dimensione standard. E' importante stabilire la dimensione del carattere in %, in modo da renderlo ridimensionabile (esempio, da IE con Visualizza - Carattere). Si sconsiglia l'utilizzo degli ems, in quanto IE ha un baco quando la dimensione del carattere viene definita nel body, non visualizzando correttamente l'entità del ridimensionamento e spesso rendendo illeggibile un testo in modalità di visualizzazione come carattere piccolo. Nel resto del documento definiremo, invece, le dimensioni in ems. In molti casi è opportuno specificare già nel body il colore del carattere e dello sfondo: in questo modo ci si mette al riparo da possibili sorprese di visualizzazione. Alcune persone con problemi di vista, infatti, settano il proprio monitor con combinazioni di colore ad alto contrasto (esempio bianco su nero) che agiscono di default in caso di non dichiarazione nel Foglio di Stile. selettore commento

#testata { color: #000033; background-color: #EEF2FD; text-align: center; min-height: 100px; height: auto !important; height: 100px; border-top: 1px solid #000033; border-right: 1px solid #000033; border-bottom: 3px solid #000033; border-left: 1px solid #000033; }

id testata: testi di colore bianco … … su sfondo blu … … e centrati; altezza minima: 100px (regola non supportata da IE, Internet Explorer); regola ignorata solo da IE (serve agli altri browser per sovrascrivere la successiva); regola interpretata solo da IE (gli altri browser seguono la precedente); bordo continuo e di colore blu, avente spessore di 1 pixel, tranne nella parte inferiore dove lo spessore è di 3 pixel

E' stata definita un'altezza minima, per fare in modo che il box si espanda in altezza nel caso si usino caratteri molto grandi (superiori al 150%). Si osservi che la proprietà min-height non è supportata da Internet Explorer, che, invece, interpreta height come altezza minima: è per questo che si consiglia di scrivere in sequenza le tre regole. Questa tecnica è ben illustrata nel sito www.constile.org.

pag. 6

http://www.constile.org/


Proseguendo nell'analisi del codice del foglio di stile, troviamo le specifiche che definiscono le caratteristiche dell’immagine e del titolo1. selettore commento

#testata img { float: left; margin-left: 20px; } h1 { font-size: 1.6em; letter-spacing: 0.1em; margin: 5px; }

Immagini interne all’id testata: L’immagine ha il testo che le scorre alla sua destra (float: left, in quanto la proprietà è riferita all’immagine, posta a sinistra); il margine sinistro dell’immagine è di 20 pixel (in modo da staccarla dal bordo)

titoli di livello 1: testi con dimensione pari al 160% rispetto a quella definita nel body; lettere leggermente spaziate tra di loro (0.1 ems); il margine assegnato per default dall’html ai titoli è modificato in 5 pixel

3.3. Lavoriamo con Dreamweaver

3.3.1. Il Foglio di Stile stile.css con Dreamweaver

Dal Pannello Progettazione • Clicca sul’icona Nuovo Stile

CSS • Scegli Tipo selettore – Tag –

body • Definisci in – (Nuovo file

foglio di stile) • Clicca su Ok Nella finestra successiva, assegna il nome stile.css al file e, quindi, scegli nella Categoria Tipo la famiglia di caratteri Verdana, Arial,… e scrivi la Dimensione del 90%.

Per creare e definire le proprietà del selettore #testata: dal Pannello Progettazione • Clicca sul’icona Nuovo Stile CSS • Scegli Tipo selettore – Avanzate • Selettore: #testata • Definisci in stile.css • Clicca su Ok • nella Categoria Tipo, scegli Colore: #000033;

pag. 7


• in Sfondo, Colore: # EEF2FD; • In Blocco di Testo, Allineamento testo: centrato • In Bordo, Stile: Uguale per tutto, continuo; Larghezza: Sup, destra e Sinistra: 1pixel, Inf. 3 pixel;

Colore: Uguale per tutto, #000033.

Per definire l’altezza nel modo specificato dal CSS, devi aprire il file stile.css, posizionarti prima della parentesi graffa di chiusura di #testata e digitare: • min-height: 100px; • height: auto !important; • height: 100px;

Dreamweaver permette di assegnare stili anche a selettori composti dal nome di un box o di una classe + un tag (come #testata img per definire lo stile delle immagini presenti nel box testata, oppure .pasw p per definire lo stile dei paragrafi interni ai contenuti di classe ‘pasw’: • Clicca sull’icona Nuovo Stile CSS • Scegli Tipo selettore – Avanzate • Selettore: #testata img • Definisci in stile.css • Clicca su Ok • in Elementi di pagina, Mobile: sinistra e

Margine: Sinistra: 20 pixel. Resta, ora, solo da definire le proprietà per il tag h1 (titolo 1). Dal Pannello Progettazione • Clicca sul’icona Nuovo Stle CSS • Scegli Tipo selettore – Tag – h1 • Definisci in stile.css • Clicca su Ok.

Nella finestra successiva, ridefinisci il tag h1 attribuendo • nella Categoria Tipo, Dimensione: 160%; • in Blocco di testo, Spaziatura tra lettere: 0.1 ems; • In Elementi di pagina, Margine: Uguale per tutto, 5 pixel • Clicca su Ok.

Per modificare lo stato del foglio di stile esterno da collegato a importato: • Dal Pannello Progettazione - Stili CSS, clicca sull’icona ‘Associa al

foglio di stile’ • Scegli il file stile.css • Seleziona l’ozione Importazione • Clicca su Ok.

3.3.2. Il file index.htm con Dreamweaver

Apri il file index.htm e seleziona la vista Progettazione. Devi, ora, disegnare il box #testata, al cui interno posizionerai il logo e, a fianco, il testo.

• Seleziona nella Barra Inserisci, la

scheda Layout • Clicca sul pulsante Inserisci tag Div

e Scegli ID: testata • Premi il tasto Canc per eliminare il testo che appare automaticamente

pag. 8


Quindi, • clicca sul menu Inserisci - Immagini, • scegli logoscuola.gif (presente nella sottocartella img) • clicca su Ok • scrivi ‘logo Scuola Aperta’ nella casella di testo accanto a Testo Alternativo, presente nella Finestra

con gli attributi di accessibilità (resi attivi dal menu Modifica – Preferenze – Accessibilità)

Posizionati, ora, a destra dell’immagine e • Scrivi ‘Scuola Aperta’ • Premi il tasto Invio • Scrivi ‘indirizzo’ • Premi la combinazione di tasti Shift + Invio (in modo da andare a capo, senza creare un nuovo

paragrafo) • Scrivi ‘telefono, fax’

Per attribuire il titolo 1 al nome della scuola, • Punta il mouse all’interno di ‘Scuola Aperta’ • Scegli dal Pannello Proprietà il Formato Titolo 1

3.3.3. Controlla la pagina con Dreamweaver

Il primo controllo della pagina, favorito da Dreamweaver, è legato alla visualizzazione dell’Anteprima nel browser a differente dimensione dei caratteri. Si consiglia di modificare l’elenco dei browser, aggiungendo a Internet Explorer 6.0, Internet Explorer 5.0, Internet Explorer 5.5, Netscape 4.5, Mozilla 1.6, Firefox 1.0 e Opera 7.2. (scaricabili dal cd allegato al corso). Un secondo ed altrettanto importante controllo è costituito dalla validazione del codice. Dal menu File, scegli Controlla pagina – Convalida codice. Se non ci sono errori, comparirà il messaggio “non sono trovati errori o avvertenze [XHTML 1.0 Strict]”. Altrimenti, viene segnalato tipo di errore e relativa riga, direttamente modificabile attraverso un doppio clic sul numero indicato.

pag. 9


4. La barra orizzontale


<div id="barra">ultimo aggiornamento: 27 dicembre 2004</div>

Sotto la testata, si propone una barra orizzontale contenente il testo ‘ultimo aggiornamento: 27 dicembre 2004'. In altre pagine web, la barra orizzontale, se presente, potrà essere usata per ospitare la cosiddetta navigazione 'a briciole di pane', attraverso la quale si ottiene un'importante indicazione circa la posizione della pagina all'interno della struttura gerarchica del sito.


selettore commento

#barra { text-align: right; clear: left; font-size: 0.8em; padding: 3px 10px; }

div #barra: testo allineato a destra; la proprietà clear: left ha la funzione di interrompere il flusso del div precedente; testi con dimensione pari all’80% rispetto a quella definita nel body; spazio di 10 pixel dai bordi laterali e di 3 pixel da quelli superiore e inferiore (per aumentarne la leggibilità)

Si noti come la separazione tra contenuto e presentazione, permetta di delegare al solo Foglio di Stile la definizione delle caratteristiche del box. Il codice xhtml risulta così molto più comprensibile e leggero, mentre le possibilità di modifica stilistica vengono affidate ad un solo file.



Dal Pannello Progettazione • Clicca sul’icona Nuovo Stle CSS • Scegli Tipo selettore – Avanzate • Selettore: #barra • Definisci in stile.css • Clicca su Ok.

Nella finestra successiva, definisci il selettore #barra attribuendo • nella Categoria Tipo, Dimensione: 80%; • in Blocco di testo, Allineamento testo: destra; • In Elementi di pagina, Spazio dall’elemento al bordo, Sup e Inf 3pixel; Destra e Sinistra: 10 pixel • In Elementi di pagina, Cancella: sinistra

pag. 10



Per posizionare il punto di inserimento appena sotto il div #testata Dalla Vista Progettazione, • Punta il mouse all’interno del div #testata • Seleziona l’intero div cliccando <div#testata> dal Selettore di tag • Premi il tasto cursore freccia a destra

Per disegnare il box #barra: • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli ID: barra • Sovrascrivi il testo che appare automaticamente, digitando ‘Ultimo aggiornamento: 27 dicembre 2004’

pag. 11


5. Il menu principale


<div id="menupr"> <a href="#" accesskey="1" tabindex="5" title="progetti, attività, proposte dalle classi">in classe (1)</a> | <a href="#" accesskey="2" tabindex="10" title="spazio riservato ai docenti; esercitazioni e appunti da scaricare">docenti (2)</a> | <a href="#" accesskey="3" tabindex="15" title="i disegni, i lavori, le idee degli studenti">studenti (3)</a> | <a href="#" accesskey="4" tabindex="20" title="avvisi, riunioni, incontri per i genitori">genitori (4)</a> | <a href="#" accesskey="5" tabindex="25" title="orari, modulistica, personale della segreteria">segreteria (5)</a> </div>

Il menu principale è inserito all'interno del box #menupr ed è costituito da cinque voci: in classe – docenti – studenti – genitori - segreteria. Ci limitiamo a commentare il codice della prima voce, dato che le considerazioni sono ovviamente estensibili alle altre. La voce ‘in classe’ è origine di link; il valore dell'attributo href (pagina destinazione del link), lasciato provvisoriamente come # in modo da consentire la prova del suo funzionamento, deve essere naturalmente sostituito con il percorso del file corretto. All'interno del tag <a> compaiono due attributi legati all'accessibilità. Il primo è l’accesskey, che consente l'attivazione dei link tramite tastiera. Tuttavia, occorre precisare che alcuni esperti sono diffidenti circa il loro uso, a causa dei rischi di conflitto con le scorciatoie da tastiera definite in alcuni browser e programmi di sintesi vocale. Per i valori da attribuire, si consiglia comunque di partire da quelli numerici (da 0 a 9), in modo da minimizzare i rischi di conflitto. Il secondo è il tabindex, utile per attribuire una scansione specifica alla successione dei link attraverso il tasto Tab della tastiera. Considerato che spesso le voci di menu vengono modificate e, a volte, ampliate, può essere utile attribuire ai tabindex valori non consecutivi, in modo da facilitare l’immissione di nuove voci tra due preesistenti. Un altro attributo importante è il title, che risulta utile per chiarire meglio il significato, o il contenuto, del link. Si consiglia di utilizzarlo soprattutto nei menu, in quanto in questi casi l'informazione può essere molto d'aiuto a chi utilizza programmi di sintesi vocale. Nel contempo, è opportuno non utilizzarlo in combinazione dell'attributo alt (nelle immagini) e nei casi in cui il link è autoesplicativo (es. http://www.porteapertesulweb.it). Un'ultima considerazione. Le voci del menu sono separate dal carattere |. E’ un elemento che viene introdotto in caso di link contigui, per evitare il rischio di confusione tra i link a chi fa uso di sintesi vocali.

pag. 12

http://www.porteapertesulweb.it/



Con il Foglio di Stile definiamo le caratteristiche del box #menupr. selettore commento

#menupr { clear: left; padding: 3px 10px; color: #FFFFFF; background-color: #000099; font-weight: bold; letter-spacing: 0.1em; border-top: 3px solid #000033; border-right: 1px solid #000033; border-bottom: 1px solid #000033; border-left: 1px solid #000033; }

id menupr: interruzione del flusso del div precedente; spazio di 10 pixel dai bordi laterali e di 3 pixel da quelli superiore e inferiore; testi di colore bianco … … su sfondo blu … … in grassetto; lettere spaziate tra di loro di 0.1 ems; bordo continuo e di colore blu, avente spessore di 1 pixel, tranne nella parte inferiore dove lo spessore è di 3 pixel

Passiamo ora a definire le caratteristiche stilistiche dei link, dei link visitati e lo stato dei link quando il mouse passa sopra di essi. A tal fine si utilizzano gli pseudoselettori a:link, a:visited, a:hover (da scrivere rigorosamente in quest'ordine, per evitare errate interpretazioni di alcuni browser). selettore commento

#menupr a:link{ color: #FFFFFF; background-color: #000099; text-decoration: none; padding: 0 5px; } #menupr a:visited{ color: #FFFFFF; background-color: #000099; text-decoration: none; padding: 0 5px; } #menupr a:hover { color: #000099; background-color: #FFFFFF; text-decoration: none; padding: 0 5px; }

Stato dei link interni all’id menupr: testi di colore bianco … … su sfondo blu … … senza sottolineatura; spazio di 5px dai bordi laterali e di 0 dai verticali Stato dei link visitati interni all’id menupr: uguale a quelli definiti per a:link Stato dei link interni all’id menupr quando il mouse passa sopra di essi: uguale a quelli definiti per a:link e a:visited, tranne che per il colore e lo sfondo (scambiati)

Con questa parte di codice vengono definiti gli effetti sui link solo per quelli all’interno del box #menupr. GIi pseudoselettori infatti sono stati scritti dopo l'indicazione del box #menupr, proprio per indicare che gli stili assegnati agiranno solo sui link che si trovano all'interno del menu principale (#menupr). In caso contrario, cioè inserendo nel foglio di stile a:link, a:visited, a:hover genericamente, le caratteristiche in essi definite andranno ad applicarsi a tutti i link della pagina collegata. Tra tutte le caratteristiche di stile definite, si noti che con “text-decoration:none” si toglie la sottolineatura del link, mentre con i valori inseriti nel padding si lascia un po' di spazio a sinistra e a destra, in modo da creare maggiore distanza tra i link. Il padding superiore e inferiore sono definiti nulli, onde evitare differenze di visualizzazione tra alcuni browser.

pag. 13


Con a:hover si ottiene l'effetto roll-over, un tempo ottenuto con l'impiego di immagini e di inutile codice javascript. E’ infatti lo pseudoselettrore che definisce come viene visualizzato il link quando il puntatore del mouse ci passa sopra. In questo caso, l’effetto viene ottenuto scambiando colore del testo e colore dello sfondo. Un'osservazione. Nel caso in cui una misura sia di 0 pixel (o 0%, 0 ems,...) si può omettere l'unità di misura e scrivere, ad esempio, padding: 0, invece che padding: 0px. In tutti gli altri casi l'unità di misura è ovviamente obbligatoria. Un'ultima considerazione. E' possibile risparmiare diverse righe di codice compattando tutti gli elementi comuni agli pseudoselettori in #menu a, senza ripeterli per gli altri: #menupr a { color: #FFFFFF; background-color: #000099; text-decoration: none; padding: 0 5px; }

#menupr a:hover { color: #000099; background-color: #FFFFFF; }



Da questo punto della guida, si chiede a te di provare ad ottenere, con l’aiuto di Dreamweaver, la scrittura del Foglio di Stile così come descritto sopra.


Per posizionare il punto di inserimento appena sotto il div #barra: Dalla Vista Progettazione, • Punta il mouse all’interno del div #barra • Seleziona l’intero div cliccando <div#barra> dal Selettore di tag • Premi il tasto cursore freccia a destra

Per disegnare il box #menupr: • Seleziona nella Barra Inserisci la scheda Layout e clicca sul pulsante Inserisci tag Div. • Scegli ID: menupr • Sovrascrivi il testo che appare automaticamente, digitando ‘in classe (1) | docenti (2) | studenti (3) |

genitori (4) | segreteria (5)’

Per inserire i link: • Seleziona il testo ‘in classe (1)’ • Dalla Barra Inserisci Comune, clicca sull’icona

Collegamento ipertestuale (la catena) • Nella Finestra (contenenti gli elementi di

accessibilità) che si apre automaticamente, inserisci Titolo (è l’attributo title): progetti, attività, proposte dalle classi; Chiave di accesso (è l’accesskey prima descritto): 1; Indice di tabulazione (è il tabindex): 5. Dreamweaver, lasciando vuota la casella di fianco a Collegamento, inserisce automatica-mente il carattere # (link di prova, da sostituire con il percorso esatto della pagina linkata)

• Ripeti l’operazione con le altre voci del menu.

pag. 14


6. Il layout centrale


<div id="centrale"> <div id="sinistra">Inserire qui il contenuto per id "sinistra"</div> <div id="menu2">Inserire qui il contenuto per id "menu2"</div> </div>

Il layout centrale è definito dal box #centrale, che contiene i due box #sinistra e #menu2. Questo tipo di struttura costruisce un layout a due colonne, con il menu secondario posto sulla destra, dopo il contenuto principale. Nel codice della pagina html non è necessario altro: sarà affidato al Foglio di Stile l'importante compito di definire il posizionamento e le caratteristiche dei box, in modo da stabilire tutte le proprietà di formattazione del contenuto e del menu secondario.


selettore commento

#centrale { border: 1px solid #000033; color: #000033; background-color: #EEF2FD; position: relative; } #sinistra { color: #000000; background-color: #FFFFFF; margin-right: 27%; padding: 1em 0; } #menu2 { position: absolute; width: 27%; top: 0px; right: 0px; padding: 1em 0; }

id centrale: bordo continuo, di colore blu e spessore di 1 px; testi di colore blu scuro … … su sfondo azzurro chiaro; posizione: relativa

id sinistra: testi di colore nero … … su sfondo bianco … margine destro: 27%; spazio nullo dai bordi laterali e di 1 em da quelli superiore e inferiore

id menu2: posizione: assoluta; larghezza: 27%; distanza nulla del box #menu2 dal punto più alto del box #centrale (che lo contiene); distanza nulla del box #menu2 dal punto più a destra del box #centrale (che lo contiene); spazio nullo dai bordi laterali e di 1 em da quelli superiore e inferiore

Il contenitore #centrale è posizionato in modo relativo. Il box #menu2, che ospiterà il menu secondario, è definito in posizione assoluta. Essendo, però, all'interno del box #centrale, le sue coordinate si riferiscono a quest'ultimo. Quindi, con top:0px e right:0px, che sono i valori per la distanza dal bordo superiore e destro, si indica al browser di disegnare il box, partendo dal punto più in alto e a destra all’interno del div #centrale. La larghezza, definita nel 27% (width:27%), consente di ottenere un layout fluido, e, quindi, adattabile alle diverse risoluzioni del monitor. Con padding: 1em 0, si definisce in 1 em la distanza dei contenuti del box #destra dai bordi superiore e inferiore dello stesso.

pag. 15


Nel codice andrebbe indicato il valore per ognuno dei quattro lati (alto, destra, basso, sinistra). Ma se tutti o alcuni dei quattro valori sono uguali (come nel nostro caso, 1em 0 1em 0), è possibile compattare i valori uguali e utilizzare la contrazione del codice, che diventa: 1em 0. Si noti che a destra e a sinistra è stato assegnato valore 0, onde evitare problemi di errata interpretazione da parte di Internet Explorer. Il distanziamento dai bordi della colonna verrà garantito agendo su altri contenitori interni (ad esempio i paragrafi o le liste). Il box #sinistra deve occupare la parte sinistra del contenitore #centrale ed ha la funzione di ospitare il contenuto principale della pagina. Onde evitare sovrapposizioni tra i contenuti dei box #sinistra e #menu2, si attribuisce al margine destro di #sinistra lo stesso valore utilizzato per definire la larghezza del box #menu2. E' opportuno osservare che il box #menu2 eredita lo sfondo azzurro definito in #centrale, mentre a #sinistra è stato assegnato uno sfondo bianco con colore del testo nero. Un'ultima considerazione importante. La tecnica illustrata ha uno svantaggio: il box interno non posizionato in modo assoluto (#sinistra) deve essere necessariamente più alto di quello laterale. Un'esauriente spiegazione sul fatto e sulla tecnica di posizionamento utilizzata è presente in una sezione del sito www.constile.org.

6.3. Un chiarimento

E' facile fare confusione tra padding, bordo e margine di un box. Internet Explorer, ad esempio, interpreta in modo errato alcune di queste informazioni, causando a volte problemi nella stabilità dei layout realizzati con i Fogli di Stile, che possono apparire visualizzati in modo diverso rispetto ad altri browser. E' proprio per questo che, se si vuole impaginare in modo semplice, è consigliabile evitare di inserire informazioni sul padding laterale all'interno delle proprietà del box. Per il momento può essere sufficiente sapere che il padding si riferisce alla distanza tra il bordo di un box e il suo contenuto, mentre il margine è la distanza tra il bordo del box e il bordo del contenitore che lo contiene.

6.4. Il file index.htm con Dreamweaver

Dalla Vista Progettazione, • Punta il mouse all’interno del div #menupr • Seleziona l’intero div cliccando <div#menupr> dal Selettore di tag • Premi il tasto cursore freccia a destra

Per disegnare il box #centrale: • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli ID: centrale

Per disegnare il box #sinistra: • Selezionato il testo ‘Inserire qui il contenuto per id "centrale", cancellalo • Seleziona, nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli ID: sinistra

Per disegnare il box #menu2: • Seleziona l’intero div #sinistra cliccando su <div#sinistra> dal Selettore di tag • Premi il tasto cursore freccia a destra • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div e scegli ID: menu2

pag. 16


7. Il contenuto principale


<div id="sinistra"> <div class="notizia"> <h2>Notizia della settimana</h2> <p><img src="img/profp.jpg" alt="fischio dell'arbitro durante la partita" width="200" height="123" />Iniziati stamattina nella palestra delle scuola i campionati di Calcetto con l'incontro '<a href="http://www.porteapertesulweb.it">Porte aperte sul web</a>' - 'Progetto Fortic'. (…) </p> </div> <div class="notizia"> <h2>Appuntamenti</h2> <ul> <li><strong>Martedì 22 giugno - ore 14.00-18.00</strong><br /> terzo e ultimo incontro del Corso Base per l'accessibilità dei siti scolastici</li> <li>… </li> <li>… </li> </ul> </div> (...)

Come si può vedere, per applicare la formattazione (con le caratteristiche definite nel foglio di stile), non è stato qui utilizzato –come in precedenza- il selettore id, in quanto quest'ultimo viene utilizzato per definire una sezione in modo univoco. Ogni selettore id del foglio di stile, cioè, può essere richiamato solo una volta nella pagina html e collegato quindi solo ad un elemento, con una relazione, appunto, univoca. In altri casi, come in questo relativo alle notizie di contenuto, si utilizza il selettore class. Con questo selettore, nel foglio di stile, si possono definire caratteristiche di formattazione che possono poi essere ripetute e applicate più volte, a più elementi di contenuto, nella pagina html. Nel caso in cui la sezione debba essere ripetuta è quindi necessario definirla come classe e non come id nel Foglio di Stile.

pag. 17


All'interno del contenitore notizia troviamo un titolo 2 (tag <h2>), un paragrafo (tag <p>), in alcuni casi un'immagine o un elenco non ordinato. Questa struttura si ripresenta praticamente invariata negli altri blocchi.

7.2. I link esterni con xhtml strict

Nella pagina è presente un link ad un sito esterno: <a href="http://www.porteapertesulweb.it">Porte aperte sul web</a>

È importante sottolineare che con xhtml strict è vietato aprire i link su finestra indipendente. Non è perciò più possibile inserire l'attributo target="_blank".

7.3. La gestione dei testi

Un lavoro da cui non si può prescindere è quello relativo alla cura e alla gestione dei testi, sia a livello di scrittura, sia a livello di struttura gerarchica, che devono essere destinati alla pubblicazione sul web. Il web è un mezzo di comunicazione con precise e peculiari caratteristiche, che vanno tenute presenti quando ci si appresta a predisporre dei testi per la pubblicazione on line. Le problematiche legate alla scrittura del web sono affrontate in una specifica sezione del sito www.porteapertesulweb.it, curata da Cristina Cuppi, in un capitolo, curato da Laura Fiorini, dell’imminente Manuale Aperto per la Qualità dei siti web, e in alcuni siti professionali di riferimento. Tra questi, citiamo www.mestierediscrivere.com, curato da Luisa Carrada, e www.comuniconline.it, curato da Alessandro Lucchini e Claudio Maffei. In questa occasione ci limitiamo a sottolineare come la scrittura per il web, così come l'attenzione ad individuare testi sostitutivi (ALT) adatti per descrivere le funzioni delle immagini, possa costituire spunto per interessanti percorsi didattici in grado di coinvolgere gli studenti di ogni ordine e grado. La questione della struttura dei testi chiama in causa l'utilizzo dei tag predefiniti per i titoli <h1>, <h2>, <h3>, ..., che permettono di definire la struttura gerarchica di un documento, favorendo, tra l'altro, lo scorrimento del contenuto secondo livelli di profondità (titolo1, titolo2, paragrafo, ecc.). . Ricordando che in xhtml strict è vietato utilizzare il tag <font> per definire gli attributi di un testo, è comunque sconsigliabile l'uso di classi css laddove si può ottenere lo stesso effetto definendo lo stile dei tag <h1>, <h2>, <h3>, ..., valorizzando, in questo modo, la valenza strutturale e semantica del titolo.


Con il Foglio di Stile definiamo le caratteristiche dei blocchi di notizie che si susseguono all'interno del box #sinistra: selettore commento

.notizia { width: 100%; padding-bottom: 20px; }

classe notizia: larghezza: 100%; i contenuti saranno staccati di 20 pixel dal bordo inferiore

pag. 18


I contenuti dell'area centrale occupano lo spazio definito dal blocco <div class="notizia">...</div>. Trattandosi di un blocco che si ripete più volte, per definirne le caratteristiche di formattazione, viene utilizzato l'attributo class, in luogo dell'attributo id (vedi capitolo precedente). Vediamo, ora, come sono stati definiti i titoli di ogni singola notizia. Ci riferiamo ai testi 'Notizia della settimana, 'Appuntamenti' e ‘Festa di fine anno’: selettore commento

h2 { font-size: 1.5em; font-weight: normal; margin-top: 10px; margin-bottom: 20px; margin-left: 10px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000066; }

titoli di livello 2: testi con dimensione pari al 150% rispetto a quella definita nel body; spessore normale (di default sarebbe stato grassetto); vedi dopo bordo inferiore tratteggiato, di colore blu e spessore di 1 pixel;

Con la proprietà margin si modifica il margine assegnato per default dall'html ai titoli, mentre il margin-left, fissato in 10 px, permette anche in questo caso di lasciare un po' di spazio alla sinistra del testo, che altrimenti sarebbe troppo attaccato al bordo. Il testo contenuto nel div .notizia è inserito in un paragrafo e può contenere immagini con testo che scorre a fianco: selettore commento

.notizia p { padding: 10px; } #sinistra img { float: left; border: 1px dashed #000066; margin-right: 10px; }

Paragrafi interni a notizia: spazio di 10 pixel dai bordi (per favorire la leggibilità) Immagini interne all’id sinistra: L’immagine ha il testo che le scorre alla sua destra (float: left, in quanto la proprietà è riferita all’immagine, posta a sinistra); bordo tratteggiato, blu e spessore di 1 pixel; il margine destro è di 10 pixel, in modo da staccare il testo a fianco

L'ultimo spezzone di codice del Foglio di Stile è dedicato a ridefinire i link con gli pseudoselettori a:link, a:visited e a:hover. selettore commento

a:link { color: #000099; background-color: transparent; } a:visited { color: #990066; background-color: transparent; } a:hover { color: #FFFFFF; background-color: #000099; }

Stato dei link: testi di colore blu … … su sfondo trasparente Stato dei link visitati: uguale a quelli definiti per a:link Stato dei link quando il mouse ci passa sopra: testi di colore bianco … … su sfondo blu

pag. 19


L'effetto roll over (testo bianco su sfondo blu, senza sottolineatura) viene aggiunto per evidenziare maggiormente la presenza del link, a vantaggio in particolare modo di chi ha problemi di vista o di mobilità fine nell'uso del mouse. Si noti che gli pseudoselettori in questo caso non sono preceduti dall'indicazione del box a cui si riferiscono. Il fatto che tutti i link presenti in altre sezioni siano, invece, preceduti dal box di riferimento, ha reso non necessaria l'aggiunta di #sinistra.


Per inserire la classe .notizia, il testo ‘Notizia della settimana’ e la prima immagine: Dalla Vista Progettazione, • Punta il mouse all’interno del div #centrale

• Seleziona, se ancora presente, la scritta ‘Inserire qui il contenuto per id "centrale" e cancellala

• Seleziona la scritta ‘Inserire qui il contenuto per id "sinistra" e cancellala

• Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli classe: notizia • Clicca su Ok • Scrivi ‘Notizia della Settimana’

• Premi ‘Invio’ • Inserisci l’immagine ‘profp.jpg’, a cui assegni l’Alt “fischio dell’arbitro durante la partita”

Per assegnare a ‘Notizia della settimana’ il titolo2: • Seleziona, trascinando il mouse, il testo ‘Notizia della settimana’ • Scegli, dal Pannello Proprietà, il Formato Titolo 2. Per inserire il testo a fianco dell’immagine, devi per prima cosa selezionare l’immagine e spostarti a fianco premendo il tasto cursore freccia a destra. Poi puoi digitare direttamente il testo, oppure selezionarlo dal file originale ed incollarlo, utilizzando il comando Incolla testo, presente nel Menu Modifica. Per inserire un collegamento ipertestuale esterno: • Seleziona il testo ‘Porte Aperte sul Web’ • Clicca sull’icona Collegamento ipertestuale

presente nella Barra Inserisci Comune • Scrivi a fianco di Collegamento:

http://www.porteapertesulweb.it • Scrivi a fianco di Titolo: link a un sito esterno.

Per inserire il testo relativo al secondo titolo 2: • Punta il mouse alla fine del testo precedente • Premi Invio • Scrivi Appuntamenti • Premi Invio • Clicca sull’icona ‘Elenco non ordinato’, presente nel Pannello Proprietà • Scrivi i testi degli appuntamenti (separandoli con un Invio) così come riportato nel file d’esempio In modo analogo rispetto a quanto spiegato sopra, puoi attribuire al testo ‘Appuntamenti’ il titolo 2 e scrivere la terza e ultima notizia del div #sinistra.

pag. 20



8. Il menu secondario


<div id="menu2"> <ul> <li><a href="#" tabindex="40" title="come raggiungere la scuola a piedi, in macchina, in treno">dove siamo</a></li> <li><a href="#" tabindex="45" title="il Piano dell'Offerta Formativa">il pof</a></li> <li><a href="#" tabindex="50" title="le principali circolari per gli studenti, i genitori e i docenti">circolari</a></li> <li><a href="#" tabindex="55" title="immagini di vita scolastica"><span xml:lang="en">photo gallery</span></a></li> <li><a href="#" tabindex="60" title="il catalogo dei libri con ricerca per classe e per materia">libri adottati</a></li> <li><a href="#" tabindex="65" title="il regolamento d'Istituto, lo Statuto degli studenti e delle studentesse">regolamenti</a></li> <li><a href="#" tabindex="70" title="le ultime notizie archiviate per mese"><span xml:lang="en">news</span></a></li> </ul> </div>

Le voci del menu sono rappresentate come elementi (<li>...</li>) di un elenco non ordinato (<ul>...</ul>). Trattandosi di link, è stato inserito anche, all'interno del tag <a>, l’attributo title, per specificare meglio alcune informazioni riguardo alla pagina linkata.

pag. 21



selettore commento

#menu2 ul{ list-style-type: none; margin-top: 5px; margin-bottom: 5px; } #menu2 li{ margin-top: 3px; margin-bottom: 3px; font-weight: bold; border-bottom: 1px dashed #000033; margin-right: 10px; margin-left: -30px; }

lista non ordinata interna all’id menu2: segnaposto: nessuno; i margini superiore e inferiore della lista sono di 5 pixel; voce di lista non ordinata interna all’id menu2: i margini superiore e inferiore di ogni voce di lista sono di 3 pixel; testi in grassetto bordo inferiore tratteggiato, di colore blu e spessore di 1 pixel; margine destro di 10 pixel; margine sinistro negativo (-30px), in modo da recuperare lo spazio lasciato vuoto dal segnaposto

Il menu secondario è organizzato come una lista non ordinata. Desiderando, però, che non venga visualizzato alcun elemento grafico come segnaposto delle singole voci (nessun “puntoelenco”) viene assegnato il valore 'none' alla proprietà 'list-style-type' riferita a #menu2 ul. Si ricorda ancora che la presenza del box #menu2 davanti al tag ul fa in modo che la proprietà agisca sulle liste presenti solo nel box #menu2 stesso. In questo modo, eventuali altre liste presenti in altri box non risentiranno di tali attribuzioni e potranno essere visualizzate come liste in modo standard. Ora mancano solo da definire gli effetti associati ai link: selettore commento

#menu2 li a:link{ color: #000033; background-color: #EEF2FD; text-decoration: none; display: block; height:1.5em; line-height:1.5em; padding-left: 8px; } #menu2 li a:visited{ text-decoration: none; color: #000033; background-color: #EEF2FD; display: block; height:1.5em; line-height:1.5em; padding-left: 8px; } #menu2 li a:hover{ color: #FFFFFF; text-decoration: none; background-color: #000099; display: block; height:1.5em; line-height:1.5em; padding-left: 8px; }

Stato dei link delle liste interne all’id menu2: testi di colore blu scuro … … su sfondo azzurro … … senza sottolineatura; vedi dopo spazio di 8 pixel dal bordo sinistro Stato dei link visitati delle liste interne all’id menu2: uguale a quelli definiti per a:link Stato dei link delle liste interne all’id menu2 quando il mouse passa sopra di essi: uguale a quelli definiti per a:link e a:visited, tranne che per il colore (ora bianco) e lo sfondo (ora blu)

pag. 22


I link relativi alle voci di menu definite nel box #menu2 non avranno sottolineatura in alcuno stato e si estenderanno lungo tutta la larghezza a disposizione (display: block;), favorendo, in questo modo, il puntamento da parte del mouse. Il padding-left ha la funzione di distanziare leggermente la scritta dall’area evidenziata per il link (con particolare vantaggio nell’effetto roll over), mentre le proprietà height e line-height sono state aggiunte per aumentare l’area del link e, contemporaneamente, minimizzare un errore di visualizzazione del css da parte di Explorer 5.0. (cfr. il template 'menu verticali con i css', in www.constile.org).


Per inserire l’elenco non ordinato che contiene le voci del menu secondario: Dalla Vista Progettazione, • Punta il mouse all’interno del div #menu2 e, se presente, seleziona la scritta ‘Inserire qui il contenuto

per id "menu2"’ • Clicca sull’icona ‘Elenco non ordinato’, presente nel Pannello Proprietà • Scrivi ‘dove siamo’, premi Invio • Scrivi le altre voci del menu premendo Invio tra una e l’altra.

Tra le voci di menu scritte ci sono alcuni termini inglesi. In questi casi è necessario specificarlo, modificando opportunamente il codice xhtml: • Seleziona la scritta ‘photo gallery’ • Clicca sul pulsante ‘Mostra vista codice’ • Posiziona il cursore appena prima della scritta ‘photo gallery’

• Digita il carattere ‘<’ • Scegli, dall’elenco a cascata il tag span • Premi la barra spaziatrice • Scrivi xml:lang=”en”> • Sposta il tag di chiusura </span> appena dopo la scritta • Se la procedura è corretta, devi ottenere

<span xml:lang="en">photo gallery</span>

L’operazione deve ora essere ripetuta per il testo ‘news’ Per inserire i link: • Seleziona, trascinando il mouse, il testo ‘dove siamo’ • Dalla Barra Inserisci Comune, clicca sull’icona Collegamento ipertestuale (la catena) • Nella Finestra (contenenti gli elementi di accessibilità) che si apre automaticamente, inserisci

Collegamento: # (link di prova, da sostituire con il percorso esatto della pagina linkata); Titolo (è l’attributo title): “come raggiungere la scuola a piedi, in macchina, in treno". Dreamweaver, lasciando vuota la casella di fianco a Collegamento, inserisce automaticamente il carattere # (link di prova, da sostituire con il percorso esatto della pagina linkata)

• Ripeti l’operazione con le altre voci del menu.

pag. 23

http://www.constile.org/


9. Il footer


<div id="footer"> <strong>Scuola Aperta</strong><br /> <a href="#" tabindex="80">mappa del sito</a> - tasti d'accesso - per contattarci </div>

La funzione del footer (una sorta di piè di pagina del documento) è duplice: permettere di chiudere formalmente la pagina e richiamare alcune informazioni sul sito, aggiungendo utili informazioni di servizio. In questo caso si propone di inserire il link alla mappa del sito (indispensabile strumento di orientamento), alla spiegazione dei tasti di accesso e ad una pagina per i contatti con il webmaster e i responsabili della scuola.


Le caratteristiche per il box #footer vengono definite con il Foglio di Stile: selettore commento

#footer { font-size: 0.9em; color: #000000; background-color: #EEF2FD; clear: left; text-align: center; padding-top: 5px; padding-bottom: 5px; border-right: 1px solid #000033; border-bottom: 3px solid #000033; border-left: 1px solid #000033; }

id footer: testi con dimensione pari al 90% rispetto a quella definita nel body; testi di colore nero … … su sfondo azzurro; interruzione del flusso del div precedente; allineamento: centrato: spazio di 5 pixel dai bordi superiore e inferiore; vedi dopo

Il bordo laterale sarà di 1 pixel, continuo e di colore blu scuro. Il bordo inferiore avrà le stesse caratteristiche, tranne lo spessore che sarà di 3 pixel, mentre il bordo superiore sarà assente per evitare di aggiungere 1 pixel al bordo inferiore del div #centrale (attaccato al footer).


Per posizionare il punto di inserimento appena sotto il div #centrale Dalla Vista Codice (non usare in questo caso la Vista Progettazione, perché Dreamweaver non riesce a gestire l’operazione in tale vista, quando i div sono annidati), • Punta il mouse all’interno del div #centrale • Seleziona l’intero div cliccando <div#centrale> dal Selettore di tag • Premi il tasto cursore freccia a destra

pag. 24


Per disegnare il box #footer: • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli ID: footer • Torna in Vista Progettazione • Sovrascrivi il testo che appare automaticamente, digitando ‘Scuola Aperta’ • Vai a capo con la combinazione di tasti Shift+Invio • Digita ‘mappa della scuola – tasti d’accesso – per contattarci’

Per attribuire il grassetto al nome della scuola • Seleziona ‘Scuola Aperta’ • Clicca in corrispondenza del pulsante B, posto nella prima riga del Pannello Proprietà.

pag. 25

10. La protezione del codice e dei documenti

Per proteggere i documenti contenuti nel sito, si consiglia di utilizzare una licenza che ne favorisca la diffusione, citando la fonte, e ne impedisca la commercializzazione. Un esempio è fornito dai tipi di licenza rilasciati dalla Creative Commons (http://creativecommons.org). Se lo ritieni adatto al sito che stai costruendo, puoi semplicemente copiare le righe di codice interessate ed incollarle appena sotto il div#centrale (cioè appena prima del tag body di chiusura).


<div id="licenza">  <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/"><img alt="Creative Commons License" src="http://creativecommons.org/images/public/somerights20.gif" /></a> <br /> <p>I contenuti di questo sito, salvo diversa indicazione, sono rilasciati sotto una licenza <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Creative Commons License</a> (…) Tutti i marchi sono proprietà dei rispettivi proprietari</p> </div>

Ricordando che le parti comprese tra <! - - e - -> sono commenti e che la porzione di codice da inserire è direttamente scaricabile dal sito sopraccitato, si osserva che è stato utilizzato il nuovo div #licenza, al fine di inserire l’informazione sulla licenza e sul link che ne descrive le caratteristiche.


selettore commento

#licenza { color: #000000; background-color: #FFFFFF; text-align: center; font-size: 0.8em; margin-top: 15px; } #licenza img { border: none; } #licenza p { margin-top: 10px; }

id licenza: testi di colore nero … … su sfondo bianco… … centrati … .. e con dimensione pari all’80% rispetto a quella definita nel body; margine superiore di 15 pixel (in modo da abbassare un po’ il box rispetto al div #centrale immagini interne all’id licenza: nessun bordo (così si elimina il bordo automatico anche nei link) paragrafi interni all’id licenza: margine superiore di 10 pixel

pag. 26

http://creativecommons.org/


11. Qualche ritocco alla colonna di destra


Considerate la natura didattica del sito e la necessità di ravvivare alcuni contenuti, si è pensato di aggiungere qualche elemento grafico nella parte libera della colonna di destra. In questa pagina si propone di mettere in evidenza un disegno e l'adesione della scuola al Progetto Porte Aperte sul Web. <div class="disegni"> <img src="img/galletto.jpg" alt="disegno del mese: particolare dei murales per la mensa; opera delle seconde" width="110" height="84" /> </div>

Il div associato alla classe 'disegno' ha la funzione di ospitare il disegno del mese, il quale naturalmente richiede un ALT rappresentativo della sua funzione nel documento, magari corredata, se l’immagine è significativa, da una breve descrizione testuale. Si osservi che alcuni esperti consigliano di non superare gli 80 caratteri, spazi inclusi: in questo caso siamo a 75. Può essere inoltre importante valorizzare la valenza didattica della descrizione del disegno da parte del suo autore; in questo caso, conviene aggiungere una descrizione lunga in una pagina a parte, utilizzando l'attributo longdesc, abbinato al relativo link (per un esempio, confronta l' home page di http://www.porteapertesulweb.it) <div class="disegni"> <img src="img/logopasw.gif" alt="logo del Progetto Porte Aperte sul Web" width="110" height="33" /> <p class="pasw">La scuola aderisce al Progetto <br /> <a href="http://www.porteapertesulweb.it">Porte Aperte sul Web</a></p> </div>

Il div class=”disegni” viene replicato inserendo il testo di adesione della scuola al Progetto Porte Aperte sul Web, seguito dall'immagine del logo del progetto stesso, alla cui home page si accede tramite link. Si ricorda che, nel caso il link parta da un'immagine, non si devono inserire contemporanemente gli attributi ALT (dell'immagine) e TITLE (del link), ma condensare le due informazioni all'interno del solo attributo ALT. Sotto l’immagine, un breve testo, inserito nel paragrafo classe .pasw, con la dichiarazione di adesione al progetto.

pag. 27




Con il Foglio di Stile definiamo le caratteristiche per le classi .disegni e .pasw : selettore commento

.disegni { font-size: 0.9em; padding-top: 20px; text-align: center; } .disegni img { display: block; border: 1px dashed #000033; margin: 8px auto; text-align: center; } .pasw { margin: 8px; }

classe disegni: testi con dimensione pari all’80% rispetto a quella definita nel body; spazio dal bordo superiore di 20 pixel; testi con allineamento centrato Immagini interne alla classe disegni: trasformazione dell’elemento in block-level (così non ha testo a fianco); bordo di 1 pixel, tratteggiato e blu scuro; margine superiore e inferiore di 8 pixel, margini laterali automatici (per centrare l’immagine) classe pasw (progettata per essere applicata anche a parti di testo): margini di 8 pixel (per migliorare la leggibilità)

pag. 28


12. Verifica del codice e validazione

12.1. Premessa

Il processo di verifica e validazione del codice e del grado di accessibilità della pagina è estremamente importante e deve essere svolto con la massima attenzione e cura. Illustriamo, ora, alcune delle procedure standard di prima verifica, sottolineando che la valutazione del livello di accessibilità e di fruibilità della pagina, lungi da essere considerato un traguardo conseguito una volta per tutte, al contrario richiede la disponibilità di sottoporre periodicamente e ripetutamente ogni pagina prodotta ad un serio controllo umano di validazione.

12.2. Prime operazioni. Verifica in locale

Un primo momento di verifica è costituito dal controllo della stabilità della pagina con i vari browser. Se si lavora in ambiente Windows, si consiglia di verificare la visualizzazione almeno con Internet Explorer 6.0, Internet Explorer 5.1, Mozilla 1.07 e Opera 7.0, Netscape 4.5 e Firefox 1.0. Nel caso si utilizzi Dreamweaver, è possibile eseguire facilmente questi controlli, una volta che, scaricati i software sul proprio computer, si sono personalizzate le preferenze del programma (dal menu Modifica - Preferenze - Anteprima nel browser). E' opportuno eseguire i controlli anche modificando la risoluzione del monitor (provare almeno con 1024x768 e con 800x600) e la dimensione dei caratteri (utilizzare gli appositi comandi dei singoli browser). Dreamweaver, inoltre, consente anche una verifica della correttezza del codice xhtml, attraverso il menu File - Controlla pagina - Convalida il codice.

12.3. Verifica on line

Una volta pubblicata la pagina, è necessario procedere a tutta una serie di controlli e di verifiche sia sul codice xhtml, sia sul Foglio di Stile, sia sul grado di accessibilità della pagina. A questo proposito, consigliamo di scaricare l'utilissima barra dell'accessibilità (per il momento operante in ambiente Windows) da una sezione del sito www.nils.org.au. La barra, sviluppata da Steven Faulkner per conto di AIS, è stata tradotta in italiano da Roberto Castaldo di webaccessibile.org:

12.3.1. Alcuni comandi della barra dell'accessibilità

Tra i numerosi controlli che si possono operare con la barra dell'accessibilità, si sottolinea in particolare l'importanza di utilizzare i menu:

pag. 29

http://www.nils.org.au/ais/web/resources/toolbar/versions/italian/index.html



• Validazioni: HTML; CSS; controllo dei link • Ridimensiona: 800x600; 1024x768 • CSS: Disattiva/attiva i CSS; elementi HTML deprecati • Colori: Analisi del contrasto • Struttura: Intestazioni; elementi list; acronimi/abbreviazioni; accesskeys; visualizza i div • Strumenti: Bobby; Juicy Studio Tools (in particolare il contrasto); Torquemada • Informazioni meta: Peso/velocità della pagina • Opzioni IE: Grandezza del carattere Alcuni di questi controlli (esempio quelli relativi al menu Struttura) non sono indispensabili, ma possono essere d'aiuto anche come promemoria e per controllare la struttura logica del documento.

12.4. Basta così?

Si ribadisce ancora una volta che la verifica automatica è condizione necessaria, ma assolutamente non sufficiente, per la piena accessibilità e fruibilità di una pagina web. E' necessario procedere anche a una serie di controlli umani per verificare sul campo il grado di fruizione delle pagine prodotte. A questo proposito, l'ambito scolastico ha il vantaggio di disporre di un variegato campionario di modalità personalizzate di navigazione, o solo al proprio interno o in rete con altre istituzioni scolastiche. Sarebbe perciò auspicabile l'attivazione di forme di cooperazione tra i diversi attori della progettualità scolastica. Docenti, genitori e studenti, insieme, potrebbero ritrovare un ulteriore motivo per far incontrare la comune aspirazione verso una società aperta e solidale, dove l'esigenza di fornire informazioni per tutti diventa un obiettivo comune. Il Gruppo di Porte Aperte sul Web rimane a disposizione di tutti coloro intendono percorrere questa strada di civiltà.

pag. 30


13. Realizzazione di una pagina interna

Dopo avere completato l’home page, avere creato le sottocartelle con il nome delle sezioni del sito (esempio ‘inclasse’, ‘docenti’, studenti’,…) ed avere inserito l’esatto percorso dei link interni, puoi passare alla realizzazione delle pagine interne, le quali manterranno lo stile dell’home page. Ci riferiamo, ora, alla sezione ‘docenti’ e ammettiamo che la sua pagina d’ingresso sia nominata ‘docenti.htm’. Supponiamo di volere creare la pagina ricevimento.htm, interna alla sezione ‘docenti’ (raggiungibile attraverso un link da docenti.htm) e contenente una tabella dati con l’orario di ricevimento dei docenti.

13.1. Salvataggio della pagina ricevimento.htm

Per prima cosa è necessario creare il file ricevimento.htm, come copia del file index.htm. Con Dreamweaver:

• Visualizza il file index.htm • Scegli dal Menu File – Salva con nome… • Salva nella cartella ‘docenti’ con nome file: ‘ricevimento.htm’ Questo metodo è particolarmente vantaggioso, in quanto il percorso dei

link e delle immagini viene automaticamente aggiornato. Prima di modificare alcune specifiche aree di ricevimento.htm, è bene ricordarsi di cambiare il titolo (tag title) della pagina: • Nella barra degli Strumenti ‘Documento’ seleziona la casella di testo a fianco di Titolo; • Scrivi ‘Scuola Aperta: docenti – orario di ricevimento’

pag. 31


13.2. Modifica della testata

L’unica modifica da apportare alla testata consiste nel linkare il logo della scuola all’home page e nella modifica del rispettivo attributo ALT. Si ricorda, a questo proposito, che l’ALT di un’immagine deve in prima istanza esprimere la funzione dell’immagine stessa nel contesto della pagina.

13.2.1. Inserimento del link e modifica dell’alt dell’immagine

Per inserire il link con Dreamweaver, per prima cosa seleziona il logo. Poi, dal Pannello Proprietà: • Clicca sul simbolo di cartella, posto a destra della casella di testo relativa a Colleg • Seleziona il file index.htm presente nella cartella principale del sito • Clicca su Ok

Un’osservazione. Quando devi inserire un link partendo da un’immagine, non si consiglia di utilizzare il Pulsante della ‘catena’ presente nella Scheda Comune, in quanto inserisce automaticamente un testo linkato spesso indesiderato. Per modificare l’alt dell’immagine • Sposta il mouse sull’immagine selezionata • Clicca con il pulsante destro del mouse • Scegli Modifica tag <img>… • Scrivi ‘link all'home page [logo]’ nella casella di testo a fianco di Testo alternativo Inserendo il collegamento all’immagine si noterà come la stessa sia stata contornata da un

bordo blu, che indica il suo stato di link. Puoi toglierlo, utilizzando la regola border:none nel selettore #testata img definito in stile.css. Con Dreamweaver, puoi • Selezionare #testata img dal Pannello Stili CSS • Cliccare con il tasto destro del mouse e scegliere

Modifica • Selezionare la categoria Bordo e scegliere ‘nessuna’,

a fianco di Sup.

13.2.2. Variazioni del codice xhtml e del Foglio di stile

Codice XHTML: <div id="testata"> <a href="../index.htm"><img src="../img/logoscuola.gif" alt="link all'home page [logo]" width="100" height="100" /></a> …

pag. 32


Foglio di Stile: selettore commento

#testata img{ float: left; margin-left: 20px; border: none; }

Immagini interne all’id testata: permette che elementi adiacenti scorrano alla sua destra; margine sinistro di 20 pixel; nessun bordo (così si elimina il bordo automatico anche nei link)

13.3. Modifica della barra orizzontale

La barra orizzontale (#barra), che nella home page aveva la funzione di informare circa la data dell’ultimo aggiornamento, nelle pagine interne ospiterà la cosiddetta navigazione ‘a briciole di pane’ che permette al visitatore di • conoscere la posizione gerarchica della pagina che visita • avere a disposizione dei link diretti alle pagine appartenenti a un livello gerarchico superiore (ad

esempio, in questo caso, la pagina ricevimento.htm è gerarchicamente subordinata alla sezione docenti, che a sua volta è subordinata alla home page).

Per modificare il contenuto del div #barra: • Sposta il cursore all’interno del div #barra • Seleziona il testo ‘ultimo aggiornamento: 27 dicembre 2004’ • Scrivi (viene sovrascritto) il testo ‘sei in home - docenti - orario di ricevimento’ Non resta, ora, che inserire i link con il metodo descritto nei precedenti capitoli.

13.3.1. Variazioni del codice xhtml e del Foglio di stile

Codice XHTML: <div id="barra">sei in <a href="../index.htm" title="vai all'home page">home</a> - <a href="index.htm" title="vai alla pagina d'ingresso alla sezione docenti">docenti</a> - orario di ricevimento </div>

Il Foglio di Stile resta invariato.

13.4. Modifica del contenuto principale

pag. 33


13.4.1. Il codice xhtml commentato

<div class="notizia"> <h2>Orario ricevimento docenti</h2> <p>testo introduttivo</p> <table width="90%" cellspacing="0" summary="giorno e ora di ricevimento dei docenti"> <caption>orario di ricevimento</caption> <tr> <th scope="col">docente</th> <th scope="col">giorno</th> <th scope="col">orario</th> </tr> <tr> <td>Bianchi</td> <td>lunedì</td> <td>10.30 - 11.30</td> </tr> <tr class="pari"> <td>Neri</td> <td>giovedì</td> <td>8.30 - 9.30</td> </tr> <tr> <td>Rossi</td> <td>sabato</td> <td>11.30 - 12.30</td> </tr> <tr class="pari"> <td>Verdi</td> <td>giovedì</td> <td>10.30 - 11.30</td> </tr> </table> </div>

La tabella sarà inserita modificando opportunamente il contenuto del div notizia, utilizzato nella home page (cfr. paragrafo 7.4. di questa guida). La tabella dovrà contenere i necessari tag e attributi consigliati dalle Linee Guida per l’Accessibilità dei Contenuti Web nel caso di semplici tabelle dati: • l’attributo ‘summary’ del tag <table> con lo scopo di descrivere la funzione della tabella • il tag <caption> con la funzione di dichiarare il titolo della tabella • il tag <th> con la funzione di definire, distinguendole dalle altre celle, le intestazioni delle colonne

della tabella • l’attributo ‘scope’ dei tag <th> che permette ai programmi di sintesi vocali di dichiarare la diretta

corrispondenza tra il contenuto dell’intestazione e il contenuto di cella. Nella tabella riportata, inoltre, si è pensato di differenziare le righe dotandole di sfondi alternati. Alle righe pari è stato così attributo lo stile definito con la classe .pari.

pag. 34


13.4.2. Il Foglio di Stile

selettore commento

table { margin-left: auto; margin-right: auto; width: 80%; border: 1px solid #990000; } caption { color: #FFFFFF; background-color: #990000; letter-spacing: 0.1em; padding: 4px; font-weight: bold; margin-left: auto; margin-right: auto; border: 1px solid #990000; } th { text-align: left; padding-top: 4px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px; border: 1px solid #990000; } td { padding-top: 4px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px; border: 1px solid #990000; } .pari { color: #000000; background-color: #FFFFCC; }

tag table: margini laterali automatici (per centrare la tabella) larghezza della tabella: 80%; bordo di 1 opixel, continuo e di col re blu tag caption (titolo della tabella): testi di colore bianco … … su sfondo blu spaziatura tra le lettere di 0.1 ems; spazio tra il testo e i bordi di 4 pixel; stile grassetto; margini laterali automatici; bordo di 1 pixel, continuo e di colore blu; tag th (intestazione di colonna e/o di riga): testi allineati a sinistra; spazio dai bordi superiore e inferiore di 4 pixel e dai bordi laterali di 8 pixel (la regola può essere condensata in padding: 4px 8px;); bordo di 1 pixel, continuo e di colore blu tag td: vedi quanto detto per il tag th si possono condensare le due regole riferendole ai due selettori: th, td {…} classe pari: testi di colore nero… … su sfondo giallo chiaro

pag. 35


13.4.3. Inserimento della tabella dati con Dreamweaver

Dalla Scheda Comune • clicca sull’icona Tabella • Nella Finestra Tabella, scrivi Righe: 5; Colonne: 2; Larghezza tabella 90 percent; Spessore Bordo:

(lasciare bianco cancellando il valore trovato) • In Intestazione seleziona la terza (in alto); • in Accessibilità, Didascalia: orario di ricevimento e Riepilogo: giorno e ora di ricevimento dei docenti.

Poiché, una volta che sono stati definiti gli stili, la riga di separazione tra l’intestazione delle colonne e i dati delle celle appare interrotta in corrispondenza dei bordi laterali delle celle, puoi rimediare, • selezionando la tabella; • scrivendo ‘0’ nella casella di testo a fianco di SpazCell nel Pannello Proprietà.

pag. 36


14. Seconda versione dell’home page

14.

La s• u

a• u• il• u• u

i d

Queprec• la• sLa gverswww

14.

testata

barretta e
menu principal
contenuto
footer
1. Descrizione

econda versione dell’home page presenta dall'alto verso il basso na sezione testata, contenente il logo, il nome della scuola con l'indirizzo e la data deggiornamento na 'barretta' contenente la data dell’ultimo aggiornamento menu principale orizzontale formato da 5 elementi na sezione centrale che contiene a sinistra il contenuto principale e a destra il menu na sezione di chiusura (footer) in cui è ripetuto il nome della scuola con telefono e falink alla descrizione dei tasti d'accesso, alla mappa del sito e alla modalità per contatel sito e il personale della scuola.

sta versione della pagina presenta alcune differenze rispetto a quella analizzaedentemente: sezione centrale è stata realizzata facendo ricorso al posizionamento dei div col me

ono stati inseriti alcuni ‘salta menu’ per favorire la navigazione tramite i programmi diuida prenderà in esame soltanto i contenuti che presentano differenze rispettione. Il documento html e il Foglio di Stile sono on line agli indirizzi .porteapertesulweb.it/corso2/index2.htm e www.porteapertesulweb.it/corso2/

2. Il layout centrale

pag. 37

menu secondario

ll'ultimo

secondario x e sono inseriti tare i curatori

ta

todo float sintesi vocale. o alla prima

stile2.htm.

http://www.porteapertesulweb.it/corso2/index2.htm

http://www.porteapertesulweb.it/corso2/stile2.htm



<div id="sinistra">Inserire qui il contenuto per id "sinistra"</div> <div id="menu2">Inserire qui il contenuto per id "menu2"</div>

Il layout centrale è definito dai due box contigui #sinistra e #menu2. Non è necessario l’inserimento di un box contenitore. Questo tipo di struttura costruisce un layout a due colonne, con il menu secondario posto sulla destra, dopo il contenuto principale. Nel codice della pagina html non è necessario altro: sarà affidato al Foglio di Stile l'importante compito di definire il posizionamento e le caratteristiche dei box, in modo da stabilire tutte le proprietà di formattazione del contenuto e del menu secondario.


Con il Foglio di Stile definiamo le caratteristiche per i box #sinistra e #menu2: selettore commento

#sinistra { color: #000000; background-color: #FFFFFF; width: 72%; float: left; } #menu2 { width: 28%; color: #000033; background-color: #EEF2FD; padding-top: 1em; float: left; }

id sinistra: testi di colore nero … … su sfondo bianco; Larghezza del box: 72%; il box è disegnato sul lato sinistro e il suo contenuto scorre alla sua destra. id menu2: larghezza: 28%; testi di colore blu scuro … … su sfondo azzurro chiaro; spazio dal bordo superiore: 1em.

Il box #sinistra, attraverso la proprietà float:left, è definito come mobile, cioè ha, alla sua sinistra, un secondo box e ha una larghezza del 72%. Il box #menu2, che ospiterà il menu secondario, è anch’esso come mobile (float:left).

14.2.3. Il layout centrale con Dreamweaver

Per posizionare il punto di inserimento appena sotto il div #menupr: Dalla Vista Progettazione, • Punta il mouse all’interno del div #menupr • Seleziona l’intero div cliccando <div#menupr> dal Selettore di tag • Premi il tasto cursore freccia a destra

Per disegnare il box #sinistra: • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div e Scegli ID: sinistra

Per disegnare il box #menu2: • Seleziona l’intero div #sinistra cliccando <div#sinistra> dal Selettore di tag • Premi il tasto cursore freccia a destra • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli ID: menu2

pag. 38


14.3. Qualche ritocco alla colonna di destra


In questa seconda versione si propone un’alternativa alla visualizzazione delle immagini presenti nella colonna di destra. <div class="disegni"> <img src="img/galletto.jpg" alt="particolare dei murales per la sala mensa, ad opera delle classi seconde" width="110" height="84" /> </div> <div class="disegni"> <img src="img/logopasw.gif" alt="logo del Progetto Porte Aperte sul Web" width="110" height="33" /> <p class="pasw">La scuola aderisce al Progetto <a href="http://www.porteapertesulweb.it">Porte Aperte sul Web</a></p> </div>

Il codice XHTML resta immutato; cambia solo il CSS.

pag. 39



Con il Foglio di Stile definiamo le caratteristiche per le classi .disegni e .pasw : selettore commento

.disegni { font-size: 0.9em; color: #000033; background-color: #DBE4FB; text-align: center; border-top: 1px solid #000033; border-right: 1px solid #000033; border-bottom: 3px solid #000033; border-left: 1px solid #000033; padding: 15px; margin: 10px; } .disegni img { display: block; border: 1px dashed #000033; margin: 5px auto; } .pasw { margin: 0; }

classe disegni: testi con dimensione pari al 90% rispetto a quella definita nel body; testi di colore blu scuro … … su sfondo azzurro; Contenuti centrati; bordo continuo e di colore blu, avente spessore di 1 pixel, tranne nella parte inferiore dove lo spessore è di 3 pixel; i contenuti distano 15 px dai bordi laterali; margine di 10 pixel dal box #menu2 Immagini interne all’id sinistra: trasformazione dell’elemento in block-level (così non ha testo a fianco); bordo continuo, tratteggiato e di colore blu; margini superiore e inferiore di 5 pixel e laterali automatici (per centrare l’immagine) classe pasw: margini nulli

14.3.3. Il file index2.htm con Dreamweaver

Per posizionare il punto di inserimento appena sotto l’elenco non ordinato che contiene le voci del menu secondario: Dalla Vista Progettazione, • Punta il mouse all’interno dell’elenco non ordinato del menu2 • Seleziona l’intero elenco cliccando <ul> dal Selettore di tag • Premi il tasto cursore freccia a destra

Per disegnare il primo div class=”disegni”: • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div. • Scegli classe: disegni

Per inserire la prima immagine (galletto.jpg): • Seleziona, o lascia selezionato, il testo ‘Inserire qui il contenuto per class "disegni"’ • Cancella il testo (premendo il tasto Canc, o Del, a seconda della tastiera) • Clicca sull’icona ‘Inserisci immagine’ • Seleziona l’immagine galletto.jpg (dalla cartella img) e attribuisci come Alt: ‘disegno del mese:

particolare dei murales per la mensa; opera delle seconde’

Per disegnare il secondo div class=”disegni”: • Dalla Vista Progettazione, punta il mouse all’interno del div disegni • Seleziona l’intero div cliccando <div.disegni> dal Selettore di tag • Premi il tasto cursore freccia a destra • Seleziona nella Barra Inserisci, la scheda Layout • Clicca sul pulsante Inserisci tag Div.

pag. 40


• Scegli classe: disegni

Per inserire la seconda immagine (logopasw.gif): • Seleziona, o lascia selezionato, il testo ‘Inserire qui il contenuto per class "disegni"’ • Cancella il testo (premendo il tasto Canc, o Del, a seconda della tastiera) • Clicca sull’icona ‘Inserisci immagine’ • Seleziona l’immagine logopasw.gif (dalla cartella img) e attribuisci come Alt: ‘logo del Progetto Porte

Aperte sul Web’

Per scrivere il testo di adesione al Progetto: • Seleziona, o lascia selezionata, l’immagine logopasw.gif • Premi il tasto cursore freccia a destra • Scrivi il testo ‘La scuola aderisce al Progetto Porte Aperte sul Web’ Si osservi che, per motivi strutturali e semantici, è preferibile inserire ogni testo all’interno di un tag strutturale (titoli, paragrafi, liste). In questo caso si consiglia di selezionare il testo, scegliere dal Pannello Proprietà Formato Paragrafo e, poi, Stile pasw.

14.4. Salta menu ed altri accorgimenti

14.4.1. Salta menu

Terminata la costruzione della home page, ci occupiamo, ora, di inserire una serie di accorgimenti per facilitare la navigazione da parte di chi usa screen readers e di chi fruisce della pagina senza i Fogli di Stile. Nel primo caso si tratterà di inserire dei collegamenti interni alla pagina (nascosti a video con un'apposita proprietà dei css) che permettano al navigatore di saltare alcune parti del documento, senza dovere necessariamente leggerle, per potersi posizionare con la sintesi vocale in particolari zone di interesse.

pag. 41

La navigazione senza Fogli di Stile sarà invece favorita con l'inserimento di alcune parole di presentazione e di alcuni elementi grafici, tipo linee di separazione, prima delle diverse sezioni del documento, in modo da migliorare la formattazione del documento anche quando non possa essere vista quella progettata nel foglio di stile. Anche in questo caso, il tutto sarà nascosto con il Foglio di Stile, in modo da non modificare il layout grafico per coloro che navigano con browser che, invece, supportano la funzione dei css. Per favorire la fruizione dei 'salta menu' da parte di chi fa uso di sintesi vocali, si consiglia di inserire, appena sotto il tag di apertura del body, <body>, il codice:  <div class="nascosto"> <strong>Scuola Aperta, navigazione veloce</strong>. <br /> <a href="#menu1">menu principale</a> | <a accesskey="0" href="#contenuto" >contenuto principale</a> | <a href="#menusec">menu secondario</a> | <a href="#sotto" title="tasti d'accesso, mappa e contatti">piè di pagina</a> <hr /> </div> 

Si tratta di un div, associato alla classe .nascosto (che, come vedremo nel css, conterrà la proprietà display:none perché non sia visibile sulla pagina). In questo modo, il suo contenuto sarà fruibile solo da chi usa i programmi di sintesi vocale e da chi naviga la pagina senza Fogli di Stile (ad esempio da chi usa Netscape 4.5, che non interpreta l'importazione del Foglio di Stile) o con i Fogli di Stile disattivati. In questa sezione, dopo un breve testo introduttivo, sono inserite le voci di menu della navigazione rapida. Con href="#menu1" si intende che il link è interno alla pagina e che punterà all'apposita ancora, nominata, o, meglio, identificata come 'menu1'. Si noti che al link interno al contenuto principale, probabilmente il più importante, è stato associato un numero di accesskey e che al link al piè di pagina (footer) è stato aggiunto l'attributo TITLE, in modo da esplicitare meglio il suo contenuto. Vediamo, ora, il codice inserito prima di ogni sezione significativa del documento (in questo caso prima del menu orizzontale, #menupr): div id="menupr"> <a name="menu1" id="menu1"></a>  <div class="nascosto"><hr /><strong>menu principale</strong></div>  (...)

Appena sotto il div identificato come menupr, viene posizionata l'ancora, a cui punta il collegamento ipertestuale interno, definito in precedenza. Si noti la contemporanea presenza degli attributi name e id, il secondo dei quali è indispensabile in xhtml strict. L'attributo name, invece, è destinato a scomparire, considerata l'annunciata sua eliminazione con xhtml 1.1., anche se rimane aperto il problema della compatibilità con i browser più datati. Proseguendo nella lettura del codice, troviamo una linea orizzontale di separazione, <hr />, e la scritta 'menu principale', posta in grassetto al fine di enfatizzarla a vantaggio di chi, navigando senza css, ha la possibilità di leggerla. Questa scritta ha la funzione di chiarire la funzione della sezione, che, essendo fruita senza layout grafico, può apparire meno evidente. L'unica variazione nel nuovo Foglio di Stile, home.css, dovuta all'inserimento degli accorgimenti descritti, consiste nell'inserimento della classe .nascosto: .nascosto {display: none;}

pag. 42


Con la classe .nascosto, che contiene la proprietà display: none, si ottiene, come già detto, l'effetto di nascondere i contenuti a cui viene associata questa classe, per chi usufruisce del documento con l'ausilio dei Fogli di Stile. Si osservi che, anche se tale scelta viene un po’ penalizzata dalla resa nella Vista Progettazione di Dreamweaver, è possibile collocare l’ancora relativa ai menu principali prima dei rispettivi box (cfr. la guidaxhtml_strict.pdf, Cap. 19). In questo modo si migliora la fruizione della pagina con i css disattivati.

14.4.2. Osservazioni sull’uso di display:none

Alcuni programmi di sintesi vocale (in particolare, alcune versioni di Jaws, tra le quali la 6.00, l’ultima) non leggono la regola display:none, rendendo così inapplicabile il salta menu ai navigatori che utilizzano tali programmi. A questo proposito si segnala un modo per aggirare il problema:

selettore commento

.nascosto { position:absolute; top:-5000em; }

classe nascosto: posizione: assoluta; distanza di -5000ems dal punto più alto del box che lo contiene

L’indicazione di un valore fortemente negativo come top ha il significato di rendere non visibile l’indicazione del salta menu a chi usa browser grafici in grado di interpretare e gestire i css. Gli screen readers, invece, leggeranno la regola, così come chi naviga la pagina senza css.

14.4.3. Un trucchetto per evitare sovrapposizioni indesiderate

Osservando l’anterprima con Internet Explorer, si può notare la presenza di un problema di visualizzazione prima del footer:

Per ovviare a tela inconveniente, si consiglia di inserire, dopo il div #menu2, il codice:

<div class="trucchetto"> <br /> </div>

Si tratta del tag <br />, a cui è stato assegnato lo stile:

.trucchetto {clear: left;}

Con clear:left si interrompe il flusso del div precedente, evitando in questo modo indebite sovrapposizioni tra le aree dei due div.

pag. 43


15. Acronimi e abbreviazioni

Prima di concludere questa guida, desideriamo segnalare ancora l’importanza di un paio di tag, spesso dimenticati, ma utili per migliorare la chiarezza dei testi. Si tratta degli acronimi e delle abbreviazioni, spesso presenti nei nostri documenti.

15.1. L’acronimo POF

Ammettiamo che nel testo di un nostro documento appaia il testo: “Il POF dell’Istituto è stato scritto da…” Codice XHTML prima dell’inserimento del tag corretto: <p>Il POF della scuola è stato scritto da... </p>

Codice XHTML dopo l’inserimento del tag corretto: <p>Il <acronym title="Piano dell'Offerta Formativa">POF</acronym> della scuola è stato scritto da... </p>

E’ quindi necessario utilizzare il tag acronym, accompagnato dall’attributo title, che deve contenere il testo per esteso dell’acronimo. Molti autori usano, inoltre, personalizzare lo stile del tag acronym, in modo da renderlo più evidente nella resa dei browser grafici. Ad esempio, per fare comparire un tratteggio e punto di domanda (visibile quando il mouse passa sopra la parola): selettore commento

acronym { cursor: help; background-color: transparent; border-bottom: 1px dashed #666; }

tag acronym: cursore: help (compare il punto di domanda quando il mouse è sopra); sfondo: trasparente (in modo da adattarsi a ogni sfondo); bordo inferiore di 1 pixel, tratteggiato e di colore grigio

Nel caso in cui l’acronimo rimandi a parole straniere è opportuno segnalare il cambio di lingua: <acronym xml:lang="en" title="cascading style sheet">CSS</acronym>

15.2. L’abbreviazione prof.

In modo analogo di dovrebbe agire nei confronti delle abbreviazioni. Codice xhtml: <p>Il <abbr title="professore">prof.</abbr>...</p>

Si tenga tuttavia presente che, a differenza di Firefox, Opera e Mozilla, Microsoft Explorer non supporta l’elemento <abbr>. In questo caso si può aggiungere la riga di codice <span class="abbr" title="professore">, dopo avere naturalmente definito la classe .abbr.

pag. 44


16. Inserimento di un motore di ricerca

16.1. Il codice XHTML

<h1>Motore di ricerca </h1> <form action="http://www.google.com/search" method="get"> <p class="motore"> <input type="hidden" name="sitesearch" value="www.porteapertesulweb.it" /> <label for="ricerca">Immetti il testo da cercare</label>

da sostituire con l’url del tuo sito

<input name="q" id=”ricerca” type="text" class="evidenzia" value="testo" size="24" /> <input type="submit" value="Cerca" /> </p> </form>

Si presenta una soluzione realizzata attraverso l’uso del potente motore di ricerca Google (www.goolge.com) e riferita alla ricerca all’interno del sito di Porte Aperte sul Web. Per utilizzare il motore all’interno del sito della tua scuola devi inserire, come attributo value del primo tag ‘input’, l’url del sito della tua scuola. Per quanto riguarda i parametri di accessibilità, si sottolinea l’importanza di rendere evidente la casella di immissione dei testi, a vantaggio in particolare delle persone con problemi di vista, nonché di associare strutturalmente un’etichetta (label) al campo di immissione dati.


selettore commento

#motore { font-size: 0.9em; } .evidenzia { font-size: 1.1em; padding: 3px; border: 2px solid #000000; } label { display: block; margin-bottom: 8px; }

id motore: testi con dimensione pari al 90% rispetto a quella definita nel body classe evidenzia: testi con dimensione pari al 110% rispetto a quella definita nel body; spazio di 3 pixel dai bordi bordo continuo, di 2 px e colore nero; tag label: visualizzazione come elemento blocco; margine inferiore di 8 pixel

La classe ‘evidenzia’ ha la funzione di evidenziare la casella contenente i termini da ricercare in modo da facilitare l’immissione del testo (carattere più grande, bordi maggiormente marcati, spazio tra il testo e i bordi della casella). E’ necessario definire uno stile anche per il tag label, in modo da staccarne il testo (in questo caso, 8 pixel) dalla casella di immissione del testo da ricercare.

pag. 45

http://www.goolge.com/


Sommario 1. Perchè xhtml strict?_________________________________________________________________3

1.1 Motivi per una scelta____________________________________________________________________3 1.2. La definizione del Tipo di Documento _____________________________________________________3 1.3. Alcune caratteristiche di xhtml ___________________________________________________________3

2. Descrizione della pagina da ottenere ___________________________________________________4 2.1. Descrizione ___________________________________________________________________________4

3. La testata _________________________________________________________________________5 3.1. Il codice xhtml commentato______________________________________________________________5 3.2. Il Foglio di Stile________________________________________________________________________6 3.3. Lavoriamo con Dreamweaver ____________________________________________________________7

3.3.1. Il Foglio di Stile stile.css con Dreamweaver_______________________________________________________ 7 3.3.2. Il file index.htm con Dreamweaver______________________________________________________________ 8 3.3.3. Controlla la pagina con Dreamweaver ___________________________________________________________ 9

4. La barra orizzontale________________________________________________________________10 4.1. Il codice xhtml commentato_____________________________________________________________10 4.2. Il Foglio di Stile_______________________________________________________________________10 4.3. Lavoriamo con Dreamweaver ___________________________________________________________10

4.3.1. Il Foglio di Stile stile.css con Dreamweaver______________________________________________________ 10 4.3.2. Il file index.htm con Dreamweaver_____________________________________________________________ 11

5. Il menu principale _________________________________________________________________12 5.1. Il codice xhtml commentato_____________________________________________________________12 5.2. Il Foglio di Stile_______________________________________________________________________13 5.3. Lavoriamo con Dreamweaver ___________________________________________________________14

5.3.1. Il Foglio di Stile stile.css con Dreamweaver______________________________________________________ 14 5.3.2. Il file index.htm con Dreamweaver_____________________________________________________________ 14

6. Il layout centrale __________________________________________________________________15 6.1. Il codice xhtml commentato_____________________________________________________________15 6.2. Il Foglio di Stile_______________________________________________________________________15 6.3. Un chiarimento _______________________________________________________________________16 6.4. Il file index.htm con Dreamweaver_______________________________________________________16

7. Il contenuto principale______________________________________________________________17 7.1. Il codice xhtml commentato_____________________________________________________________17 7.2. I link esterni con xhtml strict ___________________________________________________________18 7.3. La gestione dei testi ___________________________________________________________________18 7.4. Il Foglio di Stile_______________________________________________________________________18 7.5. Il file index.htm con Dreamweaver_______________________________________________________20

8. Il menu secondario ________________________________________________________________21 8.1. Il codice xhtml commentato_____________________________________________________________21 8.2. Il Foglio di Stile_______________________________________________________________________22 8.3. Il file index.htm con Dreamweaver_______________________________________________________23

9. Il footer__________________________________________________________________________24

pag. 46


9.1. Il codice xhtml commentato_____________________________________________________________24 9.2. Il Foglio di Stile_______________________________________________________________________24 9.3. Il file index.htm con Dreamweaver_______________________________________________________24

10. La protezione del codice e dei documenti ______________________________________________26 10.1. Il codice xhtml commentato____________________________________________________________26 10.2. Il Foglio di Stile______________________________________________________________________26

11. Qualche ritocco alla colonna di destra _______________________________________________27 11.1. Il codice xhtml commentato____________________________________________________________27 11.2. Il Foglio di Stile______________________________________________________________________28

12. Verifica del codice e validazione _____________________________________________________29 12.1. Premessa ___________________________________________________________________________29 12.2. Prime operazioni. Verifica in locale _____________________________________________________29 12.3. Verifica on line ______________________________________________________________________29

12.3.1. Alcuni comandi della barra dell'accessibilità ____________________________________________________ 29 12.4. Basta così?__________________________________________________________________________30

13. Realizzazione di una pagina interna _________________________________________________31 13.1. Salvataggio della pagina ricevimento.htm ________________________________________________31 13.2. Modifica della testata _________________________________________________________________32

13.2.1. Inserimento del link e modifica dell’alt dell’immagine ____________________________________________ 32 13.2.2. Variazioni del codice xhtml e del Foglio di stile _________________________________________________ 32

13.3. Modifica della barra orizzontale________________________________________________________33 13.3.1. Variazioni del codice xhtml e del Foglio di stile _________________________________________________ 33

13.4. Modifica del contenuto principale ______________________________________________________33 13.4.1. Il codice xhtml commentato _________________________________________________________________ 34 13.4.2. Il Foglio di Stile __________________________________________________________________________ 35 13.4.3. Inserimento della tabella dati con Dreamweaver _________________________________________________ 36

14. Seconda versione dell’home page ____________________________________________________37 14.1. Descrizione _________________________________________________________________________37 14.2. Il layout centrale_____________________________________________________________________37

14.2.1. Il codice xhtml commentato _________________________________________________________________ 38 14.2.2. Il Foglio di Stile __________________________________________________________________________ 38 14.2.3. Il layout centrale con Dreamweaver ___________________________________________________________ 38

14.3. Qualche ritocco alla colonna di destra___________________________________________________39 14.3.1. Il codice xhtml commentato _________________________________________________________________ 39 14.3.2. Il Foglio di Stile __________________________________________________________________________ 40 14.3.3. Il file index2.htm con Dreamweaver___________________________________________________________ 40

14.4. Salta menu ed altri accorgimenti _____________________________________________________41 14.4.1. Salta menu ______________________________________________________________________________ 41 14.4.2. Osservazioni sull’uso di display:none__________________________________________________________ 43 14.4.3. Un trucchetto per evitare sovrapposizioni indesiderate ____________________________________________ 43

15. Acronimi e abbreviazioni___________________________________________________________44 15.1. L’acronimo POF_____________________________________________________________________44 15.2. L’abbreviazione prof._________________________________________________________________44

16. Inserimento di un motore di ricerca __________________________________________________45 16.1. Il codice XHTML ____________________________________________________________________45 16.2. Il Foglio di Stile______________________________________________________________________45

pag. 47

This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/2.0/or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.

http://creativecommons.org/licenses/by-nc-sa/2.0/

home page con xhtml strict · Tutorial per siti scolastici - home page con xhtml strict 3. La...

Documents

Transcript of home page con xhtml strict · Tutorial per siti scolastici - home page con xhtml strict 3. La...