Bene, riprendiamo la nostra guida a come realizzare un blog con dreamweaver. Abbiamo impostato il nostro sito in locale, abbiamo organizzato le nostre cartelle che conterrano i file del sito, ora non ci resta che passare al layout del blog.

Ho pensato a questo tipo di layout 

layout del nostro blog

 Come vedete la struttura è quella classica di un blog, per motivi Seo ho messo la barra(sidebar) laterale a destra, in modo che i bot leggano prima i contenuti(content is the king!) e poi il resto. IL lato SEO è importante e non lo tralasceremo in questa guida, man mano che andremo creando il blog, vi spiegherò qualche “trucchetto” per ottimizzare il nostro blog per i motori di ricerca.

Abbiamo un div contenitore (wrap) al cui “interno”, vanno i vari div, cioe content, sidebar, e footer.

Uso nomi inglesi perchè credo sia meglio, poi perchè sono abituato cosi e infine perchè ritengo sia meglio che usare nomi in italiano( sarebbe troppo limitante visto che questa guida serve per imparare, e la maggiorparte dei CMS sono in lingua inglese).

Bene ora iniziamo a fare qualcosa di concreto inserendo il codice all’interno della nostra pagina iniziale creata in precedenza. pe ril momento ci limitermo a creare la struttura base, la prossima volta inizieremo a modificare il nostro css e il nostro blog comincerà a prendere forma.

Apriamo il nostro file index.html (successivamente, quando creeremo il database rinomeremo i file in php) 

Apriamo la doppia vista codice/ visual cliccando su “split“. Consiglio di lavorare sempre con la doppia vista, mai solo in visuale( vi limiterebbe troppo). Clicchiamo, nella vista codice, tra i due tag body di apertura e chiusura, come indicato nella immagine e poi ,nella bara degli strumenti in “layout” clicchiamo su “insert div tag“, facendo attenzione che, nel riquadro che vi appare, sia selezionato, nella voce insert,  at insertion point, e quindi inserite il nome del div nel campo ID, in questo caso wrapper. Fate riferimento a questa immagine per non sbagliare.

Cosi facendo dreamweaver inserirà direttamente il codice nel punto dove abbiamo cliccato, cioè all’interno dei tag body. Ora senza toccare nulla nel programma, (dreamweaver inserisce un testo base), che è ancora selezionato inseriamo il nostro secondo div, header, seguendo la stessa procedura.

il div header

A questo punto il programma sostituirà il testo creato per il primo div con il nuovo div (che quindi verrà creato all’interno di wrapper, che appunto è il contenitore) e avrete il div wrapper, al suo interno il div header con un testo base inserito da dreamweaver,cancellate il testo e inserite HEADER, in modo da poter riconoscere i div. 

Ora rieseguiamo la stessa procedura per gli altri div , content, sidebar e footer. facendo attenzione a inserirli nel punto subito dopo il primo div e sempre all’interno dei tag <div id=”wrapper”> e </div>, come nella immagine.

il layout del nostro blog con dreamweaver

Alla fine dovremmo avere una struttura del genere.

Questa sarà la struttura base del nostro blog. Come avete visto dal layout, però, ci sono altre “sezioni” del blog che devono essere inserite, cioe il logo e il div ads, nell’header, i div nella sidebar e il div per il copyright nel footer. più, naturalmente, il contenitore per gli articoli, che però affronteremo la prossima volta(purtroppo il tempo è tiranno e devo tornare al lavoro).
Per ora ci siamo limitati a creare la struttura base, la prossima volta creeremo le sotto sezioni, all’interno dei vari div. Adesso sapete come creare un div con dreamweaver, inserirlo nel punto a nostra scelta, e come creare un layout base con dreamweaver senza scrivere una sola riga di codice.

Indice della guida

Se avete dubbi scrivete nei commenti o chiedete nel forum.

(2 votes, average: 5,00 out of 5)

 Loading ...

Popularity: 75% [?]

Potrebbero interessarti anche :

• Organizzare il sito con Dreamweaver (4)
• Impostare un sito con Dreamweaver (12)
• la formazione nel campo del web design (5)
• Uno slideshow ancora con jquery (3)
• Una gallery animata con jquery e css (6)
• Heyos guadagnare col proprio sito (6)
• Reset Css (0)
• Date con Javascript (0)
• Menu a scorrimento verticale con css e jquery (18)
• Guida al rewrite URL di tutti i forum (1)