Imparate a conoscere la struttura di base di un layout CSS e scoprite come progettare pagine e contenuto utilizzando CSS in Dreamweaver.
Un layout di pagina CSS utilizza il formato CSS, invece delle tradizionali tabelle o frame HTML, per organizzare il contenuto di una pagina Web. Il blocco costitutivo di base del layout CSS è il tag div, un tag HTML che nella maggior parte dei casi opera come contenitore di testo, immagini e altri elementi della pagina. Durante la creazione di un layout CSS, potete inserire tag div nella pagina, aggiungervi contenuti e posizionarli in differenti posizioni. A differenza delle celle di tabella, le quali possono esistere solamente all'interno delle righe e delle colonne di una tabella, i tag div possono apparire in qualsiasi punto di una pagina Web. Potete posizionare i tag div in modo assoluto (specificandone le coordinate x e y) o relativo (specificandone la posizione rispetto alla posizione corrente). Potete anche posizionare i tag div specificando float, spaziature e margini, ovvero utilizzando il metodo più diffuso in base agli attuali standard del Web design.
Prima di procedere con questa sezione, è utile acquisire familiarità con i concetti di base di CSS.
Il blocco costitutivo di base del layout CSS è il tag div, un tag HTML che nella maggior parte dei casi opera come contenitore di testo, immagini e altri elementi della pagina. L'esempio che segue mostra una pagina HTML contenente tre tag div separati, un tag “contenitore” di grandi dimensioni che a sua volta ne contiene altri due, un tag per la barra laterale e un tag per il contenuto principale.
A. div contenitore B. div barra laterale C. div contenuto principale
Il codice che segue si riferisce ai tre tag div nella pagina HTML:
<!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div>
Nell'esempio precedente, ai tag div non viene applicato alcuno stile. Senza alcuna regola CSS definita, i tag div e i relativi contenuti vengono inseriti in una posizione predefinita nella pagina. Tuttavia, se ciascun tag div dispone di un ID univoco (come nell'esempio precedente), tali ID possono essere impiegati per creare regole CSS che, quando applicate, ne modificano lo stile e il posizionamento.
La regola CSS seguente, che può essere inserita nella sezione head del documento o in un file CSS esterno, crea regole di stile per il primo tag “contenitore” della pagina:
#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; }
La regola #container definisce lo stile del tag div contenitore in modo da assegnargli una larghezza di 780 pixel, uno sfondo di colore bianco, nessun margine dal lato sinistro della pagina, un bordo solido di colore nero di un pixel e testo allineato a sinistra. I risultati dell'applicazione di questa regola al tag div contenitore sono i seguenti:
A. Testo allineato a sinistra B. Sfondo bianco C. Bordo solido di colore nero di 1 pixel
La regola CSS successiva crea regole di stile per il tag div per la barra laterale:
#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; }
La regola #sidebar definisce lo stile del tag div in modo da assegnargli una larghezza di 200 pixel, uno sfondo di colore grigio, una spaziatura superiore e inferiore di 15 pixel, una spaziatura destra di 10 pixel e una spaziatura sinistra di 20 pixel. (L'ordine predefinito per la spaziatura è alto-destra-basso-sinistra.) Inoltre, la regola posiziona il tag div per la barra laterale con a proprietà float: left, la quale allinea il tag div per la barra laterale al lato sinistro del tag div del contenitore. I risultati dell'applicazione di questa regola al tag div per la barra laterale sono i seguenti:
A. Larghezza 200 pixel B. Spaziatura superiore e inferiore di 15 pixel
Infine, la regola CSS per il tag div del contenitore principale completa il layout:
#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; }
La regola #mainContent definisce lo stile del tag div per il contenuto principale con un margine sinistro di 250 pixel, inserendo quindi uno spazio di 250 pixel tra il lato sinistro del tag div contenitore e il lato sinistro del tag div del contenuto principale. Inoltre, la regola prevede 20 pixel di spazio a destra, sotto e a sinistra del tag div del contenuto principale. I risultati dell'applicazione di questa regola al tag div mainContent sono i seguenti:
Il codice completo ha il seguente aspetto:
A. Spaziatura sinistra di 20 pixel B. Spaziatura destra di 20 pixel C. Spaziatura inferiore di 20 pixel
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body> <!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body>
l'esempio di codice precedente è una versione semplificata del codice che crea il layout con due colonne fisse e barra laterale sinistra quando create un nuovo documento mediante i layout predefiniti forniti con Dreamweaver.
Durante la creazione di una nuova pagina in Dreamweaver, potete crearne una che contenga già un layout CSS. Dreamweaver è fornito con 16 layout CSS diversi tra cui potete scegliere. Inoltre, potete creare layout CSS personalizzati da aggiungere alla cartella Configuration, in modo da farli apparire come scelte di layout nella finestra di dialogo Nuovo documento.
selezionate un tipo di pagina HTML per il layout. Potete ad esempio selezionare HTML, ColdFusion®, PHP e così via. Con i layout CSS non potete creare pagine ActionScript™, CSS, di voci di libreria, JavaScript, XML, XSLT o di componenti ColdFusion. Inoltre, i tipi di pagina nella categoria Altro della finestra di dialogo Nuovo documento non possono essere inseriti nei layout di pagina CSS.
I layout CSS predefiniti forniscono i seguenti tipi di colonne:
Larghezza fissa
La larghezza della colonna è specificata in pixel. La colonna non viene ridimensionata in base alle dimensioni del browser o alle impostazioni del testo del visitatore del sito.
Liquide
La larghezza della colonna viene specificata come percentuale della larghezza del browser usato dal visitatore del sito. L'impostazione usata varia se il visitatore del sito allarga o restringe la finestra del browser, mentre non cambia in base alle impostazioni del testo usate dal visitatore del sito.
Aggiungi a Head
Aggiunge un CSS per il layout all'intestazione della pagina che viene creata.
Crea nuovo file
Aggiunge un CSS per il layout al nuovo foglio di stile CSS esterno e lo collega alla pagina che viene creata.
Collega a file esistente
Permette di specificare un file CSS esistente che contiene già le regole CSS necessarie per il layout. Questa opzione è particolarmente utile quando desiderate utilizzare lo stesso layout CSS (le regole CSS contenute in un singolo file) per più documenti.
quando selezionate l'opzione Collega a file esistente, il file specificato deve contenere già le regole per il file CSS presente al suo interno.
Quando inserite il CSS del layout in un nuovo file o lo collegate a un file esistente, Dreamweaver collega automaticamente il file alla pagina HTML che state creando.
i commenti condizionali di Internet Explorer (CC), utili per aggirare i problemi di rendering di IE, rimangono incorporati nella sezione head del nuovo documento di layout CSS anche se selezionate Nuovo file esterno o File esterno esistente come posizione per il CSS del layout.
Per istruzioni dettagliate su questo processo, leggete l'articolo di David Powers, Automatically attaching a style sheet to new documents (Associazione automatica di un foglio di stile ai nuovi documenti).
per rendere il layout CSS personalizzato coerente con gli altri layout forniti con Dreamweaver, si consiglia di salvare il file HTML con l'estensione .htm.
assegnate all'immagine di anteprima lo stesso nome del file HTML, in modo da poterne tenere traccia facilmente. Ad esempio, se il file HTML ha il nome myCustomLayout.htm, assegnate all'immagine di anteprima il nome myCustomLayout.png.
Accedi al tuo account