3 exemples de mise en page de site Web solides comme du roc codés

Récemment, dans Design Shack, nous avons présenté un article intitulé «10 exemples de mise en page de site Web solides comme de la pierre», qui décompose certaines mises en page courantes en structures filaires à silhouette simple afin que vous puissiez facilement les appliquer dans votre travail.

Aujourd'hui, j'ai choisi trois de ces mises en page et les ai converties en pages Web dynamiques avec du HTML et du CSS. Ils sont tous très simples et faciles à utiliser pour de nombreux débutants. De plus, nous utiliserons un cadre génial pour faire le gros du travail.

Skeleton: un plateau de cuisson pour un design Web réactif

Dans un autre article récent, j’ai expliqué comment utiliser le framework Skeleton pour créer des pages Web «réactives», ce qui signifie qu’elles répondent bien à toutes les fenêtres de navigateur. Les pages Web réactives ont fière allure sur les grands écrans plats, les écrans de smartphone minuscules et tout le reste.

Puisque j'ai aimé l'utiliser, nous utiliserons à nouveau Skeleton aujourd'hui pour transformer ces mises en page simples en pages Web entièrement réactives. Ce sera tellement facile que nous puissions en couvrir trois en un seul post, commençons!

Si vous suivez le chemin, assurez-vous de télécharger le Skeleton Boilerplate en premier!

Trois boîtes

Le premier est un moyen incroyablement simple et efficace de faire des images le véritable héros de votre page d'accueil. La plus grande partie de la page est occupée par trois grandes photos pouvant être des images statiques ou des diaporamas dynamiques.

Le HTML

L'image ci-dessus contient cinq éléments évidents qu'il faudra créer: le logo (en haut à gauche), la navigation (en haut à droite), une grande image et deux images plus petites. La première chose à faire est de créer une div pour chacun et de choisir des largeurs.

Le Skeleton Boilerplate utilise un système à seize colonnes afin de diviser la zone en deux sections, nous utilisons les classes? Huit? et? colonnes ?. De même, si nous voulons que le contenu s’étire jusqu’à ce que nous utilisions des mots «seize». au lieu.

Nous devons maintenant renseigner nos divs avec du contenu. Nous allons simplement utiliser du texte pour la zone du logo et ajouter une liste non ordonnée pour la navigation que nous pouvons laisser à gauche pour forcer les éléments à une mise en page horizontale. Enfin, pour les autres, nous avons juste besoin d’images génériques.

<h2>Cabane Design</h2> <ul> <li>Accueil</li> <li>Sur</li> <li>Contact</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_3.jpg"> <h2>Captures d'écran 3D</h2> <p>Celui-ci utilise un effet très courant dans lequel vous créez un verrouillage de quelques captures d'écran de votre site Web et les arrangez pour donner l'apparence d'un espace 3D. La maquette pour les captures d'écran est réalisée dans Photoshop, vous n'avez donc besoin que d'une grande image et de texte. Cela ne pourrait pas être plus facile!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_4.jpg"> <h3>HTML</h3> <p>Celui-ci est assez similaire au dernier et je vais donc modifier un peu les choses de cet aperçu initial. À la fin, nous aurons une page d'aspect assez différente de la dernière. </p> <textarea wrap="soft" readonly="">

Comme vous pouvez le constater, il y a une boule de commande ici sous la forme d'une enveloppe supplémentaire, cela nous permettra de placer cette barre sombre derrière le contenu en haut de la page. Après cela, tout est simple et beau et nous avons juste besoin de deux divs pleine largeur.

<h3>DS</h3> <ul> <li>Accueil</li> <li>Sur</li> <li>Contact</li> </ul> <h1>Lorem Ipsum Doller Set</h1> <p>Lorem ipsum dolor sit amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_5.jpg"> <h2>Graphique présenté</h2> <p>Celui-ci est idéal pour afficher des icônes, des captures d'écran, des logos ou tout ce qui a fière allure dans un grand cercle. Encore une fois, nous constatons que le travail de mise en page se fait presque sans effort et que le résultat est unique et intéressant.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_6.jpg"> <h3>HTML</h3> <p>Cela permet de placer le logo et la navigation sur différentes lignes, puis de séparer la largeur de la ligne suivante entre la grande image du cercle et le texte.</p> <p>Notez qu'au lieu de diviser le contenu en deux? Huit colonnes? classes, j'ai utilisé et huit et sept. Ensuite, j'ai inséré un point vide avec un? Décalage par un? classe.</p> <textarea wrap="soft" readonly="">

Le contenu ici est constitué de tout ce que nous avons vu auparavant, une balise d’en-tête pour le logo, ul pour la navigation, quelques balises de paragraphe et une image. C'est tout ce qu'il faut, un peu de style et nous allons terminer ce post!

<h3>Cabane Design</h3> <ul> <li>Accueil</li> <li>Sur</li> <li>Portefeuille</li> <li>Contact</li> </ul> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_7.jpg"> <h2>Conclusion</h2> <p>Comme vous pouvez le constater, nos exemples de mise en page très solides peuvent être convertis en HTML et CSS sans effort. Grâce à l'utilisation de Skeleton, nous avons même pu adapter les présentations à différentes tailles de navigateur en n'utilisant que quelques lignes de code supplémentaires.</p> <p>J'espère que vous avez apprécié ce tutoriel et que vous le trouverez utile pour les projets futurs. N'hésitez pas à voler mon code et à l'utiliser comme bon vous semble!</p>