In questa era tecnologicamente ricca, il sito Web è l'ingrediente chiave per introdurre le tue attività, prodotti o servizi. Il layout fornisce indicazioni chiare per gli utenti per navigare all'interno dei siti Web e colloca gli elementi più cruciali di un sito nella parte superiore dell'elenco. Il layout del sito Web di solito dipende dai requisiti dell'utente. Tuttavia, ci sono alcune linee guida che gli sviluppatori tengono a mente per ottenere un buon layout per un sito Web.

In questo articolo, abbiamo escogitato varie possibilità per pianificare il layout di un sito Web.

Come pianificare il layout di un sito Web

Come descritto in precedenza, il layout di un sito Web dipende dai requisiti dell'utente. Qui, stiamo elencando vari elementi chiave che aiutano a creare un layout personalizzato di un sito Web.

Intestazione

Questa sezione viene visualizzata nella parte superiore di un sito Web e ci sono numerosi modi per esercitare questo spazio. Pochi moderatori mantengono il nome del sito Web o il logo all'interno di quell'intestazione, ma si può anche aggiungere un cursore.

Il seguente codice si riferisce alla creazione di un'intestazione di esempio

Html

Benvenuti in Linuxhint

A è creato con a class = "header" e un

elemento è contenuto all'interno di quel div.

CSS

Il codice CSS sopra indicato si riferisce al file Classe di intestazione e aggiunge una proprietà a base di background, imbottitura e allineamento del testo a quella classe.

Produzione

L'output mostra che l'intestazione è stata posizionata nella parte superiore della pagina e contiene le proprietà personalizzate che sono state assegnate ad essa.

Collegamenti di navigazione

Dopo l'intestazione, si consiglia di disporre di una barra di navigazione che indirizza i visitatori a varie pagine del tuo sito Web. Una barra di navigazione di esempio viene creata utilizzando il seguente codice.

Html

Casa
Tutorial
Categorie

Nel codice sopra, il div è creato che contiene vari tag di ancoraggio che si riferiscono a vari collegamenti.

CSS

Il codice CSS sopra contiene uno stile per il Div class = "nav". IL ".nav " si riferisce alla barra di navigazione principale e al ".nav a " La classe contiene proprietà di styling per i collegamenti della barra di navigazione.

Produzione

L'uscita contiene un'intestazione e una barra di navigazione con tre collegamenti.

Contenuto principale

Il contenuto principale di solito inizia subito dopo la barra di navigazione. E la progettazione del contenuto principale varia da utente a utente. Vari utenti preferiscono un'area di contenuto a colonna singola mentre è possibile utilizzare un layout multi-colonna.

Il seguente codice si riferisce alla creazione del contenuto principale della pagina del sito Web.

Html

Html

CSS

Nel codice sopra, a Div class = "main" è creato che contiene due figli Div's Class = "Prim".

CSS

.Prim
Float: a sinistra;
Larghezza: 49%;
Testo-align: centro;

.Main: dopo
contenuto: "";
Visualizza: tabella;
chiaro: entrambi;

Il codice CSS regola il Float Property a sinistra, La larghezza è impostata su 49%, e l'allineamento del testo è impostato su centro. Inoltre, la proprietà chiara è esercitata sul ".Main: dopo " Per svanire l'effetto galleggiante.

Nota: Per una singola colonna, è necessario regolare la larghezza di conseguenza e il suo valore è impostato su "Fit-Content". Per 3 colonne, la larghezza può essere regolata al 33% per ciascuna colonna e così via.

Produzione

L'output mostra che il contenuto principale ha due colonne denominate "HTML" e "CSS". Queste colonne possono essere alimentate dai contenuti secondo il tuo requisito.

Piè di pagina

Il piè di pagina è un altro componente principale del layout in cui è possibile mettere le informazioni di contatto, i collegamenti ai tuoi account sui social media o qualsiasi tipo di informazione può essere posizionato sul piè di pagina. Per creare un piè di pagina, abbiamo utilizzato il seguente codice.

Html

Informazioni sul piè di pagina

Il codice sopra crea un file Div class = "footer" questo sarebbe considerato un piè di pagina della pagina.

CSS

.Footer
Background-color: Orange;
imbottitura: 20px;
Testo-align: centro;

IL Proprietà a base di sfondo, imbottitura e allineamento del testo sono applicati su class = "footer".

Produzione

L'immagine sopra mostra che il piè di pagina è stato aggiunto correttamente. Inoltre, si possono aggiungere stili e informazioni dettagliate per una migliore estetica della pagina.

Conclusione

Il layout del sito Web comprende pochi ingredienti principali come intestazione, sezione di navigazione, corpo principale e piè di pagina. Questi componenti fungono da giocatore chiave nella pianificazione di un layout per un sito Web e l'interfaccia o la disposizione di questi componenti dipende dal requisito dell'utente. Questo post ha fornito una guida dettagliata su come pianificare il layout di un sito Web. Per una migliore comprensione, abbiamo dimostrato l'uso di tutti i componenti sopra dichiarati.