Dans cette ère technologiquement riche, le site Web est l'ingrédient clé pour présenter vos entreprises, produits ou services. La disposition donne des instructions claires pour que les utilisateurs puissent naviguer dans les sites Web et place les éléments les plus cruciaux d'un site en haut de la liste. La disposition du site Web dépend généralement des exigences de l'utilisateur. Cependant, il existe quelques lignes directrices que les développeurs gardent à l'esprit pour obtenir une bonne mise en page pour un site Web.

Dans cet article, nous avons trouvé diverses possibilités pour planifier la disposition d'un site Web.

Comment planifier la disposition d'un site Web

Comme décrit précédemment, la disposition d'un site Web dépend des exigences de l'utilisateur. Ici, nous répertorions divers éléments clés qui aident à créer une disposition personnalisée d'un site Web.

Entête

Cette section est affichée en haut d'un site Web, et il existe de nombreuses façons d'exercer cet espace. Peu de modérateurs gardent le nom ou le logo du site Web à l'intérieur de cet en-tête, mais on peut également ajouter un curseur.

Le code suivant fait référence à la création d'un exemple d'en-tête

Html

Bienvenue à Linuxhint

A est créé avec un Class = ”En-tête" Et un

élément est contenu à l'intérieur de cette div.

CSS

Le code CSS ci-dessus fait référence au classe d'en-tête et ajoute une propriété de couleur, de rembourrage et d'alignement de texte à cette classe.

Sortir

La sortie montre que l'en-tête a été placé en haut de la page et contient les propriétés personnalisées qui lui ont été allouées.

Liens de navigation

Après l'en-tête, il est recommandé d'avoir une barre de navigation qui dirige les visiteurs vers différentes pages de votre site Web. Un exemple de barre de navigation est créé à l'aide du code suivant.

Html

Maison
Tutoriels
Catégories

Dans le code ci-dessus, le div est créé qui contient diverses balises d'ancrage se référant à divers liens.

CSS

Le code CSS ci-dessus contient un style pour le div class = ”nav”. Le ".nav ” fait référence à la barre de navigation principale et au ".NAV A " La classe contient des propriétés de style pour les liens de la barre de navigation.

Sortir

La sortie contient un en-tête et une barre de navigation avec trois liens.

Contenu principal

Le contenu principal commence généralement juste après votre barre de navigation. Et la conception du contenu principal varie d'un utilisateur à l'autre. Divers utilisateurs préfèrent une zone de contenu à colonne unique alors qu'une disposition multi-colonnes peut également être utilisée.

Le code suivant fait référence à la création du contenu principal de la page du site Web.

Html

Html

CSS

Dans le code ci-dessus, un div class = ”main” est créé qui contient deux enfants Div's Class = ”prim".

CSS

.prim
flottant: à gauche;
Largeur: 49%;
Texte-aligne: Centre;

.Main: après
contenu: "";
Affichage: table;
clarifier les deux;

Le code CSS ajuste le Propriété flottante à gauche, La largeur est définie sur 49%, et l'alignement du texte est défini sur le centre. De plus, la propriété claire est exercée sur le ".Main: après » pour disparaître l'effet flottant.

Note: Pour une seule colonne, vous devez ajuster la largeur en conséquence et sa valeur est définie sur «Fit-contenu». Pour 3 colonnes, la largeur peut être ajustée à 33% pour chaque colonne et ainsi de suite.

Sortir

La sortie montre que le contenu principal a deux colonnes nommées «HTML» et «CSS». Ces colonnes peuvent être alimentées par le contenu selon vos besoins.

Bas de page

Le pied de page est un autre élément majeur de la mise en page où vous pouvez mettre les informations de contact, des liens vers vos comptes de médias sociaux ou tout type d'informations peut être placé sur le pied de page. Pour créer un pied de page, nous avons utilisé le code suivant.

Html

Informations sur le pied

Le code ci-dessus crée un div class = ”footer” qui serait considéré comme un pied de page de la page.

CSS

.bas de page
Color en arrière-plan: orange;
rembourrage: 20px;
Texte-aligne: Centre;

Le Propriétés de couleur, de rembourrage et de texte sont appliqués sur le classe = "pied de page".

Sortir

L'image ci-dessus montre que le pied de page a été ajouté avec succès. De plus, on peut ajouter des styles et des informations détaillées pour une meilleure esthétique de la page.

Conclusion

La disposition du site Web comprend quelques ingrédients principaux tels que l'en-tête, la section de navigation, le corps principal et le pied de page. Ces composants sont l'acteur clé dans la planification d'une mise en page pour un site Web et l'interface ou la disposition de ces composants dépend de l'exigence de l'utilisateur. Cet article a fourni un guide détaillé sur la façon de planifier la disposition d'un site Web. Pour une meilleure compréhension, nous avons démontré l'utilisation de tous les composants indiqués ci-dessus.