1) impostare il sito creando la cartella principale locale.

Importante per consentire a DW di stabilire correttamente i percorsi “relativi” che funzioneranno sia sul nostro pc che online; infatti un percorso assoluto (cioè che parte dall’hard-disk) non sarà accessibile online. Con i percorsi relativi, le pagine e tutti gli elementi partono dalla cartella principale locale.

2) creare la home page (nuovo file) e salvare subito come “index.html”

Salvare le pagine prima di iniziarci a lavorare, serve per dire a DW che quella pagina si trova in quella determinata posizione e quindi dargli la possibilità di scrivere il percorso in modo “relativo”.

3) creare il file css per la struttura (salvarlo e nominarlo “struttura.css” e associarlo)

questo file va salvato nella cartella principale locale e associato alla pagina (o alle pagine) che si intende formattare.

4) creare la regola per il tag “body”

La prima regola che và creata è quella per l’aspetto della finestra del browser che risponde all’elemento html “body”; possiamo impostare colori di sfondo, immagini e margini. Impostando il body evitando codice html (cioè attributi del tag), soddisfiamo la prima regola per l’accessibilità del sito.

5) inserire il 1° contenitore “div”

“div” è un tag html al quale daremo un nome (attraverso l’ID), il cui nome sarà richiamato dalla regola omonima che lo formatterà. Solitamente il primo div che si inserisce va chiamato “contenitore” (o “container”) e rappresenterà il formato del nostro sito un po’ come se fosse il formato pagina

6) creare la regola per “contenitore”

per centrare la nostra pagina sulla finestra del browser dobbiamo dare al contenitore una dimensione in larghezza “fissa” e mettere in automatico i margini destro e sinistro. Gli altri elementi div del sito (intestazione, menu, contenuto, piè di pagina…..) andranno inseriti uno dietro l’altro (uno sotto l’altro se guardiamo il codice html) ma tutti all’interno del div “contenitore”.

7) Inserire il tag div con ID “intestazione”

Di solito il primo tag all’interno del contenitore è l’intestazione (“header”); questo và inserito “dopo l’inizio del tag contenitore”. Crearne la regola.

inserire il tag div “menu”

in questo caso (e per tutti gli altri div) andrà inserito “dopo il tag” precedentemente inserito (intestazione nel nostro caso). Crearne la regola assegnando la larghezza e il float se il menù deve essere verticale ed affiancato al mainContent (vedi sotto).

9) inserire il tag div “menu2″

se voglio mettere un ulteriore menù a destra devo inserirlo subito dopo il menù sinistro, assegnandogli la proprietà float a destra.

9) inserire il div “mainContent”

questo div racchiuderà il contenuto principale di ogni pagina. Crearne la regola impostandone i margini per distaccarlo dal (o dai) menù e le distanze dall’elemento al bordo per l’impaginazione.

10) Inserire il div “footer”

questo contenitore è particolare perchè serve a espandere il “container” fino in fondo alla pagina; in particolare dovremo assegnare la proprietà css chiamata “clear both” (libero entrambi)