CREARE SITI WEB in PHP e MYSQL > Creazione della struttura HEAD con i fogli stile
I 3 Manualifondamentali per l uso del computer
12% di sconto
Acquista ora a soli 75 euro
Clicca qui, per riceverli
comodamente a casa tua.
Appreso il funzionamento della funzione include in PHP, passiamo ora ad unire tutte le nozioni fin qui acquisite per creare una vera e propria struttura dinamica.
Il file head.inc.php dovrà contenere il codice compreso trai I due tag <head> </head>.
1 - Apri il file head.inc.php e inserisci il seguente codice:
<head>
<title>TITOLO</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/layout.css" type="text/css">
<link rel="stylesheet" href="css/formato.css" type="text/css">
<link rel="stylesheet" href="css/aggiunte.css" type="text/css">
</head>
<title>TITOLO</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/layout.css" type="text/css">
<link rel="stylesheet" href="css/formato.css" type="text/css">
<link rel="stylesheet" href="css/aggiunte.css" type="text/css">
</head>
Il codice fa riferimento alla lezione “Collegare più fogli stile esterni” che si trova a pag 98 del primo volume.
2 - All'interno della cartella sito01 (o sito02), crea una nuova cartella e nominala css.
3a – crea all''interno della cartella css i seguenti file
• file: layout.css
div#container{width:700px;margin:0 auto}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
• file: formato.css
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
• file: aggiunte.css
#navigation a:link {color: blue }
#navigation a:visited {color: green }
#navigation a:hover {color: red }
#navigation a:visited {color: green }
#navigation a:hover {color: red }
oppure,
3b – scaricali dal link css.zip della pagina www.pcdazero.it/web02-000.php
I file dei fogli stile esterni sono stati quindi raggruppati in una cartella nominata css da inserire nella cartella sito01 (o sito02).