Institut Supérieur des Technologies de l’Information et de la
Communication
Département Informatique
Classe : Module : Web & Elément : Front-End Code : ECUEO311
LGLSI2 Multimédia Web
Enseignants : Mohamed Seifeddine AZZABI & Année universitaire : 2020-2021
Faiza Debbiche
TP N° 4 : Design CSS3 & Bootstrap
Objectifs : Outils : Documentation :
• Design d’un document HTML5 • Visual Studio Code • [Link]
avec CSS3 • Google Chrome started/introduction/
• Design d’un document HTML5 • Framework Bootstrap • [Link]
avec Bootstrap
Activité 1 : Design CSS3
1. Ouvrir le dossier ACT1TP4\
2. Dans le dossier css\ créer un fichier [Link]
3. Faire l’appel du fichier [Link] dans tous les documents HTML5
4. En se référant à la documentation : [Link]
5. Nous nous proposons de créer le design pour le site web de l’ISTIC-le code HTML est
déjà créer-, en utilisant la technologie CSS3
• Il est possible de modifier le code HTML
Cahier de charge Design ISTIC :
1. Image ISTIC est [Link] :
✓ Centrer
✓ Largeur image = 80% Largeur écran
2. Barre de navigation « Horizontal », contient 3 liens :
• Accueil → [Link]
• Contact → Facebook
• Autre → Google
Ressource1 [Link]
transitions-CSS
Ressource2 [Link]
3. Barre de navigation « Vertical », contient des liens :
➔Youtube, Facebook, Twitter, Envoie Mail,
Téléphone
• Flottante
• Effet transparence
Mohamed Seifeddine AZZABI TP N°4 Design CSS3 & Bootstrap
Ressource1 [Link]
4. Entête de page :
• Fixe
• Le texte défile
5. Pieds de page :
✓ Fixe
✓ Contient un effet de transparence
✓ Section Formation ISTIC :
✓ Numérotation automatique des titres
Ressource1 [Link]
• Le formulaire de la page [Link] :
✓ Doit utiliser un design assorti sur le logo de l’ISTIC
Ressource1 [Link]
• Le tableau liste étudiant :
✓ Appliquer un design moderne
✓ Personnalisation des listes contenu dans le tableau
Ressource1 [Link]
• Image HTML5 :
✓ A chaque fois qu’on clique sur l’image, l’image change (HTML5, CSS3,
CloudComputing, GreenIT, DevMobile)
Ressource1 [Link]
• Image Club ISTIC :
✓ Lors du clique une description des clubs en mode slide caption apparait
Ressource1 [Link]
Activité 2 : Design Bootstrap (prise en main)
1. Créer une page web HTML5 pour mobile :
o Encodage UTF-8
o Adapté la page selon la résolution de l’écran
2. Faite les appellations nécessaires (CSS) pour intégrer le Framework Bootstrap
3. Créer un container Bootstrap globale pour toute la page web
4. Nous allons créer 3 ROW Bootstrap
o Row 1 :
▪ Contient un titre de niveau 1 (Test Bootstrap)
▪ Un paragraphe : « Lorem Ipsum »
o Row 2 :
▪ Un alert (Mise en forme success), (Taille 6 unités de l’écran), (décalé 3 unités) :
Mohamed Seifeddine AZZABI TP N°4 Design CSS3 & Bootstrap
• Entête : Titre 3 : Test alert
• Corps : Ceci est une alert générer avec Bootstrap
o Row 3 :
▪ Div (Taille 4 Unités) : Contient une image (50*50pixels), (avec bordure rounded)
▪ Div (Taille 8 Unités) : Contient un tableau (Responsive, et table-dark) :
Les mails c’est pour envoyé des mail (mailto)
Nom Email Date de naissance
Ali ali@[Link] 21/05/1975
Mohamed mohamed@[Link] 11/02/1996
Nadia nadia@[Link] 04/05/1995
5. Nous voudrons ajouter des icônes aux tableaux :
o Icone envelope prêt de chaque adresse mail :
▪ [Link]
o Icone user près de chaque Nom :
▪ [Link]
6. Utiliser l’outil Device Mode de Google Chrome :
o Les trois points en haut à droite>Plus d’outils>Outils de développement>
7. Tester la page web créer sur différent device mobile : Smartphone, Tablette et PC
8. Effectuer les modifications nécessaires pour que le ROW2 (Image et Tableau) soit afficher sur des lignes
différents sur les smartphones
9. Effectuer les modifications nécessaires pour afficher la page sur toute la largeur
Activité 3 : Design Bootstrap ACT3TP4
1. Créer un dossier ACT3TP4
2. Créer l’arborescence de dossiers suivante : css\
3. Ouvrir Visual Studio Code js\
4. Ouvrir le dossier ACT3TP4 en utilisant Visual Studio Code
5. Créer un code HTML5/Bootstrap permettant d’implémenter le design de l’interface suivante
Mohamed Seifeddine AZZABI TP N°4 Design CSS3 & Bootstrap
Mohamed Seifeddine AZZABI TP N°4 Design CSS3 & Bootstrap