DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.

Présentation au sujet: "DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne."— Transcription de la présentation:

1 DreamWeaver Séance 2 HMIDA Ahmed A2008

2 Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne

3 Les calques Le calque est un «contenant» (images, du texte, des tableaux, des formulaires…) dont on peut définir la taille et l’emplacement exact sur la page. Considéré comme un objet. Avantages : la structuration d’une page : – les claques peuvent être manipulés séparément alors que les cellules d’un tableau sont dépendantes, – les calques peuvent se superposer. Associés aux comportements et à la fonction scénario, les calques permettent de générer de l’interactivité

4 Les calques <div id="Layer1“ style="position:absolute; left:281px; top:28px; width:156px;height:35px; z-index:1“>

5 Les calques 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

6 Récupérer le dossier « USA.zip » sur wwwetu.utc.fr/~si28p009 ; Créer une nouvelle page html ; Dessiner 4 calques : - 1 calque avec un titre « Yes We Can !! » - 1 calque avec une image (« obama2 »); - 1 calque avec du texte (titre en puis une liste ) - 1 calque vide. Faire varier les différents paramètres des calques.

7 Feuilles de styles CSS = Cascading Style Sheets = feuilles de style en cascade 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. En cas de modification, elle permet de générer le changement sur plusieurs pages. Exemple : http://csszengarden.comhttp://csszengarden.com

8 Feuilles de styles Nouvelle règle CSS Ajouter une propriété pour la balise sélectionnée Type de la balise Nom de la balise

9 Feuilles de styles

10 Créer une feuille de style appelée « obama » avec: – 1 style « classe » appelé « amérique » (utiliser comme arrière plan l’image « drapeau usa »); – 1 style pour la balise « h2 »; – 1 style pour la balise « li » (utiliser comme puce l’image « puce »).

11 Les modèles Principe : créer une feuille modèle (.dwt) possédant des régions modifiables, qui va pouvoir être réutilisée sur des documents html. Utilité : un seul document à mettre à jour. Pour le modèle : – Faire la mise en page voulue. – Créer les zones modifiables et non modifiables. Région modifiable, répétée & facultative

12 Les formulaires Ils permettent à l’utilisateur de saisir des informations qui seront envoyées à un autre fichier afin de les traiter Exemple d’utilisation :

13 Les formulaires Zone de texte Champ de texte Liste/MenuBoutons radio Case à cocher ImageFichier

14 Dans le calque vide, insérez: 2 zones de texte « Nom » et « Prénom »; 1 liste pays d’origine; 1 bouton « Yes I can » qui a pour action « envoyer », 1 bouton « No I can’t » qui a pour action « rétablir le formulaire».

15 Les 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,…

16 Les comportements ÉvénementsExplication onAbort Lorsque l'utilisateur appuie sur le bouton stop du navigateur, alors que tout n'est pas encore chargé. onBlurLorsque l'élément perd le focus. onChangeLorsque la valeur de l'élément est modifiée onClickLorsque l'utilisateur clique sur un élément onDblClickLorsque l'utilisateur clique deux fois sur un élément onError Est approprié pour capter les messages d'erreur et les remplacer par des messages personnalisés onFocusLorsque l'utilisateur active un élément. onKeydownLorsque l'utilisateur appuie sur une touche onKeypressLorsque l'utilisateur maintient une touche appuyée onKeyupLorsque l'utilisateur relâche une touche onLoadEntre en action quand un fichier HTML est chargé. onMouseDownLorsque l'utilisateur maintient la touche de souris appuyée. onMouseMouveLorsque l'utilisateur bouge la souris sur l'élément onMouseOverLorsque l'utilisateur passe sur l'élément avec la souris onMouseUpLorsque l'utilisateur, après avoir appuyé la touche de souris, la relâche. onSelectLorsque l'utilisateur saisit du texte onSubmitLors de l'envoi du formulaire

17 Mise en ligne 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 connexion Local/Réseau remplir les champs : Z:\ public_html Site ensuite visible sur : wwwetu.utc.fr/~login