Fabio Mosti
consulente informatico
stressato e bastardo

realizzazione siti internet con xhtml/css parte 1

04/06/2012 - realizzazione siti internet con xhtml/css parte 1
tags: css, web design, xhtml
ciao a tutti, se state leggendo questo articolo dovreste in teoria avere almeno un'infarinatura di html, altrimenti dovreste iniziare con qualcosa di più semplice; in questa serie di articoli vedremo infatti le più diffuse tecniche di impaginazione web basate su xhtml e css il che richiede una preparazione base sulla realizzazione di templates statici di siti internet.
tanto per cominciare iniziamo dal template più elementare possibile, probabilmente il prototipo di sito più elementare che possiamo immaginare; il sito monoblocco fluido. Questo, per quanto elementare, costituirà la base di tutti gli esperimenti che andremo successivamente a tentare. Per prima cosa vediamo il codice sorgente xhtml:
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="./stile.css" />
        <title>bozza 01</title>
    </head>
    <body>
		<div id="pagina">
			<div id="contenuti">
				<h1>titolo documento</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
    </body>
</html>
il foglio di stile associato a questa pagina è molto semplice:
html, body {
	height: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
}

body {
	font-family: verdana;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
}

h1 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

p {
	line-height: 1.5;
	text-align: justify;
	text-indent: 3em;
	margin: 20px 0px;
	padding: 0px;
}

#pagina {
	background-color: #eeeeee;
	margin: 0px;
	min-height: 100%;
	padding: 0px;
}

#contenuti {
	padding: 20px;
}
il risultato di tutto ciò si può vedere in questa figura:



quello che otteniamo in questo caso è un sito costituito sostanzialmente da un unico div. Può sembrare poco utile, ma per certi tipi di pagine può avere un suo senso e possiamo considerarlo come il template numero uno della nostra avventura alla scoperta dell'impaginazione di siti internet con xhtml e css. Nel prossimo articolo vedremo come aggiungere una colonna laterale per ottenere un template a due colonne, dopodiché ci concederemo una digressione sui menù.

questo template...  
occupa l'intero schermo?
è fluido? è fluido sia orizzontalmente che verticalmente
come si comporta con i contenuti lunghi? si adatta allungandosi, compare una barra di scorrimento sulla destra
con quali browser è stato provato? Mozilla Firefox 12.0, Microsoft Internet Explorer 8 su Microsoft Windows XP
Mozilla Firefox 12.0, Microsoft Internet Explorer 9 su Microsoft Windows 7
Warning: Illegal string offset 'codice' in /var/www/vhosts/videoart000003/httpdocs/_codice/_templates/_default_/_template.footers_pagina.php on line 10