Création d'un site pas à pas

Maquettage du design

La 1ère étape consiste à faire la maquette de son site, c'est à dire réfléchir à ce qu'on veut créer comme site:

De quoi va-t-il parler ?
Avez-vous un thème, un objectif ?

Comme 1er site, vu que les idées ne sont pas toujours au rdv, on peut déjà commencer par créer un site pour se présenter, pour assurer sa présence sur le Web : ce site parlera de nous, il y aura notre CV, nos futures réalisations et pourquoi pas notre blog.

Pour le TP, si on manque d'inspiration (ce qui est mon cas pour cet exercice), on peut aller sur le site https://html5up.net/.

Le contenu qu'on télécharge va juste nous apporter les éléments qui vont m'aider à construire le design, c'est-à-dire les codes couleurs utilisés, les images découpées, ainsi que les polices.

Prochaines étapes:

construire le squelette HTML de la page
le mettre en forme et le mettre en page avec CSS

Haut

Organiser le contenu en HTML

Pour créer ce squelette, nous allons utiliser différentes balises HTML :

les balises structurantes de HTML5, que nous connaissons: header, section, nav, etc...
la balise universelle div quand aucune balise structurante ne convient.

Voici le site de Zozor une fois fini:

Maquette découpée en différentes sections

Mais pour le moment nous n'en sommes qu'au HTML seul:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" href="style.css" /> 6 <title>Zozor - Carnets de voyage</title> 7 </head> 8 9 <body> 10 <div id="bloc_page"> 11 <header> 12 <div id="titre_principal"> 13 <div id="logo"> 14 <img src="images/zozor_logo.png" alt="Logo de Zozor" /> 15 <h1>Zozor</h1> 16 </div> 17 <h2>Carnets de voyage</h2> 18 </div> 19 20 <nav> 21 <ul> 22 <li><a href="#">Accueil</a></li> 23 <li><a href="#">Blog</a></li> 24 <li><a href="#">CV</a></li> 25 <li><a href="#">Contact</a></li> 26 </ul> 27 </nav> 28 </header> 29 30 <div id="banniere_image"> 31 <div id="banniere_description"> 32 Retour sur mes vacances aux États-Unis... 33 <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a> 34 </div> 35 </div> 36 37 <section> 38 <article> 39 <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1> 40 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p> 41 <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p> 42 <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p> 43 </article> 44 <aside> 45 <h1>À propos de l'auteur</h1> 46 <img src="images/bulle.png" alt="" id="fleche_bulle" /> 47 <p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p> 48 <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p> 49 <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p> 50 <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p> 51 </aside> 52 </section> 53 54 <footer> 55 <div id="tweet"> 56 <h1>Mon dernier tweet</h1> 57 <p>Hii haaaaaan !</p> 58 <p>le 12 mai à 23h12</p> 59 </div> 60 <div id="mes_photos"> 61 <h1>Mes photos</h1> 62 <p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p> 63 </div> 64 <div id="mes_amis"> 65 <h1>Mes amis</h1> 66 <div id="listes_amis"> 67 <ul> 68 <li><a href="#">Pupi le lapin</a></li> 69 <li><a href="#">Mr Baobab</a></li> 70 <li><a href="#">Kaiwaii</a></li> 71 <li><a href="#">Perceval.eu</a></li> 72 </ul> 73 <ul> 74 <li><a href="#">Belette</a></li> 75 <li><a href="#">Le concombre masqué</a></li> 76 <li><a href="#">Ptit prince</a></li> 77 <li><a href="#">Mr Fan</a></li> 78 </ul> 79 </div> 80 </div> 81 </footer> 82 </div> 83 </body> 84 </html>

Apparence du site web constitué uniquement du HTML

On s'aperçoit que tout le contenu de la page est placé dans une grande balise div ayant pour id : bloc_page (on l'appelle aussi parfois main_wrapper en anglais). Cette balise englobe tout le contenu, ce qui va nous permettre de fixer facilement les dimensions de la page et de centrer notre site à l'écran.

Il s'avère qu'en créant le site, on apporte forcément des modifications, comme ici par exemple, l'apport de balises div fut nécessaire pour aider à la réalisation du design.

Alors oui ce n'est pas très beau, mais c'est le CSS qui va faire toute la différence.

Haut

Mettre en forme en CSS

Il faut garder à l'esprit qu'on ne pourra pas faire exactement le même design que celui qu'on prend comme exemple, il faut juste essayer de s'en approcher au maximum.

Pour mettre en forme le design de Zozor, on va procéder en plusieurs étapes, dans cet ordre :

Polices personnalisées.
Définition des styles principaux de la page (largeur du site, fond, couleur par défaut du texte).
En-tête et liens de navigation.
Bannière (représentant le pont de San Francisco).
Section principale du corps de page, au centre.
Pied de page (footer).

Haut

Polices personnalisées

Pour les besoins du design du site de Zozor, le graphiste a utilisé trois polices sur sa maquette :

Trebuchet MS (police courante);
BallparkWeiner (police exotique);
Day Roman (police exotique).

Voici un générateur de polices, qui permet d'accéder à tous les formats nécessaires avec @font-face.

Puis, dans le fichier CSS on ajoute les codes de polices qu'on a eu via le générateur:

1 /* Définition des polices personnalisées */ 2 3 @font-face 4 { 5 font-family: 'BallparkWeiner'; 6 src: url('polices/ballpark.eot'); 7 src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'), 8 url('polices/ballpark.woff') format('woff'), 9 url('polices/ballpark.ttf') format('truetype'), 10 url('polices/ballpark.svg#BallparkWeiner') format('svg'); 11 font-weight: normal; 12 font-style: normal; 13 } 14 15 @font-face 16 { 17 font-family: 'Dayrom'; 18 src: url('polices/dayrom.eot'); 19 src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'), 20 url('polices/dayrom.woff') format('woff'), 21 url('polices/dayrom.ttf') format('truetype'), 22 url('polices/dayrom.svg#Dayrom') format('svg'); 23 font-weight: normal; 24 font-style: normal; 25 }

Pour les rendre accessibles, dans l'idéal, il est fortement conseillé de placer les polices dans un dossier polices prévu à cet effet.

Haut

Définition des styles principaux

On va commencer par définir une image de fond, une police et une couleur de texte par défaut, et surtout on va dimensionner notre page et la centrer à l'écran.

1 /* Eléments principaux de la page */ 2 3 body 4 { 5 background: url('images/fond_jaune.png'); 6 font-family: 'Trebuchet MS', Arial, sans-serif; 7 color: #181818; 8 } 9 10 #bloc_page 11 { 12 width: 900px; 13 margin: auto; 14 } 15 16 section h1, footer h1, nav a 17 { 18 font-family: Dayrom, serif; 19 font-weight: normal; 20 text-transform: uppercase; 21 }

Le fond et les limites de la page commencent à apparaître

Avec #bloc_page, le bloc qui englobe toute la page, on a fixé les limites à 900 pixels de large (même s'il vaut mieux utiliser un %). Avec les marges automatiques, le design sera centré.

text-transform +

uppercase: pour que le texte soit en majuscules
lowercase: pour que le texte soit en minuscules

Haut

En-tête et liens de navigation

On va procéder étape par étape:

l'en-tête
les liens de navigation

L'en-tête

1 /* Header */ 2 3 header 4 { 5 background: url('images/separateur.png') repeat-x bottom; 6 display: flex; 7 justify-content: space-between; 8 align-items: flex-end; 9 } 10 11 #titre_principal 12 { 13 display: flex; 14 flex-direction: column; 15 } 16 17 #logo 18 { 19 display: flex; 20 flex-direction: row; 21 align-items: baseline; 22 } 23 24 #logo img 25 { 26 width: 59px; 27 height: 60px; 28 } 29 30 header h1 31 { 32 font-family: 'BallparkWeiner', serif; 33 font-size: 2.5em; 34 font-weight: normal; 35 margin: 0 0 0 10px; 36 } 37 38 header h2 39 { 40 font-family: Dayrom, serif; 41 font-size: 1.1em; 42 margin-top: 0px; 43 font-weight: normal; 44 }

Nous créons une distinction entre l'en-tête et le corps de page grâce à une image de fond. Les éléments sont positionnés avec flexbox : il y a plusieurs niveaux d'imbrication, certains sont positionnés verticalement, d'autres horizontalement. Nous personnalisons aussi les polices et les dimensions.

Haut

Les liens de navigation

Pour que la liste s'affiche comme on le souhaite, et non en hauteur, on va procéder de cette façon:

1 /* Navigation */ 2 3 nav ul 4 { 5 list-style-type: none; 6 display: flex; 7 } 8 9 nav li 10 { 11 margin-right: 15px; 12 } 13 14 nav a 15 { 16 font-size: 1.3em; 17 color: #181818; 18 padding-bottom: 3px; 19 text-decoration: none; 20 } 21 22 nav a:hover 23 { 24 color: #760001; 25 border-bottom: 3px solid #760001; 26 }

On utilise la propriété CSS list-style-type: none; pour retirer les puces de la liste.

Haut

Bannière

La bannière du site de Zozor est intéressante car:

elle comporte des angles arrondis;
la description est écrite sur un fond légèrement transparent;
le bouton « Voir l'article » est réalisé en CSS, avec des angles arrondis;
une ombre vient donner du volume à la bannière.

Voici son code source:

1 /* Bannière */ 2 #banniere_image 3 { 4 margin-top: 15px; 5 height: 200px; 6 border-radius: 5px; 7 background: url('images/sanfrancisco.jpg') no-repeat; 8 position: relative; 9 box-shadow: 0px 4px 4px #1c1a19; 10 margin-bottom: 25px; 11 } 12 13 #banniere_description 14 { 15 position: absolute; 16 bottom: 0; 17 border-radius: 0px 0px 5px 5px; 18 width: 99.5%; 19 height: 33px; 20 padding-top: 15px; 21 padding-left: 4px; 22 background-color: rgba(24,24,24,0.8); 23 color: white; 24 font-size: 0.8em; 25 } 26 27 .bouton_rouge 28 { 29 height: 25px; 30 position: absolute; 31 right: 5px; 32 bottom: 5px; 33 background: url('images/fond_degraderouge.png') repeat-x; 34 border: 1px solid #760001; 35 border-radius: 5px; 36 font-size: 1.2em; 37 text-align: center; 38 padding: 3px 8px 0px 8px; 39 color: white; 40 text-decoration: none; 41 } 42 43 .bouton_rouge img 44 { 45 border: 0; 46 }

On a décidé:

d'afficher l'image du pont sous forme d'image de fond dans le bloc div de la bannière.
de donner une position relative à la bannière, sans en modifier le décalage, pour placer le bouton "Voir l'article" en bas à droite de la bannière.
pour la légende de la bannière, j'ai choisi d'utiliser la transparence avec la notation RGBa plutôt que opacity car ce dernier aurait rendu tout le contenu du bloc transparent, y compris le bouton « Voir l'article » à l'intérieur.

Et voici le résultat:

La bannière est mise en forme

Pour faire des dégradés, on peut utiliser:

une image de fond qu'on répète horizontalement
linear-gradient (qui est relativement complexe à utiliser)

Haut

Section principale du corps de page, au centre

Le corps, au centre de la page, est dans notre cas constitué d'une unique balise section (mais il pourrait y en avoir plusieurs, bien sûr).

Le positionnement du bloc « À propos de l'auteur » se fait grâce à Flexbox. On a réparti la taille des éléments avec la propriété flex, ce qui permet à l'article et au bloc sur le côté d'équilibrer leurs largeurs.

On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voilà !

1 /* Corps */ 2 3 section 4 { 5 display: flex; 6 margin-bottom: 20px; 7 } 8 9 article, aside 10 { 11 text-align: justify; 12 } 13 14 article 15 { 16 margin-right: 20px; 17 flex: 3; 18 } 19 20 .ico_categorie 21 { 22 vertical-align: middle; 23 margin-right: 8px; 24 } 25 26 article p 27 { 28 font-size: 0.8em; 29 } 30 31 aside 32 { 33 flex: 1.2; 34 position: relative; 35 background-color: #706b64; 36 box-shadow: 0px 2px 5px #1c1a19; 37 border-radius: 5px; 38 padding: 10px; 39 color: white; 40 font-size: 0.9em; 41 } 42 43 #fleche_bulle 44 { 45 position: absolute; 46 top: 100px; 47 left: -12px; 48 } 49 50 #photo_zozor 51 { 52 text-align: center; 53 } 54 55 #photo_zozor img 56 { 57 border: 1px solid #181818; 58 } 59 60 aside img 61 { 62 margin-right: 5px; 63 }

La petite difficulté ici était de réussir à placer la flèche à gauche du bloc aside "À propos de l'auteur" pour donner l'effet d'une bulle.

La technique est la même : on positionne le bloc aside en relatif (sans effectuer de décalage), ce qui nous permet ensuite de positionner l'image de la flèche en absolu par rapport au bloc aside (et non par rapport à la page entière).

En jouant sur le décalage de l'image, on peut la placer avec précision où on veut, au pixel près!

Le corps de la page est mis en forme

Haut

Pied de page

Plus que le pied de page à mettre en forme. Celui-ci est constitué de trois sous-blocs qu'on a matérialisés par des div auxquels on a donné des id pour mieux les repérer. Ces blocs sont positionnés grâce à une Flexbox les uns à côté des autres.

1 /* Footer */ 2 3 footer 4 { 5 display: flex; 6 background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; 7 padding-top: 25px; 8 } 9 10 footer p, footer ul 11 { 12 font-size: 0.8em; 13 } 14 15 footer h1 16 { 17 font-size: 1.1em; 18 } 19 20 #tweet 21 { 22 width: 28%; 23 } 24 25 #mes_photos 26 { 27 width: 35%; 28 } 29 30 #mes_amis 31 { 32 width: 31%; 33 } 34 35 #mes_photos img 36 { 37 border: 1px solid #181818; 38 margin-right: 2px; 39 } 40 41 #listes_amis 42 { 43 display: flex; 44 justify-content: space-between; 45 margin-top: 0; 46 } 47 48 #mes_amis ul 49 { 50 list-style-image: url('images/ico_liensexterne.png'); 51 padding-left: 2px; 52 } 53 54 #mes_amis a 55 { 56 text-decoration: none; 57 color: #760001; 58 }

Deux petites particularités à signaler sur le pied de page:

on a utilisé la fonctionnalité des images de fond multiples de CSS3 qui permet de réaliser le séparateur entre le corps et le pied de page. Il est constitué de trois images : le séparateur, la petite flèche vers le haut et un léger dégradé.
on a modifié la puce de la liste « Mes amis », en bas à droite, avec la propriété list-style-image qui permet d'utiliser une image personnalisée plutôt que les puces standard.

Pour retrouver les propriétés CSS3, on peut aller sur Mémento des propriétés CSS.

Le pied de page est mis en forme

La dernière étape consiste à vérifier sur différents navigateurs si le site fonctionne.

Haut

Vérifier la validité

Le W3C propose sur son site web un outil appelé le « Validateur » (« Validator » en anglais), accessible par ce site: validator w3.

Le validateur est une sorte de programme qui va analyser votre code source et vous dire s'il est correctement écrit ou s'il comporte des erreurs que vous devez corriger.

Sur ce site, on peut valider notre page web de trois façons différentes, c'est pour cela qu'il y a trois onglets :

adresse (URL) ;
envoi du fichier .html (le plus conseillé);
copier-coller du code HTML.

Si tout est ok, un message vert s'affichera, dans le cas contraire le message sera rouge, auquel cas il faudra corriger les erreurs présentes dans le code HTML pour éviter les conflits avec d'anciens navigateurs.

Pour éviter les erreurs, voici une liste de conseils:

Tous vos textes doivent en général être dans des balises de paragraphes. Il est interdit de mettre du texte directement entre les balises "body" "/body" sans l'avoir entouré des fameux "p" "/p". Ceci est aussi valable pour les retours à la ligne "br/", qui doivent être à l'intérieur de paragraphes.

1 <p>Ceci est un texte correctement placé dans un paragraphe. 2 <br /> 3 Les balises <br /> doivent se trouver à l'intérieur d'un paragraphe, ne l'oubliez pas</p> 4 5 Ceci est un texte en-dehors d'un paragraphe. C'est interdit. 6 <br />

Toutes vos images doivent comporter un attribut alt qui indique ce que contient l'image. Si, par hasard, votre image est purement décorative (vous ne pouvez pas en trouver de description), vous êtes autorisés à ne rien mettre comme valeur pour l'attribut alt.

1  2 <img src="photo.jpg" alt="Une photo de moi" /> 3 4  5 <img src="deco.png" alt="" />

Vos balises doivent être fermées dans l'ordre.

1  2 <p>Texte <em>important</p></em> 3 4  5 <p>Texte <em>important</em></p>

Si vos liens comportent des &, vous devez les remplacer par le code & amp; (tout attaché) pour éviter toute confusion au navigateur.

1  2 <a href="http://www.site.com/?jour=15&mois=10&an=2000"></a> 3 4  5 <a href="http://www.site.com/?jour=15&mois=10&an=2000"></a>

Vérifiez enfin que vous n'avez pas utilisé des balises anciennes et désormais obsolètes en HTML5 (comme le vieux frame, la balise marquee… Le validateur vous dira « Element XXX undefined » (balise inconnue) ou encore « There is no attribute XXX » (attribut inconnu).

Haut

Le code final

Et voici à quoi il ressemble au final:

Apparence finale du site web

Plus qu'à s'exercer de son côté!!

Haut