SI28 : Dreamweaver 2 Feuilles de styles Calques Template / Modèle Comportements Scénarios Mise en ligne Clément BLONDEL GSM04 Christelle CHATENET GB04.

Présentation au sujet: "SI28 : Dreamweaver 2 Feuilles de styles Calques Template / Modèle Comportements Scénarios Mise en ligne Clément BLONDEL GSM04 Christelle CHATENET GB04."— Transcription de la présentation:

1 SI28 : Dreamweaver 2 Feuilles de styles Calques Template / Modèle Comportements Scénarios Mise en ligne Clément BLONDEL GSM04 Christelle CHATENET GB04

2 Calque Définition : Les calques sont des éléments de page HTML sous forme de rectangle qui servent à structurer les pages. Ils peuvent être placés à n’importe quel endroit de la page web. Ils peuvent contenir n’importe quel objet (image, texte, formulaire, …)

3 Calque Insertion d’un calque Positionnement du calque en pixel G: Par rapport au bord gauche de la page S: Par rapport au haut de la page Taille du calque en pixel Type de débordement

4 Calque Il existe 4 manières de traiter le débordement du contenu d'un calque : Visible : le navigateur redimensionnera le calque pour que tout son contenu soit affiché à l'écran Hidden : le navigateur tiendra compte des dimensions du calque et coupera le contenu (le débordement ne sera pas affiché à l'écran) Scroll : insertion de 2 barres de défilement (horizontale + verticale) Auto : le navigateur utilisera ses options par défaut (hidden pour Netscape, scroll pour IE)

5 Calque – Exercices Superposition des calques Créer une nouvelle page Créer un calque pour y insérer l’image Créer ensuite un deuxième calques où vous y placerez un texte Faites en sortes que le texte et l’image soit superposés Découpage de la page en trois calque à positionner Un calque « haut » (logo, nom du site…) Un calque « menu » Un calque « contenu »

6 Modèle / Template But: Définir une page en modèle permet de réutiliser celle-ci en ne modifiant que quelques zones prédéfinies. Rendre le contenu homogène en gardant une même structure. Intérêt: Une modification du modèle = toutes les pages modifiées automatiquement Mise à jour massive d’un ensemble de pages Ajouter/modifier/supprimer une page en touchant qu’au contenu

7 Modèle / Template Création d’un modèle: Ajouter une région modifiable

8 Modèle / Template Par défaut, tout ce qui est contenu dans un modèle se retrouve non modifiable dans la page créée sur ce modèle. Pour pouvoir rendre des zones modifiables dans les pages créées sur le modèle, il faut définir dans le modèle des "régions modifiables" 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.

9 Modèle - Exercice Création d’un modèle Un fichier template gardant le découpage en calques Application de ce modèle sur plusieurs pages

10 Feuilles de Styles Une feuille de style est un fichier spécial qui définit la mise en forme du document. Elle permet une séparation entre le code HTML et le code de mise en page, d’où un allègement du code global. On parle de norme CSS (Cascading Styles Sheets) car il est possible d’utiliser les feuilles de styles en cascade. Deux types de feuilles de style : Interne : application d’un style à une page Les données sont stockées avec le code HTML de la page Externe : application d’un style à un site Fichier texte spécial stocké en dehors de la page HTML

11 Feuilles de Styles Avantages: Gestion simplifiée et économique (une seule feuille de style pour toutes les pages, aisément modifiable) Allègement du code-source des pages Web Possibilité de doter une page de feuilles de style spécifiques selon les médias (navigateurs graphiques, lecteurs d'écran…). Possibilité de doter une page de présentations alternatives au choix de l'utilisateur.

12 Feuilles de Styles Deux utilisations Définir un style personnalisé (classe) : Définition des attributs pour la mise en page du texte (police, taille, couleur, …) Redéfinir des balises HTML : Modification de l’interprétation des balises HTML existantes

13 Feuilles de Styles Code « style » <!-- // Code de styles --> Attacher une feuille de style externe

14 Feuilles de Styles Ajouter un nouveau style

15 Feuilles de Styles - Exercices Création d’une feuille de style externe puis appel dans le modèle Modification des propriétés (body, calques) Ajout de nouvelles propriétés (a lien, td tableau, h1 titre) Lien Internet Site avec explications et exemples de la manipulation des CSS avec Dreamweaver

16 Les formulaires Définition : Les formulaires permettent de saisir des informations qui pourront ensuite être stockées et traitées dans une base de données. Exemple d’utilisation: S’inscrire sur un site : Le visiteur saisit des informations le concernant. S’identifier sur un site :

17 Les formulaires Insertion d’un formulaire Menu de reroutage Champ de texte Zone de texte Case à cocher Bouton radio Groupe de bouton radio Formulaire Image Fichier Bouton Etiquette Jeu de champs Liste/Menu Champ masqué

18 Exercice formulaire

19 Les comportements Dreamweaver met à disposition des comportements qui permettent de réaliser de l'animation ou de l'interactivité dans la page en création. En général, le comportement est associé à un événement, et il réalise l'exécution d'un code Javascript inclus dans la page. Les comportements sont utilisables à partir de la fenêtre d'onglet (panneau) "Comportements" (shift+F3). Éléments de base: - objet (calque, image, bouton flash, page web entière…) - événement (clic, survol…) - action (afficher une image, cacher le menu…)

20 Les comportements 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

21 Exercice comportement Copier les deux images du répertoire: wwwetu.utc.fr/~cchatene/SI28 dans un fichier image que vous créerez à l’endroit de votre fichier dreamweaver. Insérer une image. Sélectionner l’image. Cliquer sur « ajouter un comportement ». Sélectionner « intervertir une image ». Dans la fenêtre de dialogue, aller chercher l’image que vous voulez charger. Sélectionner le comportement « onMouseOver » pour intervertir les images et « onMouseOut » pour la restauration de l’image initiale. Quand vous cliquez sur l’image faites que le son « le diner.mp3 » se lance.

22 Les scénarios Les scénarios servent à réaliser de petites animations sans avoir à connaître JavaScript. Les animations sont déclenchées par des comportements ou automatiquement et sont définies dans une « Timeline » semblable à celle de Flash. Les objets doivent être obligatoirement être définis dans un calque. Lecture automatique: évite d’avoir à définir un événement. Image clé Image actuelle Numéro du calque

23 Exercice Scénario Sélectionnez le calque modèle Ajouter le logo de l’utc dans un nouveau calque. Choisissez Modifier > Scénario > Ajouter un objet au scénario ou faite le glisser dans le panneau Scénarios. Une barre apparaît dans le premier canal du scénario. Le nom du calque ou de l'image y sera affiché. Cliquez sur l'indicateur d'image-clé, à la fin de la barre. Déplacez le calque sur la page à l'emplacement où il doit se trouver à la fin de l'animation. Une ligne apparaît pour indiquer la trajectoire de l'animation dans la fenêtre de document. Placez vous à la fin de votre barre de scénario Choisissez Modifier > Scénario > Enregistrer le chemin du calque Un autre scénario, c’est ajouter sur la timeline. Choisir des images dans la time line et modifier la taille du calque Enregistrer la page sous : scénario.html

24 Mise en ligne du site Mise en ligne du site par un serveur 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 FTP remplir les champs

25 Mise en ligne du site 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 Alors, votre site est visible par tous à l’adresse : wwwetu.utc.fr/~login Attention, avez-vous bien fait votre première page index ? …