Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements

Présentation au sujet: "Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements"— Transcription de la présentation:

1 Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Scénario Modèles Gestion du site

2 Feuilles de Style CSS Les feuilles de styles permettent d’établir des règles précises de mises en formes qui seront applicables à différents documents (choix de la police, format des tableaux et des calques…). CSS =  Cascading Style Sheet = Feuille de styles en Cascade Le terme « en cascade » signifie qu’il est possible d’appliquer plusieurs feuilles de style à une même page Web.

3 Feuilles de Style CSS Modifier une feuille de style
Supprimer une feuille Attacher une feuille de style Ajouter une feuille

4 <link href=“fichier.css" rel="stylesheet" type="text/css">
Feuilles de Style CSS Insertion d’un fichier CSS: <link href=“fichier.css" rel="stylesheet" type="text/css"> Insertion dans le fichier HTML: <style type="text/css"> <!— Code ici --> </style>

5 Feuilles de Style CSS h1 { color: #000099;
Propriété Valeur h1 { color: #000099; text-decoration: underline line-through; font-family: Arial, Helvetica, sans-serif; } Propriétés CSS:

6 Feuilles de Style CSS

7 Feuilles de Style CSS Pour sélectionner un style personnalisé prédefini: Dreamweaver insère automatiquement des styles CSS dans la page html quand on formate un text.

8 Formulaires Objectif: Permettre à l’utilisateur de saisir des données.
Exemples: formulaire d’inscription, QCM, etc…

9 Formulaires dans DW Pour ajouter un formulaire:

10 Objets des formulaires
Etiquette et jeu de champs Champs image, fichier,boutons Menus Cases à cocher et boutons radio Champs de texte Insertion balises form

11 Les Méthodes Méthode GET:
Avec cette méthode on est limité en taille. C’est la méthode utilisée par le navigateur sur internet. Méthode POST: Pour des formulaires qui ont besoin d’envoyer beaucoup de données.

12 Les Calques C’est un élément qui permet de superposer différents objets dans une page sur différents plans. Il est possible d’insérer du texte, des images, des tableaux…

13 Propriétés d’un calque
Position du calque (en pixel) G: Par rapport au haut de la page S:Par rapport au bord gauche Largeur et Hauteur du calque Index de position 1: au premier plan 2: au deuxième plan … Permet de choisir un arrière plan pour le calque que ce soit une couleur ou une image Nom du calque Permet de rendre visible ou invisible un calque 4 possibilités de traiter le débordement du contenu d'un calque : - Visible : le navigateur redimensionnera le calque pour que tout le document 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)

14 Chevauchement et imbrication
Chevauchement des calques: - Créer un premier calque sur la page - Positionner le point d'insertion du second calque à l'intérieur du calque existant - Créer le second calque en plaçant son coin inférieur droit l l’extérieur du premier. Si au contraire on veut empêcher le chevauchement de calques, cocher la case empêcher le chevauchement dans la palette Calque pour la création de calques ultérieurs. Calques imbriqués: Le code html décrivant le calque imbriqué sera à l'intérieur du code du calque parent. - Créer le premier calque - Créer un deuxième calque dont le point d'insertion sera à l'intérieur du premier en maintenant la touche Ctrl du clavier enfoncée.

15 Comportements Faire du javascript, sans connaître le javascript.
Pour tout comportement, il faut: - Un objet: calque, image, bouton, objet flash, etc… - Un événement: un clic, un survol d’image, etc… - Une action: afficher ou cacher une image, un menu, etc…

16 Comportements dans DW Pour ajouter un comportement il faut sélectionner un objet et puis dans le menu « Comportements » il faut choisir l’événement que l’on veut et lui associer une action.

17 Exemples d’événements
Permet de déclencher une action lorsque l’on clique sur l’objet sélectionné. Permet de déclencher une action lorsque la souris survole l’objet sélectionné.

18 Scénarios Les scénarios servent à réaliser de petites animations sans connaître JavaScript ou DHTML. Les animations sont déclenchées par des comportements. Les animations sont définies dans une « Timeline » semblable à celle de Flash. Les objets des animations doivent être définis dans un calque.

19 Scénarios Choix de l’image Nom du scénario
Nombre d’images par secondes Options Echelle chronologique Affichage des objets (calques) Barre des comportements

20 Scénarios Déplacement d’un calque Animation d’une image
- Sélectionner le calque à animer - Avec un cliquer-glisser, ajouter le calque à la barre d’animation - Ajouter une image clé - Déplacer le calque à l’aide de la souris, un trait noir apparaît entre l’image de départ et d’arrivée: c’est le parcours de l’animation. Animation d’une image - Sélectionner l’image - Avec un cliquer-glisser, ajouter l’image à la barre d’animation - Dans les propriétés de l’image modifier la source.

21 Modèles Définir une page en modèle permet de réutiliser celle-ci en ne modifiant que quelques zones prédéfinies. Si on change le modèle, toutes les pages réalisées à partir de celui-ci seront modifiées automatiquement par DW.

22 Modèles dans DW Dans DW on a la possibilité de créer des modèles et des modèles imbriqués. Dans le menu des modèles on peut choisir entre une zone modifiable, une zone répétée, une zone facultative, une zone facultative modifiable, un tableau répété.

23 Modèles Création du modèle Création des fichiers basé sur ce modèle
- Fichier > Nouveau… > Page HTML - Créer le modèle avec les différentes zones (modifiables, répétées, …) - Fichier > Enregistrer comme modèle… Création des fichiers basé sur ce modèle - Fichier > Nouveau… - Dans l’onglet Modèles sélectionner le Modèle créé - Modifier à souhait puis enregistrer.

24 Gestion du site Dreamweaver permet de mettre en ligne le site entier de façon simple et efficace.

25 Gestion du site L’adresse du site sera: