Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX

Les modèles (templates) 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 implique que toutes les pages réalisées à partir de celui-ci seront modifiées automatiquement. Mieux que les Frames, plusieurs modèles peuvent être crées pour changer l’affichage du site!

Les modèles : Création 1) Selectionnez Fichier dans la barre de droite 2) Sélectionnez l’onglet Actifs 3) Sélectionnez Modele en Cliquant sur l’icône: Ou alors: créer une nouvelle page, puis l’enregistrer comme suit: Fichier/Enregistrer comme modèle…

Les modèles: Les opérations de base: les opérations élémentaires sont les suivantes: 1)Zone modifiable dans le modèle 2)Enregistrer son modèle 3)Utiliser le modèle pour créer d’autre pages 4)Modifier le modèle et l’ensemble des pages du site

Les modèles: Zones modifiables 1)Toujours sélectionner des zones modifiables, sinon le modèle ne pourra jamais être modifié! créer une zone modifiable: onglet modèle Sélectionner la zone et lui donner un nom Selectionner une zone modifiable

Les modèles: Enregistrer son modèle 2) On enregistre la page comme modèle: Fichier/ Enregistrer comme modèle Format:.dwt

Les modèles: Utilisation du modèle: 3)Réutilisation du modèle pour de nouvelles pages: Aller dans Fichier et cliquer sur l’onglet Modèle: le modèle apparaitra: format.dwt selectionner L’onglet « Modèles »

Les modèles: modification du modèle Il suffit d’ouvrir son modèle (dans le repertoire template) On modifie le fichier modèle puis on l’enregistre Pour mettre à jour toutes les pages utilisant le modèle: Modifier / Modèles / mettre à jour les pages

Les modèles: Exemple Etape 1: créer un nouveau site

Etape 2: création de la page modèle: mettre une bannière et un texte

Etape 3: Choisir d’enregistrer la page comme modèle (Fichier/ enregistrer comme)

Donner un nom au modèle: ici le nom est MonModele

Etape 4: Sélectionnez une zone à modifier et donnez lui un nom choisissez l’onglet Modèles et l’icône région modifiable

La zone modifiée apparaît alors sur fond bleu, délimitée par un Cadre. Remarque: n’oubliez pas de sauvegarder votre modèle après avoir Sélectionné vos zones modifiables!! Pour sauvegarder, Fichier/ enregistrer (DW sait que ce fichier est un modèle de par son extension)

Etape 5: Créer une nouvelle Page Fichier/ Nouveau

Pour se servir Du modèle, On choisit l’onglet Modèle: Votre modèle s’y Trouve: Choisissez le Et cliquez sur Créer

Ecrire un texte et y insérer une image puis enregistrer la page normalement

De la même manière, on crée une deuxième page à partir du modèle.

Ensuite on recharge notre modèle pour le modifier On lui ajoute des liens vers les 2 pages créées précédemment

Créez un premier lien Hypertexte vers la premiere page crée

Créez un deuxième lien HyperTexte vers la page 2

Pour que toutes les pages utilisant le modèle bénéficient de ces changements: Modifier/ Modèles/ Mettre à jour les pages Ne pas oublier de sauvegarder chaque page ensuite!!!

Définition d’un calque Le calque est un élément de page HTML sous forme de rectangle modulable Il permet une superposition des objets et rend ainsi plus faciles les actions sur chacun de ses objets On peut y insérer du texte, des images, des tableaux, des calques, …

Création d’un calque Cliquez sur Insertion puis Calque Ou Cliquez sur l’icône Dessiner un calque dans la barre d’outils. Cliquez dans la zone de travail et faites glisser la souris pour donner une taille à votre calque

Sélection d’un calque La poignée de sélection du calque La bordure du calque Le marqueur de calque Il est possible également de sélectionner un calque en cliquant sur son nom dans l’inspecteur des calques. Pour afficher ce panneau, appuyez sur F2. Remarque : la multi-sélection s’effectue en maintenant la touche MAJ enfoncée

Propriétés d’un calque Nom du calque Type de balise HTML G: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) W: hauteur L: largeur dimensions Couleur d’arrière plan Conditions de déroutage Visibilité Indice de superposition du calque Image d’arrière plan Débordement du contenu du calque

Alignement de calques Lorsque plusieurs calques sont dessinés sur la page, il est possible de les aligner. Sélectionnez les puis allez dans le menu Modifier > Aligner > Gauche (par exemple) 

Imbrication de calques On peut également imbriquer 2 calques. Placez vous dans un 1 er calque déjà créé. En utilisant le menu, cliquez sur Insertion puis Calque Ou Maintenez la touche Alt enfoncée et dessinez un 2 ème calque à l’intérieur du 1 er calque

Visibilité des calques Par défaut, un calque est visible. Dans le cas de calques imbriqués, les calques fils héritent de la visibilité de leur calque parent. Vous pouvez modifier la propriété de visibilité dans le panneau de propriétés des calques Default : (aucune propriété par défaut) le calque est visible Inherit : le calque hérite de la visibilité de son calque parent Visible : le calque est visible Hidden : le calque est masqué Le changement de la propriété Visibilité peut se faire également à partir de l’inspecteur (Rappel : F2 pour l’afficher) Calque visible Calque masqué

Superposition de calques L’index Z est l’indice de superposition des calques. Plus cet indice est élevé, plus le calque se rapproche du premier plan. Z = 2 Z = 1 Z = 2 Il existe 3 façons pour changer cet index Z Modifier directement l’indice dans le panneau de propriétés des calques Modifier directement l’indice dans l’inspecteur des calques Faire glisser les calques entre eux

Les comportements - Ajouter des fonctionalités au site. - INTERACTIVITE avec l’ultilisateur But: éléments de base: - objet (calque, image, bouton flash…) - événement (clic, survol…) - action (afficher une image, cacher le menu…)

Les comportements: création Remarque: Seuls les navigateurs postérieurs à Internet Explorer 4 peuvent interpréter les comportements Aller dans Fenetre/comportements Ou MAJ+F3 Ajouter un comportement Supprime un comportement Modifie l’ordre des actions associées à un même événement

Application de comportement Les comportements peuvent s’appliquer à: - des liens - des images - l’ensemble d’une page Web (cliquer sur Body en bas à gauche ) ATTENTION: on ne peut pas créer de comportement pour du texte mais on peut contourner le Problème en créant un lien sans redirection!

Comportement: exemple 1)Créer une nouvelle page

2) Insérer une image

3) - Sélectionner l’image en cliquant Dessus -Aller dans Fenetre Comportements Ou MAJ+ F3 si ce n’est déjà fait ( fais apparaître le menu en haut à droite)

4) Selectionnez une Action (touche +) ici on choisit: « intervertir une image »

5)L’action est apparu dans la liste des actions. Choisissez alors l’événements En faisant défiler l’onglet. ici on choisit « onclick » Visualisez le résultat avec F12