Web design

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
a- Penser responsive design
ETIC
ETIC
Tendance forte du webdesign depuis plus de 5 ans, le responsive design est
directement lie à l'explosion
des ventes de smartphone et de tablettes. Cette ascension fulgurante fait émerger
des nouveaux modes
de consommation de l'information qu'il est impossible d'occulter aujourd'hui. Le
responsive design
permet d'adapter le contenu d'un site à tout type d'appareil sans jamais altérer sa
qualité. Les éléments
de contenu (textes, photos) se replacent automatiquement pour fluidifier la
navigation. Il permet ainsi
de satisfaire des utilisateurs impatients en situation de mobilité qui exigent un
accès rapide et precis a
l'information recherchée.
✔ 5 avantages du responsive design:
Une accessibilité de qualité quel que soit le support
Un nombre de visiteurs potentiellement plus important
Une meilleure expérience utilisateur grâce à un contenu adapté
Une maintenance et un hébergement unique
Des efforts réduits en matière de SEO car ils s'effectuent sur un site et non sur
des sites
b- Les enjeuX
Devant la multiplication des supports et la diversité des tailles d'écrans, il faut
garder à l'esprit que
l'expérience utilisateur doit rester identique et l'accès à l'information
recherchée simplifiée. Il ne faut
surtout pas oublier, un visiteur est pressé, une page non optimisée (image mal
dimensionnée, texte
illisible) et c'est la fuite assurée. L'idéal est de prévoir l'approche d'un site
en responsive design dès sa
construction, dans le cas contraire, il reste possible d'effectuer une refonte pour
le rendre adaptable.
2

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
A ce sujet, Google a mis à jour son algorithme pour rendre moins visibles les sites
non "mobile-friendly"
dans les résultats de recherche obtenus depuis des mobiles.
L'enjeu principal du responsive design est d'optimiser I'expérience utilisateur et
de le placer au centre
de la conception en harmonisant la distribution des contenus et des services
digitaux provenant de
multiples sources.
3- Définir et améliorer I'expérience utilisateur
Le UX design consiste à imaginer et à créer un site internet pour rendre
l'expérience utilisateur la
meilleure possible. Mais c'est quoi au juste une bonne expérience utilisateur ?
De quoi est-il question ?
Nous avons sans doute tous déjà surfé sur un site sur lequel nous nous sommes
rapidement perdu. Une
navigation hasardeuse, un temps de chargement trop long, des formulaires à rallonge
pour s'abonnerà
une simple newsletter, des images issues des banques de données vues et revues, un
contenu
inintéressant, entrainerons la fuite rapide des visiteurs.
Comme nous pouvons le comprendre, le UX design vise à produire un site graphique,
ergonomique sur
lequel le visiteur prendra plaisir à naviguer afin de trouver l'information ou le
produit qu'il recherche en
toute confiance. Cet exercice très méthodique ne saurait être résumé à une belle
interface, cela va
beaucoup plus loin.
b- UX Design (User eXperience) et amélioration de l'eXpérience Utilisateur
Pour définir ce qu'est une bonne expérience utilisateur, il suffit de se remémorer
les mauvaises.
Qui n'a pas pesté devant un site mal fait où il est impossible de s'y retrouver
dans les catégories ?
3

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Combien d'entre nous vont immédiatement voir ailleurs quand un message d'erreur
apparait ?
Qui souhaiterai remplir 5 pages de formulaires pour passer une commande à 5000 Fcfa
?
L'UX design vise donc à penser un site web de manière à ce que I'utilisateur se
sente bien, en confiance,
et puisse trouver les informations qu'il cherche tout en ayant envie d'interagir
avec le site.
Les éléments qui permettent d'améliorer I'expérience utilisateur sont les suivants:
Un argumentaire adapté et des solutions répondant aux besoins de votre cible
Une adaptabilité à tous les supports (responsive design)
Une infographie ludique pour faciliter la transmission de l'information
Des formulaires épurés et pré remplis
Des témoignages sincères
Un processus de commande simple et logique
V L'affichage de labels pour se distinguer des concurrents et rassurer les
visiteurs
Une mauvaise expérience sur un site fera fuir les visiteurs de façon aussi
immédiate et définitive.
A l'inverse, une sensation positive leur procurera une émotion qui les liera à la
marque de l'entreprise.
Meme s'ils établissent un comparatif avec les concurrents de l'entreprise, ils se
souviendront
inconsciemment du site et du moment agréable passé sur celui-ci. À vous de le
rendre unique en
adaptant votre design.
4- Template ou design sur-mesure ?
Lorsque l'on décide de refondre un site, l'on dispose de deux solutions : acheter
un modèle prédéfini
(un Template) ou privilégier un design personnalisé. Le choix final résultera d'une
réflexion stratégique
à mener dès le début d'un projet. Le Template serait-il au design personnalisé ce
que le simili est au cuir
?
a- Le Template:Une solution intéressante qui a ses limites
€
500
500
Cette solution est idéale, car elle présente des avantages intéressants si vous
disposez d'un budget
limité. II existe un grand choix de Template, dont la plupart bénéficient d'une
structure en responsive
design. Attention, grand choix ne signifie pas "exclusivité". Même si l'ambiance et
l'apparence (code
couleur, typographie, ajout de votre logo) peuvent être modifiées, l'on ne possède
pas le monopole du
design du futur site. Il est essentiel de bien définir son objectif avant de
choisir sa structure afin d'en
limiter les modifications. Comme nous pouvons le comprendre, choisir un Template
pour son site peut
être intéressant à condition d'avoir bien défini ses besoins au préalable. Toutes
modifications ou ajouts
peuvent rapidement alourdir le coût, et au final se révéler plus cher que si l'on
avait penché pour un
design personnalisé au départ.
4

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
b- Le design personnalisé : un site unique aux possibilités infinies
Un site sur mesure est réalisé pour une entreprise, uniguement elle, en fonction de
ses objectifs et dans
le respect sa charte graphique. La liberté de création est totale, les possibilités
d'évolution infinies et
l'intégration de toutes les fonctionnalités sans contrainte. Un site personnalisé,
en plus d'être original, il
accompagnera 'entreprise au fil des années, en évoluant avec ses produits ou
services. Si l'on devait
citer une seule limite sur la création d'un site personnalisé ? Son prix.
Template ou design personnalisé apparaissent ainsi comme deux solutions
différentes, chacune posséde
ses avantages. Encore une fois, c'est au Webdesigner de bien analyser les besoins
de l'entreprise afin de
lui permettre d'effectuer le meilleur choix.

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
PARTIE 2- REGLES DE BASE DU WEBDESIGN
Lors de la conception d'un site web, il est important de prendre en compte un
certain nombre d'elèments
pour définir les fonctionnalités et le design, au même titre que l'aspect
esthétique et le design pur.
1- Loi de Hick
Plus les choix proposés au visiteur sont nombreux, plus l'utilisateur augmente son
entropie par rapport
à l'information délivrée (plus le message est brouillé).
En d'autres termes, au niveau de la vente par exemple, plus on donne de choix,
moins les achats sont
nombreux.
2- Loi de Pareto (80/20)
Les visiteurs agissent globalement peu sur l'application/site web (20% seulement
vont déclencher une
action comme remplir un formulaire, lancer une recherche, s'inscrire à newsletter,
laisser un
commentaire, réaliser un achat etc..).
De la même façon, seul 20% du contenu d'un site web est généralement consulté. D'où
l'importance
apportee a l'ergonomie, comme les menus ou encore les dispositifs de mise en avant
de contenus pour
cibler/varier les actions visées.
3- Règle des tiers
Il s'agit de décomposer I'image en 3 dans le sens de la longueur et de la largeur,
ce qui donne 9 portions
d'images.
Orientation Paysage
Orientaton Portrait
Il est préférable de:
Placer les éléments à important à l'intersection des lignes
Placer les éléments secondaires le long des lignes
✔ Eviter de placer les éléments dans les zones « mortes » (sans ligne ni
intersection)
/ Placer l'élément central sur les l/3 ou 2/3 de l'ensemble.
6

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
4- Proximité
CARHDCommande
RecHehent
T'été!
Promos
Services cllent
bonne mise en application:I'information est claire et les éléments a yant une
fonction similaire sont regroupés. La navigation est donc facilitée.
Les éléments placés les uns à côté des autres sont perçus comme « allant de pairs
», Comme les « en
savoir plus » placés juste en dessous des paragraphes par exemple.
Il s'agit ici de bien définir les zones de chaque application pour ne pas perturber
la lisibilité.
5- Feedback
C'est la visibilité des déclencheurs d'actions qui est le point-clé de l'ergonomie,
comme par exemple les
barres de chargement, les décorations de liens (actifs, visités, suvolés), la
conception des formulaires
etc.
Le fait de ne pas prendre en compte ces éléments reviendrait à avoir une voiture
avec une clé de contact
difficile, voire impossible à trouver.
6- Modèles mentaux
On considère que les utilisateurs ont plus de facilité à apprendre de nouvelles
choses lorsqu'elles
ressemblent à quelque chose qu'ils connaissent déjà.
Par exemple, les pictogrammes employés dans les sites web comme la maison pour
organiser pour la
page d'accueil, la loupe pour la recherche, le dossier etc.
7

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
PARTIE3 - PRATIQUE DU DESIGN AVEC LE FRAMEWORK
BOOTSTRAP
I- PRESENTATION ET INSTALLATION DE B00TSTRAP
1- Définition d'un Framework
Un Framework est avant tout un cadre de travail permettant de faire profiter aux
développeurs d'une
arborescence et d'une architecture communes.
Le plus souvent cela se présente sous forme de dossier pour faciliter
l'organisation du code et simplifier
la maintenance dans le temps.
Un Framework peut aussi apporter un socde de fonctionnalités par défaut.
Qu'est-ce qu'on obtient concrètement lorsqu'on télécharge Bootstrap ? juste un
dossier contenant
quelques fichiers CSS et JS.
2- Présentation de Bootstrap
B
Bootstrap est une collection d'outils utile à la création du design de sites et
d'applications web..
Avec Bootstrap, vous gagnerez du temps et n'aurez plus besoin de vous prendre la
tếte sur un décalage
de quelques pixels sur votre page web. Tout le CSS a déjà été pensé pour vous.
Plus généralement, nous pouvons dire que cest un rassemblernent de différents
morceaux de code
utiles à la création d'une page web, aussi bien dans la mise en forme CSS que dans
l'animation et
l'interactivité du contenu JavaScript.
a- Naissance de Bootstrap
Avant Il'arrivée de Bootstrap, plusieurs bibliothèques existaient, ce qui menait à
des incohérences et à un
coût de maintenance élevẻ.
Cette plate-forme a été conçue par deux développeurs faisant partie de la mouvance
de développeurs
qui gravitent autour de Twitter, Mark Otto et Jacob Thornton et avait le nom de
Twitter Blueprint
en 2010.
Le premier déploiement à échelle réelle eut lieu lors de la première hackweek
organisée par Twitter.
En août 2011, Twitter place Bootstrap sous licence open source.
8

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
En février 2012, Bootstrap est le projet le plus populaire sur GitHub.
b- Avantages de Bootstrap
Les principaux avantages de Bootstrap sont:
Responsive : L'on obtient un site web responsive de base, ce qui n'est pas
négligeable, cela est
même indispensable de nos jours avec les smartphones et tablette !
Un beau site web:Il existe plusieurs thèmes pré faits de haute qualité et une
multitude de
classes CSS que l'on peut utiliser !
Y Un gain de temps: L'on ne s'occupe quasiment plus que d'écrire le code Html et
d'appeler des
classes CSS préexistantes. Il devient très rapide de monter la mise en forme d'une
page web.
Compatibilité : A priori, la présentation visuelle sera la même sur tous les
navigateurs.
Graphisme: Lorsqu'on développe en programmation, cela nous pernmet d'avoir une
apparence
de site sans écrire une seule ligne de CSS (à l'origine, Bootstrap a justement été
créė pour
simplifier le travail de présentation visuelle aux développeurs côté back). Cela
est une aubaine
pour les développeurs qui préfèrent la partie fonctionnelle à la partie graphique
Naturellement, cette liste n'est pas exhaustive, il y a d'autres avantages, comme
notamment l'intégration
de plugin jQuery, ce qui permet de gagner également du temps sur la partie Java
Script.
c- Inconvénients de Bootstrap
Il n'y a pas de réel inconvénient à travailler avec Bootstrap car il s'agit avant
tout d'un choix.
Certains vous diront que Bootstrap (Framework), jQuery (librairie) ne sont pas des
langages et viennent
ralentir les temps d'exécution du site au niveau des performances.
Meme s'il l'on minifie (coller le code sur 1 seule ligne) le code, ces personnes
n'ont pas forcément tort
mais par rapport à tout ce que cela apporte, il faut peser le pour et le contre,
cela dépend du projet et
du développeur.
Par exemple : est-on prêt à sacrifier un peu de performance contre un gain de temps
lors de la création
du code ?
L'apprentissage prend un peu de temps, mais ça, c'est comme tout le reste, il ne
s'agit donc pas d'un
inconvénient ! Apprendre c'est la vie du développeur !
d- Apport de Bootstrap dans le design d'un site web
Comme nous pouvons le constater, Bootstrap apporte plusieurs choses.
Avant tout: une feuille de style CSS contenant des propriétés et valeur de base
pour tous les éléments
HTML.
9

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Cela permet de bénéficier d'un graphisme standardisé pour tous les types d'éléments
habituels d'un site
à un autre : icônes, liens, Iistes, tableaux, formulaires, etc.
3- Les mises à jour Bootstrap
Bootstrap est régulièrement mis à jour, nous pourrons donc suivre les dernières
actualités sur GitHub:
[Link] ou sur le site officiel :
[Link]
4- Installer Bootstrap
Pour se servir de Bootstrap, il faut avant tout le télécharger.
Nous allons donc nous rendre sur le site officiel de Bootstrap pour le télėcharger.
a- Télécharger Bootstrap
Bootstrap
Geting started CSS
Components
iavascript Customnize
Expo Blbg
B
Bootstrap is the most popular HTML, CSS, and JS
framework for deyeloping responsive, mobile first
projects on the web.
Download Bootstrap
Ensuite, plusieurs choix s'offrent à nous:
Bootstrap
Sass
Source code
Compiled and minified CSS.
Source Less, JavaScript, and font
Suctstrap po teo fran Less to
Javascipt, and fonts No docs or
Sass for easy inclusion in Raits
files, along with Qur docs.
Orginat sOurce files are included
Compass or Sass-only projects
Requires a Less compiler and
SOme setup.
Downioad Bootstrap
Download Sass
Download source
10

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Download Bootstrap correspond à une première utilisation de base. Les fichiers CSS,
JS et les polices
sont minifiés. Aucun document source n'est inclus.
Download source permet d'avoir accès à toutes les sources de Bootstrap. Source
Less, JavaScript et
les fichiers police, avec les documents d'origine. LESS nécessite une configuration
et un compilateur.
Download Sass permet de .
Version de Bootstrap porté du Less au Sass pour une inclusion facile dans Rails,
Comnpass, ou Sass.
Cuverture de bootstrap-3.34-distzip
Vous avez choisid'ouvrir
[Link]
qui est un fichier de type: Archive WinRAR ZIP (255 Ko)
à partir de: https/[Link]
Que doit faire Firefox avec ce fichier ?
Quvrir avec WinRAR archiver (defaut)
o Enregistrer le fichier
Ioujours effectuer cette action pour ce bype de fichier
OK
Annuler
Lorsque Bootstrap est téléchargé, le dossier se présente sous cette forme:
Boot... bootstrap-4..,
dens bpotstrap-<L0dist
Organiser
Inclure dans la bibliothèque
Partager avec
Nom
Favoris
Mcdifie le
Type
Bureau
C55
13/04 2018 00:37
Doss
Emplacements ré
J. js
13104 2018 00 27
Doss
Tléchargements
& OneDrive
Bibliothèques
Documents
Images
Musique
R vidéos
2 élément(s)
11

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Un dossier css pour la mise en forme.
Un dossier js pour l'animation / interactivité.
Un dossier fonts pour les polices / icones.
[Link]
[Link]
[Link]
[Link]
[Link]
bootstrap-theme. [Link]
fonts
[Link]
el [Link]
A [Link]
[Link]
glyphicons-halflings-regular.woff2
bcotstrapjs
3 [Link]
Jnpmjs
[Link] représente le fichier principal de Bootstrap avec la déclaration de
toutes les
classes CSS
[Link] ce fichier permet de retrouver la position d'une ligne de code
dans la
version normale à partir du code minifié.
[Link] Même contenu que le fichier [Link] de manière minifiée
(tout le code
sur une ligne pour gagner en performances).
[Link] représente le fichier de Bootstrap permettant de créer des
thèmes
spécifiques.
V [Link] ce fichier permet de retroOuver la position d'une ligne
de code dans
la version normale à partir du code minifié.
[Link] Même contenu que le fichier [Link] de manière
minifiée (tout le code sur une ligne pour gagner en performances).
✔ [Link] icône au format EOT.
✔ [Link] icône au format SVG.
12

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Y [Link] icÔne au format TTF.
/ [Link] icône au format WOFF.
✔ Glyphicons-halflings-regular.woff2 icône au format WOFF.
/ [Link] contient le code javascript de Bootstrap.
[Link] Même contenu que le fichier Bootstrapjs de manière minifié (tout le
code
sur une ligne pour gagner en performances).
Npmjs est un fichier généré automatiquement pouvant être utile dans I'environnement
CommonJS Format compilé de Bootstrap.
Attention
Si des changements doivent se faire, il faut donc créer une feuille de style a part
pour ne pas modifier la
feuille de style CSS d'origine de Bootstrap.
5- Préparer son site avec Bootstrap
Pour créer une page web avec Bootstrap I'on n'est pas obligé de garder le nom
d'origine, il est possible
de renommer le dossier /Bootstrap-3.3.4-dist/ en /monsite/.
Ensuite, l'on peut créer la page web à la racine, par exemple : [Link] (index
correspond au nom de
la page d'accueil).
CSS
fonts
[Link]
13

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Voici le code Html à prévoir pour une page d'accueil :
<! Doctype html>
<html>
<head>
<meta charset="ut f-8" >
<title>Mon Site avec Bootstrap</title>
<lin rel="stylesheet" href- "css/[Link]">
<link rel="stylesheet " href="css/style . css">
<meta name="viewport" content="width=device-width, initial-scale-1">
</head>
<body>
</body>
</html>
La ligne <link
rel=!
stylesheet!
href=' ' css/[Link]> permet de relier la
feuille de style de Bootstrap à la page web.
Nous ajoutons également un lien vers une feuille de style CSS style . css pour
pouvoir agir å tout
moment sur le code CSS.
I sera donc important de créer le fichier correspondant dans le dossier /css/ à
côté des fichiers de
Bootstrap, tout comme nous l'aurions fait si nous n'étions pas accompagnés de
Bootstrap !
Concernant la ligne viewport, nous demandons que l'affichage occupe tout I'espace
disponible avec
une taille de 1, autrement dit sans zoom. L'attribut «viewport» permet de préciser
au navigateur quelle
taille il doit prendre pour afficher une page web.
width=device-width permet de régler la largeur de la page web sur la largeur de la
fenêtre de
l'appareil qui consulte actuellement la page.
initial -scale-1 permet de régler le niveau de zoom sur 100 % (par défaut).
14

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Si nous souhaitons incorporer la partie JavaScript, nous aurons besoin de quelques
lignes
complémentaires:
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel= "stylesheet" href="css /[Link]">
<link rel="stylesheet" href="css/style. css">
<script src="http: /lcode .jquery . com/j query-1. [Link]"></script>
<script src="js/[Link] "></script>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Nous devons donc forcément intégrer la librairie Jquery avant le fichier
[Link] (car [Link] se
sert de JQUERY) sinon il se produira une erreur exception dans votre console
JavaScript.
Nous pouvons déclarer des balises et éléments Html comme d'habitude. Mais
maintenant que nous
sommes reliés à Bootstrap, l'idéal serait d'appeler des classes CSS propres à
Bootstrap.
Pour cela, la documentation officielle de Bootstrap nous le signifie de manière
précise !
Bootstap
JavSctt
Components
QHipChat
Chat fe taains
Over a dczen eosable conponernts buit to provide
iconography dropdowna, input groups, navigation,
Glyphicons
Available glyphs
g
230hcen
Glpcahef
A-pt,
seCh
15

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Effectuons un test avec les icônes:
[Link]
<!DOCtype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet " hre f="css /[Link]">
<link rel="stylesheet" hre f="css/style . css">
<script src="[Link] . j query. com/[Link]"></script>
<script src="js/[Link]"></script>
<meta name="viewport" content="width=device-width, initial-scale-l">
</head>
<body>
<span class="glyphicon glyphicon-star"></span>
</body>
</html>
Le nom de la classe glyphicon glyphicon-star est tiré de la documentation
officielle de Boostsrap
Le Résultat
Le résultat avec Bootstrap nous donne une image en forme d'étoile sans
I'utilisation de la balise <img
Src="... ">
Si nous avons pu utiliser une classe CSS, nous pourrons utiliser toutes les
autres !
Essayez d'autres icônes avec les classes CSS glyphicons.
16

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
II - SYSTEME DE GRILLE
1- Le système de grille en 12 colonnes
Bootstrap repose sur un système de grille à 12 colonnes. C'est l'un de ses
fondements et on ne peut pas
prétendre maitriser Bootstrap sans connaitre ce concept de base.
Nous allons avoir besoin de faire des tests pour l'expliquer. Créons à la racine de
notre installation
Bootstrap, un fichier nommé [Link].
Voici le code basique à conserver tout le long de notre exemple :
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8 " >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/Bootstrap. css">
<link rel="stylesheet" href="css/style . css">
<meta nane="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Nous préparons quelques bordures dans notre fichier css/[Link] pour plus tard
voir nos zones
apparaitre :
[Link]
.container ( border : lpx solid; )
.bordureRouge{ border: 3px solid red; padding: 10px; )
.bordureVerte ( border: 3px solid green; padding : 10px; )
. bordureBleue{ border: 3px solid blue; padding: 10pX; )
.bordure Jaune ( border: 3px solid yellow; padding: 10px; )
. bordureOrange( border: 3px solid orange ; padding: 10px; }
C'est dans notre fichier personnel [Link] que nouS mettrons notre propre code,
nous ne modifierons
pas le fichier [Link], cela ne se fait pas dans les usages et d'autre part
si l'on devait mettre à jour
le fichier, cela ferait sauter nos modifications!
Bootstrap est donc avant tout un système de grille comportant 12 colonnes.
17

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
En général on centre son contenu sur la page web, cela se fait via la classe CSS
[Link]. Une
fois à l'intérieur de cette zone .container nous disposons de 12 emplacements.
Pour se l'imaginer, voici ce que cela donne en théorie :
2
6
L
12
Il faut donc voir cette grille comme des emplacements disponibles sur notre page
web !
C'est bien une grlle, et nous pouvons prendre de la place à l'intérieur d'elle:
12
7
11
10
Pour occuper la place 1 dans cette grille, nous pourrons utiliser la classe CSs
(prédéfinie par Bootstrap)
.col-md- 1
Observons le resultat en pratique avec le code:
[Link]
<! Doctype html >
<html>
<head>
<meta charset="ut f-8" >
<title >Mon Site avec Bootstrap</title>
<link rel="stylesheet" hre f="css /Bootstrap. css">
<link rel="stylesheet" href= "css/style . css ">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
18

3TSZ IDA WEBDESIGN

V2017-2018
PARTIE1- PRESENTATION DU WEBDESIGN
1- Qu'est-ce que le Webdesign
Composé des mots "web" et "design", signifiant littéralement "dessiner pour la
toile", cette discipline
désigne la conception de l'interface web en tenant compte de ses contraintes
spécifiques en matièere
d'ergonomie et d'accessibilité. Il vise à transmettre un message sur le web en
répondant à un objectif
précis.
a- L'esthétisme et les goûts personnels
Le jugenment d'un site internet ne saurait être réduit à un "'aime, c'est beau" ou
"je déteste, c'est trop
moche". Il est de droit d'apprécier la police Comic Sans MS et de fuir le bleu
canard, mais le "sens
artistique" et les goûts personnels ne doivent jamais influencer l'aspect de notre
site ; le contenant ne
doit pas masquer le contenu.
Le webdesign a pour fonction d'harmoniser les couleurs, les textes, l'iconographie
dans un seul but:
améliorer l'expérience utilisateur tout en répondant à votre objectif.
b- Etapes de conception d'un design Web
Il faut tout d'abord se fixer un objectif (que doit trouver un client sur votre
site ?) et par la suite
sinterroger sur sa fonction (acquisition de nouveaux clients, promotion d'un
service, information sur
l'entreprise, notoriété, vente de produits ...). Le webdesign les traduira en
structurant:
✔ L'architecture globale,
✔ L'organisation des pages,
/
L'arborescence
La navigation du site.
Cette étude préalable est fondamentale pour la diffusion et la compréhension d'un
message sur un site
et pour déterminer l'ordre dans lequel les éléments d'un site seront hiérarchisés.
Ce qui vaut pour un
site n'aura aucun intérêt pour un autre, II est impératif de s'interroger sur
l'accessi bilité d'un formulaire
ou l'utilité d'un tmoignage, sur la pertinence des call to action.
N'oubliez pas que le webdesign, c'est aussi du marketing, C'est votre produit et
son fonctionnement.
Le webdesign ne se résume pas à l'habillage graphique d'un site, même si son impact
est déterminant
pour votre image. Il doit véhiculer les notions positives et attractives de
l'entreprise mais surtout donner
confiance à ses visiteurs. Un site doit devenir un outil de communication
percutant, il doit attirer
l'attention, distinguer de la concurrence et ne comporter aucune limite en matière
de visibilité. Du
desktop à la tablette, en passant par le mobile, il doit être consultable sur tous
les supports.
2- L'importance du responsive web design
Parler de responsive design aujourd'hui ne vous fera plus passer pour un geek venu
d'ailleurs, pour un
individu ayant intégré que cette approche de conception web destinée à transmettre
le même message
sur tous les supports est indispensable.
Est-elle devenue incontournable dans un monde de plus en plus connecté et quels
sont les enjeux ?
1

v2017-2018
<body>
<div class="container">
<div clasg=*"row">
<div clasg="col-md- 1'">
</div>
</div>
</div>
</body>
</html>
Si l'on effectue des tests, l'idéal serait d'ajouter une classe CSS supplémentaire
pour personnaliser
l'affichage, nous vous invitons à donner une couleur de fond ou mieux: une couleur
de bordure.
Exemple ci-dessous:
[Link]
<! Doctype html>
<html>
<head>
Cme ta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css /Bootstrap. css">
<link rel="stylesheet" href="css/style . css">
<meta name= "viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col -md- 1 bordure Rouge ">
</div>
</div>
</div
</body>
</html>
19

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Décryptons ce code :
La classe container
La classe .container prédéfinie dans la feuille de style [Link] (à laquelle
nous sommes
reliés) permet d'englober le reste de notre code et de le centrer sur la page web.
La classe row
La classe .row predefinie dans la feuille de style Bootstrap. css (à laquelle nous
sommes relies)
permet de prendre une ligne dans notre grille:
co
col
col
col
col
2
co
col
3
col
5
6
7
8
9
10
12
row
row
La classe col : col-md-1
col signifie colonne. Ce mot sera invariable dans Bootstrap
nd signifie middle.
Les lettres correspondent au comportement des emplacements. Nous le verrons un peu
plus en détail
plus bas dans ce cours. Ce mot variable pourra prendre les valeurs suivantes : xs,
sm, md, lg
1 veut dire 1 emplacement
Les chiffres expriment le nombre d'emplacements. Nous le verrons également un peu
plus en détail plus
bas dans ce cOurs.
Cette partie variable pourra prendre les valeurs suivantes: 1, 2, 3, 4, 5, 6, 7, 8,
9, 10, 11, 12
Si nous avions voulu prendre 2 emplacements, nous l'aurions précisé de la sorte:
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf- 8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/Bootstrap . css">
<link rel="stylesheet" href="css/style .css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class= "container ">
<div class="row">
20
GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
<div class=" col -md-2 bordureRouge">
</div>
</divs
</div>
</body>
</html>
col-m-2 correspond donc à 2 emplacements
Résultat
3
6
10
11
12
Exercice 1
Pour l'exemple, nous allons essayer de reproduire cette grille:
1
5
6
7
10
11
12
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet " href= "css/Bootstrap,css">
<link rel="'stylesheet" href='"css/style . css">
<meta name-"viewpOrt" content="width=device-width, initial-scale-1y
</head>
<body>
<div class="container">
<div class="row ">
<div class="col-md-10 col-md-offset-1 bordureRouge ">
</div>
21

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
</div>
<div class="row">
<div class=" co l-md-6 col-md-offset-3
bordureVerte ">...</div>
</div>
</div>
</body>
</html>
Résultat
Flefll
CQaecngecner
G Desciver" Cookaes CSS Fomulaires images @ Intos otrerstnteurerentre Oulis Code
Opicns
Quelques explications:
lère ligne
La classe .row permet de créer une nouvelle ligne.
La classe .col-md-10 permet de créer un nouvel espace qui prend 10 places (sur les
12 possibl es).
La classe .col-nd-offset-l permet de créer une marge à gauche d'l place.
Nous avons donc une zone s'étalant sur 10 emplacements centrs avec 1 emplacement à
gauche et 1 à
droite de marge (ce qui fait bien 12 au total).
Nous utilisons md pour dire middle, mais nous aurions également pu utiliser xs pour
quelque chose de
plus petit.
La classe .bordure Rouge permet de simplement de voir apparaitre notre zone à
l'écran entourée de
rouge.
2ème ligne
Ensuite, nous réutilisons la classe .row pour créer une nouvelle ligne en dessous.
La classe .col-md- 6 permet de créer un nouvel espace qui prend 6 places (sur les
12 possibles).
La classe .col-nd-of fset-3 permet de créer une marge à gauche de 3 places.
Nous avons donc une zone s'étalant sur 6 emplacements centrés avec 3 emplacements à
gauche et 3à
droite de marge (ce qui fait bien 12 au total).
La classe .bordureVerte permet de simplement de voir apparaitre notre zone à
l'écran entouré de
vert.
22

v2017-2018
Exercice 2
Allons plus loin avec ce schéma:
2
6
10
11
12
SI vous pensez avoir compris le principe et que souhaitez faire la suite en
exercice pour Vous entrainer,
à vous de coder ! vous n'êtes pas obligé de regarder le code ci-dessous :
[Link]
<! Doctype html>
<html>
<head>
<imeta charset= "utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/ Bootstrap. css'">
<link rel="stylesheet" href="css/style . css">
<meta name"viewport" content="width=device-width, initial-scale=l ">
</head>
<body>
<div class="container">
<div class="row"> <!-- exemple - ligne 1 -->
<div class="col-md-10 col-md-offset-1
bordureRouge" ></div>
</div>
<div class="row"> <!-- exemple - ligne 2 -->
<div class="col-md-6 col-md-offset-3 bordureVerte"></div>
</div>
<div class="row"> <!-- exercice ligne 3 -->
<div class="col-md-2 col-md-offset-5 bordureBleue"></div>
</div>
<div class= "row"> <!- exercice - ligne 4 -->
23

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
<div class="col-md-3 bordure Rouge"></div>
<div class=" col-md-3 bordureVerte"></div>
<div class="col-md-3 bordure Jaune"></div>
<div class="col -md-3 bordureQrange"></div>
</div>
<div class=" row"> <-- exercice - ligne 5 -->
<div class="col-md- 12 bordureBleue"></div>
</div>
<div class=" row"> <!-- exercice - ligne 6->
<div class="col-md-5 col-md-offset-2 bordure Rouge"></div>
<div class="col-md-3 col-md-offset-2 bordureVerte"></div>
</div
</div>
</body>
</html>
Le Résultut
3Sesactver Cooies CSS Fornulzires Image Intor DiversErtourerFenétreQueisCode i
Options
Quelques explications :
3ème ligne
La classe .row permet de créer une nouvelle ligne.
La classe . col -md-2 permet de créer un nouvel espace qui prend 2 places (sur les
12 possibles).
La classe . col -md-offset-5 permet de créer une marge à gauche de 5 places.
Nous avons donc une zone s'étalant sur 2 emplacements centrés avec 5 emplacements à
gauche et 5 à
droite de marge (ce qui fait bien 12 au total).
La classe .bordureBleue permet de simplement de voir apparaitre notre zone à
l'écran en tourée de
bleu.
4ème ligne
La classe .row permet de créer une nouvelle ligne.
La classe . col -md-3 permet de créer un nouvel espace qui prend 3 places (sur les
12 possibles).
24

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Nous avons donc 4 zones s'étalant sur 3 emplacements chacun et sans aucune marge
entre eux (ce qui
fait bien 12 au total).
Les bordures permettent simplement de voir apparaitre nos zones à l'écran entourées
de couleur.
Sème ligne
La classe .row permet de créer une nouvelle ligne.
La classecol-md- 12 permet de créer un nouvel espace qui prend 12 places (sur les
12 possibles).
Nous avons donc une seule zone s'étalant sur 12 emplacements centrés et sans aucune
marge entre eux
(ce qui fait bien 12 au total).
La clasSe .bordureBleue permet de simplement de voir apparaitre notre zone à
l'écran entOurée de
bleu.
6ème ligne
La classe .row permet de créer une nouvelle ligne.
La classe .col-nd-5 permet de créer un nouvel espace qui prend 5 places (sur les 12
possibles).
La classe .col-md-3 permet de créer un nouvel espace qui prend 3 places (sur les 12
possibles).
La classe .col-md-off set-2 permet de créer une marge à gauche de 2 places.
Nous avons donc 2 zones s'étalant respectivemnent sur 5 et 3 emplacements (ce qui
fait 8 places) et 2
emplacements de marge chacun (x2) (ce qui fait bien 12 au total).
Les bordures permettent simplement de voir apparaitre nos zones à l'écran entourées
de couleur.
Plus besoin de float: left; pour mettre 2 zones côte à côte dans Bootstrap!C'est
plus simple et
aussi plus souple.
Résumé
Pour obtenir plusieurs lignes, nous faisons appel plusieurs fois à la classe <div
class="row">.
Pour "passer" des colonnes, nous utilisons la classe . offset.
Revenons tout de même sur un point: les tailles et comportements d'emplacements (à
ne pas confondre
avec le nombre d'empla cements !).
25

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Si nous avions voulu prévoir un emplacement le plus petit possible, nous aurions pu
le préciser de la
Sorte:
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/Bootstrap. css">
<link rel="stylesheet" hre f="css/style . css">
<meta name="viewport" content="width=device-width, initial -sCale=1"
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1 bordure Rouge '">
</div>
</div>
</div>
</body>
</html>
D'autres tailles d'emplacements sont possibles : col-xs-* ou col-sm-* ou col-nd- *
ou col-lg-*,
Question: « Est-ce le chiffre 1 ou les lettres md qui gère la taille de
l'emplacement ? »
Réponse: le nombre d'emplacements est géré par le chiffre tandis que la taille d'un
emplacement et
son élasticité sont gérées par les lettres :
XS, sm, mnd Ou lg.
xs = extra small screens (mobile - écran petit)
sm = small screens (tablette - écran réduit)
md = medium screens (ordinateur portable - écran moyen)
V lg = large screens (ordinateur de bureau - grand écran)
26

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Pour le comprendre, voici un tableau récapitulatif avec les 4 tailles majeures
d'écrans et de résolutions
Écran
Écran minimum Écran réduit
Écran moyen
Grand Écran
llustration
Type
SmartPhone
Tablette
Ordinateur Portable
Ordinateur de bureau
Classe CSS
col-xs-*
col-sm-*
col-md-*
Bootstrap
col-lg-*
>* 768 px
Résolution d'écran
>= 992 px
< 768 px
1200 px
< 992 px
< 1200 px
Comme nous le constatons, Bootstrap a prévu des classes différentes en fonction des
tailles d'écrans.
Question : « Que choisir entre col -xs-*, col-lg-* et les autres possibilités ? et
comment nous y
retrouver ? »>
Réponse : Tout dépend de ce que nous désirons faire, pour cela il nous faut un cas
d'étude!
Exemple : nous avons 2 zones que nous souhaitons conserver côte à côte lors de la
lecture sur
smartphone. I faudra donc choisir col-xs-*
Zone col-xs- * sur SmartPhone Zone col-lg-* sur SmartPhone
Zone I Zone 2
Zone 1
Zone 2
Si vous choisissez col -lg-*, il est certain que les zones auraient fini par
s'empiler l'une en dessous
de l'autre lors de l'affichage sur un petit écran.
27

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Pour résumé:
c0l-Xs-* :les 2 Zones resteront côte à côte sur un petit écran
col-lg-* :les 2 zones s'empileront l'une en dessous de l'autre sur un petit écran.
Pour info et si vous souhaitez tester ce comportement, voici le code
correspondant :
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/style . css">
<meta name="viewport" content=" width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 bordureRouge">
</div>
<div class=""col-xs-6 bordureVerte">... </div>
</div>
<div class="row">
<div class=" col-lg-6 bordureBl eue"> ... </div>
<div class="col-lg-6 bordureOrange "> ... </div>
</div>
</div>
</body>
</html>
II ne vous reste plus qu'à redimensionner et recadrer la fenêtre pour faire des
tests.
Dans ce code, sur la lère ligne nous prenons 6 emplacements 2 fois en XS, ce qui
fait bien un total de
12 places au total (la capacité maximum de notre grille). Idem concernant la
seconde ligne en LG.
28

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
2- Différence entre col-xs-*, col-sm-*, col-md-*, col-lg-*
les tailles largeur et comportement d'emplacement sont exprimées en lettre: xs, Sn,
mdrg
Le nombre d'emplacements sur la grille est exprimé en chiffre :1, 2, 3, 4, 5, 6,
7,8, 9, 10, 11, 12.
Pour se donner un ordre d'idée, voici ce que cela donne s'il r n'y a qu'un seul
emplacement sur une
seule ligne:
En résolution d'écran >= 1200px :
col-xs-1 :8.33%
col-sm-1:8.33%
col-md-1 :8.33%
col-lg-1 :8.33%
col
2
col
col
12
s-8J36
md-8.33
En résolution d'écran >= 992 px et < 1200 px:
col-xs-1 :8.33%
col-sm-1 :8.33%
col-nd-l:8.33%
col-lg-l :100%
12
tIn-8,3393
nd 1,33
29

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
En résolution d'écran >= 768 px et < 992 px:
col-xs-l:8.33%
col-sm-1:8.33%
col-md-1:100%
col-lg-l: 100%
col
col
col
17
su833%
-400 54
En résolution d'écran < 768 px:
col-xs-1:8.33%
col-sm-1:100%
col-md-1:100%
col-lg-1 : 100%
col
Ces
coi
col
Co
tol
col
col
col
10
12
KS-8.33%
Sm- 100 %
Ind 100 $5
Question : A quelle taille correspondent exactement les chiffres et le nombre
d'emplacements ?
Tableau des pourcentage % par nombre d'emplacement.
6
7
11
5
9
10
4
12
3
2
emplacenernt
taille en largeur
8.33% 16,66% 25%33,33 %41,66 % 50 % 58,33 %66,66 %75 % 83,33 %91,66 % 100 %
(width)
30

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Si vous souhaitez faire des tests, voici le code correspondant :
[Link]
<!Doctype html>
<html>
<head>
<meta charset="utf-8 " >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/Bootstrap .css">
<link rel="stylesheet" href="css/style. css">
Cmeta name="yiewport"
content="width=device-width, initial-scale-1">
</head>
<body>
<div class=" container">
<div class= row">
<div class="col-xs-1 bordure Rouge "> ... </div>
<div class="col-sm-1 bordureVerte">... </div>
<div class= "col-md-1 bordure Bleue">... </div>
<div class="col-lg-1 bordureOrange"> ... </div>
</div>
</div>
</body>
</html>
Redimensionner la fenêtre pour voir le comportement de chacune des zones
Nous n'intégrons plus en pixels (px) mais en % le plus possible !avec ou sans
Bootstrap.
Bon à savoir
Noter que nous ne réglons pas forcément la hauteur (height) car cela dépend du
contenu à l'intérieur
de chaque zone.
31

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
3- Container centré ou container pleine largeur ?
La classe .container et la classe .container-fluid
La classe .container permet d'englober la page (ainsi gue le reste du code) et de
le centrer sur la
page, dans une taille fixe qui s'adapte en fonction de la résolution d'écran.
La classe conta1ner-fluid permet d'enalober la page (ainsi que le reste du code)
sur toute la
largeur de la page.
Écran
Écran minimum
Écran réduit
Grand Écran
Écran moyen
llustration
Type
SmartPhone
Tablette
Ordinateur de bureau
Ordinateur Portable
768 px
992 px
Résolution d'écran
<768 px
> 1200 px
< 992 px
<1200 px
Classe CSS .container
100 % de la taille restante
970 px
750 px
1170 px
|Classe CSS .con tainer-fluid
100 %
100 %
100 %
100 %
Voici un exemple avec la classe .container-fluid:
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/ [Link]">
<link rel="stylesheet " href="css/style. css">
<meta name="viewport" content="width=device-width, initial -scale=l">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 bordureRouqe">... </div>
<div class="col-xs-6 bordureVerte "> ... </div>
32

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
</div>
<div class"row">
<div class="col-lg-6 bordureBleue "> ... </div>
<div class="col-lg-6 bordureOrange"> ... </div>
</div>
</div>
</body>
</html>
Dactae Cockis SS L Forrmulas mages Infor Divers Entourg Fonctrg R Outils Code
Opnonge
Résultat
Avec l'utilisation de la classe [Link]-fluid, les emplacements prennent
toute la largeur de la page
web.
4- Combinaison du MD et XS
[Link]
<! Doctype html >
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" hre f="css/ [Link]">
<link rel="stylesheet" href="css/style . css ">
<meta name= "viewport" content="width=device-width, initial-sca le=1 ">
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-xs-6 col- sm-4 bordureRouge ">
Colonne 1
</div>
<diy class= "col-xs-6 col-sm-8 bordureVerte ">
Colonne 2
</div>
</div>
</div> </body></html>
33

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
La colonne 1 prendra 1/2 de l'écran pour les écrans mobiles (la moitié soit 6
places), et 1/3 de l'écran
pour les tablettes (un tiers soit 4 places).
La colonne 2 prendra 1/2 de l'écran pour les écrans mobiles (a moitié soit 6
places), et 2/3 de l'écran
pour les tablettes (deux tiers soit 8 places).
V Sur un écran mobile (smartphone), taille inférieure à < 768px, ce sont les
classes xs qui seront
prises en compte.
Sur un écran type tablette, taille supérieure à >= 768 px et inférieure à < 992 px,
ce sont les
classes sm qui seront prises en compte.
Sur un écran type ordinateur portable, taille supérieure ou égal à >= 992 px et
interieure a <
1200 pX, Ce sont les classes md qui seront prises en compte.
Sur un écran type ordinateur de bureau, taille supérieure ou égal à >= 1200 px, ce
sont les
classes lg qui seront prises en compte.
5- Optimisation du design pour un affichage adéquate
Avec Bootstrap il est facilement possible de donner des règles d'affichage
différentes en fonction de la
résolution utilisée.
Exemple / Cas d'etude: Imaginons que sur ma page web, je souhaite afficher une
zoned'intormations
complémentaires sur ordinateur et non pas sur mobile (car je dois garder uniquement
le contenu
principal et faire des choix d'affichage par manque de place).
Pour cela, nous allons pouvoir nous servir des classes visible-* hidden-*
Nous pouvons également demander un nombre d'emplacements selon la taille de l'écran
et la résolution
utilisée.
[Link]
<!Doctype html>
<html>
<head>
<meta charset="ut f-8 " >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet " href= "css/ [Link]">
<link rel="stylesheet " href="css/style. css">
<Ineta name="yiewport" content="width=device-width, initial -
scale-1 ">
</head>
<body>
<div class"container ">
<div class= "row">
<div class="col -xs-6 col - sm-5 col-md-5 col-lg-4
bordureRouge ">
Zone Gauche
34

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
</div>
<div class="col-xs-6 col-sm-5 col-nd-5 col-lg-4
bordureVerte ">
Zone Milieu
</div>
<div class="hidden-xs col-sm-2 col-md-2 col-lg-4
bordureOrange ">
Zone Droite
</div>
</div
</div>
</body>
</html>
Résultat en taille grand écran (maximum, ordinateur de bureau) - LG:
Zunt Gauche
Zone MleU
Zone Drate
La zone de gauche (rouge), celle du milieu (verte) et celle de droite (orange)
prenne toutes 4 places
chacune.
En taille écran moyen (moyen, ordinateur portable) - MD:
Zone GIcle
Zue Miieu
Zurne DIike
La zone de gauche (rouge) prend 5 places (+1), la zone du milieu (verte) prend5
places (+1), et la zone
de droite (orange) prend 2 places (-2).
En taille écran réduit (réduit, tablette) - SM:
Zone Gauche
Zone Milieu
Zone Droite
La zone de gauche (rouge) prend toujours 5 places (-), la zone du milieu (verte)
prend toujours 5 places
(-), et la zone de droite (orange) prend toujours 2 places (-2).
35

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
En taille petit écran (petit, smartphone) - XS:
Zone Gauche
Zone Milieu
La zone de gauche (rouge) prend 6 places (+l), la zone du milieu (verte) prend 6
places (+1), et la zone
de droite (orange) ne s'affiche plus du tout avec hi dden xs donc 0 place (-2).
6- Décalage des emplacements et ordre des colonnes
Avec l'utilisation des float, nous pouvons démarrer un flux de la gauche ou de la
droite.
Cela est un peu différent dans Bootstrap, nous pouvons créer des décalages.
Pour s'écarter de la gauche, nous utiliserons la classe : col-lg-push-*
Pour s'écarter de la droite, nous utiliserons la classe:col-lg-pull-*
Exemple :
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/ [Link]">
<link rel="stylesheet" href="css/style . css">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
</head>
<body>
<div class="container ">
<div class="row">
<div class=" col -md-9 col-md-push-3 bordure Rouge'">, col-md-
9 .col-md-push-3</div
<div class="col-md-3 col-md-pull-9 bordureVerte ">. col-md-
3 .col-md-pull-9</div>
</div>
</div>
</body>
</html>
7- La gestion des images en Bootstrap
Bootstrap inclut une classe img-responsive qui permet aux images de suivre la
taille de leur
Conteneur parent.
36

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Exemple:
[Link]
<! Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/[Link]'">
<link rel="stylesheet" href="css/style .css">
<meta name="viewport" content="width=device-width, initial-Scale-1">
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-5 bordureROuge">
<img src="[Link]" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
Et voici le code prédéfinit dans Bootstrap correspondant:
[Link]
. ing-responsive,
thumbna il > img,
.thumbnail a> img,
.carousel-inner > .item > img,
.carousel-inner >
.item > a > img {
display: block;
max-width: 100%;
height: auto;
En appliquant cette classe, cela permet donc à chaque image de se recadrer
(redimensionner)
automatiquement à une taille de 100% du conteneur dans lesquels elles seront
contenues.
Résultat Pour une fenêtre ayant 300 pixels de largeur et 180 pixels de hauteur :
Pour une fenêtre ayant 200 pixels de largeur et 80 pixels de hauteur :
L'image se redimensionnera dans tous les cas aux bonnes dimensions avec
I'utilisation de la classe img-
responsive.
37

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Voici le code à étudier:
[Link]
<! Doctype html>
<html>
<head>
<meta charset="ut f-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css /Bootstrap. CSS">
<link rel=" stylesheet" href="css/style .css">
<meta name="viewport" content=" widthdevice-width,
initial-scale=1">
</head>
<body>
<div class="container">
<div class="row"> <! -- exercice - ligne 6 -->
<div class="col-md-6 col-md-offset-2 bordureRouge"></ div>
<div class="col-md-3 col -md-of fset-2 bordureVerte"></div>
</div>
</div>
</body>
</h tml>
Prenons le cas suivant :
Nous souhaitons mettre les zones côte à côte comme ceci:
D'après-vous, pourquoi les zones ne sont pas côte à côte ? pourtant nous n'avons
pas rappeler de <div
class="row" >, qu'est-ce qui ne fonctionne pas
?
Et bien nous avons mis un emplacement de 6 places, avec un emplacement de 3 places
et 2 place de
marge de chaque côté (soit 4 places).
<div class="row"> <!-- exercice - ligne 6 -->
<div class="col-md-6 Col -md-offset-2 bordureRouge"></diV>
<div class="col-md-3 col -md-offset-2 bordureVerte"></div>
</div>
Tout cela fait 13 emplacements au total, du coup le cadre vert passe à la ligne car
il y est contraint !
informations
Attention à ne pas dépasser le nombre d'emplacements disponibles porté à 12 dans le
système de
Bootstrap!
8- Construction du zoning d'une page web
Maintenant que nous avons appris tout cela, l'objectif est quand même de pouvoir
s'en resservir à bonne
utilisation !
38

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Pour cela, je vous propose de construire le design d'une page web dans une grille
Bootstrap, suivons ce
schéma standard:
col
col
Co
col
col
Co
co
2
col
col
6
col
7
col
heador- 1 header-1
row
header- 2 heador- 2 header- 2 header2 heoder-2 header 2
12
header3 header-3
hoacer-1
header-1
header- 2 header- 2 header - 2 header-2
header - 2 header - 2
header3 header- 3
nav
nav
nav
nay
nav
nav
nav
nav
na
section -1 section -1
na
row
nav
nav
section- 2 section- 2 section- 2 sectlon- 2 section- 2secti on- 2
section3 section -3
section 1 section-1
row
section -2 section 2 sectian- 2section -2| section-2 section- 2
section - 3 sectibn -3
section-1 section-1
row
section- 2 section- 2 section - 2section- 2 sectlon-2 section- 2
section 3 section -3
Setior-1 seCtlon-1
row
sectlon- 2 section- 2 section- 2sectlon-2 sectlon-2 sectuon-2
Sectlon 3 sectlon -3
section -1 section- 1
row
sectlon-2 setion- 2section 2 section - 2 section2
section -2
section- 3 section -3
section- 1 5ection 1
row
section-2 section 2 section 2 section 2 sectlon-2section2
section 3 section- 3
section- 1
row
section-1
sectlon- 2 sectlon- 2
sectlon -2 sectlon- 2 section 2
soction 2
section-3
SRction -3
Section - 1
row
SRction -1
section- 2 section - 2 section - 2 sectlan - 2 sectlan-2
iection -2
section3 sAction -3
footer-1
rOw
footer- 1
footer-2
footer-2
footer-2
footer- 2
footer- 2
footer- 2
footer-3
footer- 3
footer-1
rov
footer-l
footer-2
footer- 2
footer-2
footer- 2
footer-
footer- 2
footer-3
footer-3
Comme vous pouvez le constater, nous pouvons apercevoir:
3 zones en
haut de page (balise header).
1 zone de
menu pour la navigation (balise nav).
3 zones de
contenu (balise section).
3 zones de footer (balise footer).
Exercice :
A vous de jouer pour construire cela sur la grille !
Indice: PS: Bien entendu, pour plus de personnalisation, nous pouvons créer une
grille dans une grille
39

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Correction :
[Link]
<! Doctype html>
<html
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/[Link]">
<link rel="gtylesheet" href= "css/[Link]">
<meta name=viewport" content="width=device-width, initial -scale=1">
</head>
<body>
<div class" container">
<div class="row"'>
<header class="col-md-12 bordureRouge">
<div class"col-md-2 bordureRouge header-1"> header
- 1 </div>
<div class="col -md- 6 col-md-offset-l bordureRouge
header-2 "> header -2 </div>
<div class= " col -md-2 col-md-offset-1 bordureRouge
header-3"> header - 3 </div>
</header>
</div>
<div class="row">
<nav class="col-md- 12 bordureOrange nav">
nav
</nav>
</div>
<div class="row">
<section class="col-md- 12 bordureBleue ">
<div class="col-md-2 bordureBleue section-1 ">
section - l </diV>
<div class="col-md- 6 col-md-offset-1 bordureBleue
section-2"> section - 2 </div>
<div class=" col -md-2 col-md-offset-1 bordureBleue
section-3"> section - 3 </div>
</section>
</div>
<div class=" row">
Kfooter class="col-nd- 12 bordureVerte">
<div class="col-md-2 bordureVerte footer-1 "> footer
- 1 </div>
<div class=" col-md- 6 col -md-offset-1 bordureVerte
footer-2 "> footer - 2 </div
<div class="col-md-2 col -md-offset-1 bordureVe r te
footer-3"> footer - 3 </div>
</footer>
</div>
</div>
</body></html>
La correction CSS:
[Link]
.container ( border: 3px solid; )
.bordureRouge( border: 3px solid red; padding: 10px; )
.bordure Ve rte ( border: 3px solid
green; padding: 10px; )
.bordureBleue( border: 3px solid
blue; padding: 10pxX; )
.bordureJaune( border: 3px solid
yellow; padding: 10pxj )
.bordureOrange( border : 3px solid
orange ; padding: 10px; )
. header-1, .header-2, .header-3( min-height : 100px;)
. section-1, . section-2, .section-3| min-height: 400px: )
40

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Résultat
hende
header
hender1
sK o
secliun-2
section3
fooler 1
footer - 2
fooler 3
41

IDA WEBDESIGN
v2017-2018
III-TRAVAUX PRATIQUES
1- Mettre en place le design d'un site web avec Bootstrap
Pour créer un site web avec Bootstrap, nous aurons besoin de garder à disposition
les classes CSS
prédéfinies.
2- Haut de site
[Link]
<! Doctype html>
<html>
<head
<meta charset="ut f-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/style . css">
<script src="'http: //code . jquery . com/j [Link]"></script>
<script src="js/[Link]"></script>
Cmeta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container "> <!-- Tout contenant se divise en 12 colonnes.
#container doit etre present et il permet de centrer -->
<div class="row !"> <!-- .row : on utilise "row" dès lors que 1'on
Souhaite faire une ligne.-->
<div class="col-md-7 col-md-of fset-1 bordureRozge"> <!--
col est colonne // md c'est middle (xs petit) // 7 est le nb de place prise sur
les 12 dispon ible. -- col-md-offset-1 correspond a la
marge de gauche de 1'espace d'une colonne. -->
<h1>
<span class="glyphicon glyphicon-
star"></span>
<a href-"[Link] ">Monnom
Monpren om</a>
<br>
<small>Communication / Marketing /
Digital</ sma l l>
</hl>
</div>
<div class="col-md-3 bordureVe rte "> <!-- col-md-3 je
prends 3 places (sur les l2) -->
<a hre f= " fichier/cv .pdf">Telecharger mon CV</a><br>
<a href- " H>Partagez</a>
</ div>
</div>
<div class="row"> <!-- row : une ligne.-->
<div class=" col-md-10 col -md-offset-1 "> <!-- col-md-10 :
je prends 10 places // col-md-offset-1 : marge de 1'espace d'une colonne-->
<nav class"navbar"> !-- navbar marges en dessous
le menu
<ul class="nav nav-tabs nav-justified
role=tablist"> <!-- nav-justified permet de prendre 1'espace totale en largeur,
peut importe le nb
de liens, c'est recalcule (tester en
ajoutarnt 1 1ien en+) -->
<li<a
nav-tabs permet de mettre un trait en
href="index . h tm1 ">Accueil</a></1i> <!-
desosus et de donner un style "onglet",
<li><a hrefm 'moncv .html">Mon
et faire en sorte qu'il
CV</a</1i><!-nav permet de mettre un d1 Splay block
prenne davantages de
42

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
place. -->
Projets</a></lis
<li><a href="mesprojets.htm1 ">Mes
href="[Link]">Contact</a></li>
<li><a
</ul>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>
Résultat
* Monnom Monprenom
Telecharger mon CV
Partagez
Communication / Marketing / Digital
Quelques Explications (sur les classes Bootstrap utilisées ci-dessus pour
construire le haut de
site)
A l'intérieur de la balise <header>, la zone <div
class="cont ainer"> permet de centrer le
contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.
Une fois à l'intérieur du container, nous créons une <div class= "row"> qui permet
de déclarer une
nouvelle ligne.
A l'intérieur de cette zone <div class= "row">, nous prévoyons un emplacemernt de 7
places .col-
md-7 avec 1 place de marge à gauche .col -mdo f fset-1
Le <span> présent à l'intérieur contient la classe .glyphicon glyphicon-star
permettant
d'afficher une icone à côté du titre et slogan du site.
A côté de cette première zone, nous y associons un deuxième emplacement .col-md-3
(3 places)
contenant des liens.
L'utilisation à nouveau de <div class="row"> nous permet de declarer une nouvelle
ligne pour
prévoir le menu de navigation.
Pour cela, nous n'utilisons qu'un seul emplacement de 10 places .col-nd-10 avec 1
place de marge
de chaque côté.col-md-offset-1.
La classe CSS .navbar permet d'appliquer une marge sous le menu.
La classe CSs -nav permet d'appliquer un display block sur le <ul>.
La classe CSS .nav- tabs permet de mettre un trait en dessous et de donner un style
"onglet".
La classe CSS .nav nav-tabs nav-justified permet de prendre l'espace total en
largeur, peu
importe le nombre de liens, c'est recalculé.
43

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
3- Contenu de site
[Link]
<html>
<head>
<meta charset="ut f-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href-"css/[Link]">
<link rel="stylesheet" href="css/style . css">
<script src="http: /lcode . jquery. com/i query-1. [Link]"></script>
<Script src"js/[Link]"></script>
<meta name=viewport" content width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class= " container">
<div class="row">
<div class"col-md-7 col-md-offset-1 bordureRouge">
<hl>
<span class"glyphicon glyphicon-
star"></span>
<a hre f= "index .html ">Monnom
Monpren om</a>
<br>
<small>Communication / Mar keting /
Digital</small>
</h1>
</div>
<div class="col-md-3 bordureVerte ">
<a href="fichier/cv . pdf">Telecha rger mon
CV</a><br>
<a href= " ">Partagez</a>
</div>
</div>
<div class="row ">
<div class="col -md-10 col-md-offset-1">
<nav class="navbar">
<ul class="nav nav-tabs nav-justified"
role="tablist">
<li><a
href="index . h tml ">Accueil<la></li>
<li><a href= "moncv .html">Mon
CV</a></li>
<li><a
href="mesprojets .h tml ">Mes Projets</a></li>
<li><a
href=-"[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-md-7 col-md-offset-1 ">
<div class="panel panel-default">
<div class="panel-
heading"><h2>Presentation</h2></div>
<div class="panel-body">
<div class"col-md-2">
<img
Src"img/[Link]">
</div>
<div class=" col-md-10">
44

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
Là recherche d' une personne competente et efficace pour gerer vos PLOJ
<p class="lead">
Vous etes a
</p>
</div>
<div class="col-md-12">
<hr>
je su1S .Je Ials. actuellement, ie suis....e fais... actuellementt Je
suis. je fais .. actuellement, je suis
<p>Actuellement,
s/p>
•. je fais
<p>
Class="list-unstyled">
<ul
<li>Redaction cahier des charges</li>
<li>elaboration de votre design & Integration precise/
<li>Administration sur CMS : Wordpress & Drupal</11>
<li>Reflexion strategique, statistiques, referencement</li>
</ul>
Src="img/[Link]" width="200px">
<img
</p>
</div>
</div>
</div>
<div class="panel panel-de fault">
<div class="panel-
heading"><h2>Actualites</h2></div>
<div class="panel-body">
<p>
<em>
17/06/2013 :
Formation a 1'IFOCOP @ Paris .<br>
15/05/2013 :
Actualite 3 <br>
12/03/2013 :
Actualite 2<br>
01/01/2013 :
Actualite 1<br>
</em>
</p>
</div>
</div>
</div>
<div
class="col -md-3" >
<div class="panel panel-de fault ">
<div class="panel-heading"><h2>Qui suis-je
?</h2></div>
<div class="panel-body">
<p>
Description en quelques lignes
<br>
Description en quelques lignes
... <br>
Description en quelques lignes
<br>
</p>
</div>
</div>
<div class= "panel panel-default">
<div class="panel -
heading"><h2>Experience</h2></div>
<div class="panel-body">
45

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
p>
<ul>
</1i>
<li>Experience 1 ...
</lis
<li>Experience 2 ...
</li>
<li>Experience 3 ...
</ul>
</p>
</div>
</div>
<div class="panel panel-de fault">
heading"><h2>Contact</h2></div>
<div class="panel-
<div class="panel-body">
<p>
Contact
<br>
</p>
</div>
</div>
</div>
</div>
</div
</section>
</body>
</html>
46

Résultat
★ Monnom Monprenom
eecharger ncn C
Patapez
Communication / Marketing / Digital
llun Cy
Mes Prejels
Conlat
Presentation
Qul suis-je 7
Vous etes a la recherche d'une personne
Description en quekąues lignes
Dascripton en quelques icnes
COipetente el efficace pour gerer vos projets web ?
Dèsaiptbn en quelques ilgnès
Actuelierient, suis ., je fais. actue enert, je suis..., je fais.
Experience
actuellte, e suis ...je fais
.actucllnent, jc suis j fais..
Redactan cahier des charg es
elaboration de vate design 8 hteçrato1 Drecise
• Expeilence 1..
AnisIStraion sur CIHS:Aoacress & Drupsl
• Experience 2 ...
Re fexion slralegq ue, slallstg aes, ielerencerenl
•Experien ce 3..
Contact
Cortact..
Actualites
17052013: Fonneron aitOCOPCFars.
130320 13. Artuelie 3
12032013: Actualite 2
G1.01/2013: Actuslte 1
Quelques Explications (sur les classes Bootstrap utilisées ci-de ssus pour
construire le milieu de
site)
A l'intérieur de la balise <section>, la zone <div class="container "> permet de
centrer le
contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.
Une fois à l'intérieur du container, nous crėons une <div class="row"> qui permet
de déclarer une
nouvelle ligne.
A l'intérieur de cette zone <div class="row">, nous prévoyons un emplacement de 7
places .col-
md-7 avec 1 place de marge à gauche .col -mdoffset-l
Les classes présentes à l'intérieur sont .panel, panel-default, .panel-heading,
panel-body
La classe CSS panel permet d'appliquer de créer un cadre avec un effet "box'.
47

GROUPE ETIC
BTS2 IDA WEBDESIGN
V2017-2018
La classe CSS .panel-de fault permet d'ajouter de l'ombre.
La classe CSS .panel-heading permet de donner une entête à notre cadre panel.
La classe CSs panel -body permet d'appliquer du padding (marges intérieures) à
l'intérieur du cadre.
Dans cette meme zone de 7 places, nous recréons d'autres zones (une grille dans une
grilie).
Nous prevoyons un autre emnplacement de 2 places .col-md-2 avec une image a
linterieur
Et à coté, un enmplacemnent de 10 places ,col-md-10 avec un texte à l'intérieur.
Cela prend 12 places à l'intérieur de la zone dans laquelle ils sont contenus, soit
12 places à l'intérieur
des 7 places de leur parent.
La classe CSS .lead permet d'avoir un effet gras.
Un autre emplacement de 12 places (à I'intérieur des 7 places du parent) est
déclaré, du coup il passe
forcément à la ligne même sans I'utilisation de <div class="row"> car il n'a plus
la place de se mettre
à côté.
Une liste est déclarée avec la classe CSS list-unstyled qui permet d'éviter les
puces (point noi) de
la liste.
D'autres cadres utilisant les classes CSS ci-dessus sont déclarés pour avoir un
effet 2 colonnes.
Voici les liens pour récupérer les deux images utilisées dans le cadre de ce site
web. Cliquez ici : imagel
& image2
48

BTS2 IDA WEBDESIGN

v2017-2018
4- Bas de site
[Link]
<! Doctype html>
<html>
<head>
<meta charset=" utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" hre f= "css/ Bootstrap. css">
<link rel="stylesheet" href="cSs/[Link]">
<sCript sre="[Link] jquery. com/jquery-1 . [Link]"></script>
<script src="js/[Link]"></script>
</head>
<body>
<header>
<div class=" container">
<div class="row">
<div class="col -md-7 col-md--offset-1 bordureRouge">
<hl>
<span class="glyphicon glyphicon-
star"></span>
<a hre f="[Link]">Monnom
Monprenom</a>
<br>
<small>Communication / Marketing /
Digital</sma ll>
</hl>
</div>
<div class="col-md- 3 bordureVerte">
<a href="fichier/cv . pdf">Telecharge r mon
CV</a><br>
<a href="">Partagez</a>
</div>
</div>
<div class="row'">
<div class="col-md-10 col-md-offset-1 ">
<nav class="navbar">
<ul class="nav nav-tabs nav-justified"
role="tablist">
<li><a
href="[Link]">Accueil</a></li>
<li><a href="moncv .html">Mon
CV</a></li>
<li><a
href="me sprojets .html ">Mes Projets</a></li>
<li><a
href=" [Link]">Contact</a></li>
</ul>
</nav>
</div
</div>
</div>
</header>
<section>
<div class="container">
<div class="row'">
<div class=" col-md-7 col-nd-offset-1">
<div class="panel panel-de fault">
<div class="panel-
heading"><h2>Presentation</h2></div>
<div class="panel-body">
<div class="col-md-2">
<img
Src="img /[Link]">
</div>
<div class=" col-mnd-10">
49

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
<p class="lead">
recherche d'une personne Competente et efticace pour gerer vOs projets web ?
Vous etes a là
</p>
</div>
<div class"col-md-12 ">
<hr>
<p>Actuellement, je suis
.. je fais .. actuellement, je suis .. ., je fais ...
actuellement, je suis
je fais ... actuellement, je suis
.. je fais .. .</p>
<p>
<ul class="list-
unstyled">
<li>Redaction cahier des charges</li>
<li>elaboration de votre design & Integration precise</li>
<li>Administration sur CMS : Wordpress & Drupal</li>
<li>Re flexion strategique, statistiques, referencement</li>
</ul>
<img
Src="img /graphique . png" width="200px">
</p>
</div>
</div
</div>
<div class="panel panel-default">
<div class="'panel-
heading"><h2>Actualites</h2></div>
<div class="panel-body ">
<p>
<em>
17/06/2013 :
E'ormation a l'IFOCOP @Paris .<br>
15/05/2013 :
Actualite 3 <br>
12/03/2013 :
Actualite 2<br>
01/01/2013 :
Actualite 1<br>
</em>
</p>
</div>
</div>
</div>
<div class="col-md- 3">
<div class= "panei panel-de fault ">
<div class-"pane l-heading"><h2>Qui
suis-je ?</h2></div>
<div class="panel-body">
<p>
Description en quelques
ligneS... <br>
Description en quelques
lignes
<br>
Description en quelques
lignes... <br>
</p>
</div>
</div>
<div class="panel panel -de fault ">
<div class="panel-
heading"><h2>Experience</h2></div>
<div class="panel-body">
<p>
50

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Résultat
Teleage
* Monnom Monprenom
Partsqez
Commuication / Markelng/ Digıtal
oe CV
es Proje
Qui sus-je ?
Presentation
esangUDr en Quelgues gres
Desorirtion en Quelaus lngnes
Vous eies a la recherche d'une personne
Oesaietion en quetques ligres
Competente et efficace pour gerer vos projets wetb ?
Experience
Acuelierrent je suis je fais atueilemant je suis Je fais B tuellement. je
je f
Experienoe 1
Resscto cahier ces o1 srges
•Experience 2
elaborsticn de votre desigr & integrsticn precise
Experiencr 3
Adninistratiun sus CMS Wordpress & Drupal
Retlexton strategicue, sts tistiqu6s, relerenoernent
Contact
Contact
Actualites
1706/2013 Foimst on a lFOGOP QPana
15052013 Actual te 3
121032013 Actualite 2
61012013 Actuatite t
ertiars Legaics - Cetac
Intormatigna
fci 2013 Condeption et realisstion par Nom Prencm Tous drsits ressrvet
52

BTS2 IDA WEBDESIGN

GROUPE ETIC
V2017-2018
<ul>
<li>Experience 1
•.. <1is
<li>Experience 2
</1i>
<li>Experience 3
... </li>
</ul>
</p>
</div>
</div>
<div class="panel panel-de fault">
<div class="panel-
heading"><h2>Contact</h2></div>
<div class="panel-body">
<p>
Contact ... <br>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container'"> <!-- #container : centre -->
<div class="row"><!-- ligne -->
<div class="col-md- 10 col-md-offset-1 "> <!-- je
prends 10 places -->
<hr>
<a href-"">Informations</a> -
<a href= "">Mentions Legales</a> -
<a href="contact. php">Contact</a>
<br>
<p> (c) 2013 Conception et realisation par
Nom Prenom. Tous droits reserves,</p>
</div>
</div>
</div>
</footer>
</body>
</html>
51

V2017-2018
BTS2 IDA WEBDESIGN
GROUPE ETIC
Affichage en mode réduit :
★ Monnom
Monprenom
Cormunicalton Rlarkeing Digilai
Fariagez
Mes Pro, et
Contot
Presentation
Vous etes a la recherche dune personne
competente et e fficace pour gerer vos
projets wet ?
ACtueilement, je suisje fais
.je fsis
a ctueitemant. je suis
actuellement. je suis je tsis
ctuetlement. je uis. je feis
Pedoction cahier des ch ages
eioboration ds yotre design & integrstion
precisa
Adrninistration suw CMS Woropress & Drupai
Relexion stretegtgue, staistiQues
raterencement
53

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
Quelques Explications (sur les classes Bootstrap utilisées ci-dessus pour
construire Je bas de site)
A l'intérieur de la balise <footer>, la zone <div
contenu sur la page web et de travailer à l'intérieur du système 12 colonnes.
Class"container"> permet de centrer le
Une fois a Tinterieur du container, nous créons une <diy class="row"> quí permet de
déclarer une
nouvelle ligne.
Alintérieur de cette zone <div class= "row">, nous prévovons un emplacement de 10
places COl-
md-10 avec 1 place de marge à gauche . col-mdof fset-1
Nous y mettons simplement quelques liens et une phrase de texte.
Tous les éléments type <a>, <hr>
<p>, etc. bénéficient d'une légère retouche graphique prévue
par Bootstrap.
Nous sommes à la fin de la création de notre première page web avec l'aide de
Bootstrap !comme nous
le constatons, cela va plus vite puisqu'on écrit pas le code CSS, on ne fait
qu'appeler des classes CSs
contenant du code déjà prédéfini.
D'autre part, nous pouvons tenter de redimensionner votre fenêtre, nous verrons que
notre page Weo
est déjà responsive !
D'une manière générale, si nous avons un doute sur le comportement d'une classe ou
sur son apport,
nous pouvons:
Consulter la documentation officielle
Allez voir le code css du fichier [Link]
L'observer avec firebug
La retirer du code pour voir ce que cela change à l'affichage, avant de la rétablir
dans le code.
54

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
4Gechteth e
ODesact vey Cookies Cs$ 12 Fama ares nayes U Infos DiuetsEntoureFenétseOuils Code i
Optiuns
★ Monnom Monprenom
Farages
Gom:IC AOn Llaketing LDigtal
eues
Piesentalion
Qui cuis jo 7
Vous etes a la rec herche dune personne
Desar pticn en acleLes gnes
Deson aticn en qselaues I gmes
cornpelente et efficace pour gerer vos projets web ?
Descr sricn c gseleues aes
Fxper eres
e feis
a Lele me z,ie suis
e feis
Contact
Cena
Corsole KTML
Script DOM eseau Ccolies
šenarcerp.t'e i
div panel-heading
diunaneldefa It du cal-m. offsei-i
FEer
dv row diz ca
Style
Calculé
Apparence DO
Evènements
•::De toze, *:axter
DO [Link] s (igne 5)
Slisae
bax-iz irg: kexde:-bez
1
be Eore. efter {
caLT cLang=ccnt tantris
laouls trapnin css (ligne 5)
bOA-la lrg. border-bk.
-panek-ae žaulr panel-tosding bo ots [Link](gne b)
irszclast-ble-hedate.a
*d clazsganeL-Do dy
buz de e. did.
4333.
- casaex=pana pne -dar auit">
[Link].c0s flgnz 6)
p&na L-ne aa1Lrg
bardepLe #t -rasis: Sps
Thème et Template pré-faits Bootstrap.
Plusieurs thèmes pré-faits existent, vous pouvez les récupérer et les observer à
l'adresse officielle de
Bootstrap dans la partie Getting Started, voici quelques liens d'exemple:
Starter Template: [Link]
Bootstrap Theme example : [Link]
Grids : [Link]
Jumbotron: [Link]
Narrowjumbotron: [Link]
Carousel : [Link]
Blog: [Link] [Link]/docs/B.3/examples/blogl
Dashboard (thème pour backOffice) :
https//[Link]/docs3.3/examples/dashboard/
55

GROUPE ETIC
BTS2 IDA WEBDESIGN
v2017-2018
CONCLUSION
Le webdesign est une discipline vivante en constante évolution, elle suit les
tendances et s'adapte aux
supports et aux technologies. II ne suffit plus de posséder une bonne sensibilité
graphique pour être un
bon webdesigner. Donner vie à un univers graphique tout en sachant harmoniser la
répartition des
contenus et la diversité des supports, le tout au service de l'utilisateur relèvent
de competen ces
multiples.
56