TP Introduction au développement Web HTML, CSS et

TP Introduction au développement Web
HTML, CSS et Bootstrap
Eric Ramat
[email protected]
9 mars 2015
Durée : 3 heures
L’objectif de ce deuxième TP est de poursuivre l’utilisation des CSS pour la mise en page d’un site
d’e-commerce. Dans un premier temps, nous allons supprimer l’utilisation des tableaux pour la mise en
page. Puis, nous allons maintenant développer la page “Panier”.
1
Travail
Exercice 1. Supprimer les tableaux qui ont permis de structurer la page et remplacer les par des div.
Le rendu doit être identique.
Exercice 2. Développer une nouvelle page (statique pour l’instant) qui représente un panier avec des
articles. L’organisation d’une partie de cette page est proposée dans l’image ci-dessous.
Le haut de la page montre l’avancement des étapes de validation du panier. Le paiement est la troisième étape d’où les 3 ronds. Voici une url pour une piste pour réaliser les 3 ronds :
1
http://jsfiddle.net/thirtydot/JJytE/1170/
La liste des articles est sous forme de bloc composé de :
— une image miniature du produit
— le nom du produit
— un sous-titre de caractéristiques
— la quantité
— une croix pour supprimer le produit du panier
Les images à utiliser sont ceux données pour le premier TP. Le triangle qui apparaît sur l’image n’est
pas à reproduire.
Les moyens de paiement sont mis en évidence dans un bloc grisé. Les icônes des moyens de paiement
sont disponibles à l’adresse suivante :
http://www.dreamstale.com/free-download-payment-method-vector-icons
Il est impératif d’être le plus proche possible de la vue proposée. La police de caractère, la taille de
caractère, les couleurs, . . ., doivent être proche.
Exercice 3. Utiliser Bootstrap pour la mise en page.
2