Esercitazione 7 - CSS "avanzati" + HTML5/CSS 3
Transcript
Esercitazione 7 - CSS "avanzati" + HTML5/CSS 3
Marco Porta – 2011/12 CIM - Web Design & Technologies Esercitazione 7 – CSS “avanzati” + HTML 5/CSS 3 Parte 1 – Menù a tendina coi CSS 1. Creare la cartella CSSmenu 2. Creare in CSSmenu il file HTML menu.html, con il seguente contenuto: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Un menu coi CSS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="menu"> <ul> <li> <a href="">Menu 1</a> <ul> <li><a href="">Sottomenu 1</a></li> <li><a href="">Sottomenu 2</a></li> </ul> </li> <li> <a href="">Menu 2</a> <ul> <li><a href="">Sottomenu 1</a></li> <li><a href="">Sottomenu 2</a></li> </ul> </li> <li> <a href="">Menu 3</a> <ul> <li><a href="">Sottomenu 1</a></li> <li><a href="">Sottomenu 2</a></li> </ul> </li> </ul> </div> </body> </html> 3. 4. Verificare il risultato (senza CSS) Creare in CSSmenu il file CSS style.css, con il seguente contenuto: #menu { padding: 0px; margin: 0px; } #menu ul { padding: 0px; margin: 0px; } #menu li { position: relative; float: left; list-style: none; Marco Porta – 2011/12 margin: 0px; padding:0px; } #menu li a { width: 100px; height: 30px; display: block; text-decoration: none; text-align: center; line-height: 30px; background-color: #666666; color: white; } #menu li a:hover { background-color: red; } #menu ul ul { position: absolute; top: 30px; visibility: hidden; width: 100px; } #menu ul li:hover ul { z-index: 99; visibility: visible; } 5. Verificare il risultato riaprendo il file menu.html Parte 2 – HTML 5 + CSS 3 (esempio liberamente tratto da http://www.designzzz.com/website-layout-tutorial-html5-css-3/) 1. Creare la cartella html5 2. Creare in html5 il file HTML provahtml5.html con il seguente contenuto: <!DOCTYPE html> <html> <head> <title>Esempio HTML 5</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header> <h1>Esempio di pagina HTML 5</h1> </header> <nav> <ul> <li><a <li><a <li><a <li><a </ul> </nav> href="#">Home</a></li> href="#">Chi siamo</a></li> href="#">Feedback</a></li> href="#">Contatti</a></li> Marco Porta – 2011/12 <div id="content"> <div id="mcontent"> <header> <h2>Chi siamo</h2> </header> <section> <article class="bpage"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> <div id="im1"></div> <video src="v.webm" width="720" controls="controls"> Spiacente, il tuo browser non supporta il tag VIDEO </video> </article> </section> </div> <aside> <section> <ul> <li><a <li><a <li><a <li><a </ul> </section> </aside> href="#">Home</a></li> href="#">Chi siamo</a></li> href="#">Feedback</a></li> href="#">Contatti</a></li> </div> <footer> <section>Questo è il footer</section> </footer> </body> </html> 3. Scaricare dall’indirizzo http://vision.unipv.it/wdt-cim/esercitazioni/html5/ nella cartella html5 i file bg_body.jpg, style.css, test.jpg e v.webm 4. Analizzare nel dettaglio il contenuto di style.css 5. Aprire provahtml5.html e osservare il risultato…