.....

Travaux pratiques du 25 novembre 2002

Présentation rapide de Dreamweaver :

• le meilleur outil pour la création de page Html
• enrichit d'un générateur de javascript
• enrichit de fonctionnalité permettant de produire du DHTML

Préambule :

• Vous devez avoir installer préalablement Dreamweaver 4, Fireworks 4 et Flash 5 sur vos partitions windows NT ou windows 2000.
• Pour chacun de ces exercices, il est demandé de les mettre en ligne sur vos serveurs respectifs (Apache ou IIs) et de le faire valider par l'un de vos pairs.
• Pour chacun de ces exercices, vous devez systématiquement aller voir le code et essayer de comprendre sa structure, code HTML, code javascript.
• Les exercices sont progressifs et se terminent par un exercice de synthèse.

Exercice 0 | Exercice 1 | Exercice 2 | Exercice 3 | Exercice 4 | Exercice 5 | Exercice 6 | Exercice 7 | Exercice 8

Exercice 0 :

• optionnel mais fortement recommandé : faire la visite guidée et les 7 leçons dans l'aide de Dreamweaver

Exercice 1 :

cahier des charges :

• page en html pur sans langage de script ni fenêtre.
• Faire une page d'accueil qui comprend le logo de l'Université Paris 7,
• un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires.
• Faire un lien qui renvoi vers le site du DESS ou de Paris 7
• la page doit être mise en ligne

charte graphique :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libres.

Exercice 2 :

cahier des charges :

• 3 pages en html pur sans langage de script ni fenêtre.
• Faire une page d'accueil qui comprend le logo de l'Université Paris 7,
• un avertissaient signalant qu'il s'agit d'exercices pédagogiques universitaires.
• Faire 2 liens qui renvoi vers les pages 2 et 3 du site
• les pages doivent être mise en ligne
• A partir de n'importe quelle page il doit être possible de revenir sur les autres pages
• Sur toutes les pages il doit y avoir visibles les liens vers les autres pages et l'indication de la page active.

• Charte graphique et règles de navigation :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université (en haut à gauche). Fond et police libre
• chaque page doit avoir une couleur de fond différente
• les liens pour accéder aux autres pages doivent toujours se trouver au même endroit.
• Il ne doit pas avoir de liens de la page active vers elle-même

Exercice 0 | Exercice 1 | Exercice 2 | Exercice 3 | Exercice 4 | Exercice 5 | Exercice 6 | Exercice 7 | Exercice 8

Exercice 3 :

cahier des charges :

• une page d'accueil qui appelle 3 pages en html pur sans langage de script ni fenêtre.
• Faire une page d'accueil qui comprend le logo de l'Université Paris 7,
• un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires.
• Faire 2 liens qui renvoi vers les pages 2 et 3 du site
• les pages doivent être mise en ligne
• A partir de n'importe quelle page il doit être possible de revenir sur les autres pages
• Sur toutes les pages il doit y avoir visibles les liens vers les autres pages et l'indication de la page active.

Charte graphique et règles de navigation :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libre
• chaque page doit avoir une couleur de fond différente
• les liens pour accéder aux autres pages doivent toujours se trouver au même endroit.
• Il ne doit pas avoir de liens de la page active vers elle-même
• il doit y avoir des rollovers textes pour les liens sur les autres pages à l'exception de la page active
• il doit avoir le logo sur chacune des pages et au même endroit ;
• le click sur le logo doit renvoyer vers la page d'accueil

Exercice 0 | Exercice 1 | Exercice 2 | Exercice 3 | Exercice 4 | Exercice 5 | Exercice 6 | Exercice 7 | Exercice 8

Exercice 4 :

cahier des charges :

• utilisation des frames.
• une page d'accueil qui appelle 3 pages en html avec fenêtre.
• Faire une frame d'accueil horizontale qui comprend le logo de l'Université Paris 7, et le logo de visio p7 (ART).
• Un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires dans la page principale.
• Faire une frame de menu verticale avec 3 liens qui renvoi vers les pages 1, 2 et 3 du site.
• Chaque click ne changent que la frame principale.
• les pages doivent être mise en ligne.
• Sur toutes les pages il doit y avoir visibles les liens vers les autres pages et l'indication de la page active.

Charte graphique et règles de navigation :

• la page doit contenir le logo de Paris 7 au même endroit. Fond et police libre
• chaque page doit avoir une couleur de fond différente
• les liens pour accéder aux autres pages doivent toujours se trouver au même endroit.
• Il ne doit pas avoir de liens de la page active vers elle-même
• il doit y avoir des rollovers textes pour les liens sur les autres pages à l'exception de la page active
• il doit avoir le logo sur chacune des pages et au même endroit ;
• le click sur le logo doit renvoyer vers la page d'accueil

Exercice 5 :

cahier des charges :

• utilisation des frames.
• une page d'accueil qui appelle 4 pages en html avec fenêtre.
• Faire une frame d'accueil horizontale qui comprend le logo de l'Université Paris 7, et le logo de visio p7.
• Un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires dans la page principale.
• Faire une frame de menu verticale avec 5 liens.
• Le click 1 change la frame principale.
• Le click 2 le bandeau haut.
• Le click 3 le bandeau gauche.
• Le click 4 change tout mais reste en frame de même nature, même taille et même charte graphique.
• Le click 5 permet de retrouver la page initiale de l'exercice 5.
• les pages doivent être mise en ligne
• Sur toutes les pages de gauche il doit y avoir visibles les liens vers les autres pages et chaque page l'indication de la page active.

Charte graphique et règles de navigation :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libre
• chaque page doit avoir une couleur de fond différente
• les liens pour accéder aux autres pages doivent toujours se trouver au même endroit.
• il ne doit pas avoir de liens de la page active vers elle-même.
• il doit y avoir des rollovers textes pour les liens sur les autres pages à l'exception de la page active.
• il doit avoir le logo sur chacune des pages et au même endroit.
• le click sur le logo doit renvoyer vers la page d'accueil.
• les frames doivent être en couleur.
• les bordures de frames doivent être en couleur.

Exercice 6

• DHTML et javascript.
• faire une page avec un titre qui se déplace du haut de la page pour atteindre le milieu.
• page en html sans fenêtre.
• faire une page d'accueil qui comprend le logo de l'Université Paris 7,
• un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires.
• faire un lien qui renvoi vers le site du DESS ou de Paris 7.
• la page doit être mise en ligne.

charte graphique :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libres.

Exercice 7

• Intégration d'une source audio ou vidéo.
• Page en html.
• Faire une page d'accueil qui comprend le logo de l'Université Paris 7.
• un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires.
• Faire un lien qui renvoi vers une source vidéo en streaming ou en téléchargement.
• la page doit être mise en ligne.

charte graphique :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libres.

Exercice 0 | Exercice 1 | Exercice 2 | Exercice 3 | Exercice 4 | Exercice 5 | Exercice 6 | Exercice 7 | Exercice 8

Exercice 8 : exercice de synthèse

cahier des charges :

• utilisation des frames, insertion de lien vidéo et open window en javascript.
• une page d'accueil qui appelle 4 pages en html pur sans langage de script avec fenêtre.
• Faire une frame d'accueil horizontale qui comprend le logo de l'Université Paris 7, et le logo de visio p7.
• Un avertissement signalant qu'il s'agit d'exercices pédagogiques universitaires dans la page principale.
• Faire une frame de menu verticale avec 3 liens qui renvoi vers les pages 1, 2 et 3 du site.
• Le click sur la page 1 change la frame principale.
• Le click sur la page 2 le bandeau haut.
• Le click sur la page 3 le bandeau gauche.
• Le click sur la page 4 change tout mais reste en frame de même nature, même taille et même charte graphique.
• Dans la frame principale faire un lien vers 3 vidéos.
• Le premier est un lien direct.
• Le deuxième est une open window de taille fixe et sans aucun menu ni redimensionnement.
• Le troisième ouvre une open window redimensionnable avec barre de menu.
• Les pages doivent être mise en ligne.
• Sur toutes les pages il doit y avoir visibles les liens vers les autres pages et l'indication de la page active.

Charte graphique et règles de navigation :

• la page doit contenir le logo de Paris 7 au même endroit que sur le site de l'Université. Fond et police libres.
• chaque page doit avoir une couleur de fond différente.
• les liens pour accéder aux autres pages doivent toujours se trouver au même endroit.
• Il ne doit pas avoir de liens de la page active vers elle-même.
• il doit y avoir des rollovers textes pour les liens sur les autres pages à l'exception de la page active.
• il doit avoir le logo sur chacune des pages et au même endroit.
• le click sur le logo doit renvoyer vers la page d'accueil.
• les frames doivent être en couleur.
• les bordures de frames doivent être en couleur.
• les open windows doivent avoir un fond de couleur différente.

page perso Gabriel Rosenthal | corrigés du 25 11 02 exo1 | exo2 | exo3 | exo4 | exo5 | exo6 | exo7 | exo8 |