Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.

Présentation au sujet: "Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008."— Transcription de la présentation:

1 Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008

2 Dreamweaver 2 Calque CSS Modèle Comportement Formulaire Mise en ligne Utilité des calques: De la même façon qu’un tableau, ils permettent de structurer une page. Les avantages de la structuration d’une page à l’aide de claques: - les claques peuvent être manipulés séparément alors que les cellules d’un tableau sont dépendantes, - les calques peuvent se superposer. 1. Les calques 2 Dreamweaver 2

3 Les propriétés d’un calque: G= position à partir du bord gauche S= position à partir du bord haut (S=sommet) L= largeur H= hauteur Partie visible du calque sur le navigateur si sa taille est supérieure à celle de la fenêtre: Visible = redimensionner pour que tout soit visible Hidden = couper le contenu non visible Scroll = insertion de 2 barres de défilement « Couche » du calque: Un claque d’index 2 est au dessus d’un calque d’index 1 3 Calque CSS Modèle Comportement Formulaire Mise en ligne

4 Dreamweaver 2 Le code: <div id="Layer1" style="position:absolute; left:281px; top:28px; width:156px; height:35px; z-index:1“ > Contenu Le suivi des calques: Calque visible ou invisible Ordre des calques (possibilité de modifier cet ordre à l’aide de drag and drop de la ligne) 4 Calque CSS Modèle Comportement Formulaire Mise en ligne

5 Dreamweaver 2 Exercice : Manipulation des calques > Créer plusieurs calques: > Remplir ces calques > Déplacer les calques > Changer l’ordre de superposition (drag and drop de la ligne) > Empêcher/permettre le chevauchement > Rendre un claque visible/invisible 5 Calque CSS Modèle Comportement Formulaire Mise en ligne

6 Dreamweaver 2 Feuilles de styles Fichier de mise en forme d’une page (texte, image, tableaux, calques,…) Permet de définir le style d’une page ou plusieurs pages (police, couleurs, mise en forme) Définition du style interne/externe  fichier à part ou style intégré dans le document En cas de modification, elle permet de générer le changement sur plusieurs pages d’un coup Exemple : http://csszengarden.com 6 Calque CSS Modèle Comportement Formulaire Mise en ligne

7 Dreamweaver 2 7 Avantages Gestion simplifiée et économique : une seule feuille de style pour toutes les pages  aisément modifiable) On ne modifie plus que la feuille de style si on veut changer la mise en forme de tout un site Internet. Allègement du code-source des pages Web Possibilité de doter une page de présentations alternatives au choix de l'utilisateur Calque CSS Modèle Comportement Formulaire Mise en ligne

8 Dreamweaver 2 8 Exemple #cadre { position:absolute; left:234px; top:468px; width:164px; height:171px; z-index:1; color:#0000FF; background-color:#FFFFFF; } Calque CSS Modèle Comportement Formulaire Mise en ligne

9 Dreamweaver 2 9 Exercice Calque CSS Modèle Comportement Formulaire Mise en ligne 1.Récupérer le fichier html existant 2.Identifier les différents éléments à mettre en forme 3.Définir largeur 4.Créer le style pour la balise 5.Modifier le style de #logo_ut 6.Modifier le style du tableau (couleur blanc, fond bleu) 7.Modifier le style des liens 8.Style de la balise 9.Ajout du cadre photo 10.Ajout de la photo

10 Dreamweaver 2 Utilité des modèles : Créer plusieurs pages à partir d’un même modèle. Mise à jour rapide: en modifiant la base du modèle on modifie toutes les pages créés à partir de ce modèle. Composition d’un modèle: > Des zones identiques à toutes les pages : par défaut, tout ce qui est contenu dans un modèle se retrouve non modifiable dans la page créée à partir de ce modèle. > Des zones propres à chaque page : insertion de régions modifiables, répétées ou facultatives. 10 3. Les modèles Calque CSS Modèle Comportement Formulaire Mise en ligne

11 Dreamweaver 2 Les différentes régions: > Les régions modifiables sont des zones qui pourront être complétées différemment dans chaque page. > Il est possible de définir des régions répétées, dont le but est de spécifier des éléments dans le modèle, et de reproduire à volonté ces éléments dans la page créée sur ce modèle. > Une région facultative permet de décider si des éléments doivent s'afficher ou être masqués dans les documents basés sur le modèle. (modifier/propriétés du modèle) Code d’une région modifiable Contenu Calque CSS Modèle Comportement Formulaire Mise en ligne

12 Dreamweaver 2 Exercice Création d’un modèle: > Fichier/nouveau/onglet général/modèle HTML : création d’un fichier.dwt > Créer les zones communes à toutes les page (insertion des images « menu » et « Dreamweaver » dans 2 claques) > Insérer une région modifiable dans le calque du centre > Enregistrer le modèle Calque CSS Modèle Comportement Formulaire Mise en ligne

13 Dreamweaver 2 Créer plusieurs pages à partir de ce modèle : > Fichier/nouveau/ onglet modèle/ choix du modèle > Modifier la zone centrale et observer que l’on ne peut pas modifier les autres zones (dans le code, seul ce qui n’est pas en gris clair est modifiable). Modifier les pages en modifiant le modèle : > Ajouter d’autres types de zone (répétées ou facultatives). > Enregistrer le nouveau modèle et choisir de mettre à jour les pages créées à partir de ce modèle. > Observer les pages. Calque CSS Modèle Comportement Formulaire Mise en ligne

14 Dreamweaver 2 14 4. Les comportements Utilité des comportements : Les comportements permettent d’ajouter de l’interactivité à un site. Par exemple, ils peuvent permettre à l’utilisateur de rendre un calque invisible, de déplacer un calque, de lire un son,… Calque CSS Modèle Comportement Formulaire Mise en ligne

15 Dreamweaver 2 15 Evénements: Les comportements sont définis en fonction de l’action de l’utilisateur ou du navigateur Quand l’utilisateur arrête le téléchargement d’un doc Quand l’utilisateur clique en dehors d’une zone -------------------------- sur un élément (=lien) --------------------------deux fois sur un élément Quand le navigateur rencontre une erreur Quand un téléchargement se termine Quand l’utilisateur déclenche le bouton de la souris ----------------- bouge la souris sur l’élément spécifié Quand le pointeur sort de l’élément spécifié Quand le pointeur passe sur l’élément spécifié Quand un bouton de la souris est relâché Calque CSS Modèle Comportement Formulaire Mise en ligne

16 Dreamweaver 2 16 Exercice: utilisation du comportement « Afficher/Masquer un claque » > Démonstration de l’objectif à atteindre > Ouvrir le document comportement_debut.html > Sélectionner le texte du calque « VisibleAuDébut » > Lui attribuer les comportements suivant: > Modifier l’événement de ce comportement, sélectionner « MouseOver » Calque CSS Modèle Comportement Formulaire Mise en ligne

17 Dreamweaver 2 > Sélectionner le texte du calque « InvisibleAuDébut » > Lui attribuer les comportements suivant: > Modifier l’événement de ce comportement, sélectionner « MouseOver » > Il ne reste plus qu’à rendre le calque « InvisbleAuDebut » invisible Calque CSS Modèle Comportement Formulaire Mise en ligne

18 Dreamweaver 2 18 5. Les formulaires Contenu du formulaire (boutons, champs de texte, texte,….) Utilité des formulaires : Les formulaires permettent d’obtenir des informations sur l’utilisateur (exemples: réutilisation du prénom, accès limité à l’aide d’un login et d’un mot de passe) Calque CSS Modèle Comportement Formulaire Mise en ligne

19 Dreamweaver 2 19 Calque CSS Modèle Comportement Formulaire Mise en ligne

20 Dreamweaver 2 20 Calque CSS Modèle Comportement Formulaire Mise en ligne Exercice

21 Dreamweaver 2 21 Calque CSS Modèle Comportement Formulaire Mise en ligne 5. Mise en ligne Mise en ligne du site via l’UTC : Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Donner un nom au site Choisir ou non une technologie serveur Définir l’emplacement local du site Choisir le mode de connection Local/Réseau remplir les champs : Z:\ public_html Site ensuite visible sur : wwwetu.utc.fr/~login