Mise en situation de vos webdesigns dans un navigateur

Niveau : débutant
Code : HTML / CSS
Démo 1 : c’est par ici
Démo 2 : c’est par ici
Sources : c’est par là

Principe de la démarche

Une maquette devrait toujours être montrée sur son support final. Quand vous faites des cartes de visite, vous les imprimez en 1:1. Idem pour les flyers ou les papier en-tête.
Il en est de même pour le webdesign. Il faut les présenter en situation réele dans un navigateur, avec la possibilité de scroller dans la page.

Pour les webdesigners / intégrateurs, il n’y a pas de soucis. Une maquette est l’affaire de 10 minutes.
Mais pour les autres, ceux qui ne savent pas coder (hé oui, il y en a), je vous propose deux archives de mise en situation (MES) simple d’utilisation.
Vous n’aurez qu’à générer des .png de vos design et à les coller dans un fichier pour les voir en situation réelle !

La mise en situation simple

Pour cette MES, il est possible de cutomiser deux choses :

• Le fond de la page (en bleu clair sur le schéma).
• L’image qui compose le webdesign (en bleu foncé sur le schéma).

Le carré bleu correspond au design, le fond bleu clair est votre fond personnalisé.

Voilà de quoi se compose cette MES :

• index.html (la page web qui va afficher le design),
• style.css (la feuille de style qui met votre page web en forme)
• un dossier images (dans lequel vous allez copier votre design).

Dans le dossier images se trouvent :

• mon_webdesign.png (le png de votre webdesign),
• fond.png (le png de votre fond de page).

Voilà ce que vous avez sur votre disque dur.

Pour mettre en place votre design, rien de plus simple.
Il suffit de générer un png pour votre fond, et un second (en n’oubliant pas d’activer la transparence) pour votre webdesign.
Vous les nommez comme les miens (mon_webdesign.png et fond.png) avant de les copier dans le dossier images (en écrasant les miens).
Ouvrez intex.html dans le navigateur de votre choix sauf Internet Explorer et vous verrez votre webdesign comme s’il avait été codé !
Allez donc voir par ici pour une démo en live.

La mise en situation en trois parties

La seconde mise en situation est un peu plus complète.
Elle permet d’avoir un fond sur toute la longueur pour le header, le footer et la partie centrale du design.

Les trois couleurs représentent les trois .png à utiliser.

Nous avons donc dans le dossier images :

• mon_design_header.png (le png de votre header),
• fond_header.png (le png de votre fond de header),
• mon_design.png (le png de votre design central),
• fond.png (le png de votre fond de page),
• mon_design_footer.png (le png de votre footer),
• fond_footer.png (le png de votre fond de footer).

Voilà ce que vous avez sur votre disque dur.

il vous suffit donc de remplacer mes 6 .png par les votres, et vous obtiendrez une mise en situation comme celle-là.

La balise title pour entrer votre titre de page

Vous venez donc de remplacer les png, vous ouvrez votre fichier html et là horreur ! Le titre de la page est signé de l’égocentrique PUShAUNE l’auteur de ce tutoriel !
Pas de panique, je vais vous montrer comment le modifier et mettre le nom de votre client à la place :

1/ Ouvrez index.html avec dreamweaver votre éditeur préféré.
2/ Cherchez la ligne 6 qui ressemble à ça :

<title>Ma super maquette par PUShAUNE</title>

3/ Remplacez Ma super maquette par PUShAUNE par votre texte.
4/ Enregistrez.

Et voilà, vous venez de changer le titre de votre page !

Comment améliorer ces mises en situations

Ces MES restent basiques mais bien pratiques. Alors oui, pour ceux qui qui ont des notions en CSS et qui n’ont pas peur de mettre les mains dans le cambouis, il est possible de définir les pading et margin des design.png ou encore d’afficher un background-color.
Mais il faut coder pour ça.

Un autre avantage est de mettre en ligne ces mises en situations pour que votre client puisse les voir après votre présentation.
C’est un vrai plus aux .pdf ou autres pages imprimées.

J’espère que ce tuto vous aura été utile. Petit rappel, les démos sont ici et là, les sources ici-même.

See you space internaute