Page 1

DREAMWEAVER- VERSIONS CS

LES FONDAMENTAUX

Roxane Formations http://www.roxaneformation.fr roxaneanquetil@gmail.com Tous droits réservés © - Roxane Formations – http://www.roxaneformation.fr


SOMMAIRE             

L’interface de travail – Page 3 Ouvrir et Créer son site web – Page 21 Pages Web – Page 31 Intégrer du texte – Page 36 Intégrer des feuilles de style – Page 63 Intégrer des images – Page 76 Intégrer des liens – Page 87 Intégrer des tableaux – Page 102 Intégrer des formulaires – Page 116 Intégrer des objets – Page 133 Créer des boîtes DIV – Page 160 Code HTML – Page 176 Mise en ligne du site – Page 186 Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Interface de travail

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Introduction générale – Page d’accueil, différentes possibilités – Création de pages dans différents langages :HTML, PHP, CSS, XML etc. – Ouvrir un document déjà crée – Accès à des tutoriels – Accès à des plugins : Dreamweaver Exchange – Nécessité de créer un nouveau site pour démarrer • Fichier => Nouveau Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • L’écran principal     

Mode classique Mode Codeur Mode Designer Mode double Affichage Pour réduire ou agrandir le dock, pointez l’un des bords gauches des panneaux : le pointeur de la souris prend la forme d’une double flèche. Cliquez et faites glisser dans le sens souhaité  Affichage -Barres d’outils -Documents (barre d’outils Documents)  Affichage -Barres d’outils - Standard (barre d’outils Standard) Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • La barre d’état – Taille de la fenêtre => pour modifier la taille de la fenêtre:  Cliquez sur la zone correspondante pour faire apparaître le menu déroulant  Edition(PC)/ Dreamweaver(Mac) – Préférences – catégorie Barre d’état

– Taille du document et temps de chargement  Pour paramétrer la vitesse de connexion, utilisez le menu Edition(PC)/ Dreamweaver(Mac) - Préférences – catégorie Barre d’état  Dans le menu déroulant Vitesse de connexion, choisissez une vitesse exprimée en kilobits par seconde

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Utiliser les règles – Afficher /masquer les règles : Affichage – Règles – Afficher – Choix de l’unité : Affichage – Règles – Pixels, Pouces ou Centimètres – Pour modifier l’origine de la règle, faites un cliqué-glissé depuis l’intersection des deux règles – Pour retrouver la position par défaut de l’origine:  Affichage – Règles – Rétablir origine

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Utiliser la grille – Afficher /masquer la grille :  Affichage – Grille – Afficher la Grille

– Pour « attirer» les objets sur la grille lors de leur positionnement :  Affichage – Grille – Aligner sur la grille

– Pour paramétrer la grille :  Affichage – Grille – Paramètres de la grille

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Utiliser les repères – Pour placer un repère horizontal ou vertical, effectuez un cliquéglissé à partir de la règle correspondante vers la page – Pour afficher la position d’un repère, activez l’outil Sélectionner dans la barre d’état et placez le pointeur sur le repère – Pour afficher les distances, activez l’outil Sélectionner, maintenez la touche Ctrl (PC) ou Commande (Mac) enfoncée et placez le pointeur sur la zone voulue – Pour gérer les repères, utilisez la commande Affichage -Repères

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Modifier le zoom – Pour afficher le code source, cliquez sur le bouton Création de la barre d’outils Document ou Affichage – Code – Vous pouvez aussi séparer votre écran en deux pour visualiser en même temps la page et le code, en cliquant sur Fractionner – Pour revenir au mode Création, cliquez sur le bouton Création – Pour basculer du mode Code au mode Création et inversement : Affichage – Basculer entre les affichages ou Ctrl $

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Choisir les navigateurs – Edition(PC)/Dreamweaver (Mac) – Préférences – catégorie Aperçu dans le navigateur  ou dans barre d’outils Document, cliquez sur l’outil liste des navigateurs

puis sur Modifier

– Pour ajouter un navigateur, cliquez sur le bouton + – Pour visualiser vos pages, Fichier – Aperçu dans le navigateur, cliquer sur le nom du navigateur  ou puis Aperçu dans « nom du navigateur »  ou raccourci-clavier F12

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Les menus            

Menu Fichier Menu Edition Menu Affichage Menu Insertion Menu Modifier Menu Texte Menu Commandes Menu Site Menu Fenêtre Menu Aide La partie inférieure de la fenêtre =>paramétrage Edition=>Préférence=>Barre d’état=>Définir les différentes tailles de fenêtre et la vitesse de connexion Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Les panneaux – Pour afficher un panneau : Fenêtre – nom du panneau ou, si son nom est visible dans le dock, cliquez sur son onglet – Pour réduire tous les panneaux en icônes, cliquez sur les deux flèches visibles dans la partie supérieure droite du dock. A l’inverse, pour afficher tous les panneaux sous forme d’onglets, cliquez à nouveau sur ces deux flèches – Menu options des panneaux : – Détacher un panneau :faites glisser l’onglet du panneau vers l’espace de travail – Détacher un groupe d’onglets, pointez la partie gris foncé à droite des onglets ,faites glisser dans l’espace de travail du document Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Les panneaux – Pour masquer tous les panneaux affichés : Fenêtre – Masquer les panneaux ou F4 – Pour les faire réapparaître : Fenêtre – Afficher les panneaux ou F4 – Enregistrer son propre environnement de travail : Fenêtre – Présentation de l’espace de travail – Nouvel espace de travail – Pour gérer vos environnements de travail : Fenêtre – Présentation de l’espace de travail – Gérer les espaces de travail

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Le panneau Insertion – Pour choisir la catégorie d’objets à insérer, ouvrez la liste des catégories (Commun, par défaut) et sélectionnez une autre catégorie

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Le panneau Propriétés – Ce panneau permet de visualiser, de modifier les propriétés les plus usuelles de l’élément sélectionné dans la page

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Le panneau Fichiers – Ce panneau permet de gérer les fichiers utilisés pour le site Web – Fenêtre – Fichiers ou F8 – Pour ouvrir un fichier double-cliquez sur son nom

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Le panneau Historique – Fenêtre – Historique ou Shift F10 (PC) – Pour rétablir des actions annulées, faites de nouveau glisser le curseur, cette fois vers le bas, jusqu’à l’étape souhaitée – Si seule la dernière action doit être annulée, utilisez la commande Edition – Annuler (Ctrl Z sous PC et Commande Z sous Mac) – Le nombre d’actions mémorisées peut être défini dans la zone Nombre maximum d’étapes d’historique de la boîte de dialogue Préférences (Edition (PC)/Dreamweaver(Mac)- Préférences – catégorie Général)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Interface de travail • Raccourcis claviers – Ctrl + N => Nouveau fichier (Commande + N sous MAC) – Ctrl + S => Enregistrer (Commande + S sous MAC) – Edition => Raccourcis clavier • En haut de cette fenêtre, différents jeux de raccourcis • Dans la fenêtre principale, vous allez pouvoir changer les raccourcis • Pour les utilisateurs de Mac – http://www.adobe.com/fr/support/dreamweaver/ts/documents/d9e 959b3.htm#f12

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Ouvrir et Créer son site web

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Définir un dossier racine: – – – – –

Cliquez sur Site=>nouveau site Cliquez sur l’onglet Avancé Dans la liste Catégories, sélectionnez Infos locales Dans le champ nom du site, saisissez le nom de votre site Utiliser le bouton Parcourir, à droite du champ Dossier racine local. Vous accédez alors aux différents lecteurs de votre disque dur. – Sélectionnez le dossier dans lequel Dreamweaver peut identifier tous les fichiers et dossiers entrant dans la composition de la structure du site

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web – Spécifiez le dossier des images par défaut soit en saisissant directement le chemin d’accès au dossier en question, soit en cliquant sur l’icône Parcourir – Sur la ligne Liens relatifs, laissez active l’option Document – Dans le champ adresse HTTP, saisissez l’URL de votre site Web, c’est-àdire son adresse Internet – Sélectionnez la case à cocher Utiliser vérification des liens sensibles à la casse (9) – Cochez la case Activer le cache (10) – Cliquez sur OK pour fermer la boîte de dialogue Définition du site et enregistrer vos définitions

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Enregistrer les fichiers – Pour enregistrer un document : Fichier – Enregistrer – Pour enregistrer une copie : Fichier – Enregistrer sous – Pour retrouver le document tel qu’il était au dernier enregistrement : Fichier – Rétablir – Pour enregistrer tous les fichiers ouverts : Fichier – Enregistrer tout – Attention ! Veillez à enregistrer les fichiers constituant votre site dans votre dossier local pour éviter des chemins d’accès absolu et faciliter leur gestion ! Si vous utilisez un fichier qui ne se trouve pas dans votre dossier local, Dreamweaver vous prévient.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Gestion des sites et des fichiers – Site – Gérer les sites

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Accéder à un site – Fenêtre – Fichier ou F8 – Ouvrez le menu déroulant des sites

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Gérer les fichiers/dossiers d’un site – Afficher le panneau Fichiers : Fenêtre – Fichiers ou F8 – Pour créer un dossier, sélectionnez le dossier racine et choisissez Fichier – Nouveau dossier dans le menu des options du panneau – Saisissez le nom du dossier et validez par Entrée – Lorsque vous créez une page web, celle-ci est automatiquement enregistrée dans le dossier racine du site. – Pour créer un fichier HTML dans un dossier précis, sélectionnez le dossier concerné et choisissez Fichier – Nouveau fichier dans le menu options – Nommez le fichier ,validez par Entrée – Pour renommer : Fichier – renommer – Pour déplacer : sélectionnez le fichier puis faites-le glisser

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Gérer les fichiers/dossiers d’un site – Pour dupliquer : Edition – Dupliquer – Pour actualiser la liste des fichier, cliquez sur du panneau Fichiers ou F5 – Pour supprimer un fichier, sélectionnez-le et appuyez sur Suppr : si le fichier intervient dans une page, Dreamweaver vous demande de confirmer la suppression

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Ouvrir et Créer son site web • Exercice – Ouvrir et Créer son site web – Créez un dossier que vous intitulerez formation_dreamweaver – Créez ensuite un site avec Dreamweaver qui pointera dans ce dossier – Créez par l’intermédiaire du panneau Fichier, un dossier que vous intitulerez images

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Pages Web

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Pages Web • Créer votre première page web – Fichier – Nouveau ou Ctrl N (PC) ou Commande N (Mac) – Dans la catégorie Page vierge, sélectionnez HTML dans la zone Type de page et <aucun> dans la colonne suivante – Modifiez, si besoin est, le type de document de référence dans la liste Type de document – Cliquez sur le bouton Créer – Enregistrer ensuite votre page (Fichier – Enregistrer )

• Attribuer un titre – Saisissez le titre dans la zone Titre de la barre d’outils Document – Pour le modifier : Modifier – Propriétés de la page ou Ctrl J (PC) ou Commande J (Mac) ou dans le panneau Propriétés, cliquez sur le bouton Propriétés de la page – Cliquez sur la catégorie Titre/codage – Tapez le texte souhaité dans la zone Titre, puis cliquez sur OK Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Pages Web • La mise en forme des pages avec les feuilles de style – Définir un arrière-plan • Créez un style CSS de type Sélecteur de balise sur l’élément HTML <body>. Dans la boîte de dialogue Définition des règles de CSS pour body, sélectionnez la catégorie Arrière-plan. • Pour insérer une image d’arrière-plan, dans la zone Background-image, cliquez sur le bouton Parcourir pour choisir une image • Pour définir une couleur d’arrière-plan, dans la zone de saisie Background-color, saisissez le code hexadécimal de la couleur ou son nom, ou cliquez sur le carré à gauche de la zone de saisie pour ouvrir le sélecteur de couleur • Dans le champ Background-repeat, précisez si l’image doit être répétée (repeat) ou non (no-repeat) ou si la répétition doit se aire horizontalement (repeat-x) ou verticalement (repeat-y) • Dans le champ Background-attachment, choisissez le comportement de l’image lors du défilement du contenu de la page web • Position dans les champs Background-position (x) et Background-position (y) Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Pages Web • La mise en forme des pages avec les feuilles de style – Définir la mise en forme des caractères • Cliquez si besoin sur la catégorie Type • Pour modifier la police de caractères par défaut, sélectionnez-la dans la liste FontFamily • Pour modifier la taille des caractères, sélectionnez une valeur dans le champ Fontsize • Pour appliquer une couleur de caractères, saisissez son code hexadécimal dans le camp Color ou cliquez sur le carré situré à gauche du champ pour la sélectionner dans le sélecteur de couleur – Définir les marges • Sélectionnez la catégorie Boîte • Utilisez la propriété Margin. Saisissez les valeurs souhaitées et modifiez si besoin, l’unité de mesure associée. • Cliquez sur bouton OK pour valider la modification du style de l’élément <body> Tousledroits réservés © - Roxane Formation - http://www.roxaneformation.fr


Pages Web • Exercice – Créer la première page de son site – Créez avec Dreamweaver une première page que vous enregistrerez dans le dossier formation_dreamweaver en tant que index.html – Donnez lui un titre par l’intermédiaire de la zone de titre – Appliquez un arrière-plan de la couleur de votre choix à cette première page

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer du texte

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Les principes généraux – Le codage des caractères La norme utf-8 permet d’uniformiser les caractères. Cela permet de ne plus coder les caractères quel que soit l’environnement utilisé ou qu’elle que soit la langue. • Pour définir la norme à utiliser pour les nouveaux documents, faites Edition (PC)/Dreamweaver(Mac) - Préférences • Sélectionnez la catégorie Nouveau document • Sélectionnez dans la liste Codage par défaut, l’option Unicode (UTF-8)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Les éléments HTML conteneurs de texte Votre texte quel qu’il soit doit être placé dans un conteneur de texte, en fait un élément HTML : en-tête, paragraphe, paragraphe de citation, texte pré-formaté et listes – Espaces entre les mots Par défaut, vous ne pouvez saisir qu’un seul espace entre les mots. Si vous désirez saisir plusieurs espaces, allez dans Préférences, catégorie Général et cochez l’option Autoriser plusieurs espaces consécutifs. Ces espaces consécutifs seront alors appelés des espaces insécables. – Caractères spéciaux Pour insérer des caractères spéciaux dans votre texte, allez dans le menu Insertion-HTML-Caractères spéciaux Choisissez le caractère à insérer. Choisissez Autre pour une liste plus complète Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Insérer un texte d’un autre programme – Nombreuses options permettant de conserver la mise en forme lors du copier/coller – Menu Edition (PC) ou Dreamweaver (Mac) – Préférences-Rubrique Copier /Coller – Collage Spécial • Texte Seul • Texte Structuré • Texte Structuré + Formatage de Base • Texte Structuré avec formatage complet • Conserver les sauts de ligne • Nettoyage des espaces inter-paragraphes de Word

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Utiliser des en-têtes – Les éléments d’en-tête permettent de structurer votre page web en plusieurs parties bien distinctes. – 6 niveaux d’en-tête allant de <h1> à <h6> – Menu Format - Format de paragraphe -choisissez En-tête 1 à En-tête 6 – Vous pouvez aussi utiliser la liste déroulante Format dans le panneau Propriétés.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Utiliser des paragraphes – Menu Format - Format de paragraphe, choisissez Paragraphe – Panneau Propriétés => avec le bouton HTML actif, la liste déroulante Format pour choisir Paragraphe – Pour aller à la ligne au sein du même paragraphe : Shift + Entrée – Autre possibilité : Insertion - HTML - Caractères spéciaux, choisir Saut de ligne

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Utiliser les citations de paragraphe – Les citations de paragraphe <blockquote> permettent de mettre en évidence un texte, en ajoutant un retrait à gauche et à droite de ce texte – Menu Format - Retrait – Vous pouvez aussi utiliser le bouton Retrait du texte, dans le panneau Propriétés, avec le bouton HTML actif – Pour supprimer la citation de paragraphe, dans le panneau Propriétés, cliquez sur le bouton Retrait négatif ou dans le menu Format, choisissez Retrait négatif

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Utiliser le texte pré-formaté – But : conserver les espaces supplémentaires insérés et les marques de tabulation – Menu Format - Format de paragraphe, choisissez Texte préformaté – Vous pouvez aussi utiliser la liste déroulante Format dans le panneau Propriétés, avec le bouton HTML actif

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Utiliser des listes Listes simples à puces, listes numérotées et les listes de définition – Les listes simples à puces Menu Format - choisissez Liste, puis Liste simple Vous pouvez aussi cliquer sur le bouton Liste simple dans le panneau Propriétés, avec le bouton HTML actif. A la fin de la saisie du 1er item de la liste, appuyez sur la touche Entrée pour saisir le 2nd item.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte – Les listes numérotées • Menu Format- choisissez Liste, puis Liste numérotée • Vous pouvez aussi cliquer sur le bouton Liste numérotée dans le panneau Propriétés, avec le bouton HTML actif

– Les listes de définition • Pour insérer une liste de définition, dans le menu Format, choisissez Liste, puis Liste de définition • Vous devez alors saisir le mot à définir. Appuyez sur la touche Entrée puis saisissez la définition du mot • Pour arrêter de saisir la liste de définition, appuyez deux fois sur la touche Entrée : vous accédez alors à un paragraphe

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Autres possibilités d’insertion de texte Vous pouvez insérer tous les conteneurs de texte que nous venons de voir à partir du panneau Insertion-HTML-Objets texte. Vous retrouvez alors les éléments HTML: -Paragraphe -Citation de paragraphe -Texte pré-formaté -les En-tête -les listes simples à puces -les listes numérotées -les items des listes -les éléments des Liste de définition

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • L’édition de texte – Effectuer une recherche simple ou évoluée • Edition -Rechercher et remplacer ou Ctrl F(PC) ou Pomme F(Mac) 1. 2. 3. 4. 5.

Indiquez où doit s’effectuer la recherche Option texte (recherche simple de texte) versus Option texte avancée (recherche sur un texte + sa mise en forme) Tapez le texte à rechercher Déterminez les critères de recherche si vous avez choisi Texte(avancé), sélectionnez balise interne si le texte recherché est formaté ou pas de balise interne si le texte recherché ne doit pas posséder la mise en forme de son code HTML Si vous avez choisi l’option Texte (avancé), ajoutez si besoin des critères de recherche

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte 6.

Activez les options : a. b. c. d.

7.

Lancez la recherche: e. f.

8.

Si la casse du document doit correspondre exactement à celle du texte à recherche Pour ignorer les espaces supplémentaire tapés dans la zone de saisie Pour rechercher un mot et non une occurrence de caractères Pour pouvoir utiliser les caractères « joker » dans la recherche Pour rechercher chaque occurrence l’un après l’autre, chaque occurrence étant sélectionnée dans le document Pour rechercher tous les occurrences en une seule fois => visualisation dans le groupe de panneaux Résultats, onglet Rechercher et vous pouvez atteindre une occurrence en cliquant dessus

Fermez la fenêtre de recherche tout en conservant les éléments de la recherche (Edition -Rechercher suivant pour relancer ou F3)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte •

Lancer la correction orthographique – –

Commandes - Orthographes ou Shift F7 Sélectionnez la bonne orthographe dans la zone Suggestions ou tapez le bon mot dans la zone Remplacer par – Cliquez sur : a. Pour remplacer uniquement cette occurrence b. Pour remplacer toutes les occurrences dans le document c. Pour ne pas faire de correction sur ce mot d. Pour ne plus faire de correction sur ce mot dans le document e. Pour ajouter ce mot à votre dictionnaire personnel

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La mise en forme des caractères – Mise en forme avec les styles classiques – Le gras, l’italique et l’emphase Par défaut, Dreamweaver utilise pour la mise en forme en gras et en italique les éléments <b> et <i>. Pour donner un sens au contenu à mettre en évidence (l’emphase), le W3C préconise d’utiliser les éléments <strong> et <em>. Pour gérer ce changement, allez dans les Préférences (menu Edition sous Windows et Dreamweaver sous Mac), catégorie général. Laissez l’option Utiliser <strong> et <em> au lien de <b> et <i> cochée

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La mise en forme des caractères – L’application des styles Pour mettre en forme votre texte, sélectionnez-le. Dans le menu Format – Style, choisissez Gras ou Italique. Vous pouvez aussi utiliser les boutons Gras et Italique dans le Panneau Propriétés, avec le bouton HTML actif. – Vous retrouvez ces styles, Gras, Italique, Forte accentuation et Accentuation, dans le panneau Insertion, dans la catégorie Texte

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La mise en forme des caractères – Pour appliquer un autre style, dans le menu Format-Style, choisissez : • Souligné (élément HTML <u>) • Barré (élément HTML <s>) • Télétype (élément HTML tt) pour une mise en forme avec une police à largeur fixe, type Courier Accentuer (<em>) ou Forte Accentuation (<strong>) •

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Les styles sémantiques Il existe d’autres styles qui permettent de donner du sens à votre texte : ce sont les styles sémantiques. Dans le menu Format - Style, choisissez: – – – – – – – –

Code : Indiquer que le texte est du code de programmation Variable : Indiquer que le texte est une variable de programmation Echantillon : Indiquer que le texte est un échantillon Clavier : Indiquer que le texte est saisi au clavier Citation : Indiquer que le texte est une citation Définition : Indiquer que le texte est une définition Effacé(e) : Indiquer que le texte a été effacé par rapport à une précédente version Insérée (e ) : Indiquer que le texte a été inséré par rapport à une précédente version Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • Les abréviations – Cette mise en forme permet d’afficher dans une bulle, le libellé complet d’une abréviation (élément HTML <abbr>) – Sélectionnez le texte de votre abréviation et dans le panneau Insertion, dans la catégorie HTML, objets Texte, cliquez sur Abréviation – Indiquez le libellé complet – Indiquez le code de la langue utilisée

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La mise en forme avec les styles CSS Un rappel sur les sélecteurs – Vous pouvez utiliser un sélecteur de classe, qui permet de créer un style, de définir ses propriétés et de l’appliquer aux sélections de votre choix. – Vous pouvez aussi utiliser les sélecteurs de balise qui permettent de redéfinir la mise en forme d’un élément HTML existant. – Par exemple, vous pouvez redéfinir la mise en forme de l’élément HTML <strong> pour qu’il apparaisse avec une couleur et un fond coloré. Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte – Pour créer un style, dans le document HTML enregistré, allez dans le menu Format=>Style CSS, choisissez Nouveau • Ou dans le panneau Styles CSS, cliquez sur le bouton Nouvelle règle CSS

– Renseignez les différentes informations puis cliquez sur le bouton OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La catégorie Type Cette catégorie contient les propriétés CSS relatives à la mise en forme des caractères (type en anglais) .

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La catégorie Arrière-plan Appliquer une couleur ou une image d’arrière-plan

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La catégorie Bloc Mettre en forme des caractères avec des propriétés d’espacement et de décalage

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La catégorie Boîte Une boîte est l’espace dans lequel est affiché l’élément HTML. Cette boîte peut, pour la mise en forme des caractères, être délimités par une bordure, il peut y avoir un espace entre la boîte, matérialisée par la bordure, et son contenu, le texte ainsi qu’un espace autour de la boîte.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer du texte • La catégorie Bordure Ces propriétés permettent d’appliquer des bordures sur tous les côtés de la boîte. Là encore vous pouvez avoir des bordures identiques ou différentes pour chaque côté.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des feuilles de style

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La mise en forme CSS des textes – Les sélecteurs utilisables • Sélecteurs de classe • Sélecteurs d’identifiant • Sélecteurs de balises • Pseudo-classes : sélecteurs servant à la mise en forme des liens hypertextes – Créer un style CSS • Format - Styles CSS-Nouveau – ou dans le panneau Styles CSS, cliquez sur le bouton Nouvelle règle CSS

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La mise en forme CSS des textes – Choisissez l’option: • Classe : Pour créer un style personnel auquel vous allez appliquer des éléments de mise en forme. Le nom des classes doit commencer par le caractère . (point) • Balise : Pour définir la mise en forme d’un élément HTML existant que vous sélectionnez dans le menu déroulant qui suit • ID : Pour créer des styles à usage unique par page • Composé : Pour définir dans un premier temps l’apparence des liens non visités (a:link), pointés (a:hover), au moment où l’utilisateur clique dessus (a:active) et des liens visités (a:visited)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La mise en forme CSS des textes – Si vous avez choisi l’option Classe ou ID, nommez le style et validez – Définissez la mise en forme à l’aide des options des différentes Catégories de la boîte de dialogue Définition des règles de CSS : • Type • Arrière-plan • Bloc • Boîte • Bordure • Liste • Positionnement – Cliquez sur OK – Les styles créés sont affichés dans le menu Format –Styles CSS et dans le panneau Styles CSS Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • Appliquer / Annuler un style – Pour appliquer un style, cliquez dans le texte (paragraphe, paragraphe de citation, en-tête) ou sélectionnez l’élément (élément de liste, élément de tableau et image) – Format – Styles CSS puis cliquez sur le nom du style ou, dans le panneau Styles CSS, cliquez sur le style voulu puis choisissez Appliquer dans le menu des options ou, dans le panneau Propriétés, sélectionnez le style à appliquer dans la liste Règle cible si le bouton CSS est actif, ou Classe si le bouton HTML est actif – Pour annuler l’application d’un style, sélectionnez l’élément qui utilise ce style puis choisissez Format – Styles CSS – Aucun. Dans le panneau Propriétés, avec le bouton CSS actif, dans la liste déroulante Règle cible, choisissez Supprimer la classe. Avec le bouton HTML actif, dans la liste déroulante Classe, choisissez Aucune.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • Modifier un style –

A l’aide de la boîte de dialogue Définition des règles de CSS

• Sélectionnez le style à modifier dans le panneau Styles CSS et cliquez sur le bouton • Faites les modifications voulues dans la boîte de dialogue Définition des règles de CSS pour et cliquer sur OK • Tous les éléments qui utilisent ce style sont mis à jour

– A l’aide du panneau Styles CSS (méthode avancée) • • • •

Fenêtre – Styles CSS ou cliquez sur le bouton CSS du panneau Propriétés Cliquez, si besoin, sur le bouton Tous Sélectionnez le style à modifier Cliquez sur le bouton pour afficher uniquement les propriétés de styles définies • Cliquez sur le champ de valeur de la propriété à modifier puis sélectionnez une autre valeur dans la liste ou saisissez-là Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Créer un fichier .css Il s’agit ici de créer un fichier pour la feuille de style pour votre site auquel toutes les pages feront référence pour pouvoir utiliser cette source unique de styles. • Créez un nouveau document • Format – Styles CSS – Nouveau ou dans le panneau Styles CSS, cliquez sur – Choisissez un type de la même façon que pour la création d’un style d’une page – Si vous créez un style personnalisé, nommez-le – Choisissez l’option (Nouveau fichier feuille de style) dans la liste déroulante – Validez

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Créer un fichier .css – A l’étape suivante, vous devez enregistrer le fichier de feuille de style – Précisez le Nom du fichier de la feuille de style puis cliquez sur le bouton Enregistrer – Ensuite, définissez le style créé – Dans la fenêtre de définition du style, indiquez les éléments de mise en forme de ce style et cliquez sur le bouton OK – Créez ensuite, dans le même fichier, les autres styles de la feuille de style – La feuille de style apparaît dans la fenêtre Styles CSS avec tous les styles associés – Si vous connaissez bien le HTML et le CSS, vous pouvez coder directement vos styles dans un fichier CSS : Fichier – Nouveau – catégorie Page vierge, choisissez CSS comme Type de page puis cliquez sur Créer. Saisissez le code puis enregistrez le fichier CSS.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Créer un fichier .css – Dreamweaver met à votre disposition des modèles de feuilles de style. Pour les utiliser, faites Fichier – Nouveau – catégorie Exemple de page-dossier Feuilles de Style en cascade. Choisissez un modèle et cliquez sur Créer. Enregistrez cette feuille de style dans le dossier de votre site. – Dans la boîte de dialogue Préférences, catégorie Styles CSS, vous pouvez paramétrer la syntaxe du code généré par Dreamweaver lors de la création ou de la modification des styles CSS et choisir Utiliser Forme courte : le code est plus concis et plus facilement exploitable par le programmeur

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Créer un nouveau style dans le fichier CSS précédemment créé Il s’agit de créer un nouveau style de la page HTML dans le fichier CSS créé précédemment. – Format – Styles CSS – Nouveau ou, dans le panneau Styles CSS, cliquez sur – Sélectionnez le Type de sélecteur, saisissez un nom – Dans la liste Définition de règle, sélectionnez le nom du fichier CSS créé précédemment – Cliquez sur le bouton OK – Définissez ensuite les propriétés du style

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Lier un fichier .css • Ouvrez le document HTML à lier • Format – Styles CSS – Attacher feuille de style ou dans le panneau Styles CSS, cliquez sur le bouton

• Depuis le panneau Propriétés avec le bouton HTML actif, l’option Joindre la feuille de style de la liste Classe permet aussi de lier une feuille CSS Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des feuilles de style • La création de feuilles de style externes – Lier un fichier .css • Pour supprimer une liaison , sélectionnez le nom de la feuille de style dans le panneau Styles CSS puis cliquez sur le bouton Rompre le lien vers la feuille de style CSS • Vous pouvez créer des styles particuliers pour une page, en plus de la feuille liée • Pour modifier un fichier CSS, accédez à un document lié à la feuille de style à modifier. Dans le panneau Styles CSS, sélectionnez le style à modifier. Cliquez sur le bouton pour effectuer les modifications • Si mise en page complexe, utilisant plusieurs feuilles de style externes liées, intéressant d’afficher/de masquer les styles provenant de fichiers .css: – Format – Styles CSS – Conception. Puis bouton + et -, pour ajouter/supprimer les fichiers CSS à utiliser dans la zone Afficher à la conception uniquement, et les fichiers CSS à masquer dans la zone Masquer à la conception Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des images

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • Ajoutez des images – Pour créer, convertir ou modifier vos images, un autre programme est nécessaire tel que Photoshop ou Fireworks – Dreamweaver sert juste à placer les images dans votre page – Avant l’insertion d’une image • Enregistrer sa page • Créer un dossier images • Attention ! Utiliser toujours le panneau fichiers pour déplacer ou renommer des éléments

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • Les chemins d’accès aux images – Les chemins absolus • Le chemin absolu précise l’url complète d’accès à la source, par exemple: http://www.monsite.fr/images/desert.jpg • Vous utilisez des liens absolus quand vous faites référence à une ressource qui se trouve en dehors du dossier de votre site

– Les chemins relatifs au document • Le chemin relatif au document indique le chemin d’accès à la ressource par rapport au document

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • Insertion d’une image – Cliquez à l’endroit où vous voulez mettre l’image et placez-y votre curseur – Cliquez sur le panneau Insertion (en haut à droite de l’espace de travail) – Cliquez sur l’icône Image de la section Commun – Naviguez vers le dossier où se trouve l’image à insérer. Double-cliquez sur ce dossier pour le sélectionner – Tapez un texte secondaire dans la boîte de dialogue Attributs des balises d’image – OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • Insertion d’une image – Cliquez sur l’image que vous venez d’insérer dans votre page web – Utilisez l’inspecteur Propriétés pour définir les attributs de l’image (alignement, espacement vertical ou horizontal, texte secondaire etc.) – Attention ! Bien qu’il est possible de modifier la taille de l’image via Dreamweaver, cela est déconseillé! – Distribution d’un document récapitulatif des attributs des images dans l’inspecteur Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • Insertion d’une image au format Photoshop – Lorsque vous insérez une image au format natif de Photoshop (.psd), une boîte de dialogue apparaît pour que vous puissiez optimiser cette image – Choisissez le Format d’optimisation de l’image dans la liste correspondante – Choisissez les options du Format Jpeg, Gif ou Png – Taille de l’image: • Pour optimiser la taille de l’image, cliquez sur le bouton • Pour réduire ou augmenter la taille de l’image, cliquez sur l’onglet Fichier puis effectuez une mise à l’échelle proportionnelle à l’aide de la liste % ou spécifiez la largeur de l’image dans la zone L et sa hauteur dans la zone H ; cochez l’option Contraindre les proportions pour conserver les proportions de l’image • Cliquez sur OK • Une fois l’image insérée, vous pouvez retrouver ces propriétés en utilisant la commande Modifier – Image – Optimiser ou du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • La modification d’une image – Modifier une image provenant de Photoshop • Dans Dreamweaver, sélectionnez l’image concernée puis cliquez sur le bouton Edition visible à droite de l’option Modifier dans le panneau Propriétés • L’application Adobe Photoshop s’ouvre • Réalisez les modifications souhaitées puis enregistrez-les. • Faites ensuite une sélection d’une zone, d’une tranche ou de l’image entière puis faites un copié-collé pour remplacer l’ancienne version de l’image par la nouvelle version modifiée • Vous pouvez également faire un double clic sur le nom de l’image dans le panneau Fichiers pour l’ouvrir dans Photoshop Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • La modification d’une image – Paramétrer une image • Sélectionnez l’image insérée

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • La modification d’une image – Retoucher une image • Recadrage : Modifier – Image – Recadrer ou du panneau Propriétés Réduisez la partie visible à l’aide des poignées et validée par Entrée • Rééchantillonner une image: quand vous redimensionner manuellement une image, vous la pixellisez. Pour supprimer cet aspect « granuleux », vous pouvez demander un rééchantillonnage • Modifier – Image – Rééchantillonner ou cliquez sur du panneau Propriétés • Régler la luminosité ou le contraste: Modifier – Image – Luminosité/Contraste ou du panneau Propriétés • Déplacez le ou les curseurs et cochez, si besoin, l’option Aperçu pour visualiser directement le résultat sur l’image dans la page • Quand le résultat vous convient, cliquez sur OK • Accentuer une image: Modifier – Image – Accentuer ou dans le panneau Propriétés Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des images • La mise en forme CSS des images La mise en forme CSS des images se fait à l’aide des feuilles de styles. Pour information, l’élément HTML utilisé pour une image est <img> – Positionner une image en utilisant le flottement • Dans la boîte de dialogue des règles CSS, sélectionnez la catégorie Boîte • Ouvrez la liste Float et sélectionnez l’option left si l’image doit flotter à gauche du paragraphe ou right si elle doit flotter à droite – Modifier les marges et les bordures d’une image • Dans la boîte de dialogue des règles CSS, sélectionnez la catégorie Boîte et complétez les propriétés des zones Padding et Margin • Utilisez les propriétés de la catégorie Bordure pour définir le style, la couleur et l’épaisseur du trait des bordures de l’image – Modifier les propriétés à l’aide du panneau Styles CSS • Cliquez sur le lien Ajouter une propriété • Pour modifier une propriété existante, sélectionnez-la dans la partie inférieure du panneau et modifiez dans la liste qui suit ses caractéristiques Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des liens

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Définir des liens – Lier des pages au sein de votre site Web • Ouvrez la page dans laquelle vous souhaitez créer un lien • Cliquez sur l’icône Hyperlien à gauche de la barre d’outils Commun en haut de l’espace de travail • Dans la boîte de dialogues Hyperliens, cliquez sur le bouton Parcourir à droite du champ Lien • Cliquez sur le nom du fichier voulu afin de sélectionnez la page que vous désirez lier • Cliquez sur OK (Windows) ou Choisir ( MAC)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Définir des liens – Lier des pages au sein de votre site Web

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens – Définir des liens vers des ancres nommées à l’intérieur d’une page web • Ouvrez la page sur laquelle vous souhaitez insérer une ancre nommée • Cliquez à côté du mot ou de l’image que vous souhaitez lier • Dans le menu Insertion choisissez l’option Ancre Nommée • Saisissez un nom d’identification • Cliquez sur OK • Pour modifier le nom de l’ancre, cliquez sur son élément invisible et utilisez le panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Pour définir un lien qui renvoie à l’ancre nommée, sélectionnez le texte ou l’image qui servira de lien hypertexte • Dans la section Commun, cliquez sur l’icône Hyperlien et dans le menu local Liens vous retrouvez votre ancre nommée • Alternative : Champ Lien du panneau Propriétés =>signe # suivi du nom de l’ancre • Alternative : Sélection du texte et tirer un trait à partir de l’icône « Pointer vers un fichier » jusqu’à l’icône de l’ancre

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens – Lier vers des pages situées sur d’autres sites web • Ouvrez la page dans laquelle vous souhaitez créer le lien • Sélectionnez le texte ou l’image qui servira de lien • Dans le champ Lien de l’inspecteur Propriétés, saisissez l’URL de la page à atteindre • Attention ! Saisir l’URL complète!

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens – Définir un lien vers une adresse e-mail • Envoyer rapidement un courrier électronique à l’adresse vers laquelle pointe le lien ainsi défini • Sélectionnez le texte voulu • Cliquez sur l ’icône Lien de messagerie de la section Commun du panneau Insertion • Dans la boîte de dialogue qui s’affiche, entrez l’adresse électronique cible et cliquez sur OK • Attention ! Via le champ lien de l’inspecteur de Propriétés, n’oubliez pas d’insérer mailto devant l’adresse !

– Créer des liens externes • Sélectionnez le texte du lien • Dans le champ Lien du panneau Propriétés, saisissez l’Url complète de la page à pointer Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Créer des liens sur des images – Les boutons • Insérez une image qui fera office de bouton et sélectionnez-la • Dans le champ Lien du panneau Propriétés, créez votre lien de la même façon qu’un lien de texte

– Les cartes image • Activez si besoin, l’affichage des zones réactives de la carte : Affichage – Assistances visuelles –Cartes graphiques • Insérez l’image et sélectionnez-là • Dans le champ Carte du panneau Propriétés, saisissez obligatoirement le nom à donner à votre image • Choisissez une forme de zone réactive • Cliquez sur OK et dessinez la zone sur l’image

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Créer des liens sur des images – Les rollovers Les rollovers apportent un peu de dynamisme à votre page. Vous devez prévoir une image pour le bouton dans son état actif et une image pour le bouton dans son état inactif. • Cliquez à l’endroit où doit apparaître le bouton • Insertion – Objets d’image – Image survolée ou panneau Insertion- catégorie Commun – menu déroulant Images survolées

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • La vérification des liens Lorsqu’un fichier intervenant dans un lien est renommé ou déplacé, Dreamweaver vous demande d’effectuer la mise à jour des liens – Vérifier les liens • Pour vérifier un lien dans une page, sélectionnez-le puis Modifier – Ouvrir la page liée ou maintenez la touche Ctrl (PC) ou Commandes (Mac) et double cliquez sur le lien • Pour vérifier tous les liens dans une page : Fichier – Vérifier la page – Liens • Dans le menu Afficher du panneau Vérificateur de lien, choisissez l’option Liens brisés • Pour corriger un lien dans une page, double-cliquez sur l’icône du lien à corriger et faites la correction dans le panneau Propriétés, dans le champ Lien • Pour vérifier les liens de certains fichiers, dans la fenêtre des sites local et distant, sélectionnez les fichiers à vérifier puis Fichier – Vérifier liens ou Shift F8 (PC) ou menu local du panneau Fichiers puis Fichier – Vérifier liens • Pour vérifier tous les liens du site, à partir de la liste des fichiers du site : Site – Vérifier tous les liens du site ou Ctrl F8 (PC), Commandes F8 (Mac)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • La vérification des liens Lorsqu’un fichier intervenant dans un lien est renommé ou déplacé, Dreamweaver vous demande d’effectuer la mise à jour des liens – Vérifier les liens • Pour visualiser les liens externes à votre site Web dans la page courante : Fichier – Vérifier la page- Liens. Dans le menu déroulant Afficher du panneau Vérificateur de lien, choisissez Liens externes. Les liens vers des fichiers externes ou vers d’autres sites ainsi que vers des adresses mail sont affichés. • Dès qu’il y a un problème dans les liens, Dreamweaver affiche dans la carte du site, les fichiers liés dont le lien est brisé en rouge avec le symbole d’une chaîne brisée

– Vérifier tous les liens du site • Dans le panneau Vérificateurs de liens, cliquez sur le bouton Vérifier les liens et sélectionnez l’option Vérifier les liens de tous les fichiers du site local • Pour vérifier tous les liens, dans le panneau Fichier, cliquez sur –

Menu Site, option Vérifier tous les liens du site

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens • Gérer les liens – Pour modifier le lien d’un fichier, dans le panneau Fichiers, sélectionnez le fichier lié puis dans le menu local choisissez Site – Modifier le lien ou Ctrl L (PC) ou Commandes L (MAC) – Sélectionnez le nouveau fichier à lier à la place de l’ancien puis cliquez sur OK

– Ouvrir source d’un lien : panneau Fichiers – Site- Ouvrir source du lien – Supprimer un lien : panneau Fichiers – Site- Supprimer le lien Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens •

Changer couleur de lien et option de soulignement – Menu Modifier - Option Propriétés de la page – Option Liens(CSS) dans la liste Catégories – Indiquez les polices à exploiter pour les liens via la case Police des liens – B: liens en gras / I: liens en italique Quatre options de couleur de liens : – Couleur des liens Indique la couleur d’un lien dont l’utilisateur n’a pas encore visité la page de destination – Liens visités Couleur utilisée pour des liens pointant vers des pages déjà visitées – Liens de survol Le lien prend cette couleur lorsque l’utilisateur place le pointeur au-dessus – Liens Actifs Le lien prend brièvement cette couleur lorsque l’utilisateur clique dessus Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des liens – Dans la liste style souligné, spécifiez si les liens seront soulignés – Cliquez sur le bouton Appliquer pour voir l’impact de vos modifications de couleurs dans la page – Cliquez sur OK et fermer la boîte de dialogues Propriétés de la page

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des tableaux

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • La création d’un tableau Dans les pages Web, les tableaux permettent de créer des tables de données de manière tout à fait classique. – Créer un tableau • Cliquez à l’endroit souhaité de la page • Insertion Tableau • Panneau Insertion • =>Catégorie Commun

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Il est préférable d’utiliser des styles CSS pour la mise en forme de tableaux • Le tableau s’agrandit si vous insérez dans une cellule une image de taille plus importante que la taille de la cellule • La commande Fichier – Importer – Données tabulaires ou Insertion – Objets du tableau – Importer les données tabulaires permet d’importer des données organisées sous forme tabulaire • Pour importer un tableau qui a été réalisé avec Excel, utilisez la commande Fichier – Importer – Document Excel • Vous pouvez exporter un tableau créé dans Dreamweaver en utilisant la commande Fichier – Exporter - Tableau

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Sélectionnez les cellules d’un tableau – Pour activer une cellule, faites un clic dans celle-ci – Pour sélectionnez une cellule, faite Ctrl clic (PC) ou Commande clic (Mac) dans celle-ci ou cliquez dans la cellule à sélectionner puis sur l’élément HTML <td> (ou <th>)visible dans la barre d’état – Pour sélectionnez des cellules non contiguës, faite Ctrl clic (PC) ou Commande clic (Mac) dans la première cellule, maintenez la touche Ctrl ou Commande enfoncée puis faites des clics successifs dans les autres cellulesSi besoin est, cliquez à nouveau dans une cellule sélectionnée pour la désélectionner – Pour sélectionner plusieurs cellules contiguës, faites un cliqué-glissé sur celles-ci, ou cliquez dans la première cellule, appuyez et maintenez la touche Shift enfoncée puis cliquez dans la dernière cellule – Pour sélectionner une ligne/colonne, cliquez à gauche de la ligne/au sommet de la colonne ; le pointeur doit avoir la forme d’une flèche et les cellules sont entourées de rouge Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • La structure d’un tableau – Ajouter/Supprimer des lignes/colonnes a. Ajouter des lignes/colonnes: Pour ajouter une ligne à la fin du tableau, cliquez dans la dernière cellule du tableau puis appuyez sur la touche tabulation Pour ajouter une ligne/colonne à l’intérieur du tableau, utilisez l’une de ces quatre méthodes: -cliquez dans la cellule au-dessus/à gauche de laquelle vous voulez qu’apparaisse la nouvelle ligne/colonne puis choisissez Modifier – Tableau – Insérer une ligne (Ctrl M sous PC ou Pomme M sous Mac ou Insérer une colonne (Ctrl Shift A (PC) ou Pomme Shift A (Mac)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • La structure d’un tableau – Ajouter/Supprimer des lignes/colonnes a. Ajouter des lignes/colonnes: -cliquez dans la cellule à côté de laquelle vous voulez insérer des lignes ou des colonnes puis faites Modifier – Tableau – Insérer des lignes ou des colonnes

-dans la catégorie Mise en forme du panneau Insertion, vous pouvez cliquer sur le libellé correspondant Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • La structure d’un tableau – Ajouter/Supprimer des lignes/colonnes

a. Ajouter des lignes/colonnes: -Ouvrez le menu Insertion – Objets du tableau et cliquez sur l’option correspondante => Vous pouvez également utiliser le menu local qui apparaît au niveau des dimensions du tableau : cliquez sur le triangle vert d’une colonne et choisissez Insérer une colonne à gauche ou Insérer une colonne à droite. b. Supprimer des lignes/colonnes Pour supprimer une ligne/colonne, cliquez dans une cellule de la ligne/colonne puis choisissez Modifier – Tableau – Supprimer la ligne (Ctrl Shift M (PC) ou Pomme Shift M (Mac) ) ou Supprimer la colonne (Ctrl Shift I (PC) ou Pomme Shift I (Mac) )

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • La structure d’un tableau – – – –

Fusionner/fractionner des cellules Sélectionnez les cellules adjacentes que vous souhaitez fusionner Modifier-Tableau -Fusionner les cellules Pour agrandir une cellule fusionnée, cliquez dans la cellule puis Modifier – Tableau – Augmenter l’étendue de la ligne ou Augmenter l’étendue de la colonne – Pour réduire une cellule fusionnée, cliquez dans la cellule fusionnée puis Modifier – Tableau – Réduire l’étendue de la ligne ou Réduire l’étendue de la colonne

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Fractionnez des cellules fusionnées – Cliquez dans la cellule fusionnée – Modifier - Tableau - Fractionnez la cellule – En fonction de la fusion initiale, choisissez Fractionnez la cellule en Lignes ou Colonnes puis indiquez le Nombre de lignes ou colonnes

• Trier un tableau – Cliquez dans le tableau :Commandes - Trier le tableau

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Imbriquez un tableau dans un autre – Créez un premier tableau – Dans un espace libre du premier tableau, créez un second tableau • La mise en forme CSS des tableaux – La mise en forme CSS des tableaux doit se faire à l’aide des feuilles de styles mais certaines mises en forme n’étant pas accessibles dans Dreamweaver, dans ce cas, il sera nécessaire d’intervenir directement dans le code !

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Mettre en forme le tableau – Pour appliquer une couleur ou une image en arrière-plan, utilisez les propriétés de la catégorie Arrière-plan – Pour appliquer une bordure extérieure au tableau, sélectionnez la catégorie Bordure et précisez le Style, l’épaisseur (Width) et la couleur (Color) du trait pour chacune des bordures du tableau dans les zones correspondantes. Si le style, l’épaisseur et/ou la couleur du trait doit être identique pour toutes les bordures, laissez cochée l’option Idem pour tous du cadre correspondant – Pour modifier la largeur du tableau, sélectionnez Boîte et précisez une valeur fixe (px, cm, pt…) ou relative (%) dans la propriété Width – Pour aligner le tableau dans la page, dans la catégorie Boîte, choisissez auto pour les marges gauche et droite de la propriété Margin – Pour espacer le tableau de ce qui précède et de ce qui suit, précisez la valeur de l’espacement dans les zones Top et Bottom de la propriété Margin(catégorie Boîte)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Mettre en forme le tableau

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des tableaux • Mettre en forme la légende – Dans la barre d’outils Document, cliquez sur le bouton Code – Créez un style de classe pour la légende et utiliser la propriété caption-side avec les valeurs top, right, bottom ou left

• Mettre en forme des cellules – Pour éviter le problème d’affichage des tableaux, spécifiez la largeur des cellules de la première ligne du tableau sans qu’il soit obligatoire d’indiquer la largeur du tableau • Propriété width de la catégorie Boîte :modifier la largeur des cellules • Propriétés de la catégorie Bordure :définir les bordures des cellules • Les bordures apparaissent espacées, pour ne plus afficher cet espace entre les bordures des cellules, celles-ci doivent être fusionnées : dans le code, ajoutez la propriété border-collapse à la classe en lui affichant la valeur collapse Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des formulaires

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • La création d’un formulaire Pour utiliser des formulaires, deux éléments sont indispensables : le formulaire avec tous ses objets (zones de saisie, listes, menus, cases à cocher …) et un script qui va gérer les données. Vous devez créer le script en utilisant un langage de programmation serveur (PHP, ASP …) afin de pouvoir récupérer ces données dans une base de données. Vous pouvez insérer le formulaire dans un tableau pour faciliter la mise en page de ces éléments

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Créer un formulaire – Insertion – Formulaire-Formulaire – Panneau Insertion, catégorie Formulaires – Le formulaire s’affiche sous la forme d’un rectangle rouge

1) Saisissez le nom du formulaire 2) Indiquez le chemin d’accès au script qui va gérer le formulaire en cliquant sur l’icône de dossier pour le sélectionner sur votre disque, ou, si les données doivent être envoyées par mail, inscrivez l’adresse mail sous la forme : mailto:salut@site.fr

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Créer un formulaire 3) Choisissez le type de traitement de données : – GET Envoie les données au serveur par l’intermédiaire de l’URL à l’aide d’une requête GET – POST Envoie les données au serveur dans le corps d’un message à l’aide d’une requête POST 4) Définissez le code MIME des données envoyées au serveur en fonction du type de ces données 5) Spécifiez la fenêtre à utiliser pour afficher les données envoyées par le script

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer une zone de saisie • • • • •

Cliquez dans votre formulaire à l’endroit voulu Insertion – Formulaire – Champ de texte Panneau Insertion catégorie Formulaires Définissez les attributs d’accessibilité du champs de texte puis cliquez sur OK Sélectionnez la zone de saisie puis spécifiez ses paramètres à l’aide du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer une case à cocher et un bouton radio • • • •

Cliquez dans votre formulaire à l’endroit voulu et tapez si besoin est, le libellé associé à la case à cocher ou au bouton radio Insertion – Formulaire – Case à cocher ou Bouton radio Définissez les attributs d’accessibilité du champ puis cliquez sur OK Sélectionnez la case à cocher ou le bouton radio puis spécifiez ses paramètres à l’aide du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Définir les attributs d’accessibilité Par défaut, lorsque vous créez un objet de formulaire, Dreamweaver vous propose de définir les attributs de l’objet

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer un groupe de boutons radio ou de cases à cocher – Cliquez à l’endroit voulu – Insertion – Formulaire - Groupe de boutons radio ou Groupe de cases à cocher – Panneau Insertion, catégorie Formulaires

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer un menu déroulant – Cliquez dans votre formulaire à l’endroit voulu et tapez, si besoin est, le libellé associé au menu déroulant – Insertion -Formulaire -Liste/Menu – Panneau Insertion, catégorie Formulaires – Définissez les attributs d’accessibilité de l’objet menu déroulant puis cliquez sur OK – Sélectionnez le menu déroulant, puis spécifiez ses paramètres à l’aide du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer une liste Une liste permet d’afficher plusieurs valeurs et permet à l’utilisateur de sélectionner plusieurs options. – Insérez l’objet de formulaire en procédant comme pour le menu déroulant puis spécifiez ses paramètres à l’aide du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Créer un jeu de champs Pour mieux structurer vos formulaires, vous pouvez regrouper un certain nombre de champs dans un ensemble encadré et lui donner un titre – Sélectionnez les éléments du formulaire qui doivent être encadrés – Insertion – Formulaire –Ensemble de champs ou utilisez le bouton spécial de la catégorie Formulaires du panneau Insertion – Saisissez le nom de l’ensemble puis cliquez sur OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer un champ masqué Un champ masqué n’est pas visible dans la fenêtre du navigateur quand l’internaute consulte le site, il ne l’est que pas le concepteur de la page dans Dreamweaver. Il permet d’effectuer des opérations diverses à l’aide d’un script. – Cliquez à l’endroit voulu – Insertion - Formulaire -Champ Masqué – Panneau Insertion, onglet champ masqué de la catégorie Formulaires – Dans le panneau Propriétés, remplacez le texte hiddenField par le nom de l’objet – Indiquez la valeur renvoyée au script

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Insérer des boutons d’envoi et d’annulation Pour pouvoir utiliser le formulaire, vous devez y insérer deux boutons : le premier pour envoyer le formulaire (submit) au script sur serveur ou à l’adresse mail ; le second pour donner la possibilité à l’internaute d’annuler le saisies et de recommencer (reset) – Cliquez à l’endroit voulu – Insertion- Formulaire -Bouton – Panneau Insertion, catégorie Formulaires – Définissez les attributs d’accessibilité de l’objet puis cliquez sur OK – Sélectionnez le bouton puis spécifiez ses paramètres à l’aide du panneau Propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • La mise en forme CSS des formulaires Comme pour tout autre élément, vous pouvez créer des sélecteurs de classe pour ensuite appliquer le style CSS aux éléments HTML du formulaire ou utiliser des sélecteurs de balise pour redéfinir ceux existants. Les éléments HTML, utilisés dans les formulaires sont les suivants: <form> pour l’objet de formulaire <label> pour les étiquettes <input> pour les objets de type champs de texte, boutons radio, cases à cocher, champ de fichier et les boutons envoi et annulation <select> pour menus et listes <option> pour item des menus et des listes <fielset> pour encadrement des objets et l’élément du titre <legend> Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Modifier la mise en forme des objets du formulaire – Les propriétés CSS de mise en forme des objets d’un formulaire sont équivalentes à celles des caractères, des textes et des conteneurs – Pour modifier rapidement la mise en forme de toutes les étiquettes du formulaire, vous pouvez utiliser un sélecteur de balise <label>. Il peut en être de même pour l’encadré des champs et leur titre – Pour la mise en forme du formulaire, vous pouvez utiliser un sélecteur d’identification (ID), en reprenant par exemple le nom donné à votre formulaire : #inscriptions

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des formulaires • Modifier la mise en forme de l’élément présélectionné d’un menu – Créez un nouveau style et choisissez le sélecteur Composé (selon votre sélection) – Dans le champ Nom du sélecteur, saisissez option[selected=selected] pour appliquer le style à tous les éléments dont l’attribut et la valeur sont selected. – Définissez ensuite les propriétés du style, par exemple, une couleur de fond différente

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Intégrer des objets

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Introduction – Vous pouvez insérer des objets aussi divers que des animations Flash, des scripts, des vidéos mais gardez bien à l’esprit que l’utilisateur doit posséder sur son ordinateur le plug-in qui va permettre d’exploiter cet objet. – Définir les éditeurs externes • Edition/Dreamweaver – Préférences – catégorie Types de fichiers /Editeurs • Dans la liste Extensions, vous visualisez celles qui sont paramétrées

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Pour modifier l’éditeur d’une extension déjà existante, sélectionnez-la dans la liste Extensions puis, si le logiciel a déjà été ajouté, sélectionnez-le dans la liste Editeurs ou, à l’inverse, ajoutez-le en cliquant sur le bouton + • Pour ajouter une extension, cliquez sur le bouton + et tapez le nom de l’extension • Dans la liste Editeurs, cliquez sur le bouton + pour sélectionner sur votre ordinateur le logiciel qui doit être lancé pour ce type d’extension ; le bouton Rendre Principal permet de définir le logiciel qui doit être ouvert en premier lorsque vous définissez plusieurs éditeurs pour une même extension

• Cliquez sur OK • Pour ouvrir un objet multimédia depuis la fenêtre de votre site, ouvrez la fenêtre par F8 et double cliquez sur cet objet Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer des objets Flash ou Director – Pour insérer une animation Flash : Insertion - Médias - SWF ou Ctrl + Alt +F (PC) ou Pomme Shift F (Mac) – Sélectionnez le fichier .swf dans votre site puis cliquez sur OK – Renseignez les attributs d’accessibilité puis cliquez sur OK

– Pour insérer une animation Director : Insertion – Médias – Shockwave : paramétrez l’animation de la même manière que pour une animation Flash – Pour insérer des documents FlashPaper, utilisez la commande Insertion – Médias – FlashPaper Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer une vidéo Flash – Adobe propose son propre format de vidéo : Flash Vidéo (.flv). Ce format , qui associe performance et qualité, est largement utilisé par les professionnels du Web. – Insertion - Médias - FLV

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer un objet Fireworks – Adobe Fireworks permet de créer rapidement et efficacement des objets visuels pour le Web : bouton interactif, carte-image, rollover … en générant le code HTML et JavaScript nécessaire – Insertion – Objets Image – HTML Fireworks – Dans le champ Fichier HTML Fireworks, tapez le nom du fichier à incorporer ou cliquez sur le bouton Parcourir pour le sélectionner – Cochez l’option Supprimer fichier après insertion pour effacer le fichier généré par Fireworks après son insertion dans Dreamweaver – Cliquez sur OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer un son/une vidéo – Insertion – Médias – Plug-in ou image plug-in du panneau Insertion – catégorie Commun – Sélectionnez le fichier audio ou le fichier vidéo à insérer

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer des scripts – Les scripts vont permettre de déclencher diverses actions. Pour créer un script, il faut utiliser un langage ; le plus répandu est actuellement le JavaScript. – Pour visualiser l’insertion d’un script , cochez l’option Scripts dans les préférences des Eléments Invisibles (Editions/Dreamweaver – Préférences) puis : Affichage – Assistances visuelles – Eléments invisibles – Pour insérer un script, cliquez à l’endroit voulu puis Insertion – HTML – Objets Script – Script ou cliquez sur du panneau Insertion – catégorie Commun

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Insérer des scripts – Si le script utilise des valeurs saisies dans un formulaire, il doit être placé avant le formulaire – Dans la boîte de dialogue Script, sélectionnez le langage utilisé dans la liste Type – Saisissez le code du script dans la zone Contenu – Cliquez sur OK (le script apparait alors avec son symbole) – Pour associer un bouton au script, sélectionnez le bouton et cliquez sur le bouton Code de la barre d’outils Document pour afficher le code source – Apportez si besoin d’autres modifications au code du document – Pour tester le script, enregistrez le document et ouvrez-le dans le navigateur Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Les composants d’interface Spry – Le panneau réductible • Ce composant d’interface propose très simplement d’afficher et de masquer des informations en cliquant sur le titre du panneau • Positionnez le point d’insertion à l’emplacement du composant dans la page • Insertion – Spry – Panneau réductible Spry ou panneau Insertion – catégorie Spry – bouton • Saisissez ou insérez les éléments souhaités dans la zone Contenu; supprimez le texte Contenu s’il ne doit pas apparaître lorsque le panneau est ouvert

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Panneau réductible Spry : CollapsiblePanel1 1. Spécifiez le nom de votre composant inséré 2. Choisissez si le contenu du panneau doit être invisible ou non dans la page 3. Choisissez si le panneau doit être ouvert ou fermé à l’affichage de la page HTML dans un navigateur 4. Cochez cette option si vous souhaitez qu’à l’ouverture et à la fermeture du panneau, celui-ci s’ouvre ou se ferme progressivement

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets 5. 6.

7.

8.

Enregistrez la page Dreamweaver vous informe qu’il a copié , dans votre site local, les fichiers CSS et JavaScript nécessaires au bon fonctionnement du composant. Cliquez sur OK. La personnalisation du panneau s’effectue via la feuille de style associée au composant. Son nom (SpryCollapsiblePanel.css) apparaît dans la barre d’outils des fichiers associés à la page HTML. Pour modifier les style CSS d’un élément, cliquez sur l’élément puis dans le panneau Propriétés, cliquez sur Modifier les CSS. Dans le panneau Styles CSS, modifiez . Le bouton Affichage en direct de la barre d’outils Document vous permet d’afficher le panneau tel qu’il apparaîtra dans votre navigateur

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • L’accordéon Ce composant propose une interface originale pour afficher et masquer des informations diverses en cliquant simplement sur l’en-tête du panneau de l’accordéon. Nous pouvons dire qu’il reprend le principe du panneau réductible en utilisant plusieurs panneaux. – Positionnez le point d’insertion à l’emplacement du composant dans la page – Insertion – Spry – Accordéon Spry ou panneau Insertion – catégorie Spry – bouton – Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Accordéon Spry : Accordion 1 pour afficher ses propriétés

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Vous pouvez : – Modifier le nom du composant – Ajouter si besoin des panneaux à l’accordéon en cliquant autant de fois que nécessaire sur le bouton • Pour chaque titre remplacer Etiquette x par le votre • Saisissez ou insérez les éléments souhaités dans chaque panneau : pointez, si besoin, le titre du panneau concerné et cliquez sur le bouton (œil) pour afficher le contenu du panneau puis, insérez ensuite les contenus : supprimez le texte Contenu s’il ne doit pas apparaître lorsque le panneau est ouvert • Enregistrez et cliquez sur OK • SpryAccordion.css (feuille .css associée à ce composant)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Le panneau à onglets Spry – Ce composant propose une interface avec navigation classique en onglets. – Positionnez le point d’insertion dans la page – Insertion – Spry – Panneau à onglet Spry ou panneau Insertion – catégorie Spry – bouton – Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Panneaux à onglet Spry : TabbedPanels1 pour afficher ses propriétés – SpryTabbedPanels.css (feuille Css associée à ce composant)

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • L’info-bulle – Ce composant d’interface permet d’afficher une info-bulle riche en contenu au survol d’un lien avec la souris – Placez le point d’insertion là où doit être le composant – Insertion – Spry – Info-bulle Spry – Ou, dans le panneau Insertion, dans la catégorie Spry, cliquez sur le bouton Info-bulle Spry – Nommez le composant dans le panneau Propriétés . – Le composant nécessite un lien texuel. Vous devez le saisir à la place du texte par défaut qui est inséré lors de l’ajout du composant : Placer le déclencheur de l’info-bulle ici – Dans la zone de contenu de l’info-bulle Placer le contenu de l’info-bulle ici, saisissez le contenu qui doit apparaître au survol de la souris

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Paramétrer l’info-bulle – Sélectionnez le widget en cliquant sur son en-tête bleu. Dans le panneau Propriétés, dans le champ Déclencheur, vous visualisez le nom du texte qui va déclencher l’info-bulle. – Dans cet exemple, le déclencheur n’a pas été renommé, il utilise donc le nom par défaut : #sprytrigger 1 – Toute la mise en forme de l’info-bulle est réalisée avec une feuille de style CSS associée au composant. Dans la barre d’outils des fichiers associés à la page HTML utilisant ce composant, vous pouvez accéder à cette feuille de style : SpryTooltip.css

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Les bibliothèques d’objets – Gérer les actifs • Les Actifs représentent une « super bibliothèque» qui permet de classer des éléments récurrents (image, script, animation Flash, lien externe, couleur … ) et de les réutiliser par un simple cliqué-glissé. • Il faut impérativement avoir coché l’option Activer le cache dans la fenêtre de définition des paramètres su site (Site – Gérer les Sites – Modifier) • Fenêtre – Actifs • Activez, si nécessaire, l’option Site Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets – Gérer les favoris • Les favoris vous permettent de grouper les éléments récurrents de manière logique. • Pour ajouter un élément aux Favoris, sélectionnez-le dans le panneau Actifs puis cliquez sur le bouton visible en bas à droite du panneau • Dreamweaver vous informe que l’élément a été ajouté aux Favoris • Pour visualiser la liste des Favoris, activez la liste correspondante

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets – Utiliser la bibliothèque • La bibliothèque permet de stocker des éléments récurrents afin de les insérer rapidement dans une page. En cas de modification d’un élément de la bibliothèque, toutes les occurrences sont mises à jour dans le site. • Pour ajouter un élément d’une page dans la bibliothèque, sélectionnez-le, cliquez sur le bouton du panneau Actifs puis cliquez sur + ou faites glisser la sélection dans la bibliothèque. Nommez cet élément puis validez par Entrée • Pour insérer un élément de la bibliothèque dans un document dans le panneau Actifs, sélectionnez le nom de l’élément à ajouter et cliquez sur le bouton Insérer ou faites glisser son icône sur le document

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Créer et modifier un modèle Un modèle sert de base de conception pour une nouvelle page. Dans ce modèle vous définissez des zones éditables (Régions modifiables que vous pouvez modifier quand vous utilisez le modèle) et d’autres non éditables (Régions verrouillées).Si vous modifiez une partie d’un modèle, toutes les pages du site basées sur ce modèle seront mises à jour.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Etapes nécessaires à la création du modèle – Créez une page qui servira de modèle – Fichier – Enregistrer comme modèle • ou panneau Insertion – catégorie Commun

– Sélectionnez le Site où doit être enregistré le modèle, tapez le nom du modèle dans la zone Enregistrer sous et cliquez sur Enregistrer – La barre de titre de la fenêtre du document rappelle que le document actif est un modèle. Dreamweaver crée dans le dossier de votre site un sous-dossier nommé Templates. Chaque modèle y est représenté par un fichier avec l’extension .dwt – Le modèle créé fait partie des éléments actifs du site : cliquez sur le bouton Modèles du panneau Actifs pour y accéder Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets – Dans un nouveau modèle, toutes les régions sont verrouillées. Pour que le modèle soit exploitable, vous devez rendre modifiables certaines régions. Pour rendre modifiable une zone, sélectionnez-la pour rendre modifiable un endroit du document, cliquez à l’endroit voulu. – Insertion – Objets de modèle – Région modifiable • ou option Région modifiable dans la liste du bouton correspondant du panneau Insertion – catégorie Commun

– Tapez le nom de la zone et cliquez sur OK – La zone modifiable apparaît en Surbrillance. – Atteindre une région modifiable: sélection puis Modifier – Modèles puis cliquez sur le nom de la région à atteindre ou cliquez directement dans la zone modifiable Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets – Rendre non modifiable une région crée modifiable, sélection puis Modifier – Modèles – Supprimer le marqueur de modèle – Enregistrez les modifications apportées au modèle puis fermez la page correspondante. – Pour modifier, renommer, supprimer … un modèle, procédez comme pour un élément quelconque du panneau Actifs – Vous pouvez créer un modèle qui en dépend d’un autre : créez un modèle de base puis créez un document basé sur ce modèle que vous enregistrez en tant que modèle. Ce dernier est alors un modèle imbriqué. Si vous modifiez le modèle de base, Dreamweaver vous proposera la mise à jour des modèles imbriqués

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets • Utiliser un modèle – Pour créer un nouveau document à partir d’un modèle, faites Fichier – Nouveau – Dans la catégorie page issue d’un modèle, sélectionnez le Site qui contient le modèle à utiliser puis cliquez sur son nom dans la liste Modèles du site – Décochez l’option Mettre la page à jour quand le modèle est modifié si vous souhaitez créer un document indépendant du modèle et qui ne tient pas compte des régions définies dans le modèle – Cliquez sur Créer

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Intégrer des objets – Dreamweaver crée un nouveau document dans lequel les régions modifiables apparaissent avec un cadre bleu accompagné du nom de la région. La page est entourée d’un cadre jaune comportant la mention Modèle : nom du modèle – Pour appliquer un modèle à un document existant, utilisez la commande Modifier – Modèles – Appliquer le modèle à la page, sélectionnez le modèle à appliquer puis cliquez sur Sélectionner ou, accédez à la catégorie Modèles du panneau Actifs, sélectionnez le modèle voulu puis cliquez sur le bouton Appliquer ou faites glisser l’icône du modèle sur la page – Si le document n’est pas vierge, Dreamweaver vous demande où placer les éléments présents ; dans la liste régions modifiables, sélectionnez celle qui doit accueillir ces éléments puis cliquez sur OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Créer des boîtes Div

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • La création et l’utilisation d’éléments PA Les éléments PA pour Position Absolue répondent au besoin de pouvoir placer des « conteneurs » n’importe où dans la page, de façon très précise. Un élément PA dans Dreamweaver peut contenir du texte, des images, des animations … – Lorsque vous créer un élément PA, un élément HTML <div> est créé avec un identifiant unique qui fait le lien avec un style CSS créé en même temps par Dreamweaver – Dans Dreamweaver, les éléments PA ont un positionnement absolu : par rapport aux bords de la page et au-dessus du contenu de la page Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA – Cliquez à l’endroit voulu de votre page – Insertion - Objets mise en forme - Div PA ou du panneau Insertion – catégorie Mise en forme – Faites un cliqué-glissé dans votre page, du coin supérieur gauche au coin supérieur droit – Pour créer successivement plusieurs éléments PA, cliquez sur le bouton , appuyez et maintenez la touche Ctrl (PC) ou Commande (Mac) enfoncée et dessinez vos éléments PA les uns après les autres sans relâcher la touche

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA – Pour paramétrer l’élément PA, sélectionnez-le puis utilisez le panneau Propriétés :

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA – Pour modifier la visibilité de cet élément PA, cliquez sur le menu déroulant Visib. : • default : ne précise pas l’attribut • inherit : l’élément PA hérite de l’attribut de l’élément PA qui le contient • visible : l’élément PA est immédiatement visible dans la page • hidden : l’élément PA sera masqué à l’affichage – Dans le champ Débord, indiquez ce que doit faire le navigateur quand le contenu de l’élément PA est trop grand par rapport aux tailles spécifiées :

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA • visible : Agrandit la taille de l’élément PA pour voir tout son contenu • hidden : le contenu qui déborde sera masqué • scroll : affiche dans tous les cas des barres de défilement • auto : affiche des barres de défilement uniquement si c’est nécessaire – Pour découper le contenu de l’élément PA, renseignez la zone Déc : • G : Début de la surface visible à gauche depuis la gauche de l’élément PA • D : Fin de la surface visible à droite depuis la gauche de l’élément PA Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA • S : Début de la surface visible en haut depuis le haut de l’élément PA • B: Fin de la surface visible en bas depuis le haut de l’élément PA

• Vous pouvez aussi modifier certains paramètres dans le panneau Eléments PA (Fenêtre – Eléments PA) ou F2 ou dans la boîte de dialogue Préférences – catégorie Eléments PA

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA – Sélectionner un élément PA • Activez l’affichage des éléments invisibles : Edition (PC)/ Dreamweaver (Mac) – Préférerences – catégorie Eléments invisibles, cochez l’option Points d’ancrage des éléments PA • Veillez à ce que les options Contour des éléments PA et Eléments invisibles soient cochées dans le menu Affichage – Assistances visuelles • Pour sélectionner un élément PA, cliquez sur son élément invisible ou cliquez sur son nom dans le panneau Eléments PA ou quand le point d’insertion est dans l’élément PA, cliquez sur sa poignée de sélection située en haut à gauche de l’élément PA*

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes div • Créer et formater un élément PA – Gérer les éléments PA • Pour déplacer des éléments PA, sélectionnez-les puis, dans le panneau Propriétés, modifiez les valeurs des zones de saisie G et S* ou faites glisser le rectangle de sélection de l’élément PA ou utilisez les touches fléchées du clavier • Pour redimensionner des éléments PA, dans le panneau Propriétés, tapez de nouvelles valeurs dans les zones de saisie L et H ou faites glisser une des poignées de redimensionnement • Pour appliquer aux éléments PA, la même largeur ou la même hauteur que celle du dernier élément PA sélectionné, utilisez Modifier – Réorganiser – Même largeur ou Même hauteur

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div • Pour aligner des éléments PA les uns par rapport aux autres, utiliez Modifier – Réorgansier – Aligner à gauche ou à droite ou en haut ou en bas • L’alignement se fait par rapport au dernier élément PA sélectionné . – Imbriquer les éléments • Pour que l’imbrication soit automatique lorsqu’un élément PA est dessiné au-dessus d’un autre, dans les préférences (Edition (PC) ou Dreamweaver catégorie Eléments PA (Mac), cochez l’option Imbriquer en cas de création d’une div PA

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div • La création et l’utilisation des balises Div – Vous pouvez utiliser des balises div pour créer des blocs de mise en forme CSS et les placer dans votre document. Cette méthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associée à votre document. Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants. – Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer la balise div.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div • Effectuez l’une des tâches suivantes : – Choisissez Insertion -Objets mise en forme-Balise Div. – Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Insérer la balise Div .

• Parmi les options suivantes, définissez celles de votre choix : – Insérer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle. – Classe Affiche le style de classe actuellement appliqué à la balise. Si vous avez associé une feuille de style, les classes qui y sont définies s'affichent dans la liste. Ce menu permet de sélectionner le style à appliquer à la balise.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div – ID : vous permet de modifier le nom utilisé pour identifier la balise div. Si vous avez associé une feuille de style, les ID qui y sont définis s'affichent dans la liste. Les ID des blocs déjà présents dans votre document ne sont pas – Nouvelle règle de CSS : ouvre la boîte de dialogue Nouvelle règle CSS. – Cliquez sur OK. La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace réservé. Lorsque vous déplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance. – Si la balise div est placée de manière absolue, elle devient un élément PA. Vous pouvez modifier les balises div qui ne sont pas à positionnement absolu.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div • Affichage et modification des règles appliquées à une balise div • Procédez de l'une des manières suivantes pour sélectionner la balise div : – Cliquez sur la bordure de la balise div. – Recherchez la surbrillance afin de voir les bordures. – Cliquez à l'intérieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) à deux reprises. – Cliquez à l'intérieur de la balise div, puis sélectionnez-là à partir du sélecteur de balises figurant au bas de la fenêtre du document. – Choisissez Fenêtre -Styles CSS pour afficher le panneau Styles CSS, si besoin est. Les règles appliquées à la balise div s'affichent dans le panneau. – Effectuez les modifications nécessaires.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Créer des boîtes Div • Insérer une boîte flottante – Créer le style qui sera utilisé – Cliquez dans ou à la fin du texte de la boîte à laquelle la nouvelle sera insérée puis Insertion – Objets mise en forme –Balise Div ou utilisez le panneau Insertion pour insérer la balise Div

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Le code HTML

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • La découverte du code HTML A l’heure actuelle, les concepteurs de sites Web son tde plus en plus soucieux de créer des sites conformes aux standards du Web, tels qu’ils sont décrits dans les recommandations du W3C. Les navigateurs reconnaissent de mieux en mieux les standards du W3C et permettent ainsi de créer des sites performants au graphique identique sur toutes les plateformes. Le concepteur doit donc être vigilant et vérifier la validité du code généré par rapport aux standards.

• Utiliser la référence HTML – Pour utiliser la référence HTML dans la page : Fenêtre – Résultats – Référence – Sélectionnez la référence que vous souhaitez utiliser – Sélectionnez l’élément HTML voulu Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Utiliser la référence HTML – Sélectionnez l’option Description pour avoir des informations générales sur la balise ou sélectionnez un attribut pour avoir des informations sur celui-ci – Pour utiliser la référence HTML d’un élément de la page, sélectionnez cet élément puis faites Shift F1*

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Visualiser le code utilisé pour la mise en forme d’un élément – Affichage – Code et Création ou Fractionner – Pour visualiser les éléments HTML employés pour la mise en forme d’un élément, sélectionnez cet élément : la barre d’état affiche les balises qui s’appliquent à l’élément – Pour sélectionner une balise d’un élément sélectionné, cliquez sur la balise dans la barre d’état Le code correspondant est sélectionné et s’affiche en surbrillance. – Pour accéder à la balise de niveau supérieur ou inférieur, faites Edition – Sélectionner balise parente ou Sélectionner enfant – Vérifier le code : Fichier- Valider – Marqueur ou Shift F6. Le panneau Validation affiche les erreurs trouvées . – : valider le site local actuel entier Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • La validation et l’optimisation du code HTML – Paramétrer les corrections • Vous pouvez paramétrer le comportement de Dreamweaver vis-à-vis des corrections qu’il effectue dans le code source d’une page HTML importée, au moment de l’ouverture de celle-ci • Edition (PC)/ Dreamweaver (Mac) – Préférences – catégorie Correction du code

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • La validation et l’optimisation du code HTML

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Nettoyer le code source – Pour supprimer le code source inutile : Commande – Nettoyer le code XHTML – Cochez les éléments que vous souhaitez supprimer puis cliquez sur OK – Pour nettoyer du code HTML provenant de Microsoft Word, utilisez Commandes – Nettoyer HTML Word

• Vérifier la compatibilité du code en fonction du navigateur Si vous créez une page en utilisant les technologies récentes (D-HTML, CSS, multimédia, Ajax…) les navigateurs d’ancienne génération ne pourront pas afficher correctement ces éléments. Il est donc nécessaire de vérifier quels sont ces éléments non reconnus en fonction de la version des navigateurs. Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Choisir les types d’erreur à afficher – Pour préciser les types d’erreurs à signaler , faites Edtion (PC)/Dreamweaver (Mac) – Préférences – Programme de validation et cliquez sur le bouton Options – Dans la zone Afficher, cochez les options voulues – Cliquez sur OK

• Choisir les navigateurs – – – –

Fenêtre – Résultats – Compatibilité avec les navigateurs Dans le menu local de la fenêtre, sélectionnez Paramètres Cochez les navigateurs à utiliser et la version Cliquez sur OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Vérifier la compatibilité dans un document ouvert – Dans le panneau Compatibilité avec les navigateurs, choisissez dans le menu local , l’option Vérification de la compatibilité entre les navigateurs

• Vérifier l’accessibilité du document – Le W3C a émis des recommandations : http://w3.org/TR/WCAG10 – Vous pourrez trouver sur ce site tous les éléments et attributs qui peuvent être utilisés pour avoir un site accessible – Fichier - Vérifier la page – Accessibilité – Ou, dans la barre d’outils Document de la page, utilisez le bouton Vérifier la page et choisissez Vérifier l’accessibilité – Enregistrer le rapport au format XML en cliquant sur le bouton Enregistrer le rapport Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Le code HTML • Convertir au format XHTML – Ouvrez le document au format HTML puis Fichier – Convertir – Choisissez la version de l’XHTML à utiliser puis cliquez sur OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


• Mise en ligne du site

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Généralités Quand vous publiez un site, il faut le faire en le référençant. Pour ce faire, vous avez deux possibilités : les annuaires et les moteurs de recherche. Quand un moteur de recherche doit indexer votre site, un « robot » accède au serveur de votre site et indexe toute une série de mots qui alimente de gigantesques bases de données. Les mots indexés sont entre autres ceux du titre des pages, les mots les plus usités dans vos pages et ceux des balises <meta> qui se placent dans l’en-tête du document. Ces balises contiennent ce que l’on appelle des méta-informations.

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Insérer des méta-informations – Insérer des mots clés Il est nécessaire d’insérer pour chacune des pages, une dizaine de mots-clés qui les caractérisent. • Insertion – HTML – Balises d’en-tête – Description • Tapez un texte décrivant votre page puis cliquez sur OK

– Insérer une description La description, composée d’une vingtaine de mots, s’affichera dans certains moteurs de recherche, dont Google • Insertion – HTML – Balises d’en-tête – Description • Tapez un texte décrivant votre page puis cliquez sur OK Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Insérer des balises méta Vous pouvez créer vos propres méta informations. – Insertion – HTML – Balises d’en-tête – Meta

• Insérer un rafraîchissement Au cas où votre site change de serveur, vous pouvez provoquer un basculement automatique vers la nouvelle adresse en insérant un rafraîchissement dans la page d’accueil – Insertion – HTML – Balises d’en-tête – Actualiser

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Visualiser/ modifier les informations – Affichez la barre des icônes d’en-tête par Affichage – Contenu de l’en-tête ou Ctrl Shift H (PC) ou Pomme Shift H (Mac) – Cliquez sur l’icône correspondant au type d’informations à modifier et effectuez les modifications dans le panneau Propriétés

• Configurer la relation avec le serveur – – – –

Site – Gérer les sites Sélectionnez le site à publier puis Modifier Dans l’onglet Avancé, sélectionnez la catégorie Infos distantes Pour une publication via FTP, dans le menu déroulant Accès, choisissez FTP

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Afficher les fichiers locaux et distants – Cliquez sur l’icône – Pour gérer votre site, utilisez les outils mis à votre disposition – Pour ajouter des informations dans la fenêtre du site, choisissez Site – Gérer les sites. Sélectionnez votre site et cliquez sur Modifier . Sélectionnez la catégorie Colonnes en mode Fichier

• Publication et maintenance du site – Publier le site • Dans le cas d’un accès via FTP, connectez-vous au serveur en cliquant sur l’icône • Dans la partie Fichiers locaux, sélectionnez l’icône du dossier racine de votre site • Site – Placer puis cliquez sur le bouton OK

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Mettre le site à jour – Affichage – Actualiser du menu local ou – Pour visualiser les fichiers modifiés localement, sélectionnez le dossier de votre site dans la liste des Fichiers locaux puis Edition – Sélectionner locaux plus récents du menu local – Pour visualiser les fichiers publiés qui sont plus récents que les fichiers locaux : dans la liste des fichiers dans le Site distant, sélectionnez le dossier de votre site puis Edition – Sélectionner distants plus récents – Pour publier des fichiers qui ont été modifiés ou ajoutés sur votre machine en local, sélectionnez-les dans la liste des Fichiers locaux et cliquez sur Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Mettre le site à jour – Pour acquérir sur votre machine locale des fichiers qui ont été modifiés sur le serveur, établissez si besoin la connexion – Dans la liste des fichiers du Site distant, sélectionnez les fichiers à récupérer : Site –Acquérir ou ou faites glisser les fichiers dans la partie Fichiers Locaux – Pour effectuer une synchronisation, si vous souhaitez ne synchroniser que quelques fichiers ou dossiers, sélectionnez-les : Site – Synchroniser du menu local du panneau ou icône de synchronisation

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Retrouver des fichiers Au cas où l’organisation du site serait différente entre le dossier local et le dossier publié sur le serveur, il peut être utile de retrouver rapidement la correspondance d’un fichier. – Pour retrouver l’emplacement d’une page ouverte dans l’arborescence du dossier local ou sur le serveur, utilisez Site – Repérer dans le site ou cliquez sur le bouton de la barre d’outils Document et choisissez Repérer dans le site – Pour retrouver un fichier sur le serveur, sélectionnez le fichier local à retrouver dans la liste Fichiers locaux puis Edition – Retrouver sur le site distant du menu local du panneau Fichiers – Pour retrouver un fichier dans le dossier local, sélectionnez le fichier publié dans la liste des fichiers dans le Site distant puis Edition – Retrouver sur le site local du menu local Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Mise en ligne du site • Créer un rapport de site Lors de la création d’un site Web avec Dreamweaver, vous avez la possibilité de créer des rapports permettant de compiler des problèmes éventuels de syntaxe au niveau du code HTML généré (éléments redondants, éléments vides …) et comprenant des informations sur le travaill collaboratif – Site – Rapports

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr


Merci de votre attention

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr

LES BASES DE DREAMWEAVER  

MANUAL DUTILISATION DREEMWEAVER

Read more
Read more
Similar to
Popular now
Just for you