Creazione di un sito web, Parte 1
lunedì, gennaio 11, 2010 18:05Comincia la nostra avventura alla creazione di un sito web.
Tutti i siti che realizzo io solitamente sono dinamici, cioè con contenuti aggiornabili, noi creeremo un sito web statico ma già predisposto per l’inserimento un futuro di contenuti dinamici, per questo per realizzarlo utilizzeremo i seguenti linguaggi:
- Html
- Php
- Css
La gerarchia dei files che avremo per il nostro sito si dividerà in:
- Header (parte superiore del sito che resta presente in ogni pagina web)
- Body (il corpo del sito, quello che cambierà in ogni pagina)
- Footer (la parte inferiore del sito che resta presente in ogni pagina web)
Cominceremo quindi con l’Header. Come grafica utilizzeremo un template Free che possiamo scaricare da QUI (59).
Come unzipperete il file troverete al suo interno il file index.html, il file style.css e la cartella images.
A noi interessa il file index.html, dobbiamo aprirlo e ricavarne l’header, ricordate che l’header è la parte che rimane costante in ogni pagina, apriamolo con un editor, io consiglio adobe dreamweaver, molto intuitivo anche per i principianti, settato in modo corretto può crearvi del codice già validato anche se preferibile scriverlo da se, ma questo discorso lo riprenderemo più avanti, se non avete DW potete usare un editor di testi qualunque tipo wordpad di windows.
Una volta aperto vi troverete davanti a una serie di codici che per molti di voi risulteranno incomprensibili ,ma non disperate, ricordate che la curiosità fa da padrona di casa e ciò che vedete non è altro che quello che viene stampato su schermo nel sito.
Allora, ricaviamo il nostro header che sarà questo:
prelevando dal codice la parte relativa a ciò che vogliamo visualizzare, cioè:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Business Solutions</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="main_container"> <div id="top_banner"> <div id="logo"> <a href="index.html"><img src="images/logo.gif" width="200" height="81" border="0" alt="" /></a></div> <div> <img src="images/demopic.gif" border="0" title="pic2" width="280" height="118" alt="" /> </div> </div> <div> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html" >About Us</a></li> <li><a href="contact.html" >Servides</a></li> <li><a href="terms.html" >Clients</a></li> <li><a href="support.html" >Support</a></li> <li><a href="contact.html" >Contact Us</a></li> </ul> </div> <div id="center_content">
ora tutto questo codice copiatelo in un nuovo file che chiamerete header.php e lo salvate nella root dove appunto c’è il nostro index.html.
fatto questo vi chiederete come mai abbiamo lasciato il tag div aperto, in due righe posso dirvi que quel div serve a contenere il nostro contenuto che verrà poi chiuso nel footer che andiamo a creare ora.
Stessa cosa dell’header, individuiamo la parte che ci interessa, in questo caso:
andiamo a prendere il nostro codice:
</div> <div id="footer"> <ul> <li><a href="#" title="">Home</a></li> <li><a href="#" title="">Products</a></li> <li><a href="#" title="">News</a></li> <li><a href="#" title="">Support</a></li> <li><a href="#" title="">Contacts</a></li> </ul> Copyright 2007 © Aero International Inc. <br /> <a href="http://www.csscreme.com"><img src="images/csscreme.jpg" width="200" height="35" border="0" alt="csscreme" title="csscreme"/></a><br /> <a href="http://validator.w3.org/check?uri=referer" title="This site is W3C compliant" style="text-decoration:none; color:#333333;">Xhtml</a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.csscreme.com&usermedium=all" title="This site is coded with validate CSS" style="text-decoration:none; color:#333333;">css</a> </div> </body> </html>
come potete notare abbiamo chiuso il nostro tag div, ora questo codice lo mettete in un nuovo file e lo chiamate footer.php e salvate nella stessa cartella dell’header.
Abbiamo i nostri header e footer, per riuscire a vedere il nostro sito dovrete creare il body che non sarà altro che ciò che è rimasto del nostro file index.htmlquindi, prendete il codice rimasto e lo mettete in un altro file che chiamerete index.php e lo salvate nella root pure questo.
Rimangono solo due passi da fare, richiamare nell’index.php l’header e il footer, se no non abbiamo tante possibilità di vedere il nostro sito.
Aggiungete nell’index.php nella prima riga questo codice:
<?php include("header.php"); ?>
e nell’ultima:
<?php include("footer.php"); ?>
non avete fatto altro che racchiudere il body (index.php in questo caso) all’interno dell’header e del footer, non avete fatto tanto lavoro per nulla, ora per ogni pagina nuova che andremo a creare nei prossimi tutorial sarà necessario solamente richiamarli senza dover riscrivere tutto il codice.
loading...
loading...
