July 11
Creazione di un modello HTML ti aiuta a costruire rapidamente le future pagine di un sito web. Copia il codice del modello e incollarlo l'editor per creare una nuova pagina. Utilizzando div significa che si può facilmente cambiare il layout del vostro sito modificando un file: il file CSS, che controlla la disposizione delle div attraverso l'intero sito.
1 Creare un file HTML in un editor di vostra scelta.
2 Inserire il seguente codice HTML, che crea la struttura della pagina e include un collegamento al file CSS. (Il file CSS verrà creato in una fase successiva.)
<Html>
<Head>
<Title> Layout 1 </ title>
<Tipo di link = "text / css" media = "screen" rel = "stylesheet" href = "MyName.css" />
</ Head>
<Body>
</ Body>
</ Html>
Aggiungi un titolo di vostra scelta per sostituire il testo "Layout 1".
3 Aggiungere i seguenti "div" tra i "<body>" tag.
<Div id = "header">
Intestazione
</ Div>
<Div id = "navigazione">
Navigazione
</ Div>
<Div id = "content">
contenuto
</ Div>
<Div id = "footer">
footer
</ Div>
Questo è un layout tipico per una pagina web. La "intestazione" si riferisce all'inizio della pagina; menu si trova sotto. Il contenuto principale di ogni singola pagina va nella sezione "Contenuti", e la sezione "Piè di pagina" di solito ospita il menu in basso su una pagina web. Ogni sezione ha un ID che viene utilizzato dal file CSS per indicare ogni elemento e inserirlo nell'apposita sezione della pagina.
4 Salvare la pagina. (Assicurarsi che sia salvato come file ".html".)
5 Creare un nuovo file "css".
6 Inserire il codice del layout per il documento generale e quindi aggiungere e manipolare il colore del carattere e dello sfondo utilizzando il seguente codice:
{
margin: 0;
padding: 0;
}
body {
sfondo: #eeeeee;
font-family: sans-serif;
font-size: 12px;
}
7 Aggiungere lo stile del div intestazione, che definirà l'altezza e il colore:
div # intestazione {
altezza: 160px;
background: # 800000;
}
8 Definire lo stile per gli altri elementi div della pagina: la "navigazione", il "contenuto" e il "piè di pagina":
div # navigazione {
sfondo: bianco;
width: 25%;
float: left;
}
div # content {
margin: 0 25%;
background: # BDBD00;
}
div # footer {
background: # 800000;
width: 100%;
clear: left;
}
9 Salvare il file come "MyName.css".
10 Testare la pagina in un browser, aprendo la pagina HTML che avete appena creato. Copiare il codice HTML e aggiungere contenuti applicabile a creare ogni nuova pagina per il tuo sito.