Guida utente Annulla

Informazioni sull'utilizzo di CSS per creare il layout della pagina

Cerca

Ultimo aggiornamento il 3 mag 2021

Imparate a conoscere la struttura di base di un layout CSS e scoprite come progettare pagine e contenuto utilizzando CSS in Dreamweaver.

Informazioni sul layout di pagina CSS

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.

Informazioni sulla struttura dei layout di pagina CSS

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:

Div contenuto principale, margine sinistro di 250 pixel

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.

Creare una pagina con un layout CSS

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.

Creare una pagina con un layout CSS

Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento, selezionate la categoria Pagina vuota (selezione predefinita).
Come Tipo di pagina, selezionate il tipo di pagina che desiderate creare.

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.

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.
Selezionate un tipo di documento dal menu a comparsa DocType.
Selezionate la posizione del file CSS del layout dal menu a comparsa Layout CSS in.

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.
Effettuate una delle operazioni seguenti:
- 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).

Aggiungere layout CSS personalizzati all'elenco delle scelte

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.
Aggiungete la pagina HTML alla cartella Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(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.
(Opzionale) Dopo aver creato il file di note per il vostro layout personalizzato, potete aprirlo e specificare nome, descrizione e immagine di anteprima del layout.