May 31
La progettazione di un sito web con due o tre colonne consente di organizzare meglio le informazioni sulla tua pagina. Colonne rompere blocchi di testo, permettono di aggiungere un menu verticale, rendono più facile per i visitatori di navigare nel tuo sito web, e rendere il sito più attraente visivamente. L'aggiunta di divisori tra le colonne può anche migliorare l'aspetto della pagina Web.
1 Aprire il Blocco note selezionando "Start" e "Run". Quindi digitare "Blocco note" e selezionare "OK".
2 Immettere il seguente codice nella pagina:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Http-equiv = contenuto meta "Content-Type" = "text / html; charset = ISO-8859-1">
<Link rel = "stylesheet" type = "text / css" href = media "style.css" = "screen" />
<Title> titolo </ title>
</ Head>
<Body>
<Div id = "wrapper">
<Div id = "header"> </ div>
<Div id = "container">
<Div id = "left">
</ Ul>
</ Div>
<Div id = "right"> </ div>
<Div class = "più chiaro"> </ div>
</ Div>
<Div id = "footer"> <p> </ p> </ div>
</ Div>
</ Body>
</ Html>
Ciò crea il layout della pagina in HTML. Si utilizza anche una serie di DIVS per banner superiore della pagina, due colonne nella parte principale della pagina, e un piè che contiene le informazioni nella parte inferiore della pagina.
3 Salvare il file come "index.html".
4 Creare un nuovo file, e lo chiamano "style.css". Aggiungere il seguente codice al file CSS si è creato:
html, body {
margin: 0px;
padding: 0px;
}
wrapper {
width: 800px;
margin: 15px 15px auto auto;
padding: 0px;
text-align: left;
border: 1px #dadada solido;
}
contenitore {
width: 100%;
height: auto;
margin: 0px;
padding: 2px 0px;
}
sinistra {
width: 160px;
height: auto;
float: left;
padding: 20px;
margin: 0px;
}
destra {
width: 530px;
height: auto;
float: left;
padding: 20px 50px 20px 20px;
margin: 0px;
}
p {destra
margin: 0px;
}
Questo governerà come gli articoli saranno visualizzati nella pagina HTML.
5 Utilizzando un editor di grafica, creare un divisore linea 1 pixel per 1 pixel di larghezza. Utilizzare un colore che corrisponde design del tuo sito. Salva con nome "divider.gif".
6 Aggiungere questo codice al file style.css nel tag #container, e risparmiare. Questo creerà una linea di divisione tra il "#left" e "DIV #right" che vanno dalla testata al piè di pagina:
background-image: url (divider.gif);
background-repeat: repeat-y;
background-position: 200px 0px;
7 Eseguire il file index.html nel browser. Si avrà un layout sito web con due colonne divise da un'immagine.