Guida alla realizzazione di un layout fluido I siti Web possono essere realizzati secondo due diversi schemi di layout: layout fissi e fluidi. La differenza tra i due tipi di layout consiste in una diversa espressione delle dimensioni. Nel layout fisso vengono usate delle dimensioni fisse, appunto, utilizzando unità di misura come i pixel e gli em. Nel layout fluido le dimensioni sono espresse in percentuale, operazione che consente alla pagina Web di adattarsi alla dimensione della finestra del browser. Vediamo la differenza tra le versioni fissa e fluida del sito di Hexagon Tours. Osserviamo il sito in versione fissa: la pagina viene centrata all interno della finestra ed è visibile il colore di sfondo ai lati e in basso. Inoltre ridimensionando la finestra del browser, una parte della pagina verrà nascosta e saranno attivate le barre laterali di scorrimento. Istituto Italiano Edizioni Atlas 1
Con la versione fluida, la pagina occupa tutto lo spazio a disposizione nella finestra: non è più visibile lo sfondo ai lati e in basso. Ridimensionando la finestra del browser contenente la pagina in versione fluida, questa si adegua alla nuova dimensione, ridimensionando l immagine e adattando la formattazione del testo. Proviamo a realizzare il layout del sito di Hexagon Tours in versione fluida. Il codice HTML è sostanzialmente identico al sito con layout fisso, con l unica aggiunta del div maincontainer. <!doctype html> <html lang="it"> <head> <meta charset="utf-8" /> <title>benvenuti all'hexagon Tours</title> <link href="stile.css" rel="stylesheet" type="text/css" media="all" /> Istituto Italiano Edizioni Atlas 2
</head> <body> <header> <img src="img/header.png" alt="logo HT" /> </header> <nav> <ul> <li class="paginascelta"><a href="#">homepage</a></li> <li><a href="chisiamo.htm" title="chi siamo">chi siamo</a></li> <li><a href="proposte.htm" title="proposte">le nostre proposte</a></li> <li><a href="prezzi.htm" title="prezzi">prezzi</a></li> <li><a href="contatti.htm" title="contatti">come contattarci</a></li> </ul> </nav> <div id="maincontainer"> <aside> <h3><a href="calcidica.html" title="calcidica" target="_self"> Calcidica </a></h3> <p>scopri una terra ancora incontaminata con spiagge deserte e mare smeraldo.</p> <hr /> <h3><a href="bandiere.html" title="bandiere blu" target="_self">bandiere Blu</a></h3> <p>le spiagge italiane premiate come Bandiere Blu quest'anno sono ben 233, 10 in più rispetto allo scorso anno.</p> <hr /> <h3><a href="mare.html" title="mare" target="_self">mare nostrum</a></h3> <p>la classifica delle più belle spiagge del Bel Paese redatta dagli esperti di HT. Da non perdere!</p> </aside> <section> <article> <h2>speciale escursionismo</h2> <p> L'escursionismo è una forma di attività motoria basata sul camminare nel territorio, sia lungo percorsi (strade, sentieri, ecc.), anche variamente attrezzati, che liberamente al di fuori di percorsi fissi. Complementari all'escursionismo, in quanto svolte in ambiente similare ma con altri mezzi di trasporto, sono le escursioni a cavallo, in mountain bike, in canoa, lo sci di fondo e lo scialpinismo. L'escursionismo è inoltre preliminare ad attività quali l'arrampicata e l'alpinismo. </p> <div class="notizia"><a href="articolo1.html">continua a leggere</a></div> </article> Istituto Italiano Edizioni Atlas 3
<article> <h2>speciale campeggio</h2> <p> Il campeggio è un luogo in cui è possibile trascorrere una vacanza all'aria aperta.<br /> Il campeggio rappresenta una forma alternativa alla vacanza tradizionale in albergo o appartamento a cui si rivolge un gran numero di persone nel mondo.<br /> I campeggi offrono varie opportunità di soggiorno per periodi più o meno lunghi, che vanno dalla semplice piazzola (per tenda/ roulotte/camper) ai bungalow, all'affitto di tende o roulotte già montate e pronte per l'uso.</p> <div class="notizia"><a href="articolo2.html">continua a leggere</a></div> </article> </section> </div> <footer> <div id="testofooter"> 2012 Hexagon Tours</div> </footer> </body> </html> Impostiamo il body con un altezza minima di 100% e una dimensione del font in percentuale in modo da ottenere una buona leggibilità indipendentemente dalla risoluzione dello schermo. Inseriamo anche l overflow con valore hidden per fare in modo che aside e maincontainer siano sempre ben visibili e agganciati al nav e al footer. Tralasciando questa proprietà vedremmo apparire la barra di scorrimento verticale. body { margin:0; padding:0; border: 0; max-height: 100%; background:#5898c9; font-family:helvetica, Arial, Verdana, sans-serif; font-size:95%; line-height:1.4em; Diamo a header una posizione assoluta con valore 0 sia per top che per left: in questo modo collochiamo l intestazione e il banner che contiene esattamente all inizio della finestra del browser. Impostiamo altezza e larghezza e non dimentichiamo il colore per il testo nel caso non si volesse usare il banner di grafica. header { position: absolute; top: 0; left: 0; width: 100%; height: 190px; color: black Istituto Italiano Edizioni Atlas 4
Nel caso di uso del banner in grafica, impostiamo le dimensioni in percentuale relative all immagine contenuta nell intestazione. header img{ width:100%; height:100%; Creiamo il contenitore principale maincontainer che ci assicura il riempimento di tutto lo spazio a disposizione e posizioniamolo in modo assoluto, facendo attenzione che non vada a coprire lo spazio occupato dall intestazione (top:220px) e dal footer (bottom:30px). #maincontainer { position: absolute; top: 220px; left: 0; right: 0; bottom: 30px; background: #fff; Stessi parametri per il footer, al quale associamo anche un letter-spacing distanza tra le lettere) di 1.2 em per avere un effetto di lettere più distanziate del normale. Si noti il valore top:96% che permette a maincontainer e footer di non sovrapporsi. footer { position: absolute; top: 96%; left: 0; width: 100%; height: 50px; background:#3b3b3d; color:#fff; text-align:center; letter-spacing:1.2em; Anche la barra di navigazione e l aside devono essere posizionati in modo corretto rispetto agli altri box della pagina. Si osservi l assegnazione di valori fissi in pixel per l altezza di nav e la larghezza di aside. Questo permette che i box siano perfettamente agganciati a header e section, dal momento che restano fissi e impediscono che si possa intravedere lo sfondo quando si ridimensiona la pagina. nav{ position:absolute; top: 190px; left:0; right:0; height:30px; background-color:#76a14f; padding-top:1px; border-top:5px solid #fff; padding-left:20px; Istituto Italiano Edizioni Atlas 5
aside{ position:fixed; top:220px; left:0; right:0; bottom:0; width:270px; height: 100%; background-color:#cbdfee; color:black; Riguardo a section, diamo una posizione fissa ma non indichiamo height e width: questo box occuperà tutto lo spazio a disposizione. Nel caso volessimo far apparire le barre di scorrimento nel box bianco della section, basta inserire la proprietà overflow con valore auto. section{ position:fixed; top:220px; left:270px; right:5px; bottom:0; background:white; La personalizzazione del layout fluido è terminata. Impostiamo adesso le informazioni di stile relative al blocco navigazione, ai testi e ai collegamenti, senza modifiche rispetto a quanto visto per la versione fissa. nav ul{ list-style-type:none; display:inline; nav ul li{ margin:20px; padding:10px; display:inline; nav a:link, nav a:visited { font-size:1.2em; font-weight:bold; text-decoration:none; color:#fff; font-style:normal; nav a:hover { border-top: 7px solid #76a14f; color:#3b3b3d; Istituto Italiano Edizioni Atlas 6
nav.paginascelta a{ color:#000; border-top:7px solid #000; article{ text-align:center; margin: 15px; article p{ font-size:1.1em; padding:5px; text-align:left; h1,h2,h3{ color:#473730; margin:5px; a:link, a:visited { text-decoration:none; color:#76a14f; section a:hover { font-style:italic; text-decoration:none; color:#ee9670; aside h3{ margin-top:20px; aside p{ font-size:1.1em; margin-left:10px; margin-bottom:15px; hr{ width:200px; height:5px; background-color:#76a14f;.notizia{ font-size:1.1em; text-align:right; #testofooter{ padding-top:7px; Istituto Italiano Edizioni Atlas 7