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

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.

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

<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>

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: http://fr.selfhtml.org/css/proprietes/index.htm

Feuilles de Style CSS

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.

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

Formulaires dans DW Pour ajouter un formulaire:

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

Les Méthodes Méthode GET: http://monhost.com/script.cgi?champ1=valeur1&champ2=valeur2 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.

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…

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)

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.

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…

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.

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é.

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.

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

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.

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.

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é.

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.

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

Gestion du site L’adresse du site sera: http://www4.utc.fr/~si28xxx