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.
<!--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
#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
#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>
Nota:
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.
-
Nota:
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.
-
Come Layout, selezionate il layout CSS da utilizzare. Potete scegliere tra 16 layout CSS differenti. La finestra di anteprima mostra il layout selezionato e ne fornisce una breve descrizione.
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.
-
- Se avete selezionato Aggiungi a Head dal menu a comparsa CSS layout (opzione predefinita), fate clic su Crea.
- Se avete selezionato Crea nuovo file dal menu a comparsa Layout CSS, fate clic su Crea, quindi specificate il nome del nuovo file esterno nella finestra di dialogo Salva foglio di stile come.
- Se avete selezionato Collega a file esistente dal menu a comparsa CSS layout, aggiungete il file esterno alla casella Associa file CSS facendo clic sull'icona Associa foglio di stile, compilando la finestra di dialogo Collega foglio di stile esterno e facendo clic su OK. Al termine, fate clic su Crea nella finestra di dialogo Nuovo documento.
Nota:
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.
Nota:
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.
-
(Opzionale) I fogli di stile CSS possono anche essere collegati alla nuova pagina (indipendentemente dal layout CSS) durante la sua creazione. Per fare ciò, fate clic sull'icona Associa foglio di stile sopra il riquadro Associa file CSS e selezionate un foglio di stile CSS.
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).
-
Create una pagina HTML contenente il layout CSS che desiderate aggiungere all'elenco di scelte nella finestra di dialogo Nuovo documento. Il CSS del layout deve essere presente nella sezione head della pagina HTML.
Nota:
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.
-
(Opzionale) Aggiungete un'immagine di anteprima del layout (ad esempio un file .gif o .png) alla cartella Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Le immagini predefinite fornite con Dreamweaver sono in formato file PNG di 227 x 193 pixel.
Nota:
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.
-
(Opzionale) Create un file di note per il layout personalizzato accedendo alla cartella Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e incollando uno dei file di note presenti al suo interno e rinominando la copia con il nome del layout personalizzato. Ad esempio, potete copiare il file oneColElsCtr.htm.mno rinominando la copia con il nome myCustomLayout.htm.mno.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.