Selezionate File > Nuovo.
Ultimo aggiornamento il
25 apr 2024
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 diversi punti. A differenza delle celle delle tabelle, che 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, dovresti avere familiarità con i concetti di base dei CSS.
Il blocco di base del layout CSS è il tag div, un tag HTML che nella maggior parte dei casi funge da contenitore per testo, immagini e altri elementi della pagina. L'esempio seguente mostra una pagina HTML che contiene tre tag div separati: un tag "contenitore" grande e altri due tag, un tag barra laterale e un tag contenuto principale, all'interno del tag contenitore.
A. div contenitore B. div barra laterale C. div contenuto principale
Il codice che segue si riferisce ai tre tag div nella pagina HTML:
<!--tag div contenitore-->
<div id="container">
<!--tag div barra laterale-->
<div id="sidebar">
<h3>Contenuto della barra laterale</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--tag div contenuto principale-->
<div id="mainContent">
<h1> Contenuto principale </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>Intestazione di livello H2 </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, non è presente alcuno "stile" associato a nessuno dei tag div. Senza regole CSS definite, ogni tag div e il relativo contenuto finisce in una posizione predefinita sulla pagina. Tuttavia, se ogni tag div ha un ID univoco (come nell'esempio precedente), puoi usare gli ID per creare regole CSS che, una volta applicate, cambiano lo stile e il posizionamento dei tag div.
La seguente regola CSS, che può trovarsi nella sezione head del documento o in un file CSS esterno, crea regole di stile per il primo tag div, o «contenitore», sulla pagina:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
La regola #container applica uno stile al tag div contenitore con una larghezza di 780 pixel, uno sfondo bianco, nessun margine (dal lato sinistro della pagina), un bordo nero solido di 1 pixel e testo allineato a sinistra.I risultati dell'applicazione della regola al tag div container 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 applica uno stile al tag div sidebar con una larghezza di 200 pixel, uno sfondo grigio, un padding superiore e inferiore di 15 pixel, un padding destro di 10 pixel e un padding sinistro di 20 pixel.(l'ordine predefinito per la spaziatura è alto-destra-basso-sinistra). Inoltre, la regola posiziona il tag div sidebar con float: left, una proprietà che spinge il tag div sidebar verso il lato sinistro del tag div container. I risultati dell'applicazione della regola al tag div sidebar 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 termina il layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
La regola #mainContent applica uno stile al div del contenuto principale con un margine sinistro di 250 pixel, il che significa che posiziona 250 pixel di spazio tra il lato sinistro del div container e il lato sinistro del div del contenuto principale. Inoltre, la regola prevede 20 pixel di spaziatura sui lati destro, inferiore e sinistro del div del contenuto principale. I risultati dell'applicazione della regola al 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>Documento senza titolo</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>
<!--tag div contenitore-->
<div id="container">
<!--tag div della sidebar-->
<div id="sidebar">
<h3>Contenuto della barra laterale</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--tag div mainContent-->
<div id="mainContent">
<h1> Contenuto principale </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>Intestazione di livello H2 </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
Il codice d'esempio precedente è una versione semplificata del codice che crea il layout a due colonne con sidebar sinistra fissa quando crei un nuovo documento utilizzando 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
Nella finestra di dialogo Nuovo documento, seleziona 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. Ad esempio, puoi selezionare HTML, ColdFusion®, PHP e così via. Non è possibile creare una pagina ActionScript™, CSS, Elemento libreria, JavaScript, XML, XSLT o Componente ColdFusion con un layout CSS. Anche i tipi di pagina nella categoria Altro della finestra di dialogo Nuovo documento non possono includere layout di pagina CSS.
Come Layout, selezionate il layout CSS da utilizzare. Puoi
scegliere tra 16 layout diversi. La finestra Anteprima mostra il
layout e fornisce una breve descrizione del layout selezionato.
I layout CSS predefiniti forniscono i seguenti tipi di colonne:
Larghezza fissa
La larghezza della colonna è specificata in pixel. La colonna non cambia dimensioni in base alle dimensioni del browser o alle impostazioni del testo del visitatore del sito.
Liquide
La larghezza della colonna è specificata come percentuale della larghezza del browser del visitatore del sito. Il design si adatta se il visitatore del sito allarga o restringe il browser, ma non cambia in base alle impostazioni del testo del visitatore.
Selezionate un tipo di documento dal menu a comparsa DocType.
Selezionare una posizione per il CSS del layout dal menu a comparsa CSS layout in.
Aggiungi a Head
Aggiunge un CSS per il layout all'intestazione della pagina che viene creata.
Crea nuovo file
Aggiunge CSS per il layout a un nuovo foglio di stile CSS esterno e collega il nuovo foglio di stile alla pagina che stai creando.
Collega a file esistente
Ti consente di specificare un file CSS esistente che contiene già le regole CSS necessarie per il layout.Questa opzione è particolarmente utile quando vuoi utilizzare lo stesso layout CSS (le regole CSS per le quali sono contenute in un singolo file) su più documenti.
Effettuate una delle operazioni seguenti:
- Se hai selezionato Aggiungi a intestazione dal menu a comparsa Layout CSS (l'opzione predefinita), fai clic su Crea.
- Se hai selezionato Crea nuovo file dal menu a comparsa CSS layout, fai clic su Crea, quindi specifica un nome per il nuovo file esterno nella finestra di dialogo Salva file foglio di stile come.
- Se hai selezionato Collega a file esistente dal menu a comparsa CSS layout in, aggiungi il file esterno alla casella di testo Allega file CSS facendo clic sull'icona Aggiungi foglio di stile, completando la finestra di dialogo Allega foglio di stile esterno e facendo clic su OK. Al termine, fai clic su Crea nella finestra di dialogo Nuovo documento.
Nota
Quando selezioni l'opzione Collega a file esistente, il file che specifichi deve già contenere le regole per il file CSS.
Quando inserisci il CSS del layout in un nuovo file o colleghi a un file esistente, Adobe Dreamweaver collega automaticamente il file alla pagina HTML che stai creando.
Nota
I commenti condizionali di Internet Explorer (CC), che consentono di aggirare i problemi di rendering di IE, rimangono incorporati nella sezione head del nuovo documento di layout CSS, anche se selezioni Nuovo file esterno o File esterno esistente come posizione per il CSS del layout.
(Facoltativo) Puoi anche allegare fogli di stile CSS alla nuova pagina (non correlati al layout CSS) quando crei la pagina.
Per farlo, fai clic sull'icona Allega foglio di stile sopra il riquadro Allega file CSS e seleziona un foglio di stile CSS.
Per una procedura dettagliata di questo processo, consulta l'articolo di David Powers, Collegamento automatico di un foglio di stile a nuovi documenti.
Aggiungere layout CSS personalizzati all'elenco delle scelte
Crea una pagina HTML che contenga il layout CSS che vorresti aggiungere all'elenco delle scelte nella finestra di dialogo Nuovo documento. Il CSS per il layout deve risiedere nell'intestazione della pagina HTML.
Nota
Per rendere il layout CSS personalizzato coerente con gli altri layout forniti con Dreamweaver, salva il file HTML con l'estensione .htm.
Aggiungi la pagina HTML alla cartella Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Facoltativo) Aggiungi 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 file PNG larghi 227 pixel e alti 193 pixel.
Nota
Dai alla tua immagine di anteprima lo stesso nome del file HTML in modo da poterne tenere facilmente traccia.Ad esempio, se il file HTML si chiama myCustomLayout.htm, assegna all'immagine di anteprima il nome myCustomLayout.png.
(Facoltativo) Crea un file di note per il layout personalizzato aprendo la cartella Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e incollando uno dei file di note esistenti nella stessa cartella e rinominando la copia per il layout personalizzato.Ad esempio,
potresti copiare il file oneColElsCtr.htm.mno e rinominarlo myCustomLayout.htm.mno.
(Facoltativo) Dopo aver creato un file di Note per il layout personalizzato, puoi aprire il file e specificare il nome del layout, la descrizione e l'immagine di anteprima.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
