2010 maggio - Progettazione e realizzazione di siti web

La struttura:


<div id="wrap">

<div id="masthead" class="header">
<h1>Questo è <a href="#">il mio sito</a></h1>
</div>

<div id="content">

<div class="article" id="post-18">

<h1>Questo è un mio post</h1>
<p class="post-info">Pubblicato in <a href="#">Categoria</a> il
5 Aprile 2010</p>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</p>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</p>
<ul>
  <li>Curabitur quis dui sit amet elit luctus aliquam</li>
  <li>Aliquam adipiscing libero vitae leo</li>
  <li>Maecenas tempus dictum libero</li>
  <li>Curabitur quis dui sit amet elit luctus aliquam</li>
  <li>Mauris aliquet mattis metus</li>
</ul>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</p>
</div>

<div class="aside">

<h1>Post correlati</h1>
<ul>
<li><a href="#">Questo è un post correlato</a></li>
<li><a href="#">Questo è un altro post correlato</a></li>
<li><a href="#">Questo è ancora un post correlato</a></li>
<li><a href="#">Questo è un ultimo post correlato</a></li>
</ul>
</div>

</div>

<div id="nav-primary" class="nav">
  <ul>
    <li class="nav-previous"><a href="#">&larr; Post precedente</a>
    </li>
    <li class="nav-next"><a href="#">Post successivo &rarr;</a></li>
  </ul>
  </div>

<div class="author-info">
<p>Paolo Rossi nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. </p>
</div>

<div id="nav-secondary" class="nav">
<a href="#">&uarr; Home</a>
</div>

<div class="footer" id="site-info">
<p>
&copy; Paolo Rossi.
Powered by <a href="#">WordPress</a>.
</p>
</div>

</div>

Lo stile/1:

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

ol, ul {
	list-style: none;
}

/* Regole generali */

body {
background-color: #292C37;
color: #8B92A9;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
}

h1, p {
margin: 0 0 1em 0;
font-weight: normal;
}

a {
color: #DDDFF3;
text-decoration: none;
}

a:hover {
color: #efefef;
text-decoration: underline;
}

/* Layout */

#wrap {
width: 960px;
margin: 0 auto;
position: relative;
}

#content {
position: relative;
overflow: hidden;
}

.article {
width: 620px;
padding: 0 10px; /* 620+10+10=640 */
}

.aside {
position: absolute;
top: 0;
left: 640px;
width: 300px;
padding: 0 10px; /* 640+300+10+10=960 */
}

/* Testata principale */

#masthead {
margin: 50px 0 2em 0;
}

#masthead h1 {
text-align: right;
font-size: 1.25em;
font-weight: normal;
}

/* Contenuto principale */

.article h1 {
color: #efefef;
}

.article ul {
list-style-type: square;
margin: 0 0 1em 20px;
}
.article li {
margin: 0 0 1em 0;
}

/* Contenuto secondario */

.aside ul {
list-style-type: circle;
margin: 0 1em;
}

/* Info autore */

.author-info {
padding: 2em 10px;
}

/* Navigation */

#nav-primary li.nav-previous {
float: left;
}

#nav-primary li.nav-next {
float: right;
}

#nav-primary {
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
margin: 2em 0;
}

#nav-secondary {
padding: 2em 10px;
}

/* Pié di pagina */

.footer {
margin: 1em 10px;
}

Lo stile/2:

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

ol, ul {
	list-style: none;
}

/* Regole generali */

body {
background-color: #001;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
line-height: 1.5em;
}

h1, p {
margin: 0 0 1em 0;
}

a {
color: #c33;
text-decoration: none;
}

a:hover {
color: #333;
text-decoration: underline;
}

/* Layout */

#wrap {
width: 960px;
background: white;
margin: 0 auto;
position: relative;
}

#content {
position: relative;
margin-top: 2em;
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
}

.article {
float: left;
width: 620px;
padding: 0 10px; /* 620+10+10=640 */
}

.aside {
float: left;
width: 300px;
padding: 0 10px; /* 620+10+10+300+10+10=960 */
text-align: right;
}

/* Testata principale */

#masthead  {
background: #F30;
position: relative;
height: 100px;
border-bottom: 10px solid #333;
}

#masthead h1 {
color: #777;
position: absolute;
left: -20px;
top: 1.25em;
font-size: 4em;
color: white;
text-shadow: #000 1px 1px 1px;
}

#masthead a {
color: #ccc;
text-decoration: none;
}

/* Contenuto principale */

.article h1 {
border: 1px solid #930;
border-width: 1px 0;
padding: 1em 0;
margin-bottom: 0;
}

.article ul {
list-style-type: lower-roman;
margin: 0 0 1em 20px;
}
.article li {
margin: 0 0 1em 0;
}

.post-info {
color: #777;
}

/* Contenuto secondario */

.aside h1 {
border: 1px dotted #930;
border-width: 1px 0;
padding: 1em 0;
color:#666;
}

/* Info autore */

.author-info {
color: #888;
background: #efefef;
padding: 10px;
margin: 2em 0 2em 10px;
width: 600px;
}

/* Navigation */

#nav-primary li.nav-previous {
float: left;
margin-left: 10px;
}

#nav-primary li.nav-next {
float: right;
margin-right: 10px;
}

#nav-primary {
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
width: 640px;
background: black;
}

#nav-primary a:hover {
color: #efefef;
}

#nav-secondary {
position: absolute;
top: 0;
left: 0;
}

#nav-secondary a {
color: white;
background: black;
padding: 10px;
display: block;
}

#nav-secondary a:hover {
color: black;
background: white;
text-decoration: none;
}

.footer {
margin: 1em 0;
padding: 1em;
border-top: 1px solid #777;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

Progettazione e realizzazione di siti web

Pagine

Articoli maggio 2010

Esercitazione: simulazione della valutazione del modulo B

Una struttura, due presentazioni

Cos’è questo sito

Archivi

Blogroll

Libri

Segnalibri su delicious

Non solo web design