Lezione 4

Strumenti per il web design [ <a href=“#”> ]

header content footer contenitore

header content footer contenitore <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titolo</title> <link rel="stylesheet" type="text/css" href="stile.css" /> </head> <body> <div id="contenitore"> <div id="header"></div> <div id="content"> <p> Fa parlare i numeri <b>Antonio Martone</b>. E già la cifra, <br>oltre 4.000 proclamazioni in due anni, basta al <i>presidente della Commissione di garanzia</i> degli scioperi nei servizi pubblici essenziali, per condividere, con il governo, la necessità </p> </div> <div id="footer"></div> </div> </body> </html> HTML

header content footer contenitore CSS #content { width:850px; margin:auto; background:#fff; } #footer{ display:block; width:850px; height:100px; margin:auto; background:#F2A30F; } * { margin: 0px; padding: 0px; border: 0px; font-family: arial, helvetica, sans-serif; } body { background:#F5FFD8; } #contenitore { width: 900px; margin: auto; background: #cccccc; } #header{ width: 850px; height: 200px; margin: auto; background:#C4D929; }

header content footer contenitore * { margin: 0px; padding: 0px; border: 0px; font-family: arial, helvetica, sans-serif; } body { background:url(img/bg1.png); } Immagini di sfondo In prima battuta abbiamo usato come sfondo dei colori a tinta unita dando l’indicazione diretta del colore Es #ccc per il grigio, #000 per il nero ecc. Poi abbiamo provato ad inserire come sfondo del nostro body un’immagine che potesse essere ripetuta sia in orizzontale che in verticale L’immagine viene replicata su tutto lo sfondo della nostra pagina, sia in larghezza che in altezza

header content footer contenitore * { margin: 0px; padding: 0px; border: 0px; font-family: arial, helvetica, sans-serif; } body { background: background:#d4eeef url(img/bg2.jpg) repeat-x top left; } Immagini di sfondo Successivamente abbiamo provato a realizzare un altro effetto per lo sfondo, far sfumare il body da una tinta ad un’altra. Per farlo abbiamo utilizzato l’immagine bg2.jpg un’immagine sfumata da un azzurro più scuro ad uno più chiaro Pertanto nell’indicazione dello sfondo dichiariamo prima il colore più chiaro, #d4eeef, che colorerà la nostra pagina laddove non c‘è l’immagine e successivamente l’immagine bg2.jpg che deve “propagarsi” solo in orizzontale, quindi accanto al percorso del file aggiungiamo repeat-x top left; #d4eeef

header content footer contenitore #header{ width: 850px; height: 200px; margin: auto; background: url(img/testata.jpg); } Sfondo alla testata Esattamente come per il Body abbiamo inserito un’immagine di sfondo anche alla nostra testata. Abbiamo usato il file Testata.jpg che si trova nella cartella img

#content { width:850px; margin:auto; background:#ffffff; } #content p { margin-auto; padding:10px; font-size:12px; line-height:15px; color:#000000; } header content footer contenitore Caratteristiche del paragrafo IL nostro paragrafo di testo si trova dentro il div content quindi all’interno del foglio di stile per indicare le caratteristiche di questo spazio andremo a scrivere sotto alla parte già scritta #content: #content p

<a href="http://www.libero.it" target="_blank"> scioperi </a> header content footer contenitore Inserimento di un link All’interno del nostro file .html Abiamo scelto di likare una parola o una frase. Automaticamente la parola resa attiva acquista un colore che di default è blu per i link non ancora visitati e viola per quelli già visitati.

header content footer contenitore Colore dei link Per fare in modo che tutti i nostri link acquistino automaticamente il medesimo colore, inseriamo nel foglio di stile questa indicazione Creiamo un nuovo elemento che si chiamerà #content a ( ovvero tutti i link presenti in content) e specifichiamo il color che intendiamo attribuire. #content a { color: #ff33dd; }

header content footer contenitore Colore dei link: hover Per fare in modo che tutti i nostri link al passaggio del mouse acquistino un nuovo colore creiamo un nuovo elemento che si chiamerà #content a:hover ( ovvero tutti i link presenti in content al passaggio del mouse) e specifichiamo il color che intendiamo attribuire. #content a:hover { color:#3399ff; }

header content footer contenitore Inserimento di un menu Per prima cosa apriamo il nostro file html e inseriamo un div che conterrà iil nostro menu (#menu) e successivamente inseriamo al suo interno un punto elenco. <body> <div id="contenitore"> <div id="header"> <div id="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">pagina1</a></li> <li><a href="#">pagina2</a></li> </ul> </div> </div> <div id="content"> <p>Fa parlare i numeri <b>Antonio Martone</b>. E già la cifra, <br>oltre 4.000 proclamazioni in due anni, basta al <i>presidente della Commissione di garanzia</i> degli <a href="http://www.libero.it" target="_blank">scioperi</a> nei servizi pubblici essenziali, per condividere, con il governo, la necessità </p> </div> <div id="footer"></div> </div> </body> </html>

header content footer contenitore Inserimento di un menu A questo punto andiamo a stabilire nel foglio si stile tutte le caratteristiche del nostro menu #menu { width:300px; margin-left:700px; } #menu li { display:inline; text-decoration:none; font-size:11px; color:#000; } #menu a { color:#dd44ee; text-decoration:none; text-transform:uppercase; } #menu a:hover { color:#ff4433; }

Lezione 4

by Silvia Carbotti

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 7

Statistics

Lezione 4 Presentation Transcript