In questo articolo, ti mostrerò come creare un semplice layout di pagina web, usando i tag div e in combinazione con le proprietà CSS.

Attraverso questa lezione imparerai come creare un file di stile separato da allegare a una pagina HTML, creare una cartella di immagini separata per archiviare i dati multimediali … questa è la divisione più elementare che devi conoscere.

Nota : poiché non hai imparato tag come intestazione, piè di pagina, articolo in HTML5, userò l'intero tag div.

Crea una struttura di cartelle per il layout

Innanzitutto, crea una cartella per te, puoi metterla ovunque. Quindi crea una cartella images , un file index.html e un file style.css .

Ora usa qualsiasi editor per aprire i file index.html e style.css . Attualmente sto usando Netbeans.

Per quanto riguarda la struttura del file, spiego un po 'come segue :

• Le images delle cartelle vengono utilizzate per contenere tutte le immagini per l'interfaccia.
• Il file index.html è il file principale in esecuzione per il sito web.
• Il file styles.css viene utilizzato per memorizzare il codice CSS

In questo post verrà creato un layout HTML semplice

Per prima cosa devi comprendere i posizionamenti di base su un sito web. Dai un'occhiata all'immagine qui sotto.

Abbiamo 7 posizioni di base che ogni sito web ha, che sono:

1. Logo => Contiene il logo principale
2. Header => Contiene il contenuto della sezione superiore.
3. Menu => Sezione del menu principale durante la navigazione nel sito
4. Barra laterale sinistra => La parte contenente i dati sul lato sinistro del sito web
5. Contenuto => La parte contenente il contenuto principale del sito web
6. Barra laterale destra => La parte contenente i dati sul lato destro del sito web
7. Piè di pagina => La parte inferiore della pagina web.

Dai un'occhiata alla struttura del sito web freetuts.net stesso, l'interfaccia ha sempre tali posizioni.

Crea layout HTML per il layout

Per prima cosa dobbiamo creare un tag div che racchiude tutte e 7 le posizioni. Per ogni posizione creiamo un tag div extra per circondarla.

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> </div> <div id="footer"> Footer </div> </div>

Ora scriverò CSS per impostare lo sfondo per le posizioni, sarà più facile da vedere durante l'esecuzione di questa applicazione.

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; }

Le posizioni di intestazione, menu e piè di pagina sono ok. Per quanto riguarda la parte del contenuto, non abbiamo terminato l'elaborazione, perché la left_sidebar , la right_sidebar e il contenuto devono essere chiaramente separati.

Useremo la proprietà float:left per spostare la left_sidebar a sinistra, float:right a right_sidebar a destra e imposteremo la loro lunghezza a circa 300px . In particolare per la parte del content , daremo margin-left e margin-right come 300px , perché la lunghezza di queste due barre laterali è 300px .

 #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

La barra laterale sinistra e la barra laterale destra hanno sovrascritto il piè di pagina. Il motivo è che abbiamo impostato float:left e float:right per queste due posizioni, facendole apparire sospese, quindi quanto il footer viene spinto verso il basso è deciso dal Main Content . Per questa parte, ho impostato l'altezza su 300px , 400px inferiore ai lati della barra laterale. Quindi sovrascrive il piè di pagina.

Per risolverlo, inseriremo un div successivo sotto il contenuto, quindi imposteremo il CSS su clear:both .

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div>

Mettere le immagini nel layout

Si noti che il file index.html sarà un livello fuori dal file immagine logo.png .

Ora includilo usando il tag img. Si prega di modificare l'intestazione come segue:

 <div id="header"> <img src="./images/logo.png"/> </div>

Metti i CSS in un file separato

Dovremmo mettere il CSS in un file separato per renderlo più facile da gestire in seguito. Apri il file style.css e copia lì tutto il codice CSS.

Quindi, importa questo file style.css nel file index.html inserendo il codice seguente nella sezione head .

 <link href="./style.css" rel="stylesheet"/>

Ora avremo l'intero codice come segue :

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; } #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

 <!DOCTYPE html> <html> <head> <title>Layout HTML Basic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./style.css" rel="stylesheet"/> </head> <body> <div id="main_wrapper"> <div id="header"> <img src="./images/logo.png"/> </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div> </body> </html>

Quindi sai già come dividere il layout di un sito web. Sebbene questa sia una parte piuttosto semplice, è molto utile per coloro che sono nuovi all'HTML. Fermerò questo articolo qui, ci vediamo al prossimo post.