Disegnare un “template”

Disegnare un “template” Come cominciamo a “disegnare il template” per il nostro sito web? Innanzi tutto dobbiamo scegliere un’architettura di base del sito. I siti web 2.0 conformi agli standard del w3c non si usano più siti con frame o con tabelle, bensì si usano molto i fogli di stile. Il primo passo da fare è scegliere un’architettura di base del sito. Gli elementi essenziali sono: Header Menu orizzontale ( o di navigazione ) Menu laterale (che conterrà i links) Contenuto Footer Lezione 8

CONTENUTO HEADER Disegnare un “template” MENU DI NAVIGAZIONE SIDEBAR La disposizione più utilizzata è illustrata accanto Solitamente un sito con una struttura simile non è più largo di 800/900 px. Useremo le classi dei fogli di stile per Costruire l’architettura del sito FOOTER Lezione 8

Disegnare un “template” Iniziamo a definire delle proprietà generali per body: Background Colore del testo Dimensione del testo Gruppo di font per la pagina Margine e padding inizializzati a zero Come esempio i colori guida del sito saranno nero e gradazioni di grigio e arancione, ma voi potete modificare queste proprietà a vostro piacimento. Lezione 8

Disegnare un “template” body { margin: 0; padding: 0; background-color: #636363; font-family: verdana, arial, sans-serif; font-size: 12px; color: #70695A; } Incollando il codice in un nuovo foglio di stile tramite Top Style, e agganciandolo ad una pagina in Dreamweaver, ottenete l’anteprima della pagina principale del sito. Lezione 8

Disegnare un “template” Nella diapositiva 2 la struttura della pagina del nostro sito è composta da 5 box. Un “superbox” che chiameremo “pagina” dovrà contenerli tutti. Equivale nella pratica a racchiudere tutto in un box contenitore. Dobbiamo allora creare un identificatore nel foglio di stile che avrà dimensioni sufficienti a contenere tutti i box che desideriamo. La larghezza adeguata per una visualizzazione in più browser a diversa risoluzione è quasi sempre 800 px. Per consentire a box pagina di stare “al centro” del browser basterà impostare il margine destro e sinistro al valore auto. In questo modo è il browser che si occupa di centrare il box. Lezione 8

800px #pagina Disegnare un “template” #pagina { width: 800px; height: auto; background: #ffffff; margin-left: auto; margin-right: auto; } Lezione 8

Disegnare un “template” Nella pagina web il codice sarà: <body> <div id="pagina"> Inserire qui il contenuto per id "pagina“ </div> </body> Lezione 8

#pagina 800px 800px #header Disegnare un “template” L’header del nostro sito dovrà essere contenuto nel superbox che abbiamo appena creato. Per questo la dimensione deve essere uguale o superiore alla dimensione del box #pagina. Useremo un altro identificatore per l’header che chiameremo appunto #header. #header{ height: 150px; width: 780px; } Lezione 8

Disegnare un “template” Nella pagina web il codice sarà: <body> <div id="pagina"> <div id="header">Inserire qui il contenuto per id "header"</div> </div> </body> Bisogna usare tag div annidati se vogliamo che i box siano contenuti uno nell’altro!! Nel caso dell’esempio il tag con id=“pagina” contiene il nostro primo box con tag id=“header”. Lezione 8

#pagina 800px 800px #header 780px Disegnare un “template” #navigation 780px Immediatamente sotto l’header c’è la barra di navigazione. E’ indispensabile inserire i principali link su tale barra per migliorare la navigazione. Non deve essere molto alta e deve avere le stesse dimensioni dell’header definite in Precedenza, nel caso di questo esempio 780px. #navigation{ height: 42px; width: 780px; } Lezione 8

Disegnare un “template” Nella pagina web il codice sarà: <body> <div id="pagina"> <div id="header">Inserire qui il contenuto per id "header"</div> <div id="navigation">Inserire qui il contenuto per id "navigation"</div> </div> Lezione 8

Disegnare un “template” Lezione 8

#pagina 800px 780px #header 780px Disegnare un “template” #navigation 780px #content 580px #sidebar220px Ora dobbiamo creare i box del contenuto principale e del menu laterale. Useremo un id #content per il contenuto e un id #sidebar per il menu laterale. I box dovranno essere Affiancati. Ricordiamo che per allineare i box a destra o a sinistra della linea corrente bisognerà Usare la proprietà float. La linea corrente è rappresentata nel caso del nostro esempio dal box navigation. Lezione 8

#pagina 800px 780px #header 780px Disegnare un “template” #navigation 780px #leftcontent 580px #sidebar200px #content = #leftcontent + #sidebar #content{ width: 780px; float: left; height: auto; } Lezione 8

Disegnare un “template” Nella pagina web il codice sarà: <body> <div id="pagina"> <div id="header">Inserire qui il contenuto per id "header"</div> <div id="navigation">Inserire qui il contenuto per id "navigation"</div> <div id="content">Inserire qui il contenuto per id "content"</div> </div> </body> Lezione 8

#pagina 800px 780px #header 780px Disegnare un “template” #navigation 780px #leftcontent 580px #sidebar200px #content{ width: 780px; height: auto; } #leftcontent{ width: 580px; float: left; height: auto; } #sidebar{ width: 200px; height: auto; float: right; } #content = #leftcontent + #sidebar Lezione 8

Disegnare un “template” Nella pagina web il codice sarà: <body> <div id="pagina"> <div id="header">Inserire qui il contenuto per id "header"</div> <div id="navigation">Inserire qui il contenuto per id "navigation"</div> <div id="content"> <div id="leftcontent">Inserire qui il contenuto per id "leftcontent"</div> <div id="sidebar">Inserire qui il contenuto per id "sidebar"</div> </div> <div id="footer">Inserire qui il contenuto per id "footer"</div> </div> Sia #leftcontent che #sidebar sono annidati in #content!!! Lezione 8

#pagina 800px 780px #header 780px Disegnare un “template” #navigation 780px #leftcontent 580px #sidebar200px L’ultimo box è il footer. Useremo una classe #footer per questo Ultimo box. Per il footer le dimensioni saranno di 780px Di larghezza e non più alto di 50px. #footer{ float: left; /*questo valore va corretto*/ height: 42px; width: 780px; } #footer 780px Lezione 8

Disegnare un “template” Lezione 8

Disegnare un “template” Centrare tutti i box interni al box #pagina Ora che la nostra struttura base è completa cominciamo ad eliminare alcune imperfezioni. La prima imperfezione è mostrata in figura. Come vedete i box contenuti in #pagina sono allineati a sinistra. Come fare per centrarli rispetto al box #pagina??? Lezione 8

Disegnare un “template” Basterà impostare (come nella slide 5) il margine destro e sinistro a valore auto in tutti quei box che non si allineano centralmente nel box #pagina. In alternativa possiamo racchiudere tutto come di seguito: #header, #navigation, #content, #footer { margin-left: auto; margin-right: auto; } La proprietà vale per tutte le gli identificatori elencati. Lezione 8

Disegnare un “template” Box allineati centralmente rispetto a #pagina Solo #footer non si allinea. Perché? Lezione 8

Disegnare un “template” Nella slide 18 abbiamo allineato il box di #footer a sinistra. Secondo la proprietà float esso si allineerà alla sinistra della linea corrente. La linea corrente però è rappresentata dal box #content. Quando usiamo la proprietà float dobbiamo stare attenti a quella che consideriamo la “linea corrente”. Possiamo risolvere questa imperfezione utilizzando la proprietà clear. Lezione 8

Disegnare un “template” Questa proprietà ci viene in aiuto se vogliamo “ripristinare” il normale flusso del contenuto del documento. Infatti visto che il float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. clear risolve questo problema. Lezione 8

Disegnare un “template” Il flusso è ripristinato e anche il box #footer risulta al centro del box #pagina Nel nostro caso il valore che ci interessa è both, in questo modo ripristiniamo il normale flusso della pagina. #footer{ clear: both; height: 42px; width: 780px; } Lezione 8

Inserire elementi grafici Aggiungendo testo e collegamenti in ogni tag div (i nostri box)il risultato è come in figura: Lezione 8

Inserire elementi grafici Aggiungendo testo e link tra ognuno dei tagdiv della nostra pagina template html, otteniamo una pagina graficamente scarna come nella fig. precedente. Il passo successivo è appunto definire un po’ della grafica del sito. Definire un set di colori guida (colore di sfondo, colore del testo, colore alternativo…); definire poi i colori di sfondo per ogni box, i bordi di ogni box ecc.. Definire i colori per: Testo nell’header (titoli <h1>, <h2>…) Testo nella pagina (<p>) Link/ancore (<a>) Link e ancore al passaggio del mouse (a:hover) Stile delle immagini (<img>: allineamento rispetto al testo, bordo…) Immagini con collegamenti ipertestuali (tag <img> in un tag <a>) Stile di altri elementi di html (<blockquote>, <code>, <table>, stile dei pulsanti, delle caselle di testo…) Definire lo stile degli elenchi Lezione 8

Inserire elementi grafici Una volta definito lo stile base del sito per i box e per la maggior parte degli elementi di html più usati possiamo passare a “specializzare” il nostro stile per ogni elemento a seconda che si trovi o meno in un determinato box della pagina. Per esempio possiamo cambiare il colore dei titoli a seconda che stiano nell’header o nel contenuto, possiamo cambiare lo stile dei link a seconda che si trovino nel contenuto o nel footer o nella sidebar e così via. Nel file template1.css sono elencati alcuni dei tag html principali sui quali possiamo operare le modifiche giuste per adeguare il nostro template ai nostri gusti grafici. Per esercitazione completare a vostro piacimento lo stile per gli elementi proposti. Lezione 8

Inserire elementi grafici Attenzione all’ereditarietà!! Ogni proprietà viene sempre ereditata!! L’operazione che stiamo compiendo è una “specializzazione” di alcune proprietà di alcuni tag. Stiamo perciò attenti alle proprietà definite in precedenza in modo che non vadano in conflitto con quelle nuove. Nell’esempio del file template2.html sono state apportate modifiche sia ai box che ai vari elementi di html a seconda che si trovino nel diversi box della pagina. Il file template2.css raccoglie un esempio di stile guida del nostro sito. Nelle prossime lezioni ci occuperemo di definire classi e di inserire elementi di grafica digitale disegnati con Fireworks. Lezione 8

Inserire elementi grafici Un risultato può essere come in figura: Lezione 8

Disegnare un “template”