Layout di pagina Web dipendono da una combinazione di HTML utilizzata per contenuto e struttura e fogli di stile CSS utilizzato per il posizionamento e la decorazione. Quando si formatta il contenuto in sezioni utilizzando il tag "< div >", è quindi possibile aggiungere codice CSS che gli obiettivi le sezioni e indica dove è possibile visualizzare nella pagina. Pagine Web utilizzano comunemente layout che iniziano con un'intestazione, inserire contenuti e sidebar in colonne centrali e terminano con un piè di pagina. Galleggianti possono posizionare le colonne a sinistra o a destra.
Istruzioni
Scrivere il codice HTML
1
Aprire il blocco note sul desktop e salvare il file vuoto come un file HTML. Aggiungere questo codice per iniziare a creare la tua pagina Web:
<! doctype HTML >
< html >
< head >
< title > titolo della tua pagina Web < / title >
< / head >
< corpo >
< / body >
< / html >
2
Aggiungere sezioni di piè di pagina, intestazione e colonne al corpo del codice HTML:
< div id = "container" >
< div id = "header" >
< / div >
< div id = "contenuto" >
<div id="main">
</div>
<div id="sidebar">
</div>
< / div >
< div id = "footer" >
< / div >
< / div >
Avvolgere un div contenitore intorno al codice di intera pagina come illustrato. Nell'esempio di codice precedente crea un'intestazione nella parte superiore, una fila centrale e un piè di pagina. All'interno la riga centrale sono due sezioni, una per il contenuto principale e l'altra per la sidebar. Utilizzare l'attributo "ID" nel tuo tag "< div >" consente di indirizzare le sezioni in CSS.
3
Aggiungi il tuo testo, immagini e altro contenuto tra i tag appropriati. Posizionare tutti i titoli tra i tag di intestazione, che spaziano da "< h1 >" per il più grande e "< h6 >" per i più piccoli. Utilizzare i tag "< ul >" link elenco nella barra laterale:
< ul >
< li >< un href="page.html" > Link 1 < /a >< / li >
< li >< un href="another_page.html" > Link 2 < /a >< / li >
</UL >
4
Andare alla testa del tuo codice HTML e Aggiungi il tag "< style >" dopo il tag "< title >":
< style type = "text/css" >
< / stile >
Aggiungere il codice CSS tra i tag di "stile < >".
Scrivere il codice CSS
5
Scrivere la regola di stile per il contenitore di pagina:
contenitore () {
Larghezza: 960px;
margin: 0 auto;
}
Modificare il numero di pixel in larghezza in base alle esigenze. Le impostazioni dei margini dire al browser per centrare il layout nel browser.
6
Aggiungere la spaziatura interna e margini desiderati:
intestazione () {
padding: 20px;
margin-bottom: 20px;
}
Imbottitura aggiunge spazio all'interno dell'intestazione, mentre il margine aggiunge spazio sotto l'intestazione. Aggiungere eventuali stili di colore, sfondo o del carattere per l'intestazione all'interno delle parentesi graffe.
7
Impostare le proprietà "larghezza" e "galleggiare" per le due colonne centrali:
Main {
float: left;
Larghezza: 80%;
}
Sidebar () {
float: right;
Larghezza: 20%;
}
Passare i valori di "float" per ogni div quando si vuole spostare la sidebar sul lato sinistro del contenuto. Prestare attenzione quando si imposta la spaziatura interna o margini per queste colonne perché si romperà il layout in molti casi. Aggiungere spaziatura interna e margini ai singoli elementi che vanno all'interno di ogni colonna, come i paragrafi e le intestazioni.
8
Cancellare i galleggianti nel codice che stili il piè di pagina:
piè di pagina () {
chiaro: entrambi;
}
Questo codice inserirà il piè di pagina sotto entrambe le colonne. Aggiungere gli stili per il piè di pagina desiderati.
Consigli & Avvertenze
- Utilizzare il formato "#idname tagname" quando si desidera scrivere regole di stile per tag specifici all'interno di qualsiasi div.