Le rigide regole e norme che governano il World Wide Web forniscono un quadro coerenza in cui può fiorire il tuo talento di progettazione Web. HTML, o Hypertext Markup Language e fogli di stile o CSS, consentono di disporre precisamente il contenuto Web. Il "div", o l'elemento di divisione di pagina, separa il contenuto in blocchi che possono essere singolarmente in stile e collocati. Un div può contenere altri divs. È possibile ottimizzare le proprietà CSS come larghezza e troppopieno per ospitare diverse funzionalità del browser Web. Creare una bozza del layout su carta prima e risolvere i problemi di progettazione prima di iniziare a scrivere codice.
Istruzioni
1
Fare uno schizzo del layout con una matita o la penna e la carta di disegnare il contorno del div esterno.
2
Etichettare il tuo sketch div esterno con l'altezza desiderata, larghezza, colore di sfondo, denominazioni di confine e imbottitura. Dare il div esterno un nome univoco ID per il foglio di stile.
3
Disegnare il contorno del div. interno etichetta questo div con l'altezza desiderata, larghezza, colore di sfondo, denominazioni di confine, imbottitura e unico nome ID.
4
Avviare l'editor di testo blocco note facendo clic sul pulsante "Start", "Tutti i programmi", "Accessori" e "Blocco note". Creare CSS basato su tua bozza. Aggiungere gli stili dal tuo sketch tra < testa >< / testa > Tag.
< style type = "text/css" ><!...
Gli stili qui
--> < / stile >
5
Aggiungere la proprietà CSS "overflow: hidden;" per ogni div per impedire che in eccesso contenuti debordato. Utilizzare i seguenti stili tra < testa >< / testa > sezione della tua pagina Web:
< style type = "text/css" ><!...
esterno () {
background-color: #FFB3B3;
Larghezza: 500px;
border: 1px solid black;
Altezza: 200px;
padding: 5px;
overflow: hidden;
}
interno () {
background-color: #C1ACEE;
Larghezza: auto;
Height: 200px;
border: 1px dotted rosso;
overflow: hidden;
}
{più interno
sfondo-colore: bianco;
Larghezza: 200px;
Height: 100px;
border: 2px solid blue;
float: left;
}
--> < / stile >
6
Aggiungere il contenuto che si intende utilizzare per il div più interno..--e il div esterno, se necessario..--nella sezione < body > della pagina Web. Etichettare i div con lo stesso ID creato per il foglio di stile.
7
Assicurarsi di aggiungere il doctype seguente nella parte superiore del documento Web per garantire la compatibilità cross-browser.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN"
"http://www.w3.org/TR/html4/strict.dtd" >
8
Fare clic sul menu File. Selezionare l'opzione "Salva". Salvare con un nome di file appropriato, ad esempio "test. html."
9
Avvia il browser Web facendo clic sul pulsante "Start", "Tutti i programmi" e "Internet Explorer". Scegliere la voce di menu "File" e selezionare "Apri File". Individuare il file che appena creato, selezionarlo, quindi fare clic su "Apri". Verificare la pagina Web. Regolare la larghezza e l'altezza del div interno ed esterno per adattare il contenuto o regolare la quantità di contenuto o il suo stile di carattere.
Consigli & Avvertenze
- Poiché non sapete in anticipo che dovranno accedere la pagina Web, è consigliabile testare il vostro disegno cercando famiglie di diversi caratteri e dimensioni. Se si utilizza imbottitura in entrambi div, vedere l'aspetto del layout con impostazioni diverse. Se si tenta di simulare la tua pagina su un dispositivo con uno schermo più piccolo come uno smartphone o netbook. Testare il layout su versioni precedenti di Internet Explorer.
- Diversi browser in esecuzione su sistemi operativi diversi su diversi dispositivi visualizzerà a volte lo stesso codice HTML in modo diverso. Un modo per eliminare errori di visualizzazione è quello di dare al browser Web tutte le informazioni di cui ha bisogno eseguire il rendering correttamente il vostro lavoro. Utilizzando il corretto doctype a capo della tua pagina Web indica al browser che tipo di informazioni è venuta e quali norme da seguire nella visualizzazione. Il doctype HTML 4.01 Strict o HTML 4.01 Transitional funzionerà con la maggior parte dei browser:
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN"
- "http://www.w3.org/TR/html4/strict.dtd" >