TELECOM Saint-tienne 2A Anne universitaire 2010-2011 Introduction au Web Mini projet en TD (TD n2 4) - Dure 4h30

J. Lardon

OBJECTIFS DU MINI-PROJET:
Ce projet a pour but de crer un mini site Web pour vous prsenter. La carte du site est prsente dans la gure 1. Les 3 pages constituant ce site auront des formes prdnies quil vous faudra suivre. Chacune des pages qui vous seront demandes de construire est un prtexte pour revoir des notions du premier TD ou de nouvelles qui vous seront expliques pendant la sance. Chaque sance devra tre consacre une page au minimum. Si daventure vous avez ni lobjectif de la sance en avance, le paragraphe Allez plus loin vous donnera dautres instructions. Que vous ne fassiez lobjectif ou plus, pensez aux deux fondamentaux de la construction dune page Web : 1. Sparer bien le fond de la forme, lXHTML du CSS, 2. Sappuyer sur des tableaux pour faire la prsentation de la page est le meilleur moyen de rcolter une note minable lexamen. N.B. : On ne le dira jamais assez mais lisez tout lnonc avant de poser une quelconque question.

VALIDATION DES PAGES:

Chaque page que vous crerez devra tre valide grce aux validateurs du W3C : Validateur (X)HTML : http://validator.w3.org/#validate-by-upload Validateur CSS : http://jigsaw.w3.org/css-validator/#validate_by_upload

Page 1 : Accueil
Objectif : Construire la page daccueil de votre site donc le duo chier XHTML / chier CSS. La construction de cette page doit se faire selon un schma. De plus les spcications suivantes sont appliquer. Spcications de la page daccueil :

Accueil

CV

Ressources

...

Con rmation formulaire

Fig. 1: Carte du site La prsentation est calquer sur le schma de la gure 2. A cette prsentation, sajoutent les contraintes suivantes. Le bandeau suprieur Vous choisirez le titre de votre site qui se substituera au TITRE du schma. La taille de votre titre doit tre augmente pour quil soit bien visible. Le menu Le menu horizontal en-dessous du titre doit tre une liste dont on aura chang les proprits CSS list-style-type et display pour lacher sur la mme ligne. Cette liste doit tre centre et chacun de ses lments doit tre espac de 10 pixels. Pour cela, aidez vous du Supplment au cours ci-aprs. Chacun des lments de la liste sera un lien sur la page correspondante du site. Enn le menu doit prsenter une bordure infrieure et suprieure continue sur tout la largeur de la page. Le corps de la page Dans le corps de la page, vous vous prsenterez, ainsi que le site (donc explications des deux autres pages). Ce texte devra tre structur laide de titres (balises H#, # allant de 1 6). Vous y intgrerez un formulaire de contact. On imaginera que ce formulaire sert un utilisateur pour vous envoyer un message lectronique. Ce formulaire demandra : 1. le nom et prnom de lutilisateur, 2

TITRE
Accueil CV Ressources ...
Paragraphe de prsentation

Contact :
Nom : Email : Message:

Envoyer copyright, ....

Fig. 2: Schma de la page daccueil

2. son adresse email, 3. le message quil veut envoyer. La page-cible de ce formulaire devra tre la page dadresse http://jeremy.lardon.free.fr/displayForm.php . Le pied de page Le pied de page contiendra toute information que vous jugerez utile pour toutes les pages de votre site, par exemple le copyright ou les mentions lgales. Ces informations devront tre centres. Enn le pied de page doit avoir une bordure suprieure. Supplments au cours : Largeur, hauteur, bordures, marges et paddings La gure 3 vous montre le comportement de ces proprits pour un lment de type block. Ces proprits ont le mme comportement avec les lments de type inline lexception des proprits width et height qui nont aucun eet. On peut donc rsumer en disant que la proprit margin xe la largeur de la marge en dehors de la bordure et que la proprit padding xe la longueur de la marge lintrieur de la bordure. Formulaire Les champs de formulaire possibles sont les balises suivantes : BUTTON INPUT SELECT TEXTAREA

De plus pensez utiliser les balises LABEL et FILEDSET, si besoin est. Allez plus loin : Les couleurs de police ou de fond sont libres, laissez donc parler votre crativit en changeant ces couleurs pour toute la page, ou seulement lintrieur de certains lments. Vous pourrez ajouter ce formulaire toute autre information que vous souhaitez (le but de son message : personnel, professionel) laide des dirents lments que le langage XHTML met disposition. La page-cible du formulaire ache seulement les paramtres passs en mthode POST ou en paramtres GET. Avec le code donn dans larchive, essayez de construire votre propre rponse au formulaire, en vriant que les paramtres que vous voulez existent bien.

Page 2 : Curriculum Vitae

Objectif : Construire votre CV comme une page Web. La construction de cette page doit se faire selon un schma, limage de la page daccueil. De plus les spcications suivantes sont appliquer.

Fig. 3: Exemple de formatage dun bloc 5

TITRE
Accueil CV Ressources ...
Etat civil, .... (texte) Photo (image)

Formations
Minimum multo itaque adiumentique caritatis. Et atque quem causam semper. Latasque suis superbas venerabilis velut.

Comptences
Minimum multo itaque adiumentique caritatis. Et atque quem causam semper. Latasque suis superbas venerabilis velut.

Loisirs
Minimum multo itaque adiumentique caritatis. Et atque quem causam semper. Latasque suis superbas venerabilis velut. copyright, ....

Fig. 4: Schma de la page de CV Spcications de la page de CV : La prsentation est calquer sur le schma de la gure 4. A cette prsentation, sajoutent les contraintes suivantes. Le bandeau suprieur, le menu et le pied de page Rferrez vous aux spcications de la page daccueil. Le corps de la page La photo doit tre droite de ltat civil. Elle doit avoir une bordure assez large pour que la photo soit mise en relief. Les titres (Formations, Comptences, Loisirs) doivent avoir une bordure infrieure prenant la largeur. De plus les titres devront tre dune couleur dirente de celle de ltat civil. 6

Les lments des listes sous les titres doivent avoir une couleur dirente de ltat civil et des titres. Allez plus loin : Crer un ou des autres chiers CSS pour changer le look de la page (seulement les couleurs de fond, des bordures ou du texte ; les tailles, familles de police ou la mise en gras ou italique du texte, des titres, des lments de liste, ...) ou pour lachage sur un autre dispositif (on peut imaginer un smartphone ayant une rsolution de 320 pixels de large sur 240 pixels de haut). Crer un chier PHP qui regroupent trois fonctions : 1. une fonction qui gnre le code XHTML du bandeau 2. une fonction qui gnre le code XHTML du menu 3. une fonction qui gnre le code XHTML du pied de page Par la suite, crer les chiers index.php et cv.php dans lesquels vous ferez appel aux trois fonctions prcdentes en plus dcrire le corps de chacune des ces 2 pages.

Page 3 : Ressources
Objectif : Construire une page Web sur laquelle vous donnerez des liens vers des ressources ou dans laquelle sera ache des objets externes. La construction de cette page doit se faire selon un schma, linstar des deux pages prcdentes. De plus les spcications suivantes sont appliquer. Spcications de la page de ressources : La prsentation est calquer sur le schma de la gure 5. A cette prsentation, sajoutent les contraintes suivantes. Le bandeau suprieur, le menu et le pied de page Rferrez vous aux spcications de la page daccueil. Le corps de la page Vous prendrez exemple sur la prsentation des titres de la page de CV pour les titres (Tlchargements, Animation ash, Exemple de code). Les chiers tlchargeables sont prsents aux adresses suivantes : 1. http://jeremy.lardon.free.fr/projet/cheatsheet_CSS.pdf 2. http://jeremy.lardon.free.fr/projet/projet.zip 3. images/photoCV.png (adresse locale) De plus vous ferez apparatre dans le corps de la page une animation ash. Les dimensions de lobjet correspondant sont 189 pixels de hauteur sur 446 pixels de largeur. Les paramtres ncessaires et leurs valeurs sont les suivants :

TITRE
Accueil CV Ressources ... Tlchargements
Fichier de type zip, PDF Fichier de type zip, PDF Fichier de type zip, PDF

Animation ash
Animation Flash

Exemple de code

Code

copyright, ....
Fig. 5: Schma de la page de ressources

 movie : http://www.telecom-st-etienne.com/istase-swf/Anim_TSE_v1.0.swf quality : high wmode : transparent Pour une reconnaissance pour le maximum de navigateurs, vous ajouterez en plus des paramtres, lintrieur de la balise un lment de type embed ayant les attributs suivants : src avec la valeur http://www.telecom-st-etienne.com/istase-swf/Anim_TSE_v1.0.swf , width la valeur 446 et height la valeur 189. Enn vous ajouterez une section de code lintrieur dun texte prformat. Le code que vous y ferez gurer est choisir par vos soins.