Porte Aperte sul Web , navigazione veloce.
menu principale | contenuto principale | menu secondario
Benvenuti in Porte Aperte sul Web, Comunità di pratica per l'accessibilità dei siti scolastici - USR Lombardia

link alla home page di  Porte Aperte sul Web [logo]


servizi
chi siamo | mappa | guida | faq | contatti

menu principale

sei in home - sviluppare - modelli

Modelli da utilizzare e da personalizzare

Premessa

La redazione del sito della tua scuola può essere aiutato dall'utilizzo di modelli già impostati, che potrai utilizzare liberamente, anche se il consiglio è di partire da essi per poi modificarli a dovere, in modo da dare un'impronta originale e personale e per meglio rappresentare la specificità dell'ambiente dove operi.

Come già detto, tutti i materiali riportati nella comunità di Porte Aperte sul Web hanno licenza Creative Commons che ne impedisce la commercializzazione e ne sollecita la diffusione, la modifica e quant'altro riteni utile, riconoscendo il contributo dell'autore originario, cioè la Comunità stessa di Porte Aperte sul Web.

A questo proposito, sollecitiamo le scuole che utilizzano i nostri materiali ad inserire in home page il logo della comunità accompagnato dalla dizione "la scuola x aderisce alla comunità di pratica di Porte Aperte sul Web". Si tratta di un piccolo ma prezioso contributo che può permettere al nostro gruppo maggiore riconoscibilità e credibilità.

Modelli presentati nella sezione tutorial

La caratteristica comune dei modelli presentati è di avere una DTD strict e di utilizzare un layout senza tabelle, definito con i Fogli di Stile.

Il consiglio è di scegliere quello che si avvicina di più alle proprie esigenze, di studiarlo, di adattarlo e di vericarne il funzionamento con i diversi browser e a diverse risoluzioni.

stralcio pagina del modello mio sito di Gianluca TroianiModello Mio sito

Il primo modello presentato è di Gianluca Troiani, uno dei massimi esperti nazionali sui Fogli di Stile ed autore del libro "CSS: Guida completa", Apogeo, 2005.

Si tratta di un modello che Troiani ha scritto appositamente per la nostra comunità e che è stato presentato nel corso della Giornata di formazione organizzata dall'associazione culturale "Matite nel Web". Inutile dire che si distingue per la correttezza e la stabilità del codice e delle soluzioni tecniche adottate.

stralcio home page tutorial 1Tutorial 1. home page con xhtml strict

E' il tutorial commentato passo a passo e messo a disposizione dalla nostra comunità per mettere i docenti nella condizione di seguire un percorso di autoformazione.

Il layout è liquido a due colonne con posizionamento assoluto. E' illustrata anche la tecnica dell'inserimento dei salta menu per consentire a che fa uso di programmi di sintesi vocale di evitare sequenze ripetitive di menu ed accedere direttamente a particolari sezioni della pagina.

stralcio home page tutorial 1Modello layout liquido a due colonne (corso 2 di formazione)

E' il modello utilizzato nell'anno 2005 nel corso intermedio (corso 2) di formazione gestito dall'associazione Matite nel Web.

Il layout è liquido a due colonne con box flottanti e seconda colonna con altezza che non arriva fino al piè di pagina. Può essere utile analizzare anche una pagina interna contenente una semplice tabella dati accessibile e la navigazione a briciole di pane.

pagina con layout fisso a tre colonneEsempio di layout fisso a tre colonne

Esempio fornito da Gianluca Troiani per una pagina costituita da una testata; un layout a tre colonne con larghezza fissa e box flottanti; una piè di pagina.

L'esempio si rivela utile per comprendere una sempice struttura di pagina a cui è stata assegnata una larghezza fissa di 700 pixel. In questi casi, settando la risoluzione del monitor a 1024x768 pixel, la pagina occuperà lateralmente la parte centrale lasciando ai lati uno spazio vuoto di circa 150 pixel. Tale fenomeno sarà più evidente a risoluzioni maggiori.

pagina con layout liquido a tre colonneEsempio di layout liquido a tre colonne

Esempio fornito da Gianluca Troiani per una pagina costituita da una testata; un layout a tre colonne con larghezza espressa in percentuali e box flottanti; una piè di pagina.

Nell'esempio la pagina, avendo una larghezza espressa in percentuali, si adatta alla risoluzione del monitor. Per ottenere nelle colonne laterali uno sfondo che arrivi fino al piè di pagina è stato necessario utiizzare due immagini di sfondo opportunatamente costruite ed assegnate a due box contenitori delle tre colonne. Si osservi, inoltre, la tecnica utilizzata per evitare che gli arrotondamenti dovuti alle varabili dimensioni della finestra provochi, a determinate dimensioni, lo scivolamento della terza colonna.

Altri modelli

Ulteriori modelli, utili per prendere ispirazione, sono costituiti dai siti presentati nella sezione "scuole" di questo sito.

Inoltre, i docenti che utilizzano Dreamweaver 2004 o seguenti o altri editor web recenti troveranno nei programmi citati ulteriori modelli da cui partire. Si consiglia, tuttavia, di valutare con attenzione il loro livello di accessibilità alla luce dei Requisiti Tecnici correlati alla Legge Stanca.


menu secondario
Creative Commons License
I contenuti di questo sito, salvo diversa indicazione, sono rilasciati sotto una licenza Creative Commons License.
Tutti i marchi sono proprietà dei rispettivi proprietari