Dreamweaver : les fonctions essentielles

Transcription

1 Dw ADOBE DREAMWEAVER CS3 De GoLive à Dreamweaver Dreamweaver : les fonctions essentielles Formateur : Éric Morasse Conseiller en formation et en multimédia Hydro-Québec Distribution

2 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Introduction Objectif de la formation Cette formation a pour but de connaître les fonctions essentielles de conception de site Internet simple avec le logiciel Adobe Dreamweaver. Cette formation servira à apprendre les étapes de création d un site, l interface du logiciel, les différents outils et les principales fonctions, la gestion des fichiers ainsi que trois méthodes de conception : en cadres, en tableau et en CSS. Contenu de la formation Historique des logiciel GoLive et Dreamweaver Étapes de conception d un site Internet Espace de travail Palettes d outils et menus Les fichiers et les hyperliens Fonction Site Méthodes de conception de site Internet Mise en page avec des cadres Mise en page en mode tableau Mise en page avec balises div, calques et CSS

3 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Historique des logiciels GoLive et Dreamweaver GoLive GoLive est un éditeur HTML de type «tel écrit, tel écran» (alias WYSIWYG, en anglais, pour «What you see is what you get» : «vous obtiendrez ce qu vous voyez»), racheté par Adobe Systems en Son grand concurrent était Dreamweaver développé par Macromedia. Le rachat de Macromedia par Adobe en avril 2005 a donc permis à adobe de supprimer de la «Creative Suite» l un des deux logiciels, en l occurence Adobe GoLive, jugé moins performant par les professionnels. GoLive a été créé vers 1996 par gonet Communications, entreprise partagée entre la Californie et l Allemagne (Hambourg). Il s appelait alors Golive Pro. Selon Robert Cailliau, c était de loin l éditeur HTML le plus avancé de son temps. Mais il ne fonctionnait que sur Apple Macintosh, ce qui réduisait son marché. En 1997, Golive Pro est devenu CyberStudio et c était le produit phare de l entreprise GoLive. En 1999, Adobe achète GoLive qui en fait son logiciel phare de création Internet laissant le limité Pagemill sur la touche. Enfin, suite à l acquisition de Macromédia par Adobe en 2005, GoLive disparaît laissant la place à Dreamweaver. Source : Wikipédia

4 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Historique des logiciels GoLive et Dreamweaver Dreamweaver Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette excellente formule remplaçant désormais dans la terminologie informatique le sigle anglophone WYSIWYG («What You See Is What You Get» : «ce ce que vous voyez est ce que vous obtiendrez»). Dreamweaver offre deux modes de conception par son menu affichage : Mode création : mise en page directement à l aide d outils simples, comparables à un logiciel de traitement de texte (insertion de tableau, d image, etc). Mode code : éditer directement le code (HTML ou autre) qui compose la page On peut passer très facilement d un mode d affichage à l autre ou opter pour un affichage mixte. Cette dernière option est particulièrement intéressante pour les débutants, qui à terme, souhaitent se familiariser avec le langage HTML. Dreamweaver a évolué avec les technologies de l internet. Il offre aujourd hui la possibilité de concevoir des feuilles de style (modèle de création). Les liaisons avec des bases de données ont également été améliorées ainsi que le chargement des fichiers sur les serveurs d hébergement. Il propose en outre l utilisation de modèles imbriqués de pages web, selon un format propriétaire. Dreamweaver 1.0 (Sortie en décembre 1997 ; Dreamweaver 1.2 Sortie en Mars 1998) Dreamweaver 2.0 (Sortie en décembre 1998) Dreamweaver 3.0 (Sortie en décembre 1999) ajout de la création de modèles de pages Dreamweaver UltraDev 1.0 (Sortie en décembre 1999) Dreamweaver 4.0 (Sortie en décembre 2000) Intégration de langages serveur (php, asp) Dreamweaver UltraDev 4.0 (Sortie en décembre 2000) Dreamweaver MX (Sortie en Mai 2002) Dreamweaver MX 2004 (Sortie en septembre 2003) Dreamweaver 8 (Sortie le 28 septembre 2005) Dreamweaver CS3 (Sortie juillet 2007) Source : Wikipédia

5 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Étapes de création d un site Internet Planification et configuration de votre site Déterminez l emplacement où vos fichiers seront enregistrés. Examinez les besoins du site. Organisez l information et les ressources nécessaires. Définissez une structure du site (arborescence). Organisation et gestion des fichiers de votre site Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de modifier l organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d un processus d archivage/extraction pour empêcher l écrasement des fichiers et la synchronisation des fichiers sur vos sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Mise en forme de vos pages web Sélectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver pour définir la présentation de votre site. Vous pouvez utiliser des éléments PA (calques), des styles de positionnement CSS ou des mises en forme CSS prédéfinies de Dreamweaver pour définir la mise en forme. Les outils de création de tableaux vous permettent de concevoir des pages rapidement en dessinant, puis en réorganisant la structure des pages Si vous souhaitez afficher plusieurs éléments simultanément dans un navigateur Web, vous pouvez utiliser des cadres pour mettre en forme vos documents. Source : Document d aide d Adobe Dreamweaver

6 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Étapes de création d un site Internet Ajout de contenu dans les pages Ajoutez des actifs et des éléments de conception, par exemple du texte, des images, des images avec effet de survol, des cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez utiliser les fonctions intégrées de création de page pour les éléments tels que les titres et les arrière-plans, taper directement dans la page ou importer du contenu d autres documents. Dreamweaver comprend des outils permettant d optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs Web Test et publication Dreamweaver comprend des outils permettant d optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs Web Le test de vos pages est un processus continu qui se déroule tout au long du cycle de développement. A la fin de ce cycle, vous publiez le site sur un serveur.

7 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Espace de travail L interface de GoLive B C D F A A. Palette Insertion B. Barre d outils du document C. Fenêtre de document D. Groupes de panneaux E. Sélecteur de balises F. Inspecteur Propriétés E

8 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Espace de travail L interface de Dreamweaver A B C D E F G A. Barre Insertion B. Barre d outils du document C. Fenêtre de document D. Groupes de panneaux E. Sélecteur de balises F. Inspecteur Propriétés G. Panneau Fichiers

9 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Espace de travail De GoLive à Dreamweaver

10 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES Espace de travail L espace de travail contient les éléments suivants: Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux, inspecteurs et fenêtres, utilisez le menu Fenêtre. Si vous n arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux ouverts à l écran. Ecran d accueil Permet d ouvrir un document récent ou de créer un nouveau document. Vous pouvez également, à partir de l écran d accueil, survoler Dreamweaver ou accéder à un didacticiel. Barre Insertion Contient des boutons permettant d insérer divers types d objets, tels que des images, tableaux et éléments PA dans un document. Chaque objet est une portion de code HTML vous permettant de définir différents attributs lors de son insertion. Vous pouvez, par exemple, insérer un tableau en cliquant sur le bouton Tableau de la barre Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion. Barre d outils du document Contient des boutons permettant d accéder aux différents modes d affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les différentes options d affichage et d effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur. Barre d outils standard Non affichée dans l agencement par défaut de l espace de travail. Contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre d outils standard, choisissez Affichage > Barres d outils > Standard. La barre d outils de codage Affichée en mode Code un iquement. Regroupe des boutons couvrant la plupart des opérations de codage standard.

11 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 10 Espace de travail La barre d outils de rendu de style Masquée par défaut. Composée de boutons qui vous permettent d avoir un aperçu de votre création dans différents types de média si vous utilisez des feuilles de style dépendantes du média. Elle contient également un bouton qui permet d activer ou de désactiver les styles CSS (Cascading Style Sheets). Fenêtre de document Affiche le document que vous créez et modifiez. L inspecteur Propriétés Permet de visualiser et de modifier diverses propriétés de l objet ou du texte sélectionné. Chaque objet contient des propriétés différentes. L inspecteur Propriétés n est pas développé par défaut dans la présentation de l espace de travail Codeur. Le sélecteur de balises Située dans la barre d état, dans le bas de la fenêtre de document. Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Groupes de panneaux Ensembles de panneaux associés regroupés sous un même titre. Pour développer un groupe de panneaux, cliquez sur la flèche d agrandissement située à gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée d ancrage sur le côté gauche de la barre de titre du groupe. Le panneau Fichiers Permet de gérer vos fichiers et dossiers, qu ils fassent partie d un site Dreamweaver ou qu ils se trouvent sur un serveur distant. Il permet également d accéder à tous les fichiers situés sur votre disque local, tout comme le Finder de Mac OS X.

12 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 11 Barre d outils de document Présentation de la barre d outils de document A. Afficher le mode Code B. Afficher les modes Code et Création C. Afficher le mode Création D. Titre du documen E. Gestion des fichiers F. Aperçu/Débogage dans le navigateur G. Actualiser mode Création H. Afficher les options I. Assistances visuelles J. Valider le marqueur K. Vérification de la compatibilité avec les navigateurs Les options suivantes s affichent dans la barre d outils de document : Afficher le mode Code Affiche uniquement le mode Code dans la fenêtre de document. Afficher les modes Code et Création Fractionne la fenêtre de document afin d afficher le mode Code et le mode Création. Dans ce cas, l option Mode Création en haut est activée dans le menu Options d affichage. Afficher le mode Création Affiche uniquement le mode Création dans la fenêtre de document. Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, CSS ou d autres types en mode code, les fichiers ne sont pas visibles en mode Création, et les boutons Création et Scinder sont grisés. Titre du document Permet d attribuer un titre à votre document et l afficher dans la barre de titre du navigateur. Si votre document possède déjà un titre, celui-ci s affiche dans ce champ. Gestion des fichiers Affiche le menu contextuel Gestion des fichiers. Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur. Sélectionnez un navigateur dans le menu contextuel. Actualiser mode Création Actualise le mode Création du document après avoir apporté des modifications dans le mode Code. Les modifications apportées dans le mode Code n apparaissent pas automatiquement dans le mode Création. Vous devez exécuter tout d abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

13 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 12 Barre d outils de document Afficher les options Permet de définir les options d affichage des modes Code et Création, notamment le mode devant s afficher au-dessus de l autre. Les options du menu s appliquent à l affichage actuel : Mode Création, mode Code ou les deux. Assistances visuelles Permet d utiliser différents supports visuels en vue de la conception de vos pages. Valider le marqueur Permet de valider le document actif ou la balise sélectionnée. Vérification de la compatibilité avec les navigateurs Permet de vérifier si votre code CSS est compatible avec différents navigateurs. Présentation de la barre d outils standard La barre d outils standard contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu équivalentes.

14 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 13 Barre d états Présentation de la barre d état La barre d état, située au bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création. A. Sélecteur de balises B. Outil Sélectionner C. Outil Main D. Outil Zoom E. Définir le facteur de zoom F. Menu contextuel Taille de fenêtre G. Taille du document et estimation du temps de téléchargement Sélecteur de balises Affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur <body> pour sélectionner tout le corps du document. Pour définir les attributs class ou id d une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel. Outil Sélectionner Active et désactive l outil Main. Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document. Outil Zoom et le menu contextuel Définir le facteur de zoom Permettent de définir un taux d agrandissement pour votre document. Menu contextuel Taille de fenêtre Visible en mode Création uniquement. Permet de redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées. Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de téléchargement de la page.

15 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 14 Barre Insertion Présentation de la barre Insertion Les boutons qui composent la barre Insertion permettent de créer et d insérer des objets, tels que des tableaux, des éléments PA et des images. Lorsque vous placez le curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton apparaît. Les boutons sont organisés en plusieurs catégories, que vous pouvez afficher en cliquant sur les onglets dans la partie supérieure de la barre Insertion. Certaines catégories disposent de boutons ouvrant des menus contextuels comme pour le bouton Image.

16 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 15 Barre Insertion Onglet Commun Hyperlien Créer un lien vers une autre page sur un texte sélectionné ou une image. 4. Tableau Insérer un tableau avec colonnes et rangées Lien de messagerie Créer un lien vers une adresse de courrier électronique 3. Ancre nommé Créer un lien vers le haut ou le bas à l intérieur d une page lorsque celle-ci est longue 5. Insérer une balise Div Insérer une zone de mise en page type Div. 6. Image Insérer une image ou une zone cliquable sur une image

17 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 16 Barre Insertion Onglet Commun 7. Média Importer un fichier multimédia comme un fichier Flash, Quicktime. 11. Head. Paramétrer la balise Head comme les mots-clés, la description du site. 8. Date Insérer la date et l heure selon différents formats. Astuce : En cochant Mettre à jour automatiquement lors de l enregistrement, la date insérée dans la page se modifie sans devoir la changer. 13. Script Insérer un Javascript. 9. Inclusion côté serveur Insérer des codes et des liens sur des serveurs distants. 10. Commentaires Insérer un commentaire invisible qui est affiché dans le code source. 14. Modèles Sauvegarder la page comme modèle réutilisable. 15. Balise Insérer dans le code source une balise de programmation HTML, PHP...

18 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 17 Barre Insertion Onglet Mise en forme Tableau : mode Standard ou Développé Visualiser les tableaux en mode aperçu ou en mode développement. Dans le deuxième cas, les tableaux sont déformés pour être plus facilement manipulables. 4. Barre de menu Spry Créer un menu à onglet avec un code précréé en Ajax qui peut être personnalisé. 2. Insérer balise Div Créer un bloc Div qui sert à délimiter des zones et appliquer par la suite des CSS. 3. Tracer un Div pour un élément PA Créer un élément position absolue (PA) ou calque afin d insérer un bloc de mise en page avec des valeur x, y, l, h. 5. Panneau à onglet Spry Créer un menu en largeur avec des onglets et des options en dessous de chacun 6. Accordéon Spry Créer un menu en hauteur avec des éléments de menu qui s ouvrent et se ferment.

19 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 18 Barre Insertion Onglet Mise en forme 7. Panneau réductible Spry Menu sous forme de panneau qui peut s agrandir. 13. iframe Insérer une zone qui servira à afficher un autre page dans la page active sans utiliser de cadre. 8. Tableau Insérer un tableau de données ou de mise en forme. 14. Cadre Insérer un jeu de cadres (frames). Les fonctions suivantes s appliquent à un tableau 9. Insérer une ligne au dessus 10. Insérer une ligne en dessous 11.Insérer une colonne à gauche 12. Insérer une colonne à droite

20 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 19 Barre Insertion Onglet formulaire Formulaire Définir la zone où se trouvera le formulaire. 5. Bouton radio Créer un item d une liste à choix unique. 2. Champ de texte Créer un bloc de texte d une ligne de hauteur. 3. Zone de texte Créer un bloc de texte multi lignes avec possibilité d ajouter des barres de défilement au besoin. 6. Groupe de bouton radio Regrouper plusieurs choix à réponse unique à l intérieur du même bloc de données. 7. Liste menu Créer un menu déroulant offrant plusieurs choix de réponses 4. Case à cocher Créer un item d une liste à choix multiples. 8. Menu de reroutage Créer un menu déroulant où chaque item de la liste est un hyperlien

21 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 20 Barre Insertion Onglet Formulaire 9. Champ d image Afficher une image dans un formulaire. 13. Ensemble de champs Regrouper dans une section plusieurs choix de réponses, particulièrement des cases à cocher ou des boutons radio. 10. Champ de fichier Insérer une zone pour télécharger ou aller chercher un fichier avec le champ pour le nom du fichier et le bouton d action. 11. Bouton Insérer un bouton qui déclenchera une action lorsque cliquer (par exemple, un bouton d envoi du formulaire). 14 à 17. Validation Spry Vérifier si les réponses des champs sont valides en fonctions de sa codification. Par exemple, un champ courrier électronique doit avoir une réponse de type moi@courrier.com. Nécessite d encoder le champ en Ajax. 12. Étiquette Ajouter une référence dans le code source.

22 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 21 Barre Insertion Onglet Données Menu qui permet d intégrer des éléments liés à des technologies serveur comme des bases de données MySQL, XML. Diverses fonctions de formulaires sont disponibles dans cet onglet pour interagir avec des données serveur. Onglet Spry Menu qui intègre des fonctions et des éléments Spry programmées en Ajax. Onglet Texte Menu où se retrouvent différents styles de base en HTML pour les textes.

23 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 22 Barre Propriétés La barre Propriétés lorsqu un texte ou le fond de la page est sélectionné La Barre Propriétés lorsqu une image est sélectionnée

24 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 23 Propriétés de la page Les différentes fenêtres des attributs Propriétés de la page

25 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 24 Fichiers Règles concernant la nomenclature des fichiers Toujours privilégier des noms de fichiers le plus court possible. 26 caractères + extension de 3 ou 4 chiffres Exemple: fichier.htm ou fichier.html, image.jpg Pas d accent ni de caractères spéciaux Majuscule et minuscule permis (tout en minuscule recommandé) Pas d espace (lorsqu un fichier a une espace, le serveur web la remplace par %20 brisant ainsi les liens avec le fichier source. Principaux types de fichiers acceptés pour les images Les images doivent avoir une résulution de 72 ppp. Mode Couleurs indexées:.gif Mode RVB:.jpg.png Vectoriel:.svg Animation Flash:.swf Importation d image 1. Assurez-vous que l image a été préalablement déposé dans le dossier de votre site avant de l importer. 2. Pour importer une image, sélectionnez l endroit avec le curseur où vous désirez importer l image. 3. Dans la barre Insertion, cliquez sur l icône image et sélectioner le fichier désiré dans le navigateur de fichier. L image s affichera. Vous pouvez également importer une image par le menu Insertion > Image. Pour importer des fichiers médias comme des animations Flash ou des vidéos Quicktime, utilisez le menu Insertion > Media et sélectionnez le type de fichier média à importer. Une fenêtre de navigation apparaîtra par le suite afin de sélectionner le fichier.

26 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 25 Hyperliens Types d hyperliens Lien relatif: lien d un site vers un autre fichier du même site Exemple: /images/photo1.jpg -../../documents/document1.pdf Lien absolu: lien vers un autre site ou qui pointe vers un URL complet Exemple: HYPERLINK « Lien de type courrier électronique mailto: Exemple: HYPERLINK «mailto:moi@courrier.com» mailto:moi@courrier.com Créer un lien 1. Sélectionnez une image ou une partie de texte. 2. Inscrivez dans la case Lien de la barre Propriétés le nom de la page ou du fichier à charger. Vous pouvez également saisir un adresse absolue pointant vers un autre site. 3. Sélectionnez le type de cible. Cible Quand on crée un lien, on doit définir dans quelle fenêtre s ouvrira la nouvelle page dans la barre Propriétés. Aucun ou _self: charge la page dans le même cadre ou la même page. _blank: charge la page dans une nouvelle page. _parent: charge la page dans le jeu de cadres parent ou dans la fenêtre du cadre contenant le lien. _top: charge la page dans la fenêtre principale du navigateur et supprime tous les cadres.

27 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 26 Hyperliens Créer un lien sur une partie d une image (mapping) 1. Sélectionnez l image désirée sur une partie de laquelle le lien sera créé. 2. Sélectionnez le type de zone désirés en bas à gauche de la barre Propriétés (ellipse, rectangle, forme personnalisée). 3. Définissez la zone en glissant le curseur pour créer une forme circulaire ou rectangulaire ou en cliquant pour définir une forme personnalisée. 4. En maintenant sélectionnée la zone cliquables, inscrivez le lien dans Liens de Propriétés. 5. Sélectionnez le type de cible.

28 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 27 Menus Les menus de Dreamweaver

29 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 28 Fonction Site Créer un site avec la fonction Site et la palette Fichiers de Dreamweaver Le logiciel a un environnement performant de création et de gestion de site, qui comprend un module de transfert FTP pour déposer des fichiers dans un serveur d hébergement Internet. Les étapes de création d un site 1. Créer sur le poste de travail, un dossier qui contiendra les fichiers du site 2. Allez dans le menu Site, sélectionnez Nouveau Site Un assistant d installation, deux modes d affichage sont possibles : Élémentaire : pour les débutants et des sites standards Avancé : pour les habitués et contient des options pour des sites plus complexes. 4A. Définissez le site 4B. Indiquez si une technologie serveur est utilisée.

30 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 29 Fonction Site Les étapes de création d un site 4C. Définissez à quel endroit est le dossier local. 4D. Saisissez les paramètres FTP du serveur d hébergement. 4E. Activer au besoin l archivage et l extraction. 4F. Vérifiez les paramètres de votre site et cliquez sur Terminer. Idéal si plusieurs personnes travaillent sur le site

31 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 30 Fonction Site Les étapes de création d un site Aperçu de l Assistant de création de site en mode Avancé.

32 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 31 Fonction Site Les étapes de création d un site 5. Ouvrez la palette Fichiers (menu Fenêtre > Fichiers [F8]) 6. Créez une page web de type HTML (menu Fichiers > Nouveau [Cmd N]) 7. Intégrer les éléments à votre fichier (textes, images, couleurs, styles, hyperliens...) Si vous avez des images ou des documents à lier sur votre site, créez des dossiers, images et documents par exemple, à l intérieur de votre dossier local situé sur votre ordinateur. Vous déposerez ces fichiers dans ces dossiers. Dreamweaver synchronisera le contenu de votre répertoire local avec celui de la palette Fichiers. 8. Sauvegardez le fichier de la page web (menu Fichiers > Enregistrer [Cmd S]) dans le dossier créé précédemment. Important : la page d accueil doit toujours s appeler index.html

33 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 32 Fonction Site Les étapes de création d un site 9. Testez le site avec un navigateur Internet. Cliquez sur le bouton Aperçu/débogage dans le navigateur. Sélectionnez le navigateur désiré Vous pouvez paramétrer le navigateur par défaut en sélectionnant Modifier la liste des navigateurs... dans la liste déroulante Envoyez les fichiers sur votre serveur d hébergement par FTP Cliquez sur le bouton Connecter à un hôte distant (3) Cliquez sur le bouton Placer les fichiers (6) 11. Testez votre page avec un navigateur avec l adresse Internet 1. Site actif 2. Affichage local ou serveur de la liste des fichiers 3. Connection au serveur distant (hébergeur) 4. Actualiser le contenu entre le dossier local et la liste de la palette Fichiers. 5. Télécharger les fichiers du serveur distant vers le poste local. 6. Placer les fichiers vers le serveur distant. 7. Synchroniser le contenu entre le dossier local et les fichiers du serveur distant. Une synchronisation consiste à comparer les fichiers, à ajouter ceux inexistants d un côté, à remplacer les fichiers communs avec la dernière version et à ne rien faire si les fichiers sont identiques. 8. Agrandir la fenêtre afin d afficher le contenu local et distant en deux colonnes sur la même palette.

34 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 33 Méthodes de conception de site Internet La méthode «curseur» ou «traitement de texte» On saisie le texte là où est le curseur. L alignement du texte (gauche, droite, centré) se fait sur toute la fenêtre. Pour insérer une image, on place le curseur à l endroit désiré et l image se place selon l alignement du curseur à cet endroit. Commentaires: Avantages : Facile à travailler sans connaître un logiciel ou des langages de programmation en profondeur. Désavantages : Méthode dépassée car elle permet peu de variétés ou de style. Ne permet pas de définir des zones de navigation (menu par exemple) séparées du contenu.

35 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 34 Méthodes de conception de site Internet La méthode par cadres (frames) On crée un fichier conteneur qui servira à accueillir différents cadres ou sections distinctes. Ces cadres subdivisent la page conteneur en zones. Chacune de ces zones est un page web indépendante de la page conteneur. On peut changer le contenu dans la page conteneur de chacune des pages ou effectuer les modifications dans les fichiers séparés du conteneur. Ce dernier affichera les fichiers selon leur dernière sauvegarde. Commentaires: Avantages: seul le contenu qui change est regénéré d une page à l autre rendant l affichage plus rapide pour les éléments communs comme un menu ou une en-tête. métode très utile pour des sites où le contenu qui change n a pas besoin d un accès direct ou d une adresse spécifique. Par exemple un site où il a une formation à suivre ou un tutoriel. Désavantages: L adresse de la page affichée dans le navigateur est toujours celle de la page conteneur. Difficulté pour l utilisateur d aller chercher un contenu spécifique, en signet par exemple, en tapant l adresse d une page autre que celle du conteneur. Méthode dépassée avec l arrivée de connexion Internet plus rapide et du langage CSS Difficulté pour les robots de moteurs de recherche d indexer le contenu du site.

36 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 35 Méthodes de conception de site Internet La méthode par tableau On crée des tableaux transparents sans contour pour positionner précisément des éléments. On peut ainsi définir des zones de navigation et de contenu sans utiliser de cadre. Recours non nécessaires au code de programmation, en paramétrant les données du tableau dans les fenêtres du logiciel en mode création. Commentaires: Avantages: Bonne méthode pour positionner des éléments. Reconnu par tous les logiciels de navigation. Méthode très utilisée. On peut appliquer des feuilles de style pour les textes et les parties du site. Désavantages: Un site complexe, avec plusieurs tableaux imbriqués les uns dans les autres, rend la gestion des tableaux complexes. Alourdit le code et la vitesse d interprétation des navigateurs. Parfois, certaines mises en pages occasionne des décalages avec certains navigateurs. De moins en moins utilisée depuis l arrivée des balises de positionnement et des calques associés au langage CSS.

37 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 36 Méthodes de conception de site Internet La méthode par balise de positionnement et CSS Les balises de positionnement, qui séparent la page en zones, sont complémentaires aux CSS qui donnent l allure au site. On positionne les éléments en position absolue (PA) avec des calques (x, y, l, h) ou relative avec des balise div. Les feuilles de styles en cascades (CSS) gèrent le style des textes, des blocs, des images dans un fichier qui peut être commun à plusieurs. Les programmeurs peuvent monter un site sans passer par le mode création. Possibilité de changer le style et de mettre à jour un site très rapidement uniquement en changeant les feuilles de style communes. Commentaires: Avantages: Mise à jour de site très rapide en changeant uniquement le fichier des CSS. Codage très léger en utilisant un fichier CSS commun à toutes les pages. Méthode très utilisée par le professionnels. Possibilité d intégrer du contenu dynamique provenant d un serveur à l intérieur de pages gabarits. Positionnement absolu facile à créer avec des calques. Facile à appliquer des styles standard à tout un site avec les feuilles de style. Désavantages: Pas parfaitement compatible avec tous les navigateurs. Connaissance en programmation souhaitable car on doit parfois modifier le code sans passer par le mode conception.

38 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 37 Mise en page avec des cadres (frames) Les étapes de création d un site avec des cadres 1. Créez un nouveau fichier [Cmd N]. S assurer de ne rien insérer dans la page. 2. Affichez la palette Cadre (Menu Fenêtre) [Maj F2]. 3. Dans le barre Insertion, cliquez sur la flèche à côté de l icône Cadres. 4. Choisir un jeu de cadres dans la liste déroulante. 5. Dans la palette Cadres, cliquez sur chacune des zones et renommez-les à l item Nom du cadre de la barre Propriétés Une page qui est divisé, par exemple, en 3 cadres contient 4 fichiers HTML. Le premier qui est le conteneur et 3 fichiers HTML. Attention, pour la prochaine étape qui est la sauvegarde des différents fichiers. Cette étape est importante lorsque viendra le temps d indiquer dans quelle fenêtre (la cible) afficher le résultat d un lien. 6. Avant de sauvegarder, insérer un élément de mise en page, temporaire ou non, dans chaque cadre. Par exemple, inscrivez un mot de référence. 7. Pour sauvegarder les fichiers, Aller dans le menu Fichier et sélectionnez Enregistrez tout. Attention, la première page qui est demandé est la page conteneur celle qui contient le jeu de cadres. Si c est la page d accueil du site nommez-la index.html. Ensuite, Dreamweaver vous demandera d enregistrer les autres pages. ATTENTION, avant de sauvegarder, cliquez sur chaque cadre dans la palette cadre et notez chacun des noms temporaires de fichier attribués par défaut par Dreamweaver qui apparaît dans le haut de la fenêtre du fichier (par exemple UntitledFrame-3.html). Évidemment, renommez avec des noms de fichiers intuitifs comme menu.html, principal.html, en-tete.html...

39 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 38 Mise en page avec des cadres (frames) Les étapes de création d un site avec des cadres 8. Vous pouvez maintenant effectuer la mise en page de chacune des pages dans le fichier contenant les jeux de cadres ou en ouvrant chacune des pages individuelles sauvegardées précédemment. À la réouverture du fichier conteneur, le page affichera les dernières versions de chacun des fichiers HTML. Les trois modes de modifications d un fichier avec jeu de cadres. En cliquant sur un cadre dans la palette Cadres En cliquant sur le fond sur le fond d un cadre En cliquant sur la bordure séparant deux cadres

40 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 39 Mise en page en mode tableau Les étapes de création d un site avec des tableaux 1. Créez un nouveau fichier [Cmd N]. 2. Appliquez au besoin un fond à la page et définissez les propriétés de la page. 3. Créer un tableau sans bordure de la largeur désirée contenant une colonne et une rangée désirée pour le contenu de votre site. Ce tableau servira de conteneur pour d autres tableaux qui formeront les sections du site. Une fois le tableau créé, vous pouvez ajuster sa hauteur et ses paramètres dans le bandeau Propriétés lorsque la balise <tr> ou <td> sont sélectionnés. Vous ne pouvez indiquer de hauteur lorsque la balise <table> est sélectionnée. 4. Appliquez le style désiré pour ce tableau qui servira de fond au contenu. 5. Créer d autres tableaux qui s imbriqueront les uns dans les autres en leur attribuant des motifs ou couleurs de fond, des images, du texte... Vous devez créer autant de tableau ou de cellule de tableau que votre site contient de zones. Par exemple, une zone pour l en-tête, le menu gauche, le pied de page, le menu de droite, le contenu principal Dans chaque tableau, vous pourrez alors mettre en page les différents éléments (textes, images, fond, styles...) 7. Si vous créer un tableau de mise en forme de plus d une colonne, il est obligatoire de sélectionner chacune des colonnes et d attribuer les valeurs en pixels pour chacune d elle. Par exemple, si votre site a une largeur de 600 pixels et que vous créer 3 colonnes, le total des largeurs de ces 3 colonnes doit donner 600. Les colonnes de gauche et de droite pourraient avoir une largeur de 125 pixels chacune, la colonne du milieu devra avoir 350 pixels de largeurs ( donne 600 pixels).

41 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 40 Mise en page en mode tableau Les modes de modifications d un tableau En cliquant sur la balise <tr> ou <td> (intérieur d une cellule) En cliquant sur la balise <table> (paramétres du tableau global) Les trois modes d affichage en tableau Mode Standard Mode Tableaux développés Mode Mise en forme

42 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 41 Mise en page avec balises div, calques et CSS Les principes des balises, des calques et des CSS Avec cette méthode, on applique des zone à notre page, un peu comme en mode tableau, cette fois-ci avec des balises div. Cette dernière est un code qui permet au navigateur de positionner des éléments sur une page. La balise div est imbriqué à la page et ne peut être positionné de façon absolue. Si on désire créer une zone qui aura des éléments qui seront absolues (avec des valeurs x, y, l, et h précises) on ajoute au site des calques ou des balises div avec élément PA (Position absolue). Les feuilles de style en cascades (CSS pour Cascading Style Sheet) servent à définir l apparence visuelle de ces balises mais aussi aux textes. Les CSS permettent d attribuer des paramètres aux textes, au fond, à la forme. Les CSS, qui contiennent les définitions des styles, peuvent être intégrés à un fichier seulement ou être partagés pour plusieurs pages (recommandé) en créant un fichier commun dans un site. À noter, on peut attribuer des CSS pour d autres méthodes de mise en page comme en tableau ou en cadre.

43 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 42 Mise en page avec balises div, calques et CSS Les étapes de création d un site avec des balises div 1. Créez un nouveau fichier [Cmd N]. 2. Définissez les attributs de la page. 3. Vous pouvez créer une balise Div qui crée une zone qui ressemble beaucoup à un tableau. Comme en mode tableau, vous devez créer une première balise conteneur dans laquel vous ajouterez d autres div. Pour ce faire, aller dans la barre Insertion, et cliquez sur le bouton balise div. 4. Pour donner du style à cette balise ou à toute autre balise, vous devez créer une feuille de style CSS. La prochaine section traitera de la création des CSS. 5. Pour créer une zone superposée ou non à une autre avec un positionnement précis, créer une balise div PA. Il s agit en fait d un calque qui a une position absolue avec une valeur x, y, l, et h. L ordre des calques peut être géré dans la palette Éléments PA.

44 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 43 Mise en page avec balises div, calques et CSS Création et gestion des feuilles de style en cascades (CSS) 1. Pour créer une feuille de style, ouvrez la palette CSS, cliquez sur le bouton Options puis sélectionnez Nouveau. Le Type de sélecteur permet de définir sur quel élément sera appliqué la feuille de style. Classe : pour un élément comme du texte, Balise et Avancé: pour attribuer un style à un balise div au complet. Donnez un nom facilement identifiable à votre style. Il est fortement recommandé de définir les CSS dans un nouveau fichier feuille de style afin que vos styles soient communs à toutes vos pages. Ainsi, lorsque vous voudrez changer un attribut, le changement s effectuera pour tous les documents de votre site. 2. Ensuite, saisissez les valeurs que vous voulez attribuer à un élément. Par exemple, pour une balise div vous pouvez définir les attributs de l arrière-plan et de la grandeur. Pour du texte, vous pouvez définir les attributs qui touchent la typographie. Bref, vous attribuer des valeurs uniquement là où c est applicable. 3. Pour attribuer un style à un élément, sélectionnez-le puis choisissez le style dans la palette CSS. Vous pouvez aussi cliquer sur le bouton droit de la souris et sélectionner Style CSS. 4. Une fois vos balises div et vos calques créés, vous pouvez effectuer la mise en page en intégrant du texte et des images.

45 Dw ADOBE DREAMWEAVER CS3 LES FONCTIONS ESSENTIELLES 44 Mise en page avec balises div, calques et CSS Les différentes fenêtres d attributs de feuille de style