Gabarits pour démarrer un nouveau site Web à partir de zéro

Vous désirez développer un nouveau site Web à partir de zéro ? Voici des gabarits HTML et CSS qui pourront servir de base à votre travail.

Ces gabarits sont bien incomplets. Il vous offrent cependant la possibilité de débuter votre site sans vous casser la tête pour les prémices habituelles.

▼Publicité


Mise à jour

Cet article a été complètement mis à jour pour offrir un menu qui s'adapte sur les écrans mobiles, avec sous-menus déroulants lorsqu'affiché sur un écran d'ordinateur.

Voici la technique que je vous propose :

  • Recherchez une maquette sur le Web. Cette maquette devra contenir le gros de ce dont vous avez besoin mais il est fort probable que vous devrez y apporter quelques modifications. Par exemple, vous pourriez trouver une maquette sans zone d'authentification alors que votre site Web doit en avoir une. Autre exemple, vous trouvez la maquette de vos rêves mais elle est réalisée pour une résolution de 800 pixels de largeur. Pas fameux...
  • Parfois, les maquettes, qu'elles soient gratuites ou non, sont livrées avec le code HTML et CSS. Cependant, la modification de ces fichiers peut être ardue. Et souvent, les largeurs sont définies en pixels alors le site est difficilement adaptable au mobile. C'est pourquoi j'utilise généralement mon propre code HTML et CSS, basé sur les gabarits que je vous présente ici.
  • Si votre maquette est livrée avec seulement un fichier .PSD, vous devrez effectuer la découpe de la maquette, c'est-à-dire que vous générerez un fichier distinct pour chaque image dont vous avez besoin : image de fond pour chacune des zones (si le fond n'est pas une couleur unie), icônes, etc. Ceci peut être effectué à l'aide de Photoshop ou encore de Gimp.
  • Créez un site de base à l'aide des gabarits fournis ici. Au besoin, déplacez les zones pour qu'elles correspondent à votre maquette (La zone secondaire est-elle nécessaire ? Si oui, est-elle à gauche ou à droite de la zone principale ?). Vous aurez donc quelques manipulations HTML et CSS à effectuer.
  • Vous devrez certainement ajuster la taille des divisions. Prenez soin de toujours présenter la taille en pourcentage par rapport à son contenant (ex : la zone secondaire fait 25% de la largeur de son contenant, qui est la division nommée contenu.
  • Une fois les divisions bien positionnées et leur taille adaptée, ajustez chacun des backgrounds pour qu'il corresponde à la maquette.
  • Au besoin, raffinez votre CSS pour que la zone principale et la zone secondaire soient toujours de la même longueur (article à venir...), pour améliorer l'affichage sur les différentes tailles d'écran (site adaptatif, ou responsive), etc.
  • Ajustez finalement votre CSS pour l'impression. Entre autres, faites en sorte que le menu ne soit pas imprimé.

Lorsque l'affichage de votre site à l'aide des fichiers HTML et CSS sera tout à fait à votre goût, vous pourrez vous lancer dans la programmation avec le langage ou la technique de votre choix.

Gabarit HTML et CSS adaptatif Vous pouvez tester le gabarit ici.

HTML 5

<!DOCTYPE html>

<html lang="fr-CA">

   <head>

      <meta charset="UTF-8" />

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

      <link rel="icon" href="favicon.ico" />

      <meta name="author" content="Christiane Lagacé : http://christianelagace.com">

      <title>titre sous format fil d’Ariane inversé</title>

      <meta name="description" content="Fil d’Ariane inversé suivi d’une phrase descriptive" />

      <meta name="keywords" content=" … " />

      <meta name="robots" content="noodp" />

      <meta name="viewport" content="initial-scale=1.0, width=device-width" />

   </head>

   <body>

      <div id="page">

         <header>

            <a href="index.html">Titre du site</a>

         </header>

         <nav id="menuprincipal">

          <a href="#" class="menumobile">Menu</a>

            <ul>

               <li><a href="pagesousmenu.html">menu 1</a>

                  <ul class="sousmenu">

                     <li><a href="">sous-menu 1a</a></li>

                     <li><a href="">sous-menu 1b</a></li>

                     <li><a href="">sous-menu 1c</a></li>

                  </ul>

               </li>

               <li class="menuactuel"><a href="pagesousmenu.html">menu 2</a>

                  <ul class="sousmenu">

                     <li><a href="">sous-menu 2a</a></li>

                     <li class="menuactuel"><a href="">sous-menu 2b</a></li>

                     <li><a href="">sous-menu 2c</a></li>

                  </ul>

               </li>

               <li><a href="pagesousmenu.html">menu 3</a>

                  <ul class="sousmenu">

                     <li><a href="">sous-menu 3a</a></li>

                     <li><a href="">sous-menu 3b</a></li>

                     <li><a href="">sous-menu 3c</a></li>

                  </ul>

               </li>

            </ul>

         </nav>

         <div id="contenu">

            <section id="principal">

               <div class="interieurprincipal">

                  <h1>Zone principale</h1>

                  <p>Les couleurs du menu indiquent que nous sommes sur la page correspondant au menu 2, sous-menu 2b.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis sapien, faucibus in congue eu, consequat eu nibh. Quisque sit amet felis feugiat, adipiscing lorem sit amet, blandit tortor.</p>

                  <p>Suspendisse vitae aliquam dolor, eu ultrices magna. Aenean dignissim nulla vitae hendrerit mattis. Morbi magna ipsum, malesuada in tempus quis, rutrum quis velit. Donec scelerisque scelerisque sapien 

sit amet venenatis. Sed tristique turpis sapien, at volutpat est vulputate a.</p>

                  <h2>Titre second niveau</h2>

                  <p>Suspendisse rhoncus suscipit ipsum, fermentum dapibus nisl sodales a. Aliquam quis mi turpis. Aenean vel nunc nec ante eleifend tempus.</p>

               </div>

            </section>

            <aside id="secondaire">

               <div class="interieursecondaire">

                  <h1>Zone secondaire</h1>

                  <p>Pellentesque varius eleifend neque, vel pharetra libero volutpat ac. Mauris quis erat at odio varius aliquet bibendum non nulla.</p>

               </div>

            </aside>   

            <div class="push"></div>

         </div>

         <footer>

            Pied de page

         </footer>

      </div>

   </body>

</html>

CSS

/* stylesheet.css */

/* Programmé par Christiane Lagacé : http://christianelagace.com */

 

body {

   margin: 0;

   padding: 0;

   background-color: white;

   background-image: url("...");

   color: black;

   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

   font-size: 100%; 

}

 

#page {

   margin: 0 auto;   /* pour centrer le site en largeur */

   max-width: 960px;   /* pour éviter que le site s'étire trop sur les très grands écrans */

}

 

p {

text-align: justify;

}

 

/* ************************************************************************** */

/* *** pour assurer que tous les navigateurs comprennent ces balises ******** */

/* ************************************************************************** */

article, aside, figcaption, figure, footer, header, hgroup, nav, section

{

    display: block;

}

 

/* ************************************************************************** */

/* *** entête *************************************************************** */

/* ************************************************************************** */

header {

   padding: 10px;

   background-color: #7FA503;   /* vert olive */

   min-height: 50px;

   font-size: 2em;

}

 

header a, header a:hover, header a:visited {

text-decoration: none;

color: black;

}

 

/* ************************************************************************** */

/* *** menu principal ******************************************************* */

/* ************************************************************************** */

#menuprincipal {

   height: 29px;

   background-color: #037E8C;   /* bleu */

   color: white;

}

 

#menuprincipal ul {

   display: inline; 

}

 

#menuprincipal ul li {

   display: inline;   /* pour ne pas que les li fassent un saut de ligne */

   float: left;

}

 

#menuprincipal ul li a {

   text-decoration: none;

   color: white;

   padding: 5px 15px;   /* on met le padding sur le lien pour que tout le rectangle soit cliquable */

   display: block;

}

 

/* le class menuactuel sera appliqué par programmation */

#menuprincipal ul li.menuactuel a {

color: black;   /* option sélectionnée */

}

 

#menuprincipal ul li a:hover {

   background-color: #026873;   /* sarcelle */

}

 

#menuprincipal a.menumobile {

display: none;   /* sera affiché seulement lorsque le media query entrera en jeu */

}

 

@media screen and (max-width : 640px) {

#menuprincipal {

height: 2px;   /* la ligne de menu deviendra une simple ligne de séparation */

}

#menuprincipal a.menumobile {

display:inline-block;

position: absolute;

top: 10px;

right: 10px;

text-decoration : none;

background-color: #037E8C;   /* bleu */

color: white;

padding: 15px;   /* il faut prévoir assez de padding pour que le menu soit facile à cliquer avec le doigt */

}

#menuprincipal ul { 

display: none;   /* on cache les options de menu tant qu'on n'a pas passé la souris sur le bouton */

position: absolute;

top: 43px;

right: 10px;

}

#menuprincipal ul li {

display: block;

float: none;   /* pour défaire le float:left qui était fait pour le menu original */

background-color: #037E8C;   /* bleu */

border-top: 1px solid white;

}

#menuprincipal ul li a {

padding: 15px;

}

#menuprincipal ul li:first-child {

border-top: 1px solid #7FA503;   /* vert olive */

}

 

#menuprincipal:hover ul {

display: block;

}

}

 

/* ************************************************************************** */

/* *** sous-menu déroulant ************************************************************ */

/* ************************************************************************** */

#menuprincipal ul.sousmenu {

   display: none;

   position: absolute;

}

 

#menuprincipal li:hover > ul.sousmenu {

display: block;  /* défait le display none pour le premier ul rencontré */

}

 

#menuprincipal ul.sousmenu li {

display: block;   /* pour défaire le inline du menu principal */

float: none;

margin-left: -40px;  /* pour aligner le sous-menu déroulant avec l'option du menu principal */

background-color: #7D7554;   /* brun */

border-top: 1px solid white;

}

 

#menuprincipal ul.sousmenu li a {

color: white;   /* pour ne pas que toutes les sous-options du menu sélectionné soient en couleur */

padding-top: 5px;

padding-bottom: 5px;

padding-right: 10px;

}

 

#menuprincipal ul.sousmenu li.menuactuel a {

color: black;   /* sous-option sélectionnée */

}

 

#menuprincipal .sousmenu li:first-child {

border-top: none;

}

 

@media screen and (max-width : 640px) {

#menuprincipal li:hover > ul.sousmenu {

display: none;  /* les sous-menus sur cell rendent l'expérience utilisateur pénible. Prévoir qu'un clic sur l'option de menu affiche une page présentant les sous-menus disponibles */

}

}

 

/* ************************************************************************** */

/* *** menu intermédiaire (page affichant les options de sous-menus ********* */

/* ************************************************************************** */

.menuintermediaire a, .menuintermediaire a:hover, .menuintermediaire a:visited {

text-decoration: none;

color: black;

}

 

/* ************************************************************************** */

/* *** contenu ************************************************************** */

/* ************************************************************************** */

#contenu {

   background-color: #815C40;   /* brun */

   min-height: 400px;

}

 

/* ************************************************************************** */

/* *** principal ************************************************************ */

/* ************************************************************************** */

#principal {

   width: 75%;

   background-color: #A6032F;   /* framboise */

   float: left;

}

 

.interieurprincipal {

padding: 10px;   /* on ne met pas le padding directement sur la zone dont la largeur est en % sinon, sera désaligné lors du redimensionnement */

}

 

@media screen and (max-width : 640px) {

#principal {

float: none;

width: 100%;

}

}

 

/* ************************************************************************** */

/* *** secondaire *********************************************************** */

/* ************************************************************************** */

#secondaire {

   background-color: #03A57A;   /* vert */

   width: 25%;

   float: right;

}

 

.interieursecondaire {

padding: 10px;

}

 

@media screen and (max-width : 640px) {

#secondaire {

float: none;

width: 100%;

}

}

 

/* ************************************************************************** */

/* *** pied de page ********************************************************* */

/* ************************************************************************** */

footer {

   background-color: #F2AB27;   /* jaune */

   min-height: 25px;

   padding: 10px;

}

 

/* ************************************************************************** */

/* *** pour traiter les balises qui n'ont que du contenu flottant *********** */

/* ************************************************************************** */

.push {
    clear: both;
}

Et voici le résultat de cette première ébauche, présentée sur écran d'ordinateur et sur téléphone intelligent. Il vous reste maintenant à l'adapter à la réalité de votre site Web.

Gabarit HTML et CSS sur écran d'ordinateur

Gabarit HTML et CSS sur téléphone intelligentGabarit HTML et CSS sur téléphone intelligentGabarit HTML et CSS sur téléphone intelligent

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories