docEsercitazione 7 - CSS "avanzati" + HTML5/CSS 3
download 
Reclamo 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…
