01/11/2020

Reproduction d'un site web

L’objectif de l’exercice qui suit est de reproduire un ensemble de pages web.

Le modèle

Commencez par visiter ces pages.

La structure du site est simple.

• Il contient une page d’accueil d’où l’on peut visiter trois autres pages sur Leonard de Vinci.
• La page sur la bicyclette est anecdotique.
• La page "Peintures et Sciences" est un long article qui mentionne certaines œuvres du maître, que l’on peut consulter sur la page "La galerie". Les liens qui vont de l’article à la galerie nous conduisent exactement là où se trouve la peinture dont il est question. Pour y arriver, on utilise des identificateurs de balise (attribut id="...")
• La galerie présente une série de vignettes accompagnées de commentaires. En cliquant sur une vignette, on accède à une image en taille réelle sur une page séparée.

Les fichiers de travail

1. Téléchargez le fichier suivant sur votre poste local. Il contient les documents à partir desquels vous travaillerez : deVinci_acompleter.zip.
2. Extrayez le contenu de cette archive.
3. Vous devez maintenant avoir un répertoire appelé "deVinci_acompleter" contenant tous les fichiers (html et images) dont vous aurez besoin.

L'exercice

Reproduisez les pages en utilisant et en complétant les ressources du dossier que vous avez téléchargé. Le texte est déjà mis en forme, il vous suffit de retravailler les pages HTML du dossier.

Mise en garde

Si vous souhaitez que l'exercice vous soit bénéfique cherchez à faire les modifications sans regarder le code source du modèle (ne le faites que si vous n'y arrivez pas ou pour vérifier ; si vous n'arrivez à rien faire, il est peut-être sage de reprendre le TD 7)

Indications des opérations à réaliser

• Page d'accueil : insertion de l'image vers le fichier local contenant le portrait de Léonard de Vinci.
• Page d'accueil : complétion de la liste de la partie "PeintureQuelques œuvres"Peinture avec ajout des hyperliens vers les autres pages.
• Page d'accueil : complétion du tableau
• Page sur la bicyclette : insertion de l'image de bicyclette.
• Ajout des identificateurs de balise afin de pouvoir renvoyer le lecteur du texte "Peinture et sciences" vers les vignettes de la "Galerie".
• Ajout des hyperliens sur les vignettes permettant d'afficher les peintures correspondantes en grand.

Suivez la méthode de travail décrite dans cette leçon.

Une fois votre travail terminé, vous devez être en mesure de surfer sur ces quelques pages avec votre navigateur.