alwaysdata · Web view1)Modifiez le fichier HTML de l'exercice précédent pour obtenir cet écran...

© 2018

QUESTIONS

ET

RÉPONSES

CREATION D'UN SITE INTERNET - EXERCICE FR1

1) Créez le fichier HTML correspondant à l'écran suivant :


1) Modifiez le fichier HTML de l'exercice précédent pour obtenir cet écran :- Soulignement du titre- Plan du site formaté au moyen des balises "listes"- Icône du site dans la barre de titre- Renommer le fichier ex_FR_Accueil.html

2) Créez un second fichier HTML (ex_FR_Contact.html) pour afficher cette page :


1) Modifiez les fichiers HTML de l'exercice précédent pour obtenir ces écrans :- Plan du site revu : "Accueil" et "Contact" sont des hyperliens permettant

d'afficher la page HTML correspondante- Taille de la photo réduite à 40% de la fenêtre- Nouvelle adresse de contact : rue Des Papillons, 283- Ajout de l'hyperlien vers Google Map à l'adresse de contact (Attention,

dans ce cas-ci, il faut la taper en néerlandais Vlindersstraat 283)NB: Le design sera amélioré dès que l'on aura étudié les feuilles de style.


1) Modifiez les fichiers HTML créés durant l'exercice précédent pour obtenirles écrans suivants (le cas échéant, créez de nouveaux fichiers) :- Adaptez le menu (ordre des propositions).- Ajoutez l'image sur la page d'accueil et mappez-la (les 3 espèces).- Pour l'instant, les pages des animaux ne contiennent que le titre

principal et le message "en construction".


1) Modifiez les fichiers HTML créés durant l'exercice précédent pour obtenirles écrans suivants (le cas échéant, créez de nouveaux fichiers) :- L'en-tête doit être en rouge et centré horizontalement- Le menu doit être en gras, centré et avoir un arrière-plan coloré- L'image "les animaux" doit être centrée horizontalement


1) Modifiez les fichiers HTML créés durant l'exercice précédent pour obtenirles écrans suivants :- L'en-tête est affiché dans un cadre vert à bords arrondis (encre "lime")- L'image Logo1Titre.jpg a été ajoutée à l'en-tête- La ligne horizontale soulignant l'en-tête a été supprimée- Le menu est affiché sur un fond "lime"


1) Modifiez le fichier CSS de l'exercice précédent pour obtenir l'effet detransition suivant :- L'image logo1Titre.jpg est agrandie lorsqu'on positionne la souris dessus.

Afin que la présentation soit agréable, on veillera à aligner l'imageverticalement par rapport au texte de l'en-tête.


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent afin :- d'afficher les informations "Implantations" sur la page Contact. Pour cela, vous devez utiliser les images anderlecht.png et FlecheBas.gif- de remplacer l'image logo1Titre.jpg par l'image logo2Titre.jpg (en gardant les hauteurs constantes à 60px) lorsqu'on positionne la souris dessus.


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent afind'afficher la page des dates importantes de l'année :- L'hyperlien Evénements doit être ajouté sur toutes les pages du site- Le calendrier occupe "toute la largeur" de l'écran avec un maximum de 800px- Le calendrier doit avoir la même présentation que sur l'image- La ligne survolée par la souris est affichée en bleu


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent afind'afficher la page de l'équipe :- L'hyperlien L'équipe doit être ajouté sur toutes les pages du site- L'en-tête et le menu doivent utiliser les nouvelles balises de structure de l'HTML5 et les propriétés Flexbox- Les couleurs des titres et menus sont modifiées. De plus, la couleur d'arrière-plan du menu survolé est modifiée ( forestgreen)- La page L'équipe doit être créée en utilisant les nouvelles balises de structure de l'HTML5 et les propriétés Flexbox- Les images au sein des cases sont positionnées grâce aux propriétés float


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent afind'ajouter la page Formulaire suivante.La liste "Sujet de la demande" contient les valeurs : Renseignement général,Caniches, Cobayes et Poules.De plus, l'affichage du menu sera revu afin d'afficher les boutons surplusieurs lignes lorsque l'écran n'est pas assez large pour le faire sur uneseule ligne.


1) Modifiez les fichiers HTML créés durant l'exercice précédent afin d'utiliserle langage PHP pour faciliter la maintenance future du site lorsqu'il faudrachanger l'en-tête, ajouter un choix dans le menu,...En d'autres mots, utilisez les include !


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterles coordonnées de l'implantation survolée à la page "Contact" :- Il faut respecter la présentation- Lorsque l'internaute survole une des implantations de la liste, le système

doit afficher l'adresse correspondante dans la textarea- Les coordonnées à afficher sont :

MaisonRue des Papillons 2831070 Anderlecht

RefugeAvenue d'Itterbeek 121070 Anderlecht


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'afficherun petit descriptif dans un paragraphe au-dessous de l'image mappée.Ce texte doit décrire brièvement le contenu du cours désigné par la souris aupassage de celle-ci sur son logo.Attention, le texte doit disparaître dès que la souris quitte le logo.- Les textes à afficher sont :

Voici nos cobayes Zeno et Gizmo. Ils font partie d'un groupe de 7 compagnons (5 mâles et 2 femelles).

Notre petit caniche nain lorsqu'il avait 10 mois.

Notre poule Ludivine (surnommée Lulu) avec 2 de ses petits poussins.


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterune page "photos" au site. Cette page afficherait en petit en haut de l'écranles 6 photos des animaux ; et en bas en grand, la dernière photo survoléepar la souris.


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterune page "FAQ" au site. Cette page affichera les questions fréquemmentposées. Lorsque l'internaute cliquera sur une question, sa réponse seraaffichée et toutes les autres réponses seront masquées.


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin de vérifiersi les zones Nom, Adresse mail et Question sont encodées par l'internaute.

CREATION D'UN SITE INTERNET - REPONSES FR1

1) Créez le fichier HTML correspondant à l'écran suivant :


1) Modifiez le fichier HTML de l'exercice précédent pour obtenir cet écran :

2) Créez un second fichier HTML (ex_FR_Contact.html) pour afficher cette page :


1) Modifiez les fichiers HTML de l'exercice précédent pour obtenir ces écrans :


1) Modifiez les fichiers HTML créés durant l'exercice précédent :

Ci-après, vous trouverez une copie des 3 premiers fichiers HTML du site. Lesautres fichiers (liés aux poules et caniche) sont semblables à celui descobayes et ne sont donc pas repris ici.



Ci-après, vous trouverez une copie du premier fichier HTML du site. Lesautres fichiers sont semblables à celui-ci et ne sont donc pas repris ici.


1) Modifiez le fichier CSS de l'exercice précédent :


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent



Ci-après, vous trouverez une copie du nouveau fichier ex_FR_Evenements.htmlet la partie ajoutée au fichier CSS. Les autres fichiers sont semblables àceux de l'exercice précédent (seule la ligne contenant le nouvel hyperlienvers la page des événements a été ajoutée) et ne sont donc pas repris ici.



Ci-après, vous trouverez une copie du nouveau fichier ex_FR_Equipe.html etle fichier CSS. Les autres fichiers sont semblables à ceux de l'exerciceprécédent (seules les lignes en-tête et menu ont été modifiées = copie decette même partie du fichier ci-dessous) et ne sont donc pas repris ici.


1) Modifiez les fichiers HTML et CSS créés durant l'exercice précédent afin d'ajouter la page Formulaire.

Ci-après, vous trouverez une copie du formulaire et les parties modifiées du fichier CSS. Les autres fichiers sont semblables à ceux de l'exercice précédent (seule la ligne Question du menu a été ajoutée = copie de

cette même partie du fichier ci-dessous) et ne sont donc pas repris ici.


1) Modifiez les fichiers HTML créés durant l'exercice précédent afin d'utiliserle langage PHP

Ci-après, vous trouverez une copie des principaux fichiers modifiés.Certaines modifications sont appliquées dans les autres fichiers semblables ;ces derniers ne sont donc pas repris ici.

Nouveaux fichiers : (Attention, les liens dans le menu .php)


Remplacements à faire dans tous les fichiers .html/.php :a) Remplacer toutes les extensions .html en .phpb) Remplacer le code ci-dessous par le code ci-après

(Attention, dans le fichier ex_FR_Accueil, il faut veiller à garder la partie décrivant la "map")


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterles coordonnées de l'implantation survolée à la page "Contact" :

Ci-après, vous trouverez une copie des principaux fichiers modifiés.Certaines modifications sont appliquées dans les autres fichiers semblables ;ces derniers ne sont donc pas repris ici.

Révision du fichier ex_FR_Contact.php :


Le fichier include ex_FR_Head.inc.php a également été revu (retrait desbalises <head>) :

Ajout à faire dans tous les fichiers contenant l'include ex_FR_Head.inc.php :Ajouter les balises <head> et </head> :


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'afficherun petit descriptif dans un paragraphe au-dessous de l'image mappée.

Ci-après, vous trouverez une copie du fichier PHP de la page "Accueil". Lesautres fichiers n'ont pas été modifiés et ne sont donc pas repris ici.


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterune page "photos" au site.

Ajout de la ligne 6 dans le fichier ex_FR_Menu.inc.php

Création du fichier ex_FR_Photos.php

Ajout des lignes 100 à 105 dans le fichier CSS


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin d'ajouterune page "FAQ" au site.

Création du fichier ex_FR_FAQ.php

Modification du fichier CSS : Ajout lignes 107 à 110


Ajout de la ligne 8 dans le fichier ex_FR_Menu.inc.php


1) Modifiez les fichiers PHP créés durant l'exercice précédent afin de vérifiersi les zones Nom, Adresse mail et Question sont encodées par l'internaute.

alwaysdata · Web view1)Modifiez le fichier HTML de l'exercice précédent pour obtenir cet écran...

Documents

Transcript of alwaysdata · Web view1)Modifiez le fichier HTML de l'exercice précédent pour obtenir cet écran...