Retrouvez gratuitement la notice de l'appareil DREAMWEAVER CS5.5 ADOBE au format PDF.
Téléchargez la notice de votre Logiciel de développement web au format PDF gratuitement ! Retrouvez votre notice DREAMWEAVER CS5.5 - ADOBE et reprennez votre appareil électronique en main. Sur cette page sont publiés tous les documents nécessaires à l'utilisation de votre appareil DREAMWEAVER CS5.5 de la marque ADOBE.
Utilisation de la fenêtre de document
Test de votre site Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Mise en forme des pages avec CSS Utilisation des balises div
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Utilisation de cadres
Menus de reroutage Barres de navigation Cartes graphiques
Configuration d'un environnement de codage Définition des préférences de codage Rédaction et modification de code Réduction du code
Création d'un modèle Dreamweaver
Création de régions répétées dans les modèles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Prévisualisez vos conceptions dans des résolutions d'écran standard, ou utilisez des requêtes multimédias pour définir la résolution. Lorsque vous testez pour des appareils qui modifient l'orientation de la page en fonction de la façon dont l'appareil est tenu, utilisez les options paysage et portrait au cours de la prévisualisation. Pour plus d'informations, voir “Création de contenu pour écrans et appareils multiples” on page 504.
Permet d'utiliser des requêtes multimédias pour personnaliser l'apparence de votre site pour différentes résolutions d'écran. Pour plus d'informations, voir “Création de requêtes multimédias (CS5.5 et versions ultérieures)” on page 504.
Permet de concevoir rapidement une application Web qui fonctionne sur la plupart des appareils mobiles à l'aide du widget jQuery Mobile. Pour plus d'informations, reportez-vous à la section “Création d'applications Web pour appareils mobiles (CS5.5)” on page 506.
Permet d'assembler vos applications Web dans Dreamweaver et de les déployer sur des appareils tournant sous Android™ et iOS. Pour plus d'informations, consultez la section “Assemblage d'applications Web sous forme d'applications mobiles natives (CS 5.5)” on page 509.
Dreamweaver prend en charge les conseils de code pour HTML5, CSS3, et jQuery. Les mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5. Dreamweaver prend en charge la fonctionnalité HTML5 d'incorporation de vidéos dans les pages HTML. Pour plus d'informations, voir “Incorporation de vidéos aux pages Web (HTML5)” on page 261. Le panneau CSS a été amélioré de façon à prendre en charge les propriétés CSS3 les plus fréquemment utilisées. Pour plus d'informations, voir “Conseils de code” on page 321 et “Améliorations à la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)” on page 141.
Adobe Business Catalyst est une application hébergée qui remplace les outils de bureau traditionnels par une plateforme centralisée pour concepteurs Web. Cette application s'associe à Dreamweaver pour vous permettre de créer ce que vous souhaitez, de sites de base reposant sur les données à de puissantes boutiques en ligne. Voir http://www.adobe.com/go/business_catalyst_get_extension_fr.
“Désactivation/Activation du code CSS” on page 157. Inspection CSS Le mode Inspection permet d'afficher visuellement les propriétés du modèle de boîte en feuilles CSS (dont l'espacement, la bordure et la marge) en détail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug. Voir “Inspection de CSS en mode En direct” on page 157. Mises en forme CSS de départ Dreamweaver CS5 comprend des mises en forme CSS de départ qui ont été mises à jour et simplifiées. Les sélecteurs descendants complexes des mises en forme CS4 ont été supprimés et remplacés par des classes simplifiées, plus compréhensibles. Voir “Création d'une page avec une mise en forme CSS” on page 167.
La fonctionnalité Fichiers à association dynamique permet de trouver tous les fichiers et scripts externes requis pour l'assemblage de pages CMS (système de gestion du contenu) basées sur PHP, ainsi que d'afficher leur nom de fichier dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver prend en charge la recherche de fichiers pour les cadres CMS Wordpress, Drupal et Joomla! . Voir “Ouverture de fichiers à association dynamique” on page 77.
La boîte de dialogue Définition du site remise à neuf (et désormais baptisée Configuration du site) facilite la configuration d'un site Dreamweaver local, de façon à vous permettre d'entamer immédiatement la création de pages Web. La catégorie Serveur distant permet de spécifier, dans la même vue, les serveurs distants et les serveurs d'évaluation. Consultez les sections “Configuration d'une version locale de votre site” on page 42 et “Connexion à un serveur distant” on page 42.
La fonctionnalité de conseils de code spécifiques au site permet de personnaliser votre environnement de codage lorsque vous utilisez des bibliothèques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres cadres. Les fichiers de thème pour les blogs et les autres fichiers et répertoires PHP personnalisés peuvent être inclus ou exclus des sources de conseils de code. Voir “Conseils de code spécifiques au site” on page 324.
Dreamweaver CS5 bénéficie d'une prise en charge accrue de Subversion. Vous pouvez désormais déplacer, copier et supprimer des fichiers localement, puis synchroniser les modifications avec votre référentiel SVN distant. La nouvelle commande Rétablir permet de corriger rapidement les conflits d'arborescence ou de revenir à la version précédente d'un fichier. En outre, une nouvelle extension vous permet de préciser quelle version de Subversion vous voulez utiliser pour un projet précis. Voir “Utilisation de Subversion (svn) pour acquérir et archiver des fichiers” on page 97.
Les fonctionnalités suivantes sont devenues obsolètes depuis Dreamweaver CS5 : • Connexion à un serveur FTP/RDS sans définir de site • Contrôle du comportement JavaScript de Shockwave ou de SWF • Créer un album photos pour le Web • Comportement JavaScript de masquage de menu contextuel • Gestion des classes CSS disponibles d'InContext Editing • Insérer FlashPaper • Insertion/suppression de Mark of the Web
• Comportements JavaScript de montage • Validation des balises • Affichage de Live Data
Présentation des processus de Dreamweaver Vous pouvez utiliser plusieurs approches pour créer un site Web. Voici l'une des approches possibles : Planification et configuration de votre site Déterminez l'emplacement où vos fichiers seront enregistrés et examinez les besoins du site, les profils de ses utilisateurs et les objectifs du site. Il convient également d'examiner les conditions techniques requises, notamment l'accès utilisateur et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement. Après avoir organisé vos informations et défini une structure, vous pouvez commencer la création du site. (Voir “Utilisation de sites Dreamweaver” on page 40.) 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. Dreamweaver vous permet également de gérer certains aspects de vos sites Adobe® Contribute®. (Voir “Gestion des fichiers et des dossiers” on page 80 et “Gestion des actifs et des bibliothèques” on page 119.) 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, 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. Finalement, vous pouvez créer de nouvelles pages à partir d'un modèle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modèle change. (Voir “Création de pages avec CSS” on page 132 et “Mise en forme des pages avec HTML” on page 185.)
Création de pages par codage manuel Le codage manuel des pages Web constitue une autre approche de la création de pages. Dreamweaver dispose d'outils d'édition visuelle conviviaux ainsi que d'un environnement de codage sophistiqué. Vous pouvez utiliser l'une ou l'autre de ces méthodes (ou bien les deux) pour créer et modifier vos pages. (Voir “Utilisation de code de page” on page 309.) Configuration d'une application Web pour un contenu dynamique De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations stockées dans des bases de données, voire d'ajouter ou de modifier des données dans certains cas. Pour créer ce type de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, créer ou modifier un site Dreamweaver et vous connecter à une base de données. (Voir “Préparation à la création de sites dynamiques” on page 549.) Création de pages dynamiques Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des jeux d'enregistrements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière. Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la fois (ou plusieurs pages d'enregistrements), ajoute des liens spéciaux permettant de passer d'une page d'enregistrements à une autre et crée des compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application ou d'entreprise en faisant appel à des technologies telles que Adobe ® ColdFusion® et les services Web. Si vous avez besoin de plus de souplesse, vous pouvez créer des comportements de serveur et formulaires interactifs personnalisés. (Voir “Ajout de contenu dynamique aux pages Web” on page 580.) Test et publication 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. De nombreux développeurs programment également une maintenance régulière pour s'assurer que le site reste à jour et est opérationnel. (Voir “Acquisition et placement de fichiers depuis ou vers votre serveur” on page 89.) Vous trouverez un didacticiel vidéo sur les possibilités offertes par Dreamweaver à l'adresse www.adobe.com/go/lrvid4040_dw_fr.
L'espace de travail de Dreamweaver permet d'afficher des documents et les propriétés des objets. Il comporte des barres d'outils donnant accès aux opérations les plus courantes, vous permettant ainsi de modifier rapidement vos documents.
L'espace de travail contient les éléments suivants: Note: Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour ouvrir les panneaux, inspecteurs et fenêtres, utilisez le menu Fenêtre. Ecran d'accueil Permet d'ouvrir un document récent ou de créer un nouveau document. Vous pouvez également, à
Barre d'application Sur toute la largeur de la partie supérieure de la fenêtre d'application, cette barre contient une section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrôles d'application. 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
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
également un bouton qui permet d'activer ou de désactiver les styles CSS (Cascading Style Sheets, feuilles de style en cascade). 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 possède 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. 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
Panneaux Permet de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles
Panneau Insertion Contient des boutons permettant d'insérer divers types d'objets, tels que des images, tableaux et éléments multimédias 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 du panneau Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion. 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 l'Explorateur Windows (Windows) ou le Finder (Macintosh).
La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants : Mode Création Un environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur. Mode Code Environnement de codage manuel pour rédiger et modifier du code HTML, JavaScript et de langage de serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code. Mode Code fractionné Version fractionnée du mode Code, qui permet de travailler dans différentes sections du document en même temps. Modes Code et Création Permettent d'obtenir l'affichage Code et l'affichage Création du document dans une même
Mode En direct Tout comme le mode Création, le mode Affichage en direct fournit une représentation plus réaliste de
Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode
Pour passer à un autre document, cliquez sur son onglet. Dreamweaver affiche également la barre d'outils Fichiers associés en dessous de l'onglet du document (ou sous la barre de titre du document si vous avez affiché les documents dans des fenêtres séparées). Les documents associés sont des fichiers, par exemple CSS ou JavaScript, qui sont associés au fichier actuel. Pour ouvrir l'un de ces fichiers associés dans la fenêtre de document, cliquez sur son nom dans la barre d'outils Fichiers associés.
“Utilisation de la fenêtre de document” on page 19 “A propos de l'affichage en direct” on page 304 “Ouverture des fichiers associés” on page 75 “Informations générales sur le codage dans Dreamweaver” on page 309
La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre différents mode d'affichage de votre document. La barre d'outils contient également plusieurs commandes et options courantes permettant d'afficher le document et de le transférer d'un site local vers un site distant. L'illustration ci-dessous représente la barre d'outil Document développée.
J. Actualiser mode Création K. Titre du document L. Gestion des fichiers
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
Afficher le mode Création Affiche uniquement le mode Création dans la fenêtre de document.
Mode En direct Affiche une vue du document non modifiable, interactive, basée sur un navigateur. Mode Code en direct Affiche le code tel qu'il est utilisé par le navigateur pour exécuter la page. Titre du document Permet d'attribuer un titre à votre document et l'afficher dans la barre de titre du navigateur. Si
Gestion des fichiers Affiche le menu Gestion des fichiers. Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur.
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
“Utilisation d'assistances visuelles pour la mise en forme” on page 185
La barre d'outils Standard contient des boutons correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu équivalentes.
La barre d'outils de rendu de style (masquée par défaut) est 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. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style.
Par défaut, Dreamweaver affiche votre mise en forme pour le type de média écran (qui indique comment une page apparaît sur un écran d'ordinateur). Vous pouvez afficher les rendus de type de média suivants en cliquant sur les boutons respectifs dans la barre d'outils de rendu de style. Rendu pour le type de support Ecran Indique comment la page apparaît sur un écran d'ordinateur. Rendu pour le type de support Impression Indique comment la page apparaît sur une feuille de papier imprimée.
Rendu pour le type de support Projection Indique comment la page apparaît sur un projecteur. Rendu pour le type de support TTY Indique comment la page apparaît sur un appareil de type télétype. Rendu pour le type de support TV Indique comment la page apparaît sur un téléviseur. Intervertir l'affichage des Styles CSS Permet d'activer ou de désactiver les styles CSS. Ce bouton fonctionne indépendamment des autres boutons de média. Feuilles de style à la création Permet de définir une feuille de style à la création.
La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page que vous examinez dans la fenêtre de document. A partir de Dreamweaver CS5, le mode En direct se comporte comme un navigateur ordinaire. Ainsi, même si vous accédez à un site en dehors de votre site local (par exemple http://www.adobe.com), Dreamweaver charge la page dans la fenêtre de document.
“Prévisualisation de pages dans Dreamweaver” on page 304
Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour automatique à la ligne, Caractères cachés et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.
“Insertion de code avec la barre d'outils de codage” on page 326
La barre d'état, située dans le bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création.
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 menu Définir le facteur de zoom Permettent de définir un taux d'agrandissement pour votre document. Menu contextuel Taille de fenêtre Non disponible en mode Code. Permet de redimensionner la fenêtre du document
Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée. Outre les formats prédéterminés et personnalisés, Dreamweaver répertorie également les tailles spécifiées dans une requête multimédia. Lorsque vous sélectionnez une taille correspondant à une requête multimédia, Dreamweaver utilise cette requête multimédia pour afficher la page. Vous pouvez également modifier l'orientation de la page pour prévisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la façon dont l'appareil est tenu. Taille du document et temps de téléchargement Fournit une estimation de la taille du document et du temps de
Indicateur de codage Affiche le codage du texte du document actuel.
“Définition de la taille des fenêtres et de la vitesse de connexion” on page 22 “Zoom avant et arrière” on page 229 “Redimensionnement de la fenêtre de document” on page 21 “Définition des préférences de durée et de taille des téléchargements” on page 230
“Ancrage et annulation d’ancrage de panneaux” on page 26 “Utilisation de l'inspecteur Propriétés” on page 23
Les boutons qui composent le panneau Insertion permettent de créer et d'insérer des objets, tels que des tableaux, des images et des liens. Ces boutons sont organisés en plusieurs catégories que vous pouvez afficher en alternance en choisissant la catégorie désirée dans le menu Catégorie. D'autres catégories s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML.
Le panneau Insertion est organisé en différentes catégories, comme suit : Catégorie Commun Permet de créer et d'insérer les objets les plus couramment utilisés, comme les images et les
Catégorie Mise en forme Permet d'insérer des tableaux, des éléments de tableau, des balises div, des cadres et des
Catégorie Formulaires Contient des boutons permettant de créer des formulaires et d'insérer des éléments de formulaire, dont des widgets de validation Spry. Catégorie Données Permet d'insérer des éléments de données Spry et d'autres éléments dynamiques, tels que des jeux d'enregistrements, des régions répétées et des formulaires d'insertion et de mise à jour d'enregistrements. Catégorie Spry Contient des boutons permettant de créer des pages Spry, avec des objets de données Spry et des
La catégorie InContext Editing Contient des boutons destinés à la création de pages InContext Editing, dont des boutons pour les régions modifiables, pour les régions répétées et pour la gestion des classes CSS. Catégorie Texte Permet d'insérer diverses balises de formatage de texte et de liste, telles que b, em, p, h1 et ul. Catégorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que vous utilisez le plus fréquemment. Catégories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spécifique, comme
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par défaut et le placer à l'horizontale, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se transforme en barre d'outils, même s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils.
“Utilisation du panneau Insertion” on page 218
Fichiers affiche le contenu du site local, du site distant, du serveur d'évaluation ou du référentiel SVN sous la forme d'une liste de fichiers. Dans sa forme développée, il affiche d'une part le site local et d'autre part le site distant, le serveur d'évaluation ou le référentiel SVN. Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit. (CS 5.5) Le panneau Fichiers interagit avec le serveur à intervalles réguliers afin de mettre à jour son contenu. Un message d'erreur s'affiche lorsque vous tentez d'effectuer une action dans le panneau Fichiers alors qu'il exécute une telle mise à jour automatique. Pour désactiver l'option de mise à jour automatique, ouvrez le menu Options du panneau Fichiers et désactivez l'option Mise à jour automatique du menu Affichage. Pour mettre à jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau. Toutefois, l'état d'extraction actuel des fichiers n'est mis à jour que lorsque la mise à jour automatique est activée.
“Utilisation des fichiers depuis le panneau Fichiers” on page 83
Styles CSS vous permet de modifier les propriétés CSS dans les deux modes.
En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définissant la sélection. En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles. Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail.
Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à concevoir vos documents et à prévoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les opérations suivantes :
Si la fonction d'alignement automatique est activée, les éléments PA s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont déplacés ou redimensionnés (d'autres objets, par exemple les images et les paragraphes, ne sont pas aimantés par la grille). L'alignement fonctionne même si la grille n'est pas visible.
“Utilisation d'assistances visuelles pour la mise en forme” on page 185
Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer à l'utilisation de Dreamweaver, vous pouvez consultez une présentation en ligne de l'espace de travail et du déroulement du travail dans Dreamweaver ainsi qu'une discussion sur les moyens de faire migrer votre site vers Dreamweaver.
Didacticiel consacré à Dreamweaver pour les utilisateurs de GoLive
Basculement d'un mode à un autre dans la fenêtre de document Vous pouvez afficher un document dans la fenêtre de document en mode Code, en mode Code fractionné, en mode Création, en modes Code et Création (mode fractionné) et en mode Affichage en direct. Vous pouvez également afficher le mode Code fractionné ou les modes Code et Création en les séparant à l'horizontale ou à la verticale. Le mode d'affichage à l'horizontale est le mode par défaut.
❖ Effectuez l'une des opérations suivantes :
❖ Effectuez l'une des opérations suivantes :
❖ Effectuez l'une des opérations suivantes :
• Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création.
Création en haut de la fenêtre, choisissez Affichage > Mode Création en haut.
❖ Appuyez sur Ctrl + guillemet simple d'ouverture (').
à tour les deux modes.
Cette option n'est disponible que pour le mode Code fractionné et les modes Code et Création (mode fractionné). Elle est désactivée pour le mode Code et le mode Création. 1 Veillez à bien être en mode Code fractionné (Affichage > Code fractionné) ou en modes Code et Création
2 Choisissez Affichage > Fractionner à la verticale.
Création à gauche).
“Présentation de la fenêtre de document” on page 9 “Prévisualisation des pages en mode Affichage en direct” on page 304
Si plusieurs documents sont ouverts à la fois, vous pouvez les afficher en cascade ou en mosaïque.
“Gestion des fenêtres et des panneaux” on page 25 “Affichage de documents à onglets (Dreamweaver sur Macintosh)” on page 31
❖ Choisissez Fenêtre > Cascade.
• (Windows) Sélectionnez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale. Lorsque vous modifiez la taille d'affichage d'une page en mode Création ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifiée. Outre les formats prédéterminés et personnalisés, Dreamweaver répertorie également les tailles spécifiées dans une requête multimédia. Lorsque vous sélectionnez une taille correspondant à une requête multimédia, Dreamweaver utilise cette requête multimédia pour afficher la page. Vous pouvez également modifier l'orientation de la page pour prévisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la façon dont l'appareil est tenu.
❖ Choisissez l'une des tailles affichées dans le menu contextuel Taille de fenêtre qui se trouve dans la barre d'état de
Pour un redimensionnement moins précis des fenêtres, utilisez les méthodes standard de votre système d'exploitation, par exemple, en faisant glisser le coin inférieur droit d'une fenêtre. Note: (Windows uniquement) Les documents dans la fenêtre de document sont agrandis par défaut ; il est impossible de les redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez sur l'icône dans le coin supérieur droit du document.
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre. 2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenêtre, puis entrez une nouvelle valeur.
3 Cliquez sur la zone Description pour saisir un texte décrivant la taille spécifique.
1 Cliquez sur Modifier les tailles dans le menu contextuel Taille de fenêtre. 2 Cliquez dans l'espace vierge qui apparaît sous la dernière valeur de la colonne Largeur.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Choisissez Barre d'état (CS5) ou Tailles des fenêtres (CS5.5 et versions ultérieures) dans la liste de catégories sur la
3 Parmi les options suivantes, définissez celles de votre choix : Taille de la fenêtre Permet de personnaliser les tailles de fenêtre qui s'affichent dans le menu contextuel de la barre
Vitesse de connexion Détermine la vitesse de connexion (exprimée en kilobits par seconde) utilisée pour calculer le
“Présentation de la barre d'état” on page 13 “Redimensionnement de la fenêtre de document” on page 21
Dans Dreamweaver, vous pouvez exécuter des rapports afin de rechercher ou de tester des contenus ou encore de corriger des erreurs. Vous pouvez générer les types de rapports suivants : Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spécifique dans les balises. Référence Permet de rechercher des informations de référence. Validation Permet de rechercher les erreurs de code ou de syntaxe. Navigateurs compatibles Permet de tester le code HTML de vos documents afin de déterminer s'il contient des balises ou des attributs non pris en charge par les navigateurs cibles. Vérificateur de lien Permet de rechercher et de corriger les liens brisés, externes et orphelins. Rapports du site Permet d'améliorer le déroulement du travail et de tester les attributs HTML dans votre site. Les
Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP. Débogage du serveur Permet de consulter des informations afin de déboguer une application Adobe® ColdFusion®.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'une des barres d'outils et sélectionnez la barre d'outils dans le menu contextuel. Note: Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fenêtre > Inspecteur de code), vous devez la sélectionner dans le menu déroulant des options d'affichage situé en haut de l'inspecteur.
“Présentation de la barre d'outils de document” on page 10 “Présentation de la barre d'outils standard” on page 11 “Présentation de la barre d'outils de codage” on page 13 “Présentation de la barre d'outils Rendu de style” on page 11
L'inspecteur Propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l'élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur Propriétés varie en fonction de l'élément sélectionné. Pour accéder à l'aide relative à un inspecteur Propriétés spécifique, cliquez sur le bouton d'aide dans son coin supérieur droit, ou choisissez Aide dans son menu Options. Note: L'inspecteur de balises permet d'afficher et de modifier les attributs associés aux propriétés d'une balise.
“Présentation de l'inspecteur Propriétés” on page 15 “Définition des propriétés de texte dans l'inspecteur Propriétés” on page 239 “Ancrage et annulation d’ancrage de panneaux” on page 26 “Modification d'attributs dans l'inspecteur de balises” on page 348
❖ Choisissez Fenêtre > Propriétés.
2 Modifiez les propriétés de votre choix dans l'inspecteur Propriétés.
3 Si les changements ne s'appliquent pas immédiatement dans la fenêtre de document, appliquez-les d'une des façons
• Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). • Appuyez sur la touche de tabulation pour passer à une autre propriété.
Les menus contextuels vous permettent d'accéder rapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la fenêtre avec lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes en rapport avec la sélection en cours. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur
Personnalisation de l'espace de travail de Dreamweaver CS5 Gestion des fenêtres et des panneaux Pour créer un espace de travail personnalisé, vous déplacez et manipulez les fenêtres de document et les panneaux. Vous pouvez également enregistrer des espaces de travail, puis passer de l’un à l’autre. Dans Fireworks, renommer les espaces de travail personnalisés peut provoquer un comportement inattendu. Note: les exemples suivants sont basés sur Photoshop. L’espace de travail est le même dans tous les produits.
Les fenêtres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
Note: Dreamweaver ne permet pas d’ancrer des fenêtres de document ni d’annuler l’ancrage de ces fenêtres. Utilisez le bouton Réduire de la fenêtre de document pour créer des fenêtres flottantes (sous Windows), ou Fenêtre > Mosaïque verticale pour créer des fenêtres de document côte à côte. Pour plus d’informations sur cette rubrique, recherchez « Mosaïque verticale » dans l’aide de Dreamweaver. Le flux de travaux diffère légèrement pour les utilisateurs Macintosh.
Note: certains produits ne prennent pas en charge cette fonctionnalité. Cependant, votre produit peut présenter des commandes Cascade et Mosaïque (ou Juxtaposer), sous le menu Fenêtre, pour vous permettre d’organiser vos documents.
Note: certains produits ne prennent pas en charge cette fonctionnalité.
Un dock est un ensemble de panneaux ou de groupes de panneaux affichés ensemble, généralement en position verticale. Pour ancrer et annuler l’ancrage des panneaux, insérez-les dans le dock et déplacez-les hors du dock.
Vous pouvez faire en sorte que les panneaux n’occupent pas la totalité de l’espace disponible dans un dock. Faites glisser le bord inférieur du dock vers le haut de sorte qu’il ne coïncide plus avec le bord de l’espace de travail.
Lorsque vous déplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail. Note: la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne s'affiche pas, faites glisser la souris à l'emplacement où devrait se situer la zone de largage.
• Pour déplacer un groupe de panneaux, faites glisser la barre de titre.
A. Barre de titre B. Onglet C. Zone de largage Lorsque vous supprimez tous les panneaux d’un dock, ce dernier disparaît. Vous pouvez créer un dock en déplaçant les panneaux vers le bord droit de l’espace de travail jusqu’à ce qu’une zone de largage soit visible.
• Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située dans le groupe.
• Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).
Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau flotte dans l’espace de travail. Un panneau flottant peut être placé à n’importe quel endroit dans l’espace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule entité lorsque vous faites glisser la barre de titre supérieure.
• Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son onglet ou de sa barre de titre.
• Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous pouvez également double-cliquer sur la zone d’onglets (l’espace vide situé à côté des onglets).
Vous pouvez réduire des panneaux à la taille d’icônes afin de limiter l’encombrement de l’espace de travail. Dans certains cas, les panneaux sont réduits de la sorte dans l’espace de travail par défaut.
Dans certaines applications, si vous sélectionnez l’option Réduction automatique des panneaux d’icônes dans les préférences d’interface ou les options d’interface utilisateur, une icône de panneau développée est réduite automatiquement lorsque vous cliquez en dehors de cette dernière.
à un dock d’icônes).
En enregistrant la taille et la position actuelles des panneaux comme espace de travail nommé, vous gardez la possibilité de restaurer cet espace par la suite, et ce, même si vous avez déplacé ou fermé un panneau. Les noms des espaces de travail enregistrés sont visibles dans le sélecteur d’espace de travail de la barre d’application.
3 (Photoshop, InDesign) Sélectionnez ensuite une ou plusieurs options dans la section Capture : Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement). Raccourcis clavier Enregistre l’ensemble de raccourcis clavier actuel (Photoshop seulement). Menus ou Personnalisation des menus Enregistre l’ensemble de menus actuels.
❖ Sélectionnez un espace de travail dans le sélecteur d’espace de travail de la barre d’application.
• Choisissez l’option Gérer les espaces de travail dans le sélecteur d’espace de travail de la barre d’application, sélectionnez l’espace de travail, puis cliquez sur la commande Supprimer. (Cette option n’est pas disponible dans Fireworks.)
1 Sélectionnez l’espace de travail de base ou par défaut à l’aide du sélecteur situé dans la barre d’application. Pour
Note: dans Dreamweaver, Designer correspond à l’espace de travail par défaut. 2 Pour Fireworks (Windows), supprimez les dossiers suivants : Windows Vista \\utilisateur\<nom utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\ Windows XP \\Documents and Settings\<nom utilisateur>\Application Data\Adobe\Fireworks CS4
Pour réorganiser l'ordre des espaces de travail de la barre d’application, faites-les glisser.
Vous pouvez afficher plusieurs documents dans une seule fenêtre de document avec des onglets qui identifient chacun des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fenêtre.
❖ Cliquez en maintenant la touche Ctrl enfoncée sur l'onglet, puis sélectionnez Déplacer dans une nouvelle fenêtre
❖ Choisissez Fenêtre > Combiner en onglets.
1 Sélectionnez Dreamweaver > Préférences, puis la catégorie Général. 2 Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets et cliquez sur OK.
Par défaut, Dreamweaver en version CS4 et ultérieures emploie des icônes en noir et blanc qui se transforment en icônes en couleur lorsque vous laissez le pointeur de la souris au-dessus d'elles. Vous pouvez activer les icônes en couleur de manière permanente, même quand le pointeur de la souris ne se trouve pas au-dessus d'elles. ❖ Effectuez l'une des opérations suivantes :
• Basculez vers l'espace de travail Classique ou Codeur. Pour désactiver l'affichage des icônes en couleur, désactivez l'option Icônes en couleur du menu Affichage, ou passez à un espace de travail différent.
❖ Sélectionnez l'option Ne plus afficher dans l'écran d'accueil.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général, activez l'option Afficher l'écran d'accueil. Dreamweaver empêche que la configuration personnalisée d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la première fois que vous exécutez Dreamweaver sur l'un des systèmes multiutilisateurs reconnus, l'application crée des copies de divers fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant. Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom d'utilisateur\Application Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est caché par défaut. Pour afficher les fichiers et dossiers cachés, choisissez Outils > Options des dossiers dans l'Explorateur Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et dossiers cachés. Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver \fr_FR\Configuration, qui est caché par défaut. Pour afficher les fichiers et dossiers cachés, choisissez Outils > Options des dossiers dans l'Explorateur Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et dossiers cachés. Sous Mac OS X, ils sont situés dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/Bibliothèque/Application Support/Adobe/Dreamweaver /Configuration. Si vous réinstallez ou mettez Dreamweaver à jour, Dreamweaver crée automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalisé manuellement ces fichiers, vos modifications restent disponibles.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Parmi les options suivantes, définissez celles de votre choix : Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fenêtre contenant des onglets que vous utilisez pour passer d'un document à l'autre (Macintosh uniquement).
(verrouillé). Vous pouvez déverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action. Activer les fichiers associés Permet de savoir quels fichiers sont associés au document actuel (par exemple des fichiers CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associé en haut du document. Si vous cliquez sur l'un de ces boutons, le fichier correspondant est ouvert. Découvrir les fichiers à association dynamique Permet d'indiquer si les fichiers à association dynamique doivent apparaître automatiquement dans la barre d'outils Fichiers associés, ou uniquement après une interaction manuelle. Vous pouvez également désactiver la recherche de fichiers à association dynamique. Mettre à jour les liens lors de la suppression de fichiers Détermine ce qui se passe lorsque vous déplacez, renommez
Afficher la boîte de dialogue lors de l'insertion d'un objet Détermine si Dreamweaver vous invite à entrer des informations supplémentaires lorsque vous insérez des images, des tableaux, des animations Shockwave et certains autres objets à l'aide du panneau Insertion ou du menu Insertion. Si cette option est désactivée, aucune boîte de dialogue ne s'affiche ; dans ce cas, précisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l'inspecteur Propriétés. Lorsque vous insérez des images avec effet de survol ou du code HTML Fireworks, une boîte de dialogue s'affiche toujours, quel que soit le réglage de cette option. (Pour remplacer temporairement ce paramètre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous créez et insérez des objets.) Activer l'entrée en ligne à deux octets Permet d'entrer un texte à deux octets directement dans la fenêtre de document,
Passer en paragraphe normal après le titre Indique qu'en appuyant sur la touche Entrée (Windows) ou Retour
Autoriser plusieurs espaces consécutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Création, vous créez des espaces insécables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine à écrire.) Cette option est conçue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est désactivée, les espaces multiples sont traités comme des espaces simples (car les navigateurs traitent les espaces multiples comme des espaces simples). Utiliser <strong> et <em> au lieu de <b> et <i> Détermine que Dreamweaver applique la balise strong lorsque vous effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique
Avertir lors du placement de régions modifiables dans des balises <p> ou <h1> - <h6> Indique si un message
Centrer Spécifie si vous voulez centrer des éléments à l'aide de divalign="center" ou de la balise center lorsque
Note: L'utilisation de ces deux méthodes de centrage n'est plus recommandée depuis les spécifications de HTML 4.01. Il est conseillé d'utiliser les feuilles de style CSS. Ces méthodes sont encore techniquement applicables à la spécification XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les spécifications XHTML 1.0 Strict. Nombre maximum d'étapes d'historique Détermine le nombre maximal d'étapes que le panneau Historique conserve
Pour plus d'informations, voir “Automatisation des tâches” on page 280. Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs
Le codage d'un document détermine la façon dont le document s'affiche dans un navigateur. Les préférences de polices de Dreamweaver vous permettent d'utiliser un texte affiché dans la police et la taille de votre choix. Toutefois, les polices sélectionnées dans la boîte de dialogue Préférences des polices n'influent que sur la façon dont les documents s'affichent dans Dreamweaver. Elles n'ont aucun impact sur la façon dont ils s'affichent dans le navigateur d'un visiteur. Pour modifier la façon dont les polices s'affichent dans un navigateur, vous devez modifier le texte à l'aide de l'inspecteur Propriétés ou en appliquant une règle CSS. Pour plus d'informations sur la définition d'un codage par défaut pour les nouveaux documents, consultez la section “Création et ouverture de documents” on page 66. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Polices dans la liste de gauche. 3 Sélectionnez le type de codage désiré (par exemple, Occidental ou Japonais) dans la liste Paramètres de la police.
4 Sélectionnez une police et un format à utiliser pour chaque catégorie du codage sélectionné.
Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS. Fixe La police fixe est utilisée par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par
Mode Code Police utilisée dans tout le texte qui apparaît dans le mode d'affichage Code et dans l'inspecteur de code.
“Description de l'encodage de document” on page 225
Les préférences de surbrillance servent à personnaliser les couleurs utilisées dans Dreamweaver pour identifier les zones d'un modèle, les éléments d'une bibliothèque, les balises tierces, les éléments de mise en forme et le code.
“Utilisation du sélecteur de couleur” on page 229 “Modification de la couleur de surbrillance des balises div” on page 171
1 Choisissez Edition > Préférences, puis la catégorie Surbrillance. 2 Cliquez sur le sélecteur de couleur située près de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis
1 Choisissez Edition > Préférences, puis la catégorie Surbrillance. 2 Cochez ou décochez l'option Afficher située près de l'objet dont vous souhaitez activer ou désactiver la couleur de
Une feuille de référence est un enregistrement du jeu de raccourcis en cours. Les informations sont stockées sous forme d'un tableau HTML. Vous pouvez afficher la feuille de référence dans un navigateur Web ou l'imprimer. 1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2 Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisième bouton du jeu de quatre boutons situé
3 Dans la boîte de dialogue d'enregistrement, entrez le nom de la feuille de référence et sélectionnez l'emplacement
Utilisez l'éditeur de raccourcis clavier pour créer vos propres touches de raccourci, y compris pour les fragments de code. Vous pouvez également supprimer des raccourcis clavier, les modifier, et sélectionner un jeu prédéfini de raccourcis dans l'éditeur de raccourcis clavier.
“Manipulation de fragments de code” on page 335
Commandes Vous permet de sélectionner une catégorie de commandes à modifier. Par exemple, vous pouvez modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer les accolades.
La liste des commandes affiche les commandes de la catégorie que vous avez choisie dans le menu contextuel Commandes, ainsi que les raccourcis clavier attribués. Les catégories de commandes Menu s'affichent sous une forme arborescente, suivant la structure des menus. Les autres catégories répertorient les commandes par leur nom (par exemple, Quitter l'application). Raccourcis affiche la liste des raccourcis clavier assignés à la commande sélectionnée. Ajouter l'élément (+) ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter
Appuyer sur la touche affiche la combinaison de touches que vous saisissez lorsque vous ajoutez ou modifiez un
Remplacer Ajoute la combinaison de touches indiquée dans la zone Appuyer sur la touche à la liste des raccourcis ou applique le nouveau raccourci clavier à la combinaison de touches spécifiées. Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu ; le nom par défaut est le nom du jeu en
Renommer le jeu renomme le jeu actuel. Exporter comme fichier HTML enregistre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme référence rapide. Supprimer le jeu supprime un jeu. Les jeux actifs ne peuvent pas être supprimés.
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2 Dans le menu contextuel Commandes, sélectionnez une catégorie. 3 Sélectionnez une commande dans la liste, puis sélectionnez un raccourci. 4 Cliquez sur le bouton Supprimer un élément (-).
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2 Dans le menu contextuel Commandes, sélectionnez une catégorie. 3 Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaissent dans la zone Raccourcis. 4 Procédez de l'une des manières suivantes pour ajouter un raccourci :
5 Appuyez sur une combinaison de touches. Celle-ci apparaît dans la zone Appuyer sur la touche.
6 Cliquez sur Remplacer. La nouvelle combinaison de touches est attribuée à la commande.
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 3 Sélectionnez une commande dans la liste, puis sélectionnez un raccourci à modifier. 4 Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches. 5 Cliquez sur le bouton Remplacer pour modifier le raccourci.
Les raccourcis clavier Dreamweaver par défaut fonctionnent principalement sur les claviers U.S. standardisés. Les claviers d'autres pays (y compris ceux qui sont produits au Royaume-Uni) peuvent ne pas présenter la fonctionnalité nécessaire à l'utilisation de ces raccourcis. Si votre clavier ne prend pas en charge certains raccourcis Dreamweaver, Dreamweaver désactive leur fonctionnalité. Pour personnaliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section « Modification des mappages des raccourcis clavier » du manuel Extension de Dreamweaver.
Ajout et gestion d'extensions dans Dreamweaver Les extensions sont de nouvelles fonctions, faciles à intégrer dans Dreamweaver. Vous pouvez utiliser plusieurs types d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'écrire des compléments de scripts coté serveurs ou clients. Note: Pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X). Pour rechercher les extensions les plus récentes pour Dreamweaver, consultez le site Web d'Adobe Exchange, à l'adresse suivante : www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et télécharger des extensions (un grand nombre d'entre elles sont gratuites), participer à des forums de discussion, visualiser les rapports et analyses d'utilisateurs, ainsi qu'installer et exploiter Extension Manager. Vous devez installer Extension Manager avant de pouvoir télécharger des extensions. Le logiciel Extension Manager est une application indépendante permettant d'installer et de gérer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant Commandes > Gérer les extensions. 1 Sur le site Web Adobe Exchange, cliquez sur le lien de téléchargement de l'extension qui vous intéresse.
• Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des extensions téléchargées de l'application Dreamweaver sur votre ordinateur.
Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous développez : Dossier racine local Stocke les fichiers en cours de développement. Dans Dreamweaver, ce dossier est appelé votre
Dossier distant Stocke les fichiers que vous réservez aux évaluations, à la production, à la collaboration, etc. Dans Dreamweaver, ce dossier est appelé votre « site distant » dans le panneau Fichiers. En règle générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre serveur Web. Le dossier distant contient les fichiers auxquels les utilisateurs accèdent via Internet.
Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Vous travaillez sur les fichiers dans le dossier local, puis vous les publiez dans le dossier distant lorsque vous voulez les rendre accessibles à d'autres utilisateurs. Dossier du serveur d'évaluation Dossier dans lequel Dreamweaver traite les pages dynamiques.
Si vous voulez utiliser Dreamweaver pour vous connecter à un dossier distant, vous devez définir ce dossier distant dans la catégorie Serveurs de la boîte de dialogue Configuration du site. Le dossier distant (également baptisé « répertoire hôte ») doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le dossier supérieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent posséder n'importe quel titre. Toutefois, les fournisseurs d'accès à Internet (FAI) nomment généralement les dossiers distants de niveau supérieur de leurs différents comptes d'utilisateur public_html, pub_html, etc. Si vous êtes responsable de votre serveur distant et si vous pouvez nommer le dossier distant à votre guise, il est conseillé de donner le même nom au dossier racine local et au dossier distant. L'exemple ci-dessous représente un exemple de dossier racine local à gauche et un exemple de dossier distant à droite. Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non à l'un des sous-dossier du dossier distant ou à des dossiers situés au-dessus du dossier distant dans la structure des répertoires. Non
(Ne doit pas être un dossier distant dans ce cas)
Le dossier distant doit déjà exister pour que Dreamweaver puisse s'y connecter. Si aucun répertoire racine n'existe ne fait office de dossier distant sur le serveur Web, créez-en un ou demandez à l'administrateur du serveur de votre FAI de se charger de cette opération.
Dreamweaver. 2 Dans Dreamweaver, choisissez Site > Nouveau site. 3 Dans la boîte de dialogue Configuration du site, assurez-vous que la catégorie Site est sélectionnée. (Elle est
4 Dans la zone Nom du site, indiquez le nom de votre site. Ce nom s'affiche dans le panneau Fichiers et dans la boîte
5 Dans la zone de texte Dossier du site local, indiquez le nom du dossier que vous avez identifié à l'étape 1 (le dossier
6 Cliquez sur Enregistrer pour fermer la boîte de dialogue Configuration du site. Vous pouvez à présent commencer
Lorsque vous êtes prêt, vous pouvez compléter les autres catégories de la boîte de dialogue Configuration du site, dont la catégorie Serveurs, où vous pouvez indiquer un dossier distant sur votre serveur distant. Vous trouverez un didacticiel vidéo sur la configuration d'un nouveau site Dreamweaver à l'adresse www.adobe.com/go/learn_dw_comm08_fr.
Lorsque vous avez spécifié un site local dans Dreamweaver, vous pouvez spécifier un serveur distant pour votre site. Le serveur distant (souvent appelé « serveur Web ») est l'endroit où vous publiez vos fichiers de site afin qu'ils puissent être consultés en ligne. Le serveur distant est simplement un autre ordinateur, similaire à votre ordinateur local, qui contient un ensemble de fichiers et de dossiers. Vous allez spécifier un dossier pour votre site sur le serveur distant, en procédant comme vous avez fait pour le dossier de votre site local sur l'ordinateur local. Dreamweaver appelle site distant le dossier distant que vous aurez spécifié. Lorsque vous configurez un dossier distant, vous devez sélectionner une méthode de connexion qui permettra à Dreamweaver de transférer des fichiers à votre serveur Web et de télécharger des fichiers depuis ce serveur. La méthode de connexion la plus typique est FTP, mais Dreamweaver prend également les méthodes de connexion local/réseau, FTPS, SFTP, WebDav et RDS. Si vous ne connaissez pas la méthode de connexion à utiliser, consultez votre FAI ou l'administrateur du serveur. Note: Dreamweaver prend également en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/
2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
5 Sélectionnez FTP dans la liste déroulante Se connecter au moyen de. 6 Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web.
Si vous ne connaissez pas votre adresse FTP, contactez votre hébergeur de site Web. Note: Le port 21 est le port par défaut pour la réception de connexions FTP. Vous pouvez modifier le numéro de port par défaut en modifiant le contenu de la zone de texte à droite. Ce faisant, lorsque vous enregistrez vos paramètres, un signe deux points et le nouveau numéro de port seront ajoutés à votre adresse FTP (par exemple ftp.mindspring.com:29). 7 Dans les zones Nom d'utilisateur et Mot de passe, entrez le nom d'utilisateur et le mot de passe utilisés pour la
8 Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passe.
10 Dans la zone Répertoire racine, entrez le nom du répertoire (dossier) hôte du serveur distant où sont stockés les
Si vous n'êtes pas sûr du répertoire racine à saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide. Sur certains serveurs, votre répertoire racine est celui dans lequel la connexion FTP est établie. Pour en être sûr, établissez une connexion avec le serveur. Si vous voyez apparaître dans le volet Affichage distant de votre panneau Fichiers un dossier nommé public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom à indiquer dans la zone Répertoire racine. 11 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avancés” on page 52. 12 Développez la section Options supplémentaires si vous devez encore définir des options supplémentaires. 13 Sélectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu nécessite l'utilisation d'un FTP passif.
Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe à l'adresse www.adobe.com/go/tn_15220_fr. 14 Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6.
FTP compatible IPv6, vous devez utiliser les commandes passif étendu (EPSV) et actif étendu (EPRT) pour votre connexion de données. Pour plus d'informations, voir www.ipv6.org/. 15 Choisissez Utiliser un proxy si vous voulez spécifier un hôte ou un port proxy.
16 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.
SFTP utilise un système de cryptage et de clés publiques pour sécuriser la connexion à votre serveur d'évaluation.
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
Note: Le port 22 est le port par défaut pour la réception de connexions SFTP.
FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentification, au contraire de SFTP qui prend uniquement en charge le chiffrement. Lorsque vous utilisez FTPS pour le transfert de données, vous pouvez choisir de chiffrer vos informations d'identification, ainsi que les données transmises au serveur. En outre, vous pouvez choisir d'authentifier les informations d'identification du serveur et les connexions. Les informations d'identification d'un serveur sont validées par rapport à l'ensemble actuel des certificats de serveur d'autorité de certification approuvés dans la base de données Dreamweaver. Les autorités de certification (CA), qui comprennent des sociétés comme VeriSign, Thawte, etc. émettent des certificats de serveur signés numériquement. Note: Cette procédure décrit les options spécifiques à FTPS. Pour plus d'informations sur les options FTP régulières, consultez la section précédente. 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin à la connexion si la requête de sécurité n'est pas reçue. FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de sécurité, le serveur peut choisir de procéder
6 Dans la zone Authentification, choisissez l'une des options suivantes : Aucun Les informations d'identification du serveur, signées ou auto-signées, s'affichent. Si vous acceptez les informations d'identification du serveur, le certificat est ajouté à un magasin de certificats, trustedSites.db, dans
Approuvé Le certificat présenté est validé avec l'ensemble actuel des certificats de serveur d'autorité de certification
7 Développez la section Options supplémentaires pour définir d'autres options. Chiffrer uniquement le canal de commande Sélectionnez cette option si vous souhaitez ne chiffrer que les commandes qui sont transmises. Utilisez cette option lorsque les données transmises sont déjà chiffrées ou ne contiennent pas d'informations confidentielles. Chiffrer uniquement le nom d'utilisateur et le mot de passe Sélectionnez cette option si vous souhaitez chiffrer
8 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
Pour plus d'informations sur le dépannage des problèmes de connectivité FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, à l'adresse www.adobe.com/go/kb405912_fr.
Utilisez cette option pour vous connecter à un dossier réseau, si vous stockez des fichiers ou exécutez votre serveur d'évaluation sur votre ordinateur local. 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
6 Cliquez sur l'icône de dossier à droite de la zone de texte Dossier du serveur pour rechercher puis sélectionner le
7 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avancés” on page 52. 8 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
Cette méthode de connexion suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configurée de façon adéquate. Note: Si vous sélectionnez WebDAV comme méthode de connexion et que vous utilisez Dreamweaver dans un environnement multi-utilisateurs, vous devez également veiller à ce que tous vos utilisateurs sélectionnent WebDAV comme méthode de connexion. Si certains utilisateurs sélectionnent WebDAV, alors que d'autres sélectionnent d'autres méthodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de façon imprévisible, car WebDAV utilise son propre système de verrouillage. 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
6 Dans la zone URL, indiquez l'URL complète vers le répertoire du serveur WebDAV auquel vous voulez vous
Cette URL inclut le protocole, le port et le répertoire (s'il ne s'agit pas du répertoire racine). Par exemple, http://webdav.mondomaine.net/monsite. 7 Entrez votre nom d'utilisateur et votre mot de passe.
8 Cliquez sur Tester pour tester vos paramètres de connexion. 9 Activez l'option Enregistrer si vous voulez que Dreamweaver mémorise votre mot de passe à chaque nouvelle
10 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avancés” on page 52. 11 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
Cette méthode de connexion suppose que votre serveur distant se trouve sur un ordinateur exécutant Adobe® ColdFusion® 1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
6 Cliquez sur le bouton Paramètres et entrez les informations suivantes dans la boîte de dialogue Configurer le
Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, demandez à votre administrateur.
• Définissez votre dossier racine distant comme répertoire hôte. Par exemple, c:\inetpub\wwwroot\myHostDir\.
Note: Ces options seront peut-être invisibles si vous avez configuré votre nom d'utilisateur et votre mot de passe dans les paramètres de sécurité de ColdFusion Administrator.
7 Cliquez sur OK pour fermer la boîte de dialogue Configurer le serveur RDS. 8 Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver
Pour une explication plus détaillée de cette option, voir “Catégorie Paramètres avancés” on page 52. 9 Cliquez sur Enregistrer pour fermer l'écran Base. Ensuite, dans la catégorie Serveurs, indiquez si le serveur que vous
La prise en charge de Microsoft Visual SourceSafe a été abandonnée à partir de Dreamweaver CS5.
1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur
5 Sélectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et
6 Sélectionnez l'option Télécharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que
7 Sélectionnez l'option Activer l'extraction de fichier si vous voulez activer le système d'archivage et d'extraction. 8 Si vous employez un serveur d'évaluation, sélectionnez un modèle de serveur dans le menu Modèle de serveur .
❖ Vous n'avez pas besoin de vous connecter au dossier distant ; vous êtes connecté en permanence. Cliquez sur le
❖ Dans le panneau Fichiers :
• Pour vous déconnecter, cliquez sur Déconnecter dans la barre d'outils.
La liste suivante contient des informations sur les problèmes courants que vous pouvez rencontrer lors de la configuration d'un dossier distant et sur la façon de les résoudre. Vous trouverez, sur le site Web d'Adobe, une TechNote détaillée qui fournit des informations spécifiques au dépannage FTP. Cette TechNote se trouve à l'adresse www.adobe.com/go/kb405912_fr.
(Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situé en un point du disque du serveur à un autre dossier situé ailleurs. Ces alias n'ont généralement pas d'effet négatif sur votre capacité à vous connecter au dossier ou répertoire approprié, mais si vous ne pouvez vous connecter qu'à une partie du serveur, il s'agit peut-être d'un problème d'alias.
Note: En général, si vous avez un problème durant un transfert via FTP, examinez le journal FTP en choisissant Fenêtre > Résultats (Windows) ou Site > Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP.
Si vous envisagez le développement de pages dynamiques, Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Pour un aperçu détaillé des objectifs d'un serveur d'évaluation, consultez l'article de David Powers sur le Pôle de développement Dreamweaver : Setting up a local testing server in Dreamweaver CS.
“Choix d'un serveur d'application” on page 559 “Préparation à la création de sites dynamiques” on page 549
1 Choisissez Site > Gérer les sites. 2 Cliquez sur Nouveau pour configurer un nouveau site, ou sélectionnez un site Dreamweaver existant et cliquez sur Note: Vous devez entrer une URL Web dans l'écran Base lorsque vous spécifiez un serveur d'évaluation. Pour plus d'informations, consultez la section suivante. 5 Sous Serveur d'évaluation, sélectionnez le modèle de serveur que vous voulez utiliser pour votre application Web.
JSP. (Vous pouvez réactiver les comportements de serveur déconseillés manuellement si vous le souhaitez, mais n'oubliez pas que Dreamweaver ne les prend officiellement plus en charge.) Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera à prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que ces fonctionnalités soient opérationnelles, il n'est pas nécessaire de sélectionner ASP.NET, ASP JavaScript ou JSP dans la boîte de dialogue Définition du site.
L'URL Web d'un serveur d'évaluation est constituée du nom de domaine et du nom d'un sous-répertoire ou d'un répertoire virtuel du répertoire de base de votre site Web. Note: Bien que cette terminologie, utilisée dans Microsoft IIS, puisse différer d'un serveur à l'autre, les mêmes concepts s'appliquent à la plupart des serveurs Web. Le répertoire de base Dossier qui, sur le serveur, est mappé sur le nom de domaine de votre site. Supposons que le
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du répertoire de base, ajoutez ce sous-dossier à l'URL. Supposons que votre répertoire de base est c:\sites\company\, que le nom de domaine de votre site est www.mystartup.com et que le dossier à utiliser pour traiter les pages dynamiques est c:\sites\company\inventory. Entrez l'URL Web suivante : http://www.mystartup.com/inventory/ Si le dossier à utiliser pour traiter les pages dynamiques n'est pas votre répertoire de base ni l'un de ses sous-répertoires, vous devez créer un répertoire virtuel. Un répertoire virtuel Dossier qui ne se trouve pas physiquement dans le répertoire de base du serveur, même s'il apparaît dans l'URL. Pour créer un répertoire virtuel, spécifiez un alias représentant le chemin du dossier dans l'URL. Supposons que votre répertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez défini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante :
Localhost Terme qui peut être utilisé pour désigner le répertoire de base dans vos URL lorsque le client (généralement
Dreamweaver réside sur le même système Windows que le serveur Web, que votre répertoire de base soit c:\sites\company et que vous ayez défini un répertoire virtuel nommé warehouse désignant le dossier chargé du traitement des pages dynamiques. Les URL Web suivantes doivent être entrées pour les serveurs Web sélectionnés : Serveur Web
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond à Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante : http://localhost/~MonNomd'Utilisateur/inventory/
Accédez aux catégories Contrôle de version et Paramètres avancés de la boîte de dialogue Configuration du site, choisissez Site > Gérer les sites, sélectionnez le site à modifier, puis cliquez sur Modifier.
Vous pouvez extraire et archiver des fichiers à l'aide de Subversion. Pour plus d'informations, voir “Utilisation de Subversion (svn) pour acquérir et archiver des fichiers” on page 97.
Infos locales Dossier des images par défaut Le dossier dans lequel vous voulez stocker les images de votre site. Tapez le chemin Liens relatifs à Détermine le type de liens que Dreamweaver crée lorsque vous créez des liens vers d'autres actifs ou
Par défaut, Dreamweaver crée des liens relatifs au document. Si vous modifiez le paramètre par défaut et activez l'option Racine du site, veillez à entrer l'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La modification de ce paramètre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux liens que vous créez visuellement à l'aide de Dreamweaver. Note: Le contenu lié à un chemin relatif à la racine du site n'apparaît pas lorsque vous lancez l'aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. URL Web L'URL de votre site Web. Dreamweaver utilise l'URL Web pour créer des liens relatifs à la racine du site et pour vérifier les liens lorsque vous employez la fonction de vérification des liens.
Supposons que vous ayez indiqué http://www.mysite.com/mycoolsite (répertoire racine du site du serveur distant) comme URL Web, et que vous ayez également placé un dossier images dans le répertoire mycoolsite sur le serveur distant (http://www.mysite.com/mycoolsite/images). Supposons en outre que votre fichier index.html se trouve dans le répertoire mycoolsite. Lorsque vous créez un lien relatif à la racine du site à partir du fichier index.html vers une image située dans le répertoire images, le lien se présente comme suit : <img src="/mycoolsite/images/image1.jpg" />
<img src="images/image1.jpg" /> Pour plus d'informations, voir “Chemins absolus, relatifs au documents et relatifs à la racine du site” on page 287. En ce qui concerne la vérification des liens, l'URL Web est nécessaire pour déterminer si un lien est interne ou externe au site. Par exemple, si votre URL Web est http://www.mysite.com/mycoolsite et si le vérificateur de liens trouve une URL http://www.yoursite.com sur votre page, il détermine que ce dernier lien est externe et le signale comme tel. De même, le vérificateur de liens utilise l'URL Web pour déterminer si des liens sont internes au site, puis vérifie si ces liens internes ne sont pas coupés. Vérification des liens sensible à la casse Permet de vérifier que la casse des liens correspond à celle des noms de
Activer le cache Indique s'il faut créer un cache local pour améliorer la vitesse des tâches de gestion des liens et du site. Si vous n'activez pas cette option, Dreamweaver vous demandera si vous souhaitez créer de nouveau un cache avant de créer le site. Il est préférable d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement opérationnel si un cache est créé.
Pour plus d'informations sur les catégories Voilage, Design Notes, Colonnes mode Fichier, Modèles ou Spry, cliquez sur le bouton Aide de la boîte de dialogue.
La boîte de dialogue Gérer les sites vous donne accès à diverses fonctions de gestion de site dans Dreamweaver. A partir de cette boîte de dialogue, vous pouvez lancer le processus de création d'un nouveau site, modifier un site existant, copier un site, supprimer un site ou importer et exporter les paramètres d'un site. Note: La boîte de dialogue Gérer les sites ne vous permet pas de vous connecter à un serveur distant ou d'y publier des fichiers. Pour savoir comment vous connecter à un serveur distant, consultez la section “Connexion à un serveur distant” on page 42. Si vous tentez de vous connecter à un site Web existant, consultez la section “Modification d'un site Web distant existant” on page 56. 1 Sélectionnez Site > Gérer les sites et sélectionnez un site dans la liste de gauche.
Dupliquer Crée une copie d'un site existant. Pour dupliquer un site, sélectionnez-le dans la liste de gauche, puis cliquez
Pour modifier le nom du site dupliqué, sélectionnez-le puis cliquez sur le bouton Modifier. Supprimer Supprime le site sélectionné et toutes ses informations de configuration de la liste de sites Dreamweaver ; les fichiers du site proprement dits ne sont pas supprimés. Si vous souhaitez supprimer les fichiers du site de votre ordinateur, vous devez le faire manuellement. Pour supprimer un site de Dreamweaver, sélectionnez-le dans la liste des sites, puis cliquez sur le bouton Supprimer. Cette opération est irréversible. Exporter/Importer Permet d'exporter les paramètres du site sélectionné sous la forme d'un fichier XML (*.ste), ou
Note: La fonction d'importation se limite à importer les paramètres de site qui ont été exportés précédemment. Elle n'importe pas des fichiers de site afin de créer un nouveau site Dreamweaver. Pour plus d'informations sur la création d'un nouveau site dans Dreamweaver, consultez la section “Configuration d'une version locale de votre site” on page 42.
“A propos des sites Dreamweaver” on page 40 “Modification d'un site Web distant existant” on page 56 La fonction d'exportation/importation ne permet pas d'importer ou d'exporter les fichiers du site. Elle se limite à importer/exporter les paramètres du site, afin de vous faire gagner du temps lorsque vous recréez des sites dans Dreamweaver. Pour plus d'informations sur la création d'un nouveau site dans Dreamweaver, consultez la section “Configuration d'une version locale de votre site” on page 42. Exportez les paramètres de votre site régulièrement de façon à disposer d'une copie de sauvegarde au cas où un incident surviendrait sur ce site.
1 Sélectionnez Site > Gérer les sites. 2 Sélectionnez un ou plusieurs sites dont vous souhaitez exporter les paramètres, puis cliquez sur Exporter :
3 Si vous voulez sauvegarder les paramètres de votre site pour vous, choisissez la première option de la boîte de
4 Si vous voulez partager vos paramètres avec d'autres utilisateurs, choisissez la seconde option de la boîte de dialogue
5 Pour chaque site dont les paramètres doivent être exportés, recherchez un emplacement où vous souhaitez
6 Cliquez sur Terminé.
1 Sélectionnez Site > Gérer les sites. 2 Cliquez sur Importer. 3 Recherchez et sélectionnez un ou plusieurs sites (définis dans des fichiers ayant une extension .ste) dont vous
Pour sélectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque fichier .ste. Pour sélectionner une série de sites, cliquez en maintenant la touche Maj enfoncée sur le premier et le dernier fichier de la série. 4 Cliquez sur Ouvrir, puis sur Terminé.
Note: Vous devez copier localement la structure complète de la branche concernée du site distant existant. 2 Configurez un dossier distant en utilisant les informations d'accès à distance de votre site existant. Vous devez vous
(Consultez la section “Connexion à un serveur distant” on page 42.) Veillez à choisir le dossier racine correct pour le site distant. 3 Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Connecter à un hôte distant (pour un accès
4 Modifiez le site :
Affichage distant du panneau Fichiers et cliquez sur Acquérir le(s) fichier(s) dans la barre d'outils pour télécharger ce fichier sur votre disque dur local. Dreamweaver duplique automatiquement toute la partie de la structure du site distant nécessaire pour replacer le fichier téléchargé au niveau adéquat dans la hiérarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en général conseillé de charger également les fichiers dépendants, tels que les fichiers d'image.
“A propos des sites Dreamweaver” on page 40 Modification d'un site Web existant (blog Dreamweaver) Sélectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le panneau Fichiers. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Site dans la liste de gauche. 3 Définissez les options, puis cliquez sur OK. Toujours afficher Indique le site (local ou distant) qui doit toujours être affiché ainsi que le volet (gauche ou droit) du panneau Fichiers dans lequel doivent être présentés les fichiers locaux et distants.
Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour sont déjà présentes dans la destination. Si vous désactivez ces options, vos fichiers dépendants ne sont pas transférés. Ainsi, pour forcer l'affichage la boîte de dialogue Fichiers dépendants même lorsque ces options sont désélectionnées, maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncée tout en choisissant Acquérir, Placer, Archiver ou Extraire. Connexion FTP Détermine si la connexion avec le site distant doit être interrompue après le délai d'inactivité spécifié. Délai FTP Indique le temps, exprimé en secondes, pendant lequel Dreamweaver tente d'établir une connexion avec le
S'il n'y a toujours pas de réponse à l'issue du délai indiqué, Dreamweaver affiche une boîte de dialogue pour vous en avertir. Options de transfert FTP Détermine si Dreamweaver sélectionne l'option par défaut après un nombre de secondes spécifié, lorsqu'une boîte de dialogue apparaît lors du transfert d'un fichier et que l'utilisateur ne fournit aucune réponse. Hôte proxy Spécifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous trouvez derrière un pare-feu.
Port du proxy Spécifie le port de votre proxy ou de votre pare-feu par lequel vous passez pour vous connecter au serveur distant. Si vous vous connectez par l'intermédiaire d'un port autre que 21 (port par défaut pour FTP), tapez son numéro ici. Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistrés sont
Options de déplacement : Demander avant de déplacer les fichiers sur le serveur Vous alerte lorsque vous tentez de
Gérer les sites Ouvre la boîte de dialogue Gérer les sites, dans laquelle vous pouvez créer un site ou modifier un site
Vous pouvez définir si les types de fichiers transférés doivent l'être au format ASCII (texte) ou binaire, et ce en personnalisant le fichier FTPExtensionMap.txt situé dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.
Note: Cette section s'adresse aux administrateurs de Contribute. En tant qu'administrateur du site, vous donnez la possibilité aux personnes qui ne sont pas administrateurs de modifier des pages en créant et en leur envoyant une clé de connexion (pour plus d'informations sur la façon de procéder, consultez l'aide de Contribute). Vous pouvez également configurer une connexion à un site Contribute à l'aide de Dreamweaver qui vous permet, à vous ou à votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver. Contribute ajoute des fonctionnalités à votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intégrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramètres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver détecte que CPS est actif, il hérite de certaines fonctionnalités des services CPS (restauration des fichiers et consignation des événements, par exemple). Vous pouvez utiliser Dreamweaver pour vous connecter à un site Contribute et modifier un fichier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la même façon qu'avec tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines opérations de gestion de fichiers, telles que l'enregistrement de différentes versions d'un document et la consignation de certains événements dans la console CPS. Pour plus d'informations, consultez l'aide de Contribute.
Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considérations suivantes lors de sa structuration :
• Ajoutez des pages d'index aux dossiers à mesure que vous les créez pour inciter les utilisateurs de Contribute à placer les nouvelles pages dans les dossiers appropriés. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de réunions, vous pouvez créer un dossier dans le dossier racine du site appelé comptes_rendus et y insérer une page d'index. Vous devez ensuite créer un lien qui renvoie à la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et créer une page de procès-verbal pour une réunion donnée, désignée par un lien depuis cette page.
• Utilisez CSS plutôt que des balises HTML et attribuez un nom descriptif à vos styles CSS. Si les utilisateurs de Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez à vos styles CSS les mêmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur copie des données d'un document Word et les colle dans une page Contribute.
Note: Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS.
• Si vous utilisez des inclusions côté serveur pour des éléments de pages HTML, par exemple des en-tête ou des pieds de page, créez une page HTML non liée contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
“Création d'un modèle Dreamweaver” on page 415 “Utilisation des inclusions côté serveur” on page 358 Contribute utilise un système similaire au système d'archivage et d'extraction de Dreamweaver afin qu'un seul utilisateur à la fois puisse modifier une page Web donnée. Lorsque vous activez la compatibilité avec Contribute dans Dreamweaver, le système d'archivage et d'extraction de Dreamweaver est automatiquement activé. Pour transférer des fichiers depuis et vers un site Contribute à l'aide de Dreamweaver, utilisez toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acquérir pour transférer les fichiers, vous risquez d'écraser les dernières modifications apportées à un fichier par un utilisateur de Contribute. Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de sauvegarde de la version précédemment archivée du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la date à un fichier Design Notes.
“Archivage et extraction de fichiers” on page 94
Contribute offre un moyen de gérer les autorisations de fichiers et de dossiers pour chaque rôle d'utilisateur que vous aurez défini ; toutefois, Contribute ne permet pas de gérer les autorisations de lecture et d'écriture de base affectées aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez gérer ces autorisations directement sur le serveur.
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accès en lecture au dossier /Templates, vous pouvez tout de même rendre les modèles accessibles aux utilisateurs de Contribute. Consultez la rubrique “Activation de l'accès aux modèles sans l'accès au dossier racine pour les utilisateurs de Contribute” on page 64. Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les visiteurs du site :
• des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperçu des modifications ; • des fichiers de verrouillage temporaires, indiquant qu'une page spécifique est en cours de modification ou affichée en aperçu ;
En général, vous ne devez pas modifier ces fichiers spéciaux dans Dreamweaver ; Dreamweaver les gère automatiquement. Si vous ne souhaitez pas que ces fichiers spéciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouvez définir un serveur intermédiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouvez ensuite régulièrement copier ces pages Web du serveur intermédiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermédiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spéciaux Contribute mentionnés ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production. Note: Pour plus d'informations sur la configuration d'un serveur afin d'éviter que les visiteurs ne voient les fichiers des dossiers commençant par un souligné, consultez le chapitre traitant de la sécurité des sites Web dans l'aide de Contribute. Parfois, vous devrez supprimer manuellement d'autres fichiers spéciaux Contribute. Par exemple, si Contribute n'arrive pas à supprimer des pages temporaires d'aperçu, une fois l'aperçu fermé par l'utilisateur, vous devez supprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperçu commence par TMP. De même, un fichier de verrouillage obsolète peut accidentellement rester sur le serveur. Dans ce cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
Tous les types de connexion ne prennent pas en charge la compatibilité avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion :
Contribute, car ces systèmes de commande source ne sont pas compatibles avec les systèmes Design Notes et les systèmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute.
Lorsque vous activez la compatibilité avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Télécharger les Design Notes pour les partager), ainsi que le système d'archivage et d'extraction de fichiers. Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie CPS dès que vous exécutez une opération réseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces événements, que vous pouvez afficher dans la console d'administration CPS. (Si vous désactivez CPS, ces événements ne sont pas consignés.) L'activation de CPS s'effectue via Contribute. Pour plus d'informations, consultez l'aide d'Adobe Contribute. Note: Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit installé sur votre ordinateur. Toutefois, si vous souhaitez démarrer Contribute Administrator à partir de Dreamweaver, Contribute doit être installé sur le même ordinateur que Dreamweaver et vous devez être connecté au site distant avant d'activer la compatibilité avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les paramètres d'administration de Contribute pour déterminer si les services CPS et l'option de restauration sont activés. Important: Vous devez vous assurer que le fichier de paramètres partagés (fichier CSI) que Contribute emploie pour administrer le site se trouve bien sur le serveur distant et n'est pas endommagé. Contribute crée automatiquement ce fichier (et écrase ses anciennes versions) dès que vous effectuez des tâches d'administration dans Contribute Administrator. Si le fichier de paramètres partagés ne se trouve pas sur le serveur, ou s'il est endommagé, Dreamweaver vous informe que le fichier requis pour la compatibilité avec Contribute n'existe pas sur le serveur dès que vous tentez une opération réseau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, désactivez la connexion au serveur dans Dreamweaver, démarrez Contribute Administrator, apportez une modification administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe Contribute. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier. 3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, sélectionnez la catégorie
4 Si une boîte de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire,
votre adresse électronique dans la boîte de dialogue, puis cliquez sur OK. L'état de la restauration, l'état des services CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la boîte de dialogue Définition du site. Si la restauration est activée dans Contribute, vous pouvez restaurer les versions précédentes des fichiers que vous avez modifiés dans Dreamweaver. 6 Vérifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas échéant. Dreamweaver
7 Cliquez sur le bouton Tester pour vérifier si l'URL que vous avez saisie est correcte.
8 Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives.
Administrator à partir de Dreamweaver. 9 Cliquez sur Enregistrer puis sur Terminé.
“Restauration de fichiers (utilisateurs de Contribute)” on page 108
Après avoir activé la compatibilité avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tâches d'administration du site. Note: Contribute doit être installé sur le même ordinateur que Dreamweaver. En tant qu'administrateur d'un site Contribute, vous pouvez :
Les paramètres administratifs de Contribute rassemblent les paramètres qui s'appliquent à l'ensemble des utilisateurs de votre site Web. Ces paramètres permettent de configurer Contribute avec précision pour bénéficier d'une meilleure expérience utilisateur.
• définir les utilisateurs de Contribute. Les utilisateurs de Contribute nécessitent certaines informations sur le site pour pouvoir s'y connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appelé clé de connexion, que vous envoyez aux utilisateurs de Contribute. Note: Une clé de connexion ne correspond pas à un fichier de site exporté de Dreamweaver Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour créer la hiérarchie de dossiers de base de votre site, ainsi que les modèles et les feuilles de style CSS nécessaires au site. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier.
5 Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
Envoyer la clé de connexion, puis renseignez l'Assistant de connexion. 6 Cliquez sur Fermer, cliquez sur OK, puis sur Terminé.
“Importation et exportation des paramètres d'un site Dreamweaver” on page 54
Pour supprimer un fichier d'un serveur distant qui héberge un site Contribute, procédez de la même façon que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous décidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultérieurement. Pour modifier le nom d'un fichier distant ou déplacer le fichier d'un dossier à un autre dans un site Contribute, procédez de la même façon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou déplace également les anciennes versions du fichier associées qui sont enregistrées dans le dossier _baks. 1 Sélectionnez le fichier dans le volet distant du panneau Fichiers (Fenêtre > Fichiers) et appuyez sur Retour arrière
Une boîte de dialogue s'affiche vous demandant de confirmer la suppression du fichier. 2 Dans la boîte de dialogue de confirmation :
Supprimer les versions de restauration.
3 Cliquez sur Oui pour supprimer le fichier.
1 Définissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les
2 Copiez manuellement le dossier de modèles du dossier racine du site principal dans le dossier racine du site
3 Après avoir modifié le site principal, recopiez les modèles modifiés dans les sous-dossiers appropriés.
Dreamweaver. Les utilisateurs de Contribute ne peuvent pas créer de liens relatifs à la racine du site. Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problème d'autorisations pour le dossier, en particulier si les liens renvoient à des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute. Vérifiez les autorisations de lecture et d'écriture pour les dossiers sur le serveur.
“Chemins absolus, relatifs au documents et relatifs à la racine du site” on page 287
Si les outils d'administration ne fonctionnent pas correctement, cela peut être dû au dossier _mm .
Note: Avant de suivre cette procédure, assurez-vous que le fichier n'est pas extrait. Si vous déverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en même temps. 1 Effectuez l'une des opérations suivantes :
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction. Une boîte de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le déverrouillage du fichier. 2 Si cette boîte de dialogue s'affiche, cliquez sur Oui pour confirmer.
1 Vérifiez l'URL de la racine du site dans la catégorie Contribute de la boîte de dialogue Définition de site en ouvrant
2 Cliquez sur le bouton Tester dans la catégorie Infos distantes de la boîte de dialogue Définition du site pour vous
3 Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre
1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'écriture, voire d'exécution, pour le
2 Vérifiez que le dossier _mm contient un fichier de paramètres partagés portant l'extension CSI. 3 Si ce n'est pas le cas, utilisez l'Assistant de connexion pour créer une connexion au site et devenir administrateur
Administration de Contribute dans l'aide de Contribute.
Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents HTML, vous pouvez créer et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language), ASP, JavaScript et CSS (Cascading Style Sheets, feuilles de style en cascade). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java, sont également pris en charge. Dreamweaver propose diverses options pour la création d'un nouveau document. Vous pouvez créer les types de document suivants :
• un document basé sur l'une des mises en pages prédéfinies fournies avec Dreamweaver, dont plus de 30 mises en page basées sur CSS ;
Vous pouvez également définir les préférences des documents. Par exemple, si vous avez l'habitude de travailler avec un type particulier de document, vous pouvez le définir comme type par défaut pour les nouvelles pages. Vous pouvez aisément définir des propriétés de document, telles que les balises meta, le titre du document et la couleur de l'arrière-plan, ainsi que d'autres propriétés de page, en mode Création ou en mode Code.
Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage à base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par défaut les fichiers avec l'extension .html. Dreamweaver permet de créer et de modifier des pages Web HTML5. Les mises en forme de départ sont également disponibles pour la création de nouvelles pages HTML5. Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver : CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) possèdent l'extension .css. Ils sont utilisés pour
GIF Les fichiers GIF (Graphics Interchange Format) possèdent l'extension .gif. Ce format graphique est très utilisé
JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a créé le format) possèdent l'extension .jpg et correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images pourvues de transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs. XML Les fichiers XML (Extensible Markup Language) possèdent l'extension .xml. Ils contiennent des données brutes
“Affichage de données XML avec XSLT” on page 521 “Création visuelle d'applications” on page 636 “Description des feuilles de style en cascade” on page 132
Vous pouvez créer une page contenant une mise en forme CSS prédéfinie, ou créer une page totalement vierge puis créer la mise en forme de votre choix. 1 Choisissez Fichier > Nouveau. 2 Dans la catégorie Page vierge de la boîte de dialogue Nouveau document, sélectionnez le type de page à créer dans
3 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
Dreamweaver propose également deux mises en forme CSS HTML5 : deux et trois colonnes fixes. 4 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web. Note: Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). Dreamweaver propose également HTML5 comme option doctype.
de mise en forme dans la liste déroulante CSS de mise en forme. Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez. Créer un nouveau fichier Ajoute le code CSS de mise en forme à un nouveau fichier CSS externe et associe la nouvelle
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise
6 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en
Une page compatible InContext Editing doit comporter au moins une balise div pouvant être spécifiée en tant que région modifiable. Par exemple, si vous avez sélectionné le type de page HTML, vous devez choisir l'une des mises en forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prédéfinies. La région modifiable InContext Editing est automatiquement placée dans la balise div avec l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres régions modifiables à la page. 8 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
9 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
10 Cliquez sur le bouton Créer. 11 Enregistrez la page (Fichier > Enregistrer). 12 Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le fichier.
13 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
“Code XHTML” on page 310 “Mise en forme des pages avec CSS” on page 162 “Définition du type et du codage par défaut d'un document” on page 73 “Business Catalyst InContext Editing” on page 514
4 Si vous voulez que la nouvelle page contienne une mise en forme CSS, sélectionnez une mise en forme CSS
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
5 Sélectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option
Sélectionnez l'une des définitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En règle générale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilité descendante et ascendante de vos documents Web. Note: Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spécification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). 6 Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS
Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez. Créer un nouveau fichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la
Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS existante. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.
8 Choisissez Activer InContext Editing si vous voulez créer une page qui deviendra compatible avec InContext
9 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
10 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
11 Cliquez sur le bouton Créer. 12 Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajouté de régions modifiables au modèle, une
13 Dans la boîte de dialogue Enregistrer sous, sélectionnez le site dans lequel le modèle doit être enregistré. 14 Dans la zone de texte Nom de fichier, entrez le nom du nouveau modèle. Il n'est pas nécessaire d'ajouter l'extension
Evitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers.
“Code XHTML” on page 310 “Mise en forme des pages avec CSS” on page 162 “Création et gestion des modèles” on page 407 “Utilisation de sites Dreamweaver” on page 40 “Définition du type et du codage par défaut d'un document” on page 73 “Business Catalyst InContext Editing” on page 514
Vous pouvez sélectionner, prévisualiser et créer un nouveau document à partir d'un modèle existant. La boîte de dialogue Nouveau document vous permet de sélectionner un modèle parmi les sites définis dans Dreamweaver ou d'utiliser le panneau Actifs pour créer un nouveau document sur la base d'un modèle existant.
“Création et gestion des modèles” on page 407 “Utilisation de sites Dreamweaver” on page 40 “Définition du type et du codage par défaut d'un document” on page 73
1 Choisissez Fichier > Nouveau.
4 Désactivez l'option Mettre la page à jour quand le modèle est modifié si vous ne souhaitez pas que la page soit mise
5 Cliquez sur le bouton Préférences pour définir les préférences par défaut du document (par exemple, le type de
6 Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et télécharger d'autres contenus de
7 Cliquez sur Créer puis enregistrez le document (Fichier > Enregistrer).
1 Ouvrez le panneau Actifs (Fenêtre > Actifs) s'il n'est pas déjà ouvert. 2 Dans le panneau Actifs, cliquez sur l'icône Modèles
Si le modèle que vous souhaitez utiliser vient d'être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour l'afficher. 3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à
Le document s'ouvre dans la fenêtre de document. 4 Enregistrez le document.
Dreamweaver inclut plusieurs mises en formes de pages de cadres professionnelles, ainsi que des fichiers de conception CSS. Vous pouvez utiliser ces fichiers d'exemple comme point de départ pour la création de pages sur vos sites Web. Lorsque vous créez un document basé sur un fichier d'exemple, Dreamweaver crée une copie du fichier. La boîte de dialogue Nouveau document permet de prévisualiser un fichier d'exemple et de consulter une brève description des éléments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prédéfinie pour l'appliquer à vos documents. Note: Si vous créez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu de cadres est copiée, sans le contenu des cadres. En outre, vous devez enregistrer séparément chacun des fichiers composant le cadre. 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page de l'exemple. 3 Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Jeu de cadres, puis sélectionnez un fichier
4 Cliquez sur le bouton Créer.
5 Enregistrez le document (Fichier > Enregistrer). 6 Si la boîte de dialogue Copier les fichiers dépendants apparaît, définissez les options, puis cliquez sur Copier pour
“Enregistrement des fichiers du cadre et du jeu de cadres” on page 212
La catégorie Autre de la boîte de dialogue Nouveau document permet de créer divers types de page qui peuvent être utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul. 1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Autre. 3 Sélectionnez le type de document à créer dans la colonne Type de page, puis cliquez sur le bouton Créer. 4 Enregistrez le document (Fichier > Enregistrer).
Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du document sous un nouveau nom, dans un autre emplacement. Evitez tout espace ou caractère spécial dans les noms de fichier ou de dossier. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier par un numéro.
“Création d'une page vierge” on page 67
4 Cliquez sur Enregistrer pour enregistrer le fichier.
1 Choisissez Fichier > Enregistrer tout. 2 Si des documents non enregistrés sont ouverts, la boîte de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.
Rétablissement de la dernière version enregistrée d'un document 1 Sélectionnez Fichier > Rétablir.
2 Cliquez sur Oui pour revenir à la version précédente ou sur Non pour appliquer les modifications.
Vous pouvez définir le type de document par défaut utilisé pour un site. Par exemple, si la plupart des pages de votre site sont de type spécifique (tel que les documents ColdFusion, HTML ou ASP), vous pouvez définir des préférences de document pour créer automatiquement les nouveaux documents de ce type. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Cliquez sur la catégorie Nouveau document dans la liste de gauche. 3 Définissez ou modifiez les préférences selon vos besoins, puis cliquez sur OK pour les enregistrer. Document par défaut Sélectionnez le type de document qui sera employé pour les pages que vous créez. Extension par défaut Indiquez l'extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages HTML que vous créerez.
Type de document par défaut (DDT) Sélectionnez l'une des définitions de type de document (DTD) XHTML qui
Codage par défaut Spécifie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne
Si vous sélectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entité est superflu dans la mesure où UTF 8 permet de représenter de façon fiable tous les caractères. Si vous sélectionnez un autre codage de document, le codage d'entité peut être nécessaire pour représenter certains caractères. Pour plus d'informations sur les entités de caractères, voir www.w3.org/TR/REC-html40/sgml/entities.html. Si vous sélectionnez Unicode (UTF8) en tant que code par défaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en sélectionnant l'option Inclure une signature Unicode (BOM). Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifiant un fichier comme étant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne présentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire. Formulaire de normalisation Unicode Activez l'une de ces options si vous sélectionnez Unicode (UTF 8) en tant que
C, car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalisation Unicode. Afficher la boîte de dialogue Nouveau document si Ctrl+N Désactivez cette option (baptisée « Commande+N » sur Macintosh) pour appliquer automatiquement le type par défaut au nouveau document créé lorsque vous utilisez la touche de commande.
La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « ë » d'un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez le site Web Unicode www.unicode.org/reports/tr15.
“Code XHTML” on page 310 “Description de l'encodage de document” on page 225
L'emploi de Fichier > Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les éléments et attributs HTML5. Seul le DOCTYPE change et des barres obliques (pour XHTML) sont insérées à la fin. Les balises sémantiques telles que <header> et <article>, ainsi que les attributs tels que required, placeholder et type="number", ne sont pas affectés.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Cliquez sur la catégorie Nouveau document dans la liste de gauche. 3 Assurez-vous que HTML est bien sélectionné dans le menu Document par défaut. 4 Dans la zone de texte Extension par défaut, spécifiez l'extension de fichier que vous souhaitez utiliser pour les
Sous Windows, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Sous Macintosh, vous pouvez spécifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi. Vous pouvez ouvrir une page Web existante ou un document texte, même si celui-ci n'a pas été créé avec Dreamweaver, et le modifier en mode Code ou en mode Création. Si le document que vous ouvrez est un fichier Microsoft Word enregistré au format HTML, il est conseillé d'utiliser la commande Nettoyage du HTML Word pour supprimer les balises superflues ajoutées par Word au fichier HTML. Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML. Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte. 1 Choisissez Fichier > Ouvrir.
2 Recherchez et sélectionnez le fichier à ouvrir.
3 Cliquez sur Ouvrir.
“Nettoyage du code” on page 341 “Lancement d'un éditeur externe pour des fichiers multimédias” on page 273 “Utilisation des fichiers depuis le panneau Fichiers” on page 83
Dreamweaver permet de visualiser les fichiers associés à votre document principal, tout en restant focalisé sur ce dernier. Par exemple, si des fichiers CSS et JavaScript sont joints à un document principal, Dreamweaver permet d'afficher et de modifier ces fichiers associés dans la fenêtre de document tout en laissant le document principal visible. Note: Les fichiers à association dynamique (comme les fichiers PHP de systèmes de gestion du contenu) sont abordés dans la prochaine section d'aide. Par défaut, Dreamweaver affiche le nom de tous les fichiers associés au document principal dans une barre d'outils Fichiers associés, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens vers les fichiers associés dans le document principal. Note: Si un fichier associé est manquant, Dreamweaver affiche quand même le bouton correspondant dans la barre d'outils Fichiers associés. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien. Dreamweaver prend en charge les types de fichiers associés suivants:
• Inclusions côté serveur • Sources d'ensembles de données Spry (XML et HTML) • Feuilles de style CSS externes (dont les feuilles de style imbriquées) Last updated 10/4/2012 Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Effectuez l'une des opérations suivantes :
• Dans la barre d'outils Fichiers associés en haut du document, cliquez à l'aide du bouton droit de la souris sur le nom du fichier associé à ouvrir, puis choisissez Ouvrir en tant que fichier séparé dans le menu. Lorsque vous utilisez cette méthode pour ouvrir un fichier associé, le document principal ne reste pas visible simultanément.
1 Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influencée par un fichier
2 Attendez que l'indicateur Navigation dans le code s'affiche, puis cliquez dessus pour ouvrir la fenêtre Navigation
3 Vous pouvez survoler les éléments de la fenêtre Navigation dans le code afin d'afficher davantage d'informations à
Navigation dans le code. 4 Cliquez sur l'élément qui vous intéresse afin d'ouvrir le fichier associé correspondant.
❖ Cliquez sur le bouton Code source de la barre d'outils Fichiers apparentés.
Vous pouvez afficher les fichiers associés de diverses manières :
Vous pouvez choisir Affichage > Mode Création en haut pour que le fichier associé s'affiche plutôt dans le bas de la fenêtre de document.
Fractionner verticalement), ce fichier s'affiche dans une fenêtre fractionnée à côté du mode Création du document principal. Selon l'endroit où vous voulez placer le mode Création, vous pouvez activer ou désactiver l'option Affichage > Mode Création à gauche.
(Affichage > Mode Fractionné ou Affichage > Fractionner verticalement), le fichier associé s'affiche dans une fenêtre fractionnée en dessous, au-dessus ou à côté du code source du document principal, en fonction des options que vous avez sélectionnées.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général, désactivez Activer les fichiers associés.
“Basculement d'un mode à un autre dans la fenêtre de document” on page 19 “Navigation vers le code associé” on page 332 “Prévisualisation de pages dans Dreamweaver” on page 304 Didacticiel relatif aux fichiers associés
La fonction Fichiers à association dynamique accroît les possibilités de la fonction Fichiers associés, en vous permettant de voir les fichiers associés aux pages dynamiques dans la barre d'outils Fichiers associés. Plus précisément, la fonction Fichiers à association dynamique permet de voir les nombreuses inclusions dynamiques requises pour générer le code d'exécution des cadres CMS (système de gestion du contenu) PHP ouverts les plus populaires, tels que WordPress, Drupal et Joomla! Pour pouvoir utiliser la fonction Fichiers à association dynamique, vous devez avoir accès à un serveur d'applications PHP local ou distant qui exécute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste à configurer un serveur d'applications PHP sur localhost puis à tester les pages localement. Avant de tester les pages, vous devez effectuer les opérations suivantes :
Important: Le serveur doit être en cours d'exécution avant que vous ne tentiez d'utiliser des fichiers à association dynamique dans Dreamweaver.
• Installation de WordPress • Installation de Drupal • Installation de Joomla • Dans Dreamweaver, définissez un fichier local où vous allez télécharger et modifier vos fichiers de CMS. • Définissez l'emplacement des fichiers de WordPress, Drupal ou Joomla! installés comme dossier distant et de test. • Téléchargez (obtenez) vos fichiers de CMS depuis le dossier distant.
Informations, dans le haut de la page). Par défaut, la recherche se fait manuellement. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac OS). 2 Dans la catégorie Général, assurez-vous que l'option Activer les fichiers associés est bien activée. 3 Sélectionnez Manuellement ou Automatiquement dans le menu Fichiers à association dynamique. Vous pouvez
1 Ouvrez ne page à laquelle des fichiers à association dynamique sont liés, par exemple la page index.php à la racine
2 Si la recherche de fichiers à association dynamique se fait manuellement (option par défaut), cliquez sur le lien
Si la recherche de fichiers à association dynamique se fait automatiquement, la liste des fichiers à association dynamique s'affiche dans la barre d'outils Fichiers associés. L'ordre des fichiers associés et à association dynamiques dans la barre d'outils Fichiers associés est le suivant :
• Fichiers associés externes (c.-à-d. fichiers .css et .js) qui sont liés à des fichiers d'inclusion de serveur à chemin dynamique
Comme les fichiers associés et les fichiers à association dynamique peuvent être nombreux, Dreamweaver permet de filtrer les fichiers associés, de façon à trouver précisément les fichiers avec lesquels vous voulez travailler. 1 Ouvrez une page à laquelle des fichiers associés sont liés. 2 Si nécessaire, recherchez les fichiers à association dynamique. 3 Cliquez sur l'icône Filtrer les fichiers associés sur la droite de la barre d'outils Fichiers associés. 4 Sélectionnez les types de fichiers à afficher dans la barre d'outils Fichiers associés. Par défaut, Dreamweaver
5 Pour créer un filtre personnalisé, cliquez sur l'icône Filtrer les fichiers associés, puis choisissez Filtre personnalisé.
Note: Les paramètres de filtre ne sont pas conservés lorsque vous fermez le fichier.
Le code que Dreamweaver supprime est principalement utilisé par Word pour mettre en forme et afficher les documents dans Word même, et n'est pas nécessaire dans un véritable fichier HTML. Conservez une copie de votre fichier Word original (.doc) comme sécurité, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans Word après avoir appliqué la fonction Nettoyer HTML Word. Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, utilisez la commande Nettoyage du HTML. 1 Enregistrez votre document Microsoft Word au format HTML.
2 Ouvrez le fichier HTML dans Dreamweaver.
3 Sélectionnez Commandes > Nettoyer HTML Word.
4 Activez (ou désactivez) les options de nettoyage. Les préférences que vous entrez sont sauvegardées comme
Dreamweaver applique les paramètres de nettoyage au document HTML et un journal contenant une liste des modifications apportées s'affiche (sauf si cette option a été désélectionnée dans la boîte de dialogue). Supprimer les marqueurs spécifiques à Word Supprime tout le code HTML spécifique à Word, y compris le code XML
Vous pouvez sélectionner chacune de ces options individuellement à partir de l'onglet Détaillé. Nettoyer CSS Supprime de l'en-tête toutes les feuilles de style spécifiques à Word, y compris les styles CSS incorporés si possible (lorsque le style parent possède les mêmes propriétés), les attributs de style commençant par « mso », les déclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les définitions de style non utilisées. Vous pouvez personnaliser cette option encore davantage à partir de l'onglet Détaillé. Nettoyer les balises <font> Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de
Corriger les imbrications de balises non valides Supprime les balises de définition des polices de caractères insérées
Appliquer le format source Permet d'appliquer au document les options de formatage que vous avez indiquées dans les préférences de format HTML et dans le fichier SourceFormat.txt. Afficher le journal à la fin Affiche un message d'avertissement détaillant les modifications apportées au document dès
5 Cliquez sur OK ou sur l'onglet Détaillé pour personnaliser davantage les options Supprimer les marqueurs
Gestion des fichiers et des dossiers A propos de la gestion des fichiers et des dossiers Dreamweaver possède un panneau Fichiers qui permet de gérer et de transférer des fichiers vers un serveur distant et à partir de celui-ci. Lorsque vous transférez des fichiers entre le site local et le site distant, les structures de fichiers et de dossiers parallèles sur les deux sites sont préservées. Lors du transfert de fichiers entre les sites, Dreamweaver crée les dossiers nécessaires s'ils n'existent pas encore sur l'un des sites. Vous pouvez également synchroniser les fichiers entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas échéant, les fichiers inutiles.
Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associés à un site Dreamweaver) et d'effectuer des opérations courantes de maintenance, comme l'ouverture et le déplacement de fichiers. Note: Dans les versions précédentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site. Vous pouvez déplacer le panneau Fichiers selon vos besoins et définir ses préférences. Utilisez ce panneau pour effectuer les tâches suivantes :
• Affichage de fichiers et de dossiers • Gestion de fichiers et de dossiers dans le panneau Fichiers Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transférer des fichiers :
A. Menu du site B. Connecter ou Déconnecter C. Actualiser D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur d'évaluation G. Mode Référentiel H. Acquérir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L. Synchroniser utiliser le menu Site pour accéder à tous les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh). Connecter ou Déconnecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en déconnecte. Par défaut, Dreamweaver se déconnecte du site distant après 30 minutes d'inactivité (FTP uniquement). Pour modifier cette durée, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Site dans la liste de gauche.
une mise à jour des répertoires si vous avez désactivé les options Actualiser automatiquement la liste des fichiers locaux ou Actualiser automatiquement la liste des fichiers distants dans la boîte de dialogue Définition du site. Vue Fichiers du site Affiche la structure des fichiers présents sur le site local et le site distant dans les volets du panneau Fichiers. Le site apparaissant dans le volet gauche et droit dépend d'un paramètre de préférence. La vue Fichiers du site correspond au mode d'affichage par défaut du panneau Fichiers. Vue Serveur d'évaluation Affiche la structure des répertoires du serveur d'évaluation et du site local. Mode Référentiel Affiche le référentiel Subversion (SVN). Acquérir le(s) fichier(s) Copie les fichiers sélectionnés depuis le site distant vers le site local (en écrasant, le cas échéant,
Note: Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux sélectionnés dans le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers sélectionnés sur le serveur distant ou le serveur d'évaluation qui sont copiés ; si le volet actif est Fichiers locaux, Dreamweaver copie la version présente sur le serveur distant ou le serveur d'évaluation des fichiers sélectionnés sur le site local. Placer le(s) fichier(s) Copie les fichiers sélectionnés depuis le site local vers le site distant.
Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de fichier est activée, le fichier est ajouté au site distant et reçoit l'état « extrait ». Si vous ne voulez pas que le fichier ajouté soit doté de cet état, cliquez sur le bouton Archiver. Extraire le(s) fichier(s) Transfère une copie du fichier du serveur distant vers le site local (en écrasant la copie locale de ce fichier, le cas échéant) et donne au fichier l'état extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée pour le site en cours dans la boîte de dialogue Définition du site. Archiver Transfère une copie du fichier local vers le serveur distant, de manière à ce qu'il puisse être modifié par
Activer l'archivage et l'extraction de fichier est désactivée pour le site sélectionné dans la boîte de dialogue Définition du site. Synchroniser Synchronise les fichiers entre les dossiers locaux et distants. Le bouton Développer/Réduire développe ou réduit le panneau Fichiers afin d'afficher un ou deux volets.
“Présentation du panneau Fichiers” on page 17 “Utilisation de sites Dreamweaver” on page 40 “Archiver et extraire des fichiers dans un dossier distant” on page 95 “Placement de fichiers sur un serveur distant” on page 91 “Acquisition de fichiers depuis un serveur distant” on page 90 “Synchronisation de fichiers” on page 103
Dreamweaver. Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage, et, pour les sites Dreamweaver, vous pouvez développer ou réduire le panneau Fichiers. Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit. Vous pouvez également basculer l'affichage du contenu dans le panneau Fichiers développé, en utilisant l'option Toujours afficher.
❖ Choisissez Fenêtre > Fichiers.
Avant de pouvoir ancrer de nouveau le panneau, vous devez le réduire. Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit le serveur d'évaluation.
❖ Effectuez l'une des opérations suivantes lorsque le panneau Fichiers (Fenêtre > Fichiers) est développé :
❖ Effectuez l'une des opérations suivantes :
Note: L'option Affichage local apparaît par défaut dans le menu Vue du site.
Pour les sites Dreamweaver, vous pouvez également identifier les fichiers (sur le site local ou distant) mis à jour depuis leur dernier transfert.
“Synchronisation de fichiers” on page 103 “Accès aux sites, à un serveur et aux disques locaux” on page 86
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site, un serveur ou un lecteur dans le menu
2 Recherchez et sélectionnez le fichier à ouvrir. 3 Effectuez l'une des opérations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'icône du fichier, puis choisissez Ouvrir. Le fichier s'ouvre dans la fenêtre de document de Dreamweaver.
1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
3 Saisissez le nom du nouveau fichier ou dossier. 4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). • Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau. • Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur l'icône du fichier, puis choisissez Edition > Renommer. 3 Saisissez le nouveau nom à la place du nom existant. 4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
1 Sélectionnez le fichier à déplacer dans le panneau Fichiers (Fenêtre > Fichiers). 2 Effectuez l'une des opérations suivantes : • Faites glisser le fichier ou le dossier vers son nouvel emplacement. 3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier à son nouvel emplacement.
❖ Effectuez l'une des opérations suivantes :
Note: Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre application, puis revenez à Dreamweaver.
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers sélectionnés, ouverts, extraits ou modifiés récemment dans votre site. Vous pouvez également rechercher les fichiers les plus récents dans votre site local ou distant.
“Utilisation des rapports pour tester votre site” on page 116
Dreamweaver tente de déterminer à quel site Dreamweaver le fichier appartient. S'il ne correspond qu'à un seul site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
1 Sélectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fenêtre > Fichiers). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
❖ Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu Options dans le
2 Procédez de l'une des manières suivantes pour indiquer les dates à prendre en compte dans le rapport :
3 (Facultatif) Entrer un nom d'utilisateur dans la zone Modifié par pour limiter votre recherche aux fichiers modifiés
Note: Cette option est uniquement disponible pour les sites Contribute. 4 Indiquez l'emplacement où vous souhaitez afficher les fichiers compris dans le rapport à l'aide des boutons radio,
Machine locale si le site ne comporte que des pages statiques. Serveur d'évaluation si le site comporte des pages dynamiques.
Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site. 1 Choisissez Site > Vérifier tous les liens du site.
2 Sélectionnez Fichiers orphelins dans le menu du panneau Vérificateur de lien.
3 Sélectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr.
à d'autres fichiers. Procédez avec prudence lors de la suppression de fichiers.
“Activation et désactivation du voilage d'un site” on page 109
Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez accéder à un serveur, à un disque local ou à votre bureau. Avant de pouvoir accéder à un serveur distant, vous devez configurer Dreamweaver de façon à ce qu'il puisse fonctionner avec ce serveur. Note: La meilleure façon de gérer des fichiers est de créer un site Dreamweaver.
❖ Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu (dans lequel le site, le serveur ou
Note: Les noms des serveurs que vous avez configurés pour fonctionner avec Dreamweaver apparaissent. 2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau, disque local ou disque compact dans le menu
2 Recherchez le fichier de votre choix, puis effectuez l'une des opérations suivantes :
• Renommer des fichiers • Copier des fichiers • Supprimer des fichiers • Faire glisser des fichiers Lorsque vous faites glisser un fichier d'un site Dreamweaver à un autre site ou à un dossier non lié à un site Dreamweaver, Dreamweavercopie le fichier, puis l'ajoute à l'emplacement où vous le déposez. Si vous faites glisser un fichier et le déposez au sein du même site Dreamweaver, Dreamweaverdéplace le fichier à l'emplacement où vous le déposez. Lorsque vous faites glisser un fichier qui n'est associé à aucun site Dreamweaver vers un dossier qui n'est pas non plus associé à un site Dreamweaver, Dreamweaver déplace le fichier à l'emplacement où vous le déposez. Note: Pour que Dreamweaver déplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou Commande (Macintosh) enfoncée pendant que vous faites glisser et déposez le fichier. Pour copier un fichier que Dreamweaver déplacerait par défaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfoncée pendant que vous faites glisser et déposez le fichier.
Lorsqu'un site Dreamweaver est affiché dans le panneau Fichiers (en mode développé), les informations liées aux fichiers et dossiers sont affichées dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date de sa dernière modification. Vous pouvez personnaliser les colonnes en procédant de l'une des façons suivantes (certaines opérations sont disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les colonnes par défaut) :
Last updated 10/4/2012
• Supprimer les colonnes (colonnes personnalisées uniquement) • Renommer les colonnes (colonnes personnalisées uniquement) • Associer des colonnes à une Design Note (colonnes personnalisées uniquement)
❖ Sélectionnez le nom d'une colonne, puis cliquez sur le bouton flèche vers le haut ou vers le bas afin de changer la
Note: Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en première position.
1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier. 3 Développez les paramètres avancés et choisissez la catégorie Colonnes mode Fichier. 4 Sélectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins (–) pour la
Note: Comme la colonne est immédiatement supprimée sans qu'il vous soit demandé de confirmation, soyez certain de réellement vouloir effectuer cette opération avant de cliquer sur le bouton Moins (–). 5 Dans la zone Nom de colonne, indiquez le nom de votre colonne. 6 Choisissez une valeur dans le menu Associer à Design Notes ou indiquez-en une.
Fichiers. 7 Choisissez une option d'alignement pour déterminer la façon dont le texte doit être aligné dans la colonne. 8 Activez ou désactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne. 9 Activez ou désactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non
❖ Pour trier les listes, cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri.
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le système d'extraction et d'archivage pour transférer des fichiers entre le serveur distant et l'ordinateur local. Si vous êtes la seule personne à travailler sur le site distant, vous pouvez utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire. Lorsque vous transférez un document entre un dossier local et distant à l'aide du panneau Fichiers, vous pouvez transférer les fichiers dépendants de ce document. Les fichiers dépendants sont des images, des feuilles de style externes et d'autres fichiers référencés dans votre document qu'un navigateur charge avec le document. Note: D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local. Cela s'applique également lors du transfert et de l'archivage de fichiers : il n'est pas nécessaire si des copies mises à jour sont déjà présentes sur le site distant. Les éléments de bibliothèque sont traités comme des fichiers dépendants. Certains serveurs génèrent des erreurs lors du placement d'éléments de bibliothèque. Néanmoins, vous pouvez voiler ces fichiers pour qu'ils ne soient pas transférés.
“Archivage et extraction de fichiers” on page 94 “Activation et désactivation du voilage d'un site” on page 109
Vous pouvez effectuer d'autres activités non liées au serveur lors de l'acquisition ou du placement de fichiers. Le transfert de fichiers d'arrière-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Subversion et RDS. Les activités non liées au serveur comprennent, entre autres, les opérations suivantes: taper, modifier des feuilles de style externes, générer des rapports à l'échelle du site et créer de nouveaux sites. Les activités côté serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tâches suivantes :
• annuler l'extraction ; • créer une connexion à une base de données ; • lier les données dynamiques ; • Prévisualisation des données en mode Affichage en direct • insérer un service Web ; • supprimer des fichiers ou des dossiers distants ; • prévisualiser dans le navigateur sur un serveur d'évaluation ; • enregistrer un fichier sur un serveur distant ;
La commande Acquérir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers. Dreamweaver crée un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Note: Vous ne pouvez pas désactiver le transfert de fichiers en arrière-plan. Si le journal des détails est ouvert dans la boîte de dialogue Activité fichiers en arrière-plan, vous pouvez le fermer pour améliorer les performances. Dreamweaver enregistre également l'activité de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider à déterminer le problème.
“Archivage et extraction de fichiers” on page 94 “Synchronisation de fichiers” on page 103
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers que vous voulez télécharger.
Note: Pour n'acquérir que les fichiers dont la version distante est plus récente que la version locale, utilisez la commande Synchroniser. 2 Procédez de l'une des manières suivantes pour acquérir un fichier :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Acquérir dans le menu contextuel. 3 Cliquez sur Oui dans la boîte de dialogue Fichiers dépendants si vous souhaitez télécharger les fichiers dépendants.
Pour arrêter le transfert de fichier à n'importe quel moment, cliquez sur le bouton Annuler de la boîte de dialogue Activité fichiers en arrière-plan.
1 Assurez-vous que le document est actif dans la fenêtre du document. 2 Procédez de l'une des manières suivantes pour acquérir un fichier :
• Cliquez sur l'icône Gestion des fichiers dans la barre d'outils de la fenêtre du document, puis sélectionnez Acquérir dans le menu. Note: Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération d'acquisition.
1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers. 2 Choisissez Affichage > Journal FTP du site.
Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'état d'extraction du fichier. Il existe deux types de circonstances dans lesquels il est préférable d'utiliser la commande Placer plutôt que la commande Archiver :
• Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez continuer à y apporter des modifications. Note: Si vous placez un fichier qui n'existait pas encore sur le site distant et que vous utilisez le système d'extraction et d'archivage, le fichier est copié sur le site distant, puis extrait pour vous permettre de continuer à le modifier. Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers. Dreamweaver crée un journal de suivi des activités de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Note: Vous ne pouvez pas désactiver le transfert de fichiers en arrière-plan. Si le journal des détails est ouvert dans la boîte de dialogue Activité fichiers en arrière-plan, vous pouvez le fermer pour améliorer les performances.
Vous trouverez un didacticiel consacré au placement de fichiers sur un serveur distant à l'adresse www.adobe.com/go/vid0163_fr. Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr.
“Synchronisation de fichiers” on page 103 “A propos du système d'archivage et d'extraction de fichiers” on page 94 Didacticiel consacré au placement de fichiers Didacticiel consacré au dépannage des problèmes de publication
Fichiers 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à télécharger.
Note: Vous pouvez décider de ne placer que les fichiers dont la version locale est plus récente que la version distante. 2 Procédez de l'une des manières suivantes pour placer un fichier sur le serveur distant :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Placer dans le menu contextuel. 3 Si le fichier n'a pas encore été enregistré, une boîte de dialogue s'affiche (si vous l'avez indiqué parmi les préférences
Note: Si vous n'enregistrez pas le fichier, aucune des modifications effectuées depuis le dernier enregistrement ne sera placée sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements après avoir placé le fichier sur le serveur. 4 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si
Note: Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau. Pour arrêter le transfert de fichier à n'importe quel moment, cliquez sur le bouton Annuler de la boîte de dialogue Activité fichiers en arrière-plan.
1 Assurez-vous que le document est actif dans la fenêtre du document.
Note: Si le fichier actuel n'est pas associé au site sélectionné dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération de placement.
1 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers. 2 Choisissez Affichage > Journal FTP du site.
Vous pouvez afficher l'état des opérations de transfert de fichiers, ainsi que la liste des fichiers transférés et de leurs résultats (transfert réussi, ignoré ou raté). Vous pouvez également créer un journal des activités relatives aux fichiers. Note: Dreamweaver vous permet d'effectuer d'autres activités non liées au serveur lors du transfert de fichiers vers le serveur ou à partir de ce dernier.
❖ Cliquez sur le bouton Annuler de la boîte de dialogue Transfert de fichiers en arrière-plan. Si la boîte de dialogue
❖ Cliquez sur le bouton Activité fichiers ou Journal dans le bas du panneau Fichiers.
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en
2 Cliquez sur la flèche Détails.
1 Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la boîte de dialogue Activité fichiers en
2 Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte.
Si vous travaillez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous êtes la seule personne à travailler sur le serveur distant, vous pouvez utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire. Note: Vous pouvez utiliser la fonctionnalité d'acquisition et de placement de fichiers sur un serveur d'évaluation, mais le système d'archivage et d'extraction n'est pas disponible sur ce type de serveur. L'extraction d'un fichier équivaut à signaler aux autres utilisateurs que vous travaillez sur ce fichier et qu'ils ne doivent pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectué l'opération est affiché dans le panneau Fichiers, avec une coche de couleur rouge (si le fichier a été extrait par un autre membre de l'équipe) ou verte (si vous êtes la personne à avoir extrait le fichier) en regard de son icône. L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et le modifier. Lorsque vous archivez un fichier après l'avoir modifié, la version locale de ce fichier devient accessible en lecture seule et un cadenas apparaît en regard du fichier dans le panneau Fichiers pour vous empêcher de le modifier. Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transférez des fichiers à l'aide d'une application autre que Dreamweaver, vous risquez d'écraser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fichier LCK est visible près du fichier extrait dans la hiérarchie de fichiers afin d'éviter ce type d'incident.
“Acquisition et placement de fichiers depuis ou vers votre serveur” on page 89
Pour utiliser le système d'archivage et d'extraction, vous devez associer votre site local à un serveur distant. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site et cliquez sur Modifier. 3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4 Définissez les options de base requises, puis cliquez sur le bouton Avancé. 5 Activez l'option Activer l'extraction de fichier si vous travaillez au sein d'une équipe (ou si vous travaillez seul, mais
Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour vous rappeler qu'une version plus récente d'un fichier est peut-être ouverte sur une autre machine. Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configuré le serveur distant. 6 Activez l'option Extraire les fichiers à l'ouverture si vous voulez que les fichiers soient automatiquement extraits
Si vous choisissez Fichier > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, même si cette option est activée.
Adresse électronique Si vous saisissez une adresse électronique, lors de l'extraction d'un fichier, votre nom apparaît
Une fois le système d'archivage et d'extraction défini, vous pouvez archiver et extraire des fichiers sur un serveur distant via le panneau Fichiers ou la fenêtre de document.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à extraire du serveur distant.
Une coche de couleur rouge indique qu'un autre membre de l'équipe dispose du fichier extrait. Un symbole représentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouillé (Macintosh). 2 Procédez de l'une des manières suivantes pour extraire les fichiers :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Extraire dans le menu contextuel. 3 Dans la boîte de dialogue Fichiers dépendants, cliquez sur Oui si vous souhaitez télécharger les fichiers dépendants
Site. Note: D'une manière générale, il est conseillé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà présentes sur le disque local. Une coche de couleur verte apparaît en regard de l'icône du fichier local pour signaler que vous l'avez extrait. Important: Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version extraite.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers extraits ou sélectionnez de nouveaux
Note: Vous pouvez sélectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'évaluation. 2 Procédez de l'une des manières suivantes pour archiver les fichiers :
3 Cliquez sur Oui si vous souhaitez envoyer les fichiers dépendants associés aux fichiers sélectionnés ou sur Non si
Note: Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau. Un cadenas apparaît en regard de l'icône du fichier local pour indiquer que ce dernier n'est désormais accessible qu'en lecture seule. Important: Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences.
1 Assurez-vous que le fichier à archiver ou à extraire est ouvert dans la fenêtre de document.
2 Effectuez l'une des opérations suivantes :
Si vous extrayez un fichier, puis que vous décidez de ne pas le modifier (ou si vous décidez d'éliminer les modifications que vous avez apportées), vous pouvez annuler l'opération d'extraction. Le fichier reprend alors son état d'origine. Pour annuler l'extraction d'un fichier, procédez de l'une des façons suivantes :
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction. La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportées sont perdues.
Dreamweaver peut se connecter à un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning), un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de gérer des fichiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org. 1 Si vous ne l'avez pas encore fait, définissez un site Dreamweaver indiquant le dossier local que vous utilisez pour
3 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Serveurs et effectuez l'une des actions
• Sélectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4 Dans l'écran Base, sélectionnez WebDAV dans le menu Se connecter au moyen de, puis complétez si nécessaire les
5 Cliquez sur le bouton Avancé. 6 Sélectionnez l'option Activer l'extraction de fichier et entrez les informations suivantes :
Le nom et l'adresse électronique sont utilisés pour l'identification sur le serveur WebDAV et s'affiche dans le panneau Fichiers pour les contacts. 7 Cliquez sur Enregistrer.
Note: Il se peut que WebDAV ne parvienne pas à extraire correctement des fichiers incluant un contenu dynamique, parce que la méthode HTTP GET les rend au moment de leur extraction.
Dreamweaver peut se connecter à un serveur utilisant Subversion (SVN), un système de contrôle de version qui permet aux utilisateurs de collaborer à la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver n'est pas un client SVN intégral, mais il permet aux utilisateurs d'obtenir les versions les plus récentes de fichiers, d'apporter des modifications et d'envoyer les fichiers. Important: Dreamweaver CS5 utilise la bibliothèque du client Subversion 1.6.6 et Dreamweaver CS5.5 utilise la bibliothèque du client 1.6.9. Les versions plus récentes de la bibliothèque cliente Subversion ne sont pas rétrocompatibles. Notez que si vous mettez à jour une application cliente tierce (par exemple TortoiseSVN) en vue d'une utilisation avec une version ultérieure de Subversion, l'application Subversion mise à jour mettra à jour les métadonnées Subversion locales, et Dreamweaver ne pourra plus communiquer avec Subversion. Ce problème n'est pas influencé par les mises à jour du serveur Subversion, car celles-ci sont rétrocompatibles. Si vous procédez à une mise à jour vers une application cliente tierce qui fonctionne avec Subversion en version 1.7 ou ultérieure, vous devrez rechercher des mises à jour auprès d'Adobe avant de pouvoir réutiliser Subversion avec Dreamweaver. Pour plus d'informations sur ce problème, consultez le site www.adobe.com/go/dw_svn_fr. Adobe recommande d'utiliser un outil de comparaison de fichiers, développé par une tierce partie, lorsque vous utilisez des fichiers à contrôle de version SVN. Lorsque vous comparez des fichiers afin de détecter leurs différences, vous pouvez voir précisément quels types de modifications d'autres utilisateurs ont apportées. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers. Vous trouverez un didacticiel vidéo sur l'utilisation de SVN et Dreamweaver à l'adresse www.adobe.com/go/lrvid4049_dw_fr.
à obtenir des fichiers depuis le serveur SVN et à les y valider, puis à les publier sur votre serveur distant à partir de Dreamweaver. La configuration du serveur distant est tout à fait distincte de celle de SVN. Avant de pouvoir entamer cette configuration, vous devez disposer d'un accès à un serveur SVN et à un référentiel SVN. Pour plus d'informations sur SVN, consultez le site Web de Subversion à l'adresse suivante : http://subversion.apache.org/. Pour configurer la connexion SVN, procédez comme suit : 1 Choisissez Site > Gérer les sites, sélectionnez le site pour lequel vous voulez configurer le contrôle des versions, puis
Note: Si vous n'avez pas encore défini de dossiers locaux et distants pour un site Dreamweaver, vous devrez au moins configurer un site local avant de pouvoir continuer. Le site distant n'est pas nécessaire pour l'instant, mais vous devrez en définir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, reportez-vous à la section “Utilisation de sites Dreamweaver” on page 40. 2 Dans la boîte de dialogue Configuration du site, sélectionnez la catégorie Contrôle de version. 3 Sélectionnez Subversion dans la liste déroulante Accès. 4 Définissez les options d'accès comme suit :
SVN et SVN+SSH. Note: L'emploi du protocole SVN+SSH exige une configuration spéciale. Pour plus d'informations, voir www.adobe.com/go/learn_dw_svn_ssh_fr.
5 Cliquez sur Tester pour tester votre connexion, ou sur OK pour fermer la boîte de dialogue. Cliquez ensuite sur
Lorsque la connexion au serveur est établie, votre référentiel SVN peut être visualisé dans le panneau Fichiers. Pour le visualiser, vous pouvez choisir le mode Affichage du référentiel dans la liste déroulante Affichage, ou cliquez sur le bouton Fichiers du référentiel dans le panneau Fichiers développé.
Lorsque vous obtenez la version la plus récente d'un fichier depuis le référentiel SVN, Dreamweaver fusionne le contenu de ce fichier à celui de la copie locale correspondante. En d'autres termes, si un autre utilisateur a mis à jour le fichier depuis la dernière fois où vous l'avez validé, ses mises à jour sont fusionnées avec la version locale du fichier sur votre ordinateur. Si le fichier n'existe pas sur le disque dur local, Dreamweaver se contente de l'obtenir. Note: Lorsque vous obtenez pour la première fois des fichiers depuis le référentiel, travaillez avec un répertoire local vide ou un répertoire local qui ne contient pas de fichiers portant les mêmes noms que dans le référentiel. Dreamweaver ne monte pas les fichiers du référentiel sur le lecteur local à la première tentative si le lecteur local contient des fichiers dont le nom est identique à celui de fichiers dans le référentiel distant. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Effectuez l'une des opérations suivantes :
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le fichier ou le dossier qui vous intéresse, puis cliquez sur Obtenir les versions les plus récentes. Note: Vous pouvez également cliquer sur un fichier à l'aide du bouton droit de la souris puis choisir Extraire dans le menu contextuel, ou sélectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus récente. Toutefois, comme SVN ne prend pas en charge les processus d'extraction, cette méthode ne permet pas d'extraire le fichier de la façon habituelle.
1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Effectuez l'une des opérations suivantes :
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le fichier que vous voulez valider, puis cliquez sur Valider. 3 Prenez connaissance des actions dans la boîte de dialogue Archivage, apportez les éventuelles modifications
Vous pouvez modifier des actions en les sélectionnant puis en cliquant sur le bouton dans le bas de la boîte de dialogue Archivage. Deux options sont disponibles : Valider et Ignorer.
Vous pouvez mettre à jour l'état SVN d'un fichier ou d'un dossier. La mise à jour n'actualise pas l'affichage tout entier. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage du
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
Vous pouvez mettre à jour l'état SVN d'un fichier ou d'un dossier. La mise à jour n'actualise pas l'affichage tout entier. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
3 Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée
1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Effectuez l'une des opérations suivantes : • Affichez les fichiers du référentiel SVN en choisissant Affichage du référentiel dans la liste déroulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du référentiel dans le panneau Fichiers développé. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Afficher les versions. 3 Dans la boîte de dialogue Historique des versions, choisissez la ou les versions qui vous intéressent, puis effectuez
Note: Vous devez installer un outil de comparaison de fichiers, provenant d'un éditeur tiers, avant de pouvoir comparer les fichiers. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.
• Cliquez sur Marquer comme actuel pour faire de la version sélectionnée la version la plus récente du référentiel.
Le verrouillage d'un fichier dans le référentiel SVN permet d'indiquer aux autres utilisateurs que vous êtes en train de travailler dessus. Les autres utilisateurs peuvent toujours modifier le fichier localement, mais ils ne pourront valider le fichier que quand vous l'aurez déverrouillé. Lorsque vous verrouillez un fichier dans le référentiel, vous verrez que ce fichier s'accompagne d'une icône représentant un cadenas ouvert. Pour les autres utilisateurs, l'icône représente un cadenas fermé. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Effectuez l'une des opérations suivantes :
Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le fichier qui vous intéresse, puis choisissez Verrouiller ou Déverrouiller.
La présence d'un symbole « plus » bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'existe pas encore dans le référentiel SVN. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Dans le panneau Fichiers, sélectionnez le fichier à ajouter au référentiel, puis cliquez sur le bouton Archiver. 3 Assurez-vous que le fichier est sélectionné pour une validation dans la boîte de dialogue Validation, puis cliquez
• Pour déplacer un fichier, faites-le glisser vers le dossier de destination de votre site local. Lorsque vous déplacez un fichier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe Ajouter avec historique, et le marque à l'aide d'un signe Supprimer à son ancien emplacement. Lorsque vous envoyez ces fichiers, celui qui se trouve à l'ancien emplacement disparaît.
Lorsque vous copiez et collez un fichier, Dreamweaver le marque, à son nouvel emplacement, au moyen d'un signe Ajouter avec historique.
• Pour rétablir un fichier copié ou déplacé à son emplacement d'origine, cliquez sur le fichier à l'aide du bouton droit puis choisissez Contrôle de version > Rétablir.
Si votre fichier est en conflit avec un autre fichier sur le serveur, vous pouvez le modifier puis le marquer comme étant résolu. Par exemple, si vous tentez d'archiver un fichier qui est en conflit avec les modifications apportées par un autre utilisateur, SVN ne vous permettra pas de valider ce fichier. Vous pouvez obtenir la version la plus récente du fichier depuis le référentiel, apporter manuellement des modifications à votre copie de travail, puis marquer votre fichier comme étant résolu de façon à pouvoir le valider. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
Il peut s'avérer utile de travailler hors ligne, de manière à éviter tout accès au référentiel pendant d'autres activités de transfert de fichiers. Dreamweaver se connecte au référentiel SVN dès que vous lancez une activité qui exige une connexion (Obtenir les versions les plus récentes, Valider, etc.). 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
Cette commande permet de supprimer les verrous des fichiers, de manière à reprendre des activités non terminées. Utilisez cette commande pour supprimer d'anciens verrous si vous recevez des messages d'erreur vous informant que la copie de travail est verrouillée. 1 Assurez-vous d'avoir bien défini une connexion SVN. 2 Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
Lorsque vous déplacez les versions locales de fichiers ou de dossiers dans un site contrôlé par Subversion, vous risquez de créer des problèmes à d'autres utilisateurs qui pourraient se synchroniser avec le référentiel SVN. Par exemple, si vous déplacez un fichier localement et ne le validez pas dans le référentiel pendant quelques heures, il se peut qu'un autre utilisateur tente d'en obtenir la version la plus récente depuis son ancien emplacement. Veillez donc à toujours valider les fichiers sur le serveur SVN juste après les avoir déplacés localement. Les fichiers et les dossiers demeurent sur le serveur jusqu'à ce que vous les supprimiez manuellement. Ainsi, même si vous déplacez un fichier dans un dossier local différent et que vous le validez, son ancienne version reste à l'emplacement précédent sur le serveur. Pour éviter toute confusion, supprimez les anciennes copies des fichiers et dossiers que vous avez déplacés. Lorsque vous déplacez un fichier localement et que vous le validez de nouveau sur le serveur SVN, l'historique des versions du fichier est perdu.
Synchronisation des fichiers entre le site local et le site distant Après avoir créé des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre les deux sites. Note: Si votre site distant est un serveur FTP (et non un serveur en réseau), la synchronisation de vos fichiers s'effectuera en FTP. Avant de synchroniser vos sites, vous pouvez vérifier les fichiers à placer, à acquérir, à supprimer ou à ignorer. Par ailleurs, une fois la synchronisation effectuée, Dreamweaver vous indique les fichiers qui ont été mis à jour.
“Gestion des transferts de fichiers” on page 93 “Archiver et extraire des fichiers dans un dossier distant” on page 95 “Acquisition de fichiers depuis un serveur distant” on page 90 “Placement de fichiers sur un serveur distant” on page 91 “Comparaison de fichiers pour en chercher les différences” on page 105
❖ Procédez de l’une des façons suivantes dans le panneau Fichiers :
(Macintosh), puis choisissez Sélectionner > Sélectionner locaux plus récents ou Sélectionner > Sélectionner distants plus récents.
Note: Pour que cette fonctionnalité soit disponible, l'option Conserver les informations de synchronisation doit être activée dans la catégorie Distant de la boîte de dialogue Définition du site.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu (dans lequel le site, le serveur ou
2 (Facultatif) Sélectionnez des fichiers ou des dossiers précis, ou passez à l'étape suivante pour synchroniser le site
3 Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez Site > Synchroniser.
4 Dans le menu Synchroniser, réalisez une des opérations suivantes :
• Pour ne synchroniser que les fichiers sélectionnés, sélectionnez Fichiers locaux sélectionnés seulement (ou Fichiers distants sélectionnés seulement si vous avez effectué votre sélection depuis l'affichage Site distant du panneau Fichiers). 5 Cliquez sur la direction désirée pour le transfert : Placer les fichiers plus récents sur hôte distant Télécharge tous les fichiers locaux qui n'existent pas sur le serveur
Obtenir les fichiers plus récents depuis l'hôte distant Télécharge tous les fichiers distants qui n'existent pas localement
Placer et obtenir les fichiers plus récents Transfère, selon le cas, les versions les plus récentes de tous les fichiers sur le
6 Indiquez si les fichiers qui sont présents sur le site de destination mais n'ont pas d'équivalent sur le site d'origine
Si vous avez sélectionné Placer les fichiers plus récents sur hôte distant et que vous activez l'option d'effacement, tous les fichiers du site distant qui n'ont pas d'équivalent sur le site local sont supprimés. Si vous avez sélectionné Obtenir les fichiers plus récents depuis l'hôte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui n'ont pas d'équivalent sur le site distant sont supprimés. 7 Cliquez sur Aperçu.
Si la version la plus récente de chacun des fichiers sélectionnés figure déjà aux deux endroits et que rien n'a besoin d'être supprimé, un message d'avertissement vous signale qu'aucune synchronisation n'est nécessaire. Dans le cas contraire, la boîte de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acquérir, supprimer et ignorer) pour ces fichiers avant d'exécuter la synchronisation. 8 Vérifiez les différentes actions à effectuer.
Comparer L'action Comparer ne fonctionne que si vous avez installé et spécifié un outil de comparaison de fichiers
Marquer les fichiers comme synchronisés Cette option vous permet d'indiquer que le ou les fichiers sélectionnés sont
10 Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les détails de la synchronisation
Comparaison des fichiers locaux et distants Dreamweaver peut utiliser des outils de comparaison de fichiers (également appelés « outils diff ») afin de comparer le code des versions locale et distante du même fichier, deux fichiers distants différents ou deux fichiers locaux différents. La comparaison des versions locale et distante est utile si vous travaillez localement sur un fichier et que vous suspectez que sa copie sur le serveur a été modifiée. Sans quitter Dreamweaver, vous pouvez afficher et fusionner les modifications distantes dans votre version locale avant de placer le fichier sur le serveur. La comparaison de deux fichiers locaux ou de deux fichiers distants est également utile si vous conservez des versions précédentes, renommées de vos fichiers. En cas d'oubli des modifications apportées à un fichier d'une version précédente, effectuez une comparaison rapide. Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre système. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de « comparaison de fichiers » ou « diff ». Dreamweaver fonctionne avec la plupart des outils tiers.
1 Installez l'outil de comparaison de fichiers sur le même système que Dreamweaver. 2 Dans Dreamweaver, ouvrez la boîte de dialogue Préférences en sélectionnant Edition > Préférences (Windows) ou
3 Effectuez l'une des opérations suivantes :
• Sur Macintosh, cliquez sur le bouton Parcourir et sélectionnez l'outil ou le script qui lance l'outil de comparaison de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers). Les outils ou les scripts de lancement se trouvent généralement dans le dossier /usr/bin de votre Macintosh. Par exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier /usr/bin et sélectionnez opendiff, l'outil qui lance FileMerge. Le tableau suivant répertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement de leurs outils ou de leurs scripts de lancement sur votre disque dur :
Note: Les résultats effectivement affichés dépendent de l'outil diff utilisé. Consultez le guide d'utilisation de votre outil pour comprendre comment interpréter ces résultats.
Vous pouvez comparer deux fichiers situés à n'importe quel endroit sur votre ordinateur. 1 Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec
Pour choisir des fichiers se trouvant à l'extérieur de votre site défini, accédez à votre disque local dans le menu gauche contextuel du panneau Fichiers puis sélectionnez-les. 2 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Compare Local Files
Note: Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers sélectionnés. L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Vous pouvez comparer deux fichiers situés sur votre serveur distant. Vous devez définir un site Dreamweaver avec des paramètres distants avant de pouvoir effectuer cette tâche. 1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
2 Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux
3 Cliquez avec le bouton droit de la souris sur l'un des fichiers sélectionnés puis choisissez Comparer les fichiers
Note: Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers sélectionnés. L'outil de comparaison de fichiers démarre et compare les deux fichiers.
Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour cela, vous devez d'abord définir un site Dreamweaver avec des paramètres distants. ❖ Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur un fichier local et choisissez Comparer avec
Note: Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier local.
Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez définir un site Dreamweaver avec des paramètres distants avant d'effectuer cette tâche. 1 Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu
2 Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparer avec fichier local
Note: Si votre souris n'est dotée que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier.
Vous pouvez effectuer une comparaison entre un fichier ouvert dans Dreamweaver et son homologue sur le serveur distant. ❖ Dans la fenêtre de document, choisissez Fichier > Comparer avec distants.
Vous pouvez également cliquer avec le bouton droit de la souris sur l'onglet de document situé en haut de la fenêtre de document et choisir Comparer avec distants dans le menu contextuel.
Si vous modifiez un fichier localement et essayez ensuite de le télécharger vers votre serveur distant, Dreamweaver vous avertit si la version distante du fichier a été changée. Vous avez la possibilité de comparer les deux fichiers avant de télécharger le fichier et d'écraser la version distante. Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre système et le définir dans Dreamweaver. 1 Une fois que vous avez modifié un fichier dans un site Dreamweaver, placez le fichier (Site > Placer) sur votre site
Si la version distante du fichier a été modifiée, vous recevrez une notification avec la possibilité de visualiser les différences. 2 Pour visualiser les différences, cliquez sur le bouton Comparer.
Si vous n'avez pas spécifié d'outil de comparaison de fichiers, un message vous invite à le faire. 3 Une fois que vous avez revu ou fusionné les changements dans l'outil, vous pouvez passer à l'opération de placement
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les fichiers de votre site avec Dreamweaver.
2 Complétez les options de la boîte de dialogue Synchroniser les fichier, puis cliquez sur Aperçu.
3 Dans la liste, sélectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'icône avec
Note: Le fichier doit être basé sur du texte (fichier HTML ou ColdFusion). Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier sélectionné.
“Synchronisation de fichiers” on page 103
Restauration de fichiers (utilisateurs de Contribute) Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilité Adobe Contribute est activée. Note: Contribute doit être installé sur le même ordinateur que Dreamweaver. La restauration des fichiers doit être activée au niveau des paramètres administratifs de Contribute. Pour plus d'informations, voir Administration de Contribute. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur un
2 Sélectionnez Restaurer la page.
3 Sélectionnez la version de la page à restaurer et cliquez sur Restaurer.
“Préparation d'un site à utiliser avec Contribute” on page 61 “Suppression, déplacement ou modification du nom d'un fichier distant sur un site Contribute” on page 63
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines opérations (acquisition et placement, par exemple). Vous pouvez également voiler tous les fichiers d'un type précis (JPEG, FLV, XML, etc.) pour les opérations du site. Comme Dreamweaver conserve en mémoire tous les paramètres définis pour chaque site, vous n'avez pas à sélectionner le type de fichier voulu chaque fois que vous travaillez sur un site. Par exemple, si vous travaillez sur un site de grande taille et que vous ne voulez pas envoyer vos fichiers multimédias tous les jours, vous pouvez utiliser la fonction de voilage pour voiler votre dossier multimédia. Dreamweaver exclura les fichiers de ce dossier de toutes les opérations que vous effectuez sur le site. Vous pouvez voiler des fichiers et des dossiers sur le site distant ou local. Le voilage exclut les fichiers et dossiers voilés des opérations suivantes :
• Génération de rapports • Recherche des fichiers locaux et distants les plus récents • Réalisation d'opérations portant sur le site entier, telles que la vérification et la modification des liens • Synchronisation • Utilisation du contenu du panneau Actifs • Mise à jour des modèles et des bibliothèques Note: Vous pouvez toujours effectuer une opération sur un dossier ou un fichier voilé précis en le sélectionnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un dossier annule le voilage. Note: Dreamweaver exclut les modèles et les éléments de bibliothèque voilés lors des opérations d'acquisition et de placement de fichiers seulement. Dreamweaver n'exclut aucun de ces éléments lors des opérations par lots, car cela pourrait les désynchroniser par rapport à leurs instances.
Le voilage vous permet de définir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de certaines opérations (acquisition et placement, par exemple). Cette option est activée par défaut. Vous pouvez le désactiver définitivement ou provisoirement afin d'effectuer une opération sur tous les fichiers, y compris les fichiers voilés. Lorsque vous désactivez le voilage sur un site, cela supprime tous les voiles des fichiers voilés. Lorsque vous le réactivez, tous les fichiers qui étaient précédemment voilés retrouvent cet état. Note: Vous pouvez également utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les fichiers, mais cela ne désactive pas le voilage. De plus, cette option ne vous permet pas de rétablir automatiquement le voilage de tous les dossiers et fichiers qui étaient auparavant voilés ; il vous faut ensuite redéfinir manuellement le voilage de chaque dossier, fichier et type de fichier concerné. 1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers). 2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis procédez de
Sélectionnez ou désélectionnez, puis activez ou désactivez l'option Voiler les fichiers se terminant avec, selon que vous souhaitez ou non activer le voilage de certains types de fichier. Saisissez ou supprimez les suffixes de fichier dans la zone de texte afin d'indiquer le type de fichier pour lequel activer ou désactiver le voilage.
Il est possible de voiler des fichiers et des dossiers spécifiques, mais pas tous les fichiers et dossiers existants ni un site entier. Il est toutefois possible de voiler plusieurs fichiers et dossiers simultanément. 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée. 2 Sélectionnez les dossiers ou fichiers auxquels appliquer un voile ou le supprimer. 3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
Une ligne rouge est présente ou non sur l'icône du fichier ou du dossier, pour indiquer qu'il est voilé ou dévoilé. Note: Vous pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en le sélectionnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un dossier annule le voilage.
Vous pouvez indiquer des types de fichier à voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine manière. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de fichier indiqués ne doivent pas nécessairement correspondre à des extensions de fichier ; il peut s'agir de n'importe quel élément apparaissant à la fin d'un nom de fichier.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
3 Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier à voiler dans la zone de saisie, puis
Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site. Pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule. Dans le panneau Fichiers, une ligne rouge apparaît sur les fichiers concernés pour indiquer qu'ils sont voilés. Certains logiciels créent des fichiers de sauvegarde se terminant par un suffixe donné, tel que .bak. Vous pouvez voiler ces fichiers. Note: Vous pouvez toujours effectuer une opération sur un fichier ou un dossier voilé précis en le sélectionnant dans le panneau Fichiers, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un fichier ou un dossier annule le voilage.
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
Vous pouvez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule opération. Comme il est impossible d'annuler ce type d'opération, vous ne pourrez pas rétablir le voile de tous les éléments qui étaient auparavant voilés. Vous devrez revoiler les éléments un par un. Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, désactivez le voilage sur le site. 1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel la fonction de voilage est activée. 2 Sélectionnez un fichier ou un dossier quelconque du site. 3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis
Note: Cette opération désactive également l'option Voiler les fichiers se terminant avec de la catégorie Voilage de la boîte de dialogue Définition du site. Les lignes rouges sur les icônes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers du site ne sont plus voilés.
Design Notes A propos des Design Notes Les Design Notes sont des notes créées pour un fichier donné. Les Design Notes sont associées au fichier qu'elles décrivent, mais stockées dans un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont jointes des Design Notes, car une icône spécifique s'affiche dans la colonne Notes. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document d'un site dans un autre, vous pouvez ajouter à ce dernier des Design Notes contenant un commentaire expliquant que le document original se trouve dans le dossier de l'autre site. Les Design Notes permettent également de conserver des informations confidentielles, qu'il est impossible de laisser dans un document pour des raisons de sécurité, par exemple des notes sur la façon dont un devis a été calculé, dont une configuration a été élaborée ou encore sur les facteurs de marketing qui ont influencé une décision de production.
“Lancement d'un éditeur externe pour des fichiers multimédias” on page 273
Les Design Notes sont associées à un fichier mais sont conservées dans un fichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, telles que des commentaires sur l'état des fichiers ou le nom des fichiers source des images. L'activation et la désactivation des Design Notes pour un site donné s'effectuent depuis la catégorie Design Notes de la boîte de dialogue Définition du site. Lorsque vous activez les Design Notes, vous pouvez également décider de les partager avec d'autres utilisateurs. 1 Choisissez Site > Gérer les sites. 2 Dans la boîte de dialogue Gérer les sites, sélectionnez un site puis cliquez sur Modifier. 3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie
4 Sélectionnez Gérer Design Notes pour activer les Design Notes (désélectionnez cette option pour les désactiver). 5 Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associés au site, cliquez sur Nettoyer puis sur
Note: La commande Nettoyer Design Notes ne supprime que les fichiers MNO (Design Notes). Elle ne supprime pas le dossier _notes ni le fichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fichier dwsync.xml pour gérer les informations relatives à la synchronisation du site. 6 Activez l'option Activer la fonction Télécharger les Design Notes pour les partager afin de télécharger les Design
Lorsque vous placez ou acquérez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design Notes associé.
Association de Design Notes à un fichier Vous pouvez créer un fichier de Design Notes pour chaque document ou modèle de votre site. Vous pouvez également créer des Design Notes pour des applets, des contrôles ActiveX, des images, du contenu Flash, des objets Shockwave ainsi que des champs d'image figurant dans vos documents. Note: Si vous ajoutez des Design Notes à un fichier modèle, les documents que vous créez à partir du modèle n'héritent pas des Design Notes. 1 Effectuez l'une des opérations suivantes :
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes. Note: Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acquérir, puis le sélectionner dans le dossier local. 2 Dans le menu Etat de l'onglet Informations élémentaires, sélectionnez un état pour le document. 3 Cliquez sur l'icône de date (au-dessus de la zone de texte Notes) pour insérer la date du jour dans les notes. 4 Entrez des commentaires dans la zone Notes. 5 Activez l'option Afficher à l'ouverture du fichier afin que le fichier de Design Notes apparaisse à chaque ouverture
6 Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire clé/valeur ; sélectionnez une
Par exemple, vous pouvez créer une clé Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone Valeur). 7 Cliquez sur OK pour enregistrer les notes.
“Acquisition et placement de fichiers depuis ou vers votre serveur” on page 89 “Archiver et extraire des fichiers dans un dossier distant” on page 95
Après avoir associé des Design Notes à un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son état ou le supprimer.
Note: Pour afficher les icônes jaunes des Design Notes, choisissez Site > Gérer les sites > [nom de votre site] > Modifier > Paramètres avancés > Colonnes mode Fichier. Sélectionnez Notes dans la liste du panneau et choisissez l'option Afficher. Lorsque vous cliquez sur le bouton Développer de la barre d'outils Fichiers pour afficher à la fois le site local et le site distant, votre site local contient une colonne Notes qui affiche une icône de note jaune pour tout fichier contenant une Design Note.
1 Ouvrez les Design Notes du fichier ou de l'objet concerné (voir la procédure ci-dessus). 2 Cliquez sur l'onglet Toutes les infos. 3 Cliquez sur le bouton Plus (+). 4 Dans le champ Nom, tapez état. 5 Dans le champ Valeur, tapez le nom du nouvel état.
6 Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'état apparaît dans le menu contextuel Etat.
1 Choisissez Site > Gérer les sites. 2 Sélectionnez le site et cliquez sur Modifier. 3 Dans la boîte de dialogue Définition du site, sélectionnez la catégorie Design Notes dans la liste de gauche. 4 Cliquez sur le bouton Nettoyer.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associé un fichier de Design Notes, Dreamweaver supprime également le fichier de Design Notes. En général, il ne peut donc exister de fichiers de Design Notes orphelins que si vous supprimez ou renommez un fichier à l'extérieur de Dreamweaver. Note: Si vous désactivez l'option Gérer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les fichiers de Design Notes du site.
Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs ciblés, qu'il n'y a pas de liens rompus et que les pages ne sont pas trop longues à télécharger. Vous pouvez également tester l'ensemble de votre site et y régler les problèmes éventuels en effectuant un rapport de site. Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive : 1. Assurez-vous que les pages fonctionnent dans les navigateurs visés.
2. Affichez vos pages dans différents navigateurs et sur différentes plates-formes.
3. Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient).
4. Contrôlez la taille de vos pages et leur durée de téléchargement.
5. Effectuez quelques rapports sur le site pour tester et dépanner le site entier.
6. Validez votre code pour détecter toute erreur de balise ou de syntaxe. 7. Continuez à mettre le site à jour et à en assurer la maintenance après sa publication.
8. Consultez les forums de discussion.
Vous trouverez un didacticiel consacré au dépannage des problèmes de publication à l'adresse www.adobe.com/go/vid0164_fr.
“Correction de liens rompus” on page 302 “Test de liens dans Dreamweaver” on page 296 “Application du comportement Vérifier le navigateur” on page 369 “Validation des documents XML” on page 343 “Vérification de la compatibilité du navigateur” on page 342 Didacticiel consacré au dépannage des problèmes de publication
Vous pouvez exécuter des rapports du site sur les attributs de flux de travaux ou HTML. Vous pouvez également utiliser la commande Rapports pour vérifier les liens de votre site. Les rapports sur le déroulement du travail peuvent améliorer la collaboration entre les membres d'une équipe Web. Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont associés à des Design Notes et quels fichiers ont été modifiés récemment. Vous pouvez définir davantage les rapports des Design Notes en spécifiant des paramètres nom/valeur. Note: Vous devez avoir défini une connexion à un site distant pour exécuter des rapports sur le déroulement du travail. Les rapports HTML vous permettent de compiler et de générer des rapports pour plusieurs attributs HTML. Vous pouvez contrôler les balises de polices imbriquées combinables, les textes secondaires manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans nom. Après avoir exécuté un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un modèle, une base de données ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web. Note: Vous pouvez également ajouter différents types de rapport à Dreamweaver via le site Web d'Adobe Dreamweaver Exchange.
“Rapports dans Dreamweaver” on page 22 “Test de liens dans Dreamweaver” on page 296 “Ajout et gestion d'extensions dans Dreamweaver” on page 38
1 Choisissez Site > Rapports. 2 Sélectionnez l'objet du rapport dans le menu Rapport sur, puis définissez l'un des types de rapport à exécuter
Vous ne pouvez pas exécuter un rapport sur Fichiers sélectionnés dans le site si vous n'avez pas auparavant sélectionné des fichiers dans le panneau Fichiers.
contraire, ignorez cette étape. Note: Si vous avez sélectionné plusieurs rapports de déroulement de travail, vous devez cliquer sur le bouton Paramètres de rapport pour chaque rapport. Sélectionnez un rapport, cliquez sur Paramètres de rapport et entrez les paramètres ; puis recommencez pour les autres rapports de déroulement de travail. Extrait par Crée un rapport qui dresse la liste de tous les documents extraits par un membre spécifique de l'équipe.
Design Notes Crée un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents sélectionnés ou le site. Entrez une ou plusieurs paires nom/valeur, puis sélectionnez des valeurs de comparaison dans les menus contextuels correspondants. Cliquez sur OK pour revenir à la boîte de dialogue Rapports. Modifiés récemment Crée un rapport qui dresse la liste des fichiers qui ont été modifiés durant une période donnée. Entrez les plages de dates et l'emplacement des fichiers à afficher.
Balises de polices imbriquées combinables Crée un rapport qui dresse la liste de toutes les balises de polices
Par exemple, <font color="#FF0000"><font size="4">STOP!</font></font> est inclus dans le rapport. Texte secondaire manquant Crée un rapport qui dresse la liste de toutes les balises img qui ne possèdent pas de texte
Le texte secondaire apparaît à la place des images dans les navigateurs qui affichent seulement du texte ou configurés pour télécharger les images manuellement. Les lecteurs d'écran lisent le texte secondaire et certains navigateurs affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image. Balises redondantes imbriquées Crée un rapport répertoriant les balises à nettoyer.
Balises vides amovibles Crée un rapport qui dresse la liste de toutes les balises vides pouvant être supprimées afin de
Par exemple, vous pouvez avoir supprimé un élément ou une image en Affichage de code, mais laissé les balises s'appliquant à cet élément. Documents sans nom Crée un rapport qui dresse la liste de tous les documents sans titre trouvés conformément aux
5 Cliquez sur Exécuter pour créer le rapport.
Une liste de résultats apparaît dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
1 Exécuter un rapport (voir la procédure précédente).
Vous pouvez trier les résultats par nom de fichier, numéro de ligne ou description. Vous pouvez également exécuter plusieurs rapports et garder les différents rapports ouverts.
Rapports du site pour obtenir la description du problème.
Note: Si vous vous trouvez en mode Création, Dreamweaver passe à un affichage à deux volets et indique le problème identifié directement dans le code. 3 Cliquez sur Enregistrer le rapport.
Après avoir exécuté les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signalées.
Vous pouvez utiliser Adobe® Dreamweaver® CS5 pour assurer le suivi des actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperçu. Vous pouvez également faire glisser un actif directement pour l'insérer dans une page de votre document actuel. Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des actifs dans une application, telle que Adobe® Fireworks® ou Adobe® Flash®, les recevoir d'un collègue, les copier à partir d'un CD-ROM de graphiques ou encore les copier à partir d'un site Web d'images. Dreamweaver permet également d'accéder à deux types d'actifs spéciaux : les bibliothèques et les modèles. Tous deux sont des actifs liés : lorsque vous modifiez un élément de bibliothèque ou un modèle, Dreamweaver met à jour tous les documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour définir la conception de zones plus larges, utilisez plutôt un modèle.
“A propos des modèles Dreamweaver” on page 407
Une bibliothèque est un fichier Dreamweaver spécial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer dans vos pages Web. Les actifs présents dans une bibliothèque portent le nom d'éléments de bibliothèque. Les éléments pouvant être stockés dans une bibliothèque sont notamment les images, les tableaux, les sons et les fichiers créés à l'aide d'Adobe Flash. Vous pouvez mettre à jour automatiquement toutes les pages qui utilisent un élément de bibliothèque chaque fois que vous modifiez cet élément. Par exemple, supposons que vous construisiez un site de grande taille pour une société qui souhaite qu'un slogan figure sur chaque page. Vous pouvez créer un élément de bibliothèque qui contient le slogan et utiliser cet élément dans chaque page. Si le slogan est modifié, vous pouvez modifier l'élément de bibliothèque et mettre à jour automatiquement chaque page qui l'utilise. Dreamweaver stocke les éléments de bibliothèque dans un dossier nommé Library, au sein du dossier racine local de chaque site. Chaque site possède sa propre bibliothèque. Vous pouvez créer un élément de bibliothèque à partir de n'importe quel élément dans la section body d'un document, notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des éléments ActiveX, des barres de navigation et des images. Pour les éléments liés tels que les images, la bibliothèque enregistre uniquement une référence à l'élément. Le fichier d'origine doit rester à l'emplacement spécifié pour que l'élément de la bibliothèque fonctionne correctement.
Lorsque vous utilisez un élément de bibliothèque, Dreamweaver insère un lien vers cet élément dans la page Web au lieu d'insérer l'élément lui-même. Cela signifie que Dreamweaver insère une copie du code source HTML pour cet élément dans le document et ajoute un commentaire HTML contenant une référence à l'élément externe d'origine. Il s'agit d'une référence externe qui rend la mise à jour automatique possible. Lorsque vous créez un élément de bibliothèque qui comporte un élément auquel est attaché un comportement Dreamweaver, Dreamweaver copie l'élément et son gestionnaire d'événements (l'attribut qui spécifie l'événement déclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action à appeler lorsque l'événement se produit) dans le fichier de l'élément de bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élément de la bibliothèque. Au lieu de cela, lorsque vous insérez l'élément de bibliothèque dans un document, Dreamweaver insère automatiquement les fonctions JavaScript appropriées dans la section head de ce document (si elles ne s'y trouvent pas déjà). Note: Si vous rédigez manuellement le code JavaScript (c'est-à-dire si vous le créez sans utiliser de comportements Dreamweaver), vous pouvez l'intégrer à votre élément de bibliothèque à l'aide du comportement Appel JavaScript pour exécuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour exécuter le code, le code n'est pas conservé dans l'élément de bibliothèque. La modification des comportements dans les éléments de bibliothèque doit respecter certaines conditions. Les éléments de bibliothèque ne peuvent pas contenir de feuilles de style, car le code associé à ces éléments figure dans la section HEAD.
“Modification d'un comportement dans un élément de bibliothèque” on page 131
Présentation du panneau Actifs Utilisez le panneau Actifs (Fenêtre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associés au document actif dans la fenêtre du document. Note: Vous devez définir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.
Liste Site Elle présente tous les actifs de votre site, y compris les couleurs et les adresses URL utilisées dans les
Liste Favoris Présente uniquement les actifs que vous avez sélectionnés de façon explicite.
Note: La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listes. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris. Dans les deux listes, les actifs appartiennent à l'une des catégories suivantes : Images
❖ Sélectionnez l'actif dans le panneau Actifs.
❖ Cliquez sur une icône de catégorie dans le côté gauche du panneau Actifs.
❖ Cliquez sur une en-tête de colonne.
JPEG, etc.), cliquez sur l'en-tête de la colonne Type.
❖ Faites glisser la ligne qui sépare deux en-têtes de colonne.
❖ Faites glisser la barre de séparation (entre la zone d'aperçu et la liste des actifs) vers le haut ou vers le bas.
La création de la liste Site peut prendre quelques secondes du fait que Dreamweaver doit d'abord lire le cache du site. Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n'actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous devez recréer le cache du site pour actualiser le panneau Actifs. Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donnée du site, ou lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n'ayant pas encore été utilisée dans le site, les modifications ne sont répercutées dans le panneau Actifs qu'une fois la liste Site actualisée.
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur Actualiser la liste du site.
Code ou en mode Création, ou bien en utilisant le bouton Insérer du panneau. Vous pouvez insérer des couleurs et des URL ou les appliquer au texte sélectionné en mode Création Les URL peuvent également être appliquées aux autres éléments, tels que des images, en mode Création. 1 En mode Création, placez le point d'insertion à l'endroit où l'actif doit apparaître. 2 Dans le panneau Actifs, sélectionnez l'un des boutons de catégorie d'actif situés à gauche.
3 Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l'actif.
élément. 4 Effectuez l'une des opérations suivantes :
Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tête de la fenêtre de document. Si cette zone n'est pas visible, choisissez Affichage > Contenu de l'en-tête.
Si l'actif inséré est une couleur, elle s'applique au texte qui figure après le point d'insertion.
Le panneau Actifs indique les couleurs que vous avez déjà appliquées aux différents éléments du site, tels que du texte, des bordures de tableau, des arrière-plans, etc. 1 Sélectionnez du texte dans le document. 2 Dans le panneau Actifs, sélectionnez la catégorie Couleurs
dans la vue Sites ou Favoris, selon l'endroit où l'URL est
Note: Les URL des fichiers de votre site sont stockés, par défaut, dans le mode Sites. La vue Favoris contient les URL que vous avez ajoutés manuellement. 3 Sélectionnez l'URL. 4 Effectuez l'une des opérations suivantes :
• Sélectionnez l'URL et cliquez sur Insérer.
• Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée pour ajouter un actif individuel à la sélection (qu'il soit adjacent ou non à la sélection existante). Cliquez en maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée sur un actif sélectionné pour le désélectionner.
Lorsque vous modifiez un actif dans le panneau Actifs, le comportement varie en fonction du type d'actif. Pour certains actifs, tels que les images, vous utilisez un éditeur externe qui s'ouvre automatiquement si vous avez défini un éditeur pour ce type d'actif. Vous ne pouvez modifier les couleurs et les URL que dans la liste Favoris. Lorsque vous modifiez des modèles et des éléments de bibliothèque, vous effectuez les modifications dans Dreamweaver. 1 Dans le panneau Actifs, procédez de l'une des manières suivantes :
• Sélectionnez l'actif, puis cliquez sur le bouton Modifier
Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap.
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel. Pour utiliser un actif du site actuel dans un autre site, il est nécessaire de le copier. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou un dossier Favoris entier en une seule opération. Vous devrez peut-être localiser le fichier dans le panneau Fichiers correspondant à un actif dans le panneau Actifs avant de transférer l'actif depuis ou vers votre site distant. Note: Le panneau Fichiers peut afficher un site différent de celui présenté par le panneau Actifs, car le panneau Actifs est associé au document actif.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'icône ou
Note: L'option Repérer dans le site n'est pas disponible pour les couleurs et les URL, qui ne correspondent pas à des fichiers dans le site. Le panneau Fichiers s'ouvre, avec le fichier d'actif sélectionné. La commande Repérer dans le site repère le fichier correspondant à l'actif lui-même, et non les fichiers qui utilisent cet actif.
1 Dans le panneau Actifs, sélectionnez la catégorie de l'actif que vous souhaitez copier. 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
Note: Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels. Les actifs sont copiés dans leurs emplacements correspondants dans le site cible. Dreamweaver crée de nouveaux dossiers dans la hiérarchie du site cible en fonction des besoins. Les actifs sont également ajoutés à la liste Favoris du site cible. Note: Si l'actif que vous avez copié est une couleur ou une URL, il s'affiche uniquement dans la liste Favoris du site cible. Du fait que les couleurs et les URL ne correspondent pas à des fichiers, il n'existe aucun fichier à copier dans l'autre site.
Gestion des actifs favoris La liste complète de tous les actifs reconnus peut devenir encombrée pour certains sites volumineux. Vous pouvez ajouter des actifs fréquemment utilisés à une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mémoriser leur objet et les retrouver aisément dans le panneau Actifs. Note: Les actifs favoris ne sont pas stockés en tant que fichiers distincts sur le disque. Ils font référence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher dans la liste Favoris. La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tâches que vous pouvez réaliser uniquement dans la liste Favoris.
Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site dans le panneau Actifs. L'ajout d'une couleur ou d'une URL à la liste Favoris nécessite une étape supplémentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou URL à la liste Site. Cette dernière contient uniquement les actifs déjà utilisés dans le site. Note: Il n'existe pas de liste Favoris pour les modèles et les éléments de bibliothèque.
“Utilisation du sélecteur de couleur” on page 229
Effectuez l'une des opérations suivantes :
à une catégorie Favoris. Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris URL, selon qu'un lien est attaché au texte. Vous pouvez ajouter uniquement les éléments qui correspondent aux catégories du panneau Actifs.
1 Dans le panneau Actifs, sélectionnez la catégorie Couleurs ou URL. 2 Sélectionnez l'option Favoris en haut du panneau. 3 Cliquez sur le bouton Nouvelle couleur ou
1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau. 2 Sélectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris. 3 Cliquez sur le bouton Supprimer des favoris
Vous pouvez attribuer des surnoms (par exemple, CouleurArrièrePlanPage au lieu de #999900) uniquement aux actifs de la liste Favoris. La liste Site retient leur nom de fichier réel (ou leur valeur, dans le cas de couleurs et d'URL). 1 Dans le panneau Actifs, (Fenêtre > Actifs), sélectionnez la catégorie qui contient votre actif.
1 Dans le panneau Actifs, sélectionnez l'option Favoris en haut du panneau. 2 Cliquez sur le bouton Nouveau dossier Favoris
4 Faites glisser les actifs vers le dossier.
Création d'un élément de bibliothèque Les éléments de bibliothèque sont des éléments que vous souhaitez réutiliser ou mettre à jour fréquemment dans l'ensemble de votre site Web.
“A propos des éléments de bibliothèque” on page 119
1 Dans la fenêtre de document, sélectionnez une partie d'un document que vous souhaitez enregistrer comme
2 Effectuez l'une des opérations suivantes :
• Cliquez sur le bouton Nouvel élément de bibliothèque
3 Tapez un nom pour le nouvel élément de la bibliothèque, puis appuyez sur la touche Entrée (Windows) ou Retour
Dreamweaver enregistre chaque élément de bibliothèque dans un fichier séparé (avec l'extension de fichier .lbi), dans le dossier Library du dossier racine local du site.
2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque 3 Cliquez sur le bouton Nouvel élément de bibliothèque
Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le document avec une référence à l'élément de bibliothèque. 1 Placez le point d'insertion dans la fenêtre de document. 2 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
Lorsque vous modifiez un élément de bibliothèque, vous pouvez choisir de mettre à jour tous les documents qui utilisent cet élément. Si vous choisissez de ne pas les mettre à jour, les documents restent associés à l'élément de bibliothèque. Il est toujours possible de les mettre à jour ultérieurement. Vous pouvez renommer des éléments pour rompre leur lien avec des documents ou des modèles, supprimer des éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant. Note: Le panneau Styles CSS n'est pas disponible lorsque vous éditez un élément de bibliothèque étant donné que ces derniers peuvent uniquement contenir des éléments body et que le code CSS (feuille de style en cascade) est inséré dans la section head d'un document. La boîte de dialogue Propriétés de la page est également indisponible : en effet, un élément de bibliothèque ne peut pas comporter de balise body ni d'attributs de cette balise.
1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
3 Vous pouvez soit cliquer sur le bouton Modifier
4 Apportez les modifications et enregistrez-les.
❖ Choisissez Modifier > Modèles > Mettre à jour la page en cours.
1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages. 2 Dans le menu déroulant Regarder dans, indiquez ce qui doit être mis à jour :
3 Sous Mettre à jour, assurez-vous que l'option Eléments de bibliothèque est activée.
4 Cliquez sur Démarrer.
Dreamweaver génère un rapport qui indique si les fichiers ont été mis à jour correctement et qui contient également d'autres informations.
1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
5 indiquez si vous souhaitez mettre à jour les documents qui utilisent l'élément en choisissant soit Mettre à jour, soit
Lorsque vous supprimez un élément de bibliothèque, Dreamweaver supprime l'élément de la bibliothèque mais ne modifie pas le contenu des documents qui l'utilisent. 1 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
1 Sélectionnez une instance de l'élément dans un de vos documents. 2 Cliquez sur le bouton Créer à nouveau de l'inspecteur Propriétés (Fenêtre > Propriétés).
Vous pouvez personnaliser la couleur de surbrillance des éléments de bibliothèque et afficher ou masquer la surbrillance en définissant des préférences de surbrillance.
“Utilisation du sélecteur de couleur” on page 229
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste située à gauche dans la boîte de dialogue Préférences. 3 Cliquez dans la case de couleur Eléments de la bibliothèque et sélectionnez une couleur de surbrillance à l'aide du
4 Activez l'option Afficher pour afficher la couleur de surbrillance dans la fenêtre de document. 5 Cliquez sur OK.
❖ Pour afficher la mise en surbrillance, sélectionnez Affichage > Assistances visuelles > Eléments invisibles. Pour
L'inspecteur Propriétés vous permet d'ouvrir un élément de bibliothèque pour le modifier, détacher un élément sélectionné de son fichier source ou remplacer un élément par celui sélectionné actuellement. 1 Sélectionnez un élément de bibliothèque dans un document. 2 Sélectionnez l'une des options suivantes dans l'inspecteur Propriétés (Fenêtre > Propriétés) : Src Indique le nom de fichier et l'emplacement du fichier source de l'élément de la bibliothèque. Vous ne pouvez pas
Ouvrir Ouvre le fichier source de l'élément de bibliothèque pour modification. Cela revient à sélectionner l'élément
Détacher de l'original Brise le lien entre l'élément de bibliothèque sélectionné et son fichier source. Vous pouvez
Créer à nouveau Remplace l'élément d'origine par la sélection en cours. Utilisez cette option pour recréer les éléments de bibliothèque si l'élément de bibliothèque d'origine manque ou a été accidentellement supprimé.
1 Sélectionnez un élément de la bibliothèque dans le document actif. 2 Dans l'inspecteur Propriétés, cliquez sur Détacher de l'original (Fenêtre > Propriétés).
Pour modifier un comportement dans un élément de bibliothèque, vous devez tout d'abord insérer l'élément dans un document, puis le rendre modifiable dans ce document. Une fois les changements apportés, vous pouvez recréer l'élément de bibliothèque en remplaçant l'élément de la bibliothèque par l'élément modifié de votre document. 1 Ouvrez un document contenant l'élément de la bibliothèque.
2 Sélectionnez l'élément de bibliothèque et cliquez sur Détacher de l'original dans l'inspecteur Propriétés
3 Sélectionnez l'élément auquel est attaché le comportement. 4 Dans le volet Comportements (Fenêtre > Comportements), double-cliquez sur l'action que vous voulez modifier. 5 Dans la boîte de dialogue qui s'affiche, effectuez vos modifications et cliquez sur OK. 6 Dans le panneau Actifs, sélectionnez la catégorie Bibliothèque
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel élément de bibliothèque
10 Pour mettre à jour l'élément de bibliothèque dans les autres documents de votre site, choisissez Modifier >
11 Dans le menu déroulant Regarder dans, sélectionnez Fichiers utilisant. 12 Dans le menu déroulant adjacent, sélectionnez le nom de l'élément de bibliothèque que vous venez de créer. 13 Sous Mettre à jour, vérifiez que l'option Eléments de bibliothèque est sélectionnée, puis cliquez sur Démarrer. 14 Une fois les mises à jour terminées, cliquez sur Fermer.
“Utilisation des comportements JavaScript” on page 353
Web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous séparez le contenu de la présentation. Le contenu de votre page (le code HTML) réside dans le fichier HTML, tandis que les règles CSS qui définissent la présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans la section head). La séparation du contenu et de la présentation facilite considérablement la gestion de l'aspect de votre site à partir d'un point central car vous n'avez pas besoin de mettre à jour les propriétés de toutes les pages chaque fois que vous souhaitez apporter une modification. La séparation du contenu et de la présentation se traduit également par un code HTML simplifié et mieux structuré qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problèmes d'accessibilité (par exemple, qui utilisent des lecteurs d'écran). CSS vous offre une plus grande souplesse et une plus grande maîtrise de l'aspect de votre page. Les feuilles de style CSS vous permettent de contrôler de nombreuses propriétés de texte, notamment les polices de caractères et les tailles de police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d'arrière-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrôler vos polices de caractères, vous vous assurez d'un traitement plus cohérent de la mise en page et de l'aspect de votre page dans différents navigateurs. Outre le formatage du texte, CSS permet de gérer le format et le positionnement des blocs d'éléments d'une page Web. Un élément de niveau bloc est un contenu autonome, généralement séparé par une nouvelle ligne dans le code HTML, et formaté visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes des éléments de niveau bloc sur une page Web. Vous pouvez définir des marges et des bordures pour les éléments de niveau bloc, les placer dans un emplacement spécifique, leur ajouter une couleur d'arrière-plan, faire flotter du texte autour d'eux, etc. C'est essentiellement en manipulant des éléments de niveau bloc que vous réalisez des mises en page avec CSS.
“Utilisation des balises div” on page 169 “Mise en forme des pages avec CSS” on page 162
Le style (qui est défini par une règle ou par un groupe de règles) se trouve dans un emplacement distinct de celui du formatage du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une règle concernant les balises h1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de style externes, la règle peut s'appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes). De cette façon, CSS offre une capacité de mise à jour extrêmement aisée Lorsque vous mettez à jour une règle CSS dans un emplacement, le formatage de tous les éléments qui utilisent le style défini est automatiquement mise à jour en fonction du nouveau style. Where to stay
• Les styles appliqués aux balises HTML redéfinissent le formatage d'une balise spécifique, telle que h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement modifié en conséquence.
Les règles CSS peuvent se trouver aux emplacements suivants : Feuilles de style CSS externes Ensembles de règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien ou d'une règle @import situé dans la section head d'un document. Feuilles de style CSS internes (ou imbriquées) Ensembles de règles CSS incluses dans une balise style de la section
Styles en ligne Définis dans des instances spécifiques de balises dans un document HTML. L'utilisation de styles en ligne n'est pas recommandée.
Ce concept va être illustré par une balise courante, la balise de paragraphe (<p>). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c'est-à-dire le texte placé entre balises <p> dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s'affiche par défaut dans la police Times New Roman de taille moyenne. Toutefois, si vous êtes l'auteur d'une page Web, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style : p { font-family: Arial; font-size: small; }
Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l'utilisateur remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de pargraphe créés par l'auteur de la page Web. L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises span de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez créer la règle suivante dans votre feuille de style :
Vous pouvez également utiliser le panneau Styles CSS pour créer et modifier des propriétés et des règles CSS. Ce panneau est un éditeur bien plus fiable que l'inspecteur Propriétés et présente toutes les règles CSS définies dans le document actif, qu'elles soient intégrées à la section head du document ou dans une feuille de style externe. Adobe recommande l'utilisation du panneau Styles CSS (plutôt que l'inspecteur Propriétés) comme outil principal de création et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée. Outre les styles et feuilles de style de votre composition, libre à vous d'utiliser les feuilles de style livrées avec Dreamweaver pour styliser vos documents Pour accéder à un didacticiel relatif au formatage de texte à l'aide de feuilles de style en cascade, consultez le site Web d'Adobe à l'adresse www.adobe.com/go/vid0153_fr.
“Panneau Styles CSS” on page 137 “Création d'une nouvelle règle CSS” on page 143 Par exemple, la règle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés font-variant, fontstretch, font-size-adjust et font-style ont reçu leur valeur par défaut. h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }
Dreamweaver utilise donc la forme longue par défaut, Ceci permet d'éviter qu'une règle de notation abrégée ne remplace une règle de notation longue. Si vous ouvrez une page Web codée en forme courte dans Dreamweaver, n'oubliez pas que Dreamweaver crée toutes les nouvelles règles CSS sous forme longue. Pour spécifier la façon dont Dreamweaver crée et modifie les règles CSS, vous pouvez modifier les préférences de modification CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Edition > Préférences dans Windows ; Dreamweaver > Préférences sur le Macintosh). Note: Le panneau Styles CSS crée uniquement des règles sous forme longue. Lorsque vous créez une page ou une feuille de style CSS à l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de règles CSS sous forme courte risque de provoquer l'écrasement des propriétés créées sous forme longue par celles créées sous forme courte. Il est donc préférable de créer vos styles CSS sous forme longue.
CSS de la sélection en cours dans le document, un volet Règles qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection), et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle appliquées à la sélection.
Le volet Résumé de la sélection récapitule les propriétés CSS de l'élément sélectionné dans le document actif et leurs valeurs. Ce résumé décrit les propriétés de toutes les règles s'appliquant directement à la sélection. Seules les propriétés définies apparaissent. Par exemple, les règles suivantes créent un style de classe et un style de balise (dans ce cas un paragraphe) : .foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; } Le volet Résumé de la sélection classe les propriétés par ordre croissant de spécificité. Dans l'exemple précédent, le style de balise définit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police définie par la classe est prioritaire sur celle définie par le style de balise car la spécificité des sélecteurs de classe est supérieure à celle des sélecteurs de balise. Pour plus d'informations sur les spécificités CSS, voir www.w3.org/TR/CSS2/cascade.html.) Le volet Règles dispose de deux vues (A propos ou Règles) selon votre sélection. Dans la vue A propos (par défaut), le volet présente le nom de la règle définissant la propriété CSS sélectionnée, ainsi que le nom du fichier contenant cette règle. Dans la vue Règles, le volet affiche la cascade, ou hiérarchie, des règles s'appliquant directement ou indirectement à la sélection en cours. (L'onglet auquel la règle s'applique directement s'affiche dans la colonne de droite.) Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situés dans le coin supérieur droit du volet Règles. Lorsque vous sélectionnez une propriété dans le volet Résumé de la sélection, toutes les propriétés de la règle appliquée s'affichent au-dessous dans le volet Propriétés. (La règle qui s'applique est également sélectionnée dans le panneau Règles lorsque la vue Règles est sélectionnée.) Par exemple, dans le cas d'une règle appelée .texteprincipal qui définit une famille, une taille et une couleur de police, la sélection de l'une de ces propriétés dans le volet Résumé de la sélection entraîne l'affichage de toutes les propriétés définies par la règle .texteprincipal dans le volet Propriétés et de la règle .texteprincipal sélectionnée dans le volet Règles. (En outre, la sélection d'une règle dans le volet Règles affiche les propriétés de celle-ci dans le volet Propriétés.) Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés ayant déjà été définies et les classe par ordre alphabétique. Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies sont placées en haut de chaque catégorie, en texte bleu. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie, en texte bleu. Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu, les autres s'affichent en rouge et sont barrées. Si vous placez le curseur de la souris sur une règle étrangère à la sélection, un message d'explication s'affiche. Dans la plupart des cas, il s'agit de propriétés écrasées par d'autres ou de propriétés qui ne sont pas héritées. Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail.
“Ouverture du panneau Styles CSS” on page 140
Propriétés ne présente que les propriétés précédemment définies et les classe par ordre alphabétique. Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies placées en haut de chaque catégorie. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie. Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu. Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail.
“Ouverture du panneau Styles CSS” on page 140
propriétés définies s'affichent en bleu en haut de la liste. Vue Définition des propriétés N'affiche que les propriétés déjà définies et constitue la vue par défaut.
Modifier le style Ouvre une boîte de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe. Supprimer règle de CSS Supprime la règle ou la propriété sélectionnée du panneau Styles CSS et le formatage de tous
Supprimer règle de CSS peut également détacher (ou rompre le lien de) une feuille de style CSS associée. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'exécution des commandes de feuilles de style CSS.
❖ Effectuez l'une des opérations suivantes :
• Appuyez sur les touches Maj+F11. • Cliquez sur le bouton CSS de l'inspecteur Propriétés.
❖ Cliquez sur l'icône « + »' correspondant à ces propriétés. Utilisez les options du panneau contextuel pour appliquer
Les propriétés CSS3 telles que text-shadow prennent en charge plusieurs ensembles de valeurs. Par exemple : textshadow: 3px 3px #000, -3px -3px #0f0;
En mode Catégories, text-shadow se trouve dans la catégorie Police. box-shadow, border-radius et borderimage sont répertoriés dans la catégorie Bordure.
Les modifications apportées aux propriétés CSS ne sont pas affichées en mode Création. Passez au mode Affichage en direct pour prévisualiser les modifications. Vous pouvez également apporter des modifications rapides aux propriétés CSS3 dans le mode Affichage en direct. Ces modifications sont immédiatement reflétées dans ce mode. Les propriétés CSS3 suivantes sont prises en charge en mode Affichage en direct :
• border-radius CSS dans la liste Catégorie. 2 Définissez les options de style CSS que vous voulez appliquer : A la création de règles de CSS - Utilisez Forme courte pour : Vous permet de sélectionner les propriétés de style CSS
A la modification de règles de CSS - Utilisez Forme courte pour : Détermine si Dreamweaver réécrit les styles existants
Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifiés. Choisissez En fonction des paramètres ci-dessus pour réécrire en forme abrégée les styles des propriétés sélectionnées dans la zone Utiliser Forme courte pour. Sur double-clic dans le panneau CSS : Vous permet de sélectionner un outil pour modifier les règles CSS.
Note: Les noms de classe doivent commencer par un point et peuvent contenir n'importe quelle combinaison de lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'insère à votre place.
Note: Les ID doivent commencer par un signe dièse (#) et peuvent contenir n'importe quelle combinaison de lettres et de chiffres (par exemple, #monID1). Si vous omettez le signe dièse initial, Dreamweaver l'insère à votre place.
3 Choisissez l'endroit où vous voulez définir la règle, puis cliquez sur OK :
• Pour créer une feuille de style externe, choisissez Nouveau fichier feuille de style. • Pour incorporer le style dans le document actif, choisissez Seulement ce document. 4 Dans la boîte de dialogue Définition des règles de CSS, choisissez les options à définir pour la nouvelle règle CSS.
5 Lorsque vous avez défini les propriétés de style, cliquez sur OK.
élémentaires de police et de type pour un style CSS. 1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Type, puis définissez les propriétés de style.
Font-family Permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte
Pour assurer la compatibilité avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs. Font-size Définit la taille du texte. Vous pouvez choisir une taille spécifique en cliquant sur une valeur et une unité de mesure, ou une taille relative. Les pixels fonctionnent correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs. Font-style permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut
Line-height Définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait généralement référence à la
Text-decoration Ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné. Si vous définissez le paramètre de lien sur aucun, vous pouvez supprimer le soulignement des liens en définissant une classe spéciale. Cet attribut est pris en charge par les deux navigateurs. Font-weight Applique aux caractères un niveau d'épaisseur spécifié en valeur relative ou absolue. Normal équivaut à
Font-variant Définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de
Text-transform Permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer l'ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs. Couleur Définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.
2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Arrière-plan, puis définissez les propriétés de
Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style : Couleur d'arrière-plan Définit la couleur d'arrière-plan de l'élément. Cet attribut est pris en charge par les deux
Image d’arrière-plan Définit l'image d'arrière-plan pour l'élément. Cet attribut est pris en charge par les deux
• Répéter crée une mosaïque horizontale et verticale de l'image derrière l'élément. • Répéter-x et Répéter-y affichent respectivement un bandeau horizontal ou vertical. Les dernières images sont coupées pour s'adapter aux dimensions exactes de l'élément. Note: La propriété Répétition vous permet de redéfinir la balise body et de définir une image d'arrière-plan sans mosaïque ni répétition. Pièce jointe de l'arrière-plan Détermine si l'image d'arrière-plan reste fixe par rapport à sa position d'origine ou défile
Position de l'arrière-plan (X) et Position de l'arrière-plan (Y) Spécifient la position initiale de l'image d'arrière-plan par rapport à l'élément. Cette propriété peut être utilisée pour aligner une image d'arrière-plan sur le centre de la page, verticalement (X) et horizontalement (Y). Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre de document, pas à l'élément.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
Espacement des mots Définit l'espace devant séparer les mots. Pour définir une valeur spécifique, choisissez Valeur
Note: Vous pouvez indiquer des valeurs négatives, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Espacement des lettres Augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4) réduit l'espacement
Alignement vertical Détermine l'alignement vertical de l'élément auquel il s'applique. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué à la balise <img>. Alignement du texte Détermine l'alignement du texte au sein de l'élément. Cet attribut est pris en charge par les deux
Retrait du texte Détermine le retrait de texte sur la première ligne. Vous pouvez utiliser une valeur négative pour créer
Espace blanc Détermine la gestion des espaces au sein de l'élément. Choisissez parmi les trois options suivantes :
Afficher Détermine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage d'un élément.
Vous pouvez appliquer des paramètres individuels aux côtés d'un élément lors de la définition du remplissage et des marges ou utiliser l'option Idem pour tous pour appliquer le même paramètre à tous les côtés d'un élément. 1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Boîte, puis définissez les propriétés de style
Largeur et Hauteur Définissent la largeur et la hauteur de l'élément. Flottante Détermine de quel côté les autres éléments, tels que le texte, les divs PA, les tableaux, etc., flottent autour
marge s'il ne comporte pas de bordure). Désactivez l'option Idem pour tous si vous voulez définir un remplissage différent pour chaque côté de l'élément. Idem pour tous Applique le même remplissage aux bords supérieur, droit, inférieur et gauche de l'élément. Marge Définit l'espace qui sépare la bordure d'un élément (ou son remplissage s'il ne comporte pas de bordure) d'un
Idem pour tous Applique la même marge aux bords supérieur, droit, inférieur et gauche de l'élément.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Bordure, puis définissez les propriétés de style
Type Définit l'aspect de la bordure. L'affichage du style dépend du navigateur. Désactivez l'option Idem pour tous si
Idem pour tous Applique le même style de bordure aux bords supérieur, droit, inférieur et gauche de l'élément. Largeur Détermine l'épaisseur de la bordure de l'élément. Cet attribut est pris en charge par les deux navigateurs.
Idem pour tous Applique la même largeur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément. Couleur Définit la couleur de la bordure. Vous pouvez indiquer une couleur différente pour chaque côté, mais le résultat final variera selon le navigateur. Désactivez l'option Idem pour tous si vous voulez définir une couleur différente pour chaque côté de l'élément. Idem pour tous Applique la même couleur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.
Type de style de liste Détermine l'aspect des puces ou des numéros. Cet attribut est pris en charge par les deux
Image de style de liste Permet de choisir une image personnalisée pour les puces. Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) pour sélectionner une image ou tapez le chemin d'accès à celle-ci. Position de style de liste Détermine si le texte de l'élément de la liste est habillé et mis en retrait (extérieure) ou si le
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Positionnement, puis définissez les propriétés de
Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style : Position Détermine la façon dont le navigateur doit positionner l'élément sélectionné, avec les options suivantes :
PA ou relatif le plus proche, et à défaut, par rapport au coin supérieur gauche de la page.
éléments HTML positionnables. Visibilité Détermine la condition de l'affichage initial du contenu. Si vous ne spécifiez pas de propriété de visibilité, le
• Visible affiche le contenu, quelle que soit la valeur du parent. • Masqué masque le contenu, quelle que soit la valeur du parent. Index Z Détermine l'ordre de superposition du contenu. Les éléments ayant une valeur d'index Z supérieure s'affichent par dessus les éléments ayant une valeur d'index Z inférieure (ou aucune valeur d'index Z). Les valeurs peuvent être positives ou négatives. (Si votre contenu est à position absolue, il est plus facile de modifier l'ordre de superposition à l'aide du panneau Eléments PA).
Emplacement Définit l'emplacement et la taille du bloc de contenu. La façon dont le navigateur interprète
Les unités par défaut pour l'emplacement et la taille sont les pixels. Vous pouvez également choisir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou % (pourcentage de la valeur équivalente de l'objet parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Détourage Définit la partie du contenu qui est visible. Si vous indiquez une zone de détourage, vous pouvez la gérer à
4 Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir
Note: Un certain nombre d'autres propriétés d'extension sont disponibles dans Dreamweaver, mais vous devez passer par le panneau Styles CSS pour y accéder. Vous pouvez afficher facilement une liste des propriétés d'extension disponibles en ouvrant le panneau Styles CSS (Fenêtre > Styles CSS), puis cliquant sur le bouton Afficher la vue par catégorie en bas du panneau et en développant la catégorie Extensions. 1 Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire. 2 Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS. 3 Dans la boîte de dialogue Définition des règles de CSS, choisissez Extensions, puis définissez les propriétés de style
Saut de page avant Force un saut de page en cas d'impression de la page, avant ou après l'objet contrôlé par ce style.
4.0 des navigateurs, mais peut l'être dans les versions ultérieures. Curseur Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrôlé par ce style. Choisissez l'option que vous voulez définir dans le menu déroulant. Cet attribut est pris en charge par Internet Explorer 4.0 et versions ultérieures et par Netscape Navigator 6. Filtre Applique des effets spéciaux, dont des effets de flou et de négatif, à l'objet contrôlé par ce style. Sélectionnez un
des propriétés de style supplémentaires, puis cliquez sur OK.
Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez instantanément tout ce texte. Les modifications apportées à une feuille de style externe se répercutent sur tous les documents auxquels elle est liée. Libre à vous de définir un éditeur externe à utiliser pour la modification des feuilles de style.
1 Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS. 2 Cliquez sur le bouton Actuel, situé en haut du panneau Styles CSS. 3 Sélectionnez un élément de texte dans la page pour afficher ses propriétés. 4 Effectuez l'une des opérations suivantes :
• Sélectionnez une règle dans le volet Toutes les règles, puis modifiez ses propriétés dans le volet Propriétés inférieur. Note: Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.
1 Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS. 2 Cliquez sur le bouton Tous, situé en haut du panneau Styles CSS. 3 Effectuez l'une des opérations suivantes :
• Sélectionnez une règle dans le volet Toutes les règles, puis cliquez sur le bouton Modifier le style situé dans le coin inférieur droit du panneau Styles CSS. Note: Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.
1 Dans le panneau Styles CSS (mode Tous), sélectionnez le sélecteur à modifier. 2 Cliquez à nouveau sur le sélecteur afin de pouvoir en modifier le nom. 3 Apportez vos modifications, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
1 Dans le panneau Styles CSS (Fenêtre > CSS), sélectionnez une règle dans le volet Toutes les règles (mode Tous) ou
2 Effectuez l'une des opérations suivantes :
Propriétés de texte. Même si la plupart des styles sont actualisés immédiatement, il est conseillé d'afficher votre page dans un navigateur et de vérifier que le style a été appliqué comme prévu. Lorsque vous appliquez plusieurs styles au même texte, ils risquent d'être contradictoires et de produire des résultats inattendus. Lorsque vous affichez un aperçu des styles définis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la feuille de style afin que vos modifications soient appliquées lorsque vous afficherez la page dans un navigateur.
“A propos des feuilles de style en cascade” on page 132 “A propos des styles en cascade” on page 134 “Panneau Styles CSS” on page 137
1 Sélectionnez le texte du document auquel vous voulez appliquer un style CSS.
Si vous sélectionnez une plage de texte au sein d'un même paragraphe, le style CSS n'affectera que cette sélection. Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise dans le sélecteur situé dans la partie inférieure gauche de la fenêtre de document.
• Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le texte sélectionné, choisissez Styles CSS dans le menu contextuel, puis choisissez le style à appliquer.
1 Sélectionnez l'objet ou le texte auquel le style ne doit plus être appliqué. 2 Dans l'inspecteur Propriétés HTML (Fenêtre > Propriétés), choisissez Aucun dans le menu déroulant Classe.
1 Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez
Vous pouvez également renommer une classe en sélectionnant Renommer la classe dans le menu d'options du panneau Styles CSS. 2 Dans la boîte de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est
3 Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK.
Note: Si la règle que vous essayez de déplacer est en conflit avec une règle de la feuille de style de destination, Dreamweaver affiche la boîte de dialogue Il existe déjà une règle de ce nom. Si vous décidez de déplacer la règle en conflit, Dreamweaver place la règle déplacée à proximité immédiate de la règle avec laquelle elle est en conflit dans la feuille de style de destination.
“Insertion de code avec la barre d'outils de codage” on page 326
2 Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez l'option de nouvelle feuille de style
3 Dans la boîte de dialogue Enregistrer la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez
Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les règles que vous avez sélectionnées et l'associe au document actif. Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.
1 Effectuez l'une des opérations suivantes :
Note: La sélection partielle d'une règle se traduit par le déplacement de l'ensemble de la règle. 2 Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez une feuille de style existante dans
Note: Le menu déroulant affiche toutes les feuilles de style qui sont liées au document actif. Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.
❖ Dans le panneau Styles CSS (mode Tous), sélectionnez une règle et faites-la glisser jusqu'à l'emplacement désiré.
Vous pouvez déplacer plusieurs règles à la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur plusieurs règles pour les sélectionner.
1 En mode Code (Affichage > Code), sélectionnez la totalité de l'attribut de style qui contient le style CSS intégré à
2 Cliquez dessus avec le bouton droit de la souris et sélectionnez Styles CSS > Convertir en règle les styles CSS
Vous pouvez également convertir des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.
“Insertion de code avec la barre d'outils de codage” on page 326
Si vous modifiez une feuille de style CSS externe, les changements sont reflétés dans tous les documents liés à cette feuille de style. Vous pouvez exporter les styles CSS trouvés dans un document afin de créer une nouvelle feuille de style CSS, et attacher ou créer un lien vers une feuille de style externe pour appliquer les styles trouvés à cet endroit. Vous pouvez attacher toute feuille de style de votre création à vos pages ou copier ces feuilles dans votre site. De plus, Dreamweaver est fourni avec des feuilles de style prédéfinies qui peuvent être automatiquement placées dans votre site et attachées à vos pages. 1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
• Appuyez sur les touches Maj + F11. 2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin inférieur droit du
3 Effectuez l'une des opérations suivantes :
4 Dans la zone Ajouter sous, sélectionnez une des options suivantes :
Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent également la directive d'importation dans une page (plutôt que simplement dans des feuilles de style). Il existe quelques différences dans la méthode de résolution des conflits entre propriétés lorsque des règles se chevauchent dans des feuilles de style externes liées et des feuilles importées dans une page. Pour importer une feuille de style externe, plutôt que d'y créer un lien, choisissez Importer. 5 Dans le menu contextuel Médias, spécifiez le média cible de la feuille de style.
Consortium à l'adresse www.w3.org/TR/CSS21/media.html. 6 Cliquez sur le bouton d'aperçu pour vérifier que la feuille de style applique effectivement les styles de votre choix à
Si les styles appliqués ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect précédent. 7 Cliquez sur OK.
“Création d'un document basé sur un fichier d'exemple Dreamweaver” on page 71
1 Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous. 2 Dans le volet Toutes les règles, double-cliquez sur le nom du style à modifier. 3 Dans la fenêtre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.
Lorsque vous définissez des préférences de formatage de code CSS, les préférences que vous sélectionnez sont automatiquement appliquées à toutes les nouvelles règles CSS que vous créez. Toutefois, vous pouvez également appliquer ces préférences manuellement à des documents individuels. Cela peut être utile si vous possédez un document HTML ou CSS plus ancien ayant besoin d'un formatage.
3 En regard de l'option Formatage avancé, cliquez sur le bouton CSS. 4 Dans la boîte de dialogue Options de mise en forme de la source CSS, sélectionnez les options que vous souhaitez
Mettre les propriétés en retrait avec Définit la valeur de mise en retrait des propriétés au sein d'une règle. Vous pouvez
Chaque propriété sur une ligne séparée Place chaque propriété au sein d'une règle sur une ligne séparée. Accolade d’ouverture sur une ligne séparée Place l'accolade d'ouverture pour une règle sur une ligne séparée de celle
Seulement si plusieurs propriétés Place les règles à une seule propriété sur la même ligne que le sélecteur. Tous les sélecteurs d’une règle sur la même ligne Place tous les sélecteurs d’une règle sur la même ligne. Ligne vierge pour séparer les règles Insère une ligne vierge entre chaque règle.
1 Ouvrez une feuille de style CSS 2 Choisissez Commandes > Appliquer le format source.
1 Ouvrez une page HTML contenant du code CSS intégré dans la section head du document. 2 Sélectionnez une partie quelconque du code CSS. 3 Choisissez Commandes > Appliquer le format source à la sélection.
à l'ensemble des règles CSS de la section Head du document. Note: Vous pouvez choisir Commandes > Appliquer le format source pour mettre l'ensemble du document en forme en fonction des préférences de mise en forme de code que vous avez spécifiées.
Vous trouverez, à l'adresse ci-après, une vidéo de l'équipe de conception de Dreamweaver qui présente l'utilisation de la fonction de désactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr. 1 Dans le volet Propriétés du panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez la Propriété que vous voulez
2 Cliquez sur l'icône Désactiver/Activer la propriété CSS dans le coin inférieur droit du volet propriétés. Cette icône
Lorsque vous cliquez sur l'icône Désactiver/Activer la propriété CSS, une icône indiquant la désactivation s'affiche à gauche de la propriété. Pour réactiver la propriété, cliquez sur l'icône Désactivé ou cliquez à l'aide du bouton droit de la souris (Windows) ou en maintenant la touche Commande enfoncée (Macintosh) sur la propriété, puis choisissez Activer. 3 (Facultatif) Pour activer ou supprimer toutes les propriétés désactivées d'une règle sélectionnée, faites un clic droit
Le mode Inspection s'associe au mode En direct afin de vous aider à identifier rapidement les éléments HTML et les styles CSS qui y sont associés. Lorsque le mode Inspection est activé, vous pouvez survoler des éléments de votre page afin d'afficher les attributs de modèle de boîte CSS de n'importe quel élément de niveau bloc. Note: Pour plus d'informations sur le modèle de boîte CSS, consultez la spécification CSS 2.1 (en anglais). Le mode Inspection permet d'obtenir une représentation visuelle du modèle de boîte. Vous pouvez en outre utiliser le panneau Styles CSS pendant le survol d'éléments dans la fenêtre Document. Lorsque le panneau Styles CSS est ouvert en mode Actuel et que vous survolez un élément de la page, les règles et propriétés du panneau Styles CSS sont automatiquement mises à jour, de façon à montrer les règles et propriétés de cet élément. En outre, les modes et panneaux associés à l'élément que vous survolez sont également mis à jour (par exemple le mode Code, le sélecteur de balises, l'inspecteur Propriétés, etc.). 1 Lorsque le document est ouvert dans la fenêtre Document, cliquez sur le bouton Inspecter (à côté du bouton Mode
Note: Si vous n'êtes pas déjà en mode En direct, le mode Inspection l'active automatiquement. 2 Survolez des éléments de la page afin d'afficher le modèle de boîte CSS. Le mode Inspection utilise des couleurs de
l'élément actuellement en surbrillance. Appuyez sur la flèche vers la droite pour rétablir la mise en surbrillance de l'élément enfant. 4 (Facultatif) Cliquez sur un élément pour verrouiller la sélection en surbrillance.
“Prévisualisation de pages dans Dreamweaver” on page 304 “Panneau Styles CSS” on page 137
Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant présenter des problèmes dans certains navigateurs. Lorsque vous exécutez une vérification de compatibilité avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problèmes de rendu CSS potentiels dans le panneau Résultats. Une estimation de confiance, illustrée par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilité d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence très probable). Pour chaque bogue potentiel détecté, Dreamweaver fournit également un lien direct à la documentation relative au bogue sur Adobe CSS Advisor, un site Web qui détaille les bogues de rendu de navigateur connus et propose des solutions pour les corriger. Par défaut, la fonction de vérification de la compatibilité avec les navigateurs effectue une vérification par rapport aux navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ; Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0. Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité CSS de cette fonction. Cela signifie que la nouvelle fonction de vérification de compatibilité avec les navigateurs teste le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles. Trois niveaux de problèmes potentiels de prise en charge de navigateur peuvent se présenter :
Les vérifications de compatibilité avec les navigateurs n'altèrent en rien le document.
❖ Double-cliquez sur le problème dans le panneau Résultats.
❖ Dans le menu Vérification de la compatibilité avec les navigateurs de la barre d'outils du document, sélectionnez
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Paramètres. 3 Sélectionnez la case à cocher située en regard des navigateurs à vérifier. 4 Dans le menu déroulant correspondant aux navigateurs sélectionnés, vous devez indiquer la version minimale
Par exemple, pour vérifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultérieures et dans Netscape Navigator 7.0 et versions ultérieures, cochez les cases correspondant aux noms de ces navigateurs, puis sélectionnez 5.0 dans le menu déroulant Internet Explorer et 7.0 dans le menu déroulant Netscape.
1 Exécutez une vérification de compatibilité avec les navigateurs. 2 Dans le panneau Résultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
3 Cliquez sur Ignorer le problème dans le menu contextuel.
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
2 Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Modifier la liste des
Note: Les rapports ne sont pas enregistrés automatiquement ; si vous souhaitez conserver une copie d'un rapport, vous devez suivre la procédure ci-dessus pour l'enregistrer.
1 Exécutez une vérification de compatibilité avec les navigateurs. 2 Cliquez sur le bouton Parcourir le rapport dans le côté gauche du panneau Résultats.
1 Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les
2 Cliquez sur le texte du lien situé dans l'angle inférieur droit du panneau.
Les feuilles de style à la conception permettent d'afficher ou de masquer la conception appliquée par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la création d'une page. Les feuilles de style à la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affichée dans une fenêtre de navigateur, seuls les styles réellement attachés au document ou qui y sont incorporés apparaissent. Note: Vous pouvez également activer ou désactiver des styles pour l'ensemble d'une page à l'aide de la barre d'outils Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton Intervertir l'affichage des Styles CSS (le plus à droite) fonctionne indépendamment des autres boutons de support de la barre d'outils. Pour utiliser une feuille de style à la conception, procédez comme suit. 1 Ouvrez la boîte de dialogue Feuilles de style à la conception en procédant de l'une des manières suivantes :
• Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé au-dessus d'Afficher à la conception uniquement, puis recherchez la feuille de style CSS à afficher dans la boîte de dialogue Sélectionner une feuille de style.
3 Cliquez sur OK pour fermer la boîte de dialogue.
« concevoir », selon l'état de la feuille de style.
“Présentation de la barre d'outils Rendu de style” on page 11
Dreamweaver Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer à vos pages ou que vous pouvez utiliser comme points de départ pour créer vos propres styles. 1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
• Appuyez sur les touches Maj+F11. 2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin inférieur droit du
3 Dans la boîte de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style. 4 Dans la boîte de dialogue Exemples de feuilles de style, sélectionnez une feuille de style dans la liste déroulante.
5 Cliquez sur le bouton Aperçu pour appliquer la feuille de style et vérifier que le style de votre choix est bien appliqué
Si les styles appliqués ne sont pas ceux que vous escomptiez, sélectionnez une autre feuille de style dans la liste et cliquez sur le bouton Aperçu pour visualiser les styles correspondants. 6 Par défaut, Dreamweaver enregistre la feuille de style dans un dossier nommé CSS au niveau juste en dessous de la
7 Lorsque vous trouvez une feuille de style dont les règles correspondent à vos critères, cliquez sur OK.
2 Avertissez les utilisateurs de Contribute qui travaillent à la publication des pages que vous utilisez une feuille de
Les facteurs suivants doivent être pris en compte lors de la mise à jour de feuilles de style pour un site Contribute :
Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous déclare que rien ne se passe lorsque celui-ci applique un style donné, il est possible que le style ait été supprimé de la feuille de style.
Lorsque vous créez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en différents endroits. A la différence des cellules de tableau, qui ne peuvent exister qu'à l'intérieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe où sur une page Web. Vous pouvez positionner des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifiant leur distance par rapport à d'autres éléments de page). Vous pouvez également placer des balises div afin de définir des éléments flottants, des marges intérieurs et des marges. Cette méthode est privilégiée dans les normes Web modernes. La création de mises en forme CSS entièrement nouvelles peut s'avérer difficile car il existe de très nombreux moyens de procéder. Vous pouvez créer une mise en forme CSS simple à deux colonnes en définissant des éléments flottants, des marges, des remplissages et d'autres propriétés CSS dans un nombre de combinaisons quasi illimité. En outre, le problème de restitution sur différents types de navigateurs entraîne un affichage aléatoire de certaines mises en forme CSS qui sont correctement ou incorrectement restituées en fonction du navigateur utilisé. Dreamweaver vous permet de créer facilement des pages à l'aide de mises en forme CSS en fournissant 16 mises en forme prédéfinies qui fonctionnent sur différents types de navigateurs. L'utilisation de mises en forme CSS prédéfinies fournies avec Dreamweaver constitue la façon la plus simple de créer une page avec une mise en forme, mais vous pouvez également créer des mises en forme CSS à l'aide d'éléments à positionnement absolu (éléments PA) de Dreamweaver. Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisément, une balise div ou toute autre balise) auquel une position absolue est attribuée. Toutefois, du fait de leur positionnement absolu, les éléments PA de Dreamweaver présentent l'inconvénient de ne jamais adapter leur position à la page en fonction de la taille de la fenêtre du navigateur.
Vous trouverez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le Pôle de développement Dreamweaver. D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.
“Création d'une page vierge” on page 67 “Définition du type et du codage par défaut d'un document” on page 73 “Etablissement d'un lien vers une feuille de style CSS externe” on page 154
1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s'agit de la sélection par
3 Pour Type de page, sélectionnez le type de page à créer.
HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS. 4 Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi 16 mises en forme
Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou
Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La
5 Sélectionnez un type de document dans le menu DocType. 6 Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans. Ajouter à l'en-tête Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez. Créer un nouveau fichier Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la
• Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icône d'ajout de feuille de style, en renseignant la boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document. Note: Lorsque vous sélectionnez l'option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les règles correspondant au fichier CSS. Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant, Dreamweaver lie immédiatement le fichier à la page HTML que vous créez. Note: Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorporés dans la section head du nouveau document de mise en forme CSS, même si vous sélectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme; 8 (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en
Vous trouverez une description détaillée de ce processus dans l'article de David Powers « Automatically attaching a style sheet to new documents » (en anglais).
1 Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de
Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm. 2 Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. 3 (Facultatif) Ajoutez une image d'aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier
Donnez à votre image d'aperçu le même nom de fichier que votre fichier de façon à pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d'aperçu myCustomLayout.png. 4 (Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe
fichier et spécifier le nom de la mise en forme, sa description et une image d'aperçu.
Insertion et modification de balises div Vous pouvez créer des mises en page en insérant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui définit les divisions logiques dans le contenu d'une page Web. Vous pouvez utiliser des balises div pour centrer des blocs de contenu, créer des effets de colonne, créer différentes zones de couleur, etc. Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour créer des pages Web, vous pouvez créer une mise en forme CSS à partir de l'une des mises en forme prédéfinies fournies avec Dreamweaver. Si vous n'êtes pas à l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des tableaux, vous pouvez également essayer d'utiliser des tableaux. Note: Dreamweaver considère comme des éléments à positionnement absolu (éléments PA) toutes les balises div, même si vous n'avez pas créé ces balises div à l'aide de l'outil de dessin Div PA.
“A propos des éléments PA dans Dreamweaver” on page 173 “Création d'une page avec une mise en forme CSS” on page 167 “Présentation de contenu à l'aide de tableaux” on page 188
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. 1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer la balise div. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Insérer la balise 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 répertoriés.
Nouvelle règle de CSS Ouvre la boîte de dialogue Nouvelle règle CSS.
“A propos des éléments PA dans Dreamweaver” on page 173 “Création d'une page avec une mise en forme CSS” on page 167
Après avoir inséré une balise div, vous pouvez la manipuler ou lui ajouter du contenu. Note: Les balises div qui sont positionnées de manière absolue deviennent des éléments PA. Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez sélectionné Contours en feuille CSS. (L'option Contours en feuille CSS est sélectionnée par défaut dans le menu Affichage > Assistances visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou désactiver la mise en surbrillance. Lorsque vous sélectionnez une balise div, vous pouvez afficher et modifier les règles correspondantes dans le panneau Styles CSS. Vous pouvez aussi ajouter du contenu à la balise div : placez simplement le point d'insertion à l'intérieur de la balise div, puis procédez à l'ajout du contenu comme vous le feriez pour celui d'une page.
“A propos des éléments PA dans Dreamweaver” on page 173 “Ouverture du panneau Styles CSS” on page 140 Affichage et modification des règles appliquées à une balise div 1 Procédez de l'une des manières suivantes pour sélectionner la balise div :
Recherchez la surbrillance afin de voir les bordures.
2 Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.
3 Effectuez les modifications nécessaires.
❖ Cliquez n'importe où à l'intérieur des bordures de la balise. Modification du texte de l'espace réservé dans une balise div ❖ Sélectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste de gauche. 3 Effectuez l'une des modifications suivantes, puis cliquez sur OK :
Survol. Note: Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y déplacez le pointeur.
• Une image à laquelle est affectée une position relative ou absolue • Une balise a à laquelle le style display:block est affecté. • Un paragraphe auquel une position relative ou absolue est affectée Note: Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'éléments en ligne (c'est-à-dire d'éléments dont le code est défini dans une ligne de texte) ni d'éléments de blocs simples tels que des paragraphes. Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrière-plans et le modèle de boîte pour les blocs de mise en forme CSS en mode Création. Vous pouvez aussi afficher des info-bulles qui indiquent les propriétés du bloc de mise en forme CSS sélectionné lorsque vous placez le pointeur dessus. La liste suivante d'assistances visuelles de bloc de mise en forme CSS décrit ce que Dreamweaver rend visible pour chacune d'elles : Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page. Arrière-plans de mise en forme CSS Affiche les couleurs d'arrière-plan affectées temporairement de chaque bloc de mise
Lorsque vous activez les assistances visuelles pour afficher les arrière-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrière-plan distincte à chaque bloc de mise en forme CSS.
Affichage des contours des blocs de mise en forme CSS ❖ Choisissez Affichage > Assistances visuelles > Contours en feuille CSS. Affichage des arrière-plans de blocs de mise en forme CSS ❖ Choisissez Affichage > Assistances visuelles > Arrière-plans de mise en forme CSS. Affichage des modèles de boîte de blocs de mise en forme CSS ❖ Choisissez Affichage > Assistances visuelles > Modèle de boîte de mise en forme CSS. Pour accéder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton Assistances visuelles de la barre d'outils du document.
1 Créez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis sélectionnez
2 Dans la nouvelle feuille de style, créez des règles qui affectent l'attribut display:block aux éléments de page à
Si, par exemple, vous souhaitez appliquer une couleur d'arrière-plan aux paragraphes ou aux éléments de liste, vous pouvez créer une feuille de style comprenant les règles suivantes : p{ display:block; } li{ display:block; }
4 En mode Création, ouvrez la page à laquelle vous souhaitez associer les nouveaux styles. 5 Choisissez Format > Styles CSS > Conception. 6 Dans la boîte de dialogue Feuilles de style à la conception, cliquez sur le bouton plus (+) situé au-dessus de la zone de
7 Cliquez sur OK pour fermer la boîte de dialogue Feuilles de style à la conception.
éléments PA devant ou derrière d'autres éléments PA, masquer certains d'entre eux et en montrer d'autres ou encore déplacer les éléments PA à travers l'écran. Vous pouvez placer une image d'arrière-plan dans un élément PA, puis placer un deuxième élément PA contenant du texte avec un arrière-plan transparent devant ce dernier. Les éléments PA sont généralement des balises div PA. (Ce sont les types d'éléments PA que Dreamweaver insère par défaut.) Mais n'oubliez pas que vous pouvez classifier tout élément HTML (par exemple, une image) en tant qu'élément PA en lui affectant une position absolue. Tous les éléments PA (et pas uniquement les balises div PA) s'affichent dans le panneau Eléments PA.
Tracer un div pour un élément PA, Dreamweaver insère une balise div dans le document et attribue à la balise div une valeur ID (DivAP1 par défaut au premier div que vous tracez, DivAP2, au deuxième div que vous tracez, etc.). Vous pouvez renommer la div PA à votre guise par la suite au moyen du panneau Eléments PA ou de l'inspecteur Propriétés. Dreamweaver utilise également des styles CSS intégrés dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes. Ce qui suit est un échantillon de code HTML pour une div PA :
Lorsque vous insérez une div PA, Dreamweaver affiche par défaut sa bordure en mode Création et met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez désactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout élément PA) en désactivant Contours des éléments PA et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouvez également activer les arrière-plans et le modèle de boîte pour les éléments PA en guise d'aide visuelle lors de la conception. Une fois une balise div PA créée, vous pouvez y ajouter du contenu en plaçant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.
“Sélection d'éléments PA” on page 179 “Modification de la couleur de surbrillance des balises div” on page 171 “Visualisation des blocs de mise en forme CSS” on page 171 Traçage d'une seule balise div PA ou de plusieurs balises div PA à la suite 1 Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un élément PA 2 Dans la fenêtre de création du document, procédez de l'une des manières suivantes :
• Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour dessiner plusieurs divs PA à la suite. Vous pouvez continuer à tracer des divs PA tant que vous n'avez pas relâché les touches Ctrl ou Commande.
Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres éléments de page (le texte par exemple) qui l'entourent. Placement du point d'insertion dans une div PA ❖ Cliquez n'importe où à l'intérieur des bordures de la balise div PA. Le contour de la div PA est en surbrillance et la poignée de sélection apparaît, mais la balise elle-même n'est pas sélectionnée. Affichage des bordures d'une div PA ❖ Choisissez Affichage > Assistances visuelles, puis sélectionnez Contours des divs PA ou Contours en feuille CSS. Note: La sélection simultanée des deux options a le même effet. Masquage des bordures d'une div PA ❖ Choisissez Affichage > Assistances visuelles, puis désélectionnez Contours des divs PA et Contours en feuille CSS.
Une div PA imbriquée est une balise div PA dont le code est contenu à l'intérieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriquées, et deux divs PA qui le sont : <div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"> L'imbrication est souvent utilisée pour regrouper des balises div PA. Une balise div PA imbriquée se déplace avec sa div PA parent et peut être configurée pour hériter de la visibilité de son parent. Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez à l'intérieur d'autres div PA soient automatiquement imbriquées. Pour créer une div PA à l'intérieur ou par dessus une autre div PA, vous devez aussi désélectionner l'option Empêcher les chevauchements.
Option (Macintosh) enfoncée et faites glisser une div PA pour l'imbriquer dans une div PA existante. Les divs PA imbriquées peuvent s'afficher différemment suivant les navigateurs. Lorsque vous créez des divs PA imbriquées, contrôlez régulièrement leur affichage dans différents navigateurs au cours du processus de création. Insertion d'une div PA imbriquée 1 Assurez-vous que l'option Empêcher les chevauchements est désélectionnée. 2 Placez le point d'insertion à l'intérieur d'une div PA existante dans la fenêtre de création du document, puis
Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA à l'intérieur d'une autre div PA ❖ Sélectionnez l'option Imbrication dans les préférences des éléments PA.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Eléments PA dans la liste à gauche, sélectionnez des éléments PA et définissez les
Visibilité Détermine si les éléments PA sont visibles par défaut. Les options sont par défaut, hériter, visible et masqué. Largeur et Hauteur Indiquez une largeur et une hauteur par défaut (en pixels) pour les éléments PA que vous créez à l'aide du menu Insertion > Objets mise en forme > Div PA. Couleur d'arrière-plan Spécifie une couleur d’arrière-plan par défaut. Sélectionnez une couleur à l'aide du sélecteur de
Image d’arrière-plan Spécifie une image d’arrière-plan par défaut. Cliquez sur Parcourir pour trouver le fichier de
Imbrication: Imbriquer en cas de création dans une div PA Indique si une div PA que vous dessinez à partir d'un point
Option (Macintosh) enfoncée pour modifier temporairement ce paramètre lorsque vous dessinez une div PA.
1 Sélectionnez un élément PA.
Note: L'inspecteur Propriétés CSS-P présente les mêmes options pour les éléments à positionnement relatif. G et S (gauche et haut) Indiquez la position du coin supérieur gauche de l'élément PA par rapport au coin supérieur
L et H Indiquez la largeur et la hauteur de l'élément PA.
L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également choisir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de l'élément PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Index Z Détermine l'index z ou ordre de superposition, de l'élément PA.
Vis Indique si l'élément PA est initialement visible ou non. Faites votre choix parmi les options suivantes :
• Visible affiche le contenu de l'élément PA, quelle que soit la valeur du parent. • Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des éléments PA de façon dynamique. Image ar-pl Spécifie une image d'arrière-plan pour l'élément PA.
Couleur d'ar-pl. Spécifie une couleur d'arrière-plan pour l'élément PA.
Classe Indique la classe CSS utilisée pour créer l'élément PA.
Détourage Définit la zone visible de l'élément PA.
Note: Bien que les feuilles de style en cascade utilisent des termes différents pour le détourage, Dreamweaver interprète le détourage de la même manière que la plupart des navigateurs. 4 Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh)
Sélection de plusieurs éléments PA ❖ Sélectionnez les éléments PA tout en maintenant la touche Maj enfoncée. Affichage et définition des propriétés pour plusieurs éléments PA 1 Sélectionnez plusieurs éléments PA. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
G et S (gauche et haut) Indiquez la position du coin supérieur gauche des éléments PA par rapport au coin supérieur
L et H Indiquez la largeur et la hauteur des éléments PA.
• Aucune propriété de visibilité n'est définie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisissent Hériter.
• Visible affiche le contenu des éléments PA, quelle que soit la valeur du parent. • Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des éléments PA de façon dynamique. Balise Indique la balise HTML utilisée pour définir les éléments PA. Image ar-pl Spécifie une image d'arrière-plan pour les éléments PA.
Couleur d'ar-pl. Spécifie une couleur d'arrière-plan pour les éléments PA. Laissez cette option vide pour spécifier un arrière-plan transparent.
Note: Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisément, une balise div ou toute autre balise) auquel une position absolue est attribuée. Le panneau Eléments PA n'affiche pas les éléments à positionnement relatif. Les éléments PA sont affichés sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier élément PA créé (doté d'un index z de 1) apparaît par défaut en bas de la liste et le dernier élément PA créé apparaît en haut de la liste. Vous pouvez toutefois modifier l'index z d'un élément PA en changeant sa place dans l'ordre de superposition. Par exemple, si vous créez huit éléments PA et souhaitez déplacer le quatrième élément PA en haut de la liste, vous pouvez lui affecter un index z supérieur à celui des autres éléments PA.
Sélection d'un élément PA dans le panneau Eléments PA ❖ Dans le panneau Eléments PA (Fenêtre > Eléments PA), cliquez sur le nom de l'élément PA. Sélection d'un élément PA dans la fenêtre de document ❖ Effectuez l'une des opérations suivantes :
Si la poignée n'est pas visible, cliquez n'importe où dans l'élément PA pour la faire apparaître.
❖ Effectuez l'une des opérations suivantes :
PA ou sur leur bordure.
L'élément PA situé en haut de la liste du panneau Calques Eléments PA se trouve au premier rang de l'ordre de superposition et apparaît avant les autres éléments PA. En code HTML, l'ordre de superposition, ou index z, des éléments PA détermine l'ordre dans lequel ils sont dessinés dans un navigateur. Plus l'index z d'un élément PA est élevé, et plus sa position dans l'ordre de superposition est élevée. (Par exemple, un élément avec un index z de 4 apparaîtra au-dessus d'un élément avec un index z de 3. 1 est toujours le numéro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque élément PA à l'aide du panneau Eléments PA ou de l'inspecteur Propriétés. Modification de l'ordre de superposition des éléments PA à l'aide du panneau Eléments PA 1 Sélectionnez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA. 2 Double-cliquez sur le numéro d'index z en regard de l'élément PA dont vous souhaitez modifier l'index z. 3 Modifiez le numéro puis appuyez sur la touche Retour/Entrée.
• Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition. Modification de l'ordre de superposition des éléments PA à l'aide de l'inspecteur Propriétés 1 Choisissez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA et visualiser l'ordre de superposition en cours. 2 Dans le panneau Eléments PA ou dans la fenêtre de document, sélectionnez l'élément PA dont vous souhaitez
3 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nombre dans la zone de texte Index Z.
• Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.
• Un oeil fermé signifie que l'élément PA est invisible. • Si l'icône de l'oeil n'apparaît pas, l'élément PA hérite de la visibilité de son parent (lorsque les éléments PA ne sont pas imbriqués, le parent correspond au corps du document, qui est toujours visible). Aucune icône en forme d'oeil ne s'affiche lorsque la visibilité n'est pas indiquée (apparaît dans l'inspecteur Propriétés comme Visibilité par défaut). Modification de la visibilité de tous les éléments PA à la fois ❖ Dans le panneau Eléments PA (Fenêtre > Calques), cliquez sur l'icône en forme d'œil en haut de la colonne. Note: Cette procédure permet de définir la visibilité ou la non-visibilité de tous les éléments PA, mais elle ne leur permet pas d'hériter.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas redimensionner un élément PA s'il doit pour cela en chevaucher un autre.
“Utilisation de la grille de mise en forme” on page 187 Redimensionnement d'un élément PA 1 En mode Création, sélectionnez un élément PA. 2 Pour redimensionner l'élément PA, procédez de l'une des manières suivantes :
• Pour redimensionner l'élément PA par incréments d'un pixel, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfoncée tout en utilisant les touches fléchées. Les flèches déplacent les bords droit et inférieur de l'élément PA ; cette technique ne permet pas de redimensionner l'élément PA en utilisant les bords supérieur et gauche.
Le redimensionnement d'un élément PA en modifie la largeur et la hauteur. Cette action ne définit pas la partie visible du contenu de l'élément PA. Vous pouvez définir la zone visible d'un élément PA dans les préférences.
1 En mode Création, sélectionnez un ou plusieurs éléments PA. 2 Effectuez l'une des opérations suivantes :
Maintenez la touche Maj enfoncée tout en appuyant sur les touches fléchées pour déplacer l'élément PA par incréments de la grille.
“Utilisation de la grille de mise en forme” on page 187
PA sélectionné. Lors de l'alignement, les éléments PA enfants qui ne sont pas sélectionnés seront déplacés en même temps que leur parent, si celui-ci est sélectionné et déplacé. Pour éviter ce déplacement, n'utilisez pas d'éléments PA imbriqués. 1 En mode Création, sélectionnez un élément PA. 2 Choisissez Modifier > Réorganiser, puis sélectionnez une option d'alignement.
Vous pouvez aussi passer des éléments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la présentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en éléments PA, Dreamweaver convertit le tableau en balises div PA, quel que soit le type de l'élément PA qui se trouvait dans la page avant d'être converti en tableau.) Vous ne pouvez pas convertir un tableau ou un éléments PA spécifique figurant sur une page. Il n'est possible de convertir des éléments PA en tableaux, et des tableaux en divs PA que pour la totalité d'une page. Note: Il est impossible de convertir des éléments PA en tableaux, ou des tableaux en divs PA, dans un modèle de document ou dans un document auquel un modèle a été appliqué. Dans ce cas, vous devez créer votre mise en forme dans un document sans modèle et le convertir avant de l'enregistrer comme modèle.
Créez votre mise en forme à l'aide d'éléments PA, puis convertissez les éléments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins récents. Avant de convertir vos éléments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre à bien être en mode Standard (Affichage > Mode Tableau > Mode Standard). Conversion des éléments PA en tableau 1 Sélectionnez Modifier > Convertir > Divs PA en tableau. 2 Parmi les options suivantes, définissez celles de votre choix et cliquez sur OK : La plus précise Crée une cellule de tableau pour chaque élément PA et ajoute les cellules nécessaires pour préserver
La plus petite : Réduit les cellules vides. Indique que les bords des éléments PA doivent être alignés s'ils sont
Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne correspondra pas nécessairement exactement à votre mise en forme. Utiliser les GIF transparents Remplit la dernière ligne du tableau d'images GIF transparentes. Sélectionner cette option permet d'être sûr que le tableau s'affichera avec les mêmes largeurs de colonne dans tous les navigateurs.
Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est désactivée, le tableau commence sur le bord gauche de la page.
1 Sélectionnez Modifier > Convertir > Tableaux en divs PA.
Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des
Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en éléments PA, sauf si elles possèdent une couleur d'arrière-plan. Note: Les éléments de la page qui se trouvaient en dehors des tableaux sont également placés dans les balises div PA.
éviter le chevauchement. Si cette option est activée, aucun élément PA ne peut être créé, déplacé ou redimensionné au-dessus d'un élément PA existant, ni être imbriqué dans ce dernier. Si vous activez cette option après avoir créé des éléments PA se chevauchant, faites glisser chaque élément PA concerné de façon à l'éloigner des autres éléments PA. Dreamweaver ne corrige pas automatiquement les éléments PA existants se chevauchant dans la page lorsque vous activez l'option Empêcher le chevauchement des éléments PA. Si cette option et l'option d'alignement sont activées, aucun élément PA ne sera aligné sur la grille si cela doit causer un chevauchement de deux éléments PA. Dans ce cas, l'élément PA sera aligné sur le bord de l'élément PA le plus proche. Note: Certaines opérations autorisent le chevauchement des éléments PA, même lorsque l'option Empêcher le chevauchement est activée. Si vous insérez un élément PA en utilisant le menu Insertion, si vous entrez des valeurs dans l'inspecteur Propriétés ou si vous repositionnez des éléments PA en modifiant le code source HTML, les éléments PA risquent de se chevaucher ou de s'imbriquer lorsque cette option est activée. En cas de chevauchement, faites glisser les éléments PA qui se chevauchent en mode Création pour les séparer.
• Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le chevauchement des éléments PA.
Les règles vous aident à mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les règles graduées en pixels, pouces ou centimètres sur les bords gauche et supérieur de la page.
• Pour changer l'origine, faites glisser l'icône de l'origine de la règle
• Pour changer d'unité de mesure, choisissez Affichage > Règles, puis sélectionnez Pixels, Pouces ou Centimètres.
Les repères sont les lignes que vous faites glisser sur le document à partir des règles. Ils vous aident à placer et à aligner des objets de façon plus précise Vous pouvez également utiliser les repères pour mesurer la taille des éléments d'une page ou simuler les plis (zones visibles) des navigateurs Web. Pour faciliter l'alignement des éléments, vous avez la possibilité de les aligner sur les repères et d'aligner des repères sur des éléments. (les éléments doivent être à positionnement absolu pour que l'alignement puisse fonctionner). Vous pouvez également verrouiller les repères pour qu'ils ne soient pas déplacés de façon accidentelle par un autre utilisateur.
1 Faites glisser le repère à partir de la règle correspondante. 2 Positionnez le repère dans la fenêtre de document et relâchez le bouton de la souris (repositionnez le repère en le
Note: Par défaut, les repères sont enregistrés en tant que mesures en pixels absolues depuis le côté supérieur ou gauche du document et sont affichés par rapport à l'origine de la règle. Pour enregistrer le repère sous la forme d'un pourcentage, appuyez sur la touche Maj lorsque vous créez ou déplacez le repère.
❖ Choisissez Affichage > Repères > Afficher les repères. • Pour aligner les repères sur des éléments, sélectionnez Affichage > Repères > Accrocher les repères aux éléments. Note: Lorsque vous redimensionnez des éléments, tels que des éléments à positionnement absolu, des tableaux et des images, ils sont alignés sur les repères.
2 Double-cliquez sur le repère. 3 Entrez la nouvelle position dans la boîte de dialogue Déplacer le repère et cliquez sur OK.
❖ Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et déplacez le pointeur de la souris n'importe
Note: L'unité de mesure est la même que celle utilisée pour les règles.
❖ Choisissez Affichage > Repères puis sélectionnez une taille de navigateur prédéfini dans le menu.
Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous
Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte. Afficher les repères Affiche les repères en mode Création. Magnétiser les repères Aligne les éléments d'une page sur les repères à mesure que vous déplacez ces éléments dans la page. Verrouiller les repères Verrouille les repères en place. Accrocher les repères aux éléments Aligne les repères sur les éléments sur la page à mesure que vous faites glisser les
Effacer tout Efface tous les repères de la page.
Lorsque des repères sont ajoutés à un modèle Dreamweaver, toutes les instances du modèle héritent de ces repères. Les repères des instances de modèle sont toutefois traités comme des régions modifiables par les utilisateurs. Les repères modifiés dans les instances de modèle sont restaurés à leur emplacement d'origine chaque fois que l'instance est mise à jour avec le modèle principal. Vous pouvez aussi ajouter vos propres repères aux instances d'un modèle. Les guides ajoutés de cette manière ne sont pas écrasés lorsque l'instance du modèle est mise à jour avec le modèle principal.
La grille affiche un système de lignes horizontales et verticales dans la fenêtre de document. Cette fonction est utile pour placer des objets de façon précise. Vous pouvez aligner automatiquement des éléments de page à positionnement absolu sur la grille en les déplaçant, et changer la grille ou définir le comportement d'alignement en indiquant des paramètres spécifiques pour la grille. L'alignement fonctionne, que la grille soit visible ou non.
“Alignement des éléments PA” on page 182 “Déplacement des éléments PA” on page 182
❖ Choisissez Affichage > Grille > Afficher la grille.
❖ Choisissez Affichage > Grille > Aligner sur la grille.
1 Choisissez Affichage > Grille > Paramètres de la grille. 2 Définissez les options et cliquez sur OK pour appliquer les modifications. Couleur Spécifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte. Afficher la grille Affiche la grille en mode Création. Aligner sur la grille Permet d'aligner les éléments de la page sur les lignes de la grille. Espacement Détermine l'espacement entre les lignes de la grille. Tapez une valeur et sélectionnez Pixels, Pouces ou Centimètres dans le menu. Afficher Détermine si les lignes de la grille apparaissent sous forme de lignes ou de pointillés.
Vous pouvez utiliser un tracé de l'image comme guide pour reproduire une mise en page ayant été créée dans une application graphique telle qu'Adobe Freehand ou Fireworks. Un tracé d'image est une image JPG, GIF ou PNG qui apparaît à l'arrière-plan de la fenêtre de document. Vous pouvez masquer cette image, définir son opacité et la déplacer. Le tracé de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le tracé de l'image est visible, les véritables image et couleur d'arrière-plan de la page ne sont pas visibles dans la fenêtre de document, mais le sont lorsque la page est affichée dans un navigateur.
Tracé de l'image. 2 Dans la boîte de dialogue Sélectionnez la source de l'image, choisissez un fichier d'image puis cliquez sur OK. 3 Dans la boîte de dialogue Propriétés de la page, définissez la transparence de l'image en tirant la glissière
Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours, choisissez Modifier > Propriétés de la page.
❖ Choisissez Affichage > Tracé de l'image > Afficher.
❖ Choisissez Affichage > Tracé de l'image > Rétablir la position.
1 Sélectionnez un élément dans la fenêtre de document. 2 Choisissez Affichage > Tracé de l'image > Aligner l'image avec la sélection.
A propos des tableaux Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient généralement pas spécifiées explicitement en code HTML, Dreamweaver vous permet de manipuler les colonnes, les lignes et les cellules.
Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui étend la largeur à 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur spécifiée dans le code) et (250) entre parenthèses (la largeur visuelle de la colonne telle qu'elle apparaît à l'écran). Note: Vous avez aussi la possibilité de mettre vos pages en forme à l'aide du positionnement par feuilles de style en cascade CSS.
“Mise en forme des pages avec CSS” on page 162
L'ordre de priorité pour le formatage de tableau est le suivant : 1 Cellules 2 Lignes 3 Tableau
Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la sélection correspond à une ligne ou à un rectangle de cellules) pour produire une cellule unique s'étendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait été précédemment fusionnée ou non. Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan nécessaires) pour obtenir l'agencement spécifié.
Note: La fonction Mode Mise en forme est obsolète depuis la version Dreamweaver CS4. Le mode Mise en forme créait des mises en forme de page à l'aide de tableaux de mise en forme, ce qui n'est plus conseillé par Adobe. Pour plus d'informations sur le mode Mise en forme et la raison pour laquelle il a été rendu obsolète, consultez le Blog de l'équipe Dreamweaver. 1 Dans la fenêtre de document en mode Création, placez le point d'insertion à l'endroit où vous voulez que le tableau
Note: Si votre document est vide, le point d'insertion peut uniquement être placé au début du document.
Lignes Détermine le nombre de lignes du tableau. Colonnes Détermine le nombre de colonnes du tableau. Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur. Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau. Espacement des cellules Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Marge intérieure des cellules Indique le nombre de pixels qui sépare la bordure d'une cellule et son contenu. Aucun N'autorise pas les en-têtes de colonne ou de ligne pour le tableau. Gauche Transforme la première colonne du tableau en colonne d'en-têtes pour vous permettre d'entrer un en-tête pour ligne du tableau. Haut Transforme la première ligne du tableau en ligne d'en-têtes pour vous permettre d'entrer un en-tête pour chaque
Les deux Vous permet d'entrer des en-têtes de colonne et de ligne dans le tableau.
Légende Fournit un titre de tableau qui s'affiche en dehors du tableau.
Vous pouvez importer des données tabulaires créées dans une autre application (par exemple, Microsoft Excel) et enregistrées dans un format texte délimité (éléments séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs) dans Dreamweaver et les mettre en forme dans un tableau. Vous pouvez également exporter les données d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu de cellules contiguës séparé par un délimiteur. Les caractères que vous pouvez utiliser comme délimiteurs sont la virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un tableau, tout le tableau est exporté ; vous ne pouvez pas exporter certaines parties du tableau seulement. Si vous souhaitez ne récupérer qu'une partie des données d'un tableau, par exemple les six premières lignes ou les six premières colonnes, copiez les cellules contenant ces données et collez-les hors du tableau (pour créer un nouveau tableau) avant d'exporter le nouveau tableau.
1 Effectuez l'une des opérations suivantes :
Note: Spécifiez le délimiteur utilisé lors de l'enregistrement du fichier de données. Dans le cas contraire, le fichier ne pourra pas être importé correctement et vos données ne seront pas formatées convenablement dans un tableau. Largeur du tableau Correspond à la largeur du tableau.
Bordure Indique la largeur, en pixels, des bordures du tableau. Marge intérieure des cellules Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Vous pouvez sélectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez également sélectionner une ou plusieurs cellules individuelles. Lorsque vous déplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules de cette sélection en surbrillance afin que vous sachiez quelles cellules seront sélectionnées. Ceci est utile pour les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqués. Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences. Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, la totalité de la structure du tableau (c'est-à-dire toutes les cellules) est mise en surbrillance. Ceci peut être utile lorsque vous disposez de tableaux imbriqués et que vous souhaitez afficher la structure de l'un d'eux.
❖ Effectuez l'une des opérations suivantes :
Note: Le pointeur prend la forme de l'icône de grille du tableau pour vous indiquer que vous pouvez sélectionner le tableau (sauf si vous cliquez sur la bordure d'une ligne ou d'une colonne).
• Cliquez dans une cellule du tableau, puis sur le menu d'en-tête du tableau et choisissez Sélectionner le tableau. Des poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
❖ Effectuez l'une des opérations suivantes :
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n'est pas déjà sélectionnée, elle est ajoutée à la sélection. Si elle est déjà sélectionnée, elle est retirée de la sélection.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste à gauche, effectuez l'une des modifications suivantes, puis cliquez
Survol. Note: Ces options s'appliquent à tous les objets, tels que les éléments à positionnement absolu (PA), que Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
Vous pouvez utiliser l'inspecteur Propriétés pour modifier les tableaux. 1 Sélectionnez un tableau. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), apportez les modifications requises aux propriétés. ID de tableau Un identificateur du tableau. Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau. L La largeur du tableau, en pixels ou en pourcentage de la largeur de fenêtre du navigateur.
Remplissage Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espac. de cellule Détermine le nombre de pixels séparant les cellules contiguës d'un tableau. Alignement Détermine la position du tableau par rapport aux autres éléments du même paragraphe (texte ou images).
à droite du tableau) ; Droite aligne le tableau sur la droite des autres éléments (le texte apparaissant à gauche du tableau) ; et Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par défaut indique que le navigateur doit utiliser son alignement par défaut. Lorsque l'alignement est défini sur Par défaut, le reste du contenu n'est pas affiché à côté du tableau. Pour afficher un tableau à côté du contenu, utilisez l'alignement à droite ou à gauche. Bordure Indique la largeur, en pixels, des bordures du tableau.
Effacer largeurs de colonne et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur
Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels définissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur en pixels (définit également la largeur du tableau sur sa largeur en pixels). Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages définissent la
Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour l'appliquer.
Vous pouvez utiliser l'inspecteur Propriétés pour modifier des cellules et des lignes dans un tableau. 1 Sélectionnez une ligne ou une colonne. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les options suivantes : Horiz Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser l'alignement par défaut (en général à gauche pour les cellules normales et au centre pour les cellules d'en-tête). Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d'utiliser l'alignement par défaut (en général le centre). L et H La largeur et la hauteur des cellules sélectionnées en pixels ou en pourcentage de la largeur ou de la hauteur de
Par défaut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant à l'image la plus large ou à la ligne la plus longue dans une colonne. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu. Note: Vous pouvez spécifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne ne s'affiche pas au pourcentage de hauteur spécifié dans les navigateurs. Ar-pl La couleur d'arrière-plan d'une cellule, d'une colonne ou d'une ligne, choisie à l'aide du sélecteur de couleurs.
En-tête Met en forme les cellules sélectionnées comme des cellules d'en-tête de tableau. Par défaut, le contenu des
Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement. Note: Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise tr plutôt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code HTML plus net et plus concis. 3 Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Le mode Tableaux développés ajoute provisoirement de la marge à l'intérieur des cellules et de l'espacement à tous les tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode vous permet de choisir des éléments dans les tableaux ou de placer le point d'insertion de manière précise. Par exemple, vous pouvez développer un tableau pour placer le point d'insertion à gauche ou à droite d'une image, sans sélectionner l'image ou la cellule du tableau par inadvertance.
Une barre étiquetée Mode Tableaux développés s'affiche en haut de la fenêtre de document. Dreamweaver ajoute une marge intérieure des cellules et de l'espacement entre les cellules à tous les tableaux de la page et augmente l'épaisseur des bordures des tableaux.
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Mode Tableau > Mode Standard. • Dans la catégorie Mise en forme du panneau Insertion, cliquez sur Standard.
Vous pouvez modifier l'aspect des tableaux en définissant des propriétés pour l'ensemble ou une partie de leurs cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les propriétés d'un tableau ou de cellules, vous devez savoir que l'ordre de priorité pour le formatage est le suivant : cellules, lignes et tableaux. Pour formater le texte dans une cellule de tableau, suivez la même procédure que pour formater du texte en dehors d'un tableau.
1 Sélectionnez un tableau, une cellule, une ligne ou une colonne. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
3 Modifiez les propriétés de votre choix.
Note: Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise tr plutôt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise tr, vous obtenez un code HTML plus net et plus concis.
❖ Modifiez les attributs dans le code.
• Pour modifier la légende du tableau, mettez-la en surbrillance, puis tapez une nouvelle légende. • Pour modifier l'alignement de la légende du tableau, placez le point d'insertion dans la légende, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un tableau ont une largeur ou une hauteur spécifiées explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la fenêtre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules. Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poignées de sélection. Dreamweaver affiche la largeur du tableau, ainsi qu'un menu des en-têtes de tableau, en haut ou en bas du tableau lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement aux largeurs apparentes à l'écran. Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver affiche les largeurs de colonne et de tableau ainsi que les menus d'en-têtes pour vous aider à mettre les tableaux en forme. Vous pouvez activer ou désactiver ces informations à votre convenance. Redimensionnement des colonnes et des lignes Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Propriétés ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer. Note: Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du mode Code. Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-têtes de colonne, en haut ou en bas des colonnes lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. Vous pouvez activer ou désactiver les menus d'en-têtes de colonne à votre convenance.
“Utilisation de code de page” on page 309
Redimensionnement d'un tableau ❖ Sélectionnez le tableau.
• Pour redimensionner le tableau verticalement, faites glisser la poignée de sélection vers le bas. • Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignée de sélection vers le coin inférieur droit.
❖ Faites glisser la bordure droite de la colonne à modifier.
❖ Maintenez la touche Maj enfoncée, puis faites glisser la bordure de la colonne.
❖ Faites glisser la bordure inférieure de la ligne.
1 Cliquez dans une cellule. 2 Cliquez sur le menu des en-têtes de tableau, puis choisissez Uniformiser toutes les largeurs.
1 Sélectionnez le tableau. 2 Effectuez l'une des opérations suivantes :
1 Choisissez Affichage > Assistances visuelles > Largeurs de tableau. 2 Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans le
Pour ajouter et supprimer des lignes et des colonnes à l'aide des commandes Modifier > Tableau ou du menu des entêtes de colonne. Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière cellule d'un tableau ajoute automatiquement une ligne.
❖ Cliquez dans une cellule, puis procédez de l'une des manières suivantes :
Insérer Indique les lignes ou les colonnes à insérer. Nombre de lignes ou Nombre de colonnes Le nombre de lignes ou de colonnes à insérer. Où Indique si les nouvelles lignes ou colonnes doivent apparaître avant ou après la ligne ou la colonne de la cellule
• Pour ajouter ou supprimer des colonnes, augmentez ou réduisez la valeur indiquant le nombre de colonnes. Note: Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données.
Utilisez l'inspecteur Propriétés ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules.
1 Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire.
Le contenu des cellules individuelles est placé dans la cellule produite par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.
1 Cliquez dans une cellule, puis procédez de l'une des manières suivantes :
Fractionner la cellule Indique comment la cellule doit être fractionnée, en lignes ou en colonnes. Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes la cellule doit être fractionnée.
❖ Effectuez l'une des opérations suivantes :
Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du tableau ou de la sélection du tableau dans laquelle les cellules seront collées.
1 Sélectionnez une ou plusieurs cellules dans une ligne contiguë et sous forme rectangulaire.
2 Choisissez Edition > Coller.
1 Sélectionnez une ou plusieurs cellules.
2 Choisissez Edition > Effacer ou appuyez sur la touche Suppr.
Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme comme n'importe quel tableau, mais sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve. 1 Cliquez dans une cellule du tableau. 2 Sélectionnez Insérer > Tableau, définissez les options Tableau et cliquez sur OK.
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez également effectuer un tri plus complexe, selon le contenu de deux colonnes. Vous ne pouvez pas trier les tableaux contenant colspan ou rowspan, c'est-à-dire les tableaux qui contiennent des cellules fusionnées. 1 Sélectionnez le tableau ou cliquez dans une cellule. 2 Sélectionnez Commandes > Trier le tableau, définissez les options de la boîte de dialogue et cliquez sur OK. Trier par Détermine quelles valeurs de colonne utiliser pour trier les lignes du tableau. Ordre Détermine comment la colonne doit être triée (dans l'ordre alphabétique ou numérique) et si elle doit être triée
Lorsque le contenu d'une colonne est constitué de chiffres, choisissez Numérique. Un tri par ordre alphabétique appliqué à une liste de nombres à un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots (ayant pour résultat un ordre du type 1, 10, 2, 20, 3, 30) plutôt que comme des nombres (ayant pour résultat un ordre du type 1, 2, 3, 10, 20, 30). Puis/Ordre Détermine l'ordre de tri du tri secondaire sur une colonne différente. Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l'ordre de tri secondaire dans les menus contextuels Ordre. Le tri inclut la première ligne Indique que la première ligne du tableau doit être incluse dans le tri. Si la première ligne
Trier les lignes d'en-tête Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être triées
Trier les lignes de pied de page Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent être
Conserver les couleurs des lignes après le tri Spécifie que les attributs des lignes du tableau (tels que la couleur) doivent rester associés au même contenu après le tri. Si les lignes de votre tableau sont mises en forme avec deux couleurs alternées, n'activez pas cette option pour vous assurer que les lignes du tableau trié s'affichent toujours avec
Fonctionnement des cadres et des jeux de cadres La partie d'une fenêtre du navigateur pouvant afficher un document HTML indépendamment de ce qui apparaît dans le reste de la fenêtre constitue un cadre. Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal. Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres, dont le nombre, la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, à l'exception de la section noframes ; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les documents qu'il doit afficher. Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fichier correspondant. Le navigateur ouvre ensuite les documents qui devront être affichés dans les cadres. Le fichier du jeu de cadres relatif à un site s'appelle généralement index.html et s'affiche par défaut si le visiteur ne spécifie pas de nom de fichier. L'exemple suivant présente une mise en forme de cadre contenant trois cadres : un cadre étroit qui contient la barre de navigation dans la partie latérale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML distinct.
Note: Une « page » peut désigner un seul document HTML ou l'ensemble du contenu d'une fenêtre du navigateur à un moment donné, même si plusieurs documents HTML sont affichés simultanément. Par exemple, l'expression « une page qui utilise des cadres » s'applique généralement à un jeu de cadres et aux documents qui y figurent. Tout site affiché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins quatre documents HTML, à savoir, le fichier du jeu de cadres et les trois documents incluant le contenu qui s'affiche initialement dans les cadres. Lorsque vous concevez une page à l'aide de jeux de cadres dans Dreamweaver, vous devez enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur. Pour obtenir des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse www.tjkdesign.com/articles/frames/.
Adobe déconseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconvénients de l'emploi de cadres, citons :
• Le test de la navigation peut être long. • Comme l'URL de chacune des pages contenues dans les cadres n'est pas affichée dans le navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet à une page donnée (à moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres d'une page). Pour obtenir une justification détaillée de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de Gary White à l'adresse http://apptools.com/rants/framesevil.php. Si vous décidez des les utiliser, les cadres servent généralement à la navigation. Un jeu de cadres inclut généralement un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal. L'emploi de cadres de cette façon offre quelques avantages.
• Chaque cadre possède sa propre barre de défilement (si le contenu ne tient pas entièrement dans une fenêtre) pour que le visiteur puisse faire défiler les cadres indépendamment les uns des autres. Par exemple, un visiteur ayant fait défiler une longue page de contenu jusqu'en bas n'est pas obligé de la faire défiler à nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un autre cadre.
La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des cadres peut s'avérer difficile pour les visiteurs souffrant de handicaps. Par conséquent, si vous utilisez des cadres, incorporez systématiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez également fournir un lien explicite vers une version sans cadre du site. Pour obtenir des informations plus détaillées sur les cadres, consultez le site Web de Thierry Koblentz à l'adresse www.tjkdesign.com/articles/frames/.
Un jeu de cadres imbriqué est un jeu de cadres situé à l'intérieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut contenir plusieurs jeux de cadres imbriqués. La plupart des pages Web avec des cadres utilisent en fait des cadres imbriqués, de même que la plupart des jeux de cadres prédéfinis dans Dreamweaver. Tout jeu de cadres comportant un nombre différent de cadres dans différentes lignes ou colonnes doit être imbriqué. Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (où figure le logo de l'entreprise) et deux cadres sur la ligne inférieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de cadres doit être imbriqué : vous obtenez alors un jeu de cadres de deux lignes et un jeu de cadres de deux colonnes imbriqué dans la deuxième ligne.
Dreamweaver définit tous ses jeux de cadres dans le même fichier. Les deux types d'imbrication produisent des résultats visuels identiques. A moins d'examiner le code, il n'est pas facile de savoir quel type d'imbrication est utilisé. En règle générale, Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous exécutez la commande Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres à l'intérieur d'un cadre. Dans ce cas, vous risquez de ne pas pouvoir définir correctement les cibles des liens. Il est souvent plus simple de garder tous les jeux de cadres définis dans un seul fichier.
Dreamweaver permet d'afficher et de modifier tous les documents associés à un jeu de cadres dans une seule fenêtre de document. Vous pouvez ainsi afficher un aperçu approximatif des pages insérées dans des cadres et les modifier à votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent être déroutants si vous ne les maîtrisez pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. Même si les documents sont vides, vous devez les enregistrer avant de les prévisualiser. En effet, vous ne pouvez afficher un aperçu précis du jeu de cadres que s'il contient l'URL d'un document à afficher dans chaque cadre. Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs, exécutez la procédure suivante : 1 Créez un jeu de cadres et spécifiez le document qui devra apparaître dans chaque cadre. 2 Enregistrez chaque fichier qui apparaîtra dans un cadre. N'oubliez pas que chaque cadre affiche un document
3 Définissez les propriétés de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, définissez les
4 Dans l'inspecteur Propriétés, définissez la propriété Cible pour tous les liens afin que le contenu lié apparaisse dans
Si vous choisissez un jeu de cadres prédéfini, tous les jeux de cadres et cadres nécessaires à la création de la mise en forme sont configurés, ce qui représente le moyen le plus simple d'insérer rapidement une mise en forme avec des cadres dans la page. Vous pouvez uniquement insérer un jeu de cadres prédéfini dans la fenêtre de document en mode Création. Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des « séparateurs » à la fenêtre. Avant de créer un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Création dans la fenêtre de document en choisissant Affichage > Assistances visuelles > Bordures de cadre.
“Dreamweaver et l'accessibilité” on page 720
1 Placez le point d’insertion dans un document et procédez de l’une des manières suivantes :
Les icônes de jeu de cadres fournissent une représentation visuelle de chaque jeu de cadres appliqué au document en cours. La zone bleue de l'icône du jeu de cadres représente le document courant et la zone blanche les cadres qui afficheront d'autres documents. 2 Si vous avez configuré Dreamweaver pour qu'il vous invite à définir des attributs d'accessibilité des cadres,
Note: Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond à sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres. Note: Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité. Choisissez Fenêtre > Cadres pour afficher un diagramme des cadres que vous nommez.
1 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Exemple de page. 3 Sélectionnez le dossier Jeu de cadres dans la colonne Dossier exemple. 4 Sélectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Créer. 5 Si vous avez activé les attributs d'accessibilité aux cadres dans Préférences, la boîte de dialogue Attributs
Note: Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.
Dreamweaver fractionne la fenêtre en cadres. Si vous aviez un document existant ouvert, il apparaît dans l'un des cadres.
• Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de fractionnement dans le sousmenu Modifier > Jeu de cadres.
Création, faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée.
Pour créer trois cadres, créez-en d'abord deux, puis fractionnez l'un d'eux. L'opération de fusion de deux cadres adjacents sans modifier le code du jeu de cadres étant relativement ardue, il est plus difficile de convertir quatre cadres en trois cadres que deux cadres en trois cadres.
❖ Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent.
Note: Vous ne pouvez pas entièrement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer complètement, fermez la fenêtre de document qui l'affiche. Si le fichier du jeu de cadres a été enregistré, supprimez le fichier.
• Pour définir la taille approximative des cadres, faites glisser une bordure de cadre dans la fenêtre de document en mode Création.
Pour modifier les propriétés d'un cadre ou d'un jeu de cadres, vous devez au préalable le sélectionner dans la fenêtre de document ou en utilisant le panneau Cadres.
1 Choisissez Fenêtre > Cadres. 2 Dans le panneau Cadres :
• En mode Création, pour sélectionner un cadre, cliquez dans celui-ci tout en maintenant les touches Maj+Alt (Windows) ou Maj+Option (Macintosh) enfoncées.
Assistances visuelles > Bordures de cadre. Note: Il est souvent plus simple de sélectionner les jeux de cadres dans le panneau Cadres que dans la fenêtre de document. Pour plus d'informations, consultez les rubriques ci-dessus.
(Windows) ou Commande (Macintosh) enfoncée.
Vous pouvez spécifier le contenu initial d'un cadre en insérant un nouveau contenu dans un document vide ou en ouvrant un document dans un cadre. 1 Placez le point d'insertion dans un cadre. 2 Choisissez Fichier > Ouvrir dans un cadre. 3 Sélectionnez un document à ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh). 4 (Facultatif) Si vous voulez afficher ce document par défaut dans le cadre lorsque le jeu de cadres est ouvert dans un
Avant d'afficher l'aperçu d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous les documents qui seront affichés dans les cadres. Vous pouvez enregistrer le fichier du jeu de cadres et chacun des documents contenus dans les cadres individuellement ou enregistrer le fichier du jeu de cadres et tous les fichiers contenus dans les cadres simultanément. Note: Si vous faites appel aux outils visuels de Dreamweaver pour créer un jeu de cadres, un nom de fichier par défaut est attribué à chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de cadres s'appelle Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1.
❖ Sélectionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document.
• Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier > Enregistrer le jeu de cadres sous. Note: Si le fichier du jeu de cadres n'a pas été enregistré, ces deux commandes sont équivalentes.
❖ Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous.
❖ Choisissez Fichier > Enregistrer tous les cadres.
Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de cadre, notamment les bordures, les marges et l'affichage ou non de barres de défilement dans les cadres. La définition d'une propriété de cadre est prépondérante sur la définition de cette propriété pour le jeu de cadres. Si vous le souhaitez, définissez des attributs de cadre, comme l'attribut title (qui est différent de l'attribut name), pour améliorer l'accessibilité. Vous pouvez activer l'option de programmation de l'accessibilité pour les cadres afin de définir des attributs lorsque vous créez des cadres ou bien définir des attributs après avoir inséré un cadre. Pour modifier les attributs d'accessibilité d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code HTML.
“Dreamweaver et l'accessibilité” on page 720 3 Définition des options de l'inspecteur Propriétés des cadres Nom du cadre Nom du cadre est le nom utilisé par l'attribut target d'un lien ou par un script pour référencer le cadre.
), points (.) et espaces. Les noms de cadres doivent commencer par une lettre (et non un chiffre). Ils tiennent compte des majuscules et des minuscules. N'utilisez pas de termes réservés dans JavaScript (tels que les mots top ou navigator) comme noms de cadre. Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour faciliter la création de liens entre plusieurs cadres, donnez un nom à chaque cadre que vous créez. Src Spécifie le document source à afficher dans le cadre. Cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier. Défiler Détermine si des barres de défilement apparaissent dans le cadre. La définition de cette option sur Par défaut n'affecte aucune valeur à l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par défaut. Dans la plupart des navigateurs, la valeur par défaut est Auto. Par conséquent, les barres de défilement n'apparaissent que si la fenêtre du navigateur ne peut pas afficher la totalité du contenu du cadre courant. Ne pas redimens. Empêche les visiteurs de déplacer les bordures du cadre pour redimensionner ce dernier dans un
remplace les paramètres de bordure du jeu de cadres. Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par défaut. Dans la plupart des navigateurs, la valeur proposée est Oui, à moins que l'option Bordures du jeu de cadres parent ne soit définie sur Non. Si plusieurs cadres partagent une même bordure, celle-ci n'est masquée que lorsque l'option Bordures est définie sur Non pour tous les cadres ou lorsque la propriété Bordures du jeu de cadres parent est définie sur Non et l'option Bordures sur Par défaut. Couleur de la bordure Définit la couleur de toutes les bordures du cadre. Cette couleur s'applique à toutes les bordures
Largeur de marge Définit la largeur en pixels des marges gauche et droite (c'est-à-dire l'espace séparant la bordure du
Hauteur de marge Définit la hauteur en pixels des marges supérieure et inférieure (c'est-à-dire l'espace séparant la bordure du cadre de son contenu).
Modifier > Propriétés de la page sont deux opérations différentes. Pour modifier la couleur d'arrière-plan d'un cadre, vous devez définir la couleur d'arrière-plan du document dans le cadre dans les propriétés de la page.
1 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des
2 Choisissez Modifier > Modifier la balise <jeu de cadres>. 3 Sélectionnez Feuille de style/Accessibilité dans la liste de catégories située à gauche, entrez des valeurs et cliquez sur OK.
1 Affichez votre document en mode Code ou Code et création si vous êtes en mode Création. 2 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des
3 Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
4 Dans l'éditeur de balises, effectuez les modifications nécessaires et cliquez sur OK.
1 Placez le point d'insertion dans le cadre. 2 Choisissez Modifier > Propriétés de la page. 3 Dans la boîte de dialogue Propriétés de la page, cliquez sur le menu déroulant Couleur d'arrière-plan, puis
Définition du titre du document d'un jeu de cadres 1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres). 2 Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres.
1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
• Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres). 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin
Bordures Détermine si des bordures apparaissent ou non autour des cadres lorsque le document est affiché dans un
Largeur de bord Spécifie la largeur de toutes les bordures du jeu de cadres. Couleur de la bordure Définit la couleur des bordures. Sélectionnez une couleur avec le sélecteur de couleur ou entrez
Sélection lig./col. Définit la taille des cadres des lignes et colonnes du jeu de cadres sélectionné ; cliquez sur un onglet du côté gauche ou en haut de la zone Sélection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte Valeur.
Pour le spécifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est définie sur Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est alloué, une fois celui des autres lignes et colonnes a été attribué. Pour garantir la compatibilité inter-navigateurs, vous pouvez taper 1 dans le champ Valeur. Cela revient à ne pas spécifier de valeur du tout.
Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous devez définir la cible du lien. L'attribut target d'un lien spécifie le cadre ou la fenêtre dans lequel ou laquelle le contenu associé au lien s'ouvre. Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document lié dans le cadre de contenu principal à droite, vous devez définir le nom de ce dernier comme la cible de chacun des liens de la barre de navigation. Lorsqu'un visiteur clique sur un lien de navigation, le contenu spécifié s'ouvre dans le cadre principal. 1 En mode Création, choisissez un texte ou un objet. 2 Dans la zone Lien de l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes :
• Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers et sélectionnez le fichier avec lequel établir le lien. 3 Dans le menu déroulant Cible de l'inspecteur Propriétés, sélectionnez la fenêtre ou le cadre dans lequel doit
Note: Les noms des cadres s'affichent uniquement lorsque vous modifiez un document dans un jeu de cadres. Si vous modifiez un document dans sa propre fenêtre, les noms des cadres n'apparaissent pas dans le menu déroulant Cible. Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte Cible. Si vous établissez un lien vers une page située en dehors de votre site, utilisez toujours target="_top" ou target="_blank" pour vous assurer que la page ne soit pas considérée comme faisant partie de votre site.
Note: La zone noframes doit contenir un texte plus détaillé que « Vous devez mettre votre navigateur à jour pour pouvoir utiliser des cadres ». Certains visiteurs de sites utilisent des systèmes qui ne leur permettent pas d'afficher les cadres. 1 Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
2 Effectuez l'une des opérations suivantes :
• Sélectionnez Fenêtre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent à l'intérieur des balises noframes, puis tapez le code HTML pour le contenu 3 Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal
Plusieurs comportements JavaScript et commandes de navigation sont particulièrement bien adaptés à l'utilisation de cadres : Texte du cadre Remplace le contenu et le formatage d'un cadre par le contenu que vous spécifiez. Ce contenu peut être n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de façon dynamique Atteindre l'URL Ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette action est
Insérer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une
Pour plus d'informations, consultez la section “Ajout de comportements JavaScript” on page 365.
“Application du comportement Texte d'un cadre” on page 375 “Application du comportement Atteindre l'URL” on page 372 “Application du comportement Définir image barre de navigation” on page 375 “Application du comportement Menu de reroutage” on page 373
“Présentation du panneau Insertion” on page 15 “Modification de balises avec des éditeurs de balises” on page 330 “Sélection et affichage d'éléments dans la fenêtre de document” on page 225
❖ Choisissez Fenêtre > Insérer.
❖ Sélectionnez le nom de la catégorie dans le menu Catégorie. Par exemple, pour afficher les boutons de la catégorie
❖ Cliquez sur le bouton fléché pointant vers le bas situé près de l'icône du bouton.
Selon le type d'objet que vous sélectionnez, une boîte de dialogue d'insertion d'objet s'affiche, le cas échéant, et vous invite à rechercher un fichier ou à spécifier les paramètres d'un objet spécifique. En outre, Dreamweaver vous permet d'insérer du code dans le document ou d'ouvrir un éditeur de balises ou un panneau vous permettant de spécifier les informations avant l'insertion du code. Dans le cas de certains objets, aucune boîte de dialogue ne s'affiche si vous insérez les objets en mode Création, mais un éditeur de balises s'affiche si vous insérez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insérer des objets en mode Création, Dreamweaver passe en mode Code avant de réaliser l'insertion. Note: Certains objets, tels que les ancres nommées, ne sont pas visibles lorsque vous visualisez la page dans la fenêtre d'un navigateur. Vous pouvez afficher des icônes en mode Création indiquant l'emplacement de ces objets invisibles.
❖ Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton
Par exemple, pour insérer un espace réservé d'image sans spécifier de fichier d'image, appuyez sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image. Note: Cette procédure ne contourne pas toutes les boîtes de dialogue d'insertion d'objet. De nombreux objets, y compris les éléments PA et les jeux de cadres, n'insèrent pas d'espaces réservés ni d'objets avec des valeurs par défaut.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Afficher la boîte de dialogue lors
Option (Macintosh) enfoncée tandis que vous créez l'objet. Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l'inspecteur Propriétés pour modifier les propriétés de l'objet après l'avoir inséré.
Insertion 1 Sélectionnez l'une des catégories du panneau Insertion. 2 Cliquez à l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrôle enfoncée
3 Dans la boîte de dialogue Personnaliser les objets favoris, apportez les modifications désirées, puis cliquez sur OK.
• Pour supprimer un objet ou un séparateur, sélectionnez l'objet dans le volet Objets favoris situé à droite, puis cliquez sur le bouton Supprimer l'objet sélectionné dans la liste Objets favoris, au-dessus du volet.
4 Si la catégorie Favoris n'est pas la catégorie active, sélectionnez-la afin de voir les modifications apportées.
❖ Sélectionnez la catégorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par défaut et le placer à l'horizontale, au-dessus de la fenêtre de document. Dans ce cas, ce panneau se transforme en barre d'outils, même s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils. 1 Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fenêtre de document.
1 Cliquez sur la poignée de la barre Insertion horizontale (sur sa gauche) et tirez la barre à l'endroit où vos panneaux
2 Placez le panneau Insertion à l'endroit désiré puis déposez-le. Une ligne bleue indique où vous pouvez déposer le
Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de formatage dans la boîte de dialogue Propriétés de la page (Modifier > Propriétés de la page). Cette boîte de dialogue permet de spécifier la famille et la taille par défaut de la police, la couleur d'arrière-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes. Les modifications que vous apportez dans la boîte de dialogue Propriétés de la page s'appliquent à la page entière. Dreamweaver propose deux méthodes de modification des propriétés de page : CSS ou HTML. Adobe recommande d'utiliser CSS pour définir des arrière-plans et modifier les propriétés des pages. Note: Les propriétés de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille de style CSS externe, Dreamweaver n'écrase pas les balises définies dans la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
La boîte de dialogue Propriétés de la page permet de spécifier diverses options de base de mise en forme des pages Web, comme la police, la couleur de fond et l'image de fond. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.
Taille Spécifie la taille de police par défaut à utiliser dans vos pages Web. Dreamweaver utilise la taille de police
Couleur du texte Spécifie la couleur d'affichage des polices par défaut. Couleur d'arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'option Couleur d'arrière-plan puis choisissez une couleur dans le sélecteur. Image d’arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et sélectionnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.
Répétition Indique comment l'image d'arrière-plan sera affichée sur la page :
• Sélectionnez l'option Répétition pour répéter, ou mettre en mosaïque, l'image à l'horizontale et la verticale. • Sélectionnez l'option Répéter-x pour former une mosaïque horizontale. • Sélectionnez l'option Répéter-y pour former une mosaïque verticale. Marge gauche et Marge droite Spécifie la taille des marges à gauche et à droite de la page. Marge haut et Marge bas Spécifie la taille des marges en haut et en bas de la page.
La définition de propriétés dans cette catégorie de la boîte de dialogue Propriétés de la page entraîne un formatage de la page à l'aide de code HTML au lieu de code CSS. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie Apparence (HTML) et définissez les options. Image d’arrière-plan Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et sélectionnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.
Arrière-plan Définit la couleur d'arrière-plan de la page. Activez l'option Couleur d'arrière-plan puis choisissez une
Text Spécifie la couleur d'affichage des polices par défaut. Lien Spécifie la couleur à appliquer au texte qui constitue le lien. Liens visités Spécifie la couleur à appliquer aux liens visités. Liens actifs Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien. Marge gauche et Marge droite Spécifie la taille des marges à gauche et à droite de la page. Marge haut et Marge bas Spécifie la taille des marges en haut et en bas de la page.
Dreamweaver crée des règles CSS pour vos liens et les applique à tous les liens que vous utilisez sur la page. Les règles sont incorporées dans la section head de la page. Note: Si vous souhaitez personnaliser des liens spécifiques sur une page, vous devez créer des règles CSS individuelles, puis les appliquer séparément à ces liens. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie Liens (CSS) et définissez les options. Police du lien Définit la famille de polices par défaut à utiliser pour les liens. Par défaut, Dreamweaver utilise la police
Taille Définit la taille de police par défaut à utiliser pour les liens. Couleur des liens Spécifie la couleur à appliquer au texte qui constitue le lien. Liens visités Spécifie la couleur à appliquer aux liens visités. Liens de survol Spécifie la couleur à appliquer lorsque la souris ou le curseur est placé sur un lien. Liens actifs Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien. Style souligné Spécifie le style de soulignement à appliquer aux liens. Si un style de soulignement est déjà défini pour votre page (par exemple, par le biais d'une feuille de style CSS), le menu par défaut est remplacé par la mention « ne pas modifier ». Cette mention vous informe d'un style de lien qui a été défini. Si vous modifiez le style de soulignement à l'aide de la boîte de dialogue Propriétés de la page, Dreamweaver modifiera la définition de lien précédente.
Vous pouvez spécifier les polices, les tailles de police et les couleurs pour vos titres de page. Par défaut, Dreamweaver crée des règles CSS pour vos titres et les applique à tous les titres que vous utilisez sur la page. Les règles sont incorporées dans la section head de la page. Les titres peuvent être sélectionnés dans l'inspecteur Propriétés HTML. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie En-têtes (CSS) et définissez les options. Police des en-têtes Définit la famille de polices par défaut à utiliser pour les en-têtes. Dreamweaver utilise la famille
En-tête 1 à En-tête 6 Spécifie les tailles et couleurs à utiliser pour chaque niveau de balises d'en-tête.
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie Titre/codage et définissez les options. Titre Spécifie le titre de la page, qui s'affiche dans la barre de titre de la fenêtre de document et dans la plupart des fenêtres du navigateur. Type de document (DTD) Spécifie une définition de type de document. Par exemple, vous pouvez rendre un document
Codage Précise le codage utilisé pour les caractères du document.
Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage. Formulaire de normalisation Unicode N'est activée que si vous sélectionnez UTF 8 en tant que code par défaut. Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalisation Unicode.
La normalisation est le processus consistant à s'assurer que tous les caractères pouvant être enregistrés sous différentes formes le sont tous sous la même forme. C'est-à-dire que tous les caractères « ë » d'un document sont enregistrés sous forme de « e tréma » unique ou de « e + tréma de combinaison », mais pas sous les deux formes dans un même document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spécifiques pouvant être utilisés, consultez le site Web Unicode www.unicode.org/reports/tr15. Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il
Vous pouvez insérer un fichier image à utiliser comme guide dans la création de votre page. L'image s'affiche sous la forme d'une image d'arrière-plan, que vous pouvez utiliser comme guide pour la mise en forme de votre page. 1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés. 2 Sélectionnez la catégorie Tracé de l’image et définissez les options. Tracé de l'image Permet de spécifier l'image à utiliser comme guide pour reproduire une mise en page. Cette image
Transparence Détermine l'opacité du tracé de l'image, de complètement transparent à complètement opaque.
L'encodage de document précise le codage utilisé pour les caractères dans le document. L'encodage du document est spécifié dans une balise meta, insérée dans l'en-tête du document ; il indique au navigateur et à Dreamweaver le mode de décodage du document et les polices à utiliser pour afficher le texte décodé. Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
Si vous spécifiez Japonais (Shift JIS), la balise meta suivante est insérée : <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
Vous modifier l'encodage du document dans une page et modifier l'encodage utilisé par défaut par Dreamweaver pour créer de nouveaux documents, y compris les polices utilisées pour afficher chaque encodage.
“Définition du type et du codage par défaut d'un document” on page 73
Pour sélectionner un élément dans le mode Création de la fenêtre de document, cliquez dessus. Si un élément est invisible, vous devez le rendre visible pour le sélectionner. Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous créez une page.
Vous pouvez créer certains éléments invisibles (tels que les commentaires et les ancres nommées) à l'aide des boutons dans la catégorie Commun du panneau Insertion. Vous pouvez ensuite modifier ces éléments à l'aide de l'inspecteur Propriétés.
“Affichage du code” on page 315 “Utilisation du panneau Insertion” on page 218
• Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le du rectangle de sélection.
Certains objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple, en mode conception, un élément PA peut se trouver n'importe où dans la page, mais en mode Code, le code définissant l'élément PA se trouve dans un emplacement fixe. Lorsque les éléments invisibles sont affichés, Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l'emplacement du code de ces éléments. En sélectionnant le marqueur, vous sélectionnez tout l'élément : si, par exemple, vous sélectionnez le marqueur d'un élément PA, tout l'élément PA est sélectionné
Création et en mode Code. Le sélecteur de balises affiche toujours les balises qui contiennent la sélection ou le point d'insertion en cours. La balise à l'extrême gauche est la balise ultrapériphérique contenant la sélection ou le point d'insertion en cours. La balise suivante est contenue dans cette balise ultrapériphérique, et ainsi de suite. La balise à l'extrême droite est la balise la plus à l'intérieur contenant la sélection ou le point d'insertion en cours. Dans l'exemple suivant, le point d'insertion est situé dans une balise de paragraphe,<p>. Pour sélectionner le tableau contenant le paragraphe que vous souhaitez sélectionner, sélectionnez la balise <table> à gauche de la balise <p>.
❖ Effectuez l'une des opérations suivantes :
• Choisissez Affichage > Code. • Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création. • Choisissez Affichage > Code et création. • Choisissez Fenêtre > Inspecteur de code.
également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour que la sélection apparaisse.
❖ Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Utilisez les préférences des éléments invisibles pour déterminer les types d'éléments devant être affichés lorsque l'option Affichage > Assistances visuelles > Eléments invisibles est activée. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis cliquez sur
2 Sélectionnez les éléments à rendre visibles, puis cliquez sur OK. Ancres nommées Affiche une icône marquant l'emplacement de chaque ancre nommée (a name ="") dans le
Scripts Affiche une icône marquant l'emplacement de code Java Script ou VBScript dans le corps du document.
Comments Affiche une icône marquant l'emplacement d’un commentaire HTML. Sélectionnez cette icône pour
Sauts de ligne Affiche une icône marquant l'emplacement de chaque saut de ligne (BR). Cette option est
Cartes graphiques côté client Affiche une icône marquant l'emplacement de chaque carte graphique du document. Styles incorporés Affiche une icône marquant l'emplacement de styles CSS incorporés dans le corps du document. Les styles CSS placés dans l'en-tête du document n'apparaissent pas dans la fenêtre de document. Champs de formulaire masqués Affiche une icône marquant l'emplacement de champs de formulaire dont l'attribut type est fixé à "hidden".
Points d'ancrage des éléments PA Affiche une icône marquant l'emplacement du code définissant un élément PA.
éléments invisibles ; seul le code qui les définit est invisible. Sélectionnez l'icône afin de sélectionner l'élément PA. Vous pouvez ainsi afficher le contenu de l'élément PA, même s'il est marqué comme masqué. Points d'ancrage des éléments alignés Affiche une icône marquant l'emplacement du code HTML des éléments qui
ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document. En règle générale, lorsqu'elles sont traitées par un serveur, ces balises génèrent des balises HTML. Par exemple, une balise <CFGRAPH> génère un tableau HTML lorsqu'elle est traitée par un serveur ColdFusion. Dreamweaver représente la balise à l'aide d'un élément ColdFusion invisible, car il lui est impossible de déterminer la sortie dynamique finale de la page. Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les
Il s'agit généralement de balises de configuration, de traitement ou de logique (par exemple <CFSET>, <CFWDDX> et <CFXML>) qui ne génèrent pas de balises HTML. Affichage CSS: Aucun Affiche une icône qui montre l'emplacement du contenu masqué par la propriété display:none de la feuille de style liée ou incorporée. Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par défaut.
Inclusions côté serveur Affiche le contenu réel de chaque fichier d'inclusion côté serveur.
Couleurs Web sécurisées En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Safari et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web. Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc). L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développez votre site pour les utilisateurs de systèmes informatiques modernes. La palette de couleurs sécurisée pour le Web peut s'avérer utile si vous créez des sites pour des appareils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces appareils sont équipés d'un écran noir et blanc (1 bpc) ou 256 couleurs (8 bpc). Les palettes Cubes de couleur (valeur par défaut) et Ton continu de Dreamweaver utilisent la palette sécurisée pour le Web de 216 couleurs ; lorsque vous sélectionnez une couleur dans ces palettes, c'est la valeur hexadécimale correspondante qui s'affiche. Pour choisir une couleur en dehors de la gamme sécurisée pour le Web, ouvrez le nuancier du système en cliquant sur le bouton Roue chromatique en haut à droite du sélecteur de couleurs de Dreamweaver. Celle-ci n'est pas limitée aux couleurs sécurisées pour le Web.
Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de nombreuses boîtes de dialogue, comportent une icône permettant d'ouvrir un sélecteur de couleur. Choisissez la couleur d'un élément de page dans le sélecteur. Vous pouvez également définir la couleur par défaut du texte des éléments de votre page. 1 Cliquez sur l'icône des couleurs dans n'importe quelle boîte de dialogue ou dans l'inspecteur Propriétés.
2 Effectuez l'une des opérations suivantes :
Dreamweaver. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver sélectionne la couleur de l'emplacement où vous avez cliqué. Cependant, si vous passez à une autre application, il peut s'avérer nécessaire de cliquer sur une fenêtre de Dreamweaver pour continuer à travailler dans Dreamweaver.
Note: Les palettes Cubes de couleur et Ton continu sont sécurisées pour le Web, contrairement aux palettes Système d'exploitation Windows, Mac OS et Niveaux de gris.
• Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique
• Saisissez une échelle d'agrandissement dans le champ Zoom. Vous pouvez également effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou Commande+= (Macintosh). 3 Pour effectuer un zoom arrière (réduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option
Vous pouvez également effectuer une réduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+- (Macintosh).
❖ Cliquez sur l'outil Sélection (icône en forme de pointeur) dans le coin inférieur droit de la fenêtre du document,
1 Cliquez sur l'outil Main (icône en forme de main) dans le coin inférieur droit de la fenêtre du document. 2 Faites glisser la page.
1 Sélectionnez un élément de la page. 2 Sélectionnez Affichage > Ajuster à la sélection.
❖ Sélectionnez Affichage > Ajuster à la page.
❖ Sélectionnez Affichage > Ajuster à la largeur.
Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets liés, tels que les images et les plug-ins. Dreamweaver estime la durée de téléchargement en fonction de la vitesse de connexion entrée dans les préférences de la Barre d'état. Le temps de téléchargement réel dépend de l'état du trafic sur Internet,
3 Choisissez la vitesse de connexion à partir de laquelle le temps de téléchargement sera calculé, puis cliquez sur OK.
“Définition de la taille des fenêtres et de la vitesse de connexion” on page 22
Ajout de texte dans un document Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fenêtre du document ou effectuer un copier/coller. Vous pouvez également importer du texte à partir d’autres documents. Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial. La commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorant son formatage initial afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne coller que le texte. Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez définir des préférences de collage comme options par défaut. Note: En mode Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans formatage). ❖ Pour ajouter du texte dans un document, procédez de l'une des manières suivantes :
• Copiez du texte à partir d'une autre application, passez dans Dreamweaver, placez le point d'insertion dans la fenêtre du document en mode Création, puis choisissez Edition > Coller ou Edition > Collage spécial. Lorsque vous choisissez Edition > Collage spécial, vous pouvez choisir plusieurs options de formatage du texte collé. Vous pouvez également coller du texte à l'aide des raccourcis clavier suivants : Option de collage
Le langage HTML prévoit des noms d'entités pour de nombreux caractères spéciaux, par exemple le symbole de copyright (©), l'esperluette (&) et le symbole Marque déposée (®). Chaque entité est représentée à la fois par un nom HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (dans ce cas, ). Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les caractères spéciaux supérieur à et inférieur à sans que Dreamweaver les interprète comme du code. Dans ce cas, utilisez > pour le signe supérieur à (>) et < pour le signe inférieur à (<). Malheureusement, de nombreux navigateurs anciens n'affichent pas correctement la plupart de ces entités. 1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère spécial. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Texte du panneau Insertion, cliquez sur le bouton Caractères et choisissez le caractère désiré dans le sous-menu. Un grand nombre d'autres caractères spéciaux sont disponibles. Pour en sélectionner un, choisissez Insertion > HTML > Caractères spéciaux > Autre ou cliquez sur le bouton Caractères de la catégorie Texte du panneau Insertion, puis choisissez Autres caractères. Choisissez un caractère dans la boîte de dialogue Insérer autre caractère et cliquez sur OK.
Le langage HTML n'autorisant qu'un seul espace entre les caractères, il convient d'insérer un espace insécable afin d'ajouter un espace supplémentaire dans un document. Vous pouvez définir une préférence pour l'insertion automatique d'un espace insécable dans un document.
❖ Effectuez l'une des opérations suivantes : (Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe. Les navigateurs Web insèrent automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-même espacer les paragraphes d'une ligne vierge en insérant un saut de ligne.
❖ Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Les listes de définitions n'utilisent pas de caractères d'en-tête tels que des puces ou des nombres et sont souvent utilisées dans les glossaires ou les descriptions. Les listes peuvent également être imbriquées, c'est-à-dire qu'elles contiennent d'autres listes. Par exemple, vous pouvez imbriquer une liste numérotée ou à puces au sein d'une autre liste de même type. La boîte de dialogue Propriétés de liste vous permet de définir l'aspect d'une liste complète ou d'un élément de liste. Vous pouvez définir le style de numérotation, remettre à zéro la numérotation ou définir les options du style de puce d'éléments individuels de la liste ou de la liste complète.
“Définition des propriétés CSS” on page 144
2 Tapez le texte de l'élément de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour
3 Pour marquer la fin de la liste, appuyez à deux reprises sur la touche Entrée (Windows) ou Retour (Macintosh).
1 Sélectionnez une suite de paragraphes pour les transformer en liste. 2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton correspondant à une liste à puces ou une liste numérotée,
1 Sélectionnez les éléments de liste à imbriquer. 2 Dans l'inspecteur Propriétés HTML, cliquez sur le bouton Blockquote, ou choisissez Format > Retrait.
3 Appliquez un nouveau style ou type de liste au texte en retrait en suivant la même procédure que celle utilisée ci-
2 Placez le point d'insertion dans le texte de l'élément de la liste, puis choisissez Format > Liste > Propriétés de la liste
3 Sélectionnez les options que vous voulez appliquer à la liste : Type de liste Spécifie les propriétés de la liste, tandis que Elément de liste caractérise un élément individuel d'une liste.
Style Définit le style des numéros ou des puces utilisés avec une liste numérotée ou à puces. Tous les éléments de la liste prendront ce style, sauf si vous attribuez un nouveau style à certains éléments. Démarrer le comptage Définit la valeur à attribuer au premier élément d'une liste numérotée.
1 Dans la fenêtre de document, placez le point d'insertion dans le texte d'un élément de la liste. 2 Choisissez Format > Liste > Propriétés de la liste. 3 Dans Elément de liste, sélectionnez les options que vous voulez définir : Nouveau style Caractérise le style de l'élément de liste sélectionné. Les styles du menu Nouveau style sont apparentés au type de liste affiché dans le menu Type de liste. Si, par exemple, vous avez choisi l'option Liste simple dans le menu Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style. Réinitialiser le compte à Définit un numéro spécifique à partir duquel numéroter les éléments de liste.
Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des balises HTML dans un ou plusieurs documents. Le panneau Recherche, situé dans le groupe de panneaux Résultats, indique les résultats des recherches pour lesquelles l'option Rechercher tout est sélectionnée. Note: Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et Retrouver sur le site distant.
“Affichage du code” on page 315 “Expressions régulières” on page 312
1 Ouvrez le document dans lequel la recherche doit être effectuée ou sélectionnez des documents ou un dossier dans
2 Sélectionnez la commande Edition > Rechercher et remplacer. 3 L'option Rechercher dans vous permet de définir les fichiers dans lesquels effectuer la recherche : Texte sélectionné Permet de limiter la recherche au texte alors sélectionné dans le document actif.
Dossier Permet de limiter la recherche à un dossier spécifique. Après avoir choisi Dossier, cliquez sur l'icône représentant un dossier pour sélectionner le dossier dans lequel effectuer votre recherche. Fichiers sélectionnés dans le site Permet de limiter la recherche aux fichiers et dossiers actuellement sélectionnés dans
Site local en cours entier Permet d'étendre la recherche à l'ensemble des documents HTML, des fichiers de
4 Le menu déroulant Rechercher permet de spécifier le type de recherche à effectuer : Code source Permet de rechercher des chaînes de texte spécifiques dans le code source HTML. Vous pouvez
Text Permet de rechercher des chaînes spécifiques de texte au sein du document. Une recherche sur du texte ignore
Texte (avancé) Permet de rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à l'extérieur d'une ou
<i>essaie</i> de terminer son travail à temps, mais n'y arrive pas toujours. Il essaie cependant farouchement.
Commande+Retour (Macintosh) pour insérer des sauts de ligne au sein des champs de recherche, ce qui permet de rechercher un caractère de retour chariot. Lorsque vous effectuez une telle recherche, désactivez l'option Ignorer les différences entre les espaces blancs si vous n'utilisez pas d'expressions régulières. Cette recherche porte sur un caractère de retour chariot en particulier, et non sur l'occurrence d'un saut de ligne ; par exemple, elle ne trouvera pas de balise <br> ou <p>. Les caractères de retour chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne. 5 Utilisez les options suivantes pour élargir ou limiter la recherche : Respecter la casse Limite la recherche au texte dont la casse correspond à celle du texte recherché. Par exemple, si vous recherchez le français, vous ne trouverez pas le Français. Ignorer les différences entre les espaces blancs Traite tout espace blanc comme s'il s'agissait d'un simple espace pour les besoins de la recherche. Par exemple, si cette option est activée, ce texte correspond à ce texte et texte, mais pas à cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions àce régulières est sélectionnée ; vous devez écrire explicitement l'expression régulière pour ignorer les espaces blancs. Notez que les balises <p> et <br> ne sont pas comptées comme des espaces blancs. Mot entier Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.
Utiliser les expressions régulières Fait en sorte que certains caractères et chaînes courtes (tels que ?, *, \w et \b) de la
élément autre que du code source, une boîte de dialogue s'affiche et vous informe que Dreamweaver synchronise les deux fenêtres avant d'effectuer la recherche. 6 Pour rechercher des chaînes sans les remplacer, cliquez sur Rechercher suivant ou sur Rechercher tout : Suivant Permet de passer à l'occurrence suivante dans le document actif et de la sélectionner. S'il s'agit de la dernière
Rechercher tout Ouvre le panneau Recherche du groupe de panneaux Résultats. Si la recherche ne porte que sur un
7 Pour remplacer les chaînes trouvées, cliquez sur Remplacer ou sur Remplacer tout. 8 Cliquez sur Fermer lorsque vous avez terminé.
❖ Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
1 Choisissez Fenêtre > Résultats pour afficher le panneau Rechercher. 2 Double-cliquez sur une ligne du panneau Rechercher.
Si la recherche porte sur plusieurs fichiers, le fichier contenant ce résultat s'ouvre.
❖ Cliquez sur le bouton Rechercher et remplacer.
❖ Cliquez sur le bouton Arrêter.
La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouvées par un autre texte ou d'autres balises. 1 Sélectionnez la commande Edition > Rechercher et remplacer. 2 Dans le menu déroulant Rechercher, sélectionnez Balise spécifique. 3 Sélectionnez une balise spécifique ou [toute balise] dans le menu déroulant situé près du menu déroulant
4 (Facultatif) Limitez la recherche à l'aide de l'un des modificateurs de balise suivants : Avec attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
Sans attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
trouvée. Par exemple, dans le code <b><font size="4">heading 1</font></b>, labalise font est placée à l'intérieur de la balise b. Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance
7 Si vous devez exécuter une action lorsque la balise est trouvée (telle que le retrait ou le remplacement de cette
La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouvées par un autre texte ou d'autres balises. 1 Sélectionnez la commande Edition > Rechercher et remplacer. 2 Dans le menu déroulant Rechercher, choisissez Texte (avancé). 3 Tapez le texte dans la zone de texte situé près du menu déroulant Rechercher.
4 Sélectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu déroulant
Par exemple, cliquez sur Dans la balise, puis sélectionnez title. 5 (Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche à l'aide d'un des modificateurs de balise suivants : Avec attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit
Sans attribut Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Contenant Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit
Ne contenant pas Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la
Balise interne Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance
1 Sélectionnez l'abréviation ou l'acronyme dans le text de la page. 2 Choisissez Insertion > HTML > Objets texte > Abréviation ou Insertion > HTML > Objets texte > Acronyme. 3 Saisissez la forme développée de l'acronyme ou de l'abréviation. 4 Entrez la langue, comme en pour l'anglais, de pour l'allemand ou it pour l'italien.
Vous pouvez configurer des préférences de collage spécial à utiliser par défaut avec la commande Edition > Coller lorsque vous collez du texte provenant d'autres applications. Par exemple, si vous souhaitez coller systématiquement le texte uniquement, ou le texte avec un formatage de base, définissez l'option par défaut dans la boîte de dialogue Préférences de copie/collage. Note: Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial. La commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorant son formatage initial afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne coller que le texte. Note: Les préférences définies dans la boîte de dialogue Préférences de copie/collage ne s'appliquent qu'aux éléments collés dans la vue Création. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Cliquez sur la catégorie Copier/Coller. 3 Définissez les options suivantes, puis cliquez sur OK. Texte seul Permet de coller du texte non formaté. Si le texte d'origine est formaté, ce formatage, y compris les sauts de ligne et de paragraphes, est supprimé. Texte structuré Permet de coller du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
Texte structuré avec formatage de base Permet de coller du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b, i, u, strong, em, hr, abbr ou acronym). Texte structuré avec formatage complet Permet de coller du texte en conservant toute sa structure, son formatage
Note: L'option Mise en forme complète ne permet pas de conserver les styles CSS provenant d'une feuille de style externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers. Conserver les sauts de ligne Permet de conserver les sauts de ligne dans le texte collé. Cette option est désactivée si
Nettoyage des espaces inter-paragraphes de Word Sélectionnez cette option lorsque vous avez sélectionné Texte structuré ou Mise en forme de base et souhaitez éliminer l'espace supplémentaire qui sépare les paragraphes lorsque vous collez votre texte.
Note: Lorsque vous créez des styles CSS intégrés, Dreamweaver ajoute directement le code d'attribut du style au corps de la page.
Les méthodes de formatage du texte dans Dreamweaver s'apparentent à celles d'un logiciel de traitement de texte standard. Vous pouvez définir le style de formatage par défaut (Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l'alignement du texte sélectionné ou appliquer des styles de texte tels que gras, italique, code (texte à chasse fixe) et souligné. Dreamweaver comprend deux inspecteurs Propriétés, intégrés pour n'en faire qu'un : l'inspecteur Propriétés CSS et l'inspecteur Propriétés HTML. Lorsque vous utilisez l'inspecteur Propriétés CSS, Dreamweaver met en forme le texte à l'aide de feuilles de style en cascade (CSS). Les styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle de l'aspect de la page Web tout en proposant des fonctions qui permettent d'améliorer l'accessibilité et de réduire la taille des fichiers. L'inspecteur Propriétés CSS permet d'accéder à des styles existants et d'en créer de nouveaux. CSS permet de modifier le style d'une page Web sans compromettre sa structure. En séparant les éléments de conception visuelle (polices, couleurs, marges, etc.) des éléments logiques internes à la structure d'une page Web, CSS offre aux concepteurs un contrôle à la fois visuel et typographique sans nuire à l'intégrité du contenu. De plus, définir une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes graphiques, aux balises font, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la maintenance du site et fournit un point central à partir duquel il est possible de contrôler les attributs de conception sur plusieurs pages Web. Vous pouvez stocker les styles créés à l'aide de CSS directement dans le document ou, pour disposer de davantage de puissance et de flexibilité, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe à plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accéder à toutes les règles CSS d'une page, utilisez le panneau Styles CSS (Fenêtre > Styles CSS). Pour accéder aux règles qui s'appliquent à la sélection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu Règle cible de l'inspecteur Propriétés CSS. Si vous le préférez, vous pouvez mettre en forme le texte de vos pages Web à l'aide de balises de marquage HTML. Pour employer des balises HTML au lieu de CSS, mettez le texte en forme à l'aide de l'inspecteur Propriétés HTML. Note: Vous pouvez combiner des formatages CSS et HTML 3.2 dans une même page. Le formatage est appliqué de façon hiérarchique : le formatage HTML 3.2 supplante celui appliqué par des feuilles de style CSS externes et le formatage CSS intégré dans un document supplante les styles CSS externes.
“Ouverture du panneau Styles CSS” on page 140 “Description des feuilles de style en cascade” on page 132
La règle s'affiche dans le menu Règle cible.
3 Apportez les modifications désirées à la règle à l'aide des différentes options de l'inspecteur Propriétés CSS. Règle cible La règle que vous modifiez dans l'inspecteur Propriétés CSS. Lorsqu'un style existant est appliqué au texte,
Nouvelle règle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique. Modifier la règle Ouvre la boîte de dialogue Définition des règles CSS pour la règle cible. Par contre, si vous choisissez Nouvelle règle CSS dans le menu Règle cible puis que vous cliquez sur le bouton Modifier la règle, Dreamweaver ouvre la boîte de dialogue Définition de nouvelle règle CSS. Panneau CSS Ouvre le panneau Styles CSS et affiche les propriétés de la règle cible en mode Actuel. Police Modifie la police de la règle cible. Taille Définit la taille de police de la règle cible. Couleur du texte Définit la couleur sélectionné comme couleur de police dans la règle cible. Sélectionnez une couleur sécurisée pour le Web en cliquant sur le sélecteur de couleur ou tapez directement une valeur hexadécimale (par exemple, #FF0000) dans le champ de texte adjacent. Gras Ajoute la propriété gras à la règle cible. Italique Ajoute la propriété italique à la règle cible. Aligner à gauche, Centrer et Aligner à droite Ajoute les propriétés d'alignement respectives à la règle cible.
Vous trouverez un didacticiel vidéo sur l'utilisation de l'inspecteur Propriétés CSS à l'adresse www.adobe.com/go/lrvid4041_dw_fr.
1 Si ce n'est pas déjà fait, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) puis cliquez sur le bouton HTML. 2 Sélectionnez le texte que vous souhaitez mettre en forme. 3 Définissez les options que vous voulez appliquer au texte sélectionné : Format Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise <p>, En-tête 1 ajoute une balise H1, et ainsi de suite.
Classe Affiche le style de classe appliqué au texte sélectionné. Si aucun style n'est appliqué à la sélection, la mention Aucun styleCSS apparaît dans le menu déroulant. Si plusieurs styles sont appliqués à la sélection, le menu est vide.
• Choisissez Aucun pour ne plus appliquer le style sélectionné. • Pour renommer le style, choisissez Renommer. • Sélectionnez Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d'attacher une feuille de style externe à la page. Gras Applique soit <b> soit <strong> au texte sélectionné en fonction de la préférence de style définie dans la catégorie Général de la boîte de dialogue Préférences. Italique Applique soit <i> soit <em> au texte sélectionné en fonction de la préférence de style définie dans la catégorie
Liste non ordonnée Crée une liste à puces à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle
Liste numérotée Crée une liste numérotée à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle
Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte sélectionné, en insérant ou
Lien Crée une liste à puces à partir du texte sélectionné. Cliquez sur l'icône de dossier pour rechercher un fichier de
Titre Définit l'infobulle textuelle d'un lien hypertexte. Cible Spécifie la fenêtre ou le cadre dans lequel sera chargé le document lié :
HTML. Vous pouvez renommer des styles dans cette liste en choisissant l'option Renommer, à la fin de la liste des styles de classes. 1 Choisissez Renommer dans le menu déroulant Style de l'inspecteur Propriétés du texte. 2 Sélectionnez le style à renommer dans le menu contextuel Renommer un style. 3 Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
En outre, elle ignore les balises HTML et les valeurs d'attributs. Note: Dreamweaver peut uniquement vérifier l'orthographe du fichier actuellement ouvert dans la fenêtre de document. Il ne peut pas vérifier l'orthographe de tous les fichiers d'un site en même temps. Par défaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition > Préférences > Général (Windows) ou Dreamweaver > Préférences > Général (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le menu déroulant Dictionnaire du correcteur d'orthographe. 1 Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7.
2 Sélectionnez l'option correspondant au traitement que vous souhaitez appliquer à l'occurrence. Ajouter Ajoute le mot non reconnu à votre dictionnaire personnel. Ignorer Ignore cette occurrence du mot non reconnu. Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte Remplacer par, ou par le mot sélectionné dans la liste Suggestions. Tout ignorer Ignore toutes les occurrences du mot non reconnu. Tout remplacer Remplace toutes les occurrences du mot non reconnu.
Vous pouvez importer des données tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des fichiers Microsoft Excel ou d'une base de données) sous forme de fichiers texte délimités. Vous pouvez importer et mettre en forme des données tabulaires, ainsi qu'importer du text à partir de documents HTML Microsoft Word. Vous pouvez également ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver en important le contenu du fichier Excel dans une page Web. 1 Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du tableau > Importer les
2 Recherchez le fichier souhaité ou entrez son nom dans la zone de texte. 3 Sélectionnez le délimiteur utilisé lors de l'enregistrement du fichier en tant que texte délimité. Les options sont Tab,
Si vous sélectionnez Autre, un champ vierge s'affiche à côté de l'option. Entrez le caractère utilisé comme délimiteur. 4 Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les données, puis cliquez sur OK.
Vous pouvez insérer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque vous importez un document Word ou Excel, Dreamweaver reçoit le code HTML converti et l'insère dans votre page Web. La taille du fichier, après réception du code HTML converti par Dreamweaver, doit être inférieure à 300 Ko. Au lieu d'importer tout le contenu d'un fichier, vous pouvez également coller une partie du document Word et protéger son formatage. Note: Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous devez insérer un lien vers le document. 1 Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel. 2 En mode Création, procédez de l'une des manières suivantes pour sélectionner le fichier :
• Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel. 3 Dans la boîte de dialogue Insérer un document, recherchez le fichier à ajouter, sélectionnez une option de
Texte seul Permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, tout le formatage est supprimé. Texte structuré Permet d'insérer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous
Texte structuré avec formatage de base Permet d'insérer du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr, abbr ou acronym tag). Texte structuré avec formatage complet Permet d'insérer du texte en conservant toute sa structure, son formatage
Nettoyage des espaces inter-paragraphes de Word Permet d'éliminer les espaces superflus entre les paragraphes lorsque vous collez le texte alors que l'option Texte structuré ou Mise en forme de base est sélectionnée.
Vous pouvez insérer un lien vers un document Microsoft Word ou Excel dans une page existante. 1 Ouvrez la page où le lien doit être affiché. 2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaçant le lien à l'emplacement
En copiant le document dans le dossier racine du site, vous êtes assuré que le document sera disponible lors de la publication du site Web. 5 Lorsque vous chargez votre page sur le serveur Web, vous devez également charger le fichier Word ou Excel.
Utilisez le menu Format de l'inspecteur Propriétés HTML ou le sous-menu Format > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tête. 1 Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie du texte du paragraphe. 2 Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Propriétés, puis sélectionnez une
Dreamweaver > Préférences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal après le titre est désactivée dans les Options d'édition de la catégorie Général.
“Définition des propriétés de texte dans l'inspecteur Propriétés” on page 239 “Définition des propriétés CSS” on page 144
Vous pouvez modifier la couleur par défaut de tout le texte d'une page, ou la couleur du texte sélectionné sur la page.
“Utilisation du sélecteur de couleur” on page 229
❖ Choisissez Modifier > Propriétés de la page > Apparence (HTML) ou Liens (HTML), puis choisissez la couleur
Modification de la couleur du texte sélectionné ❖ Choisissez Format > Couleur, sélectionnez une couleur dans le sélecteur système, puis cliquez sur OK.
Vous pouvez aligner du texte à l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouvez centrer un élément sur la page à l'aide de la commande Format > Aligner > Centre.
1 Sélectionnez le texte à aligner ou insérez le pointeur au début du texte. 2 Choisissez Format > Aligner, puis sélectionnez une commande d'alignement.
1 Sélectionnez l'élément (image, plug-in, tableau ou tout autre élément de la page) que vous désirez aligner au centre. 2 Choisissez Format > Aligner > Centre.
La commande Retrait applique la balise HTML blockquote à un paragraphe de texte, ce qui a pour effet de mettre en retrait le texte de chaque côté de la page. 1 Placez le point d'insertion à l'emplacement où insérer le retrait. 2 Choisissez Format > Retrait ou Retrait négatif, ou choisissez Liste > Retrait ou Retrait négatif dans le menu.
Vous pouvez utiliser HTML pour appliquer un formatage de texte à une seule lettre, à des paragraphes entiers du site ou encore à des blocs de texte. Le menu Format permet de définir ou de modifier les caractéristiques de police du texte sélectionné. Vous pouvez définir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractères. 1 Sélectionnez le texte. Si aucun texte n'est sélectionné, l'option s'appliquera au texte que vous taperez ensuite. 2 Faites votre choix parmi les options suivantes :
être visuellement séparés par une ou plusieurs barres.
1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer une barre horizontale. 2 Choisissez Insertion > HTML > Barre horizontale. La zone de texte ID Permet de définir un ID pour la règle horizontale. L et H Spécifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page. Alignement Spécifie l'alignement de la barre (Par défaut, Gauche, Centre ou Droite). Ce paramétrage ne s'applique
Ombrage Spécifie si la barre est accompagnée d'un effet d'ombre portée. Désactivez cette option pour dessiner la barre
Classe Permet de joindre une feuille de style ou d'appliquer une classe à partir d'une feuille de style déjà jointe.
Pour définir la combinaison de polices qui apparaît dans l'inspecteur Propriétés et dans Format > Police, utilisez la commande Modifier la liste des polices. Les combinaisons de polices de caractères déterminent la façon dont le texte des pages Web est affiché par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la première police installée sur l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est installée, le navigateur affiche le texte avec la police par défaut indiquée dans ses préférences.
1 Choisissez Format > Police > Modifier la liste des polices. 2 Choisissez la combinaison de polices dans la liste qui apparaît en haut de la boîte de dialogue.
(-) qui se trouvent dans la partie supérieure de la boîte de dialogue.
être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travaillez sur un Macintosh.
1 Choisissez Format > Police > Modifier la liste des polices. 2 Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insérer dans la liste
3 Répétez l'étape 2 pour chaque police nécessaire dans la combinaison.
être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travaillez sur un Macintosh. 4 Lorsque vous avez fini de choisir des polices, sélectionnez une famille de polices générique dans la liste Polices
Les familles génériques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sans-serif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparaît dans la police par défaut associée à la famille de polices générique. Par exemple, avec la plupart des systèmes d'exploitation, la police non proportionnelle (monospace) par défaut est Courier.
Dreamweaver comporte un objet Date pratique qui insère la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu'une option pour mettre à jour cette date lorsque vous enregistrez le fichier. Note: Les dates et heures affichées dans la boîte de dialogue Insérer date ne représentent pas la date actuelle ni ne reflètent les dates/heures visualisées par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manière dont vous souhaitez afficher ces informations. 1 Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Date.
4 Si vous désirez que cette date soit actualisée à chaque nouvel enregistrement du document, activez l'option Mettre
5 Cliquez sur OK pour insérer la date.
A propos des images Différents types de formats de fichiers graphiques existent, mais trois formats de fichiers graphiques sont généralement utilisés dans les pages Web : GIF, JPEG et PNG. Les formats de fichier GIF et JPEG sont les plus répandus ; ils peuvent être affichés dans la plupart des navigateurs. GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destinés à l'affichage d'images à tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icônes, les logos ou d'autres images contenant des tons et des couleurs uniformes. JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format supérieur destiné aux photographies
Le format de fichier PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d'Adobe® Fireworks®. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portées) et tous ces éléments peuvent être modifiés à tout moment. Les fichiers doivent avoir l'extension .png pour être reconnus comme fichiers PNG par Dreamweaver.
Lorsque vous insérez une image dans un document Dreamweaver, le programme crée une référence à ce fichier d'image dans le code source HTML. Pour que cette référence soit correcte, le fichier d'image doit résider sur le site. Dans le cas contraire, Dreamweaver vous invite à copier le fichier sur le site. Vous pouvez également insérer des images de façon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systèmes de rotation de bannières publicitaires qui sélectionnent les bannières de manière aléatoire, puis affichent l'image de la bannière sélectionnée lors de l'affichage d'une page. Après avoir inséré une image, vous pouvez définir les options d'accessibilité aux balises d'image qui pourront être lues par les lecteurs d'écran destinés aux utilisateurs malvoyants. Ces attributs peuvent être modifiés dans le code HTML.
• Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.
2 Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :
• Sélectionnez Source de données pour choisir une source d'images dynamiques. • Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites Dreamweaver. 3 Parcourez l'arborescence pour sélectionner l'image ou la source de contenu à insérer.
Note: Lors de l'insertion d'images, vous pouvez également utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problèmes de performances lorsque vous travaillez, vous pouvez décider de désactiver l'affichage de l'image en mode Création en désélectionnant l'option Commandes > Afficher les fichiers externes. 4 Cliquez sur OK. La boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche si elle a été activée dans
5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.
Note: Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'écran lit l'attribut Alt de l'image. Note: Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilité. 6 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les propriétés de l'image.
Didacticiel sur l'insertion d'images
L'inspecteur Propriétés Images vous permet de définir les propriétés d'une image. Pour voir toutes les propriétés illustrées, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur Propriétés.
2 Dans la zone de texte située au-dessous de l'image miniature, définissez un nom d'image auquel vous pouvez faire
3 Définissez les options de l'image. L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement à jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous insérez une image dans une page.
Note: Vous pouvez modifier ces valeurs pour modifier l'échelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalité de l'image à son échelle normale avant de la réduire. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image. Src Spécifie le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour trouver le fichier source et le sélectionner. Lien Spécifie un lien hypertexte pour l'image. Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers,
Alignement Aligne l'image et le texte sur la même ligne. Sec Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou
Nom de la carte et outils Zone réactive Permettent de nommer et de créer une carte graphique côté client
Cible Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. Cette option n'est pas disponible lorsque l'image n'est pas liée à un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez également choisir parmi les noms de cible réservés suivants :
Modifier Lance l'éditeur d'image que vous avez indiqué dans les préférences d'éditeurs externes et ouvre l'image
Modification des paramètres d'une image
Luminosité et contraste Accentuer
Si vous avez inséré des attributs d'accessibilité pour une image, vous pouvez modifier ces valeurs dans le code HTML. 1 Sélectionnez l'image dans la fenêtre de document. 2 Effectuez l'une des opérations suivantes :
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier la balise.
Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres éléments de la ligne. Vous pouvez également définir l'alignement horizontal d'une image. 1 Sélectionnez l'image dans le mode Création. 2 Définissez les attributs d'alignement de l'image dans l'inspecteur Propriétés, à l'aide du menu Alignement.
Les options d'alignement sont les suivantes : Par défaut Provoque un alignement sur la ligne de base. La valeur par défaut varie selon le navigateur du visiteur du
Ligne de base et Bas Alignent la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le bas de
Haut du texte Aligne le haut de l'image avec le haut du plus grand caractère de la ligne de texte. Milieu absolu Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle. Bas absolu Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inférieurs comme dans la
Gauche Aligne l'image sélectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte aligné à gauche précède l'objet sur la ligne, les objets alignés à gauche sont généralement placés automatiquement sur une nouvelle ligne. Droite Aligne l'image sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite précède
Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrôles ActiveX. Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en différentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spécifiées. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions désirées, le navigateur de l'utilisateur devra le faire lorsque la page sera chargée. Cela risque d'entraîner l'allongement du temps de téléchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image. Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses nouvelles dimensions. Le rééchantillonnage ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin qu'elles correspondent le mieux possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la taille de son fichier, ce qui permet d'en accélérer le téléchargement.
“Modification d'images dans Dreamweaver” on page 255
• Pour ajuster la hauteur de l'élément, déplacez la poignée au bas de la sélection. • Pour ajuster simultanément la largeur et la hauteur de l'élément, faites glisser la poignée de l'angle de la sélection. • Pour conserver les proportions de l'élément (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser la poignée de l'angle de la sélection tout en appuyant sur la touche Maj.
Propriétés pour entrer une valeur numérique. Les éléments peuvent être redimensionnés visuellement à une taille minimale de 8 x 8 pixels.
❖ Cliquez sur le bouton Rétablir la taille
1 Redimensionnez l'image de la manière décrite ci-dessus. 2 Cliquez sur le bouton Rééchantillonner
Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prêt pour être ajouté à une page Web. Vous pouvez définir la taille et la couleur de l'espace réservé et lui donner une étiquette de texte. 1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer un espace réservé pour
2 Cliquez sur Insertion > Objets image > Espace réservé pour l’image. 3 Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparaître comme étiquette de l'espace
étendu ne sont pas autorisés. 4 (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour définir la taille de l'image en
5 (Facultatif) Pour Couleur, procédez de l'une des manières suivantes pour appliquer une couleur :
• Entrez la valeur hexadécimale de la couleur (par exemple #FF0000). • Entrez le nom d'une couleur sécurisée pour le Web (par exemple rouge).
“Redimensionnement visuel d'une image” on page 252 “Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver” on page 382
Un espace réservé pour l'image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces réservés pour une image que vous avez ajoutés par des fichiers d'image adaptés au Web, tels que des images GIF ou JPEG. Si vous possédez Fireworks, vous pouvez créer un nouveau graphique à partir d'un espace réservé pour image dans Dreamweaver. La nouvelle image reprend la même taille que celle de l'espace réservé pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver. 1 Dans la fenêtre Document, procédez de l'une des manières suivantes :
• Cliquez sur l'espace réservé pour l'image pour le sélectionner, puis dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l'icône du dossier à côté de la zone de texte Src. 2 Dans la boîte de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace
“Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver” on page 382
Pour définir les propriétés d'un espace réservé pour l'image, sélectionnez l'espace réservé dans la fenêtre de document, puis choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés. Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit pour afficher toutes les propriétés.
❖ Parmi les options suivantes, définissez celles de votre choix : L et H Définissent la largeur et la hauteur de l'espace réservé pour l'image, en pixels. Src Spécifie le fichier source de l'image. Pour un espace réservé pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour sélectionner une image à utiliser en remplacement du graphique de l'espace réservé. Lien Spécifie un lien hypertexte pour l'espace réservé de l'image. Faites glisser l'icône Pointer vers un fichier dans le
Sec Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou
Créer Permet de lancer Fireworks pour créer une image de remplacement. Le bouton Créer est désactivé sauf si
Rétablir la taille Ramène les valeurs L et H à la taille originale de l'image. Couleur Spécifie une couleur pour l'espace réservé de l'image.
“Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver” on page 382
Vous pouvez rééchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez également régler leur luminosité et leur contraste.
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous évite de devoir lancer une application externe pour effectuer cette tâche (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de Dreamweaver sont conçus pour un travail simplifié avec les concepteurs de contenu responsables de la création des fichiers d'image utilisés sur votre site Web.
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses nouvelles dimensions. Lorsqu'un objet bitmap est rééchantillonné, des pixels sont ajoutés à l'image ou en sont enlevés afin de l'agrandir ou de la réduire. En général, le rééchantillonnage d'une image à une résolution supérieure provoque une faible perte de qualité. Le rééchantillonnage à une résolution inférieure, en revanche, provoque toujours une perte de données et donne une moins bonne qualité. Recadrer Permet de réduire la surface des images. En général, il est utile pour mettre en évidence le sujet de l'image et supprimer les aspects indésirables qui entourent le centre d'intérêt de l'image. Luminosité et contraste Modifie la luminosité et le contraste des pixels qui composent l'image. Ceci affecte les
Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez
Note: Les fonctions de modification d'images de Dreamweaver s'appliquent uniquement aux formats de fichier JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas être modifiés à l'aide de ces fonctions.
Dreamweaver permet de recadrer (ou rogner) les images bitmap. Note: Lorsque vous recadrez une image, le fichier d'image source est modifié sur le disque. Il peut donc s'avérer utile de conserver une copie de sauvegarde du fichier d'image au cas où vous auriez besoin de revenir à l'image d'origine. 1 Ouvrez la page qui contient l'image à recadrer, sélectionnez l'image et procédez de l'une des manières suivantes :
Des poignées de recadrage apparaissent autour de l'image sélectionnée. 2 Ajustez-les jusqu'à ce que la surface de l'image à conserver soit entourée d'une zone limite. 3 Double-cliquez dans cette zone ou appuyez sur Entrée pour recadrer la sélection. 4 Une boîte de dialogue vous informe que le fichier image que vous recadrez sera modifié sur le disque. Cliquez sur
5 Vérifiez à l'aide de l'aperçu que l'image correspond à vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler
Note: Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au moment où vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
2 Apportez les modifications dans la boîte de dialogue Aperçu d'image, puis cliquez sur OK.
2 Pour spécifier le degré d'accentuation appliqué par Dreamweaver à l'image, déplacez le curseur ou tapez une valeur
Accentuer, vous pouvez afficher un aperçu de l'image modifiée. 3 Lorsque vous êtes satisfait de l'image, cliquez sur OK. 4 Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l'image d'origine en choisissant
Note: Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistré la page, les modifications apportées à l'image sont définitivement enregistrées. La fonction Luminosité/Contraste modifie la luminosité ou le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires. 1 Ouvrez la page qui contient l'image à ajuster, sélectionnez l'image et procédez de l'une des manières suivantes :
2 Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à votre convenance. Les valeurs sont
1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer l'image survolée. 2 Insérez l'image survolée à l'aide de l'une des méthodes suivantes :
3 Définissez les options, puis cliquez sur OK. Nom de l'image Nom de l'image survolée. Image d’origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accès dans la zone de texte
Image survolée L'image à afficher lorsque le pointeur est placé au-dessus de l'image originale. Entrez le chemin d'accès
Précharger l'image survolée Précharge les images dans la mémoire cache du navigateur afin d'éviter tout délai lorsque
Texte secondaire (Facultatif) Texte qui décrit l'image à l'intention des personnes utilisant un navigateur en mode
Si cliqué, aller à l'URL Le fichier à ouvrir lorsqu'un utilisateur clique sur l'image survolée. Entrez le chemin d'accès du fichier ou cliquez sur Parcourir pour le sélectionner.
4 Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12. 5 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survolée.
“Application du comportement Permuter une image” on page 378 Didacticiel sur les images survolées
Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier d'image modifié, toutes les modifications apportées à l'image sont visibles dans la fenêtre de document. Vous pouvez définir Fireworks comme principal éditeur d'image. Vous pouvez également définir quels types de fichier un éditeur peut ouvrir et vous pouvez sélectionner plusieurs éditeurs d'image. Par exemple, vous pouvez définir des préférences afin de démarrer Fireworks pour modifier les fichiers GIF et de lancer un éditeur d'image différent pour modifier les fichiers JPG ou JPEG.
“Lancement d'un éditeur externe pour des fichiers multimédias” on page 273
❖ Effectuez l'une des opérations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'image à modifier, choisissez l'option Modifier avec > Parcourir et sélectionnez un éditeur.
• Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'éditeur d'image principal. Si vous n'avez pas indiqué d'éditeur d'image, Dreamweaver exécute l'éditeur par défaut de ce type de fichier. Note: Lorsque vous ouvrez directement une image à partir du panneau Fichiers, les fonctionnalités d'intégration de Fireworks sont inopérantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalités d'intégration de Fireworks, ouvrez les images à partir de la fenêtre de document. Si l'image mise à jour n'apparaît pas une fois de retour dans la fenêtre Dreamweaver, sélectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Propriétés.
Vous pouvez sélectionner l'éditeur d'image à utiliser pour ouvrir et modifier les fichiers graphiques. 1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
2 Dans la liste Extensions, sélectionnez l'extension de fichier pour laquelle définir un éditeur externe. 3 Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 4 Dans la boîte de dialogue Sélectionner un éditeur externe, recherchez l'application à démarrer en tant qu'éditeur
5 Dans la boîte de dialogue Préférences, cliquez sur Principal si vous souhaitez que cet éditeur soit l'éditeur principal
6 Si vous souhaitez configurer un éditeur supplémentaire pour ce type de fichier, répétez les étapes 3 et 4.
1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
3 Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'éditeur. 4 Pour sélectionner un éditeur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste
5 Dans la boîte de dialogue qui apparaît alors, sélectionnez l'application à utiliser pour modifier ce type d'image. 6 Cliquez sur Principal si vous désirez que ce programme soit l'éditeur principal pour ce type d'image.
1 Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :
2 Dans la boîte de dialogue Types de fichiers/Editeurs, sélectionnez dans la liste Extensions le type de fichier que vous
3 Dans la liste Editeurs, sélectionnez l'éditeur que vous désirez affecter à ce type de fichier, puis procédez de l'une des
Vous pouvez appliquer l'un des comportements disponibles à une image ou à la zone réactive d'une image. Lorsque vous appliquez un comportement à une zone réactive, Dreamweaver insère le code source HTML nécessaire dans la balise area. Il existe trois comportements qui s'appliquent spécifiquement aux images : Précharger les images, Permuter une image et Restaurer l'interversion d'images. Précharger les images Place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées
Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img. Utilisez cette action pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois). Restaurer l'image intervertie Rétablit la dernière interversion d'images à son état d'origine. Cette action est
Vous pouvez également utiliser des comportements pour créer des systèmes de navigation plus sophistiqués, comme les menus de reroutage.
“Application du comportement Précharger les images” on page 374
Incorporation de vidéos aux pages Web (HTML5) HTML5 prend en charge les balises audio et vidéo, permettant aux utilisateurs de lire des fichier audio et vidéo dans un navigateur sans complément ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant l'ajout de balises vidéo et audio. Le mode En direct affiche la vidéo, de façon à prévisualiser la vidéo que vous incorporez à la page Web. Note: Bien que vous puissiez incorporer toute vidéo à votre page Web, le mode En direct ne les affiche pas toujours toutes. Les balises audio et vidéo sont prises en charge par Dreamweaver au moyen du module QuickTime d'Apple. Sous Windows, si le module QuickTime d'Apple n'est pas installé, la page Web n'affichera pas le contenu multimédia.
Dreamweaver insère un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier FLV sélectionné, ainsi qu'un jeu de contrôles de lecture.
Vidéo en téléchargement progressif Télécharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture. Contrairement aux méthodes traditionnelles de fourniture de vidéo par « téléchargement et lecture », le téléchargement progressif permet de lancer la lecture du fichier vidéo avant la fin de son téléchargement.
Web, vous devez avoir accès à Adobe® Flash® Media Server. Vous devez disposer d'un fichier FLV codé avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insérer les fichiers vidéo créés avec deux types de codecs (technologies de compression/décompression) : Sorenson Squeeze et On2. Lorsque vous insérez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver insère du code qui détecte si l'utilisateur dispose d'une version appropriée de Flash Player pour voir la vidéo. Si ce n'est pas le cas, la page affiche un contenu alternatif qui invite l'utilisateur à télécharger la version la plus récente de Flash Player. Note: Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultérieure doit être installé sur l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. Pour plus d'informations sur l'utilisation de vidéo, consultez le Centre de technologie vidéo à l'adresse www.adobe.com/go/flv_devcenter_fr. Insertion d'un fichier FLV 1 Choisissez Insertion > Médias > FLV. 2 Dans la boîte de dialogue Insérer un fichier FLV, choisissez Vidéo en téléchargement progressif dans le menu Type
3 Renseignez les autres sections de la boîte de dialogue selon les besoins puis cliquez sur OK.
Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF ou FLV. Définition des options pour la vidéo en téléchargement progressif La boîte de dialogue Insérer FLV permet de définir des options pour la remise par téléchargement progressif d'un fichier FLV inséré dans une page Web. 1 Choisissez Insertion > Médias > FLV (ou cliquez sur l'icône FLV de la catégorie Médias de la barre d'insertion
2 Dans la boîte de dialogue Insérer FLV, choisissez Vidéo à téléchargement progressif dans le menu Type de vidéo. 3 Définissez les options suivantes : URL Spécifie le chemin absolu ou relatif du fichier FLV. Pour spécifier un chemin relatif (par exemple, monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accédez au fichier FLV et sélectionnez-le. Pour spécifier un chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV. Enveloppe Définit l'aspect du composant vidéo. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la
Note: Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe sélectionnée.
4 Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu FLV à votre page Web.
Définition des options pour la vidéo en flux continu La boîte de dialogue Insérer FLV permet de définir des options pour le téléchargement de vidéo en flux contenu d'un fichier FLV inséré dans une page Web. 1 Choisissez Insertion > Médias > FLV (ou cliquez sur l'icône FLV de la catégorie Médias de la barre d'insertion
2 Activez l’option Vidéo en flux continu dans le menu contextuel Type de vidéo. URI du serveur Indique le nom du serveur FCS, le nom de l’application et le nom de l’instance dans le formulaire
Nom du flux Spécifie le nom du fichier FLV à lire (par exemple, mavideo.flv). L'extension .flv est facultative. Enveloppe Définit l'aspect du composant vidéo. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu
Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur
Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la
Note: Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe sélectionnée. Respecter les proportions Préserve le rapport hauteur/largeur du composant vidéo. Cette option est sélectionnée par
Vidéo en temps réel Indique si le contenu vidéo est en temps réel ou non. Si vous sélectionnez Vidéo en temps réel,
Note: Si vous activez l’option Vidéo en temps réel, seul le contrôle de volume apparaît sur l’enveloppe du composant, car il est impossible d’intervenir sur de la vidéo en temps réel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet. Lecture automatique Indique si la lecture de la vidéo doit démarrer ou non dès l’ouverture de la page Web. Rembobinage automatique Détermine si le contrôle de lecture doit revenir en position de départ au terme de la
défaut, la mise en tampon est paramétrée sur 0, si bien que la lecture de la vidéo débute instantanément après un clic sur le bouton de lecture. (Si l'option Lecture automatique est activée, la lecture de la vidéo débute dès que la connexion avec le serveur est établie.) Il peut également être nécessaire de définir un délai de mise en mémoire tampon si vous fournissez une vidéo dont le débit en bits est supérieur à celui de la connexion du visiteur du site ou lorsque le volume de trafic Internet risque d'engendrer des problèmes de bande passante ou de connectivité. Par exemple, si vous souhaitez envoyer 15 secondes de vidéo à la page Web avant que cette dernière ne lise la vidéo, définissez le délai de mise en mémoire tampon sur 15. 3 Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu FLV à votre page Web.
Note: Si un fichier main.asc se trouve déjà sur votre serveur, consultez l’administrateur de ce serveur avant de transférer le fichier main.asc généré par la commande Insérer FLV. Vous pouvez charger facilement tous les fichiers médias requis en sélectionnant l'espace réservé pour le composant vidéo dans la fenêtre Document de Dreamweaver puis en cliquant sur le bouton Transférer multimédia dans l'inspecteur Propriétés (Fenêtre > Propriétés). Pour voir la liste des fichiers nécessaires, cliquez sur le bouton Afficher les fichiers nécessaires. Note: Le bouton Transférer multimédia ne transfère pas le fichier HTML qui contient le composant vidéo. Modification des informations de téléchargement de Flash Player Lorsque vous insérez un fichier FLV sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif. Cette procédure s'applique également aux fichiers SWF. Note: Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1 Dans la fenêtre de document, en mode Création, sélectionnez le fichier SWF ou FLV. 2 Cliquez sur l'icône représentant un œil dans l'onglet du fichier SWF ou FLV.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
4 Cliquez à nouveau sur l'icône représentant un œil pour revenir à l'affichage du fichier SWF ou FLV.
Affichage des problèmes dus à l'absence de fichiers associés
Clear Skin, le fichier se nomme Clear_Skin_1.swf. Les quatre fichiers dépendants DOIVENT être téléchargés sur votre serveur distant pour que le fichier FLV s'affiche correctement. L'oubli du téléchargement de ces fichiers est la cause la plus courante des erreurs d'exécution de fichiers FLV sur une page Web. Si l'un des fichiers manque, un « carré blanc » risque de s'afficher sur la page. Pour garantir que vous avez bien téléchargé tous les fichiers dépendants, utilisez le panneau Fichiers de Dreamweaver pour télécharger la page où figure le fichier FLV. Lorsque vous téléchargez la page, Dreamweaver vous demande si vous voulez télécharger les fichiers dépendants (sauf si vous avez désactivé cette option). Cliquez sur Oui pour télécharger les fichiers dépendants. Problèmes d'affichage lors d'un aperçu local des pages Les mises à jour de la sécurité de Dreamweaver CS4 vous empêchent d'utiliser la commande Aperçu dans le navigateur pour tester une page comportant un fichier FLV incorporé, sauf si vous définissez un serveur d'évaluation local dans votre définition de site Dreamweaver et employez ce serveur d'évaluation pour prévisualiser la page. Normalement, vous n'avez besoin d'un serveur d'évaluation que si vous développez des pages avec ASP, ColdFusion ou PHP (voir “Configuration de l'ordinateur pour le développement d'applications” on page 557). Si vous créez des sites Web qui n'emploient que HTML et que vous n'avez pas défini de serveur d'évaluation, une pression sur F12 (Windows) ou Option+F12 (Macintosh) entraîne l'affichage de contrôles d'enveloppe incohérents. Pour résoudre le problème, définissez le serveur d'évaluation et utilisez-le pour prévisualiser votre page, ou chargez vos fichiers sur un serveur distant et visualisez-les sur celui-ci. Note: Il se peut que les paramètres de sécurité soient également responsables de l'impossibilité de prévisualiser du contenu FLV local, mais Adobe n'a pas été en mesure de le confirmer. Vous pouvez tenter de modifier vos paramètres de sécurité afin de voir si le problème est résolu. Pour plus d'informations sur la modification de vos paramètres de sécurité, consultez la Tech Note 117502. Autres causes potentielles de problèmes avec les fichiers FLV
• Vous pouvez remplacer provisoirement le fichier FLV qui pose problème par un fichier FLV dont vous êtes sûr qu'il fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le problème réside dans le fichier FLV d'origine et n'est pas dû à votre navigateur ni à l'ordinateur.
Modification du composant FLV 1 Dans la fenêtre du document Dreamweaver, sélectionnez l'espace réservé pour le composant vidéo en cliquant sur l’icône FLV au centre de l’espace réservé. 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et apportez les modifications désirées.
Insertion > Médias > FLV. Suppression du composant FLV ❖ Dans la fenêtre du document Dreamweaver, sélectionnez l’espace réservé pour le composant FLV et appuyez sur la touche Suppr. Suppression du code de détection FLV A partir de la version CS4 de Dreamweaver, Dreamweaver insère directement un code de détection de Flash Player dans la balise object qui contient le fichier FLV. Par contre, jusqu'à la version CS3 de Dreamweaver, le code de détection se trouve en dehors de la balise object du fichier FLV. Dès lors, si vous voulez supprimer des fichiers FLV de pages créées à l'aide de Dreamweaver CS3 ou une version plus ancienne, vous devez supprimer les fichiers FLV puis utiliser la commande Supprimer la détection FLV afin de supprimer également le code de détection. ❖ Sélectionnez Commandes > Supprimer la détection Flash Video.
Fichier FLA (.fla) Fichier source pour tout projet, créé dans l'outil de création Flash. Ce type de fichier peut uniquement
Fichier SWF (.swf) Version compilée du fichier FLA (.fla), optimisée pour l'affichage sur le Web. Ce fichier peut être lu
Flash® Video Encoder ou Sorensen Squeeze) pour convertir le fichier vidéo en fichier FLV. Pour plus d'informations, consultez le Centre de technologie vidéo à l'adresse www.adobe.com/go/flv_devcenter_fr.
“Utilisation de Flash et Dreamweaver” on page 397 “Insertion de fichiers FLV” on page 261
Vous trouverez un didacticiel consacré à l'ajout de fichiers SWF à des pages Web à l'adresse www.adobe.com/go/vid0150_fr.
“Utilisation de Flash et Dreamweaver” on page 397 “Modification d’un fichier SWF depuis Dreamweaver dans Flash” on page 397 Fichiers SWF et calques DHTML “Insertion d'animations Shockwave” on page 275 “Insertion de fichiers FLV” on page 261 Didacticiel consacré à l'utilisation de Flash
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le
Cet espace réservé est entouré d'un contour bleu à onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier SWF. Cet onglet comporte également une icône qui représente un œil. Il fait office de bascule entre le fichier SWF et les informations de téléchargement que les utilisateurs voient s'ils ne possèdent pas la version correcte de Flash Player. 3 Enregistrez le fichier.
Dreamweaver utilise du code object/embed imbriqué au lieu du code object imbriqué lors de l'insertion de fichiers SWF ou FLV.
Lorsque vous insérez un fichier SWF sur une page, Dreamweaver insère du code qui détecte si l'utilisateur dispose de la version appropriée de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif. Cette procédure s'applique également aux fichiers FLV. Note: Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1 Dans la fenêtre de document, en mode Création, sélectionnez le fichier SWF ou FLV. 2 Cliquez sur l'icône représentant un œil dans l'onglet du fichier SWF ou FLV.
3 Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver.
4 Cliquez à nouveau sur l'icône représentant un œil pour revenir à l'affichage du fichier SWF (ou FLV).
1 Dans la fenêtre de document, cliquez sur l'espace réservé du fichier SWF afin de sélectionner son contenu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire. Cliquez sur le bouton Arrêt pour
Pour prévisualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont placés en mode Lecture.
❖ Sélectionnez un fichier SWF ou une animation Shockwave, puis définissez ses options dans l'inspecteur Propriétés
ID Définit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, à l'extrême gauche de l'inspecteur Propriétés. Depuis Dreamweaver CS4, un ID unique est requis. L et H Spécifient la largeur et la hauteur de l'animation, en pixels.
Modifier Démarre Flash pour mettre à jour un fichier FLA (fichier créé dans le programme de création Flash). Cette
Classe Permet d'appliquer une classe CSS à l'animation. Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas activée, l'animation est lue une fois puis
Lecture automatique Lit automatiquement l'animation lors du chargement de la page. Espace V. et Espace H. Définit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté de
Qualité Contrôle l'anticrénelage pendant la lecture de l'animation. Des valeurs élevées améliorent l'apparence des
Echelle Détermine comment l'animation s'adapte aux dimensions définies dans les zones de largeur et de hauteur. Le paramètre par défaut affiche l'animation entière. Alignement Détermine l'alignement de l'animation sur la page. Wmode Définit le paramètre Wmode pour le fichier SWF de manière à éviter tout conflit avec des éléments DHTML,
éléments DHTML apparaissent derrière celles-ci, activez l'option Transparent. Activez l'option Fenêtre pour supprimer le paramètre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres éléments DHTML. Lire Lit l'animation dans la fenêtre de document. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
La fonctionnalité Insérer FlashPaper a été abandonnée depuis Dreamweaver CS5.
Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut par exemple être un accordéon, un panneau à onglet ou un calendrier.
Vous pouvez également ajouter un widget Web à une page Dreamweaver (CS5.5 et versions ultérieures) en procédant comme suit : 1 Dans le Widget Browser, accédez à Mes widgets. 2 Sélectionnez le widget que vous voulez ajouter. 3 Cliquez sur l'icône Glisser-déposer dans Dreamweaver, dans le coin supérieur gauche de l'onglet Mode En direct,
(Windows) ou le mode Création ou Code (Macintosh OS). Vous ne pouvez pas faire glisser le widget dans le mode Affichage en direct, mais vous pouvez utiliser ce mode pour tester le widget après l'avoir déposé sur la page.
Aide d'Adobe Widget Browser “Utilisation des widgets Spry (instructions générales)” on page 442 Il est possible d'ajouter du son à une page Web. Il existe de nombreux types de fichiers et de formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont à considérer avant de décider d'un format et d'une méthode d'ajout de son : son objectif, son public, la taille du fichier, la qualité du son et les différences entre les navigateurs. Note: Le traitement des fichiers son est très différent et incohérent suivant les navigateurs. Vous pouvez ajouter un fichier audio à un fichier SWF, puis incorporer le fichier SWF pour assurer une meilleure cohérence. La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains avantages et inconvénients de chaque conception Web. Le format .midi ou .mid (Musical Instrument Digital Interface) est destiné à la musique instrumentale. Les fichiers MIDI sont reconnus par plusieurs navigateurs et ne requièrent pas de plug-in. Bien que leur qualité sonore soit très bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue durée. Les fichiers MIDI ne peuvent pas être enregistrés et doivent être synthétisés sur un ordinateur équipé d'un matériel et d'un logiciel spéciaux. Le format .wav (Waveform Extension), qui offre une bonne qualité sonore, est pris en charge par plusieurs navigateurs
« en transit » afin que les visiteurs n'aient pas à attendre le téléchargement du fichier entier avant de pouvoir l'écouter. Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le téléchargement d'une chanson entière peut s'avérer assez long si l'on utilise une connexion à Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent télécharger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer. Le format .ra, .ram, .rpm ou Real Audio offre un degré très élevé de compression avec une taille de fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué dans un laps de temps raisonnable. Les fichiers pouvant être « diffusés » à partir d'un serveur Web normal, les visiteurs peuvent commencer à écouter le son avant la fin du téléchargement. Les visiteurs doivent télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers. .qt, .qtm, .mov ou QuickTime est un format à la fois audio et vidéo mis au point par Apple Computer. QuickTime est inclus dans le système d'exploitation des ordinateurs Apple Macintosh. Il est utilisé par la plupart des applications Macintosh utilisant l'audio, la vidéo ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela nécessite le pilote approprié. QuickTime prend en charge la plupart des formats de codage, notamment Cinepak, JPEG et MPEG.
“Insertion et modification d'objets multimédias” on page 272
2 Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier, à côté de la zone Lien, pour rechercher le fichier audio,
L'opération consistant à incorporer un son intègre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrôler le volume, l'apparence du lecteur sur votre page ou encore les points de démarrage et d'arrêt du fichier audio.
2 Recherchez le fichier audio puis cliquez sur OK. 3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropriées de l'inspecteur Propriétés
Ces valeurs déterminent la taille à laquelle les contrôles audio sont affichés dans le navigateur.
Insertion et modification d'objets multimédias Outre les fichiers SWF et FLV, vous pouvez insérer des vidéos QuickTime ou Shockwave, des applets Java, des contrôles ActiveX ou d'autres objets audio ou vidéo dans un document Dreamweaver. Si vous insérez des attributs d'accessibilité avec un objet multimédia, vous pouvez définir les attributs d'accessibilité et modifier ces valeurs dans le code HTML. 1 Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer l'objet. 2 Pour insérer l'objet souhaité, procédez de l'une des manières suivantes :
• Si l'objet à insérer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu Insertion > Médias. Une boîte de dialogue permet alors de choisir un fichier source et de spécifier certains paramètres de l'objet multimédia. Pour éviter que ces boîtes de dialogue ne s'affichent, choisissez Edition > Préférences > Général (Windows) ou Dreamweaver > Préférences > Général (Macintosh) et désactivez l'option Afficher la boîte de dialogue lors de l'insertion d'objets. Pour remplacer la préférence d'affichage des boîtes de dialogue, maintenez enfoncée la touche Ctrl (Windows) ou Option (Macintosh) tout en insérant l'objet. Par exemple, pour insérer un espace réservé pour une animation Shockwave sans spécifier le fichier correspondant, maintenez la touche Ctrl ou Option enfoncée et cliquez sur le bouton Shockwave à partir du menu Support de la catégorie Commun du panneau Insertion ou choisissez Insertion > Médias > Shockwave. 3 Complétez les options de la boîte de dialogue Sélectionner un fichier, puis cliquez sur OK.
4 Définissez les attributs d'accessibilité.
Clé d'accès Entrez un équivalent clavier (une lettre) dans la zone de texte pour sélectionner l'objet de formulaire dans
Ordre des tabulations Entrez un nombre pour définir l'ordre de tabulation de l'objet. La définition d'un ordre
5 Cliquez sur OK pour insérer l'objet multimédia.
Dreamweaver ne lui associe ni balises ni attributs d'accessibilité. Pour spécifier un fichier source, définir les dimensions et d'autres paramètres et attributs, utilisez l'inspecteur Propriétés pour chaque objet. Vous pouvez modifier les attributs d'accessibilité d'un objet.
“Optimisation de l'espace de travail pour la conception de pages accessibles” on page 721
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des fichiers multimédias. Vous pouvez également décider de l'éditeur que doit lancer Dreamweaver pour modifier le fichier. 1 Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système.
Types de fichiers/Editeurs dans la liste Catégorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour consulter le ou les éditeurs associés dans la colonne Editeurs. Vous pouvez modifier l'éditeur associé à un type de fichier. 2 Double-cliquez sur le fichier multimédia dans le panneau Fichiers pour lancer l'éditeur externe et ouvrir le fichier.
Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouche d'image définie, par exemple Adobe Fireworks. 3 Si vous ne souhaitez pas utiliser l'éditeur externe principal pour modifier le fichier, vous pouvez effectuer l'une des
(Macintosh) sur l'élément multimédia de la page affichée, puis sélectionnez Modifier avec dans le menu contextuel.
1 Choisissez Edition > Préférences, puis sélectionnez Types de fichiers/Editeurs dans la liste Catégorie.
Les éditeurs associés à une extension apparaissent dans la liste de droite, sous le titre Editeurs. 2 Sélectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des opérations suivantes :
Par exemple, sélectionnez l'icône de l'application Acrobat pour l'associer au type de fichier.
éditeur dans la liste Editeurs, puis cliquez sur Rendre principal.
1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un éditeur XML installé sur votre système. 2 Pour sélectionner un éditeur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et
❖ Sélectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste
Note: L'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle opération.
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes à un objet multimédia. Les Design Notes sont des notes associées à un fichier particulier et stockées dans un fichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, par exemple, des commentaires sur l'état des fichiers ou le nom des fichiers source des images. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
Note: Vous devez définir votre site avant d'ajouter des Design Notes à un objet. 2 Cliquez sur Design Notes de la page dans le menu contextuel. 3 Entrez les informations souhaitées dans la Design Note.
Vous pouvez utiliser Dreamweaver pour insérer des animations Shockwave dans vos documents. Adobe® Shockwave®, une norme pour les éléments multimédia interactifs sur le Web, est un format compressé qui autorise le téléchargement rapide des fichiers multimédia créés dans Adobe® Director®, ainsi que leur lecture dans la plupart des navigateurs. 1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer une animation
2 Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation. 3 Dans l'inspecteur Propriétés, tapez la largeur et la hauteur de l'animation dans les zones L et H.
“Définition des propriétés d'un fichier SWF” on page 268
1 Placez le fichier vidéo dans le dossier de votre site.
2 Insérez un lien vers la séquence ou incorporez-la dans votre page.
Note: L'utilisateur doit télécharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme Real Media, QuickTime et Windows Media.
Vous pouvez créer du contenu, par exemple une séquence vidéo QuickTime pour un plug-in de navigateur, puis utiliser Dreamweaver pour insérer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par défaut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu.
Note: Il n'est pas possible d'afficher un aperçu des films ou animations basées sur des contrôles ActiveX. Après avoir inséré le contenu d'un plug-in , utilisez l'inspecteur Propriétés pour en définir les paramètres. Pour afficher les propriétés suivantes dans l'inspecteur Propriétés, sélectionnez un objet plug-in Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés.
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le
2 Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier de contenu pour un plug-in , puis cliquez sur OK. 3 Définissez les options du plug-in dans l'inspecteur Propriétés. Nom Spécifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre,
L et H Spécifient, en pixels, la largeur et la hauteur allouées à l'objet sur la page. Src Spécifie le fichier des données source. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez un nom
URL du plug-in Spécifie l'URL pour l'attribut pluginspace. Indiquez l'URL complète du site à partir duquel les utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui consulte votre page ne possède pas le plug-in nécessaire, le navigateur essaie de le télécharger à partir de cette URL. Alignement Détermine l'alignement de l'objet sur la page. Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté du plug-in. Bordure Spécifie la largeur de la bordure autour du plug-in. Paramètres Ouvre une boîte de dialogue permettant d'indiquer des paramètres supplémentaires à transmettre au
Vous pouvez également afficher les attributs affectés au plug-in sélectionné en cliquant sur le bouton Attribut. Vous pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette boîte de dialogue.
1 Insérez un ou plusieurs éléments multimédias à l'aide d'une des méthodes décrites dans la section précédente. 2 Effectuez l'une des opérations suivantes :
> Lire ou cliquez sur le bouton de lecture de l'inspecteur Propriétés.
Arrêt de la lecture du contenu d'un plug-in ❖ Sélectionnez un élément multimédia, puis choisissez la commande Affichage > Plug-ins > Arrêter ou cliquez sur le
Vous pouvez également sélectionner Affichage > Plug-ins > Arrêter tout pour interrompre la lecture de tous les contenus des plug-ins.
Vous avez suivi les étapes permettant de lire le contenu d'un plug-in dans la fenêtre de document, mais constatez qu'une partie ne fonctionne pas. Essayez l'opération suivante :
Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des problèmes avec un plug-in particulier, il est souhaitable de l'ajouter à ce fichier.
L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et paramètres d'un contrôle ActiveX chargé par le navigateur du visiteur. Une fois un objet ActiveX inséré, utilisez l'inspecteur Propriétés pour définir les attributs de la balise object et les paramètres du contrôle ActiveX. Cliquez sur Paramètres dans l'inspecteur Propriétés pour indiquer des noms et des valeurs de propriétés qui n'apparaissent pas dans l'inspecteur Propriétés. Il n'existe pas de format standard unanimement accepté pour les paramètres des contrôles ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres choisir. ❖ Dans la fenêtre de document, positionnez le curseur à l'emplacement où insérer le contenu et procédez de l'une des
ActiveX dans Internet Explorer.
L et H Spécifient la largeur et la hauteur de l'objet, en pixels. ID de classe Identifie le contrôle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu contextuel. Lorsque la page est chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis par l'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le contrôle ActiveX spécifié, il essaie de le télécharger à partir de l'emplacement spécifié dans le champ Base. Incorporer Ajoute une balise embed dans la balise object pour le contrôle ActiveX. S'il existe un plug-in équivalent
Alignement Détermine l'alignement de l'objet sur la page. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
Src Définit le fichier de données à utiliser pour un plug-in , si l'option Incorporer est activée. Si vous n'entrez pas de valeur, Dreamweaver essaie d'en déterminer une à partir des propriétés d'ActiveX entrées précédemment. Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de
Base Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer télécharge le contrôle ActiveX à partir de cet emplacement s'il n'a pas été installé sur le système du visiteur. Si vous ne précisez pas le paramètre Base et que le contrôle ActiveX nécessaire n'est pas déjà installé sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher l'objet ActiveX. Img sec. Spécifie une image à afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est disponible que si l'option Incorporer est désélectionnée. Données Spécifie un fichier de données que le contrôle ActiveX doit charger. De nombreux contrôles ActiveX, tels que
Vous pouvez insérer une applet Java dans un document HTML à l'aide de Dreamweaver. Java est un langage de programmation qui permet de développer des applications légères (applets) pouvant être incorporées dans des pages Web. Une fois une applet Java insérée, utilisez l'inspecteur Propriétés pour définir les paramètres. Sélectionnez une applet Java pour afficher ses propriétés dans l'inspecteur Propriétés. 1 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer l'applet, puis procédez
• Choisissez Insertion > Médias > Applet. 2 Sélectionnez un fichier contenant une applet Java.
Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés. Nom Spécifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, à
L et H Spécifient la largeur et la hauteur de l'applet, en pixels. Code Spécifie le fichier contenant le code Java de l'applet. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez un nom de fichier. Base Identifie le dossier contenant l'applet sélectionnée. Lorsque vous choisissez une applet, cette zone de texte est renseignée automatiquement. Alignement Détermine l'alignement de l'objet sur la page. Sec Spécifie un contenu de remplacement (généralement une image) à afficher si le navigateur de l'utilisateur ne prend
Espace V. et Espace H. Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à
Vous pouvez ajouter des comportements à votre page pour commencer ou arrêter la lecture de divers objets multimédia. Contrôler Shockwave ou Flash Permet de lire, d'arrêter, de rembobiner ou d'atteindre un cadre dans une animation
Vérifier le Plug-in Permet de vérifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers
“Application du comportement Contrôler Shockwave ou SWF” on page 370 “Application du comportement Lire le son” on page 374 “Application du comportement Vérifier le plug-in” on page 369
<paramname="quality"value="best"> pour la balise object. La boîte de dialogue Paramètre est disponible à partir de l'inspecteur Propriétés. Consultez la documentation sur l'objet que vous utilisez pour connaître les paramètres requis. Note: Il n'existe pas de standard unanimement accepté pour l'identification des fichiers de données des contrôles ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres choisir.
1 Sélectionnez un objet pouvant être associé à des paramètres (par exemple, une animation Shockwave, un contrôle
2 Ouvrez la boîte de dialogue en procédant de l'une des manières suivantes :
3 Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramètre dans les colonnes appropriées.
❖ Sélectionnez un paramètre et cliquez sur le bouton Moins (-).
❖ Sélectionnez un paramètre et utilisez les boutons fléchés vers le haut ou vers le bas.
Automatisation des tâches Le panneau Historique mémorise les étapes que vous effectuez lors de l'exécution d'une tâche. Vous pouvez automatiser une tâche effectuée fréquemment en reproduisant les étapes correspondantes à partir du panneau Historique ou en créant une nouvelle commande qui effectue les étapes automatiquement. Certains mouvements de la souris, tels qu'une sélection via un clic dans la fenêtre de document, ne peuvent pas être reproduits ou sauvegardés. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (la présence de cette ligne ne devient évidente que lorsque vous effectuez une autre action). Pour éviter cela, déplacez le point d'insertion à l'aide des touches fléchées, et non de la souris, dans la fenêtre de document. Il existe quelques autres actions qui ne peuvent pas être reproduites, par exemple le glisser-déplacer d'un élément de la page. Lorsque vous effectuez ce type d'action, une icône contenant un petit X rouge s'affiche dans le panneau Historique. Les commandes sauvegardées sont conservées en permanence (à moins que vous ne les supprimiez), tandis que les commandes enregistrées sont supprimées lorsque vous quittez Adobe® Dreamweaver® CS5 et les séquences d'étapes copiées sont supprimées lorsque vous copiez un autre élément
Le panneau Historique (Fenêtre > Historique) affiche une liste des étapes que vous avez effectuées dans le document actif depuis que vous l'avez créé ou ouvert (mais pas les étapes effectuées dans d'autres cadres, d'autres fenêtres de document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs étapes en même temps et pour automatiser des tâches.
Note: Il est impossible de modifier l'ordre dans lequel les étapes sont affichées dans le panneau Historique. Il ne faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre chronologique, la liste des actions déjà effectuées.
❖ Effectuez l'une des opérations suivantes :
• Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste. Note: Pour provoquer un déplacement automatique vers une étape spécifique, cliquez à gauche de cette étape ; si vous cliquez sur l'étape elle-même, elle sera sélectionnée. La sélection d'une étape est une opération différente du retour à cette étape dans l'historique des actions.
❖ Faites glisser le curseur de façon à pointer sur une étape de la liste, ou cliquez à gauche d'une étape le long de la
Le curseur se dirige automatiquement vers cette étape en annulant toutes les étapes se trouvant sur son passage. Note: Tout comme pour l'annulation d'une seule action, si vous annulez une série d'étapes, puis effectuez une autre opération dans le document, il ne vous sera plus possible de rétablir les actions annulées : elles disparaissent du panneau Historique.
Le nombre d'étapes par défaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est élevé, plus le panneau Historique nécessite de la mémoire, ce qui peut affecter les performances et ralentir considérablement votre ordinateur. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Général dans la liste de gauche. 3 Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique.
❖ Dans le menu contextuel du panneau Historique, sélectionnez Effacer l'historique.
été effacée. La fonction Effacer l'historique n'annule aucune action passée, mais se limite à supprimer la trace de ces étapes de la mémoire.
Vous pouvez répéter la dernière étape effectuée ou bien une série d'étapes contiguës ou non à l'aide du panneau Historique. Reproduisez les étapes directement depuis le panneau Historique. Seules les actions sélectionnées (en surbrillance), et pas nécessairement celle sur laquelle se trouve le curseur, sont répétées. Note: Bien que vous puissiez sélectionner une série d'étapes contenant un trait noir signalant une action impossible à enregistrer, cette étape est ignorée lorsque vous reproduisez les étapes. 2 Cliquez sur Reproduire.
❖ Maintenez la touche Maj enfoncée tout en appuyant sur une touche fléchée.
Vous pouvez appliquer un ensemble d'étapes affichées dans le panneau Historique à n'importe quel objet figurant dans la fenêtre de document.
1 Sélectionnez l'objet. 2 Sélectionnez l'étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire.
1 Ouvrez un document dans lequel chaque ligne est composée d'une petite image (par exemple une puce graphique
L'objectif est d'espacer davantage ces images à la fois du texte et des autres images situées au-dessus et en dessous.
3 Sélectionnez la première image. 4 Dans l'inspecteur Propriétés, indiquez des valeurs dans les zones Espace V. et Espace H. pour définir l'espacement
5 Cliquez sur l'image de nouveau pour activer la fenêtre de document sans déplacer le point d'insertion. 6 Appuyez sur la touche fléchée gauche pour amener le point d'insertion à gauche de l'image. 7 Appuyez sur la touche fléchée bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste à
8 Appuyez sur la touche fléchée droite tout en maintenant la touche Maj. enfoncée, pour sélectionner la seconde
Note: Ne sélectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les étapes. 9 Dans le panneau Historique, sélectionnez les étapes correspondant à la modification de l'espacement de l'image et
10 Continuez à cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient correctement espacées.
Chaque document ouvert possède son propre historique. Vous pouvez copier des étapes d'un document et les coller dans un autre document. La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des étapes d'un document ultérieurement, copiez ou sauvegardez ces étapes avant de fermer ce document. 1 Sélectionnez les étapes désirées dans le panneau Historique du document qui contient les étapes à réutiliser. 2 Cliquez sur Copier les étapes dans le panneau Historique
Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des étapes, mais vous pouvez utiliser la commande Edition > Coller pour les coller. Soyez prudent lorsque vous copiez des étapes qui comportent une commande Copier ou Coller:
également une commande Copier avant la commande Coller. 3 Ouvrez l'autre document. 4 Placez le point d'insertion sur l'emplacement désiré, ou sélectionnez l'objet auquel vous voulez appliquer les étapes. 5 Choisissez Edition > Coller. “Rédaction et modification de code” on page 321
Sauvegardez un ensemble d'étapes de l'historique sous la forme d'une commande à laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu Commandes. Créez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble d'étapes, surtout après le prochain démarrage de Dreamweaver.
3 Indiquez le nom de la commande et cliquez sur OK.
Note: La commande est sauvegardée sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un système d'exploitation à plusieurs utilisateurs, le fichier est enregistré dans le dossier Commandes de l'utilisateur spécifique.
1 Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le point d'insertion à l'emplacement
1 Choisissez Commandes > Modifier la liste des commandes. 2 Sélectionnez une commande. 3 Cliquez sur Supprimer, puis sur Fermer.
Enregistrez une commande temporaire pour une utilisation à court terme, ou enregistrez et sauvegardez une commande pour l'utiliser ultérieurement. Dreamweaver conserve uniquement une commande enregistrée à la fois ; dès que vous commencez à enregistrer une nouvelle commande, l'ancienne est perdue, à moins que vous ne la sauvegardiez avant de mémoriser la nouvelle commande.
1 Choisissez Commandes > Démarrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X
Dreamweaver propose plusieurs méthodes pour créer des liens vers des documents, des images, des fichiers multimédias ou des logiciels pouvant être téléchargés. Vous pouvez établir des liens vers n'importe quel texte ou n'importe quelle image d'un document, même s'ils se trouvent dans un en-tête, une liste, un tableau, un élément à positionnement absolu (élément PA) ou un cadre. Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages Web préfèrent créer des liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres préfèrent créer d'abord tous les fichiers et pages, puis ajouter les liens. Une autre méthode de gestion des liens consiste à créer des pages de type « espace réservé » qui vous permettent d'ajouter des liens rapidement et de les vérifier avant de terminer toutes les pages de votre site.
“Test de liens dans Dreamweaver” on page 296
Pour créer des liens, il est indispensable de comprendre le chemin d'accès qui s'établit entre le document ou l'actif à partir duquel vous établissez un lien et le document pointé par ce lien. Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) Cependant, lorsque vous créez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de spécifier l'URL complète du document vers lequel vous créez le lien ; il est préférable d'indiquer un chemin relatif, à partir du document actif ou de la racine du site. Il existe trois types de chemins d'accès de liaison :
• Chemins relatifs au document (par exemple dreamweaver/contents.html). • Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html). Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens. Note: Il est préférable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif à la racine du site ou au document. L'exploration des liens, contrairement à la saisie des chemins, garantit que vous entrez toujours le chemin correct.
“Définir le chemin relatif des nouveaux liens” on page 292 “Utilisation de sites Dreamweaver” on page 40
Note: Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire, une image qui n'est pas disponible sur le disque dur local).
Les chemins relatifs au document sont généralement préférables pour les liens locaux dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le même dossier et le resteront vraisemblablement. Vous pouvez également utiliser un chemin relatif au document ou à l'actif pour pointer sur un document situé dans un autre dossier, en indiquant le chemin entre le document actif et le document lié, au sein de la hiérarchie de dossiers. Indiquer un chemin relatif au document consiste tout simplement à laisser de côté la partie du chemin absolu qui est identique pour le document actuel et le document ou l'actif lié, en n'indiquant que la partie du chemin qui diffère. Par exemple, supposons que la structure de votre site soit la suivante : my_site (dossier racine) Support technique contents.html hours.html Ressources tips.html Produits catalog.html à partir d'un autre document, il est nécessaire de mettre ces liens à jour (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).
Les chemins relatifs à la racine du site représentent le chemin d'accès à un document à partir du dossier racine du site. Ces chemins peuvent être utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hôte de plusieurs sites. Toutefois, si vous n'êtes pas familier avec ce type de chemin, adoptez plutôt les chemins relatifs au document. Un chemin relatif à la racine commence par une barre oblique, qui représente le dossier racine du site. Par exemple, /support/tips.html est le chemin relatif à la racine d'un fichier (tips.html) situé dans le sous-dossier « support » de la racine du site. Un chemin relatif à la racine représente souvent le meilleur moyen d'indiquer les liens si vous déplacez fréquemment des fichiers HTML d'un dossier à un autre dans votre site Web. Lorsque vous déplacez un document qui contient des liens relatifs à la racine du site, il n'est pas nécessaire de modifier les liens, car les liens sont relatifs à la racine du site, et non au document lui-même. Par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine du site pour les fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides si vous déplacez les fichiers HTML. Toutefois, si vous déplacez ou renommez les documents sur lesquels pointent des liens relatifs à la racine du site, vous devrez mettre ces liens à jour, même si les chemins relatifs de ces documents entre eux n'ont pas changé. Par exemple, si vous déplacez un dossier, vous devez mettre à jour tous les liens relatifs à la racine du site vers les fichiers que ce dossier contient (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).
Liens entre fichiers et documents Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs à la racine du site et des chemins absolus. Vous pouvez créer plusieurs types de liens dans un document :
• Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d'un document • Un lien de courriel, qui crée un courriel vierge avec l'adresse du destinataire déjà indiquée. • Des liens nuls et de script, qui permettent d'affecter des comportements à un objet ou de créer un lien qui exécute un code JavaScript Utilisez l'inspecteur Propriétés et l'icône Pointer vers un fichier pour créer des liens à partir d'une image, d'un objet ou de texte vers un autre document ou fichier. Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Vous pouvez toutefois demander à Dreamweaver de créer les nouveaux liens à l'aide de chemins relatifs à la racine du site.
“Chemins absolus, relatifs au documents et relatifs à la racine du site” on page 287 Didacticiel de création de liens
Vous pouvez associer un comportement à n'importe quel lien d'un document. Les comportements décrits ci-dessous peuvent être très intéressants lorsque vous insérez des éléments liés dans vos documents. Texte de la barre d'état Permet de spécifier le texte d'un message et de l'afficher dans la barre d'état dans la partie
Ouvrir la fenêtre Navigateur Ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifier un fichier lié
“Application de comportements JavaScript intégrés” on page 368
Vous pouvez utiliser l'icône de dossier de l'inspecteur Propriétés ou la zone Lien pour créer des liens à partir d'une image, un objet, du texte ou tout autre document ou fichier. 1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création. 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et procédez de l'une des manières suivantes :
Le chemin d'accès du document pointé par le lien s'affiche dans la zone URL. Utilisez le menu déroulant Relatif à dans la boîte de dialogue Sélectionner fichier HTML pour spécifier si le chemin est relatif à la racine ou au document, puis cliquez sur Sélectionner. Le type de chemin sélectionné ne s'applique qu'au lien actif. Vous pouvez modifier le paramètre par défaut de la zone Relatif à pour le site.
Pour créer un lien vers un document de votre site, indiquez un chemin relatif au document ou à la racine du site. Pour créer un lien vers un document situé en dehors du site, indiquez un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore été créé. 3 Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le document :
1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création. 2 Créez un lien de l'une des deux façons suivantes :
Propriétés, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers.
Note: Vous pouvez créer un lien vers un autre document ouvert à condition que vos documents ne soient pas agrandis dans la fenêtre de document. Pour afficher les documents en mosaïque, sélectionnez Fenêtre > Cascade ou Fenêtre > Mosaïque. Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre écran pendant que vous effectuez votre sélection.
“Création d'un lien vers un emplacement spécifique au sein d'un document” on page 293 1 Placez le curseur à l'endroit du document où vous souhaitez que le lien apparaisse. 2 Procédez de l'une des manières suivantes pour afficher la boîte de dialogue Hyperlien :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien. 3 Tapez le texte du lien et, après la zone Lien, tapez le nom du fichier vers lequel un lien va être établi (ou cliquez sur
6 Dans la zone Titre, tapez un titre pour le lien. 7 Dans la zone Clé d'accès, tapez une équivalence de clavier (une lettre) pour sélectionner le lien dans le navigateur. 8 Cliquez sur OK.
Par défaut, Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Pour utiliser des chemins relatifs à la racine, vous devez d'abord définir un dossier local dans Dreamweaver en choisissant un dossier racine local qui servira d'équivalent à la racine des documents sur le serveur. Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des fichiers. 1 Choisissez Site > Gérer les sites. 2 Dans la boîte de dialogue Gérer les sites, double-cliquez sur votre site dans la liste. 3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos
4 Définissez le chemin relatif des nouveaux liens en sélectionnant l'option Document ou Racine du site.
Note: Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire dans Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine consiste à placer le fichier sur un serveur distant, puis à sélectionner Fichier > Aperçu dans le navigateur. 5 Cliquez sur Enregistrer.
“Chemins absolus, relatifs au documents et relatifs à la racine du site” on page 287 “Utilisation de sites Dreamweaver” on page 40
Note: Vous ne pouvez pas placer d'ancre nommée dans un élément PA (à positionnement absolu).
1 Dans la fenêtre de document, en mode Création, placez le curseur à l'endroit où insérer l'ancre nommée. 2 Effectuez l'une des opérations suivantes :
• Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh). • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Ancre nommée. 3 Dans la zone Ancre nommée, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas contenir
Le marqueur de l'ancre apparaît au niveau du point d'insertion. Note: Si vous ne voyez pas le marqueur de l'ancre, choisissez Affichage > Assistances visuelles > Eléments invisibles.
1 Dans la fenêtre de document en mode Création, sélectionnez le texte ou l'image à partir desquels créer le lien. 2 Dans la zone Lien de l'inspecteur Propriétés, tapez le signe dièse (#) et le nom de l'ancre. Par exemple, pour créer
Note: La casse (majuscules/minuscules) est importante dans les noms d'ancre.
1 Ouvrez le document contenant l'ancre nommée.
2 Dans la fenêtre de création du document, sélectionnez le texte ou l'image à partir desquels créer le lien (s'il s'agit
3 Effectuez l'une des opérations suivantes :
1 Dans la fenêtre de document, placez le curseur à l'endroit où afficher le lien de courriel ou sélectionnez le texte ou
2 Procédez de l'une des manières suivantes pour insérer le lien :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie. 3 Dans la zone Texte, saisissez ou modifiez le corps du courriel. 4 Dans la zone Adresse électronique, tapez l'adresse électronique, puis cliquez sur OK.
1 Sélectionnez le texte ou une image dans la fenêtre de document en mode Création. 2 Dans la zone Lien de l'inspecteur Propriétés, tapez mailto: suivi d'une adresse électronique.
1 Créez un lien de courriel à l'aide de l'inspecteur Propriétés, comme expliqué ci-dessus. 2 Dans la zone Lien de l'inspecteur Propriétés, ajoutez ?subject= après l'adresse de courriel, puis entrez un objet
L'entrée entière doit se présenter comme suit : mailto:responsable@votresite.com?subject=Message de notre site
Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte sur une page. Par exemple, vous pouvez attacher un comportement à un lien nul pour intervertir une image ou afficher un élément PA lorsque le pointeur passe au-dessus du lien. Les liens de script exécutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens de scripts permettent également d'exécuter des calculs, de valider des formulaires et d'effectuer d'autres tâches de traitement lorsqu'un visiteur clique sur un élément spécifique.
“Application d'un comportement” on page 367
2 Dans la zone Lien de l'inspecteur Propriétés, tapez javascript: suivi du code JavaScript ou d'un appel de fonction
Dreamweaver peut mettre à jour les liens vers un document et à partir de ce dernier lorsque vous le déplacez ou renommez au sein d'un site local. Cette fonction fonctionne de façon optimale lorsqu'un site tout entier (ou une section entière de celui-ci) est stocké sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant avant que vous y placiez les fichiers locaux ou que vous les archiviez dans le serveur distant. Pour accélérer le processus de mise à jour, Dreamweaver peut créer un fichier cache dans lequel il conservera la liste de tous les liens du site local. Le fichier cache est mis à jour chaque fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local.
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Dans la boîte de dialogue Préférences, sélectionnez la catégorie Général dans la liste de gauche. 3 Dans la section Options de document des préférences Général, sélectionnez une option dans le menu déroulant
Toujours Met automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez Jamais Ne met pas automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier
Invite Affiche d'abord une boîte de dialogue qui répertorie tous les fichiers affectés par le changement. Cliquez sur
1 Choisissez Site > Gérer les sites. 2 Sélectionnez un site, puis cliquez sur Modifier. 3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos
4 Dans la catégorie Infos locales, sélectionnez l'option Activer le cache.
à jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens à jour. Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit déterminer si le cache est périmé en comparant l'heure et la date des fichiers qui se trouvent sur le site local à celles enregistrées dans le cache. Si vous n'avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d'arrêt en toute sécurité lorsque le bouton apparaît.
Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d'autres fichiers sont liés, mais pouvez l'utiliser à d'autres fins. Par exemple, supposons que vous ayez établi un lien entre les mots « films du mois » et /films/juillet.html dans l'ensemble de votre site. Le 1er août, vous voudrez modifier ces liens pour qu'ils pointent vers /films/aout.html. 1 Sélectionnez un fichier dans l'affichage local du panneau Fichiers.
2 Choisissez Site > Modifier le lien au niveau du site. 3 Complétez les options suivantes dans la boîte de dialogue Modifier le lien au niveau du site : Modifier tous les liens à Cliquez sur l'icône du dossier
à parcourir et sélectionnez le nouveau fichier vers lequel établir un lien. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien de remplacement.
Lorsqu'un lien a été changé au niveau de tout le site, le fichier sélectionné devient orphelin (plus aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans risque d'altérer des liens sur le site local Dreamweaver. Important: Ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont été modifiés, sinon les visiteurs ne pourront pas visualiser les modifications.
Les liens ne sont pas actifs dans Dreamweaver ; c'est-à-dire que vous ne pouvez pas ouvrir les documents liés en cliquant sur le lien dans la fenêtre de document. ❖ Effectuez l'une des opérations suivantes :
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien. Note: Le document lié doit résider sur le disque local.
Un menu de reroutage est un menu déroulant dans un document, visible pour tous les visiteurs du site et répertoriant les liens vers des documents ou des fichiers. Vous pouvez créer des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie électronique, des liens vers des images ou vers tout type de fichier pouvant être ouvert dans un navigateur. Chaque option d'un menu de reroutage est associée à une URL. Lorsque les utilisateurs choisissent une option, ils sont redirigés (« reroutés ») vers l'URL associée. Ces menus sont insérés à l'aide de l'objet de formulaire Menu de reroutage. Un menu de reroutage peut comporter trois composants :
“Application du comportement Menu de reroutage” on page 373 “Application du comportement Menu de reroutage Aller” on page 373
1 Ouvrez un document, puis placez le curseur dans la fenêtre de document. 2 Effectuez l'une des opérations suivantes :
• Cliquez sur le bouton Menu de reroutage de la catégorie Formulaires du panneau Insertion. 3 Complétez les options de la boîte de dialogue Insérer menu de reroutage, puis cliquez sur OK. Voici une liste
Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insérer un élément ; cliquez à nouveau sur Plus pour en ajouter un
Boutons fléchés Sélectionnez un élément et cliquez sur les boutons fléchés pour le déplacer vers le haut ou le bas de la
Text Tapez le nom d'un élément sans nom. Si votre menu contient une invite de sélection (telle que « Faites votre
Sélectionner le premier élément après le changement d'URL située en bas). Si sélectionné, aller à l'URL Naviguez jusqu'au fichier cible ou tapez son chemin.
Menu Insérer bouton Aller après Choisissez d'insérer un bouton Aller au lieu d'une invite de sélection de menu. Sélectionner le premier élément après le changement d'URL Sélectionnez cette option si vous avez inséré une invite de sélection de menu (« Faites votre choix ») en tant que premier élément du menu.
“Affichage et définition des des propriétés et des attributs de cadre” on page 213
Vous pouvez modifier l'ordre des éléments dans le menu ou le fichier auquel un élément est lié, et vous pouvez ajouter, supprimer ou renommer un élément. Pour modifier l'emplacement d'ouverture d'un fichier lié ou pour ajouter ou modifier une invite de sélection de menu, vous devez appliquer le comportement Menu de reroutage du panneau Comportements. 1 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert. 2 Dans la fenêtre de création du document, cliquez sur l'objet Menu de reroutage pour le sélectionner. 3 Dans l'inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste. 4 Utilisez la boîte de dialogue Valeurs de la liste pour apporter vos modifications aux éléments de menu et cliquer sur OK.
“Application du comportement Menu de reroutage” on page 373
Lorsqu'un élément de menu a été sélectionné, il n'est plus possible de le sélectionner à nouveau si le visiteur revient à cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux méthodes pour contourner ce problème :
Note: Dans la boîte de dialogue Insérer menu de reroutage, vous ne devez sélectionner qu'une option pour chaque menu de reroutage, car elles s'appliquent à la totalité du menu de reroutage.
A propos des barres de navigation La fonctionnalité de barre de navigation a été abandonnée depuis Dreamweaver CS5.
Internet Explorer. Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennent en charge les deux types de cartes donnent la priorité aux cartes graphiques côté client. Pour inclure une carte graphique sur le serveur dans un document, vous devez écrire le code HTML approprié.
Pour insérer une carte graphique côté client, créez une zone réactive, puis définissez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone réactive. Note: Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même carte graphique. 1 Sélectionnez l'image dans la fenêtre de document. 2 Dans l'inspecteur Propriétés, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour
3 Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes
4 Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes :
• Sélectionnez l'outil Rectangle 5 Dans la zone Lien de l'inspecteur Propriétés de la zone réactive, cliquez sur l'icône du dossier
6 Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom
9 Une fois la définition de la carte de l'image terminée, cliquez sur une zone vierge du document pour modifier
Sélection de plusieurs zones réactives dans une carte graphique 1 Utilisez le pointeur de zone réactive pour sélectionner une zone réactive. 2 Effectuez l'une des opérations suivantes :
• Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner toutes les zones réactives.
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive. 2 Effectuez l'une des opérations suivantes : • Utilisez la touche Ctrl et une touche fléchée pour déplacer une zone réactive de 10 pixels dans le sens sélectionné. • Utilisez les touches fléchées pour déplacer une zone réactive de 1 pixel dans le sens sélectionné.
1 Utilisez le pointeur de zone réactive
Résolution des problèmes liés aux liens Rechercher les liens rompus, externes et orphelins Utilisez la fonction Vérifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un fichier ouvert, sur une partie ou sur l'ensemble d'un site local. Dreamweaver vérifie uniquement les liens qui pointent vers des documents au sein du même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans le ou les documents sélectionnés, mais ne les vérifie pas. Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site.
“Identification et suppression des fichiers non utilisés” on page 86
1 Enregistrez le fichier dans un emplacement de votre site Dreamweaver local. 2 Choisissez Fichier > Vérifier la page > Liens.
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats). Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site entier. 4 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vérificateur de lien. Le
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours. 2 Dans Affichage local, sélectionnez les fichiers ou les dossiers à vérifier. 3 Suivez l'une des procédures suivantes pour accéder aux options :
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats). 4 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours. 2 Choisissez Site > Vérifier tous les liens du site.
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes ou Fichiers orphelins dans le menu déroulant
Une liste des fichiers correspondant au type du rapport sélectionné s'affiche dans la boîte de dialogue Vérificateur de lien. Note: Si vous avez sélectionné Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des fichiers orphelins du panneau Vérificateur de lien en sélectionnant un fichier dans la liste et en appuyant sur la touche Supprimer. 4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
Une fois le rapport de liens exécuté, vous pouvez corriger les liens rompus et les références d'images directement dans la boîte de dialogue Vérificateur de lien, ou ouvrir les fichiers de la liste et réparer les liens dans l'inspecteur Propriétés.
1 Exécutez un rapport de vérification des liens. 2 Sélectionnez le lien rompu dans la colonne Liens brisés (pas dans la colonne Fichiers) du panneau Vérificateur de
Une icône de dossier s'affiche à côté du lien rompu. 3 Cliquez sur l'icône de dossier
Correction de liens dans l'inspecteur Propriétés 1 Exécutez un rapport de vérification des liens. 2 Double-cliquez sur une entrée de la colonne Fichier dans le panneau Vérificateur de lien (dans le groupe de
Dreamweaver ouvre le document, sélectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accès et le nom de fichier dans l'inspecteur Propriétés (si l'inspecteur Propriétés n'est pas ouvert, choisissez Fenêtre > Propriétés pour l'ouvrir).
H (ou sur le bouton Actualiser) dans l'inspecteur Propriétés pour réinitialiser les valeurs de hauteur et de largeur. 4 Enregistrez le fichier.
Prévisualisation de pages dans Dreamweaver A propos de l'affichage en direct L'affichage en direct diffère du mode Création traditionnel de Dreamweaver en ce sens qu'il offre un rendu non modifiable et plus réaliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la commande Aperçu dans le navigateur, mais fournit plutôt une façon différente de voir à quoi ressemble votre page « en direct » sans devoir quitter l'espace de travail de Dreamweaver. Vous pouvez passer à l'affichage en direct à tout moment lorsque vous vous trouvez en mode Création. Toutefois, le passage à l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage traditionnels de Dreamweaver (Code/Fractionné/Création). Lorsque vous passez du mode Création au mode Affichage en direct, vous vous contentez de faire basculer le mode Création d'un état modifiable à un état « en direct ». Bien que le mode Création soit figé lorsque vous accédez au mode Affichage en direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications. Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez également décider d'afficher le code en direct. Le mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le navigateur exécute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un affichage non modifiable. Un autre avantage du mode Affichage en direct est sa capacité à figer le code JavaScript. Par exemple, vous pouvez passer en mode Affichage en direct et survoler les lignes d'un tableau basé sur Spry qui changent de couleur de par l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage en direct fige la page dans son état actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des modifications. Il peut être utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les propriétés des différents états d'un menu ou d'autres éléments interactifs qu'il est impossible de voir dans le mode Création traditionnel. Vous trouverez un didacticiel vidéo sur l'utilisation du mode En direct, réalisé par l'équipe de Dreamweaver, à l'adresse www.adobe.com/go/dw10liveview_fr. Vous trouverez, à l'adresse ci-après, une vidéo de l'équipe de conception de Dreamweaver qui présente l'utilisation de la navigation dans le mode En direct : http://www.adobe.com/go/dwcs5livenav_fr. Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
1 Veillez à bien être en mode Création (Affichage > Création) ou en modes Code et Création (Affichage > Code et
Même s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification à d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et à mesure que vous cliquez dans l'affichage en direct. Vous pouvez travailler dans des fichiers associés (par exemple des feuilles de style CSS) tout en maintenant le focus sur l'affichage en direct. Pour ce faire, ouvrez le fichier associé à partir de la barre d'outils Fichiers apparentés, dans le haut du document. 4 Si vous avez apporté des modifications en mode Code ou dans un fichier associé, actualisez l'affichage en direct en
5 Pour revenir au mode Création modifiable, cliquez à nouveau sur le bouton Affichage en direct.
Le code affiché en mode Code en direct est similaire à ce que vous verriez si vous consultiez la source de la page à partir d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page à partir du navigateur, le mode Code en direct est dynamique et est mis à jour à mesure que vous interagissez avec la page en mode Affichage en direct. 1 Veillez à vous trouver en mode Affichage en direct. 2 Cliquez sur le bouton Code en direct.
Lorsque vous interagissez avec des éléments interactifs, le mode Code en direct met en surbrillance les modifications dynamiques apportées au code. 3 Pour désactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage >
4 Pour revenir au mode Code modifiable, cliquez à nouveau sur le bouton Code en direct.
> Préférences (MacOS), puis choisissez la catégorie Coloration du code.
Désactiver JavaScript Désactive JavaScript et rend à nouveau la page de la manière dont elle se présenterait dans un navigateur où JavaScript serait désactivé. Désactiver les plug-ins Désactive les plug-ins et rend à nouveau la page de la manière dont elle se présenterait dans un navigateur où les plug-ins seraient désactivés. Surligner les modifications dans le code en direct Active ou désactive la mise en surbrillance des modifications dans le
Modification de la page d'affichage en direct dans un nouvel onglet Permet d'ouvrir de nouveaux onglets pour les
Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche CTRL enfoncée. Suivre les liens de manière continue Rend les liens du mode En direct actifs en permanence jusqu'à ce que vous les
Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant lorsque vous cliquez sur l'icône Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre fichier sur le serveur avant l'actualisation, ce qui garantit que les deux fichiers soient synchronisés. Utiliser le serveur d'évaluation pour la source de document Option employée principalement par les pages
Dreamweaver emploie la version du fichier qui se trouve sur le serveur d'évaluation du site comme source d'affichage en direct. Utiliser des fichiers locaux pour les liens de documents Réglage par défaut pour les sites non dynamiques. Lorsque
Paramètres de demande HTTP Affiche une boîte de dialogue de réglages avancés où vous pouvez entrer des valeurs
“Présentation de la barre d'outils Navigation de l'explorateur” on page 12 “Basculement d'un mode à un autre dans la fenêtre de document” on page 19 “Ouverture des fichiers associés” on page 75 “Affichage des données dynamiques” on page 622 Didacticiel sur l'utilisation du mode Affichage en direct
Vous pouvez obtenir un aperçu d'une page dans un navigateur à la demande. Il n'est pas nécessaire de la transférer au préalable sur un serveur Web. Lorsque vous affichez un aperçu d'une page, toutes les fonctions liées au navigateur doivent être opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrôles ActiveX® et les plug-ins Netscape Navigator, à condition que vous ayez installé les plug-ins ou les contrôles ActiveX requis dans vos navigateurs. Avant d'afficher un aperçu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus récentes. 1 Procédez de l'une des manières suivantes pour afficher un aperçu de la page :
Note: Si aucun navigateur ne figure dans la liste, choisissez Edition > Préférences ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Aperçu située dans la partie gauche du navigateur pour sélectionner un navigateur
2 Cliquez sur les liens et testez le contenu de votre page.
Edition > Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Pour lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine, placez le fichier sur un serveur distant, puis choisissez Fichier > Aperçu dans le navigateur pour l'afficher. 3 Fermez la page dans le navigateur après avoir effectué le test.
“Chemins relatifs à la racine du site” on page 289
Vous pouvez définir les préférences que les navigateurs emploieront lors de l'affichage de l'aperçu d'un site, ainsi que définir les navigateurs principaux et secondaires. 1 Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs. 2 Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), complétez la boîte de dialogue Navigateurs,
3 Pour supprimer un navigateur de la liste, sélectionnez-le, puis cliquez sur le bouton moins (-). 4 Pour modifier les paramètres d'un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les
5 Sélectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est
Pour prévisualiser des pages créées dans Dreamweaver sur différents périphériques mobiles, utilisez Device Central avec sa fonction intégrée Small-Screen Rendering d'Opera. Des navigateurs différents sont installés sur les différents périphériques, mais la prévisualisation peut vous donner un bon aperçu du contenu et de son comportement sur un périphérique donné. 1 Lancez Dreamweaver. 2 Ouverture d'un fichier. 3 Effectuez l'une des opérations suivantes :
“Utilisation de Device Central et Dreamweaver” on page 400
“Définition des préférences de codage” on page 316 “Personnalisation des raccourcis clavier” on page 316 “Conformité des pages avec le langage XHTML” on page 345 “Recherche de balises, d'attributs ou de chaînes de texte dans le code” on page 337 “Enregistrement et chargement de modèles de recherche” on page 337 “Optimisation de l'espace de travail pour le développement visuel” on page 580 “Affichage des enregistrements de base de données” on page 613
Adobe® Dreamweaver® CS5 contient à la fois des options permettant de lancer des éditeurs de texte et des options conçues pour vous assister dans la rédaction du code, par exemple les conseils de code, et ce dans les langages suivants :
• XHTML Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos opérations entraîne une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous sélectionnez la commande Appliquer le format source. Quelques-unes des options de réécriture du code sont activées par défaut. Les fonctions Roundtrip HTML de Dreamweaver permettent d'échanger des documents entre un éditeur HTML en mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalités, on compte les suivantes :
• Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre éditeur HTML, même s'il est incorrect, à moins que vous n'ayez activé les options de réécriture.
<MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marque comme erronée, mais ne modifie pas le code.
XHTML ignorées lors de ce type d'opération. Note: Certaines de ces spécifications sont également exigées dans diverses versions du langage HTML. Le tableau ci-dessous répertorie les spécifications XHTML automatiquement observées par Dreamweaver :
<p>Voici un <i>exemple incorrect.</p></i> <p>Voici un <i>exemple incorrect.</i></p>
Les éléments vides doivent se terminer par une balise de fin ou la balise de début doit être fermée avec le code />. Par exemple, <br> fermeture des balises vides dans le code généré par ses soins ainsi est incorrect ; la forme correcte de la balise est soit <br></br>, que pendant le nettoyage du code XHTML. soit <br/>. Les éléments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et param. Pour garantir la rétrocompatibilité avec les navigateurs non XML, un espace doit précéder le code /> (par exemple, <br /> et non<br/>). Il est impossible d'abréger les attributs ; ainsi, <td nowrap> est incorrect ; la forme correcte est <td nowrap="nowrap">.
Affecte la même valeur aux attributs name et id, toutes les fois où l'attribut name est défini par un inspecteur Propriétés, dans le code généré par Dreamweaver, ainsi que pendant le nettoyage du code XHTML.
Une valeur de type Enuméré est une valeur appartenant à une liste donnée de valeurs autorisées ; par exemple, l'attribut align comprend les valeurs autorisées suivantes : center, justify, left et right. Tous les éléments de script et de style doivent comporter un attribut type. (La nécessité de l'attribut de type d'un élément de script a été introduite avec HTML 4, lors de la dépréciation de l'attribut de language.)
Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans vos recherches pour décrire des concepts tels que « lignes commençant par ‘var’ » ou « valeurs d'attribut contenant un nombre ». Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples d'utilisation. Pour rechercher du texte contenant un des caractères spéciaux présentés dans le tableau, indiquez qu'il s'agit d'un caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la phrase conditions spéciales*, vous pouvez utiliser un modèle de recherche tel que celui-ci : spéciales\*. Si vous n'indiquez pas l'astérisque comme caractère spécial, vous trouverez toutes les occurrences de « spéciales » (de même que « spéciale », « spécialess » et « spécialesss »), et pas seulement celles qui sont suivies d'un astérisque. Caractère
F{2,4} trouve « FF » dans « #FF0000 » et les quatre premiers
Notez que cette recherche porte sur un caractère particulier et non sur la notion de retour à la ligne ; par exemple, elle ne trouvera pas une balise <br> ou <p>. Les caractères de retour chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne.
Note: Dans la zone de texte Rechercher, faites référence au groupe entre parenthèses mentionné plus tôt dans l'expression régulière en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
Lorsque vous sélectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le développement d'une page dynamique, Dreamweaver insère un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur. Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur. Dreamweaver détecte les comportements de serveur en se repérant à des modèles de code spécifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code empêche dès lors Dreamweaver de détecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver.
Utilisation d'espaces de travail orientés codeur Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter à la façon dont vous travaillez. Vous pouvez par exemple changer le mode d'affichage du code, définir différents raccourcis clavier ou importer et utiliser votre bibliothèque de balises de prédilection. Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conçues pour offrir une expérience de codage optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de sélectionner l'un des espaces de travail suivants : Développeur d'applications, Développeur d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par défaut en mode Code (dans la fenêtre de document tout entière ou en modes Code et Création) et comportent des panneaux ancrés du côté gauche de l'écran. À l'exception de Développeur d'applications Plus, ils éliminent tous l'inspecteur Propriétés de l'affichage par défaut. Si aucun des espaces de travail prédéfinis ne répond précisément à vos attentes, vous pouvez personnaliser la disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en tant qu'espace de travail personnalisé.
“Gestion des fenêtres et des panneaux” on page 25 “Enregistrement et basculement d’un espace de travail à l’autre” on page 29 “Personnalisation des raccourcis clavier” on page 36 “Gestion des bibliothèques de balises” on page 360
“Modification du format du code” on page 317 “Définition des préférences de conseils de code” on page 324 “Définition des couleurs du code” on page 320
❖ Choisissez Affichage > Code.
1 Choisissez Affichage > Code et création.
2 Pour afficher la page au premier plan, choisissez Mode Création au premier plan dans le menu Affichage de la barre
3 Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à l'endroit approprié.
Toutes les modifications apportées dans le mode Création se répercutent automatiquement dans le mode Code. Toutefois, après avoir effectué des modifications en mode Code, vous devez mettre à jour manuellement le document dans le mode Création ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
L'inspecteur de code permet de travailler dans une fenêtre de code distincte, comme vous le faites en mode Code. ❖ Choisissez Fenêtre > Inspecteur de code. La barre d'outils contient les options suivantes : Gestion des fichiers Permet de placer ou d'acquérir le fichier. Aperçu/Débogage dans le navigateur Permet de prévisualiser ou de déboguer votre document dans un navigateur. Actualiser mode Création Met à jour le document en mode Création, de façon à ce qu'il applique les modifications apportées dans le code. Les modifications apportées dans le 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. Référence Ouvre le panneau Référence. Consultez la section “Utilisation des documents de référence sur les langages”
Navigation par code Permet de se déplacer rapidement dans le code. Consultez la section “Accès à une fonction
Afficher les options Permet de déterminer la façon dont le code est affiché. Consultez la section “Définition de l'apparence du code” on page 316.
Pour plus d'informations, reportez-vous à la section “Personnalisation des raccourcis clavier” on page 36.
“Manipulation de fragments de code” on page 335
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Création. Vous pouvez définir les types de fichiers à ouvrir en mode Code. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche. 3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir
Insérez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
“Utilisation d'un éditeur externe” on page 321 “Définition des préférences du programme de validation” on page 344
A propos des préférences de codage Vous pouvez définir des préférences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction de vos besoins. Note: Pour définir les préférences avancées, utilisez l'éditeur de la bibliothèque de balises (consultez la section “Gestion des bibliothèques de balises” on page 360).
Le menu Affichage > Options d'affichage de code permet de configurer le renvoi à la ligne des mots, l'affichage du numéro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments de code, la mise en retrait du code, ainsi que l’affichage des caractères masqués. 1 Affichez le document dans le mode Code ou l'Inspecteur de code. 2 Effectuez l'une des opérations suivantes :
3 Activez ou désactivez l’une des options suivantes : Renvoi à la ligne Renvoie le code à la ligne pour le rendre visible sans qu'il soit nécessaire de le faire défiler
Numéros de lignes Affiche le numéro des lignes de code sur le côté. Caractères masqués Permet d’afficher les caractères spéciaux au lieu d’un simple espace blanc. Par exemple, un point
Note: Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas symbolisés par une marque de paragraphe. Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Dès la
Coloration de la syntaxe Active ou désactive la mise en couleurs du code. Pour plus d'informations sur la modification
Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la rédaction du
“Affichage du code” on page 315 “Présentation de la barre d'outils de codage” on page 13 “Définition des préférences de conseils de code” on page 324
Vous pouvez modifier l'aspect de votre code en définissant des préférences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs. Toutes les options de formatage de code, à l'exception de l'option Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions à des documents que vous créez par la suite. Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes > Appliquer le format source. 1 Choisissez Edition > Préférences. 2 Sélectionnez la catégorie Format du code dans la liste de gauche. 3 Parmi les options suivantes, définissez celles de votre choix : Retrait Indique si le code généré par Dreamweaver doit être mis en retrait (en conformité avec les règles de retrait
Note: La majorité des options de retrait de cette boîte de dialogue ne s'appliquent qu'au code généré par Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entrée s'aligne au même niveau que la précédente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section “Définition de l'apparence du code” on page 316.
Tabulations dans le menu contextuel, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque niveau de mise en retrait. Taille de la tabulation Détermine la taille, en caractères, de chaque tabulation dans le mode Code. Par exemple, si cette
De plus, si la taille du retrait est définie sur 3 et que les caractères utilisés sont des tabulations, le code généré par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12 caractères en mode Code. Note: Dreamweaver effectue les mises en retrait à l'aide de tabulations ou d'espaces mais ne convertit pas une série d'espaces en tabulation lors de l'insertion de code. Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera
HTML s'affiche correctement lorsqu'il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque vous travaillez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre éditeur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText. Note: Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous téléchargez (en réception) des fichiers en mode ASCII, Dreamweaver définit les sauts de ligne en fonction du système d'exploitation de votre ordinateur ; si vous transférez des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF. Casse de balise par défaut et casse d'attribut par défaut Contrôlez la capitalisation des noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous insérez ou que vous modifiez dans le mode Création, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs déjà contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également activé l'une des options Remplacer la casse de).
Remplacer la casse de : Balises et Attributs Spécifie s'il faut toujours convertir les noms de balises et d'attributs dans la
Code ou dans Quick Tag Editor ou bien que vous insérez à partir du panneau Insertion, sont également convertis dans la casse spécifiée. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules, spécifiez minuscules dans l'option Casse de balise par défaut et activez l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules. Note: D'anciennes versions du code HTML permettaient d'écrire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML étant de plus en plus répandu, il est conseillé d'utiliser des minuscules pour ces éléments. Balise TD : Ne pas inclure de saut de ligne dans la balise TD Résout un problème de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise <td> ou avant une balise </td>, même si le formatage de la bibliothèque de balises indique qu'un saut de ligne devrait être inséré.
de style en cascade) et pour les différents attributs et balises dans l'éditeur de la bibliothèque de balises. Espace blanc (version japonaise uniquement) Permet de sélectionner une espace insécable ( ) ou une espace
“Mise en forme du code CSS” on page 155 “Définition des préférences de conseils de code” on page 324
Les préférences de correction de code permettent de spécifier les préférences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous entrez des valeurs et adresses URL à l'aide des outils (par exemple, l'inspecteur Propriétés). Ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code. Si vous désactivez ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de document pour le code HTML qu'il aurait corrigé. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Correction du code dans la liste de gauche. 3 Parmi les options suivantes, définissez celles de votre choix : Corriger les balises incorrectement imbriquées et non fermées Corrige les balises qui se chevauchent. Par exemple, <b><i>texte</b></i> est réécrit comme <b><i>texte</i></b>. Cette option insère également des guillemets et des crochets de fermeture s'ils sont absents.
Note: Contrairement à d'autres options de cette boîte de dialogue de préférences, cette option ne s'applique pas à l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un élément de formulaire. Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture
M'avertir lors de la correction ou de la suppression de balises Affiche un récapitulatif des codes HTML
(à l'aide des numéros de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu'elle produise l'effet voulu. Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires. Coder <, >, & et " dans les valeurs d'attributs à l'aide de & Garantit que les valeurs d'attribut entrées ou modifiées à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette option est activée par défaut.
Coder caractères spéciaux dans les URL à l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL
Coder caractères spéciaux dans les URL à l'aide de % Fonctionne de façon identique à l'option ci-dessus, mais utilise une autre méthode pour coder les caractères spéciaux. Cette méthode d'encodage (à l'aide du signe %) offre une meilleure compatibilité avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractères utilisés dans certaines langues.
“Nettoyage de fichiers HTML créés avec Microsoft Word” on page 79 “Définition des préférences de conseils de code” on page 324
Utilisez les préférences de coloration du code pour spécifier les couleurs des principales catégories de balises et d'éléments de code, par exemple les balises liées à la mise en forme ou les identificateurs JavaScript. Pour définir les préférences de coloration d'une balise spécifique, modifiez sa définition dans l'éditeur de la bibliothèque de balises. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Coloration du code dans la liste de gauche. 3 Sélectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux
4 Cliquez sur le bouton Modifier le modèle de coloration. 5 Dans la boîte de dialogue Modifier le modèle de coloration, choisissez un élément de code dans la liste Styles, puis
L'échantillon de code affiché dans le volet d'aperçu est modifié pour correspondre aux nouveaux styles et couleurs. Cliquez sur OK pour enregistrer les modifications et fermer la boîte de dialogue Modifier le modèle de coloration. 6 Apportez les autres modifications requises aux préférences de coloration du code, puis cliquez sur OK. Arrière-plan par défaut permet de définir la couleur d'arrière-plan par défaut pour le mode Code et pour l'inspecteur
Caractères masqués définit la couleur des caractères masqués. Arrière-plan du code en direct définit la couleur d'arrière-plan du mode Code en direct. La couleur par défaut est le
Modifications du code en direct définit la couleur de surbrillance du code qui est modifié dans le mode Code en direct.
Arrière-plan en lecture seule définit la couleur d'arrière-plan du texte en lecture seule.
“Personnalisation des préférences de coloration de code d'un modèle” on page 440 “Modification de bibliothèques, de balises et d'attributs” on page 361
Vous pouvez spécifier un éditeur externe à utiliser pour l'édition de fichiers possédant des extensions précises. Par exemple, vous pouvez lancer un éditeur de texte comme BBEdit, le Bloc-Notes ou TextEdit à partir de Dreamweaver pour modifier les fichiers JavaScript (JS). Vous pouvez attribuer différents éditeurs externes pour différentes extensions de nom de fichier.
“Ouverture de fichiers en mode Code par défaut” on page 316
1 Choisissez Edition > Préférences. 2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK. Ouvrir en mode Code Précise les extensions de noms de fichiers à ouvrir automatiquement en mode Code dans
Editeur de code externe Spécifie l'éditeur de texte à utiliser. Recharger les fichiers modifiés Indiquez ce que Dreamweaver doit faire lorsqu'il détecte que des changements ont été
Enregistrer au démarrage Permet d'indiquer si Dreamweaver doit systématiquement enregistrer le document actif
Fireworks Spécifiez les éditeurs pour divers types de fichiers multimédia.
❖ Choisissez Edition > Modifier avec éditeur externe.
Conseils de code Les conseils de code vous permettent d'insérer et de modifier le code rapidement et sans erreur de saisie. A mesure que vous tapez des caractères en mode Code, une liste de suggestions s'affiche et vous aide à compléter votre saisie. Par exemple, lorsque vous tapez les premiers caractères du nom d'une balise, d'un attribut ou d'une propriété CSS, une liste d'options dont le nom commence par ces caractères s'affiche. Cette fonctionnalité facilite l'insertion et la modification de code. Vous pouvez également l'utiliser pour consulter les attributs disponibles pour une balise, les paramètres d'une fonction ou les méthodes d'un objet. Les conseils de code sont disponibles pour différents types de code. Lorsque vous tapez le premier caractère d'un type de code précis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms de balises HTML, tapez un crochet ouvrant (<). De même, pour afficher des conseils de code pour JavaScript, tapez un point après un objet.
à ce langage. Vous pouvez rédiger ces classes personnalisées ou les ajouter par l'intermédiaire de bibliothèques de fournisseurs tiers, comme Prototype. Pour faire disparaître la liste des conseils de code, appuyez sur la touche Retour arrière (Windows) ou Arrière (Macintosh). Vous trouverez un didacticiel vidéo sur les conseils de code à l'adresse www.adobe.com/go/lrvid4048_dw_fr. Vous trouverez un didacticiel vidéo sur la prise en charge de JavaScript dans Dreamweaver, réalisé par l'équipe de Dreamweaver, à l'adresse www.adobe.com/go/dw10javascript_fr.
Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants :
• Ajax Insertion de code à l'aide des conseils en mode Code 1 Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un crochet ouvrant
Une liste d'éléments (par exemple les noms des différentes balises ou des différents attributs) s'affiche.
3 Double-cliquez sur l'un des éléments de cette liste pour l'insérer ; vous pouvez également le sélectionner, puis
Si vous avez créé un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Création est visible, il peut arriver que du code non valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparaître ce code non valide du mode Création, appuyez sur F5 afin d'actualiser l'affichage après l'insertion du style. 4 Pour insérer une balise de fin, tapez </ (barre oblique).
Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture lorsque vous avez tapé le crochet fermant (>) final de la balise d'ouverture. Alternativement, le comportement par défaut peut consister à ne pas insérer la moindre balise de fermeture. Sélectionnez Edition > Préférences > Conseils de code, puis sélectionnez l'une des options de Balises de fermeture.
• Pour remplacer un attribut par un autre, supprimez l'attribut concerné et sa valeur, puis ajoutez le nouvel attribut et la valeur associée en suivant la procédure ci-avant.
Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans un fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez à un fichier JavaScript afin d'y apporter une modification. Cette modification se répercute dans la liste des conseils de code lorsque vous revenez au fichier HTML principal. Toutefois, la mise à jour automatique ne fonctionne que si vous modifiez vos fichiers JavaScript dans Dreamweaver. Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les conseils de code JavaScript.
Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver détecte des erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations à leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la première ligne du code où Dreamweaver a rencontré l'erreur. Lorsque vous avez corrigé les erreurs, Dreamweaver continue à afficher celles qui surviennent par la suite. Dreamweaver fournit une assistance supplémentaire en mettant en rouge les numéros des lignes où des erreurs de syntaxe se sont produites. Cette mise en évidence est visible dans le mode Code du fichier contenant l'erreur. Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associées. Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier inclus contient une erreur, Dreamweaver affiche également une alerte pour celui-ci. Vous pouvez aisément ouvrir le fichier associé contenant l'erreur en cliquant sur son nom dans le haut du document.
Vous pouvez modifier les paramètres par défaut des conseils de code. Par exemple, si vous ne voulez pas afficher les noms des propriétés CSS ou les conseils de code Spry, vous pouvez les désactiver parmi les préférences des conseils de code. Vous pouvez également définir des préférences relatives au délai d'affichage des conseils de code et aux balises de fermeture. Même si l'affichage des conseils de code est désactivé, vous pouvez afficher un conseil en mode Code en appuyant sur les touches Ctrl+Barre d'espace. 1 Choisissez Edition > Préférences. 2 Sélectionnez la catégorie Conseils de code dans la liste de gauche. 3 Parmi les options suivantes, définissez celles de votre choix : Balises de fermeture Permet de spécifier le mode d'insertion des balises de fermeture par Dreamweaver. Par défaut, Dreamweaver insère la balise de fermeture automatiquement lorsque vous tapez les caractères </. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de façon à omettre les balises de fin. Activer les conseils de code Entraîne l'affichage des conseils de code lorsque vous entrez du code en mode Code. Réglez le curseur Délai pour définir le délai (en secondes) qui s'écoule avant l'apparition des conseils appropriés. Activer les infobulles descriptives Affiche une description détaillée (s'il en existe une) du conseil de code sélectionné. Menus Définit précisément le type de conseils de code à afficher pendant la saisie. Libre à vous d'utiliser tous les menus ou une partie seulement.
“Utilisation des menus d'indication dans Quick Tag Editor” on page 350 DOM (Document Object Model) W3C Didacticiel sur les conseils de code
Dreamweaver CS5 permet aux développeurs qui emploient Joomla, Drupal, Wordpress ou d'autres cadres de visualiser les conseils de code PHP lorsqu'ils écrivent en mode Code. Pour afficher ces conseils de code, vous devez tout d'abord créer un fichier de configuration à l'aide de la boîte de dialogue Conseils de code spécifiques au site. La configuration indique où Dreamweaver doit rechercher les conseils de code spécifiques à votre site. Vous trouverez un didacticiel vidéo sur l'utilisation des conseils de code spécifiques au site à l'adresse www.adobe.com/go/learn_dw_comm13_fr.
La boîte de dialogue Conseils de code spécifiques au site permet de créer le fichier de configuration requis pour afficher les conseils de code dans Dreamweaver. Par défaut, Dreamweaver place le fichier de configuration dans le répertoire Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.
Pour que les conseils de code puissent être affichés, la page sur laquelle vous travaillez doit se trouve dans le site actuellement sélectionné. 1 Choisissez Site > Conseils de code.
CMS (système de gestion du contenu) vous employez. Par défaut, Dreamweaver prend en charge trois cadres : Drupal, Joomla et Wordpress. Les quatre boutons à droite du menu Structure permettent d'importer, enregistrer, renommer ou supprimer des structures de cadre. Note: Il est impossible de supprimer ou de renommer les structures de cadre par défaut existantes. 2 Dans la zone Sous-racine, définissez le dossier de sous-racine où vous stockez les fichiers de votre cadre. Vous
Dreamweaver affiche l'arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et/ou fichiers à analyser sont tous affichés, cliquez sur OK pour exécuter l'analyse. Si vous voulez personnaliser l'analyse, passez aux étapes suivantes. 3 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers afin de sélectionner un fichier ou un dossier à
Note: La définition d'extensions de fichier spécifiques accélère le processus d'analyse. 4 Pour retirer des fichiers de l'analyse, sélectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fenêtre
Note: Si vous avez sélectionné le cadre Drupal ou Joomla, la boîte de dialogue Conseils de code spécifiques au site affiche un chemin d'accès supplémentaire vers n fichier dans votre dossier de configuration de Dreamweaver. Ne le supprimez pas, car il est nécessaire en cas d'emploi de ces cadres. 5 Pour personnaliser la façon dont la fonctionnalité Conseils de code spécifiques au site traite un fichier ou un dossier
• Sélectionnez Récursif pour inclure tous les fichiers et dossiers du répertoire sélectionné. • Cliquez sur le bouton Extensions pour ouvrir la boîte de dialogue Rechercher des extensions, où vous pouvez préciser les extensions de fichiers à inclure dans l'analyse pour un fichier ou un dossier déterminé.
Vous pouvez enregistrer la structure de site personnalisée que vous avez créée dans la boîte de dialogue Conseils de code spécifiques au site. 1 Créez la structure des fichiers et des dossiers désirée, en ajoutant et supprimant les fichiers et dossiers selon vos
2 Cliquez sur le bouton Enregistrer la structure dans le coin supérieur droit de la boîte de dialogue. 3 Donnez un nom à la structure du site, puis cliquez sur Enregistrer.
Lorsque vous renommez la structure de votre site, n'oubliez pas que vous ne pouvez pas utiliser les noms d'une des trois structures de cadre de site par défaut, ni le mot « custom » (personnalisé). 1 Affichez la structure à renommer. 2 Cliquez sur l'icône Renommer la structure dans le coin supérieur droit de la boîte de dialogue. 3 Entrez le nouveau nom de la structure, puis cliquez sur Renommer.
Vous pouvez ajouter n'importe quel fichier ou dossier associé à votre cadre. Vous pouvez ensuite préciser les extensions des fichiers à analyser. (Voir la section suivante.) 1 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers pour ouvrir la boîte de dialogue Ajouter
2 Dans la zone Ajouter fichier/dossier, entrez le chemin d'accès au fichier ou au dossier à ajouter. Vous pouvez
3 Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions pour préciser les extensions des fichiers à
Note: La définition d'extensions de fichier spécifiques accélère le processus d'analyse. 4 Cliquez sur Ajouter.
Utilisez la boîte de dialogue Rechercher des extensions pour afficher et trouver les extensions des fichiers inclus dans la structure du site. 1 Dans la boîte de dialogue Conseils de code spécifiques au site, cliquez sur le bouton Extensions.
2 Pour ajouter une autre extension à la liste, cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions. 3 Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).
1 Assurez-vous que vous êtes en mode Code (Affichage > Code). 2 Placez le curseur dans le code, ou sélectionnez un bloc de code. 3 Cliquez sur un bouton de la barre d'outils de codage, ou sélectionnez un élément de l'un des menus contextuels de
Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par défaut les boutons suivants : Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est sélectionnée, elle s'affiche dans
Afficher la fenêtre Navigation dans le code Affiche la fenêtre Navigation dans le code. Pour plus d'informations,
exemple, tout le code compris entre <table> et </table>). Pour réduire tout le contenu d'une balise complète, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Réduire balise entière. Il est également possible de réduire le code situé à l'extérieur d'une balise complète, en plaçant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Réduire balise entière tout en maintenant la touche Alt enfoncée (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le contenu réduit à l’extérieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section “A propos de la réduction du code” on page 339. Réduire la sélection Réduit le code sélectionné.
Alt (Windows) ou Option (Macintosh) sur le bouton Réduire sélection. Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le contenu et réduit exactement le code sélectionné. Pour plus d'informations sur le mode Code, consultez la section “A propos de la réduction du code” on page 339. Développer tout Rétablit tout le code réduit. Sélectionner une balise parent Sélectionne le contenu et les balises d’ouverture et de fermeture qui encadrent la ligne
équilibrées, Dreamweaver sélectionne finalement les balises html et /html situées aux extrémités. Equilibrer les accolades Sélectionne tout le code se trouvant à l'intérieur des parenthèses, des accolades ou des crochets
Numéros de lignes Permet d'afficher ou masquer les numéros de lignes au début de chaque ligne de code. Surligner le code non valide Surligne le code non valide en jaune. Alertes d'erreurs de syntaxe dans la barre d'information Active ou désactive une barre d'information, dans le haut de
Appliquer commentaire Permet d'encadrer le code sélectionné avec des balises de commentaires, ou d'ouvrir de
JavaScript sélectionné, ou insère une unique balise // si aucun code n'est sélectionné.
• La marque de commentaire ' a été conçue pour le code Visual Basic. Elle insère un guillemet droit simple au début de chaque ligne sélectionnée d'un script Visual Basic, ou insère un guillemet droit simple au point d'insertion si aucun code n'est sélectionné.
Appliquer Commentaire sur serveur, Dreamweaver détecte automatiquement la balise de commentaire correcte et l’applique à la sélection.
Fragment de code récents Permet de choisir dans le panneau Fragments de code un fragment de code récemment
Déplacer ou convertir une feuille CSS Permet de déplacer du code CSS ou de convertir du code CSS intégré en règles CSS. Pour plus d'informations, consultez les sections “Déplacement/exportation de règles CSS” on page 152 et “Conversion d'un style CSS intégré en une règle CSS” on page 154. Indentation du code Ramène la sélection vers la droite. Indentation négative du code Ramène la sélection vers la gauche. Mise en forme du code source Applique les formats de code précédemment définis au code sélectionné (ou à la page entière si aucun code n'est sélectionné). Vous pouvez également définir les préférences de formatage du code en sélectionnant Formatage du code source avec le bouton du même nom, ou en modifiant les bibliothèques de balises en sélectionnant Edition, Bibliothèques de balises.
Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour automatique à la ligne, Caractères masqués et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver. Note: L'option d'affichage des caractères masqués, qui ne fait pas partie des boutons par défaut de la barre d'outils de codage, est disponible à partir du menu Affichage (Affichage > Options d'affichage de code > Caractères masqués).
“Vérification de l'équilibre des balises et des accolades” on page 342 “Présentation de la barre d'outils de codage” on page 13 “Affichage des barres d'outils” on page 23
1 Positionnez le point d'insertion dans le code. 2 Sélectionnez la catégorie appropriée du panneau Insertion. 3 Cliquez sur un bouton du panneau Insertion ou sélectionnez un élément de l'un des menus de ce panneau.
Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affiché. et selon que le mode Code ou Création est actif. Bien que le panneau Insertion regroupe les balises fréquemment utilisées, son contenu n'est pas exhaustif. Vous trouverez un choix plus varié de balises dans le sélecteur de balises.
1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
Le Sélecteur de balises s'affiche. Le panneau de gauche répertorie les bibliothèques de balises prises en charge, tandis que le panneau de droite affiche les balises individuelles du dossier de bibliothèques de balises sélectionné. 2 Dans la bibliothèque de balises, sélectionnez une catégorie de balises ou développez cette catégorie pour
3 Sélectionnez la balise souhaitée dans le volet de droite. 4 Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le sélecteur de balises, cliquez sur
5 Pour afficher ces informations dans le panneau Référence, cliquez sur l'icône <?>. Ces informations, si elles existent,
6 Cliquez sur le bouton Insérer pour insérer la balise sélectionnée dans le code.
Si la balise ne nécessite aucune information complémentaire, un éditeur de balises s'affiche. 7 Le cas échéant, entrez les informations supplémentaires dans l'éditeur de balises, puis cliquez sur OK. 8 Cliquez sur le bouton Fermer.
“A propos des bibliothèques de balises de Dreamweaver” on page 360
❖ Choisissez Insertion > Commentaire.
En mode Création, la boîte de dialogue Commentaire s'affiche. Entrez le commentaire, puis cliquez sur OK.
❖ Choisissez Affichage > Assistances visuelles > Eléments invisibles.
1 Copiez le code à partir du mode Code ou d'une autre application. 2 Placez le point d'insertion en mode Code, puis choisissez Edition > Coller.
“Collage et déplacement de fragments de code réduits” on page 340
Les éditeurs de balises permettent d'afficher, de spécifier et de modifier les attributs d'une balise. 1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
2 Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
1 En mode Code, sélectionnez du code, puis cliquez avec le bouton droit de la souris (Windows) ou en maintenant
2 Cliquez sur le sous-menu Sélection puis choisissez l'une des options suivantes : Réduire la sélection Réduit le code sélectionné. Réduire à l'extérieur de la sélection Réduit tout le code à l'extérieur du code sélectionné. Développer la sélection Développe le fragment de code sélectionné. Réduire balises entières Réduit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par
Réduire extérieur balises entières Réduit le contenu à l'extérieur d'un jeu de balises d'ouverture et de fermeture (par
Développer tout Rétablit tout le code réduit. Appliquer Commentaire HTML Encadre le code sélectionné de balises <!-- et -->, ou ouvre une nouvelle balise si
Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript sélectionné avec les codes de commentaires /* et */. Appliquer Commentaire // Insère une double barre oblique (//) au début de chaque ligne du code CSS ou JavaScript
Appliquer Commentaire ' Insère un guillemet droit simple au début de chaque ligne sélectionnée d'un script Visual Basic, ou insère un guillemet droit simple au point d'insertion si aucun code n'est sélectionné.
Appliquer correction barre oblique inversée-commentaire Entoure le code CSS sélectionné de balises de commentaire
Appliquer correction Ciao Entoure le code CSS sélectionné de balises de commentaire qui forcent Internet Netscape
Supprimer commentaire Supprime les balises de commentaires du code sélectionné. Si une sélection comporte des commentaires incorporés, seules les balises de commentaire externe sont supprimées. Supprimer correction barre oblique inversée-commentaire Supprime les balises de commentaires du code CSS
Supprimer correction Ciao Supprime les balises de commentaires du code CSS sélectionné. Si une sélection comporte
Convertir les tabulations en espaces Convertit toutes les tabulations de la sélection en espaces ; le nombre d'espaces
Convertir les espaces en tabulations Convertit les groupes d'espaces de la sélection en tabulations. Les groupes dont le
Retrait Met la sélection en retrait, en la repoussant vers la droite. Pour plus d'informations, consultez la section “Mise
Retrait négatif Ramène la sélection vers la gauche. Supprimer toutes les balises Supprime toutes les balises de la sélection. Convertir les lignes en tableaux Insère une balise table sans attribut de part et d'autre de la sélection. Ajouter des sauts de ligne Ajoute une balise br à la fin de chaque ligne de la sélection. Convertir en majuscules Convertit toutes les lettres de la sélection (y compris les noms et les valeurs des balises et des
Convertir en minuscules Convertit toutes les lettres de la sélection (y compris les noms et les valeurs des balises et des
Convertir les balises en majuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la
“Réduction et développement de fragments de code” on page 339
Code, grâce à l'inspecteur Propriétés du code. 1 En mode Création, sélectionnez l'icône visuelle de balise de langage de serveur. 2 Dans l'inspecteur Propriétés, cliquez sur le bouton Edition. 3 Apportez les modifications requises au code de la balise puis cliquez sur OK.
“Configuration de l'ordinateur pour le développement d'applications” on page 557
Lorsque vous rédigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez corriger le niveau de mise en retrait de la ligne ou du bloc de code sélectionnés, en les déplaçant d'une tabulation vers la gauche ou vers la droite.
• Appuyez sur la touche de tabulation. • Sélectionnez Edition > Indentation du code.
• Appuyez sur Maj+Tab. • Sélectionnez Edition > Indentation négative du code.
La fenêtre Navigation dans le code affiche une liste de codes source apparentés à une sélection spécifique sur votre page. Vous pouvez l'utiliser pour naviguer vers les codes source apparentés, comme des règles CSS internes et externes, des inclusions côté serveur, des fichiers JavaScript externes, des fichiers de modèles parents, des fichiers de bibliothèque et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fenêtre Navigation dans le code, Dreamweaver ouvre le fichier contenant le code concerné. Ce fichier s'affiche dans la section des fichiers associés, pour autant que cette fonctionnalité soit activée. Si elle n'est pas activée, Dreamweaver ouvre le fichier sélectionné dans un document séparé, dans la fenêtre de document. Si vous cliquez sur une règle CSS dans la fenêtre Navigation dans le code, Dreamweaver accède directement à cette règle. S'il s'agit d'une règle interne du fichier, Dreamweaver l'affiche en mode fractionné. Si la règle est un fichier CSS externe, Dreamweaver ouvre ce dernier et affiche la règle dans la section des fichiers associés, au-dessus du document principal. Vous pouvez accéder à la fenêtre Navigation dans le code depuis les modes Création, Code et fractionné, ainsi qu'à partir de l'inspecteur de code. Vous trouverez un didacticiel vidéo sur l'utilisation du navigateur de code, réalisé par l'équipe de Dreamweaver, à l'adresse http://www.adobe.com/go/dw10codenav_fr. Vous trouverez un didacticiel vidéo relatif à l'utilisation du mode Affichage en direct, aux fichiers associés et à la fenêtre Navigation dans le code à l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer. Note: Vous pouvez également ouvrir la fenêtre Navigation dans le code en cliquant sur l'icône proximité du point d'insertion sur la page si la souris reste inactive pendant 2 secondes.
1 Ouvrez la fenêtre Navigation dans le code à partir de la zone qui vous intéresse. 2 Clique sur l'élément de code auquel vous voulez accéder.
CSS relatives à la sélection. Pour le code CSS relatif à une sélection précise, la fenêtre Navigation dans le code fonctionne de façon similaire au panneau Styles CSS du mode Actuel. Lorsque vous maintenez le pointeur de la souris au-dessus d'une règle CSS, la fenêtre Navigation dans le code affiche, dans une infobulle, les propriétés de cette règle. Ces infobulles peuvent vous aider à distinguer des règles qui partagent un même nom.
1 Ouvrez la fenêtre Navigation dans le code. 2 Cliquez sur Désactiver l'indicateur dans le coin inférieur droit de la fenêtre. 3 Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.
“Ouverture des fichiers associés” on page 75 Didacticiel sur la navigation dans le code
En mode Code et dans l'inspecteur de code, vous pouvez afficher la liste des fonctions JavaScript ou VBScript de votre code et passer ainsi directement à l'une de ces dernières. 1 Affichez le document en mode Code (Affichage > Code) ou l'inspecteur de code (Fenêtre > Inspecteur de code). 2 Effectuez l'une des opérations suivantes :
Code, puis sélectionnez le sous-menu Fonctions dans le menu contextuel. Le sous-menu Fonctions ne s'affiche pas en mode Création. Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu.
3 Sélectionnez un nom de fonction pour atteindre cette dernière.
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document Dreamweaver, l'exporte dans un fichier externe et lie ce fichier à votre document. JSE peut également supprimer des gestionnaires d'événements tels que onclick et onmouseover de votre code puis joindre à votre document, de manière transparente, le code JavaScript associé à ces gestionnaires. Avant d'employer JavaScript Extractor, nous attirons votre attention sur les limitations suivantes :
Dreamweaver ne peut pas inspecter et compléter le panneau Comportements à l'aide de comportements qu'il a associés de manière transparente.
Externaliser le code JavaScript.
Vous trouverez un didacticiel vidéo sur la prise en charge de JavaScript dans Dreamweaver, réalisé par l'équipe de Dreamweaver, à l'adresse www.adobe.com/go/dw10javascript_fr. Pour utiliser JavaScript Extractor : 1 Ouvrez une page qui contient du code JavaScript (par exemple une page Spry). 2 Choisissez Commandes > Externaliser le code JavaScript. 3 Dans la boîte de dialogue Externaliser le code JavaScript, modifiez éventuellement les options par défaut.
JavaScript dans un fichier externe et qu'il y fasse référence dans le document actuel. Cette option laisse les gestionnaires d'événements tels que onclick et onload dans le document et conserve les comportements visibles dans le panneau Comportements.
1) déplace le code JavaScript vers un fichier externe et y fasse référence dans le document actuel, et 2) supprime les gestionnaires d'événements du code HTML et les insère en cours d'exécution à l'aide de JavaScript. Lorsque vous sélectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau Comportements.
Dreamweaver n'a pas sélectionnées par défaut. Par défaut, Dreamweaver présente mais ne sélectionne pas les modifications suivantes :
5 Enregistrez la page.
Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L'autre fichier est enregistré au même niveau que la page à partir de laquelle vous avez extrait le code JavaScript. N'oubliez pas de charger ces deux fichiers dépendants sur votre serveur Web lorsque vous enverrez la page d'origine.
“Création de pages Spry visuellement” on page 442
Les fragments de code permettent de stocker des contenus en vue de pouvoir les réutiliser rapidement. Vous pouvez créer, insérer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP, etc. Vous pouvez également gérer et partager vos fragments de code avec les autres membres de l'équipe. Vous disposez de quelques fragments prédéfinis que vous pouvez employer comme point de départ. Les fragments de code contenant des balises <font> et d'autres éléments et attributs déconseillés ont été déplacés dans le dossier Anciennes versions du panneau Fragments de code.
1 Placez le point d'insertion à l'endroit où vous souhaitez insérer le fragment de code ou sélectionnez le code à
2 Dans le panneau Fragments de code (Fenêtre > Fragments de code), double-cliquez sur le fragment de code.
1 Cliquez sur l'icône Nouveau fragment de code situé au bas du panneau Fragments de code 2 Donnez un nom au fragment de code.
(barres obliques (/ ou \), caractères spéciaux ou guillemets doubles (“)).
4 Pour l'option Type de fragment de code, sélectionnez Envelopper la sélection ou Insérer le bloc. a Si vous avez opté pour l'enveloppement de la sélection, ajoutez du code aux options suivantes : Insérer avant Tapez ou collez le code à insérer avant la sélection en cours. Insérer après Tapez ou collez le code à insérer après la sélection en cours.
Retour (Macintosh) à l'intérieur des zones de texte. Note: Dans la mesure où les fragments de code peuvent être créés en début ou en fin de bloc, vous pouvez les utiliser pour encadrer d'autres balises et contenus. Ce procédé est pratique pour insérer un formatage, des liens, des éléments de navigation et des blocs de script spéciaux. Il vous suffit de mettre en surbrillance l'élément à entourer puis d'insérer le fragment de code. b Si vous avez opté pour l'insertion du bloc, tapez ou collez le code à insérer. 5 (Facultatif) Sélectionnez le type d'aperçu : Code ou Création. Création Restitue le code et l'affiche dans le volet d'aperçu du panneau Fragment de code. Code Affiche le code dans le volet d'aperçu.
❖ Dans le panneau Fragments de code, sélectionnez un fragment de code, puis cliquez sur le bouton Modifier le
1 Cliquez sur le bouton Nouveau dossier de fragments de code situé au bas du panneau Fragments de code. 2 Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, à votre convenance.
1 Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
L'éditeur de raccourcis clavier s'ouvre. 2 Dans le menu contextuel Commandes, choisissez Fragments de code.
3 Sélectionnez celui qui vous intéresse et affectez-lui le raccourci clavier de votre choix.
1 Recherchez le fichier correspondant au fragment de code à partager dans le sous-dossier Configuration/Snippets
2 Copiez le fichier du fragment de code dans un dossier partagé sur votre ordinateur ou sur un ordinateur en réseau. 3 Veillez à ce que les autres membres de l'équipe copient le fichier du fragment de code dans leurs dossiers
Vous pouvez rechercher certains types de balises, des attributs et des valeurs d'attribut. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Vous pouvez également rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à l'extérieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises title pour trouver toutes les pages sans nom du site. 1 Ouvrez le document dans lequel la recherche doit être effectuée ou sélectionnez des documents ou un dossier dans
2 Sélectionnez la commande Edition > Rechercher et remplacer. 3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche à effectuer et enfin le
4 Cliquez sur le bouton Fermer. 5 Pour effectuer une nouvelle recherche sans afficher la boîte de dialogue Rechercher et remplacer, appuyez sur F3
Vous pouvez sauvegarder vos modèles de recherche pour les réutiliser ultérieurement.
“Expressions régulières” on page 312 “Recherche et remplacement de texte” on page 234
1 Dans la boîte de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer), définissez les paramètres
2 Cliquez sur le bouton Enregistrer la requête (représentant une disquette). 3 Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer les requêtes. Saisissez un
Par exemple, si le modèle de recherche inclut la recherche de balises img sans l'attribut alt, vous pouvez nommer la requête img_sans_alt.dwr. Note: L'extension des fichiers correspondant aux requêtes enregistrées est .dwr. Certains fichiers de requête enregistrés à partir de versions antérieures de Dreamweaver peuvent également avoir l'extension .dwq.
1 Sélectionnez la commande Edition > Rechercher et remplacer. 2 Cliquez sur l'icône Charger la requête (représentant un dossier).
4 Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.
Le panneau Référence est un outil de référence rapide pour les langages de balisage, les langages de programmation et les styles CSS. Il comporte des informations sur les différentes balises, les objets et les styles que vous manipulez en mode Code (ou Inspecteur de code). Il comporte également des exemples de code que vous pouvez coller dans vos documents.
1 Exécutez l'une des actions suivantes en mode Code :
Le panneau Référence apparaît et affiche des informations sur la balise, l'attribut ou le mot-clé sur lequel vous avez cliqué.
1 Cliquez n'importe où sur l'exemple de code de contenu de référence.
2 Sélectionnez Edition > Copier, puis collez l'exemple de code dans votre document en mode Code.
1 Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le menu
2 Pour afficher des informations sur un élément spécifique, sélectionnez-le dans le menu déroulant Balise, Objet,
3 Pour consulter les informations se rapportant à un attribut de l'élément sélectionné, sélectionnez cet attribut dans
Ce menu contient la liste des attributs associés à l'élément sélectionné. L'élément Description est sélectionné par défaut. Il contient une description de l'élément choisi.
1 Ouvrez une page en mode Code. 2 Sélectionnez Fichier > Imprimer le code. 3 Spécifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer (Macintosh).
A propos de la réduction du code Vous pouvez réduire ou développer des fragments de code, ce qui permet de voir différentes sections du document sans qu’il soit nécessaire d’utiliser la barre de défilement. Par exemple, pour afficher toutes les règles CSS dans la balise head qui s'appliquent à une balise div plus loin sur la page, vous pouvez réduire tout ce qui se trouve entre les baliseshead et div, de manière à voir les deux sections de code en même temps. Bien que vous puissiez sélectionner des fragments de code en mode Création ou Code, vous ne pouvez réduire le code qu'en mode Code. Note: Le code des fichiers créés à partir de modèles Dreamweaver est toujours affiché en mode développé, même si le modèle (*.dwt) contient des fragments de code réduits.
“Collage et déplacement de fragments de code réduits” on page 340 “Insertion de code avec la barre d'outils de codage” on page 326 “Nettoyage du code” on page 341
Lorsque vous sélectionnez du code, un ensemble de boutons de réduction est affiché près de la sélection (symboles Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour développer et réduire la sélection. Lorsque le code est réduit, les boutons de réduction se transforment en boutons de développement (un bouton Plus sous Windows ; triangle horizontal sur le Macintosh). Il peut arriver que le fragment de code sélectionné ne soit pas précisément réduit. En effet, Dreamweaver utilise une technique de « réduction intelligente » pour réduire les types de sélection les plus courants de la façon la plus agréable visuellement. Par exemple, si vous avez sélectionné une balise en retrait, puis les espaces d’indentation situés avant cette balise, Dreamweaver ne réduira pas ces espaces d’indentation, car la plupart des utilisateurs s’attendent à ce que l’indentation du code soit préservée. Pour désactiver la réduction intelligente du code et forcer Dreamweaver à réduire exactement ce que vous avez sélectionné, maintenez la touche Control enfoncée avant de réduire le code. Par ailleurs, une icône d’avertissement est affichée à côté des fragments de code réduits contenant des erreurs ou du code qui n’est pas géré par certains navigateurs. Vous pouvez également réduire le code en cliquant tout en maintenant enfoncée la touche Alt (Windows) ou Option (Macintosh) sur l'un des boutons de réduction ou le bouton Réduire sélection de la barre d'outils de codage. 1 Sélectionnez du code. 2 Sélectionnez Edition > Fractionnement de code, puis sélectionnez l'une des options.
“Insertion de code avec la barre d'outils de codage” on page 326
❖ En mode d'affichage Code, cliquez sur le fragment de code réduit.
❖ Amenez le pointeur de la souris au-dessus du fragment de code réduit.
❖ Vous pouvez également utiliser les raccourcis clavier suivants : Commande
“Insertion de code avec la barre d'outils de codage” on page 326 “Nettoyage du code” on page 341
1 Sélectionnez le fragment de code réduit. 2 Choisissez Edition > Copier. 3 Placez le curseur au point où vous voulez coller le code. 4 Choisissez Edition > Coller.
1 Sélectionnez le fragment de code réduit.
Nettoyage du code Vous pouvez supprimer automatiquement les balises vides, de combiner les balises font imbriquées et de nettoyer le code HTML ou XHTML désordonné ou illisible. Pour plus d'informations sur le nettoyage du code HTML généré par Microsoft Word, consultez la section “Ouverture et modification de documents existants” on page 75. 1 Ouvrez un document :
• S'il s'agit d'un document XHTML, sélectionnez Commandes > Nettoyer le code XHTML. La commande Nettoyer le code XHTML permet de nettoyer le code HTML, de corriger les erreurs de syntaxe XHTML, de définir les attributs de balise en minuscules et d'ajouter ou de signaler les attributs manquants d'une balise dans un document XHTML. 2 Dans la boîte de dialogue qui s'affiche, définissez les options de votre choix, puis cliquez sur OK.
Supprimer Balises de conteneur vides Supprime toute paire de balises sans contenu. Par exemple, <b></b> et <font color="#FF0000"></font> sont des balises vides, mais la balise <b> dans <b>texte</b> ne l'est pas.
Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n'ont pas été insérés par Dreamweaver. Par exemple, <!--begin body text--> sera supprimé, mais <!--TemplateBeginEditable name="doctitle" --> ne le sera pas, car il s'agit d'un commentaire Dreamweaver qui marque le début d'une zone modifiable dans un modèle. Supprimer Marqueur spécial Dreamweaver Supprime les commentaires ajoutés par Dreamweaver. De cette manière,
Supprimer Balise(s) Supprime les balises spécifiées dans la zone de texte adjacente. Utilisez cette option pour supprimer des balises personnalisées insérées par d'autres éditeurs visuels, ainsi que les autres balises que vous ne voulez pas voir apparaître sur votre site (par exemple, blink). Séparez les différentes balises par des virgules (par exemple, font, blink). Combiner les balises <font> imbriquées lorsque possible Combine deux ou plusieurs balises font se rapportant à la même section de texte. Par exemple, <font size="7"><font color="#FF0000">rouge</font></font> sera remplacé par <font size="7" color="#FF0000">rouge</font>.
“Modification du format du code” on page 317 “Définition des couleurs du code” on page 320
Vous pouvez vérifier que les paires de balises, de parenthèses (( )), d'accolades ({ }) et de crochets ([ ]) sont équilibrées dans la page, autrement dit qu'à chaque balise, parenthèse, accolade ou crochet d'ouverture correspond une balise, une parenthèse, une accolade ou un crochet de fermeture, et inversement.
1 Ouvrez le document en mode Code. 2 Placez le point d'insertion dans le code imbriqué à vérifier. 3 Choisissez Edition > Sélectionner balise parente.
1 Ouvrez le document en mode Code. 2 Placez le point d'insertion dans le code à vérifier. 3 Choisissez Edition > Equilibrer les accolades.
> Equilibrer les accolades pour sélectionner le code qui se trouve à l'intérieur des parenthèses, des accolades ou des crochets délimitant la nouvelle sélection.
Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant déclencher des problèmes de restitution dans des navigateurs. Cette fonctionnalité teste également le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles. Note: Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité CSS de cette fonction.
“Vérification de problèmes de restitution CSS entre les navigateurs” on page 158
4 Pour afficher le rapport dans votre navigateur principal (et pouvoir l'imprimer), cliquez sur le bouton Parcourir le
Dreamweaver CS5.5 (et les versions ultérieures) permet de créer des pages Web normalisées grâce à sa prise en charge intégrée du validateur W3C. Le validateur W3C valide la conformité de vos documents HTML aux normes HTML ou XHTML. Vous pouvez valider des documents ouverts et des fichiers publiés sur un serveur. Utilisez le rapport généré après la validation afin de corriger les erreurs dans votre fichier. Note: La fonctionnalité de validateur W3C est uniquement disponible dans Dreamweaver CS5.5 et les versions ultérieures. La version précédente de cette fonction, disponible dans Dreamweaver CS4, est déconseillée pour Dreamweaver CS5. Consultez la documentation de Dreamweaver CS4 pour plus d'informations sur la version précédente de la fonction.
1 Choisissez Fenêtre > Résultats > Validation W3C.. L'option Validation du document en direct n'est activée que si l'URL de la page à valider commence par http. 1 Choisissez Fenêtre > Résultats > Validation W3C.. 2 Cliquez sur Affichage en direct. 3 Choisissez Fichier > Valider > Valider document en direct (W3C).
1 Choisissez Fenêtre > Résultats > Validation W3C.. 2 Dans le panneau Validation W3C, cliquez sur l'icône Validation W3C (lecture). Choisissez Paramètres.
4 Si vous ne voulez pas que les erreurs et les avertissements soient affichés, désactivez les options correspondantes. 5 Cliquez sur Gérer si vous voulez supprimer les avertissements ou les erreurs que vous avez masqués à l'aide du
6 Sélectionnez Ne pas afficher la boîte de dialogue Notification du validateur W3C si vous ne voulez pas que cette
Lorsque la validation est terminée, les rapports de validation s'affichent dans le panneau Validation W3C.
Validation W3C. Cliquez sur Plus d'infos.
• Pour afficher le rapport complet au format HTML, cliquez sur Parcourir le rapport. Le rapport HTML fournit la liste complète des erreurs et avertissements, accompagnée d'un résumé.
Cliquez sur le bouton Options, puis choisissez Aller à la ligne.
Choisissez Tout afficher. Les erreurs et avertissements masqués que vous avez supprimés dans la boîte de dialogue Préférences ne sont pas répertoriés.
La fonctionnalité de validation des balises a été abandonnée depuis Dreamweaver CS5. Toutefois, Dreamweaver prend toujours en charge les validateurs de code externes que vous installez sous forme d'extensions. Lorsque vous installez une extension de validation externe, Dreamweaver présente ses préférences dans la catégorie Validateur de la boîte de dialogue Préférences. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Programme de validation dans la liste de gauche. 3 Sélectionnez les bibliothèques de balises à utiliser pour la validation.
également valide pour HTML 4.0. 4 Cliquez sur Options et définissez les options pour ces bibliothèques. 5 Sélectionnez les options d'affichage correspondant aux types d'erreurs et d'avertissements à inclure dans le rapport
Guillemets dans le texte Indique que Dreamweaver doit vous avertir lors de chaque utilisation de guillemets dans le
Entités dans le texte Indique que Dreamweaver doit conseiller le remplacement de certains caractères (comme
7 Cliquez sur OK pour fermer la boîte de dialogue Options du programme de validation, puis à nouveau sur OK pour
“Code XHTML” on page 310
Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Note: Cette opération est impossible pour certains types de documents.
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie
ColdFusion dans un autre navigateur au moyen de la commande Aperçu dans le navigateur (F12). Si la page contient des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page. Si vous utilisez ColdFusion MX 6.1 ou une version antérieure, commencez par vérifier que le débogage est activé dans ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ultérieure, Dreamweaver active automatiquement ce paramétrage. Vérifiez également que ColdFusion est en cours d’exécution sur le serveur d’évaluation de Dreamweaver. Pour plus d'informations, consultez la section “Configuration d'un serveur d'évaluation” on page 50. Pour garantir l'actualisation des informations de débogage à chaque fois qu'une page est affichée dans le navigateur interne, veillez à ce que Internet Explorer recherche les versions plus récentes du fichier à chaque fois que celui-ci est demandé. Dans Internet Explorer, sélectionnez Outils > Options Internet, sélectionnez l'onglet Général, puis cliquez sur le bouton Paramètres dans la zone Fichiers Internet temporaires. Dans la boîte de dialogue Paramètres, sélectionnez le bouton radio A chaque visite de la page. 1 Ouvrez la page ColdFusion dans Dreamweaver. 2 Cliquez sur l'icône Débogage du serveur
Internet Explorer. Si la page contient des erreurs, leurs causes possibles s'affichent au bas de la page. Le panneau Débogage de serveur qui s'ouvre simultanément regroupe de nombreuses informations utiles, telles que toutes les pages traitées par le serveur pour la restitution de la page, toutes les requêtes SQL exécutées sur la page, ainsi que toutes les variables du serveur et leur valeur respective, le cas échéant. Ce panneau récapitule également les durées d'exécution. 3 Si une catégorie Exceptions apparaît dans le panneau Débogage de serveur, cliquez sur le bouton Plus (+) pour la
Cette catégorie s'affiche lorsque le serveur détecte un ou plusieurs problèmes sur la page. Développez-la pour obtenir des informations sur le problème. 4 Repassez en mode Code (Affichage > Code) ou en mode Création (Affichage > Création), puis corrigez l'erreur. 5 Enregistrez le fichier puis cliquez à nouveau sur l'icône Débogage du serveur.
Si tous les problèmes sont résolus sur la page, la catégorie Exceptions ne réapparaît pas dans le panneau. 6 Pour quitter le mode de débogage, passez en mode Code (Affichage > Code) ou en mode Création (Affichage >
Dreamweaver permet de créer et de modifier visuellement des pages Web sans se soucier du code source sous-jacent. Toutefois, vous serez peut-être amené à modifier ce code afin de contrôler pleinement les opérations effectuées sur vos pages ou de corriger les éventuels problèmes. Dreamweaver vous permet de modifier une partie du code en mode Création. Cette section est destinée aux personnes qui préfèrent travailler en mode Création, mais qui souhaitent également disposer d'un accès rapide au code.
En mode Création, si vous sélectionnez un objet contenant des balises enfants, par exemple un tableau HTML, vous pouvez sélectionner rapidement la première balise enfant de cet objet en choisissant Edition > Sélectionner enfant. Note: Cette commande est disponible uniquement en mode Création. Par exemple, la balise <table> comporte normalement des balises enfants <tr>. Si vous sélectionnez une balise <table> dans le sélecteur de balises, vous pouvez sélectionner la première ligne du tableau en choisissant Edition> Sélectionner enfant. Dreamweaver sélectionne la première balise <tr> dans le sélecteur de balises. Etant donné que la balise <tr> comporte elle-même des balises enfants, <td> (délimiteur de cellule), vous pouvez choisir à nouveau Edition > Sélectionner enfant pour sélectionner la première cellule du tableau.
Vous pouvez utiliser l'inspecteur Propriétés pour examiner et modifier les attributs du texte ou des objets dans votre page. Souvent, les propriétés affichées dans l'inspecteur Propriétés correspondent aux attributs des balises ; la modification de l'une de ces propriétés dans l'inspecteur revient en principe à modifier l'attribut correspondant en mode Code. Note: L'inspecteur de balises et l'inspecteur Propriétés permettent d'afficher et de modifier les attributs des balises. L'inspecteur de balises permet d'afficher et de modifier l'ensemble des attributs associés à une balise donnée. L'inspecteur Propriétés affiche uniquement les attributs les plus fréquents. En revanche, il contient un nombre plus important de commandes permettant de modifier les valeurs de ces attributs et permet également de modifier certains objets (par exemple les colonnes des tableaux) ne correspondant à aucune balise spécifique. 1 Cliquez sur le texte ou sélectionnez un objet dans la page.
2 Utilisez l'inspecteur Propriétés pour modifier vos attributs.
L'inspecteur Propriétés permet d'examiner et de modifier le code CFML (ColdFusion markup language) en mode Création. 1 Cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux. 2 Si la balise présente un contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour
3 Si la balise contient une expression conditionnelle, apportez vos changements dans la zone Expression.
L'inspecteur de balises permet de modifier et d'ajouter des attributs et des valeurs d'attributs. L'inspecteur de balises permet de modifier balises et objets en utilisant une fiche de propriétés semblable à celles que l'on trouve dans d'autres environnements de développement intégrés (integrated development environments, IDE). 1 Dans la fenêtre de document, effectuez l'une des procédures suivantes :
• En mode Création, sélectionnez un objet ou sélectionnez une balise dans le sélecteur de balises. 2 Ouvrez l'inspecteur de balises (Fenêtre > Inspecteur de balises) et choisissez l'onglet Attributs.
3 Dans l'inspecteur de balises, effectuez l'une des opérations suivantes :
• Si l'attribut accepte les valeurs prédéfinies, sélectionnez une valeur dans le menu déroulant (ou le sélecteur de couleur) situé à droite de la colonne des valeurs d'attribut.
(Windows) ou Retour (Macintosh).
Note: Si vous modifiez le nom d'un attribut standard et que vous lui attribuez une nouvelle valeur, le nouvel attribut et la valeur qui lui est associée sont automatiquement déplacés dans la catégorie appropriée.
4 Pour que les modifications apportées soient prises en compte dans votre document, appuyez sur la touche Entrée
“Utilisation de comportements JavaScript (instructions générales)” on page 365 “Définition de sources de contenu dynamique” on page 592
Pour définir les options de Quick Tag Editor, ouvrez-le en appuyant sur Ctrl+T (Windows) ou sur Commande+T (Macintosh). Quick Tag Editor comporte trois modes :
• Modifier la balise, qui permet de modifier une balise existante ; • Envelopper avec balise, qui permet d'insérer une nouvelle balise de part et d'autre d'une sélection. Note: Le mode dans lequel s'ouvre Quick Tag Editor dépend de la sélection en cours en mode Création. Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le même : ouvrez l'éditeur, saisissez ou modifiez des balises et des attributs, puis fermez l'éditeur. Lorsque Quick Tag Editor est actif, vous pouvez passer d'un mode à l'autre en appuyant sur Ctrl+T (Windows) ou Commande+T (Macintosh).
“Utilisation des menus d'indication dans Quick Tag Editor” on page 350 1 Sélectionnez un objet en mode Création.
4 Appuyez sur Tab pour passer d'un attribut à l'autre et sur Maj+Tab pour revenir en arrière.
5 Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entrée. 6 Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.
1 Sélectionnez du texte ou un objet non mis en forme en mode Création.
Quick Tag Editor s'affiche en mode Modifier la balise et non en mode de balise enveloppante. 2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans
Quick Tag Editor s'ouvre en mode Envelopper avec balise. 3 Saisissez une balise d'ouverture, par exemple strong, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). 4 Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.
Dans Quick Tag Editor, vous pouvez accéder à un menu contextuel d'attributs répertoriant tous les attributs valides de la balise que vous modifiez ou insérez. Vous pouvez également désactiver le menu contextuel ou modifier le délai s'écoulant avant l'apparition du menu déroulant dans Quick Tag Editor. Pour afficher un menu contextuel répertoriant les attributs de balise valides, arrêtez-vous quelques secondes pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextuel apparaît, répertoriant tous les attributs valides de la balise que vous modifiez. De même, arrêtez-vous quelques secondes pendant la saisie ou la modification d'un nom de balise dans Quick Tag Editor pour afficher le menu contextuel correspondant aux balises. Note: Les préférences d'indication de code de Quick Tag Editor sont régies par les préférences générales d'indication de code. Pour plus d'informations, consultez la section “Définition des préférences de conseils de code” on page 324.
“Présentation de Quick Tag Editor” on page 349
2 Pour insérer un élément, sélectionnez-le, puis appuyez sur la touche Entrée ou double-cliquez dessus. 3 Pour fermer le menu contextuel sans sélectionner d'élément, appuyez sur la touche Echap ou poursuivez la saisie
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) puis choisissez Conseils
La boîte de dialogue Préférences de conseil de code s'affiche. 2 Pour désactiver le menu des conseils, désélectionnez l'option Activer les conseils de code. 3 Pour modifier le délai avant l'apparition du menu, réglez le curseur Délai, puis cliquez sur OK.
Vous pouvez utiliser le sélecteur de balises pour sélectionner, modifier ou supprimer les balises sans quitter le mode Création. Le sélecteur de balises se trouve dans la barre d'état en bas de la fenêtre de document, et présente une série de balises, comme suit :
1 Cliquez dans le document.
2 Cliquez à l'aide du bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur une
3 Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez les modifications requises dans
4 Pour supprimer une balise, choisissez Supprimer la balise dans le menu.
1 Cliquez dans le document.
2 Cliquez sur une balise dans le sélecteur de balises.
Rédaction et modification de scripts en mode Création Vous pouvez travailler avec des scripts JavaScript et VBScript côté client en modes Création et Code, en procédant des manières suivantes :
• Vous pouvez créer un lien dans votre document vers un fichier script externe sans quitter le mode Création. • Vous pouvez modifier un script sans quitter le mode Création. Avant toute chose, assurez-vous que l'affichage des marqueurs de script sur la page est activé en sélectionnant Affichage > Assistances visuelles > Eléments invisibles.
1 Placez le point d'insertion à l'endroit où vous voulez insérer le script. Si vous utilisez JavaScript sans être certain de la version, choisissez JavaScript plutôt que JavaScript1.1 ou JavaScript1.2. 4 Saisissez ou collez le code de script dans la zone Contenu.
5 Saisissez ou collez le code HTML dans la zone Aucun script. Les navigateurs ne prenant pas en charge le langage de
1 Placez le point d'insertion à l'endroit où vous voulez insérer le script. 2 Choisissez Insertion > HTML > Objets Script > Script. 3 Cliquez sur OK sans compléter la zone de texte Contenu. 4 Sélectionnez le marqueur de script dans le mode Création de la fenêtre de document. 5 Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier pour rechercher et sélectionner le fichier de script
1 Sélectionnez le marqueur de script. 2 Dans l'inspecteur Propriétés, cliquez sur le bouton Edition.
Si vous avez créé un lien vers un fichier de script externe, le fichier s'ouvre en mode Code ; vous pouvez alors apporter vos modifications. Note: Si les balises script renferment des éléments de code, la boîte de dialogue Propriétés du script s'affiche, même si vous avez créé un lien vers un fichier de script externe. 3 Dans la zone Langage, indiquez soit JavaScript soit VBScript comme langage de script.
L'inspecteur Propriétés de script ASP permet d'examiner et de modifier les scripts ASP côté serveur en mode Création. 1 En mode Création, sélectionnez l'icône visuelle de balise de langage de serveur. 2 Dans l'inspecteur Propriétés de script ASP, cliquez sur le bouton Modifier 3 Modifiez le script ASP côté serveur, puis cliquez sur OK.
1 Dans le menu déroulant Langage de l'inspecteur Propriétés, sélectionnez le langage de script souhaité ou saisissez
Note: Si vous utilisez JavaScript sans être certain de la version, choisissez JavaScript plutôt que JavaScript1.1 ou JavaScript1.2. 2 Dans le menu déroulant Type, indiquez le type de script, soit côté client, soit côté serveur. 3 (Facultatif) Dans la zone Source, indiquez un fichier de script externe lié. Tapez le chemin d'accès ou cliquez sur
“Rédaction et modification de scripts en mode Création” on page 352
L'onglet Comportements de l'inspecteur de balises permet d'associer aisément des comportements JavaScript (côté client) aux éléments d'une page. Pour plus d'informations, voir “Application de comportements JavaScript intégrés” on page 368.
Les pages contiennent des éléments qui décrivent les informations figurant sur la page ; ces éléments sont utilisés par les moteurs de recherche. Vous pouvez définir les propriétés des éléments head pour contrôler la façon dont vos pages sont identifiées.
Vous pouvez afficher les éléments de l'en-tête head d'un document via le menu Affichage, le mode Code de la fenêtre de document ou l'inspecteur de code.
Note: Si la fenêtre de document affiche uniquement le mode Code, la commande Affichage > Contenu de l'en-tête est grisée.
1 Sélectionnez un élément du sous-menu Insertion > HTML > Balises d'en-tête. 2 Choisissez les options applicables à l'élément dans la boîte de dialogue qui s'affiche alors, ou dans l'inspecteur
3 Définissez ou modifiez les propriétés de l'élément dans l'inspecteur Propriétés.
Une balise meta est un élément de la section head qui enregistre des informations sur la page en cours, comme l'encodage des caractères, l'auteur, le copyright ou les mots-clés. Ces balises permettent également de transmettre des informations au serveur, par exemple la date d'expiration de la page, son intervalle de réactualisation et sa classification POWDER. (Le format de classification POWDER, Protocol for Web Description Resources, permet de définir un niveau d'interdiction d'accès pour des raisons morales, comme la classification des films, aux pages Web.)
1 Choisissez Insertion > HTML > Balises d'en-tête > Meta. 2 Définissez les propriétés dans la boîte de dialogue qui s'affiche. 2 Sélectionnez le marqueur Meta qui apparaît en haut de la fenêtre de document. 3 Définissez les propriétés dans l'inspecteur Propriétés.
❖ Définissez les propriétés de la balise meta comme suit : Attribut Indique si la balise meta contient des informations descriptives sur la page (name) ou des informations d'en-
Valeur Indique le type d'informations que vous donnez dans cette balise. Certaines valeurs, telles que description, keywords et refresh, sont déjà bien définies (et disposent de leurs propres inspecteurs de propriétés dans
❖ Entrez le titre dans la zone Titre de la barre d'outils de la fenêtre de document.
1 Sélectionnez Affichage > Contenu de l'en-tête. 2 Sélectionnez le marqueur Title qui apparaît en haut de la fenêtre de document. 3 Définissez le titre de la page dans l'inspecteur Propriétés.
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexées par les moteurs de recherche) lisent le contenu de la balise meta Keywords, et utilisent ces informations pour indexer les pages dans leur base de données. Comme certains moteurs de recherche limitent le nombre de mots-clés ou de caractères qu'ils indexent, ou ignorent tous les mots-clés si vous dépassez la limite, il est judicieux de n'en utiliser que quelques-uns qui soient bien ciblés.
1 Choisissez Insertion > HTML > Balises d'en-tête > Keywords. 2 Définissez les mots-clés, séparés par des virgules, dans la boîte de dialogue qui s'affiche. 2 Sélectionnez le marqueur Keywords qui apparaît en haut de la fenêtre de document. 3 Dans l'inspecteur Propriétés, consultez, modifiez ou supprimez des mots-clés. Vous pouvez également ajouter des
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexées par les moteurs de recherche) lisent le contenu de la balise meta Description. Certains utilisent ces informations pour indexer vos pages dans leurs bases de données, et certains affichent également ces informations sur la page de résultats de la recherche (au lieu d'afficher les premières lignes du document). Certains moteurs de recherche limitant le nombre de caractères qu'ils indexent, il est judicieux de limiter votre description à quelques mots (par exemple, Spécialités de grillades de porc à Albany, Géorgie, ou conception de sites Web à des prix raisonnables dans le monde entier).
1 Choisissez Insertion > HTML > Balises d'en-tête > Description. 2 Tapez le descriptif de votre site dans la boîte de dialogue qui s'affiche. Définition des propriétés d'actualisation de la page L'élément Refresh (Actualisation) permet d'indiquer au navigateur s'il doit actualiser automatiquement votre page (en rechargeant la page en cours ou en affichant une autre page) après un certain laps de temps. Cet élément est fréquemment utilisé pour rediriger les utilisateurs vers une autre URL, notamment après avoir affiché un message indiquant que l'URL a changé.
1 Choisissez Insertion > HTML > Balises d'en-tête > Refresh. 2 Définissez les propriétés de la balise meta Refresh dans la boîte de dialogue qui s'affiche. 2 Sélectionnez le marqueur Refresh qui apparaît en haut de la fenêtre de document. 3 Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Refresh.
❖ Définissez les propriétés de la balise meta Refresh comme suit : Délai Durée, exprimée en secondes, qui s'écoule avant que la page ne soit actualisée par le navigateur. Pour que le
URL ou Action Indique si le navigateur doit se diriger vers une autre URL ou actualiser la page en cours, après le délai spécifié. Pour ouvrir une autre URL (plutôt que d'actualiser la page en cours), cliquez sur le bouton Parcourir, puis naviguez vers et sélectionnez la page à charger.
L’élément Base permet de définir l'URL de base à laquelle tous les chemins relatifs du document font référence.
1 Choisissez Insertion > HTML > Balises d'en-tête > Base. 2 Définissez les propriétés de la balise meta Base dans la boîte de dialogue qui s'affiche. 2 Sélectionnez le marqueur Base qui apparaît en haut de la fenêtre de document. 3 Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Base.
Cible Indique le cadre ou la fenêtre où tous les documents liés doivent s'ouvrir. Choisissez l'un des cadres du jeu de cadres actif, ou l'un des noms de fenêtre réservés ci-dessous :
La balise link permet de définir une relation entre le document actif et une autre page. Note: La balise link de la section head agit différemment d'un lien HTML inséré dans la section body et joignant des documents.
1 Choisissez Insertion > HTML > Balises d'en-tête > Link. 2 Définissez les propriétés de la balise meta Link dans la boîte de dialogue qui s'affiche. 2 Sélectionnez le marqueur Link qui apparaît en haut de la fenêtre de document. 3 Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Link.
❖ Définissez les propriétés de la balise meta Link comme suit : Href L'URL (adresse Internet) du fichier vers laquelle vous définissez une relation. Cliquez sur le bouton Parcourir pour naviguer vers et sélectionner un fichier, ou saisissez le chemin du fichier dans la zone. Notez que cet attribut n'indique pas un fichier vers lequel vous établissez un lien, au sens où on l'entend généralement en HTML ; les relations définies dans un élément Lien sont plus complexes. ID Spécifie un identificateur unique pour le lien. Titre Décrit cette relation. Cet attribut est particulièrement utilisé pour les feuilles de style liées. Pour plus d'informations sur les feuilles de style externes, consultez les spécifications HTML 4.0 sur le site du World Wide Web Consortium, www.w3.org/TR/REC-html40/present/styles.html#style-external. Rel Spécifie la relation entre le document actif et celui indiqué dans la zone Href. Les valeurs possibles sont les
Section, Subsection, Appendix, Help et Bookmark. Pour préciser plusieurs relations, séparez les valeurs par un espace.
A propos des inclusions côté serveur Dreamweaver permet d'insérer des inclusions côté serveur dans vos pages, de modifier ces inclusions ou d'afficher un aperçu des pages contenant des inclusions. Une inclusion côté serveur correspond à un fichier incorporé dans un document par un serveur lorsque ce document est sollicité par un navigateur. Lorsque le navigateur du visiteur sollicite le document contenant l'instruction d'inclusion, le serveur traite cette dernière en créant un nouveau document dans lequel le contenu du fichier inclus remplace l'instruction d'inclusion. Le serveur envoie ensuite ce nouveau document au navigateur du visiteur. Cependant, lorsque vous ouvrez un document local directement dans un navigateur, c'est-à-dire sans utiliser le serveur pour traiter les instructions d'inclusion dans ce document, le navigateur ouvre le document sans traiter ces instructions et le fichier censé être inclus n'apparaît pas dans le navigateur. Il peut donc s'avérer difficile, sans Dreamweaver, de consulter les fichiers locaux et de les voir tels qu'ils apparaîtront une fois que vous les aurez placés sur le serveur. Grâce à Dreamweaver, vous pouvez prévisualiser les documents tels qu'ils apparaissent sur le serveur, à la fois dans le mode Création et lorsque vous utilisez la fonctionnalité Aperçu dans le navigateur. Toutefois, pour ce faire, vous devez veiller à prévisualiser le fichier contenant l'inclusion en tant que fichier temporaire. Choisissez Edition > Préférences, puis la catégorie Aperçu dans le navigateur, et assurez-vous que l'option Aperçu à l'aide d'un fichier temporaire est bien activée. Note: Si vous utilisez un serveur de test (comme Apache ou Microsoft IIS) pour prévisualiser vos fichiers sur votre lecteur local, il n'est pas nécessaire de prévisualiser le fichier en tant que fichier temporaire, car le serveur se charge du traitement pour vous. Placer une instruction côté serveur dans un document a pour effet d'insérer une référence à un fichier externe, sans insérer le contenu du fichier spécifié dans le document actif. Le fichier spécifié ne doit contenir que ce que vous voulez inclure. En d'autres termes, le fichier d'inclusion ne doit pas contenir de balises head, body, html (c'est-à-dire la balise <html> ; les balises HTML de formatage telles que p ou div ne posent aucun problème). Si le fichier contient de telles balises, elles provoqueront un conflit avec celles qui se trouvent dans le document d'origine, et Dreamweaver ne pourra pas afficher correctement la page. Vous ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le contenu d'une SSI, vous devez modifier directement le fichier que vous incluez. Toute modification apportée au fichier externe est automatiquement reflétée dans chaque document dans lequel il est inclus. Il existe deux types d'inclusions à partir du serveur : les inclusions Virtuel et Fichier. Dreamweaver insère par défaut des inclusions de type Fichier. Vous pouvez toutefois employer l'inspecteur Propriétés pour sélectionner celle qui convient au type de serveur Web que vous utilisez :
• Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez à votre administrateur système l’option à utiliser. Certains serveurs sont configurés de façon à examiner tous les fichiers pour voir s'ils contiennent des inclusions côté serveur, et d'autres pour examiner uniquement les fichiers portant une extension particulière, telle que .shtml, .shtm ou .inc. Si une inclusion côté serveur ne fonctionne pas, demandez à votre administrateur système si le nom du fichier utilisant l'inclusion doit avoir une extension spéciale. Par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-être remplacer ce nom par canoe.shtml. Si vous voulez que vos fichiers conservent leurs extensions .html ou .htm, demandez à votre administrateur système de configurer le serveur de façon à ce qu'il examine tous les fichiers (et pas seulement les fichiers portant une certaine extension) pour les inclusions à partir du serveur. L'analyse des inclusions à partir du serveur demandant toutefois un peu plus de temps, les pages analysées par le serveur s'affichent un peu plus lentement que les autres pages. Pour cette raison, certains administrateurs système ne donnent pas la possibilité d'analyser tous les fichiers.
Dreamweaver permet d'insérer des inclusions côté serveur dans vos pages.
Note: Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situé au-dessus du dossier en cours dans la hiérarchie des fichiers, à moins qu'un logiciel spécial n'ait été installé sur le serveur. Pour pouvoir inclure un fichier d'un dossier placé plus haut dans la hiérarchie des dossiers sur un serveur IIS, demandez à votre administrateur système si le logiciel nécessaire est installé.
1 Sélectionnez la SSI dans la fenêtre de document. 2 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés). 3 Effectuez l'une des opérations suivantes :
• Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier à inclure.
Le fichier inclus s'ouvre dans une nouvelle fenêtre de document. 2 Modifiez le fichier puis enregistrez-le.
3 Si nécessaire, téléchargez le fichier inclus vers le site distant.
A propos des bibliothèques de balises de Dreamweaver Une bibliothèque de balises de Dreamweaver est une collection de balises d'un type donné accompagnée d'informations sur le formatage des balises par Dreamweaver. Les bibliothèques de balises fournissent des informations à propos des balises utilisées par Dreamweaver pour les conseils de code, les vérifications de navigateurs cibles, le sélecteur de balises et autres options de codage. L'éditeur de la bibliothèque de balises vous permet d'ajouter et de supprimer des bibliothèques de balises, des balises, des attributs et des valeurs d'attribut, de définir les propriétés d'une bibliothèque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.
“Importation de balises personnalisées dans Dreamweaver” on page 363 “Définition des préférences de codage” on page 316
1 Choisissez Edition > Bibliothèques de balises pour ouvrir l'éditeur de la bibliothèque de balises.
2 Fermez l'éditeur de la bibliothèque de balises en procédant d'une des façons suivantes :
• Pour fermer l'éditeur sans enregistrer les modifications, cliquez sur Annuler. Note: Lorsque vous cliquez sur Annuler, toutes les modifications apportées à la bibliothèque de balises sont effacées. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothèque, celle-ci est restaurée.
L'éditeur de la bibliothèque de balises permet d'ajouter des bibliothèques de balises ou des balises et des attributs aux bibliothèques de balises dans Dreamweaver.
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), cliquez sur le
2 Dans la zone de texte Nom de la bibliothèque, entrez un nom (par exemple, balises diverses), puis cliquez sur OK.
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), cliquez sur le
2 Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises. 3 Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, séparez leurs noms par une virgule suivie d'un
4 Si les nouvelles balises ont des balises de fin correspondantes (</...>), sélectionnez Avoir des balises de fin
2 Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises. 3 Sélectionnez une balise dans le menu contextuel Balise. 4 Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, séparez leurs noms par une virgule suivie d'un
L'éditeur de la bibliothèque de balises vous permet de définir les propriétés d'une bibliothèque de balises ou modifier les balises et les attributs d'une bibliothèque.
“Définition des préférences de codage” on page 316
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), sélectionnez une
Note: Les propriétés des bibliothèques de balises s'affichent uniquement quand une bibliothèque de balises est sélectionnée. Les bibliothèques de balises sont représentées par les dossiers de niveau supérieur dans la liste des balises. Par exemple, le dossier des balises HTML représente une bibliothèque de balises, et dans ce dossier, le sous-dossier abbr représente une balise.
3 (Facultatif) Entrez le préfixe des balises dans la zone de texte Préfixe de balise.
Certaines bibliothèques n'utilisent pas de préfixes. 4 Cliquez sur OK.
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), développez une
2 Définissez les options de format de balise suivantes : Sauts de ligne Détermine l'endroit où Dreamweaver insère les sauts de ligne pour une balise. Contenu Détermine comment Dreamweaver insère le contenu d'une balise, à savoir si le saut de ligne et les règles de
Casse Indique la casse d'une balise spécifique. Choisissez Par défaut, Minuscules, Majuscules ou Minuscules/majuscules. Si vous choisissez cette dernière option, la boîte de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernière (par exemple, getProperty), puis cliquez sur OK. Par défaut Définit la casse par défaut de toutes les balises. Dans la boîte de dialogue Casse de balise par défaut qui s'affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK.
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), ouvrez une
2 Dans le menu déroulant Casse d'attribut, choisissez Par défaut, Minuscules, Majuscules ou Minuscules/majuscules.
Saisissez l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple, onClick), puis cliquez sur OK. Cliquez sur le lien Défaut pour définir la casse par défaut pour tous les noms d'attributs. 3 Dans le menu déroulant Type d'attribut, sélectionnez le type de l'attribut.
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), sélectionnez une
2 Cliquez sur le bouton Moins (-).
4 Cliquez sur OK pour fermer l'éditeur de la bibliothèque de balises et terminer la procédure de suppression.
“Définition des préférences de codage” on page 316
Dreamweaver A propos de l'importation de balises personnalisées dans Dreamweaver Une fois importées dans Dreamweaver, les balises personnalisées font partie intégrante de l'environnement de création de pages Web. Par exemple, lorsque vous commencez à taper une balise personnalisée importée en mode Code, un menu de conseils de code s'affiche avec tous les attributs de balise et vous permet d'en sélectionner un.
1 Ouvrez l'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises). 2 Cliquez sur le bouton Plus (+), puis choisissez Schéma DTD > Importer le fichier DTD ou Schéma XML. 3 Entrez le nom ou l'URL du fichier DTD ou schéma. 4 Entrez le préfixe à utiliser avec les balises.
Certaines bibliothèques n'utilisent pas de préfixes. 5 Cliquez sur OK.
Vous pouvez importer des balises ASP.NET personnalisées dans Dreamweaver. Vérifiez tout d’abord que la balise personnalisée est installée sur le serveur d'évaluation défini dans la boîte de dialogue Définition du site (voir “Configuration d'un serveur d'évaluation” on page 50). Les balises compilées (fichiers DLL) doivent être placées dans le dossier /bin de la racine du site. Les balises non compilées (fichiers ASCX) peuvent résider dans un répertoire ou un sous-répertoire virtuel sur le serveur. Pour plus d'informations, consultez la documentation Microsoft ASP.NET. 1 Ouvrez une page ASP.NET dans Dreamweaver. 2 Ouvrez l'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises). 3 Cliquez sur le bouton Plus (+), définissez les options suivantes, puis cliquez sur OK :
Importer toutes les balises personnalisées ASP.NET.
Vous pouvez importer une bibliothèque de balises JSP dans Dreamweaver à partir de divers types de fichiers ou d'un serveur JSP. 1 Ouvrez une page JSP dans Dreamweaver. 2 Ouvrez l'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises). 3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar, *.zip) ou JSP > Importer
4 Cliquez sur le bouton Parcourir ou entrez un nom de fichier pour spécifier le fichier contenant la bibliothèque de
5 Entrez un URI pour identifier la bibliothèque de balises.
6 (Facultatif) Entrez le préfixe à utiliser avec les balises. Certaines bibliothèques de balises emploient un préfixe pour
Si vous travaillez avec Adobe® JRun™, vous pouvez importer vos balises JRun dans Dreamweaver. 1 Ouvrez une page JSP dans Dreamweaver. 2 Ouvrez l'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises). 3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier. 4 Spécifiez le nom du dossier contenant les balises de serveur JRUN. 5 Entrez un URI pour identifier la bibliothèque de balises.
6 (Facultatif) Entrez le préfixe à utiliser avec les balises. Certaines bibliothèques de balises emploient un préfixe pour
Les événements sont en réalité des messages générés par les navigateurs, indiquant qu'un utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu'un visiteur déplace le pointeur sur un lien, le navigateur génère un événement onMouseOver pour ce lien ; le navigateur vérifie ensuite s'il doit appeler du code JavaScript (spécifié dans la page affichée) en guise de réponse. Ces événements sont définis pour différents éléments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des événements associés à des liens, tandis que onLoad est un événement associé à des images et à la section body du document. Une action correspond à un code JavaScript pré-rédigé qui effectue une tâche spécifique, comme ouvrir une fenêtre de navigateur, afficher ou masquer un calque, diffuser un son ou arrêter une animation Adobe Shockwave. Les actions proposées dans Dreamweaver présentent une compatibilité inter-navigateurs maximale. Une fois qu'un comportement est associé à un élément de page, le comportement appelle l'action (code JavaScript) associée à un événement chaque fois que cet événement se produit pour cet élément. Les événements disponibles pour déclencher une action donnée varient d'un navigateur à l'autre. Par exemple, si vous associez l'action Message contextuel à un lien et spécifiez que l'action sera déclenchée par l'événement onMouseOver, votre message s'affiche dans une boîte de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur. Un événement unique peut déclencher plusieurs actions différentes et vous pouvez définir l'ordre d'exécution de ces actions. Dreamweaver propose plus d'une vingtaine d'actions ; des actions supplémentaires sont disponibles sur le site Web d'Exchange à l'adresse www.adobe.com/go/dreamweaver_exchange_fr, ainsi que sur les sites d'autres développeurs Vous pouvez écrire vos propres actions si vous maîtrisez le langage JavaScript. Note: Les termes comportement et action appartiennent à la terminologie Dreamweaver et non à la terminologie HTML. Du point de vue du navigateur, une action est un élément de code JavaScript comme un autre.
Utilisez le panneau Comportements (Fenêtre > Comportements) pour associer des comportements à des éléments de la page (plus précisément aux balises) et pour modifier les paramètres des comportements précédemment associés.
Afficher les événements définis Affiche uniquement les événements associés au document actif. Les événements sont
Afficher tous les événements Affiche une liste alphabétique de tous les événements d'une catégorie donnée. Ajouter un comportement (+) Affiche un menu d'actions pouvant être associées à l'élément actuellement sélectionné.
Supprimer un événement (–) Supprime l'action et l'événement sélectionnés de la liste de comportements. Boutons fléchés Haut et Bas Déplacent l'action sélectionnée vers le haut ou vers le bas dans la liste des comportements
Evénements Affiche un menu déroulant, visible uniquement lorsqu'un événement est sélectionné, de tous les
Note: Les noms d'événement entre parenthèses sont disponibles uniquement pour les liens. En choisissant l'un de ces noms d'événement, vous ajoutez automatiquement un lien nul à l'élément sur la page sélectionnée et vous associez le comportement à ce lien et non à l'élément lui-même. Le lien nul est défini sous la forme href="javascript:;" dans le code HTML.
Chaque navigateur génère une série d'événements que vous pouvez associer aux actions répertoriées dans le menu Actions (+) du panneau Comportements. Lorsqu'un visiteur de votre page Web déclenche une action interactive avec celle-ci, en cliquant sur une image par exemple, le navigateur génère un événement. Cet événement permet d'appeler une fonction JavaScript exécutant une action quelconque. Dreamweaver fournit de nombreuses actions courantes que vous pouvez déclencher à l'aide de ces événements. Pour obtenir les noms et les descriptions des événements fournis par chacun des navigateurs, consultez le centre de support de Dreamweaver à l'adresse www.adobe.com/go/dreamweaver_support_fr.
Si vous associez un comportement à une image, certains événements (par exemple onMouseOver) apparaissent entre parenthèses. Ces événements ne sont disponibles que pour des liens. Lorsque vous en sélectionnez un, Dreamweaver entoure l'image d'une balise a pour définir un lien nul, Le lien nul est représenté par javascript:; dans la zone de texte Lien de l'inspecteur Propriétés. Vous pouvez modifier la valeur de ce lien pour le transformer en véritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le comportement. Pour voir quelles balises peuvent être utilisées avec un événement donné dans un navigateur donné, recherchez l'événement dans l'un des fichiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.
Vous pouvez associer des comportements au document entier (à la balise <body>) ou à des liens, des images, des éléments de formulaire et divers autres éléments HTML. Le navigateur cible que vous choisissez détermine les événements pris en charge pour un élément donné. Vous pouvez attribuer plusieurs actions à chaque événement. Les actions sont exécutées dans l'ordre dans lequel elles sont répertoriées dans la colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre. 1 Sélectionnez un élément dans la page, tel qu'une image ou un lien.
2 Choisissez Fenêtre > Comportements. 3 Cliquez sur le bouton plus (+) et choisissez une action dans le menu Ajouter un comportement.
Lorsque vous choisissez une action, une boîte de dialogue s'affiche avec les paramètres et les instructions pour cette action. 4 Saisissez les paramètres pour l'action et cliquez sur OK.
Note: Les éléments cibles doivent posséder un ID unique. Par exemple, si vous souhaitez appliquer le comportement Permuter une image à une image, cette image doit avoir un ID. Si vous n'avez pas spécifié d'ID pour l'élément, Dreamweaver le fait automatiquement à votre place. 5 L'événement par défaut qui déclenchera l'action apparaît dans la colonne Evénements. S'il ne s'agit pas de
• Pour modifier l'ordre d'apparition des actions pour un événement donné, sélectionnez une action et cliquez sur la flèche Haut ou Bas. Vous pouvez également sélectionner l'action, puis la copier et la coller à l'emplacement de votre choix parmi les autres actions.
1 Sélectionnez l'élément auquel est attaché le comportement. 2 Choisissez Fenêtre > Comportements et double-cliquez sur le comportement. 3 Effectuez vos modifications, puis cliquez sur OK dans la boîte de dialogue du comportement.
De nombreuses extensions sont disponibles sur le site Web d'Exchange pour Dreamweaver (www.adobe.com/go/dreamweaver_exchange_fr). 1 Sélectionnez Fenêtre > Comportements et choisissez l'option Télécharger d'autres comportements dans le menu
Votre navigateur principal s'ouvre sur le site d'Exchange 2 Localisez les progiciels. 3 Téléchargez et installez le progiciel d'extension souhaité.
Utilisation des comportements intégrés Les comportements inclus dans Dreamweaver ont été conçus pour fonctionner dans les navigateurs modernes. Les comportements échouent dans les navigateurs plus anciens, sans que l'utilisateur en soit informé. Note: Les actions Dreamweaver ont été rédigées avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilité inter-navigateurs.
1 Sélectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau
2 Tapez le code JavaScript à exécuter ou le nom de la fonction.
3 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Utilisez le comportement Changer la propriété pour modifier la valeur d'une des propriétés d'un objet (par exemple, la couleur d'arrière-plan d'une balise div ou l'action d'un formulaire). Note: N'utilisez ce comportement que si vous êtes expert en HTML et en JavaScript. 1 Sélectionnez un objet et choisissez Changer la propriété dans le menu Ajouter un comportement du panneau
2 Dans le menu Type d'élément, sélectionnez un type d'élément pour afficher tous les éléments nommés de ce type. 3 Sélectionnez un élément dans le menu ID d'élément. 4 Choisissez une propriété dans le menu Propriété ou tapez le nom de la propriété dans la zone de texte. 5 Entrez la nouvelle valeur pour la nouvelle propriété dans la zone Nouvelle valeur. 6 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Ce comportement a été abandonné depuis Dreamweaver CS5.
Utilisez le comportement Vérifier le plug-in pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possèdent Shockwave, et sur une autre dans le cas contraire.
Explorer sur Mac OS. 1 Sélectionnez un objet et choisissez Vérifier le plug-in dans le menu Ajouter un comportement du panneau
2 Sélectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entrée et tapez le nom exact du plug-in dans la zone
Vous devez utiliser le nom exact du plug-in, tel qu'il apparaît en gras sur la page A propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS, choisissez A propos des plug-ins dans le menu Pomme). 3 Dans la zone de texte Si trouvé, aller à l'URL, spécifiez l'URL destinée aux utilisateurs qui disposent du plug-in.
4 Dans la zone de texte Sinon, aller à l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-
5 Spécifiez la procédure à suivre si la détection de plug-in n'est pas possible. Par défaut, lorsque la détection est
Note: Cette option ne concerne qu'Internet Explorer ; Netscape Navigator détecte toujours les plug-ins. 6 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Vous pouvez spécifier la direction vers laquelle l'utilisateur peut faire glisser l'élément PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'élément PA, si ce dernier doit être aimanté par la cible ou non lorsqu'il arrive à moins d'un certain nombre de pixels de la cible, l'action à déclencher lorsque l'élément PA touche la cible, etc. Etant donné que le comportement Tirer l'élément PA doit être appelé avant que le visiteur puisse faire glisser l'élément PA, vous devez l'associer à l'objet body (avec l'événementonLoad). 1 Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un élément PA
2 Cliquez sur <body> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document. 3 Choisissez Tirer l'élément PA dans le menu Ajouter un comportement du panneau Comportements.
Ces valeurs sont relatives à la position de départ de l'élément PA. Pour restreindre les déplacements à l'intérieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas. 7 Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte Gauche et Haut.
8 Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la distance minimale
Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de dépôt. 9 Pour des puzzles simples et des défilements d'images, vous pouvez vous en tenir là. Pour définir la poignée de
10 Pour spécifier que l'utilisateur doit cliquer dans une zone particulière de l'élément PA pour pouvoir le déplacer,
(angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci. Cette option est utile lorsque l'image insérée à l'intérieur de l'élément PA contient un symbole de déplacement, par exemple une barre de titre ou une poignée de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe où dans l'élément PA pour le déplacer. 11 Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement de l'élément PA. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées de l'élément PA et afficher des indications, telles que « Tu brûles » ou « Tu t'éloignes de la cible », dans une zone de texte. 12 Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxième
13 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Note: Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript expérimentés. Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale actuelle de l'élément PA) dans un champ de formulaire appelé curPosField. Les champs de formulaires servent à afficher des informations pouvant être continuellement mises à jour, parce qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu après le chargement de la page. function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs éléments PA qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer à la page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui compte le nombre d'éléments PA ayant la valeur MM_SNAPPED définie sur true et l'appeler chaque fois qu'un élément PA est déposé. Lorsque le nombre d'éléments PA arrivés sur leur cible atteint le nombre désiré, vous pouvez envoyer l'utilisateur à la page suivante ou afficher un message de félicitations.
1 Sélectionnez un objet et choisissez Atteindre l'URL dans le menu Ajouter un comportement du panneau
2 Choisissez une destination pour l'URL dans la liste Ouvrir dans.
Note: Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait produire des résultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots réservés utilisés dans le champ Cible. 3 Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin d'accès au fichier
4 Répétez les étapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres. 5 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
1 Créez un objet Menu de reroutage s'il n'en existe pas déjà dans votre document. 2 Sélectionnez l'objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau
3 Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez sur OK.
Note: Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l'utilisateur d'accéder à l'URL associée à la sélection dans le menu. La sélection d'un élément de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. 1 Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et choisissez Menu de reroutage
2 Dans le menu Choisissez un menu de reroutage, sélectionnez un menu que le bouton Aller activera et cliquez sur OK.
Utilisez l'action Ouvrir la fenêtre Navigateur pour ouvrir une page dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fenêtre individuelle lorsque l'utilisateur clique sur l'image réduite ; avec ce comportement, vous pouvez adapter la fenêtre à la taille exacte de l'image.
1 Sélectionnez un objet et choisissez Ouvrir la fenêtre Navigateur dans le menu Ajouter un comportement du
2 Tapez l'URL à afficher ou cliquez sur Parcourir pour sélectionner un fichier. 3 Définissez les options pour la largeur et la hauteur de la fenêtre (en pixels) et pour l'incorporation de différentes
JavaScript. 4 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Ce comportement a été abandonné depuis Dreamweaver CS5.
Le comportement Message contextuel fait apparaître un message d'alerte JavaScript, avec le texte que vous avez spécifié. Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutôt que pour lui proposer un choix. Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inversée (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
1 Sélectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau
2 Tapez votre message dans la zone de texte prévue à cet effet. 3 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Le comportement Précharger les images raccourcit le délai d'affichage en mettant en mémoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont être remplacées par des comportements ou des scripts).
2 Cliquez sur Parcourir pour sélectionner un fichier d'image ou tapez le chemin d'accès et le nom du fichier d'une
3 Cliquez sur le bouton plus (+) en haut de la boîte de dialogue pour ajouter l'image à la liste Précharger les images. 4 Répétez les étapes 2 et 3 pour les autres images que vous désirez précharger dans la page en cours. 5 Pour supprimer une image de la liste Précharger les images, sélectionnez-la et cliquez sur le bouton (–) (signe
6 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Ce comportement a été abandonné depuis Dreamweaver CS5.
Le comportement Texte d'un cadre vous permet de définir de façon dynamique le texte d'un cadre, en remplaçant le contenu et le formatage d'un cadre par le contenu indiqué. Ce contenu peut être n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations de façon dynamique. Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option Préserver Couleur d'arrière-plan pour conserver les attributs actuels pour l'arrière-plan de la page et la couleur du texte. Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inversée (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
3 Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section bodydu cadre cible. 4 Entrez un message dans la zone de texte Nouveau HTML. 5 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
“Création de cadres et de jeux de cadres” on page 209
Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inversée (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
3 Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML. 4 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
“Insertion d'une balise div PA” on page 174
Le comportement Définir le texte de la barre d'état affiche un message dans la barre d'état, dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d'un lien dans la barre d'état, au lieu d'afficher l'URL associée Cependant, il arrive fréquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'état (certains navigateurs ne prennent pas en charge la définition du texte de la barre d'état). Si votre message est important, pensez à l'afficher sous la forme d'un message contextuel ou comme texte d'un élément PA. Note: Si vous utilisez le comportement Définir le texte de la barre d'état dans Dreamweaver, le texte de la barre d'état du navigateur ne va pas nécessairement changer du fait que certains navigateurs nécessitent des réglages spéciaux lors de la modification du texte de la barre d'état. Par exemple, dans Firefox, vous devez modifier une option Avancée qui permet à JavaScript modifier le texte de la barre d'état. Pour plus de détails, reportez-vous à la documentation de votre navigateur. Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inversée (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
3 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inversée (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
1 Sélectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Ajouter un
2 Sélectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte. 3 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Le comportement Afficher-Masquer les éléments affiche, masque ou rétablit la visibilité par défaut d'un ou plusieurs éléments de page. Ce comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l'image d'une plante, vous pouvez afficher un élément de page comportant des détails sur le climat idéal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'élément pertinent, il ne supprime pas réellement l'élément du flux de la page lorsqu'il est masqué. 1 Sélectionnez un objet et choisissez Afficher-Masquer les éléments dans le menu Ajouter un comportement du
Si l'option Afficher-Masquer les éléments n'est pas disponible, cela signifie probablement qu'un élément PA est sélectionné. Etant donné que les éléments PA n'acceptent pas les événements dans la version 4.0 des deux navigateurs, vous devez choisir un objet différent, tel que la balise <body> ou un lien (<a>). 2 Dans la liste Eléments, sélectionnez l'élément que vous souhaitez afficher ou masquer et cliquez sur Afficher,
3 Répétez l'étape 2 pour les autres éléments dont vous voulez modifier la visibilité. Vous pouvez modifier la visibilité
4 Cliquez sur OK et vérifiez que l'événement par défaut est correct.
Ce comportement a été abandonné depuis Dreamweaver CS5.
Note: Etant donné que seul l'attribut src est affecté par ce comportement, l'image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparaîtrait déformée (compactée ou élargie) de façon à s'adapter aux dimensions de l'image d'origine. Il existe également le comportement Restaurer l'image intervertie qui restaure la dernière interversion d'images à son état antérieur. Il est automatiquement ajouté lorsque vous associez le comportement Permuter une image à un objet ; en principe, si vous avez laissé cette option activée en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement. 1 Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insérer une image. 2 Dans l'inspecteur Propriétés, indiquez un nom pour l'image dans la zone de texte située à l'extrême gauche.
Permuter une image si vous avez vous-même attribué un nom à ces images. 3 Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires. 4 Sélectionnez un objet (en général, l'image que vous voulez remplacer) et choisissez l'option Permuter une image
5 Sélectionnez l'image dont vous voulez modifier la source dans la liste Images. 6 Cliquez sur Parcourir pour sélectionner le nouveau fichier d'image ou indiquez son chemin d'accès et son nom de
7 Répétez les étapes 5 et 6 si vous désirez ajouter d'autres images à modifier. Utilisez la même action Permuter l'image
Restaurer l'image intervertie ne les restaurerait pas toutes. 8 Sélectionnez l'option Précharger les images pour mettre en mémoire cache les nouvelles images au moment du
Cela évite le délai de téléchargement des images lorsqu'un événement déclenche leur apparition.
Le comportement Valider le formulaire teste le contenu des champs de texte indiqués pour vérifier que l'utilisateur a entré le type de données correct. Associez ce comportement à des champs de texte individuels à l'aide de l'événement onBlur pour valider ces champs au fur et à mesure que l'utilisateur remplit le formulaire ou associez-le au formulaire à l'aide de l'événement onSubmit pour évaluer divers champs simultanément lorsque l'utilisateur clique sur le bouton d'envoi. L'association de ce comportement à un formulaire empêche l'envoi de formulaires contenant des données non valides. 1 Pour insérer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau
2 Pour insérer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton
Répétez cette étape pour insérer plusieurs champs de texte. 3 Choisissez une méthode de validation :
Comportements. 4 Sélectionnez Valider le formulaire dans le menu Ajouter un comportement. 5 Effectuez l'une des opérations suivantes :
6 Activez l'option Obligatoire si le champ doit obligatoirement contenir des données. 7 Sélectionnez l'une des options d'acceptation suivantes : Tout Vérifie qu'un champ obligatoire contient des données ; ces dernières peuvent être de n'importe quel type. Adresse électronique Vérifie que le champ contient un symbole @. Nombre Vérifie que le champ contient uniquement des valeurs numériques. Nombre de Vérifie que le champ contient une valeur numérique comprise dans la plage indiquée.
10 Si vous validez des champs individuellement, vérifiez que l'événement par défaut est bien onBlur ou onChange. Si
Ces deux événements déclenchent le comportement Valider le formulaire dès que l'utilisateur sort du champ concerné. La différence entre ces deux événements est que onBlur est toujours déclenché, que l'utilisateur ait saisi ou non du texte dans le champ, alors que onChange n'est déclenché que si l'utilisateur a modifié le contenu du champ. L'événement onBlur est préférable si le champ est obligatoire.
Vous pouvez insérer aisément des images et du contenu créés dans Adobe Flash (fichiers SWF et FLV) dans un document Dreamweaver. Vous pouvez également modifier une image ou un fichier SWF dans son éditeur d'origine après l'avoir inséré dans un document Dreamweaver. Note: Pour qu'il soit possible d'utiliser Dreamweaver conjointement à ces applications Adobe, toutes ces applications doivent être installées sur votre ordinateur. Pour Fireworks et Flash, l'intégration des produits est réalisée par l'intermédiaire de l'édition Roundtrip. L'édition Roundtrip permet de transférer de façon fiable les mises à jour de code entre Dreamweaver et les autres applications, en préservant par exemple les comportements de survol ou les liens vers d'autres fichiers. Dreamweaver fait également appel aux Design Notes pour l'intégration des produits. Les Design Notes sont de petits fichiers permettant à Dreamweaver de localiser le document source correspondant à un fichier image ou à un fichier SWF exporté. Lorsque vous exportez des fichiers de Fireworks, Flash ou Photoshop directement vers un site défini par Dreamweaver, les Design Notes qui contiennent des références au fichier de programmation PSD, PNG ou Flash (FLA) sont automatiquement exportées vers le site avec le fichier Web (format GIF, JPEG, PNG ou SWF). Outre les informations relatives à l'emplacement, les Design Notes contiennent des informations pertinentes sur les fichiers exportés. Lorsque vous exportez une table Fireworks, par exemple, Fireworks rédige une Design Note pour chaque fichier d'image exporté dans la table. Si le fichier exporté contient des zones réactives ou des effets de survol, les Design Notes contiennent des informations sur les scripts les concernant. Pendant l'exportation, Dreamweaver crée un dossier nommé _notes dans le même dossier que l'actif exporté. Ce dossier contient les Design Notes nécessaires à l'intégration de Dreamweaver avec Photoshop, Flash ou Fireworks. Note: Pour pouvoir utiliser les Design Notes, vous devez vous assurer qu'elles ne sont pas désactivées pour votre site Dreamweaver. Elles sont activées par défaut. Toutefois, même si elles sont désactivées, lorsque vous insérez un fichier d'image Photoshop, Dreamweaver crée une Design Note pour stocker l'emplacement du fichier PSD source. Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Fireworks à l'adresse www.adobe.com/go/vid0188_fr. Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Photoshop à l'adresse www.adobe.com/go/lrvid4043_dw_fr.
Insertion d'une image Fireworks Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procédures de modifications apportées aux fichiers, parmi lesquelles celles apportées aux liens, aux cartes graphiques, aux découpes de tables et bien plus. Réunies, les deux applications rationalisent les tâches de développement consistant à modifier, optimiser et importer des fichiers graphiques Web dans des pages HTML. Vous pouvez placer une image exportée avec Fireworks directement dans un document Dreamweaver à l'aide de la commande Image (menu Insertion) ou vous pouvez créer une image Fireworks à partir d'un espace réservé pour l'image Dreamweaver. 1 Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où vous souhaitez insérer l'image, puis
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Image ou faites-le glisser vers le document. 2 Recherchez le fichier Fireworks exporté et cliquez sur OK (Windows) ou Ouvrir (Macintosh).
“A propos de l'intégration de Photoshop, Flash et Fireworks” on page 380
Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir la table entière en vue de la modifier, pour autant que le commentaire <!--fw table--> figure dans le code HTML. Si le fichier PNG source a été exporté à partir de Fireworks vers un site Dreamweaver à l'aide du paramètre Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement inséré dans le code HTML. 1 Dans Dreamweaver, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert. 2 Cliquez sur une image ou une découpe d'image pour la sélectionner.
Note: Si Fireworks ne trouve pas le fichier source, un message vous invite à le faire. Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistrées dans le fichier source et le fichier exporté, sinon seul le fichier exporté est mis à jour. 4 Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Terminé.
Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Fireworks à l'adresse www.adobe.com/go/vid0188_fr.
“Utilisation d'un éditeur d'image externe” on page 258 Didacticiel sur Dreamweaver et Fireworks
Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramètres d'optimisation et d'animation, ainsi que la taille et la zone de l'image exportée. 1 Dans Dreamweaver, sélectionnez l'image désirée puis effectuez l'une des opérations suivantes :
• Cliquez sur le bouton de modification des paramètres de l'image dans l'inspecteur Propriétés. 2 Apportez les modifications dans la boîte de dialogue Aperçu de l'image.
• Pour modifier la taille et la zone de l'image exportée, cliquez sur l'onglet Fichier. 3 Une fois terminé, cliquez sur OK.
“Définition des options de la boîte de dialogue Aperçu de l'image” on page 393
Dreamweaver Vous pouvez créer un espace réservé dans un document Dreamweaver, puis lancer Fireworks pour créer une image graphique ou une table Fireworks à y placer. Pour créer une image à partir d'un espace réservé, Dreamweaver et Fireworks doivent être installés sur votre système. 1 Veillez à ce que Fireworks soit défini comme éditeur d'image des fichiers PNG. 2 Dans la fenêtre de document, cliquez sur l'espace réservé pour l'image afin de le sélectionner.
4 Utilisez les options de Fireworks pour créer l'image.
Dreamweaver : la taille de l'image (qui correspond à la taille de la zone de travail Fireworks), l'ID de l'image (utilisé par Fireworks comme nom de document par défaut pour le fichier source et le fichier d'exportation créé) et l'alignement du texte. Fireworks reconnaît également les liens et certains comportements (permutation d'image, menu contextuel et texte notamment) que vous avez associés à l'espace réservé pour l'image lorsque vous travaillez dans Dreamweaver. Note: Bien que les liens ajoutés à un espace réservé pour l'image soient invisibles dans Fireworks, ils sont conservés. Si vous dessinez une zone réactive et que vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien ajouté à l'espace réservé pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une découpe dans la nouvelle image, le lien sera supprimé du document Dreamweaver lors du remplacement de l'espace réservé pour l'image. Fireworks ne reconnaît pas les paramètres suivants d'espace réservé pour l'image : alignement de l'image, couleur, espacement vertical et horizontal et cartes. Ils sont désactivés dans l'inspecteur Propriétés de l'espace réservé pour l'image. 5 Au terme de votre travail, cliquez sur Terminé afin d'afficher l'invite d'enregistrement. 6 Dans la zone de texte Enregistrer dans, sélectionnez le dossier défini comme dossier du site local Dreamweaver.
7 Cliquez sur Enregistrer pour enregistrer le fichier PNG.
8 Dans la zone Enregistrer dans, sélectionnez le dossier du site local Dreamweaver.
9 Dans la zone Enregistrer sous le type, sélectionnez le type de fichier(s) à exporter, par exemple Images uniquement
10 Cliquez sur Enregistrer pour enregistrer le fichier exporté.
Fireworks permet de créer facilement et rapidement des menus contextuels de type CSS. Les menus contextuels créés avec Fireworks sont non seulement plus extensibles et plus rapides à télécharger, mais encore présentent les avantages suivants :
• Les éléments de menu peuvent être lus par des lecteurs d'écran, ce qui rend vos pages plus accessibles.
Vous pouvez créer un menu contextuel dans Fireworks 8, ou une version plus récente, puis le modifier avec Dreamweaver ou Fireworks (à l'aide de l'édition Roundtrip), mais pas les deux. Si vous modifiez vos menus dans Dreamweaver, puis dans Fireworks, vous perdez toutes les modifications précédentes, à l'exception du texte. Si vous préférez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour créer le menu contextuel, puis Dreamweaver de façon exclusive pour modifier le menu et le personnaliser. Si vous préférez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalité d'édition Roundtrip de Dreamweaver, mais vous ne devez pas modifier les menus directement dans Dreamweaver. 1 Dans Dreamweaver, sélectionnez le tableau Fireworks contenant le menu contextuel, puis cliquez sur Modifier
Le fichier PNG source s'ouvre dans Fireworks. 2 Dans Fireworks, modifiez ce menu avec l'éditeur correspondant, puis cliquez sur Terminé dans la barre d'outils de
Fireworks renvoie le menu modifié à Dreamweaver. Si vous avez créé un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier dans Dreamweaver avec la boîte de dialogue Afficher le menu contextuel, disponible à partir du panneau Comportements.
1 Dans Dreamweaver, sélectionnez la zone réactive ou l'image qui déclenche le menu contextuel. 2 Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions. 3 Apportez vos modifications dans la boîte de dialogue Menu contextuel puis cliquez sur OK.
“Application du comportement Afficher le menu contextuel” on page 377
Lorsque vous modifiez des images dans Fireworks, les images placées dans vos pages Web sont normalement exportées par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une image dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG source, vous invitant à préciser l'emplacement du fichier PNG si celui-ci ne peut pas être localisé. Vous pouvez régler vos préférences sous Fireworks afin que Dreamweaver ouvre l'image insérée, à moins que vous ne préfériez que Fireworks vous offre la possibilité d'utiliser le fichier d'image insérée ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver.
Toujours utiliser le fichier PNG source Permet de lancer automatiquement le fichier PNG Fireworks défini dans la
Ne jamais utiliser le fichier PNG source Permet de lancer automatiquement l'image Fireworks placée, qu'il existe ou non un fichier PNG source. Les mises à jour sont appliquées à l'image placée uniquement. Demander lors du lancement Affiche un message vous demandant si le fichier PNG source doit être ouvert. Vous
Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimisées et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez ensuite insérer le fichier dans Dreamweaver. Dreamweaver permet d'insérer dans un document du code HTML généré par Fireworks, intégrant des images, des découpes et du code JavaScript. 1 Dans le document Dreamweaver, placez le point d'insertion là où vous voulez insérer le code HTML Fireworks. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images et choisissez Insérer HTML Fireworks dans le menu. 3 Cliquez sur Parcourir pour sélectionner un fichier HTML Fireworks. 4 Si le fichier n'est plus nécessaire par la suite, activez l'option Supprimer fichier après insertion. Cette option n'a
Note: Si le fichier HTML se trouve sur un lecteur réseau, il est définitivement supprimé (il n'est pas placé dans la corbeille). 5 Cliquez sur OK pour insérer le code HTML, ainsi que les images associées, les découpes et le code JavaScript dans
Pour placer rapidement dans Dreamweaver des images et tables générées dans Fireworks, copiez et collez directement le code HTML Fireworks dans un document Dreamweaver.
1 Dans Fireworks, choisissez Edition > Copier le code HTML. 2 Suivez les instructions de l'assistant qui vous aide à effectuer la procédure d'exportation de votre code HTML et des
L'assistant exporte les images à l'endroit indiqué et copie le code HTML dans le Presse-papiers.
3 Dans le menu déroulant Exporter, choisissez Documents HTML et Images. 4 Dans le menu déroulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter. 5 Dans le document Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez coller le
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le document Dreamweaver et tous les liens vers les images sont mis à jour.
Outre la technique de lancement et de modification décrite ci-dessus, vous pouvez faire appel à la commande Fichier > Mettre à jour le code HTML pour mettre à jour des fichiers Fireworks placés dans Dreamweaver. La commande Mettre à jour le code HTML vous permet de modifier l'image PNG source dans Fireworks et de mettre à jour automatiquement le code HTML et les fichiers d'image exportés placés dans un document Dreamweaver. Grâce à cette commande, vous pouvez mettre à jour les fichiers Dreamweaver même si Dreamweaver est inactif. 1 Dans Fireworks, ouvrez le fichier PNG source puis apportez les modifications désirées. 2 Choisissez Fichier > Enregistrer. 3 Dans Fireworks, choisissez Fichier > Mettre à jour le code HTML. 4 Recherchez le fichier Dreamweaver qui contient le code HTML à mettre à jour, puis cliquez sur Ouvrir. 5 Recherchez le dossier dans lequel placer les fichiers d'image mis à jour et cliquez sur Sélectionner (Windows) ou
Fireworks met à jour le code HTML et JavaScript du document Dreamweaver. Fireworks exporte également les images mises à jour associées au code HTML et les place dans le dossier de destination indiqué. Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d'insérer du nouveau code HTML dans le document Dreamweaver. Fireworks insère la section JavaScript du nouveau code au début du document et place la table HTML ou le lien vers l'image à la fin du document.
La fonctionnalité Créer un album photos pour le Web a été abandonnée à partir de Dreamweaver CS5.
Dreamweaver insère l'image en tant qu'objet dynamique et conserve une connexion en direct avec le fichier PDS d'origine. Vous pouvez également coller une image Photoshop à calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller à partir de Photoshop, aucune connexion en direct avec le fichier d'origine n'est conservée. Pour mettre à jour l'image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller. Note: Si vous employez souvent cette fonctionna lité d'intégration, il peut être utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manière à y accéder plus aisément. Dans ce cas, veillez à les voiler, de façon à éviter toute publication des actifs d'origine et tout transfert superflu entre le site local et le serveur distant. Pour consulter un didacticiel relatif au flux de production d'objets dynamiques dans Photoshop et Dreamweaver, rendez-vous à l’adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Dreamweaver Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques. Flux de production copier/coller Le flux de production copier/coller vous permet de sélectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre à jour le contenu ultérieurement, vous devez ouvrir le fichier Photoshop d’origine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis à jour dans Dreamweaver. Ce flux de production est recommandé uniquement lorsque vous voulez insérer une partie d’un fichier Photoshop (par exemple, une section d’une composition) en tant qu’image sur une page Web. Flux de production d’objets dynamiques Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande l’utilisation de ce flux de production. Dans Dreamweaver, un objet dynamique désigne une image placée sur une page Web avec une connexion en ligne vers un fichier Photoshop (PSD) d’origine. En mode Création dans Dreamweaver, un objet dynamique est signalé par une icône située dans le coin supérieur gauche de l’image.
Cela signifie que vous pouvez modifier la version Web de l’image sur votre page tout en préservant l’intégrité de l’image Photoshop d’origine. Vous pouvez également mettre à jour un objet dynamique sans sélectionner l’image Web en mode Création. Le panneau des actifs vous permet de mettre à jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir être sélectionnées dans la fenêtre de document (par exemple, les images d’arrière-plan CSS). Paramètres d’optimisation d’image Pour les flux de production copier/coller et d’objets dynamiques, vous pouvez spécifier des paramètres d’optimisation dans la boîte de dialogue d’aperçu de l’image. Cette boîte de dialogue vous permet de définir des éléments tels que le format de fichier, la qualité de l’image, etc. Si vous copiez une tranche ou un calque pour la première fois ou que vous insérez un fichier Photoshop en tant qu’objet dynamique pour la première fois, Dreamweaver affiche cette boîte de dialogue pour vous aider à créer l’image Web.
Si vous avez inséré une image Web et que vous n’avez pas enregistré le fichier Photoshop d’origine sur votre site Dreamweaver, Dreamweaver reconnaît le chemin vers le fichier d’origine comme chemin de fichier local absolu (c’est le cas pour les flux de production copier/coller et d’objets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnaît pas le fichier d’origine comme faisant partie du site intitulé monSite. Cela pose des problèmes si vous voulez partager ce fichier Photoshop avec d’autres personnes, car Dreamweaver considère uniquement le fichier comme disponible sur un disque dur local spécifique. Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver établit un chemin lié au site vers le fichier. Les utilisateurs ayant accès au site pourront également établir le bon chemin vers le fichier, sous réserve que vous leur ayez aussi fourni le fichier d’origine à télécharger. Un didacticiel vidéo consacré au flux de production utilisant des objets dynamiques dans Photoshop et Dreamweaver est disponible à l’adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Lorsque vous insérez une image Photoshop (fichier PSD) dans votre page, Dreamweaver crée un objet dynamique. Un objet dynamique est une image Web qui conserve une connexion en direct avec l'image Photoshop d'origine. Lorsque vous mettez à jour l'image d'origine dans Photoshop, Dreamweaver vous permet de mettre à jour l'image dans Dreamweaver par simple clic sur un bouton. 1 Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez
2 Choisissez Insertion > Image. 3 Dans la boîte de dialogue Sélectionnez la source de l'image, recherchez votre fichier d'image PSD Photoshop en
4 Dans la boîte de dialogue Aperçu de l'image qui s'affiche, ajustez les paramètres d'optimisation requis puis cliquez
5 Enregistrez le fichier d'image Web à un emplacement du dossier racine de votre site Web.
Note: Si vous décidez, par la suite, de modifier les réglages d'optimisation d'une image placée sur vos pages, vous pouvez sélectionner cette image, cliquer sur le bouton de modification des paramètres de l'image dans l'inspecteur Propriétés, puis apporter les modifications désirées dans la boîte de dialogue d'aperçu d'image. Les modifications apportées dans la boîte de dialogue Aperçu de l'image sont appliquées de façon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d'origine et recrée toujours l'image Web sur la base des données d'origine.
❖ Pour mettre à jour un objet intelligent à l'aide du contenu actuel du fichier Photoshop d'origine, sélectionnez cet
Propriétés. Note: Il n'est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.
Vous pouvez mettre à jour plusieurs objets dynamiques simultanément à l'aide du panneau Actifs. Le panneau Actifs vous permet également de visualiser les objets dynamiques qu'il peut être impossible de sélectionnée dans la fenêtre de document (par exemple une image d'arrière-plan CSS). 1 Dans le panneau Fichiers, cliquez sur l'onglet Actifs pour visualiser les actifs du site. 2 Assurez-vous que l'affichage Images est bien activé. S'il ne l'est pas, cliquez sur le bouton Images. 3 Sélectionnez chaque actif d'image dans le panneau Actifs. Lorsque vous sélectionnez un objet dynamique, son icône
4 Pour chaque objet dynamique à mettre à jour, cliquez sur le nom de fichier à l'aide du bouton droit de la souris, puis
Note: Il n'est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.
Vous pouvez redimensionner un objet dynamique dans la fenêtre de document comme vous le feriez pour n'importe quelle autre image. 1 Pour redimensionner l'image, sélectionnez l'objet dynamique dans la fenêtre de document, puis tirez les poignées
MAJ enfoncée tout en tirant les poignées. 2 Cliquez sur le bouton Mettre à jour depuis l'original de l'inspecteur Propriétés.
2 Cliquez sur le bouton Modifier dans l'inspecteur Propriétés. 3 Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD. 4 Dans Dreamweaver, sélectionnez de nouveau l'objet dynamique puis cliquez sur le bouton Mettre à jour depuis
Note: Si vous avez modifié la taille de l'image dans Photoshop, vous devez réinitialiser la taille de l'image Web dans Dreamweaver. Dreamweaver met uniquement à jour l'objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d'une image Web avec celle du fichier Photoshop d'origine, cliquez dessus à l'aide du bouton droit de la souris, puis choisissez Rétablir la taille selon original.
Le tableau suivant énumère les différents états des objets dynamiques. Etat de l'objet dynamique
Web diffèrent de la largeur et de la hauteur HTML sélectionnées.
Photoshop d'origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spécifiées pour recréer l'image.
Copie et collage d'une sélection à partir de Photoshop Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la sélection dans votre page Dreamweaver sous la forme d'une image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie sélectionnée de l'image, ou encore copier une tranche de l'image. Toutefois, lorsque vous effectuez cette opération, Dreamweaver ne crée pas d'objet dynamique.
Edition > Copier. Cette opération aplatit et copie tous les calques actifs et inférieurs de la tranche dans le pressepapiers. Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière en vue de la copier. 2 Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez
3 Choisissez Edition > Coller. 4 Dans la boîte de dialogue Aperçu de l'image, ajustez les paramètres d'optimisation requis puis cliquez sur OK. 5 Enregistrez le fichier d'image Web à un emplacement du dossier racine de votre site Web.
Design Note, que vous ayez ou non activé les Design Notes pour votre site. La Design vous permet de revenir au fichier Photoshop d'origine, afin d'y apporter des modifications, à partir de Dreamweaver. Vous trouverez un didacticiel consacré à la copie et au collage entre différentes applications, dont Dreamweaver et Photoshop, à l'adresse www.adobe.com/go/vid0193_fr.
Après avoir copié des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Lorsque vous utilisez le flux d'activités copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d'origine (et non à l'image Web), puis à effectuer un nouveau copier/coller, de façon à conserver une source unique. Note: Assurez-vous que Photoshop est bien défini comme l'éditeur principal pour le type de fichier à modifier. 1 Dans Dreamweaver, sélectionnez une image Web créée à l'origine dans Photoshop, puis effectuez l'une des actions
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier. • Cliquez sur l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop. Note: Ce principe suppose que Photoshop soit défini comme éditeur d'image externe principal pour les fichiers d'image PSD. Il peut également être utile de définir Photoshop comme éditeur par défaut pour les fichiers de type JPEG, GIF et PNG.
Options de la boîte de dialogue Aperçu de l'image Lorsque vous créez un objet dynamique ou que vous collez une sélection depuis Photoshop, Dreamweaver affiche la boîte de dialogue Aperçu de l'image. Cette boîte de dialogue s'affiche également pour tout autre type d'image si vous la sélectionnez puis que vous cliquez sur le bouton de modification des paramètres de l'image de l'inspecteur Propriétés. Cette boîte de dialogue permet de définir les paramètres d'images Web et d'en afficher un aperçu, de façon à déterminer la combinaison optimale de couleurs, de compression et de qualité. Une image Web est une image qui peut être affichée par tous les navigateurs Web modernes et qui possède la même apparence, quel que soit le système ou le navigateur utilisé. Lorsque vous insérez une image Photoshop, la boîte de dialogue Aperçu de l'image vous permet d'ajuster divers paramètres pour optimiser la publication sur le Web. En règle générale, ces paramètres permettent de parvenir un compromis entre qualité et taille de fichier.
A. Onglet Options B. Onglet Fichier C. Panneau d'aperçu
• L'onglet Fichier permet de définir le facteur de mise à l'échelle et la taille de fichier désirée pour l'image. • Le panneau d'aperçu permet de voir une version de l'image avec vos paramètres actuels. L'onglet Options comprend de nombreuses options relatives à l'image, qui varient selon le format de fichier choisi. Pour vous faciliter la tâche, plusieurs jeux d'options pour images GIF et JPEG sont disponibles dans le menu Paramètres enregistrés. Options des images JPEG Vous pouvez optimiser une image JPEG en définissant ses paramètres de compression et de lissage. Il est impossible de modifier sa palette de couleurs. Qualité La glissière permet d'augmenter ou de réduire la qualité de l'image. Une qualité plus élevée produit un fichier
Lissage Permet d'augmenter le degré de lissage en fonction de vos besoins. Une image de moins bonne qualité peut
Affichage progressif du navigateur Affiche l'image tout d'abord en basse résolution, puis augmente progressivement
Accentuer les bords des couleurs Permet d'obtenir une image de qualité plus élevée. Matage Permet de définir l'arrière-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc
Supprimer les couleurs non utilisées Réduit la taille du fichier en supprimant les couleurs non utilisées dans l'image. Optimiser la taille Permet de définir la taille de l'image, en kilo-octets. Dans le cas d'images 8 bpc, l'assistant tente de parvenir à la taille de fichier demandée en ajustant le nombre de couleurs ou en appliquant un tramage.
8 bpc, de manière à ce que l'arrière-plan de la page Web soit visible à travers les zones possédant ces couleurs. Pour ce faire, ajustez la palette de couleurs sur la gauche de l'onglet Options. Les images PNG en format 32 bpc contiennent automatiquement de la transparence, même si l'option de transparence n'est pas visible pour ces fichiers dans le panneau Optimiser. Palette Réglée sur Adaptive par défaut. Sélectionnez dans le menu l'un des paramètres de palette de couleurs proposés si vous voulez utiliser un ensemble d'options prédéfinis Perte Réglée sur 0 par défaut. Cette option n'est pas d'application pour les images PNG Tramer Définit approximativement les couleurs qui ne figurent pas dans la palette actuelle, en alternant les pixels de
Palette Couleur Les couleurs affichées varient selon le comportement de palette sélectionné et le nombre maximal de
Outils de palette Cliquez sur un pixel de la palette puis sur l'une de ces icônes pour modifier, ajouter ou supprimer une couleur, ou pour rendre une couleur transparente, compatible Web ou verrouillée. Icônes de sélection de la couleur de transparence Ces icônes permettent de sélectionner, d'ajouter ou de supprimer
Menu Transparence Permet de choisir Transparence d'index, Transparence Alpha ou Pas de transparence. Un damier
• Transparence Alpha La transparence de type Alpha s'emploie lors de l'exportation d'images PNG 8 bpc contenant des zones transparentes. La transparence alpha permet d'obtenir un dégradé de transparence et des pixels semiopaques. Matage Permet de définir l'arrière-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc en cliquant sur l'icône de transparence de la boîte de dialogue Matage. Vous pouvez également utiliser cette boîte de dialogue pour activer l'anticrénelage d'objets à contours flous qui se trouvent directement au-dessus de la zone de document, en faisant correspondre la couleur du cache à l'arrière-plan de la cible. Supprimer les couleurs non utilisées Réduit la taille du fichier en supprimant les couleurs non utilisées dans l'image. Affichage entrelacé du navigateur Affiche une image entrelacée tout d'abord en basse résolution, puis passe
Optimiser la taille Permet de définir la taille de l'image, en kilo-octets. Dans le cas d'images 8 bpc, l'assistant tente de
Paramètres enregistrés Dreamweaver comporte plusieurs paramètres prédéfinis. En fonction des paramètres enregistrés que vous choisissez, les options spécifiques à un type de fichier, décrites ci-dessus, peuvent varier. GIF Web 216 Force toutes les couleurs à être compatibles Web. La palette de couleurs contient 216 couleurs au
GIF Websnap 256 Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 256 couleurs au maximum. GIF Websnap 128 Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 128 couleurs au maximum. GIF Adaptive 256 Palette de couleurs qui ne contient que les couleurs réellement utilisées dans le graphisme. La palette de couleurs contient 256 couleurs au maximum.
4 Modifiez la forme de l'image placée en activant l'option Exporter zone et en effectuant l'une des actions suivantes :
1 Dans la boîte de dialogue Aperçu de l'image, activez l'option Aperçu si vous voulez voir comment l'image se
4 L'outil Recadrer permet de réduire la taille de l'image. Il peut être nécessaire d'effectuer un zoom arrière pour
5 Choisissez une valeur dans le menu Zoom pour agrandir ou réduire l'affichage de l'image dans l'aperçu. Vous
6 Vous pouvez consulter un aperçu de deux ou quatre optimisations différentes en cliquant sur le bouton 2 vues ou
Note: Les contrôles d'animation de la boîte de dialogue Aperçu de l'image sont toujours désactivés pour les images Photoshop.
Si Flash et Dreamweaver sont installés, vous pouvez sélectionner un fichier SWF dans un document Dreamweaver et utiliser Flash pour le modifier. Flash ne modifie pas directement le fichier SWF : il modifie le document source (fichier FLA), puis exporte à nouveau le fichier SWF. 1 Dans Dreamweaver, ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés). 2 Dans le document Dreamweaver, utilisez l’une des méthodes suivantes :
• Cliquez sur l’espace réservé du fichier SWF avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec Flash dans le menu contextuel. Dreamweaver passe sur Flash, qui tente à son tour de localiser le fichier de programmation Flash (FLA) correspondant au fichier SWF sélectionné. Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite à le faire. Note: si le fichier FLA ou le fichier SWF est verrouillé, extrayez le fichier dans Dreamweaver. 3 Dans Flash, modifiez le fichier FLA. La fenêtre Document Flash indique que vous êtes en train de modifier le fichier
4 Une fois les modifications effectuées, cliquez sur Terminé.
Dreamweaver. Note: pour mettre le fichier SWF à jour et garder Flash ouvert, choisissez la commande Flash Fichier > Mettre à jour dans Dreamweaver. 5 Pour afficher le fichier mis à jour dans le document, cliquez sur le bouton Lecture dans l’inspecteur des propriétés
A propos d'Adobe Bridge Dreamweaver fournit une intégration en toute transparence avec Adobe Bridge, le navigateur de fichiers inter-platesformes fourni avec les composants d'Adobe Creative Suite 5. Adobe Bridge permet de retrouver, d’organiser et de parcourir les actifs dont vous avez besoin pour créer des contenus d’impression, Web, vidéo et mobiles. Vous pouvez démarrer Adobe Bridge à partir de tout composant de Creative Suite (sauf Acrobat 9) et l'employer pour accéder à des actifs de type Adobe et non Adobe. A partir d'Adobe Bridge, vous pouvez :
• Utilisez le raccourci clavier Parcourir dans Bridge : appuyez sur Ctrl+Alt+O (Windows) ou Commande+Option+O (Macintosh). Adobe Bridge s'affiche en mode Gestionnaire de fichiers et présente le contenu du dossier ouvert le plus récemment dans Dreamweaver. Si Adobe Bridge était déjà ouvert, sa fenêtre devient la fenêtre active. Note: Adobe Bridge est uniquement installé avec Dreamweaver CS5 lorsque vous installez Creative Suite CS5. Il n'est pas inclus avec la version autonome de Dreamweaver CS5. Toutefois, Adobe Bridge était inclus si vous avez installé auparavant Dreamweaver CS3 ou CS4. Par conséquent, si vous avez toujours l'exemplaire d'Adobe Bridge installé à partir de ces versions, Dreamweaver CS5 peut y accéder et l'utiliser.
Vous pouvez insérer des fichiers dans des pages Dreamweaver en les insérant ou en les déposant d'Adobe Bridge sur votre page. Pour que vous puissiez utiliser cette fonctionnalité, le document Dreamweaver dans lequel vous voulez insérer le fichier doit être ouvert et se trouver en mode Création. Vous pouvez insérer la plupart des types de fichiers dans vos pages, mais Dreamweaver les traite différemment :
Dreamweaver puisse le placer sur votre page.
Dreamweaver insère un lien vers le fichier source.
• (Windows uniquement) Si Microsoft Office est installé et si vous insérez un fichier Microsoft Word ou Excel file, vous devez indiquer si vous voulez insérer le fichier proprement dit ou un lien vers le fichier source. Si vous voulez insérer le fichier, vous pouvez indiquer quelle proportion de formatage vous voulez conserver.
2 Dans Adobe Bridge, sélectionnez le fichier puis choisissez Fichier > Placer dans Dreamweaver. 3 Si le fichier ne se trouve pas dans le dossier racine du site, vous êtes invité à l'y copier. 4 Si vous avez configuré les préférences (Edition > Préférences > Accessibilité) de manière à afficher les attributs lors
Note: Si le point d'insertion se trouve en mode Code, Adobe Bridge démarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Création.
1 Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez
2 Si Adobe Bridge n'est pas déjà ouvert, démarrez-le. 3 Dans Adobe Bridge, sélectionnez un ou plusieurs fichiers et faites-les glisser dans votre page Dreamweaver. 4 Si un fichier ne se trouve pas dans le dossier racine du site, vous êtes invité à l'y copier. 5 Si vous avez configuré les préférences (Edition > Préférences > Accessibilité) de manière à afficher les attributs lors
Note: Si le point d'insertion se trouve en mode Code, Adobe Bridge démarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Création.
❖ Sélectionnez un fichier dans Adobe Bridge et effectuez l'une des opérations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Ouvrir avec > Adobe Dreamweaverdans le menu contextuel. Note: Si Dreamweaver est déjà ouvert, cette action rend le programme actif. Si Dreamweaver n'est pas ouvert, Adobe Bridge le démarre en ignorant l'écran d'accueil.
écran. Les concepteurs et les développeurs peuvent aussi tester le comportement de leurs fichiers en format CSS. Par exemple, un développeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les téléphones portables. Le développeur Web peut utiliser Dreamweaver pour créer des pages préliminaires et Device Central pour tester l'affichage de ces pages sur différents périphériques.
Aide d'Adobe Device Central Aperçu/débogage dans le navigateur
Device Central permet d’afficher des pages Web créées dans Dreamweaver à l’aide de la fonction Small-Screen Rendering d’Opera. Cette prévisualisation peut vous donner une très bonne idée de ce à quoi ressemblera une page Web sur un périphérique mobile. Note: la fonction Small-Screen Rendering d’Opera peut être ou ne pas être pré-installée pour les périphériques virtuels. Device Central donne simplement un aperçu de ce à quoi ressemblerait le contenu si la fonction Small-Screen Rendering d’Opera était installée. Suivez les conseils ci-dessous pour vous assurer que les pages Web créées dans Dreamweaver s’affichent correctement sur les périphériques mobiles.
• La réduction de la taille des images et la réduction du nombre de couleurs permettent d’augmenter les chances que les images ressemblent à ce qui était prévu. Utilisez les formats CSS ou HTML pour spécifier la largeur et la hauteur exactes pour chaque image utilisée. Indiquez du texte de remplacement pour toutes les images. Note: vous trouverez de très nombreuses informations sur l’optimisation des pages Web pour les périphériques mobiles sur le site Web du logiciel Opera. Pour d’autres conseils et de plus amples informations sur les techniques de création de contenu pour les téléphones et périphériques mobiles, visitez le site www.adobe.com/go/learn_cs_mobilewiki_fr.
Utilisation de ConnectNow Adobe® ConnectNow met à votre disposition une salle de réunion en ligne sécurisée et personnelle, où vous pouvez rencontrer d’autres personnes et collaborer avec elles sur le Web en temps réel. Grâce à ConnectNow, vous pouvez partager et annoter votre écran d’ordinateur, envoyer des messages instantanés et communiquer à l’aide de la fonction audio intégrée. Vous pouvez également diffuser des vidéos en temps réel, partager des fichiers, capturer des comptes rendus et contrôler l’ordinateur d’un participant. Vous pouvez accéder à ConnectNow directement à partir de l’interface de l’application. 1 Choisissez la commande Fichier > Partager mon écran. 2 Dans la boîte de dialogue Se connecter à Adobe CS Live, entrez votre adresse de messagerie électronique et votre
Créer un ID Adobe. 3 Pour partager votre écran, cliquez sur le bouton Partager l’écran de mon ordinateur, au centre de la fenêtre de
Pour obtenir des instructions complètes sur l’utilisation de ConnectNow, consultez l’aide d’Adobe ConnectNow. Pour accéder au didacticiel vidéo sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share your screen (7:12) (cette présentation est effectuée dans Dreamweaver).
Avec l'extension Adobe® AIR® pour Dreamweaver®, vous pouvez transformer une application Web en application de bureau. Les utilisateurs peuvent ensuite exécuter l'application sur leur bureau et ce, dans certains cas, sans connexion à Internet. Cette extension est utilisable avec Dreamweaver CS3 et les versions ultérieures. Elle n'est pas compatible avec Dreamweaver 8.
Les pages dynamiques telles que les pages Adobe® ColdFusion® et PHP ne fonctionnent pas dans Adobe AIR. Le module d'exécution ne fonctionne qu'avec HTML et JavaScript. Vous pouvez toutefois utiliser dans vos pages du code JavaScript afin d'appeler n'importe quel service web exposé sur Internet (y compris les services générés par ColdFusion ou PHP) à l'aide de méthodes Ajax telles que XMLHTTPRequest ou des API spécifiques à Adobe AIR.
Pour utiliser l'extension Adobe AIR pour Dreamweaver, les logiciels suivants doivent être installés et configurés correctement : Les exigences ci-avant ne s'appliquent qu' à la création et la prévisualisation d'applications Adobe AIR dans Dreamweaver. Pour installer et exécuter une application Adobe AIR sur votre bureau, vous devez également installer Adobe AIR sur l'ordinateur. Pour télécharger le module d'exécution, consultez le site http://www.adobe.com/fr/products/air/.
1 Téléchargez l'extension Adobe AIR pour Dreamweaver ici : http://www.adobe.com/fr/products/air/tools/ajax/. 2 Double-cliquez sur le fichier portant l'extension .mxp dans l'Explorateur Windows (Windows) ou dans le Finder
3 Suivez les instructions qui s'affichent à l'écran pour installer l'extension. 4 Quand vous avez terminé, redémarrez Dreamweaver.
Pour créer une application AIR basée sur HTML dans Dreamweaver, sélectionnez un site existant à conditionner sous la forme d'une application AIR. 1 Assurez-vous que les pages Web que vous voulez conditionner sous la forme d'une application sont bien contenues
2 Dans Dreamweaver, ouvrez la page d'accueil de l'ensemble de pages à conditionner.
La première fois que vous créez un fichier Adobe AIR, Dreamweaver crée un fichier .xml d'application dans le dossier racine de votre site. Ce fichier fait office de manifeste et définit différentes propriétés de l'application. Les options de la boîte de dialogue AIR - Paramètres de l'application et du programme d'installation sont les suivantes : Nom de fichier de l'application le nom utilisé pour le fichier exécutable de l'application. Par défaut, l'extension emploie le nom du site Dreamweaver comme nom de fichier. Vous pouvez modifier ce nom si vous le souhaitez. Le nom ne doit toutefois contenir que les caractères autorisés pour les noms de fichier ou de dossier. En d'autres termes, il ne peut contenir que des caractères ASCII et ne peut pas se terminer par un point. Ce paramètre est obligatoire. Nom de l’application le nom qui s’affiche sur les écrans d’installation lorsque des utilisateurs installent
ID de l’application identifie l'application à l'aide d'un ID unique. Vous pouvez modifier l'ID par défaut si vous le
A à Z, . (point) et - (tiret). Ce paramètre est obligatoire. Version spécifie le numéro de version de votre application. Ce paramètre est obligatoire. Contenu initial détermine la page de démarrage de l'application. Cliquez sur le bouton Parcourir afin d'accéder à votre page de démarrage et de la sélectionner. Le fichier choisi doit se trouver dans le dossier racine du site. Ce paramètre est obligatoire. Description permet de spécifier une description de l’application à afficher lorsque l’utilisateur l’installe. Copyright permet de spécifier un copyright qui s'affiche dans la section indiquant des informations sur les
Style de fenêtre spécifie le style de fenêtre (ou chrome) à utiliser lorsque l'utilisateur exécute l'application sur son ordinateur. Le chrome système entoure l'application avec le contrôle de fenêtre standard du système d'exploitation. Le chrome personnalisé (opaque) supprime le chrome standard du système et vous permet de créer votre propre chrome pour l'application. La création du chrome personnalisé s'effectue directement dans la page HTML conditionnée. Le chrome personnalisé (transparent) est similaire au chrome personnalisé (opaque), mais il ajoute des possibilités de transparence aux bords de la page, ce qui permet de créer des fenêtres d'application non rectangulaires. Taille de fenêtre spécifie les dimensions de la fenêtre d’application lorsqu’elle s’ouvre. Icône permet de sélectionner des images personnalisées pour les icônes de l’application. Les images par défaut sont
PNG comme images d'icône d'application. Note: Les images personnalisées sélectionnées doivent résider dans le site de l’application et leurs chemins doivent être relatifs à la racine du site.
Si vous voulez que votre application se charge d'effectuer ses mises à jour, désactivez cette case à cocher. Notez que si vous désactivez la case à cocher, vous devrez rédiger une application capable d'exécuter des mises à jour. Fichiers inclus spécifie les fichiers et les dossiers à inclure dans votre application. Vous pouvez ajouter des fichiers HTML et CSS, des fichiers d’image et des fichiers de bibliothèque JavaScript. Cliquez sur le bouton Plus (+) pour ajouter des fichiers et sur l'icône représentant un dossier pour ajouter des dossiers. N'incluez pas certains fichiers, tels que _mmServerScripts, _notes, etc. Pour supprimer un fichier ou un dossier de la liste, sélectionnez-le et cliquez sur le bouton Moins (-). Signature numérique Cliquez sur Définir pour signer votre application à l’aide d’une signature numérique. Ce paramètre est obligatoire. Pour plus d’informations, reportez-vous aux sections suivantes. Dossier du menu Programmes spécifie un sous-répertoire, dans le menu Démarrer de Windows, où le raccourci de
Destination détermine où le programme d'installation de la nouvelle application (fichier .air) doit être enregistré.
Le nom de fichier par défaut est basé sur le nom du site, auquel est ajoutée une extension .air. Ce paramètre est obligatoire. Voici un exemple de la boîte de dialogue avec quelques options de base :
2 Dans la boîte de dialogue Signature numérique, effectuez l’une des opérations suivantes :
1 024 bits (moins sécurisée) et 2048-RSA une clé 2 048 bits (plus sécurisée). Cliquez sur OK lorsque vous avez terminé. Ensuite, entrez le mot de passe correspondant dans la boîte de dialogue Signature numérique et cliquez sur OK.
Cette option permet de créer une application AIR Intermédiaire (AIRI) sans signature numérique. Aucun utilisateur ne pourra toutefois installer l'application tant que vous n'aurez pas ajouté de signature numérique.
Lorsque vous signez une application Adobe AIR à l'aide d'un certificat numérique, l'outil de conditionnement interroge le serveur d'une autorité d'horodatage afin d'obtenir une date et une heure de signature pouvant être vérifiées indépendamment. L'horodatage obtenu est incorporé au fichier AIR. Tant que le certificat de signature est valide au moment de la signature, le fichier AIR peut être installé, même après l'expiration du certificat. Par contre, si aucun horodatage n'est obtenu, le fichier AIR ne pourra plus être installé lorsque le certificat aura expiré ou sera révoqué. Par défaut, l'extension Adobe AIR pour Dreamweaver obtient un horodatage lors de la création d'une application Adobe AIR. Vous pouvez toutefois désactiver l'horodatage en désactivant l'option Horodatage de la boîte de dialogue Signature numérique. Ceci peut par exemple s'avérer nécessaire si aucun service d'horodatage n'est disponible. Adobe recommande que tout fichier AIR distribué publiquement contienne un horodatage. L'autorité d'horodatage utilisée par défaut par les outils de conditionnement d'Adobe AIR est Geotrust. Pour plus d'informations sur l'horodatage et les certificats numériques, voir Digitally signing an AIR file (en anglais).
1 Dans la boîte de dialogue AIR - Paramètres de l'application et du programme d'installation, cliquez sur le bouton
2 Dans la boîte de dialogue Types de fichiers associés, effectuez l’une des actions suivantes :
• Cliquez sur le bouton Plus (+) pour ajouter un type de fichier.
Extension spécifie l'extension du type de fichier. N'incluez pas le point qui précède l'extension. Cette option est
Description permet de spécifier une description facultative du type de fichier. Type de contenu spécifie le type MIME ou le type de média du fichier (par exemple text/html, image/gif, etc.). Emplacements des fichiers d'icône permet de sélectionner des images personnalisées pour les types de fichiers associés. Les images par défaut sont des images Adobe AIR qui sont fournies avec l'extension.
❖ Choisissez Site > Paramètres de l'application AIR, puis apportez les modifications désirées.
❖ Dans la barre d'outils Document, cliquez sur le bouton Aperçu/Débogage dans le navigateur, puis choisissez
Vous pouvez également appuyer sur Ctrl+MAJ+F12 (Windows) ou sur Commande+MAJ+F12 (Macintosh).
❖ Ouvrez un fichier HTML ou JavaScript en mode Code, puis entrez du code Adobe AIR.
Pour plus d'informations sur les éléments du langage Adobe AIR, consultez la documentation dans la suite de ce guide.
❖ Choisissez Aide > Aide d'Adobe AIR.
(rédacteurs, infographistes ou autres développeurs) pourront modifier. Le créateur peut inclure plusieurs types de régions de modèle dans un document. Note: Les modèles permettent de définir la conception d'une grande zone et de réutiliser des mises en page complètes. Si vous souhaitez réutiliser des éléments de conception individuels, tels que les informations sur le copyright d'un site ou un logo, créez des éléments de bibliothèque. L'utilisation de modèles vous permet de mettre à jour plusieurs pages à la fois. Tout document créé à partir d'un modèle reste associé à ce modèle (sauf si vous décidez de détacher le document ultérieurement). Lorsque vous modifiez un modèle, la conception de tous les documents créés à partir de ce modèle est immédiatement mise à jour. Note: Les modèles de Dreamweaver sont différents des modèles de certains autres logiciels Adobe Creative Suite en ce sens que les sections de page des modèles sont fixes (ou non modifiables) par défaut.Dreamweaver
“Gestion des actifs et des bibliothèques” on page 119 “Création d'un modèle Dreamweaver” on page 415
Lorsque vous enregistrez un document en tant que modèle, la plupart des régions d'un document sont verrouillées. En tant que créateur de modèles, vous devez insérer des régions ou paramètres modifiables dans un modèle pour définir les régions qui pourront être modifiées dans les documents basés sur ce modèle. Lors de la création du modèle, vous pouvez apporter des modifications aux régions modifiables et aux régions verrouillées. En revanche, dans le cas d'un document créé à partir d'un modèle, seules les régions modifiables peuvent subir des modifications ; les régions verrouillées ne peuvent pas être modifiées. Il existe quatre types de régions de modèle : Une région modifiable Une région non verrouillée dans un document basé sur un modèle. Ce type de section peut être modifié par l'utilisateur. Le créateur du modèle peut définir toute région du modèle comme modifiable. Pour être fonctionnel, un modèle doit contenir au moins une région modifiable. S'il n'en contient pas, les pages créées à partir du modèle ne pourront pas être modifiées. Une région répétée Une section de la mise en forme du document qui est définie de façon à ce que l'utilisateur du
Une région facultative Une section d'un modèle qui renferme un contenu, tel que du texte ou une image, pouvant
Un attribut de balise modifiable Permet de déverrouiller un attribut de balise dans un modèle afin que les utilisateurs puissent le modifier dans les pages créées à partir de ce modèle. Par exemple, vous pouvez « verrouiller » les images contenues dans le document tout en permettant à l'utilisateur du modèle d'en définir l'alignement à gauche, à droite ou au centre.
“Modification du contenu d'un document basé sur un modèle” on page 436 “Création de régions modifiables dans les modèles” on page 418 “Création de régions répétées dans les modèles” on page 420 “Utilisation de régions facultatives dans les modèles” on page 422 “Définition d'attributs de balise modifiables dans les modèles” on page 424
Lorsque vous créez un fichier de modèle en enregistrant une page existante en tant que modèle, le nouveau modèle situé dans le dossier Templates, ainsi que tous les liens du fichier, sont mis à jour de façon à ce que leur chemin d'accès relatif au document soit correct. Par la suite, lorsque vous créez un nouveau document à partir de ce modèle et que vous enregistrez ce nouveau document, tous les liens relatifs au document sont de nouveau mis à jour pour qu'ils continuent de pointer vers les fichiers adéquats. En revanche, si vous insérez un nouveau lien relatif à un document dans un fichier de modèle, il est facile de faire une faute de frappe lorsque vous tapez le chemin dans la zone de texte du lien de l'inspecteur Propriétés. Le chemin correct dans un fichier de modèle est le chemin d'accès au document lié à partir du dossier Templates, et non pas à partir du dossier du document basé sur le modèle. Assurez-vous que les chemins d'accès utilisés pour les liens sont corrects en utilisant l'icône de dossier ou l'icône Pointer vers un fichier dans l'inspecteur Propriétés lorsque vous créez des liens dans des modèles. Préférence de mise à jour des liens dans Dreamweaver 8.01 Avant Dreamweaver 8 (c'est-à-dire, dans Dreamweaver version MX 2004 ou antérieure), Dreamweaver ne mettait pas à jour les liens vers des fichiers situés dans le dossier Templates. Par exemple, si vous aviez un fichier intitulé main.css dans le dossier Templates, et si vous aviez écrit href="main.css" en tant que lien dans le fichier du modèle, Dreamweaver ne mettait pas ce lien à jour lors de la création d'une page basée sur ce modèle. Certains utilisateurs ont tiré parti de la façon dont Dreamweaver traitait les liens vers les fichiers du dossier Templates et ont utilisé cette incohérence pour créer des liens qu'ils n'avaient pas l'intention de mettre à jour lors de la création de pages à partir d'un modèle. Par exemple, supposons que vous utilisez Dreamweaver MX 2004, et que vous possédez un site comprenant différents dossiers pour différentes applications : Dreamweaver, Flash et Photoshop. Chaque dossier de produit contient une page index.html basée sur un modèle, et une version unique du fichier main.css au même niveau. Si le fichier du modèle contient le lien relatif au document href="main.css" (un lien vers une version du fichier main.css située dans le dossier Templates), et que vous souhaitez que vos pages index.html basées sur le modèle
Dreamweaver 8.01 a ajouté une préférence qui vous permet d'activer ou de désactiver le comportement de mise à jour des liens relatifs. (Cette préférence spéciale s'applique uniquement aux liens vers des fichiers du dossier Templates, mais pas aux liens en général.) Le comportement par défaut est de ne pas mettre à jour ces liens (comme c'était le cas dans Dreamweaver version MX 2004 et antérieure), mais si vous souhaitez que Dreamweaver mette à jour ces types de liens lors de la création de pages basées sur un modèle, vous pouvez désélectionner la préférence. Vous ne feriez cela que si, par exemple, vous aviez une page CSS (Cascading Style Sheets, feuilles de style de cascade), main.css, dans votre dossier Templates, et que vous souhaitiez qu'un document basé sur un modèle contienne le lien href="Templates/main.css". Cette pratique n'est toutefois pas recommandée, car seuls les fichiers modèles de Dreamweaver (DWT) doivent résider dans le dossier Templates. Pour que Dreamweaver mette à jour les chemins relatifs au document vers les fichiers non liés au modèle dans le dossier Modèles, sélectionnez la catégorie Modèles de la boîte de dialogue Configuration du site (dans la section Paramètres avancés), puis désactivez l'option Ne pas modifier les chemins relatifs aux documents. Pour plus d'informations, consultez la TechNote Dreamweaver sur le site Web d'Adobe à l'adresse www.adobe.com/go/f55d8739_fr.
“Création d'un lien vers des documents en utilisant l'icône Pointer vers un fichier” on page 291 “Chemins relatifs au document” on page 288
Certains scripts de serveur sont insérés au tout début ou à la toute fin du document (avant la balise <html> ou après la balise </html>). Ces scripts requièrent un traitement spécial dans les modèles et les documents créés à partir de modèles. En règle générale, lorsque vous apportez des modifications au code de script situé avant la balise <html> ou après la balise </html> dans un modèle, les modifications ne sont pas répercutées dans les documents créés à partir du modèle, ce qui peut entraîner des erreurs de serveur lorsqu'un script de serveur situé dans le corps principal du modèle dépend d'un script non mis à jour. Une alerte vous avertit lorsque vous tentez de modifier des scripts situés avant la balise <html> ou après la balise </html> dans un modèle. Pour éviter ce problème, vous pouvez insérer le code suivant dans la section head du modèle : <!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
<html> ou après la balise </html> sont répercutées dans les documents créés à partir du modèle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents créés à partir du modèle. Vous pouvez donc soit modifier les scripts dans le modèle, soit dans les documents créés à partir du modèle, mais pas dans les deux à la fois.
Les paramètres de modèle indiquent les valeurs qui permettent de personnaliser le contenu des documents basés sur le modèle. Ils permettent de définir des régions facultatives, des attributs de balise modifiables ou des valeurs à transmettre aux documents joints. Pour chaque paramètre, vous devez définir un nom, un type de donnée et une valeur par défaut. Vous devez attribuer un nom unique à chaque paramètre. En outre, les paramètres sont sensibles à la casse. Ils doivent posséder l'un des cinq types de données admis : texte, booléen, couleur, URL ou nombre. Les paramètres de modèle sont transmis au document sous forme de paramètres d'instance. En général, l'utilisateur d'un modèle est autorisé à modifier les valeurs par défaut du paramètre pour personnaliser le contenu du document basé sur le modèle. Dans d'autres cas, le créateur du modèle peut déterminer ce qui apparaît dans le document, selon la valeur d'une expression de modèle.
“Utilisation de régions facultatives dans les modèles” on page 422 “Définition d'attributs de balise modifiables dans les modèles” on page 424
Les expressions de modèle sont des instructions qui calculent ou évaluent une valeur. Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un document. Vous pouvez notamment rédiger une expression simple se limitant à la valeur d'un paramètre, par exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les valeurs qui feront alterner la couleur d'arrière-plan de la ligne d'un tableau, par exemple @@((_index & 1) ? red : blue)@@. Vous pouvez aussi rédiger des expressions de modèle pour définir des conditions If et MultipleIf. Lorsqu'une instruction conditionnelle contient une expression, Dreamweaver évalue si celle-ci est true ou false. Si la condition est true, la région facultative s'affiche dans le document basé sur le modèle ; si elle est false, elle n'apparaît pas. Vous pouvez définir des expressions en mode Code ou dans la boîte de dialogue de la région facultative que vous insérez. En mode Code, il existe deux façons de définir des expressions de modèle : utilise le commentaire <!-- TemplateExpr expr="votre expression"--> commentaire ou @@(votre expression)@@. Lorsque vous insérez l'expression dans
Dreamweaver évalue l'expression et affiche la valeur dans le document basé sur le modèle.
“Langage d'expression de modèle” on page 410 “La condition Multiple If dans le code du modèle” on page 412
Le langage d'expression de modèle utilise la syntaxe et les règles de priorité de JavaScript, dont il constitue un sousensemble. Utilisez des opérateurs JavaScript pour rédiger des expressions, comme dans l'exemple suivant :
_repeat Définie uniquement pour les expressions situées à l'intérieur d'une région répétée. Fournit des informations prédéfinies sur la région _index L'index numérique (à partir de 0) de l'entrée en cours. _numRows Nombre total d'entrées dans la région répétée. _isFirst Vrai (true) si l'entrée en cours est la première entrée de la région répétée. _isLast Vrai (true) si l'entrée en cours est la première entrée de la région répétée. _prevRecord L'objet _repeat de l'entrée précédente. L'accès à cette propriété provoque une erreur si l'entrée est la première de la région. _nextRecord L'objet _repeat de l'entrée suivante. L'accès à cette propriété provoque une erreur si l'entrée est la
_parent Dans une région répétée imbriquée, donne l'objet _repeat correspondant à la région répétée extérieure. L'accès à cette propriété en dehors d'une région répétée imbriquée provoque une erreur.
En cas de conflit de champ, les champs de l'objet _repeat ont la priorité sur les champs de l'objet _document. Vous n'avez donc pas à référencer explicitement _document ou _repeat. Toutefois, il se peut que _document soit nécessaire à l'intérieur d'une région répétée pour référencer les paramètres de document masqués par les paramètres de région répétée. Dans le cas de régions répétées imbriquées, seuls les champs de la région répétée intérieure sont disponibles implicitement. Les régions extérieures doivent être référencées explicitement à l'aide de _parent.
Voici un exemple de code pouvant être inséré dans la section head du modèle : <!-- TemplateParam name="Dept" type="number" value="1" -->
<!-- TemplateBeginMultipleIf --> Reconnaissance des modèles en mode Création En mode Création, les régions modifiables s'affichent dans la fenêtre de document entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie. Un petit onglet indiquant le nom de la région s'affiche dans le coin supérieur gauche de chaque région.
En mode Code, les régions de contenu modifiables sont repérées dans le code HTML par les commentaires suivants : <!-- TemplateBeginEditable> et <!-- TemplateEndEditable -->
Tous les éléments compris entre ces commentaires sont modifiables dans les documents créés à partir du modèle. Le code source HTML d'une région modifiable peut se présenter comme suit : <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> Dans un document basé sur un modèle, les régions modifiables s'affichent, dans le mode Création de la fenêtre de document, entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie. Un petit onglet indiquant le nom de la région s'affiche dans le coin supérieur gauche de chaque région. Outre les régions modifiables, la page entière est entourée d'un cadre d'une couleur différente et un onglet dans le coin supérieur droit indique le nom du modèle sur lequel le document est basé. Ce cadre a pour fonction de vous rappeler que le document a été créé à partir d'un modèle et que vous ne pouvez rien changer en dehors des régions modifiables.
“Définition des préférences de surbrillance pour des régions de modèle” on page 441
En mode Code, les régions modifiables d'un document dérivé d'un modèle s'affichent dans une couleur différente du code dans les régions non modifiables. Vous pouvez modifier uniquement le code dans lesrégions ou les paramètres modifiables, mais vous ne pouvez pas effectuer de saisie dans les régions verrouillées. Le contenu modifiable est repéré dans le code HTML par les commentaires Dreamweaver suivants : <!-- InstanceBeginEditable> et <!-- InstanceEndEditable -->
Si vous souhaitez enregistrer des informations supplémentaires sur un modèle (par exemple, le nom de la personne qui l'a créé, la date de sa dernière modification ou les raisons justifiant certaines décisions relatives à la mise en forme), vous pouvez créer un fichier Design Notes pour le modèle. Les documents basés sur un modèle n'héritent pas des Design Notes associées à ce dernier. Note: Les modèles d'Adobe Dreamweaver sont différents des modèles de certains autres produits Adobe Creative Suite en ce sens que les sections de page des modèles Dreamweaver sont fixes (ou non modifiables) par défaut. Vous trouverez un didacticiel consacré à la création de modèles à l'adresse www.adobe.com/go/vid0157_fr. Vous trouverez un didacticiel consacré à l'utilisation de modèles à l'adresse www.adobe.com/go/vid0158_fr.
“Types de régions de modèle” on page 407 “Définition de préférences de programmation pour les modèles” on page 440 “Association de Design Notes à un fichier” on page 113
Vous pouvez créer un modèle à partir d'un document existant. 1 Ouvrez le document que vous souhaitez enregistrer comme modèle. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Modèles, puis choisissez Créer un modèle dans le menu. Note: Si vous n'avez pas sélectionné Ne plus afficher ce message, un message s'affiche vous indiquant que le document que vous enregistrez ne comporte aucune région modifiable. Cliquez sur OK pour enregistrer le document comme modèle, ou bien sur Annuler pour fermer la boîte de dialogue sans créer de modèle. 3 Sélectionnez le site dans lequel vous souhaitez enregistrer le modèle dans le menu déroulant Site, puis tapez un nom
4 Cliquez sur Enregistrer. Dreamweaver enregistre le fichier de modèle dans le dossier Templates du site, dans le
Note: Ne retirez pas vos modèles du dossier Templates et placez dans celui-ci uniquement des fichiers de modèles. Ne retirez pas non plus le dossier Templates de votre dossier racine local, car cela pourrait provoquer des erreurs dans les chemins d'accès des modèles.
“Création d'un modèle vierge” on page 69 “Création et ouverture de documents” on page 66
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche du panneau 2 Cliquez sur le bouton Nouveau modèle
3 Le modèle étant toujours sélectionné, donnez-lui un nom, puis appuyez sur Entrée (Windows) ou Retour
Dreamweaver crée un modèle vierge dans le panneau Actifs et dans le dossier Modèles.
A l'aide de Dreamweaver, vous pouvez créer des modèles afin d'aider les utilisateurs d'Adobe ® Contribute® à créer de nouvelles pages, à définir l'aspect général du site et à mettre à jour la mise en forme de plusieurs pages à la fois.
En complément des modèles Dreamweaver, vous pouvez créer des modèles non Dreamweaver à l'aide des outils d'administration de Contribute. Un modèle non-Dreamweaver est une page existante dont les utilisateurs de peuvent se servir pour créer de nouvelles pages. Cette page est similaire à un modèle Dreamweaver, à l'exception que les pages basées sur ce modèle ne se mettent pas à jour lorsque vous apportez des modifications à ce dernier. Les modèles nonDreamweaver ne peuvent pas contenir d'éléments de modèles Dreamweaver, tels que des régions modifiables ou verrouillées, des répétitions de régions ou autres régions facultatives. Lorsqu'un utilisateur de Contribute crée un nouveau document au sein d'un site contenant des modèles Dreamweaver, Contribute établit la liste des modèles disponibles (Dreamweaver et non-Dreamweaver) dans la boîte de dialogue Nouvelle page.
Latin-1. Pour créer une page utilisant un codage différent, l'utilisateur de Contribute peut créer une copie d'une page existante basée sur un encodage différent ou utiliser un modèle basé sur un encodage différent. Cela dit, si le site utilisant d'autres codages ne contient pas de pages ni de modèles, créez d'abord, dans Dreamweaver, une page ou un modèle utilisant cet autre codage.
1 Choisissez Site > Gérer les sites.
4 Si vous ne l'avez pas déjà fait, vous devez activer la compatibilité avec Contribute.
5 Cliquez sur le bouton Administrer le site dans Contribute. 6 Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK. 7 Dans la catégorie Utilisateurs et rôles, sélectionnez un rôle, puis cliquez sur le bouton Modifier les paramètres de
8 Sélectionnez la catégorie Nouvelles pages, puis ajoutez les pages existantes à la liste située en dessous de l'option
Pour plus d'informations, voir Administration de Contribute. 9 Cliquez à deux reprises sur OK pour fermer les boîtes de dialogue.
“Préparation d'un site à utiliser avec Contribute” on page 61
Insertion d'une région modifiable Il est possible de créer des régions modifiables dans un modèle pour définir les zones qui pourront être modifiées dans les pages basées sur ce modèle. Avant d'insérer une région modifiable, enregistrez le document actif comme modèle. Note: Si vous insérez une région modifiable non pas dans un fichier de modèle mais dans un document, une alerte vous informe que le document sera automatiquement enregistré comme modèle. Vous pouvez placer une région modifiable n'importe où sur votre page. Toutefois, tenez compte des informations suivantes si vous rendez possible la modification d'un tableau ou d'un élément à positionnement absolu :
1 Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner la région.
• Placez le point d'insertion à l'endroit où vous voulez insérer une région modifiable. 2 Procédez de l'une des manières suivantes pour insérer une région modifiable :
• Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modèles > Nouvelle région modifiable. 3 Dans la zone Nom, tapez un nom unique pour la région. (vous ne pouvez pas utiliser le même nom pour plusieurs
Note: Ne tapez pas de caractères spéciaux dans la zone Nom. 4 Cliquez sur OK. La région modifiable est entourée d'un cadre rectangulaire dans le modèle, de la couleur de
“Création d'un modèle Dreamweaver” on page 415 “Définition des préférences de surbrillance pour des régions de modèle” on page 441
Vous pouvez facilement identifier et sélectionner les différentes régions présentes dans un modèle et dans un document basé sur un modèle.
❖ Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable.
❖ Choisissez Modifier > Modèles, puis le nom de la région dans la liste figurant en bas de ce sous-menu.
La région modifiable est sélectionnée dans le document.
Si vous avez marqué une région de votre fichier de modèle comme étant modifiable, vous pouvez la verrouiller (pour la rendre non modifiable dans les documents basés sur le modèle) à l'aide de la commande Supprimer le marqueur de modèle. 1 Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la sélectionner. 2 Effectuez l'une des opérations suivantes :
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modèles > Supprimer le marqueur de modèle. La région n'est alors plus modifiable.
Après avoir inséré une région modifiable, vous pouvez en modifier le nom. 1 Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la sélectionner.
Les régions répétées permettent de définir la mise en page au moyen de la répétition de certains éléments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas d'une liste d'éléments. Il existe deux objets de modèle de région répétée : région répétée et tableau répété.
“Types de régions de modèle” on page 407
La répétition de régions permet de copier une région spécifique autant de fois que nécessaire dans un modèle. Une région répétée n'est pas nécessairement modifiable. Pour rendre modifiable le contenu d'une région répétée (par exemple, pour autoriser un utilisateur à taper du texte dans une cellule de tableau dans un document basé sur un modèle), vous devez insérer une région modifiable dans la région répétée. 1 Dans la fenêtre Document, procédez de l'une des manières suivantes :
• Placez le point d'insertion dans le document à l'endroit où vous souhaitez insérer la région répétée. 2 Effectuez l'une des opérations suivantes :
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modèles > Nouvelle région répétée. 3 Dans la zone Nom, tapez un nom unique pour la région de modèle. (Vous ne pouvez pas utiliser le même nom pour
Note: N'insérez pas de caractères spéciaux dans un nom de région. 4 Cliquez sur OK.
“Insertion d'une région modifiable” on page 418 1 Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer le tableau répété. 2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Modèles, puis choisissez Tableau répété dans le menu. 3 Définissez les options suivantes, puis cliquez sur OK. Lignes Détermine le nombre de lignes du tableau. Colonnes Détermine le nombre de colonnes du tableau. Marge intérieure des cellules Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.
Largeur Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur. Bordure Indique la largeur, en pixels, des bordures du tableau.
0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage > Assistances visuelles > Bordures de tableau. Répéter les lignes du tableau Permet d'indiquer les lignes du tableau à inclure dans la région répétée. Ligne de début Permet d'indiquer le numéro de la première ligne à inclure dans la région répétée. Ligne de fin Permet d'indiquer le numéro de la première ligne à inclure dans la région répétée. Nom de région Permet d'attribuer un nom unique à la région répétée.
Après avoir inséré un tableau répété dans un modèle, vous pouvez le personnaliser en alternant la couleur d'arrièreplan des lignes du tableau. 1 Dans la fenêtre de document, sélectionnez une ligne du tableau répété. 2 Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Création de la barre d'outils du
3 En mode Code, modifiez la balise <tr> pour qu'elle se présente de la façon suivante : <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
4 Enregistrez le modèle.
Lorsque vous insérez une région facultative, vous pouvez associer des valeurs spécifiques à un paramètre de modèle ou bien définir des instructions conditionnelles (instructions If...else) pour des régions de modèle. Vous pouvez utiliser des opérateurs simples (true/false) ou bien définir des instructions conditionnelles et des expressions plus complexes. Vous pouvez modifier la région facultative ultérieurement si nécessaire. Suivant les conditions définies, l'utilisateur du modèle peut modifier les paramètres dans les documents qu'il crée à partir du modèle et décider si la région facultative doit s'afficher ou non. Vous pouvez lier plusieurs régions facultatives à un paramètre nommé. Dans les documents basés sur un modèle, les régions liées entre elles forment un groupe qui s'affiche ou reste masqué. Vous pouvez par exemple associer à un article une image de remise (par exemple : « Liquidation totale ! ») et le texte du prix de vente.
“Modification des propriétés d'un modèle” on page 436 “Types de régions de modèle” on page 407
Une région facultative permet de décider si des éléments doivent s'afficher ou être masqués dans les documents basés sur un modèle. Il existe quatre types de régions facultatives :
L'onglet d'une région facultative est précédé du mot if dans un modèle. Suivant la condition définie dans le modèle, l'utilisateur du modèle peut décider si la région doit apparaître dans les pages qu'il crée.
3 Tapez un nom pour la région facultative, puis cliquez sur l'onglet Avancé si vous souhaitez définir des valeurs pour
1 Dans la fenêtre de document, placez le point d'insertion là où vous voulez insérer la région facultative.
2 Effectuez l'une des opérations suivantes :
• Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Modèles, puis choisissez Région modifiable facultative dans le menu. 3 Tapez un nom pour la région facultative, puis cliquez sur l'onglet Avancé si vous souhaitez définir des valeurs pour
Il est possible de modifier les paramètres d'une région facultative insérée dans un modèle. Par exemple, vous pouvez indiquer si le paramètre par défaut du contenu est d'être affiché ou non, de lier un paramètre à une région facultative existante ou de modifier une expression de modèle. Créez des paramètres de modèle et définissez des instructions conditionnelles (instructions If...else) pour les régions de modèle. Vous pouvez utiliser des opérateurs simples (true/false) ou bien définir des instructions conditionnelles et des expressions plus complexes. Les options de l'onglet Avancé vous permettent de lier plusieurs régions facultatives à un paramètre nommé. Dans les documents basés sur un modèle, les régions liées entre elles forment un groupe qui s'affiche ou reste masqué. Vous pouvez par exemple associer à un article une image de remise (par exemple : « Liquidation totale ! ») et le texte du prix de vente.
• En mode Création, placez le point d'insertion dans la région du modèle, puis, dans le sélecteur de balises situé en bas de la fenêtre de document, sélectionnez la balise de modèle <mmtemplate:if>.
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier. 3 Dans l'onglet Base, tapez un nom pour le paramètre dans la zone Nom. 4 Sélectionnez Afficher par défaut si vous souhaitez que la région sélectionnée s'affiche dans le document. Désactivez-
Note: Pour attribuer une autre valeur au paramètre, recherchez le paramètre dans la section du document en mode Code et modifiez la valeur. 5 (Facultatif) Cliquez sur l'onglet Avancé, puis définissez les options suivantes :
Note: Dreamweaver insère automatiquement des guillemets doubles avant et après le texte saisi. 6 Cliquez sur OK.
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
<!-- TemplateBeginIf cond="departmentImage" --> “Expressions de modèle” on page 410
Définition des attributs de balise modifiables dans un modèle Vous pouvez permettre aux utilisateurs d'un modèle de modifier des attributs de balise spécifiques dans les documents créés à partir de ce modèle.
Lorsque vous créez un attribut de balise modifiable, un paramètre de modèle est inséré dans le code. L'attribut reçoit une valeur initiale dans le modèle. Tous les documents créés à partir du modèle héritent de ce paramètre. L'utilisateur du modèle peut alors modifier le paramètre dans le document basé sur le modèle. Note: Si vous créez un lien vers une feuille de style avec un attribut modifiable, alors les attributs de la feuille de style ne sont plus disponibles pour être affichés ou modifiés dans le fichier de modèle. 1 Dans la fenêtre de document, sélectionnez l'élément pour lequel vous souhaitez définir un attribut de balise
2 Sélectionnez Modifier > Modèles > Rendre l'attribut modifiable. 3 Dans la zone Attribut, entrez un nom ou sélectionnez un attribut dans la boîte de dialogue Attributs de balise 4 Vérifiez que l'option Rendre l'attribut modifiable est activée. 5 Tapez un nom unique pour l'attribut dans la zone Etiquette.
6 Dans le menu déroulant Type, sélectionnez le type de valeur autorisée pour cet attribut en définissant l'une des
• Si vous souhaitez que l'utilisateur puisse sélectionner une valeur au moyen du sélecteur de couleur, sélectionnez Couleur.
• Si vous souhaitez que l'utilisateur d'un modèle puisse taper une valeur numérique pour mettre à jour un attribut (la hauteur ou la largeur d'une image par exemple), sélectionnez Nombre. 7 La zone Valeur par défaut indique la valeur de l'attribut de balise sélectionné dans le modèle. Tapez une autre valeur
8 (Facultatif) Si vous souhaitez apporter des modifications à un autre attribut de la balise sélectionnée, sélectionnez-
4 Désélectionnez Rendre l'attribut modifiable, puis cliquez sur OK. 5 Mettez à jour les documents basés sur le modèle.
A propos des modèles imbriqués Un modèle imbriqué est un modèle dont la conception et les régions modifiables sont basées sur un autre modèle. Les modèles imbriqués sont utiles pour gérer le contenu de certaines pages d'un site qui ont de nombreux éléments de présentation en commun avec les autres pages du site mais qui présentent malgré tout quelques différences. Par exemple, vous pouvez créer un modèle de base définissant la conception de zones plus larges, qui sera utilisé par une grande partie des responsables du contenu du site, et créer un modèle imbriqué définissant de nouvelles régions modifiables dans les pages d'une section spécifique du site. Les régions modifiables d'un modèle de base sont transmises aux modèles imbriqués et restent modifiables dans les pages créées à partir d'un modèle imbriqué, à moins que de nouvelles régions de modèle ne soient insérées dans ces régions. Les modifications apportées à un modèle de base sont automatiquement répercutées dans les modèles basés sur ce modèle de base et dans tous les documents basés sur les modèles principal et imbriqué.
à partir du modèle imbriqué. Les régions de modèle qui ne contiennent aucune région modifiable sont transmises sous la forme de régions modifiables aux documents basés sur le modèle.
Modèles imbriqués 1 Créez un document à partir du modèle sur lequel vous souhaitez baser le modèle imbriqué en procédant de l'une
Nouveau à partir d'un modèle dans le menu contextuel.
2 Sélectionnez Fichier > Enregistrer comme modèle pour enregistrer le nouveau document en tant que modèle
3 Tapez un nom dans la zone Enregistrer sous, puis cliquez sur OK.
1 En mode Code, localisez la région modifiable que vous souhaitez rendre non modifiable dans les documents basés
Les régions modifiables sont définies par les balises de commentaire du modèle. 2 Ajoutez le code suivant au code de la région modifiable : @@("")@@
<!-- InstanceBeginEditable name="EditRegion1" --> Lorsque vous apportez des modifications à un modèle et que vous l'enregistrez, tous les documents basés sur ce modèle sont mis à jour. Vous pouvez également mettre à jour manuellement un document basé sur un modèle ou l'ensemble d'un site si nécessaire. Note: Pour modifier un modèle pour un site Contribute, vous devez utiliser Dreamweaver. Il est impossible de modifier des modèles dans Contribute.
• Modification et mise à jour de modèles • Application ou suppression d'un modèle depuis un document existant Dreamweaver vérifie la syntaxe du modèle lorsque vous enregistrez un modèle, mais il est conseillé de vérifier la syntaxe du modèle manuellement à mesure que vous le modifiez.
“Création d'un modèle Dreamweaver” on page 415 “Vérification de la syntaxe du modèle” on page 440 “Application ou suppression d'un modèle depuis un document existant” on page 434
Vous pouvez ouvrir un fichier de modèle directement pour le modifier ou bien ouvrir un document basé sur un modèle, puis ouvrir le modèle joint pour le modifier. Lorsque vous apportez des modifications à un modèle, Dreamweaver vous invite à mettre à jour les documents basés sur ce modèle. Note: Vous pouvez aussi manuellement mettre à jour les documents selon les modifications apportées au modèle, si nécessaire.
“Vérification de la syntaxe du modèle” on page 440
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche du panneau
2 Dans la liste des modèles disponibles, procédez de l'une des manières suivantes :
• Sélectionnez un modèle à modifier, puis cliquez sur le bouton Modifier
4 Enregistrez le modèle. Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle. 5 Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ; cliquez sur Ne pas
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
2 Effectuez l'une des opérations suivantes :
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modèles > Ouvrir le modèle joint. 3 Modifiez le contenu du modèle.
4 Enregistrez le modèle. Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle. 5 Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ; cliquez sur Ne pas
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche du panneau
3 Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom.
(Macintosh). Comme avec l'Explorateur Windows et le Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela ouvrirait le modèle pour modification. 4 Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entrée (Windows) ou Retour (Macintosh) pour
Une alerte vous demande si vous voulez mettre à jour les documents créés à partir de ce modèle. 5 Pour mettre à jour tous les documents du site créés à partir de ce modèle, cliquez sur Mettre à jour. Cliquez sur Ne
“Création d'un modèle Dreamweaver” on page 415 “Application ou suppression d'un modèle depuis un document existant” on page 434 La description du modèle s'affiche dans la boîte de dialogue Nouveau document lorsque vous créez une page à partir d'un modèle existant. 1 Choisissez Modifier > Modèles > Description. 2 Dans la boîte de dialogue Description du modèle, modifiez la description, puis cliquez sur OK.
“Création d'un modèle Dreamweaver” on page 415
1 Ouvrez le document dans la fenêtre de document. 2 Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Vous pouvez mettre à jour toutes les pages du site ou bien uniquement les pages basées sur un modèle spécifique. 1 Choisissez Modifier > Modèles > Mettre à jour les pages. 2 Dans le menu Regarder dans, réalisez une des opérations suivantes :
3 Dans la rubrique Mettre à jour, assurez-vous que l'option Modèles est activée. 4 Si vous ne souhaitez pas voir de journal des fichiers mis à jour par Dreamweaver, désactivez l'option Afficher le
5 Cliquez sur Démarrer pour mettre à jour les fichiers comme indiqué. Si vous avez sélectionné l'option Afficher le
6 Cliquez sur Fermer.
Les utilisateurs de Contribute ne peuvent pas modifier de modèles Dreamweaver. Vous pouvez cependant utiliser Dreamweaver pour apporter des modifications dans un modèle de site Contribute. Tenez compte des facteurs suivants lors de la mise à jour de modèles dans un site Contribute :
Contribute et lorsqu'un utilisateur de Contribute modifie ses informations de connexion. Si vous apportez des modifications à un modèle lorsqu'un utilisateur de Contribute modifie un fichier basé sur ce modèle, l'utilisateur ne peut pas visualiser vos modifications tant qu'il ne relance pas Contribute.
Pour mettre à jour un modèle dans un site Contribute, exécutez les étapes suivantes. 1 Ouvrez le modèle Contribute dansDreamweaver, modifiez le formulaire et enregistrez le document. Pour obtenir
2 Demandez à tous les utilisateurs Contribute qui travaillent sur le site de redémarrer Contribute.
Les documents créés à partir de ce modèle ne sont pas détachés du modèle. Ils conservent la structure et les régions modifiables dont le fichier de modèle disposait avant d'être supprimé. Vous pouvez convertir un document de ce type en fichier HTML normal sans régions modifiables ou verrouillées.
“Détachement d'un document d'un modèle” on page 436 “Application ou suppression d'un modèle depuis un document existant” on page 434 Vous pouvez exporter les paires nom/valeur dans un fichier XML pour que vous puissiez utiliser les données du document en dehors de Dreamweaver (par exemple dans un éditeur XML, dans un éditeur de texte ou même dans une application de base de données). Inversement, si vous disposez d'un document XML structuré de manière appropriée, vous pouvez importer ses données dans un document basé sur un modèle Dreamweaver.
1 Ouvrez un document basé sur un modèle qui contient des régions modifiables. 2 Choisissez Fichier > Exporter > Données du modèle en XML. 3 Activez l'une des options Notation :
4 Cliquez sur OK. 5 Dans la boîte de dialogue qui s'affiche, sélectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton
Un fichier XML est généré : il contient le matériau des paramètres et des régions modifiables du document (y compris le matériau des régions facultatives et des régions modifiables situées à l'intérieur de régions répétées). Le fichier XML comporte le nom du modèle original, ainsi que le nom et le contenu de chaque région de modèle.
Si votre fichier XML n'est pas configuré exactement de la façon prévue par Dreamweaver, vous ne pourrez peut-être pas importer vos données. Une solution à ce problème consiste à exporter un fichier XML fictif de Dreamweaver, de façon à avoir un fichier XML ayant exactement la bonne structure, puis à copier les données de votre fichier XML original dans le fichier XML exporté. Vous obtenez ainsi un fichier XML ayant une structure correcte et contenant les données appropriées, prêtes à être importées.
Vous pouvez exporter des documents basés sur un modèle d'un site vers un autre site sans inclure le marqueur de modèle. 1 Choisissez Modifier > Modèles > Exporter sans marqueur. 2 Dans la zone Dossier, tapez le chemin du dossier vers lequel vous souhaitez exporter le fichier, ou bien cliquez sur
Note: Sélectionnez un dossier situé à l'extérieur du site courant. 3 Pour enregistrer une version XML des documents basés sur un modèle que vous exportez, sélectionnez Conserver
4 Pour appliquer les modifications aux fichiers précédemment exportés, sélectionnez Extraire les fichiers modifiés
Vous pouvez appliquer un modèle à un document existant à l'aide du panneau Actifs ou à partir de la fenêtre de document. Vous pouvez annuler l'application d'un modèle si nécessaire.
1 Ouvrez le document auquel vous souhaitez appliquer le modèle. 2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche du panneau
4 Sélectionnez une destination pour le contenu à l'aide du menu Déplacer le contenu vers la nouvelle région en
• Sélectionnez Nulle part pour supprimer le contenu du document. 5 Cliquez sur Utiliser pour tout pour déplacer l'ensemble des éléments de contenu non concordants vers la région
6 Cliquez sur OK pour appliquer le modèle ou sur Annuler pour annuler l'application du modèle au document.
1 Ouvrez le document auquel vous souhaitez appliquer le modèle. 2 Choisissez Modifier > Modèles > Appliquer le modèle à la page.
3 Sélectionnez un modèle dans la liste, puis cliquez sur le bouton Sélectionner.
4 Sélectionnez une destination pour le contenu à l'aide du menu Déplacer le contenu vers la nouvelle région en
• Sélectionnez Nulle part pour supprimer le contenu du document. 5 Cliquez sur Utiliser pour tout pour déplacer l'ensemble des éléments de contenu non concordants vers la région
6 Cliquez sur OK pour appliquer le modèle ou sur Annuler pour annuler l'application du modèle au document.
❖ Choisissez Edition > Annuler l'application du modèle.
1 Ouvrez le document basé sur un modèle que vous souhaitez détacher. 2 Choisissez Modifier > Modèles > Détacher du modèle.
A propos de la modification du contenu d'un document basé sur un modèle Les modèles de Dreamweaver spécifient les régions qui sont verrouillées (non modifiables) et les autres qui sont modifiables dans les documents basés sur ces modèles. Sur les pages basées sur un modèle, les utilisateurs peuvent modifier uniquement le contenu des régions modifiables. Vous pouvez facilement identifier et sélectionner les régions modifiables afin d'en modifier le contenu. Les utilisateurs du modèle ne peuvent pas modifier le contenu des régions verrouillées. Note: Si vous essayez de modifier une région verrouillée dans un document basé sur un modèle lorsque la surbrillance est désactivée, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une région verrouillée. Les utilisateurs du modèle peuvent également modifier les propriétés et les entrées d'une région répétée dans les documents basés sur ce modèle.
“Création d'une page basée sur un modèle existant” on page 70 “A propos des modèles Dreamweaver” on page 407 “Sélection de régions modifiables” on page 419
Lorsque l'auteur crée des paramètres dans un modèle, les documents basés sur ce modèle héritent automatiquement des paramètres et de leur valeur initiale. L'utilisateur du modèle peut mettre à jour les attributs de balise modifiables et d'autres paramètres du modèle (ceux d'une région facultative, par exemple).
“Définition d'attributs de balise modifiables dans les modèles” on page 424
1 Ouvrez le document basé sur un modèle. 2 Choisissez Modifier > Propriétés du modèle.
3 Sélectionnez la propriété dans la liste Nom.
4 Si vous souhaitez modifier la valeur de la propriété dans le document courant, saisissez une autre valeur dans le
Note: Le nom du champ et les valeurs modifiables sont définis dans le modèle. Les attributs non répertoriés dans la liste Nom ne peuvent pas être modifiés dans le document basé sur un modèle. 5 Sélectionnez Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la propriété modifiable soit
1 Ouvrez le document basé sur un modèle. 2 Choisissez Modifier > Propriétés du modèle.
3 Sélectionnez une propriété dans la liste Nom.
4 Sélectionnez Afficher si vous souhaitez que la région facultative apparaisse dans le document, ou bien
Note: Le nom du champ et la valeur par défaut sont définis dans le modèle. 5 Sélectionnez Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la propriété modifiable soit
Vous pouvez ajouter ou supprimer des entrées ou bien modifier l'ordre des entrées dans une région répétée. Lorsque vous ajoutez une entrée de région répétée, l'ensemble de la région répétée est reproduit dans le document. La région répétée doit contenir une région modifiable dans le modèle original pour que l'utilisateur puisse en modifier le contenu.
“Création de régions répétées dans les modèles” on page 420
1 Ouvrez le document basé sur un modèle. 2 Placez le point d'insertion sur la région répétée pour la sélectionner. 3 Effectuez l'une des opérations suivantes :
• Cliquez sur le bouton moins (–) pour supprimer l'entrée de région répétée sélectionnée. • Cliquez sur le bouton Flèche bas pour déplacer l'entrée sélectionnée d'un niveau vers le bas. • Cliquez sur le bouton Flèche haut pour déplacer l'entrée sélectionnée d'un niveau vers le haut. Note: Vous pouvez également choisir Modifier > Modèles, puis activer l'une des options d'entrée répétée près du bas du menu contextuel. Celui-ci permet d'insérer une nouvelle entrée de région répétée et de modifier l'emplacement de l'entrée sélectionnée.
1 Ouvrez le document basé sur un modèle. 2 Placez le point d'insertion sur la région répétée pour la sélectionner. 3 Effectuez l'une des opérations suivantes :
• Pour copier une entrée répétée, choisissez Edition > Entrées répétées > Couper l'entrée répétée. • Pour supprimer une entrée répétée, choisissez Edition > Entrées répétées > Supprimer l'entrée répétée. • Pour coller une entrée répétée, choisissez Edition > Coller. Note: Lorsque vous collez une entrée de région répétée, celle-ci s'insère dans le document sans écraser d'entrée existante.
Les règles de syntaxe générale sont les suivantes :
• Tous les attributs doivent être entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.
Dreamweaver utilise les balises de modèle suivantes : <!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!--
1 Ouvrez le document que vous souhaitez vérifier dans la fenêtre de document. 2 Choisissez Modifier > Modèles > Vérifier la syntaxe du modèle.
à l'origine de cette erreur.
“Reconnaissance des modèles et des documents basés sur un modèle” on page 412 “Expressions de modèle” on page 410
Personnalisation des préférences de coloration de code d'un modèle Utilisez ces préférences pour définir la couleur des caractères, la couleur de l'arrière-plan et les attributs de style du texte affiché en mode Code. Vous pouvez définir votre propre modèle de couleur afin de pouvoir distinguer facilement les régions de modèle lorsque vous affichez un document en mode Code. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Coloration du code dans la liste de gauche. 3 Sélectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le modèle de coloration. 4 Dans la liste Styles pour, sélectionnez Balises de modèle. 5 Définissez la couleur des caractères, la couleur de l'arrière-plan et les attributs de style du texte affiché en mode
(souligné) pour appliquer le format souhaité.
Les préférences de surbrillance Dreamweaver permettent de personnaliser les couleurs de surbrillance appliquées aux cadres entourant les régions modifiables et les régions verrouillées d'un modèle en mode Création. La couleur de surbrillance des régions modifiables est utilisée dans le modèle, mais aussi dans les documents basés sur ce modèle.
“Reconnaissance d'un document basé sur un modèle en mode Création” on page 414 “Reconnaissance des modèles en mode Création” on page 412
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Surbrillance dans la liste de gauche. 3 Cliquez dans la case de couleur Régions modifiables, Régions modifiables imbriquées ou Régions verrouillées, puis
Pour plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section “Utilisation du sélecteur de couleur” on page 229. 4 (Facultatif) Répétez cette opération pour les autres types de région de modèle, autant de fois que nécessaire. 5 Cochez la case Afficher pour activer l'affichage des couleurs dans la fenêtre de document ou décochez-la pour
Note: La case de couleur Régions modifiables imbriquées ne s'accompagne pas de l'option Afficher : l'affichage des régions imbriquées est en effet contrôlé par l'option Régions modifiables. 6 Cliquez sur OK.
❖ Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Assistances visuelles > Eléments invisibles est activée et que les options appropriées sont activées dans les préférences de surbrillance. Note: Si des éléments invisibles apparaissent, mais pas les couleurs de surbrillance, choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Surbrillance. Vérifiez que l'option Afficher est activée près de la couleur de surbrillance appropriée. Vérifiez également que la couleur souhaitée est contrastée par rapport à la couleur d'arrière-plan de votre page.
Web au niveau de l'entreprise, bien qu'il puisse être employé en combinaison avec d'autres pages au niveau de l'entreprise.
Le cadre applicatif Spry est une bibliothèque JavaScript qui permet aux concepteurs Web de créer des pages Web offrant une expérience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantité minime de JavaScript, afin d'incorporer des données XML dans vos documents HTML, de créer des widgets tels que des accordéons et des barres de menus, ou encore ajouter différents effets à divers éléments de page. Le cadre applicatif Spry est conçu de telle sorte que le marquage est simple et facile à utiliser pour toute personne possédant une connaissance de base du langage HTML, de CSS et de JavaScript. Le cadre applicatif Spry est principalement destiné aux professionnels de la conception Web ou aux concepteurs Web amateurs expérimentés. Il n'est pas destiné à servir de cadre d'applications Web à part entière pour le développement Web au niveau de l'entreprise, bien qu'il puisse être employé en combinaison avec d'autres pages au niveau de l'entreprise. Pour plus d'informations sur le cadre applicatif Spry, consultez le site www.adobe.com/go/learn_dw_spryframework_fr.
Guide de développement Spry
Les fichiers CSS et JavaScript associés à un widget sont nommés selon ce dernier. De la sorte, vous saurez aisément quels fichiers correspondent à chaque widget. Par exemple, les fichiers associés au widget Accordéon sont nommés SpryAccordion.css et SpryAccordion.js. Lorsque vous insérez un widget dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants.
“Description des feuilles de style en cascade” on page 132
Les ressources en ligne suivantes fournissent plus d'informations sur la personnalisation des widgets Spry. Exemples de widgets Spry Personnalisation des barres de menus Spry dans Dreamweaver Widgets de validation Spry (didacticiel vidéo)
❖ Choisissez Insertion > Spry puis sélectionnez le widget à insérer. 1 Maintenez le pointeur de la souris au-dessus du widget jusqu'à ce que le contour bleu du widget soit visible. 2 Cliquez sur l'onglet du widget, dans son coin supérieur gauche.
❖ Sélectionnez le widget à modifier puis apportez les modifications désirées dans l'inspecteur Propriétés (Fenêtre >
Il existe bien d'autres widgets Web que les widgets Spry installés avec Dreamweaver. Le site Adobe Exchange fournit des widgets Web qui ont été conçus par d'autres professionnels. ❖ Choisissez Rechercher des widgets Web dans le menu Etendre Dreamweaver
Lorsque vous insérez un widget, un jeu de données ou un effet Spry dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants. Vous pouvez modifier l'emplacement par défaut où Dreamweaver enregistre les actifs Spry si vous préférez les enregistrer ailleurs. 1 Choisissez Site > Gérer les sites. 2 Sélectionnez votre site dans la boîte de dialogue Gérer les sites, puis cliquez sur Modifier. 3 Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Spry. 4 Entrez le chemin d'accès au dossier à utiliser pour les actifs Spry, puis cliquez sur OK. Vous pouvez également
“Utilisation de sites Dreamweaver” on page 40
Vous trouverez une explication plus détaillée du fonctionnement du widget Accordéon, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryaccordion_fr. Pour consulter un didacticiel relatif à l’utilisation du widget Accordéon, rendez-vous à l’adresse suivante : www.adobe.com/go/vid0167_fr.
Insertion du widget Accordéon ❖ Choisissez Insertion > Spry > Accordéon Spry.
1 Sélectionnez un widget Accordéon dans la fenêtre de document. 2 Cliquez sur le bouton Plus (+) de l'inspecteur Propriétés (Fenêtre > Propriétés). 3 (Facultatif) Modifiez le nom du panneau en sélectionnant son texte en mode Création puis en apportant les
Modification de l'ordre des panneaux 1 Sélectionnez un widget Accordéon dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau accordéon à déplacer. 3 Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre le panneau.
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Accordéon, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Accordéon de manière à créer un accordéon adapté à vos besoins. Pour savoir comment modifier les couleurs du widget Accordéon, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryaccordion_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryAccordion.css. Dreamweaver enregistre le fichier SpryAccordion.css dans le dossier SpryAssets de votre site dès que vous créez un widget Accordéon Spry. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget. Il peut dès lors être utile de consulter également le fichier. Même s'il est facile de modifier directement les règles du widget Accordéon dans le fichier CSS, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de l'accordéon. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Vous pouvez définir le style du texte d'un widget Accordéon en définissant des propriétés pour le conteneur entier du widget Accordéon, ou en définissant des propriétés distinctes pour chaque composant du widget. ❖ Pour modifier le style du texte d'un widget Accordéon, recherchez la règle CSS appropriée dans le tableau suivant,
Partie du widget à modifier
1 Repérez la règle CSS .Accordion en ouvrant le fichier SpryAccordion.css. Il s'agit de la règle qui définit les propriétés
Vous pouvez également trouver cette règle en sélectionnant le widget Accordéon puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2 Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.
A propos du widget Barre de menus Un widget Barre de menus est un ensemble de boutons de menu de navigation. Lorsque le visiteur d'un site place le pointeur de la souris au-dessus de ces boutons, ils affichent des sous-menus. Les barres de menus permettent d'afficher une grande quantité d'informations de navigation dans un espace compact et de donner aux visiteurs du site un aperçu de son contenu sans les contraindre à l'explorer dans ses moindres recoins.
Vous trouverez une explication plus détaillée du fonctionnement du widget Barre de menus, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprymenubar_fr. Vous trouverez un didacticiel consacré à la création d'une barre de menus Spry à l'adresse www.adobe.com/go/vid0168_fr.
Didacticiel consacré aux barres de menus Spry
Insertion du widget Barre de menus 1 Choisissez Insertion > Spry > Barre de menus Spry. 2 Sélectionnez Horizontale ou Verticale, puis cliquez sur OK.
Insertion. Note: Le widget Barre de menus Spry emploie des calques DHTML pour afficher des sections de code HTML au-dessus d'autres sections. Si votre page comporte du contenu créé à l'aide d'Adobe Flash, un problème peut se poser. Les fichiers SDF sont en effet toujours affichés au-dessus de tous les autres calques DHTML, si bien qu'il se peut que ce fichier SWF s'affiche au-dessus de vos sous-menus. La solution à ce problème consiste à modifier les paramètres du fichier SWF, de manière à employer wmode="transparent". Vous pouvez le faire aisément en sélectionnant le fichier SWF dans la fenêtre de document puis en réglant l'option wmode sur transparent dans l'inspecteur Propriétés. Pour plus d'informations, consultez le site www.adobe.com/go/15523_fr.
L'inspecteur Propriétés (Fenêtre > Propriétés) permet d'ajouter des éléments de menu au widget Barre de menus et d'en supprimer.
3 (Facultatif) Renommez le nouvel élément de menu en modifiant son texte par défaut, dans la fenêtre de document
Ajout d'un élément de sous-menu 1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés, sélectionnez le nom de l'élément de menu principal auquel vous voulez ajouter le
3 Cliquez sur le bouton Plus au-dessus de la deuxième colonne. 4 (Facultatif) Renommez le nouvel élément de sous-menu en modifiant son texte par défaut, dans la fenêtre de
Pour ajouter un sous-menu à un sous-menu, sélectionnez le nom de ce dernier, puis cliquez sur le bouton Plus audessus de la troisième colonne de l'inspecteur Propriétés. Note: Dreamweaver ne prend en charge que deux niveaux de sous-menus en mode Création, mais vous pouvez en ajouter autant que vous le voulez en mode Code. Suppression d'un élément de menu principal ou de sous-menu 1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés, sélectionnez le nom de l'élément de menu principal ou de sous-menu à supprimer,
1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu à déplacer. 3 Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre l'élément de menu.
1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu dont vous voulez
3 Apportez les modifications désirées dans la zone de texte.
1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu auquel vous voulez
3 Entrez le lien dans la zone Lien ou cliquez sur l'icône représentant un dossier afin de rechercher un fichier.
1 Sélectionnez un widget Barre de menus dans la fenêtre de document.
L'attribut cible détermine l'endroit où une page liée doit être ouverte. Par exemple, vous pouvez attribuer un attribut cible à un élément de menu de façon à ce que la page liée s'affiche dans une nouvelle fenêtre de navigateur lorsqu'un visiteur du site clique sur son lien. Si vous employez des jeux de cadres, vous pouvez également définir le nom d'un cadre dans lequel la page liée doit s'ouvrir. 1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu auquel vous voulez
3 Entrez l'un des quatre attributs dans la zone Cible : _blank Ouvre la page liée dans une nouvelle fenêtre du navigateur. _self Charge la page liée dans la même fenêtre de navigateur. Il s'agit de l'option par défaut. Si la page se trouve dans
_parent Charge le document lié dans le parent de jeu de cadres immédiat du document. _top Charge la page liée dans la fenêtre supérieure d'un jeu de cadres.
Vous pouvez désactiver le style d'un widget Barre de menus de manière à mieux voir sa structure HTML en mode Création. Par exemple, lorsque vous désactivez les styles, les éléments de la barre de menus s'affichent sous la forme d'une liste à puces sur la page et pas sous la forme d'éléments mis en forme dans une barre de menus. 1 Sélectionnez un widget Barre de menus dans la fenêtre de document. 2 Cliquez sur le bouton Désactiver les styles de l'inspecteur Propriétés (Fenêtre > Propriétés).
Vous pouvez modifier l'orientation d'un widget Barre de menus, de manière à transformer une barre horizontale en barre verticale et inversement. Il suffit pour ce faire de modifier le code HTML de la barre de menus et de vérifier que votre dossier SpryAssets contient bien le fichier CSS correct. L'exemple suivant transforme un widget Barre de menus horizontale en widget Barre de menus verticale. 1 Dans Dreamweaver, ouvrez la page qui contient un widget Barre de menus horizontale. 2 Insérez un widget Barre de menus verticale (Insertion > Spry > Barre de menus Spry) puis enregistrez la page. Cette
Note: Si votre site comprend déjà un autre widget Barre de menus verticale, il n'est pas nécessaire d'en insérer un nouveau. Vous pouvez vous contenter de joindre le fichier SpryMenuBarVertical.css à la page au lieu de cliquer sur le bouton Attacher une feuille de style du panneau Styles CSS (Fenêtre > Styles CSS). 3 Supprimez la barre de menus verticale. 4 En mode Code (Affichage > Code), accédez à la classe MenuBarHorizontal et remplacez-la par MenuBarVertical.
5 Après le code de la barre de menus, accédez au constructeur de la barre :
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Barre de menus, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Barre de menus de manière à créer une barre de menus adaptée à vos besoins. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (selon l'option sélectionnée). Dreamweaver enregistre ces fichiers CSS dans le dossier SpryAssets de votre site dès que vous créez un widget Barre de menus Spry. Ces fichiers contiennent également des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Barre de menus dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de la barre de menus. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Le code CSS joint à la balise <a> contient les informations de style du texte. La balise <a> comprend également plusieurs valeurs de classe de style de texte pertinentes qui concernent différents états des menus. ❖ Pour modifier le style du texte d'un élément de menu, recherchez la règle CSS appropriée dans le tableau suivant,
états des menus. ❖ Pour modifier la couleur d'arrière-plan d'un élément de menu, recherchez la règle CSS appropriée dans le tableau
1 Accédez à la règle ul.MenuBarVertical li ou ul.MenuBarHorizontal li : 2 Modifiez la propriété « width » afin de lui donner la largeur désirée (ou remplacez sa valeur par auto pour
3 Accédez à la règle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 4 Modifiez la propriété « width » afin de lui donner la largeur désirée (ou remplacez sa valeur par auto pour
5 Accédez à la règle ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li : 6 Ajoutez les propriétés suivantes à la règle : float: none; et background-color: transparent;.
Définition de la position des sous-menus La position des sous-menus d'une barre de menus Spry est contrôlée par la propriété « margin » des balises ul du sous-menu. 1 Accédez à la règle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 2 Remplacez les valeurs par défaut margin: -5% 0 0 95%; par les valeurs désirées.
A propos du widget Panneau réductible Un widget Panneau réductible est un panneau qui peut stocker du contenu en n'occupant que peu de place. Les utilisateurs affichent ou masquent le contenu stocké dans le panneau réductible en cliquant sur l'onglet du widget. L'exemple suivant montre un widget Panneau réductible développé et réduit :
❖ Choisissez Insertion > Spry > Panneau réductible Spry. 1 Sélectionnez un widget Panneau réductible dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), choisissez Ouvert ou Fermé dans le menu déroulant Par défaut.
Par défaut, si vous activez l'animation d'un widget Panneau réductible, le panneau s'ouvre et se ferme progressivement, en douceur, lorsque le visiteur du site clique sur son onglet. Si vous désactivez l'animation, le panneau réductible s'ouvre et se ferme brusquement. 1 Sélectionnez un widget Panneau réductible dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Activer l’animation.
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Panneau réductible, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneau réductible de manière à créer un panneau réductible adapté à vos besoins. Pour savoir comment modifier les couleurs du widget Panneau réductible, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryCollapsiblePanel.css. Dreamweaver enregistre le fichier SpryCollapsiblePanel.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneau réductible. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Panneau réductible dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du panneau réductible. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
1 Recherchez la règle CSS .CollapsiblePanel en ouvrant le fichier SpryCollapsible Panel.css. Cette règle définit les
Vous pouvez également trouver cette règle en sélectionnant le widget Panneau réductible puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2 Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.
A propos du widget Panneau à onglet Un widget Panneaux à onglet est un ensemble de panneaux qui peuvent stocker du contenu en n'occupant que peu de place. Les visiteurs du site affichent ou masquent le contenu stocké dans les panneaux à onglet en cliquant sur l'onglet du panneau auquel ils veulent accéder. Les panneaux du widget s'ouvrent à mesure que le visiteur clique sur les différents onglets. Dans un widget Panneaux à onglet, un seul panneau de contenu est ouvert à tout moment. L'exemple suivant montre un widget Panneaux à onglet dont le troisième panneau est ouvert :
Insertion du widget Panneaux à onglet ❖ Choisissez Insertion > Spry > Panneaux à onglet Spry.
Insertion. 1 Sélectionnez un widget Panneaux à onglet dans la fenêtre de document. 2 Cliquez sur le bouton Plus de l'inspecteur Propriétés (Fenêtre > Propriétés). 3 (Facultatif) Modifiez le nom de l'onglet en sélectionnant son texte en mode Création puis en apportant les
1 Sélectionnez un widget Panneaux à onglet dans la fenêtre de document. 2 Dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à
❖ Effectuez l'une des opérations suivantes :
1 Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.
1 Sélectionnez un widget Panneaux à onglet dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le panneau à ouvrir par défaut dans le menu
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Panneaux à onglet, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneaux à onglet de manière à créer un widget adapté à vos besoins. Pour savoir comment modifier les couleurs du widget Panneaux à onglet, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneaux à onglets. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Panneaux à onglet dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Vous pouvez définir le style du texte d'un widget Panneaux à onglet en définissant des propriétés pour le conteneur entier du widget Panneaux à onglet, ou en définissant des propriétés distinctes pour chaque composant du widget. ❖ Pour modifier le style du texte d'un widget Panneaux à onglet, recherchez la règle CSS appropriée dans le tableau
Par défaut, le widget Panneaux à onglet se développe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneaux à onglet en définissant une propriété « width » pour le conteneur de l'accordéon. 1 Recherchez la règle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette règle définit les propriétés
Vous pouvez également trouver cette règle en sélectionnant le widget Panneaux à onglet puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2 Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.
A propos du widget Info-bulle Le widget Info-bulle Spry affiche des informations supplémentaires lorsqu'un utilisateur place le pointeur de la souris au-dessus d'un élément spécifique d'une page Web. Le contenu supplémentaire disparaît lorsque l'utilisateur cesse l'opération. Vous pouvez également configurer les info-bulles de manière à ce qu'elles restent ouvertes plus longtemps afin de permettre aux utilisateurs d'interagir avec le contenu qui s'y trouve. Le widget Info-bulle comprend les trois éléments suivants :
Lorsque vous insérez un widget Info-bulle, Dreamweaver crée un conteneur d'info-bulle à l'aide de balises div et entoure l'élément de « déclenchement » (l'élément de page permettant d'activer l'info-bulle) de balises span. Dreamweaver utilise ces balises par défaut. Toutefois, toutes les balises peuvent être utilisées avec l'infobulle et l'élément de déclenchement dans la mesure où elles se trouvent dans le corps de la page. Lorsque vous utilisez le widget Info-bulle, tenez compte des considérations suivantes :
• Les info-bulles restent affichées lorsque les utilisateurs placent le pointeur de la souris au-dessus de la zone de déclenchement.
Le widget Info-bulle nécessite très peu de code CSS. Spry utilise JavaScript pour afficher, masquer et positionner l'infobulle. Vous pouvez appliquer toute autre mise en page à l'info-bulle à l'aide des techniques CSS standard, selon les exigences de votre page. La seule règle contenue dans le fichier CSS par défaut est une solution aux problèmes Internet Explorer 6 consistant à faire apparaître l'info-bulle au-dessus des éléments de formulaires ou des objets Flash. Vous trouverez une explication plus détaillée du fonctionnement du widget Spry Infobulle, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytooltip_fr. Vous trouverez un didacticiel vidéo sur l'utilisation du widget Spry Infobulle à l'adresse www.adobe.com/go/lrvid4046_dw_fr.
❖ Choisissez Insertion > Spry > Infobulle Spry.
Cette action permet d'insérer un nouveau widget Info-bulle intégrant un conteneur dédié au contenu de l'info-bulle et une phrase d'espace réservé faisant office de déclencheur d'info-bulle. Vous pouvez également sélectionner un élément existant sur la page (par exemple, une image), puis insérer l'info-bulle. Lorsque vous effectuez cette opération, l'élément sélectionné fait office de déclencheur de la nouvelle info-bulle. L'élément sélectionné doit inclure une balise entière (par exemple, une balise img ou p) afin de permettre à Dreamweaver de lui attribuer un ID s'il n'en dispose pas déjà un.
Vous pouvez définir les options vous permettant de personnaliser le comportement du widget Info-bulle. 1 Amenez le pointeur de la souris ou placez le point d'insertion dans le contenu de l'info-bulle sur la page. 2 Cliquez sur l'onglet bleu du widget Info-bulle pour le sélectionner.
Déclencheur Elément de la page qui active l'info-bulle. Par défaut, Dreamweaver insère une phrase d'espace réservé,
Suivre la souris Lorsqu'elle est sélectionnée, cette option oblige l'info-bulle à suivre la souris lors du survol de l'élément de déclenchement. Masquer lors du retrait de la souris Lorsqu'elle est sélectionnée, cette option permet de garder l'info-bulle ouverte tant que la souris la survole (même si la souris quitte l'élément de déclenchement). Il est utile de laisser l'infobulle ouverte si elle contient des liens ou d'autres éléments interactifs. Si cette option n'est pas sélectionnée, l'élément de l'info-bulle se ferme lorsque la souris quitte la zone de déclenchement. Décalage horizontal Calcule la position horizontale de l'info-bulle par rapport à la souris. La valeur de décalage est
Décalage vertical Calcule la position verticale de l'info-bulle par rapport à la souris. La valeur de décalage est exprimée en pixels ; le décalage par défaut est de 20 pixels Afficher le délai Délai en millisecondes avant l'apparition de l'info-bulle lorsqu'elle se trouve dans l'élément de
Masquer le délai Délai en millisecondes avant la disparition de l'info-bulle lorsqu'elle a quitté l'élément de déclenchement. La valeur par défaut est 0. Effet Type d'effet que vous voulez utiliser lorsque l'info-bulle apparaît. Store simule l'effet d'un store qui monte et descend pour afficher et masquer l'info-bulle. Fondu fait apparaître et disparaître l'info-bulle en fondu. La valeur par défaut est aucun.
A propos du widget Validation de groupe de boutons radio Le widget Validation de groupe de boutons radio est un groupe de boutons radio intégrant la prise en charge de la validation de la sélection. Le widget applique la sélection d'un bouton radio dans le groupe. L'exemple suivant montre un widget Validation de groupe de boutons radio dans différents états.
Etat valide Lorsque l'utilisateur effectue une sélection, ce qui permet l'envoi du formulaire. Etat obligatoire Lorsque l'utilisateur n'a pas effectué une sélection obligatoire. Etat non valide Lorsque l'utilisateur sélectionne un bouton radio dont la valeur n'est pas acceptable.
Le code HTML par défaut du widget Validation de groupe de boutons radio, généralement dans un formulaire, contient une balise conteneur span qui entoure la balise input type="radio" du groupe de boutons radio. Le code HTML du widget Validation de groupe de boutons radio comprend également des balises script dans l'en-tête du document et après le code HTML du widget. Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de groupe de boutons radio, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryradio_fr.
Insertion du widget Validation de groupe de boutons radio 1 Choisissez Insertion > Spry > Validation de groupe de boutons radio Spry. 2 Dans la zone de texte Nom, entrez le nom du groupe de boutons radio. 3 Ajoutez ou retirez des boutons radio du groupe en cliquant sur les boutons Plus (+) ou Moins (-). 4 Dans la colonne Etiquette, cliquez sur le nom de chaque bouton radio pour rendre le champ modifiable, puis
5 Dans la colonne Valeur, cliquez sur chaque valeur pour rendre le champ modifiable, puis attribuez une valeur
6 (Facultatif) Cliquez sur un bouton radio ou sur sa valeur pour sélectionner une ligne spécifique, puis sur les flèches
7 Sélectionnez un type de mise en forme pour le groupe de boutons radio. Sauts de ligne Place chaque bouton radio sur une ligne séparée à l'aide de sauts de ligne (balises br). Tableau Place chaque bouton radio sur une ligne séparée à l'aide de lignes de tableau individuelles (balises tr).
1 Sélectionnez un widget Validation de groupe de boutons radio dans la fenêtre de document en cliquant sur son
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur effectue des sélections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
1 Sélectionnez un widget Validation de groupe de boutons radio dans la fenêtre de document en cliquant sur son
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Par défaut, les widgets Validation de groupe de boutons radio exigent que l'utilisateur effectue une sélection avant d'envoyer le formulaire. Vous pouvez toutefois stipuler que certaines sélections sont facultatives pour l'utilisateur. 1 Sélectionnez un widget Validation de groupe de boutons radio dans la fenêtre de document en cliquant sur son
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), désactivez l'option Obligatoire.
Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationRadio.css. Dreamweaver enregistre le fichier SpryValidationRadio.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de groupe de boutons radio Spry. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Validation de groupe de boutons radio dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
1 Ouvrez le fichier SpryValidationRadio.css. 2 Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d'arrière-plan de
SpryValidationRadio.css. 3 Apportez les modifications désirées à la règle CSS puis enregistrez le fichier.
Par défaut, les messages d'erreur du widget Validation de groupe de boutons radio s'affichent en rouge, entourés d'un bord plein de 1 pixel d'épaisseur. ❖ Pour modifier le style des messages d'erreur d'un widget Validation de groupe de boutons radio, recherchez la règle
Le widget Validation Spry de champ de texte est un champ de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre du texte. Par exemple, vous pouvez ajouter un widget Validation de zone de texte à un formulaire dans lequel le visiteur doit entrer son adresse électronique. S'il ne tape pas de symbole « @ » ni de point dans l'adresse, le widget affiche un message qui indique que les informations entrées ne sont pas valides. L'exemple suivant montre un widget Validation de zone de texte dans différents états :
Etat non valide Etat du widget si l'utilisateur a entré du texte dans un format non valide. Par exemple, 06 pour l'année
Etat obligatoire Etat du widget lorsque l'utilisateur n'a pas entré du texte obligatoire dans la zone de texte. Nombre minimal de caractères Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal
Nombre maximal de caractères Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal
Lorsqu'un widget Validation de zone de texte passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans un champ obligatoire, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationTextField.css. Le code HTML par défaut du widget Validation de zone de texte, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input> du champ de texte. Le code HTML du widget Validation de zone de texte comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget. Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de zone de texte, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextfield_fr.
Insertion du widget Validation de zone de texte 1 Choisissez Insertion > Spry > Validation Spry de champ de texte. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.
“Création de formulaires HTML accessibles” on page 705
Vous pouvez définir différents types de validation pour le widget Validation de zone de texte. Par exemple, vous pouvez définir un type de validation Carte de crédit si la zone de texte est destinée à contenir des numéros de carte de crédit. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), choisissez un type de validation dans le menu déroulant Type. 3 Le cas échéant, sélectionnez un format dans le menu déroulant Format.
(MasterCard, Visa, etc.). Le champ de texte n'accepte pas les espaces dans un numéro de carte de crédit (p.ex. 4321 3456 4567 4567).
La zone de texte accepte les numéros de téléphone mis en forme pour les Etats-Unis et le Canada, à savoir (000) 000-0000, ou les formats personnalisés. Si vous sélectionnez le format personnalisé, entrez ce format, par exemple 000.00(00), dans la zone Schéma.
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
Cette option n'est disponible que pour les types de validation Aucun, Nombre entier, Adresse électronique et URL. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
Cette option n'est disponible que pour les types de validation Nombre entier, Heure, Devise et Nombre réel/Notation scientifique. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Valeur min. ou Valeur max. Par
1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Par défaut, tous les widgets Validation de zone de texte que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois rendre la saisie de texte dans certaines zones facultative pour l'utilisateur. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos
Comme les zones de texte peuvent posséder de multiples formats, il peut être utile de donner aux utilisateurs un conseil relatif aux données qu'ils doivent entrer. Par exemple, une zone de texte possédant le type de validation Numéro de téléphone n'accepte que les numéros en format (000) 000-0000. Vous pouvez entrer cet exemple de numéro sous la forme d'un conseil, de manière à ce que la zone affiche le format correct lorsque l'utilisateur charge la page dans un navigateur. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.
Vous pouvez empêcher les utilisateurs d'entrer des caractères non valides dans un widget Validation de zone de texte. Par exemple, si vous activez cette option pour un widget possédant le type de validation Nombre entier, rien ne s'affiche dans le champ si l'utilisateur tente d'y taper une lettre. 1 Sélectionnez un widget Validation de zone de texte dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer modèle.
Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationTextField.css. Dreamweaver enregistre le fichier SpryValidationTextField.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de zone de texte. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Validation de zone de texte dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Par défaut, les messages d'erreur du widget Validation de zone de texte s'affichent en rouge, entourés d'un bord épais de 1 pixel. ❖ Pour modifier le style des messages d'erreur d'un widget Champ de texte de validation, recherchez la règle CSS
règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :
Le widget Validation Spry de zone de texte est une zone de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre quelques lignes de texte. Si la zone de texte est un champ obligatoire et que l'utilisateur n'y entre pas de texte, le widget affiche un message indiquant qu'une valeur est requise. L'exemple suivant montre un widget Zone de texte de validation dans différents états :
Nombre minimal de caractères Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal
Nombre maximal de caractères Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal
Lorsqu'un widget Zone de texte de validation passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans la zone de texte, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationTextArea.css. Le code HTML par défaut du widget Zone de texte de validation, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <textarea> de la zone de texte. Le code HTML du widget Zone de texte de validation comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget. Vous trouverez une explication plus détaillée du fonctionnement du widget Zone de texte de validation, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextarea_fr.
Insertion du widget Zone de texte de validation 1 Choisissez Insertion > Spry > Validation Spry de zone de texte. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.
“Création de formulaires HTML accessibles” on page 705
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option Valider si qui indique le moment où vous
Remplacer Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou Nbre
Vous pouvez ajouter un compteur de caractères qui indique à l'utilisateur combien de caractères il a tapé ou combien il lui reste de caractères lorsqu'il entre du texte dans la zone de texte. Par défaut, lorsque vous ajoutez un compteur de caractères, il s'affiche à l'extérieur du widget, près de son coin inférieur droit. 1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Nombre caract. ou Car. restants.
1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Par défaut, tous les widgets Zone de texte de validation que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois stipuler que certaines zones de texte sont facultatives pour la validation. 1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos
Vous pouvez ajouter un conseil pour une zone de texte (par exemple « Entrez votre description ici ») pour indiquer aux utilisateurs le type d'informations qu'ils doivent y entrer. La zone de texte affiche le conseil lorsque l'utilisateur charge la page dans un navigateur. 1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.
Vous pouvez empêcher les utilisateurs d'entrer davantage de caractères que le nombre maximal admis dans un widget Zone de texte de validation. Par exemple, si vous activez cette option pour un widget configuré de manière à ne pas accepter plus de 20 caractères, l'utilisateur ne pourra pas entrer plus de 20 caractères dans la zone de texte. 1 Sélectionnez un widget Zone de texte de validation dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Bloquer les caractères supplémentaires.
CSS du widget Zone de texte de validation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextarea_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site dès que vous créez un widget Zone de texte de validation. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Zone de texte de validation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Par défaut, les messages d'erreur du widget Zone de texte de validation s'affichent en rouge, entourés d'un bord épais de 1 pixel. ❖ Pour modifier le style des messages d'erreur d'un widget Zone de texte de validation, recherchez la règle CSS
règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut : Couleur d'arrière-plan à modifier
Un widget Validation de la sélection Spry est un menu déroulant qui affiche des états valides ou non valides lorsque l'utilisateur effectue une sélection. Par exemple, vous pouvez insérer un widget Validation de la sélection contenant une liste d'états, regroupés en différentes sections et séparés par des lignes horizontales. Si l'utilisateur sélectionne par erreur l'une des lignes de séparation au lieu d'un des états, le widget Validation de la sélection affiche un message pour indiquer que la sélection n'est pas valide. L'exemple suivant montre un widget Validation de la sélection développé, ainsi que la forme réduite de ce widget dans divers états :
Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur réinitialise le formulaire. Etat actif Etat du widget lorsque l'utilisateur clique dessus. Etat valide Etat du widget lorsque l'utilisateur a sélectionné un élément valide, ce qui permet l'envoi du formulaire. Etat non valide Etat du widget si l'utilisateur a sélectionné un élément non valide. Etat obligatoire Etat du widget si l'utilisateur n'a pas sélectionné d'élément valide.
SpryValidationSelect.css. Le code HTML par défaut du widget Validation de la sélection, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <select> de la zone de texte. Le code HTML du widget Validation de la sélection comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget. Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de la sélection, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryselect_fr.
1 Choisissez Insertion > Spry > Validation de sélection Spry. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK. 3 En mode Code, ajoutez des balises d'option contenant des éléments de menu et des valeurs. Dreamweaver ne s'en
Note: Vous pouvez également insérer un widget Validation de la sélection par l'intermédiaire de la catégorie Spry du panneau Insertion.
“Création de formulaires HTML accessibles” on page 705
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Validation de la sélection dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur effectue des sélections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
1 Sélectionnez un widget Validation de la sélection dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Par défaut, tous les widgets Validation de sélection que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur sélectionne des éléments de menu possédant une valeur associée lorsque le widget et publié sur une page Web. Vous pouvez toutefois désactiver cette option. 1 Sélectionnez un widget Validation de la sélection dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Ne pas autoriser Valeur vide, en
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de la sélection, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de la sélection de manière à créer un widget dont le style est adapté à vos besoins. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de la sélection. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Validation de la sélection dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
Par défaut, les messages d'erreur du widget Validation de la sélection s'affichent en rouge, entourés d'un bord épais de 1 pixel. ❖ Pour modifier le style des messages d'erreur d'un widget Validation de sélection, recherchez la règle CSS appropriée
Texte à mettre en forme
règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut : Couleur d'arrière-plan à modifier
Le widget Validation de case à cocher Spry est une case à cocher ou un groupe de cases à cocher, dans un formulaire HTML, qui affiche des états valides ou non valide lorsque l'utilisateur active ou n'active pas une case à cocher. Par exemple, vous pouvez ajouter un widget Validation de case à cocher à un formulaire dans lequel l'utilisateur doit effectuer trois sélections. Si l'utilisateur n'effectue pas ces trois sélections, le widget renvoie un message indiquant que le nombre minimal de sélections n'a pas été effectué. L'exemple suivant montre un widget Validation de case à cocher dans différents états :
Etat obligatoire Etat du widget si l'utilisateur n'a pas effectué une sélection obligatoire. Nombre minimal de sélections Etat du widget lorsque l'utilisateur a sélectionné moins de cases à cocher que le nombre
Nombre maximal de sélections Etat du widget lorsque l'utilisateur a sélectionné plus de cases à cocher que le nombre
Validation de case à cocher comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.
Insertion du widget Validation de case à cocher 1 Choisissez Insertion > Spry > Validation de case à cocher Spry. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.
“Création de formulaires HTML accessibles” on page 705
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des sélections ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Validation de case à cocher dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur effectue des sélections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
Par défaut, un widget Validation de case à cocher est obligatoire. Si vous insérez plusieurs cases à cocher sur la page, il est toutefois possible de spécifier une plage de sélections minimale et maximale. Par exemple, si la balise <span> d'un widget Validation de case à cocher contient six cases à cocher et si vous voulez que l'utilisateur en sélectionne au moins trois, vous pouvez définir une préférence de ce type pour le widget entier. 1 Sélectionnez un widget Validation de case à cocher dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer plage. 3 Entrez un nombre minimal ou maximal (voire les deux) de cases à cocher que l'utilisateur doit activer.
1 Sélectionnez un widget Validation de case à cocher dans la fenêtre de document. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
1 Ouvrez le fichier SpryValidationCheckbox.css.
2 Recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos
Texte à mettre en forme
Le widget Validation de mot de passe Spry est un champ de texte de mot de passe que vous pouvez utiliser pour appliquer les règles de mot de passe (par exemple, le nombre et le type de caractères). Le widget affiche des messages d'avertissement ou d'erreur en fonction des données saisies par l'utilisateur. Note: Vous devez vous être familiarisé avec les widgets de validation Spry avant de pouvoir utiliser le widget Mot de passe. S'ils ne vous sont pas familiers, consultez la rubrique “Utilisation du widget Validation de zone de texte Spry” on page 464 ou toute autre présentation du widget de validation avant de commencer. Cette présentation n'aborde pas tous les concepts du widget de validation de base. L'exemple suivant montre un widget Validation de mot de passe dans différents états :
Etat actif Lorsque l'utilisateur place le point d'insertion à l'intérieur du widget. Etat valide Lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire. Etat de résistance non valide Lorsque l'utilisateur entre du texte qui ne correspond pas aux critères de résistance du
Etat obligatoire Lorsque l'utilisateur n'a pas entré du texte obligatoire dans le champ de texte. Nombre minimal de caractères Lorsque l'utilisateur a entré moins de caractères que le nombre minimal requis pour le
Nombre maximal de caractères Lorsque l'utilisateur a entré plus de caractères que le nombre maximal admis pour le champ de texte de mot de passe.
Exemples de widget Validation de mot de passe
Insertion du widget Validation de mot de passe 1 Choisissez Insertion > Spry > Validation de mot de passe Spry. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.
“Création de formulaires HTML accessibles” on page 705
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos
1 Sélectionnez un widget Validation de mot de passe dans la fenêtre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Validation de mot de passe dans la fenêtre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur modifie du texte à l'intérieur du champ de texte de mot de passe. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
La résistance de mot de passe désigne le degré auquel les combinaisons de certains caractères remplissent les exigences d'un champ de texte de mot de passe. Par exemple, si vous avez créé un formulaire dans lequel les utilisateurs sélectionnent un mot de passe, vous pouvez les forcer à inclure un certain nombre de lettres majuscules dans le mot de passe, un certain nombre de caractères spéciaux, etc. Note: Par défaut, aucune des options disponibles n'est définie pour le widget Mot de passe. 1 Cliquez sur l'onglet bleu du widget Validation de mot de passe pour le sélectionner. 2 Définissez les options dans l'inspecteur Propriétés (Fenêtre > Propriétés) à votre convenance. Les nombres que vous
Nombre minimal/maximal de caractères Spécifie le nombre minimal et maximal de caractères requis pour que le mot
Nombre minimal/maximal de lettres Spécifie le nombre minimal et maximal de lettres (a, b, c, etc.) requis pour que le
Nombre minimal/maximal de nombres Spécifie le nombre minimal et maximal de nombres (1, 2, 3, etc.) requis pour
#, etc.) requis pour que le mot de passe soit valide. Si vous laissez l'une des options ci-dessus vides, le widget n'effectuera pas de validation par rapport à ce critère. Par exemple, si vous laissez l'option du nombre minimal/maximal de chiffres vide, le widget ne recherche pas les chiffres dans la chaîne du mot de passe.
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de mot de passe, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de mot de passe de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprypassword_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationPassword.css. Dreamweaver enregistre le fichier SpryValidationPassword.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de mot de passe Spry. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Validation de mot de passe dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
1 Ouvrez le fichier SpryValidationPassword.css. 2 Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d'arrière-plan de
SpryValidationPassword.css. 3 Apportez les modifications désirées au code CSS puis enregistrez le fichier.
Par défaut, les messages d'erreur du widget Validation de mot de passe s'affichent en rouge, entourés d'un bord plein de 1 pixel d'épaisseur. ❖ Pour modifier le style des messages d'erreur d'un widget Validation de mot de passe, recherchez la règle CSS
règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut. Couleur à modifier
Vous pouvez également utiliser un widget Validation de confirmation en combinaison avec un widget Validation de mot de passe afin de valider les adresses e-mail. Note: Vous devez vous être familiarisé avec les widgets de validation Spry avant de pouvoir utiliser le widget Confirmation. S'ils ne vous sont pas familiers, consultez la rubrique “Utilisation du widget Validation de zone de texte Spry” on page 464 ou toute autre présentation du widget de validation avant de commencer. Cette présentation n'aborde pas tous les concepts du widget de validation de base. L'illustration ci-dessous montre une configuration type d'un widget Confirmation :
(SpryValidationConfirm.css), en fonction des résultats de validation désirés. Un widget Validation de confirmation peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des données ou lorsqu'il tente d'envoyer le formulaire. Etat initial Lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur réinitialise le formulaire. Etat actif Lorsque l'utilisateur place le point d'insertion à l'intérieur du widget. Etat valide Lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire. Etat non valide Lorsqu'un utilisateur entre du texte qui ne correspond pas à celui entré dans une zone de texte
Etat obligatoire Lorsque l'utilisateur n'a pas entré du texte obligatoire dans le champ de texte.
Exemples de widget Validation de confirmation
Insertion du widget Validation de confirmation 1 Choisissez Insertion > Spry > Validation de confirmation Spry. 2 Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.
“Création de formulaires HTML accessibles” on page 705
2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos
1 Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le champ de texte à utiliser pour la validation dans
1 Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire. 1 Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez
Remplacer Validation lorsque l'utilisateur modifie du texte à l'intérieur du champ de texte de confirmation. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est activée par défaut et ne
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de confirmation, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de confirmation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryconfirm_custom_fr. Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationConfirm.css. Dreamweaver enregistre le fichier SpryValidationConfirm.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de confirmation Spry. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget. Même s'il est facile de modifier directement les règles du widget Validation de confirmation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
“Panneau Styles CSS en mode Actuel” on page 137
1 Ouvrez le fichier SpryValidationConfirm.css. 2 Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d'arrière-plan de
SpryValidationConfirm.css. 3 Apportez les modifications désirées au code CSS puis enregistrez le fichier.
❖ Pour modifier le style des messages d'erreur d'un widget Validation de confirmation, recherchez la règle CSS
Un ensemble de données Spry est essentiellement un objet JavaScript qui contient une collection de données que vous définissez. Dreamweaver vous permet de créer rapidement cet objet et d'y charger des données à partir d'une source de données (comme un fichier XML ou HTML). L'ensemble de données produit une plage de données, sous la forme d'un tableau standard composé de lignes et de colonnes. Lorsque vous créez un ensemble de données avec Dreamweaver, vous pouvez également définir comment afficher les données sur une page Web. L'on peut considérer un ensemble de données comme un conteneur virtuel dont la structure consiste en lignes et en colonnes. Il se présente sous la forme d'un objet JavaScript dont les informations ne sont visibles que lorsque vous stipulez précisément comment les afficher sur la page Web. Vous pouvez afficher toutes les données de ce conteneur, ou décider de n'afficher qu'une sélection parmi celles-ci. Vous trouverez toutes les informations relatives au fonctionnement des ensembles de données Spry à l'adresse www.adobe.com/go/learn_dw_sdg_sprydataset_fr. Vous trouverez un didacticiel vidéo sur l'utilisation des ensembles de données Spry, réalisé par l'équipe de Dreamweaver, à l'adresse www.adobe.com/go/dw10datasets_fr. Vous trouverez un didacticiel vidéo sur l'utilisation des ensembles de données Spry à l'adresse www.adobe.com/go/lrvid4047_dw_fr.
2 Choisissez Insertion > Spry > Ensemble de données Spry. 3 Dans la fenêtre Définir la source des données, effectuez les opérations suivantes :
• Donnez un nom au nouvel ensemble de données. Le nom par défaut est ds1 lors de la première création d'un ensemble de données. Le nom de l'ensemble de données peut contenir des lettres, des chiffres et des caractères de soulignement, mais il ne peut pas débuter par un chiffre.
à un fichier local de votre site (par exemple données/données_html.html), ou d'une URL absolue vers une page Web publiée (à l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accéder à un fichier local puis le sélectionner. Dreamweaver rend la source de données HTML dans la fenêtre Sélection de données et affiche des repères visuels pour les éléments susceptibles de servir de conteneurs à l'ensemble de données. L'élément que vous voulez utiliser doit déjà posséder un ID unique. Si ce n'est pas le cas, Dreamweaver affiche un message d'erreur, et vous devrez revenir à la source de données afin d'attribuer un ID unique. Par ailleurs, les éléments susceptibles d'être sélectionnés, dans le fichier source des données, ne peuvent pas se trouver dans des régions Spry ni contenir d'autres références de données. Alternativement, vous pouvez définir un flux de conception comme source de données. Pour plus d'informations, voir “Utilisation d'un flux de conception” on page 494.
Si votre fichier est de grande taille, vous pouvez cliquer sur la flèche Développer/Réduire dans le bas de la fenêtre Sélection de données afin d'afficher davantage de données. Lorsque vous avez sélectionné l'élément de données pour l'ensemble de données, Dreamweaver affiche un aperçu de l'ensemble dans la fenêtre Aperçu des données.
.boximage dans la zone Sélecteurs de colonnes, l'ensemble de données contiendra uniquement les lignes auxquelles la classe .product a été attribuée, et uniquement les colonnes possédant la classe .boximage. Si vous voulez entrer plusieurs sélecteurs dans une zone de texte précise, séparez chacun d'eux par une virgule. Pour plus d'informations, voir “A propos des sélecteurs de données Spry” on page 495.
Vous pouvez sélectionner une colonne dans l'ensemble de données en cliquant sur son titre, en la sélectionnant dans la liste déroulante Nom de colonne, ou en y accédant à l'aide des flèches vers la gauche et la droite situées dans le coin supérieur gauche de la fenêtre.
Note: Si vous avez sélectionné autre chose qu'un tableau comme élément conteneur de votre ensemble de données, cette option et la suivante ne sont pas disponibles. Dreamweaver utilise automatiquement column0, column1, column2, et ainsi de suite, comme nom des colonnes des ensembles de données non basés sur un tableau.
> Liaisons). 5 Dans la fenêtre Choisir les options d'insertion, effectuez l'une des opérations suivantes :
Liaisons (Fenêtre > Liaisons), et vous pouvez tirer manuellement des données sur la page à partir de l'ensemble de données. 6 Cliquez sur Terminé.
1 Si vous ne procédez qu'à la création d'un ensemble de données, il n'est pas nécessaire de vous intéresser au point
2 Choisissez Insertion > Spry > Ensemble de données Spry. 3 Dans la fenêtre Définir la source des données, effectuez les opérations suivantes :
• Donnez un nom au nouvel ensemble de données. Le nom par défaut est ds1 lors de la première création d'un ensemble de données. Le nom de l'ensemble de données peut contenir des lettres, des chiffres et des caractères de soulignement, mais il ne peut pas débuter par un chiffre.
à un fichier local de votre site (par exemple données/données.xml), ou d'une URL absolue vers une page sur le Web (à l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accéder à un fichier local puis le sélectionner. Dreamweaver rend la source de données XML dans la fenêtre Eléments de ligne et affiche l'arborescence XML des éléments de données pouvant être sélectionnés. Les éléments répétés sont indiqués par un signe plus (+), et les éléments enfants sont mis en retrait. Alternativement, vous pouvez définir un flux de conception comme source de données. Pour plus d'informations, voir “Utilisation d'un flux de conception” on page 494.
<menu_item>, avec plusieurs éléments enfants tels que <item>, <link>, <description>, etc.
XPath sur le site Web du W3C, à l'adresse www.w3.org/TR/xpath.
> Liaisons). 4 Dans la fenêtre Définir les options des données, effectuez les opérations suivantes :
Vous pouvez sélectionner une colonne dans l'ensemble de données en cliquant sur son titre, en la sélectionnant dans la liste déroulante Nom de colonne, ou en y accédant à l'aide des flèches vers la gauche et la droite situées dans le coin supérieur gauche de la fenêtre.
> Liaisons). 5 Dans la fenêtre Choisir les options d'insertion, effectuez l'une des opérations suivantes :
Liaisons (Fenêtre > Liaisons), et vous pouvez tirer manuellement des données sur la page à partir de l'ensemble de données. 6 Cliquez sur Terminé.
La fenêtre Choisir les options d'insertion permet de sélectionner diverses options d'affichage des valeurs de l'ensemble de données sur la page. Vous pouvez afficher les données à l'aide d'un tableau Spry dynamique, d'une disposition principale/détails, d'une disposition à conteneurs empilés (colonne unique) ou à conteneurs empilés avec zone focalisable (deux colonnes). Une vignette représentant l'apparence de chaque disposition s'affiche dans la fenêtre Choisir les options d'insertion. Tableau dynamique Activez cette option si vous voulez afficher vos données dans un tableau Spry dynamique. Les tableaux Spry permettent le tri dynamique des colonnes et d'autres comportements interactifs. Lorsque vous avez activé cette option, cliquez sur le bouton Configurer pour ouvrir la boîte de dialogue Insérer un tableau, puis procédez comme suit : 1 Dans le panneau Colonnes, ajustez les colonnes du tableau en procédant comme suit :
2 Pour autoriser le tri dans une colonne, sélectionnez-la dans le panneau Colonnes, puis activez l'option Trier la
Si vous voulez désactiver le tri dans une colonne, sélectionnez son nom dans le panneau Colonnes, puis désactivez l'option Trier la colonne en cas de clic sur l’en-tête. 3 Si des styles CSS sont associés à votre page, sous la forme d'une feuille de style jointe ou d'un ensemble de styles
Classe de ligne impaire Modifie l'apparence des lignes impaires dans le tableau dynamique en fonction du style de
Classe de ligne paire Modifie l'apparence des lignes paires dans le tableau dynamique en fonction du style de classe
Les règles doivent être précisément placées dans l'ordre indiqué ci-dessus (impaire, paire, survol, sélection). Si la règle de survol est placée sous la règle de sélection dans la feuille de style, l'effet de survol ne sera visible que lorsque l'utilisateur survolera une autre ligne. Si les règles de survol et de sélection figurent au-dessus des règles « impaire » et « paire » dans la feuille de style, les effets « impaire » et « paire » ne fonctionneront pas du tout. Vous pouvez tirer les règles dans le panneau CSS afin de les placer au bon endroit, ou manipuler directement le code CSS. 4 Si le tableau que vous créez doit devenir un tableau principal dynamique Spry, activez l'option Mettre à jour les
5 Cliquez sur OK pour fermer la boîte de dialogue, puis sur Terminer dans la fenêtre Choisir les options d'insertion.
Les références de données sont mises en surbrillance et entourées d'accolades ({}). Disposition Principale/Détails Activez cette option si vous voulez afficher vos données selon une disposition principale/détails. La disposition principale/détails permet à l'utilisateur de cliquer sur un élément dans la région principale (à gauche) de manière à actualiser les informations dans la région de détails (à droite). En règle générale, la région principale contient une longue liste de noms, par exemple une liste de produits disponibles. Lorsque l'utilisateur clique sur l'un des noms de produits, la région détaillée affiche des informations bien plus détaillées sur la sélection. Lorsque vous avez activé cette option, cliquez sur le bouton Configurer pour ouvrir la boîte de dialogue Insérer un bloc d'affichage principal/détaillé, puis procédez comme suit : 1 Dans le panneau Colonnes principales, ajustez le contenu de votre région principale en procédant comme suit :
Cliquez sur le signe plus (+) puis sélectionnez le nom d'une colonne pour l'ajouter à la région principale. Par défaut, Dreamweaver remplit la région principale des données de la première colonne de l'ensemble de données.
3 (Facultatif) Définissez différents types de conteneurs pour les données dans la région détaillée. Pour ce faire,
4 Cliquez sur OK pour fermer la boîte de dialogue, puis sur Terminer dans la fenêtre Choisir les options d'insertion.
Conteneurs empilés Activez cette option si vous voulez afficher vos données à l'aide d'une structure de conteneurs répétés sur la page. Par exemple, si l'ensemble de données contient quatre colonnes de données, chaque conteneur peut comprendre les quatre colonnes, et la structure de conteneur se répètera pour chaque ligne de l'ensemble de données. Lorsque vous avez activé cette option, cliquez sur le bouton Configurer pour ouvrir la boîte de dialogue Insérer des conteneurs empilés, puis procédez comme suit : 1 Dans le panneau Colonnes, ajustez le contenu de vos conteneurs empilés en procédant comme suit :
Cliquez sur le signe plus (+) puis sélectionnez le nom d'une colonne pour l'ajouter aux conteneurs. Par défaut, Dreamweaver remplit les conteneurs empilés des données de chaque colonne de l'ensemble de données.
2 (Facultatif) Définissez différents types de conteneurs pour les données dans les conteneurs empilés. Pour ce faire,
3 Cliquez sur OK pour fermer la boîte de dialogue, puis sur Terminer dans la fenêtre Choisir les options d'insertion.
Conteneurs empilés avec zone focalisable Activez cette option si vous voulez afficher les données à l'aide d'une structure de conteneurs répétés sur la page, avec une zone focalisable dans chaque conteneur. En règle générale, la zone focalisable contient une image. La disposition Zone focalisable est similaire à la disposition Conteneurs empilés, à ceci près que dans la disposition Zone focalisable, l'affichage des données est séparé en deux colonnes (dans le même conteneur). Lorsque vous avez activé cette option, cliquez sur le bouton Configurer pour ouvrir la boîte de dialogue Insérer une mise en forme de zone focalisable, puis procédez comme suit : 1 Dans le panneau Colonnes focalisables, ajustez le contenu de votre zone focalisable en procédant comme suit :
Cliquez sur le signe plus (+) puis sélectionnez le nom d'une colonne pour l'ajouter à la zone focalisable. Par défaut, Dreamweaver remplit la zone focalisable des données de la première colonne de l'ensemble de données.
3 Répétez la procédure ci-dessus pour le panneau Colonnes empilées. Par défaut, Dreamweaver remplit les colonnes
4 Cliquez sur OK pour fermer la boîte de dialogue, puis sur Terminer dans la fenêtre Choisir les options d'insertion.
Ne pas insérer de code HTML Activez cette option si vous voulez créer un ensemble de données, mais sans que Dreamweaver n'insère de disposition HTML pour celui-ci. L'ensemble de données est disponible dans le panneau Liaisons (Fenêtre > Liaisons), et vous pouvez tirer manuellement des éléments sur la page. Même si vous créez un ensemble de données sans insérer de disposition, vous pourrez insérer à tout moment l'une des dispositions HTML disponibles. Pour ce faire, double-cliquez sur le nom de l'ensemble de données dans le panneau Liaisons, cliquez jusqu'à ce que vous accédiez à la fenêtre Choisir les options d'insertion, sélectionnez une disposition puis cliquez sur Terminé. Note: Vous pouvez également tirer le nom de l'ensemble de données du panneau Liaisons jusqu'au point d'insertion sur la page. Lorsque vous procédez de la sorte, la fenêtre Choisir les options d'insertion s'affiche. Sélectionnez une disposition puis cliquez sur Terminé.
Lorsque vous avez créé un ensemble de données Spry, vous pouvez le modifier à tout moment. ❖ Dans le panneau Liaisons (Fenêtre > Liaisons), double-cliquez sur le nom de l'ensemble de données puis apportez-
Note: Lorsque vous modifiez un ensemble de données, si vous sélectionnez une nouvelle disposition dans la fenêtre Choisir les options d'insertion, Dreamweaver ne remplace pas la disposition existante sur la page, mais en insère une nouvelle.
Si vous travaillez sur des données en cours de développement, il peut être utile d'employer un flux de conception. Par exemple, si le développeur du serveur est en train de finaliser la base de données sous-jacente à votre fichier de données XML, vous pouvez utiliser une version de test du fichier afin de mettre au point votre page indépendamment du développement de la base de données. Si vous utilisez un flux de conception, Dreamweaver se borne à remplir l'environnement de travail à l'aide des données provenant de ce flux. Les références à la source de données qui se trouvent dans le code de page restent des références à la véritable source de données que vous voulez utiliser. 1 Commencez par créer un ensemble de données Spry (reportez-vous à la procédure précédente pour plus
2 Dans la fenêtre Définir la source des données, cliquez sur le lien Flux de conception. 3 Cliquez sur le bouton Parcourir pour rechercher le flux de conception, puis cliquez sur OK.
Pout que les zones des sélecteurs de données soient accessibles, vous devez activer l'option Sélection de données avancée de la fenêtre Définir la source des données. Si vous entrez des sélecteurs de données puis que vous désactivez cette option, Dreamweaver conserve ce que vous avez entré dans ces zones, mais il ne les utilise pas pour filtrer l'ensemble de données.
L'une des fonctions les plus courantes des ensembles de données Spry consiste à créer un ou plusieurs tableaux HTML qui mettent à jour, de manière dynamique, une autre page en réponse à une action de l'utilisateur. Par exemple, si un utilisateur sélectionne un produit dans une liste d'un tableau, l'ensemble de données peut immédiatement mettre à jour des données, ailleurs sur la page, à l'aide d'informations détaillées sur le produit sélectionné. Avec Spry, ces mises à jour n'exigent pas l'actualisation de la page. Ces régions de page distinctes sont baptisées « région principale » et « région détaillée ». En règle générale, une partie de la page (la région principale) affiche une liste d'éléments classés en catégories (par exemple une liste de produits) et une autre partie de la page (la région détaillée) affiche plus d'informations au sujet d'un enregistrement sélectionné. Chaque ensemble de données utilise la notion d'une « ligne actuelle » et, par défaut, cette ligne actuelle est la première de l'ensemble de données. Lorsqu'un utilisateur effectue une sélection dans une région principale (en partant toujours de l'exemple d'une liste de différents produits), Spry modifie en fait la ligne actuelle de l'ensemble de données. Comme la région détaillée dépend de la région principale, toute modification résultant de l'interaction de l'utilisateur avec la région principale (par exemple la sélection de différents produits) entraîne la modification des données affichées dans la région détaillée. Dreamweaver crée automatiquement des dispositions principale/détaillée, de façon à mettre en place toutes les associations entre région principale et région détaillée. Toutefois, si vous voulez créer un tableau principal dynamique, vous pouvez le préparer en vue d'une association ultérieure à une région détaillée. Lorsque vous activez l'option Mettre à jour les régions détaillées en cas de clic sur une ligne (dans la boîte de dialogue Insérer un tableau), Dreamweaver insère une balise spry:setrow à l'intérieur de la balise de la ligne répétée de votre tableau dynamique. Cet attribut prépare le tableau en tant que tableau principal capable de réinitialiser la ligne actuelle des données lorsque l'utilisateur interagit avec le tableau. Pour plus d'informations sur la création manuelle de régions principale/détaillée, voir le guide de développement Spry à l'adresse www.adobe.com/go/learn_dw_sdg_masterdetail_fr.
Le cadre applicatif Spry emploie deux types de régions. L'une est une région Spry qui entoure les objets de données, comme les tableaux et les listes répétées. L'autre est une région de détail Spry qui s'utilise en combinaison avec un objet de tableau principal afin de permettre la mise à jour dynamique de données sur une page Dreamweaver.
1 Choisissez Insertion > Spry > Région Spry.
2 Comme conteneur de l'objet, vous pouvez sélectionner l'option <div> ou l'option <span>. Le conteneur <div> est
3 Choisissez l'une des options suivantes :
• Pour créer une région de détail Spry, activez l'option Région Détail. Une région de détail ne s'emploie que si vous voulez lier des données dynamiques qui sont mises à jour lorsque les données d'une autre région Spry changent. Important: Vous devez insérer une région de détail dans une <div> différente de celle de la région de la table principale. Il peut être nécessaire de passer en mode Code pour placer précisément le point d'insertion. 4 Choisissez votre ensemble de données Spry dans le menu. 5 Si vous voulez créer ou modifier la région définie pour un objet, sélectionnez-le puis activez l'une des options
Renvoi à la ligne de la sélection Place une nouvelle région autour d'un objet. Remplacer la sélection Remplace une région existante pour un objet.
Spry, tel qu'un tableau ou une liste répétée, ou par des données dynamiques provenant du panneau Liaisons (Fenêtre > Liaisons).
8 Pour remplacer le texte d'espace réservé par des données dynamiques, utilisez l'une des méthodes suivantes :
• En mode Code, tapez directement le code d'un ou plusieurs éléments. Utilisez le format suivant : {nom-ensemblede-données::nom-élément}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un
{desc}. Quelle que soit la méthode utilisée pour définir le contenu de votre région, les lignes suivantes sont ajoutées à votre code HTML : <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div> 2 Comme conteneur de l'objet, vous pouvez sélectionner l'option <div> ou l'option <span>, en fonction du type de
3 Activez l'option Répéter (par défaut) ou Répéter les enfants.
4 Choisissez votre ensemble de données Spry dans le menu. 5 Si vous avez déjà sélectionné du texte ou des éléments, vous pouvez les entourer ou les remplacer. 6 Cliquez sur OK pour afficher une région répétée sur votre page.
7 Lorsque vous cliquez sur OK, Dreamweaver insère un espace réservé de région sur votre page, avec le texte « Placez
Spry, tel qu'un tableau ou une liste répétée, ou par des données dynamiques provenant du panneau Liaisons (Fenêtre > Liaisons).
8 Pour remplacer le texte d'espace réservé par un objet de données Spry, cliquez sur le bouton de l'objet de données
9 Pour remplacer le texte d'espace réservé par une ou plusieurs données dynamiques, utilisez l'une des méthodes
• Colonne de valeurs : Il s'agit de la valeur envoyée au serveur d'arrière-plan.
5 Cliquez sur OK pour afficher une liste de répétition sur votre page. En mode Code, vous pouvez voir que des balises
Note: Si vous tentez d'insérer une liste de répétition sans avoir créé de région, Dreamweaver vous invite à en ajouter une avant d'insérer le tableau. Tous les objets de données Spry doivent se trouver à l'intérieur de régions.
Présentation des effets Spry Les effets Spry sont des améliorations visuelles que vous pouvez appliquer à pratiquement n'importe quel élément d'une page HTML à l'aide de JavaScript. Les effets sont souvent utilisés pour surligner des informations, créer des transitions animées ou modifier visuellement un élément de page pendant un certain délai. Vous pouvez appliquer des effets aux éléments HTML sans devoir employer de balises personnalisées supplémentaires. Note: Pour appliquer un effet à un élément, il doit être sélectionné ou posséder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas sélectionnée, elle doit posséder une valeur ID valide. Si ce n'est pas encore le cas, vous devez en ajouter un au code HTML. Les effets peuvent modifier les propriétés d'opacité, d'échelle, de position et de style d'un élément, comme sa couleur d'arrière-plan. Vous pouvez créer d'intéressants effets visuels en combinant plusieurs propriétés. Ces effets sont basés sur Spry. Dès lors, lorsqu'un utilisateur clique sur un élément possédant un effet, seul l'élément est mis à jour de manière dynamique. La page HTML n'est pas entièrement actualisée. Spry comporte les effets suivants : Apparition/Fondu Fait apparaître ou disparaître lentement un élément. Surligner Modifie la couleur d'arrière-plan d'un élément. Volet Simule l'effet d'un store qui monte ou descend pour afficher ou masquer l'élément. Faire coulisser l’objet 3D Fait monter ou descendre l'élément. Agrandissement/Réduction Augmente ou diminue la taille de l'élément. Secouer Donne l'impression que l'élément est secoué de gauche à droite. Ecraser Fait disparaître l'élément dans le coin supérieur gauche de la page.
Vous trouverez la liste détaillée des effets Spry disponibles dans le cadre applicatif Spry à l'adresse www.adobe.com/go/learn_dw_spryeffects_fr.
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
4 Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l'effet se produise. 5 Sélectionnez l'effet à appliquer : Fondu ou Apparition. 6 Dans la zone Début du fondu, définissez le pourcentage d'opacité que l'effet doit posséder lorsqu'il apparaît. 7 Dans la zone Fin du fondu, définissez le pourcentage d'opacité à atteindre. 8 Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en apparaissant lentement puis en disparaissant
Note: Cet effet ne peut être utilisé que sur les éléments HTML suivants : address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu ou pre. 1 (Facultatif) Sélectionnez le contenu ou l'élément de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
4 Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l'effet se produise. 5 Sélectionnez l'effet à appliquer : Store monté ou Store baissé. 6 Dans la zone Store monté depuis/Store baissé depuis, définissez le point de départ du déroulement du store, sous
7 Dans la zone Store monté jusqu'à/Store baissé jusqu'à, définissez le point final du déroulement du store, sous la
8 Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en remontant puis en redescendant à chaque
> Agrandissement/Réduction dans le menu. 3 Sélectionnez l'ID de l'élément dans le menu contextuel de l'élément cible. Si vous avez déjà sélectionné un élément,
7 Dans la zone Fin agrandissement/Fin réduction, définissez la taille de l'élément à la fin de l'effet. Il s'agit d'un
8 Si vous choisissez les pixels pour l'une des zones Début ou Fin agrandissement/réduction, la zone largeur/hauteur
9 Indiquez si vous voulez que l'élément soit agrandi ou réduit vers le coin supérieur gauche de la page ou le centre de
10 Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en étant agrandi puis réduit à chaque clic de
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
4 Dans la zone Durée de l’effet, définissez le délai (en millisecondes) pendant lequel l'effet doit durer. 5 Sélectionnez la couleur de début du surlignage. 6 Sélectionnez la couleur de fin du surlignage. Cette couleur ne dure que pendant le délai défini dans la zone Durée
7 Sélectionnez la couleur de l'élément à la fin du surlignage. 8 Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en recevant successivement les différentes
Note: Cet effet peut être utilisé avec les éléments HTML suivants : address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre ou table. 1 (Facultatif) Sélectionnez le contenu ou l'élément de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
3 Sélectionnez l'ID du conteneur dans le menu de l'élément cible. Si le conteneur est déjà sélectionné, choisissez
4 Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l'effet se produise. 5 Sélectionnez l'effet à appliquer : Glisser vers le haut ou Glisser vers le bas. 6 Dans la zone Glisser vers le haut depuis, définissez le point de départ du coulissement, sous la forme d'un
7 Dans la zone Glisser vers le haut jusqu'à, définissez le point final du coulissement, sous la forme d'un pourcentage
8 Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en coulissant vers le haut puis vers le bas à
Note: Cet effet ne peut être utilisé qu'avec les éléments HTML suivants : address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu ou pre. 1 (Facultatif) Sélectionnez le contenu ou l'élément de mise en forme auquel vous voulez appliquer l'effet. 2 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
3 Sélectionnez l'ID de l'élément dans le menu de l'élément cible. Si vous avez déjà sélectionné un élément, choisissez
Par exemple, la requête multimédia suivante spécifie le fichier phone.css pour les appareils faisant de 300 à 320 pixels de large. <link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Pour plus d'informations sur les requêtes multimédias sur le site du W3C, consultez la page www.w3.org/TR/css3mediaqueries/.
Dans Dreamweaver, vous pouvez créer un fichier de requête multimédia à l'échelle du site ou une requête multimédia spécifique au document. Fichier de requête multimédia à l'échelle du site Spécifie les paramètres d'affichage de toutes les pages de votre site qui
Le fichier de requête multimédia à l'échelle du site fait office de dépôt central pour toutes les requêtes multimédias dans votre site. Après avoir créé ce fichier, créez un lien vers celui-ci à partir des pages de votre site qui doivent utiliser les requêtes multimédias du fichier pour leur affichage. Requête multimédia spécifique au document La requête multimédia est insérée directement dans le document et la
1 Créez une page Web. 2 Choisissez Modifier > Requêtes multimédias. 3 Effectuez l'une des opérations suivantes :
4 Pour une requête multimédia à l'échelle du site, procédez comme suit : a Cliquez sur Spécifier. b Sélectionnez Créer un nouveau fichier. c Indiquez le nom du fichier et cliquez sur OK.
Le code suivant est inséré dans votre fichier lorsque vous sélectionnez cette option. <meta name="viewport" content="width=device-width">
Description La description de l'appareil pour lequel le fichier CSS doit être utilisé. Par exemple, téléphone,
Largeur min et Largeur max Le fichier CSS est utilisé pour les appareils dont la largeur communiquée figure dans
Note: Laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spécifier une plage explicite pour un appareil. Par exemple, il est courant de laisser Largeur min vide si vous travaillez pour des téléphones, qui font 320px de large ou moins. Fichier CSS Sélectionnez l'option Utiliser fichier existant et localisez le fichier CSS pour l'appareil.
Entrez le nom du fichier CSS. Le fichier est créé lorsque vous cliquez sur le bouton OK. 8 Cliquez sur OK. 9 Pour une requête multimédia à l'échelle du site, un nouveau fichier est créé. Enregistrez-le.
Exemple de lien de requête multimédia où mediaquery_adobedotcom.css est le fichier de requête multimédia à l'échelle du site pour le site www.adobe.com : <link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
1 Créez une page ou ouvrez une page existante. 5 Choisissez l'option Utiliser fichier existant si vous avez déjà créé un fichier CSS avec la requête multimédia. 6 Cliquez sur l'icône Parcourir pour atteindre le fichier et le spécifier. Cliquez sur OK. 7 Choisissez Fichier de requêtes multimédias à l'échelle du site. 8 Pour forcer les périphériques à communiquer leur largeur réelle, assurez-vous que l'option Forcer les périphériques
<meta name="viewport" content="width=device-width">
1 Choisissez Site > Gérer les sites. 2 Dans la boîte de dialogue Gérer les sites, sélectionnez votre site. 3 Cliquez sur Edition. La boîte de dialogue Configuration du site s'affiche. 4 Sous Paramètres avancés dans le panneau de gauche, sélectionnez Infos locales. 5 Dans la section Fichier de requêtes multimédias à l'échelle du site du panneau de droite, cliquez sur Parcourir pour
Note: Le changement de fichier de requêtes multimédias à l'échelle du site n'a aucune incidence sur les documents liés à un fichier de requêtes multimédias à l'échelle du site différent ou précédent. 6 Cliquez sur Enregistrer.
Les dimensions spécifiées dans une requête multimédia apparaissent dans les options Taille de bouton/fenêtre écrans multiples. Lorsque vous sélectionnez une dimension dans le menu, les changements suivants peuvent être observés :
Sur les appareils mobiles les plus perfectionnés, l'orientation d'une page change en fonction de la façon dont l'appareil est tenu. Lorsque l'utilisateur tient le téléphone verticalement, l'affichage emploie l'orientation portrait. Lorsque l'utilisateur fait pivoter l'appareil à l'horizontale, la page s'adapte automatiquement à l'orientation paysage. Dans Dreamweaver, l'option d'affichage une page en orientation Portrait ou Paysage est disponible dans les modes Affichage en direct et Création. Ces options vous permettent de tester la manière dont votre page s'adapte à ces paramètres. Ensuite, vous pouvez, si nécessaire, modifier votre fichier CSS, de sorte que la page s'affiche comme prévu dans ces deux orientations. ❖ Sélectionnez Affichage > Taille de fenêtre > Orientation paysage ou Orientation Portrait.
(CS5.5) Note: Pour identifier l'emplacement des fichiers liés, consultez les balises <link> et <script src> dans en mode Code. 2. Insertion de composants jQuery Mobile à partir du panneau Insertion
CDN Un CDN (réseau de diffusion de contenu) est un réseau informatique contenant des copies de données placées à différents endroits du réseau. Lors de la création d'une application Web en utilisant l'URL d'un CDN, les fichiers CSS et JavaScript spécifiés dans l'URL sont utilisés pour l'application. Par défaut, Dreamweaver utilise le CDN jQuery Mobile. Vous pouvez également utiliser les URL de CDN d'autres sites tels que Microsoft et Google. En mode Code, modifiez l'emplacement de serveur des fichiers CSS et JavaScript spécifiés dans les balises <link> et <script src>. Les fichiers téléchargés à partir d'un CDN sont en lecture seule.
Fichiers jQuery Mobile locaux Lorsque vous installez Dreamweaver, les fichiers jQuery Mobile sont copiés sur votre ordinateur. La page HTML qui s'ouvre lorsque vous choisissez la page de démarrage jQuery Mobile (local) est liée aux fichiers CSS, JavaScript et d'image locaux. un CDN. jQuery Mobile (local) Utilisez cette page de démarrage si vous envisagez d'héberger les actifs vous-même, ou si
application mobile, accède à des fonctionnalités natives sur les appareils mobiles. Pour plus d'informations, voir “Assemblage d'applications Web” on page 509.
1 Sélectionnez Fichier > Nouveau. 2 Sélectionnez l'une des options suivantes en fonction de vos besoins :
Utilisez les options du menu Aperçu sur écrans multiples pour voir comment la conception s'affiche sur des appareils de dimensions diverses. Désactivez l'affichage en direct et passez en mode Création. 4 Dans le panneau Insertion (Fenêtre > Insérer), sélectionnez jQuery Mobile. Les composants que vous pouvez
5 En mode Création, placez le curseur à l'endroit où vous voulez insérer le composant, puis cliquez sur le composant
6 (jQuery Mobile - local) Après l'enregistrement du fichier HTML, les fichiers jQuery Mobile, y compris les fichiers
Affichez un aperçu de la page en mode En direct. Certaines des classes CSS ne sont appliquées qu'en mode En direct.
Mobile s'affichent dans le panneau. 4 Dans le panneau Insertion, faites glisser le composant Page dans le mode Création. 5 Dans la boîte de dialogue Fichiers jQuery Mobile, sélectionnez l'une des options suivantes : Distant (CDN) Si vous souhaitez vous connecter à un serveur CDN distant qui héberge les fichiers jQuery Mobile. Utilisez l'option par défaut pour le site jQuery si vous n'avez pas configuré de site contenant les fichiers jQuery Mobile. Vous pouvez également choisir d'utiliser d'autres serveurs CDN.
6 Entrez les propriétés du composant Page. 7 En mode Création, placez le curseur à l'endroit où vous voulez insérer le composant, puis cliquez sur le composant
Affichez un aperçu de la page en mode En direct. Certaines des classes CSS ne sont appliquées qu'en mode En direct. Utilisation de fichiers et dossiers personnalisés Vous pouvez choisir de créer des fichiers CSS et JS personnalisés pour votre application. Assurez-vous que vos fichiers sont nommés jquery.mobile.js, jquery.mobile.css et jquery.js Si vous utilisez des dossiers personnalisés, procédez comme suit : 1 Téléchargez la version non compressée de la bibliothèque principale jQuery 1.5 depuis l'adresse
2 Enregistrez le fichier dans le dossier essentiel contenant les autres ressources.
Dreamweaver. Pour plus d'informations sur l'envoi d'applications aux magasins en ligne Apple et Android, consultez la documentation d'Android ou le guide d'utilisateur du programme sur le portail Apple iOS Provisioning Portal. (Avant de pouvoir accéder au portail Apple iOS Provisioning Portal, vous devez vous inscrire aux programmes Apple Developer Program [gratuit] et iOS Developer Program [redevance annuelle] .)
Mobile. Le fichier phonegap.js contient les API requises pour travailler avec les fonctionnalités mobiles natives telles que GPS, accéléromètre, appareil photo, etc. 1 Sélectionnez Fichier > Nouveau. 2 Choisissez Exemple de page > Démarrage mobile > jQuery Mobile (PhoneGap). 3 Cliquez sur Créer. 4 Dans le panneau Insertion (Fenêtre > Insérer), sélectionnez jQuery Mobile. Les composants que vous pouvez
5 En mode Création, placez le curseur à l'endroit où vous voulez insérer le composant, puis cliquez sur le composant
Note: Pour modifier le fichier PhoneGap.js, vous devez configurer le cadre applicatif et les paramètres de l'application. Pour plus d'informations, consultez les rubriques sur la création de packages d'applications. Affichez un aperçu de la page en mode En direct. Certaines des classes CSS ne sont appliquées que dans le mode En direct.
Vous devez veillez r ce que votre configuration système soit la suivante avant de pouvoir assembler une application. Mac OS - iOS • Mac OS X Snow Leopard version 10.6 .x ou ultérieure
1 Ouvrez l'application Web que vous voulez convertir en application mobile. Assurez-vous que votre application
Note: Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2 Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3 Cliquez sur Easy Install pour installer le SDK Android.
4 Choisissez l'endroit où vous voulez installer les fichiers du SDK, puis cliquez sur Sélectionner. Une fois l'installation
5 Choisissez Site > Applications mobiles > Paramètres de l'application. 6 Dans la zone Bundle ID, entrez le nom du package à l'aide des informations de la boîte de dialogue. 7 Donnez un nom à l'application et indiquez le nom de la personne qui l'a conçue. 8 Spécifiez éventuellement les éléments suivants : a Dans PNG de l'icône de l'application, spécifiez un fichier PNG à utiliser comme l'icône de l'application.
Note: Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copié dans la racine du site. 9
Note: Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2 Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3 Installez le kit de développement pour iOS ou Android en fonction de vos besoins :
Connectez-vous au Dev Center l'aide de votre ID Apple. L'inscription est gratuite. Créez un compte si vous n'êtes pas enregistré.
5 Choisissez Site > Applications mobiles > Paramètres de l'application. 6 Dans la zone Bundle ID, entrez le nom du package à l'aide des informations de la boîte de dialogue. 7 Donnez un nom à l'application et indiquez le nom de la personne qui l'a conçue. 8 Si vous le souhaitez, procédez comme suit :
• Définissez un chemin cible différent pour le package. Note: Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copié dans la racine du site. 9
Pour ouvrir le panneau Aperçu sur écrans multiples, choisissez Fichier > Aperçu sur écrans multiples. L'aperçu sur écrans multiples pren en charge les types d'écrans suivants :
• Tablette (taille par défaut de l'écran : 768x300 pixels) • Ordinateur de bureau (largeur d'écran par défaut : 1126 pixels) Note: Si vous connaissez les dimensions de tout autre périphérique que vous souhaitez cibler, vous pouvez définir différents styles pour divers périphériques. Vous pouvez par exemple créer une taille d'écran de 480x272 pixels pour une PSP de Sony.
1 Choisissez Fichier > Aperçu sur écrans multiples pour ouvrir le panneau Aperçu sur écrans multiples. 2 Dans le panneau Ecrans multiples, cliquez sur Tailles de la fenêtre d'affichage. 3 Définissez les tailles de la fenêtre d'affichage et cliquez sur OK. Définissez par exemple une largeur de 480 et une
4 (Optionnel) Rétablissez les paramètres par défaut en cliquant sur Valeurs par défaut.
Voir “Création de requêtes multimédias (CS5.5 et versions ultérieures)” on page 504
Le panneau Aperçu sur écrans multiples ne se synchronise pas automatiquement avec les modes Création et En direct. Si vous effectuez des modifications dans l'un de ces modes, cliquez sur le bouton Actualiser dans le panneau Aperçu sur écrans multiples. Note: Si vous naviguez en dehors du fichier d'origine en mode En direct, le panneau Aperçu sur écrans multiples n'affiche pas le fichier vers lequel vous avez navigué, même si vous cliquez sur le bouton Actualiser.
Les services en ligne Adobe sont des applications Web hébergées qui s’utilisent comme des outils de bureau traditionnels. Néanmoins, le principal avantage des services en ligne est qu’ils sont toujours actualisés, car ils sont hébergés sur le Web et non sur votre ordinateur. Dreamweaver s'intègre directement à Adobe® BrowserLab et à Adobe® Business Catalyst InContext Editing. Vous trouverez des informations sur l'utilisation de ces services dans les sections Aide qui suivent. Dreamweaver s'intègre également aux services en ligne Adobe® CS Live (qui comprennent BrowserLab). Pour plus d’informations sur l’utilisation de CS Live, voir Utilisation d’Adobe CS Live. Pour plus d’informations sur la gestion des services en ligne Adobe, voir le site Web d’Adobe à l’adresse suivante : www.adobe.com/go/learn_creativeservices_fr.
Adobe BrowserLab permet de consulter un aperçu du contenu Web local depuis Dreamweaver, sans devoir au préalable le publier sur un serveur accessible publiquement. Vous pouvez consulter un aperçu des fichiers depuis votre site Dreamweaver local ou depuis un serveur distant ou d'évaluation. Pour plus d'informations sur l'utilisation du service en ligne BrowserLab, ainsi que des renseignements sur l'utilisation de BrowserLab avec Dreamweaver, consultez www.adobe.com/go/lr_abl_fr.
Business Catalyst InContext Editing Adobe Business Catalyst InContext Editing est un composant d'édition d'Adobe Business Catalyst qui permet aux utilisateurs d'apporter des modifications de contenu simples dans un navigateur Web. Pour modifier une page Web, il suffit à l'utilisateur d'accéder à celle-ci, de se connecter au InContext Editing et d'apporter les modifications désirées. Les options d'édition sont simples et élégantes; leur utilisation n'exige aucune connaissance préalable du code HTML ou de l'édition Web. Avant d'autoriser des utilisateurs à apporter des modifications en direct sur le Web, toutefois, vous allez utiliser Dreamweaver pour rendre vos pages HTML modifiables. Pour ce faire, définissez des régions, sur la page, dont vous autoriserez la modification par les utilisateurs. Par exemple, supposons que vous ayez défini une page d'actualité reprenant des titres et des notices qui annoncent les articles. Vous pouvez sélectionner ce contenu et le transformer en région modifiable InContext Editing, de sorte que quand un utilisateur se connecte au InContext Editing, il puisse modifier directement les titres et les notices dans son navigateur.
Pour plus d'informations sur Adobe Business Catalyst, visitez le site www.businesscatalyst.com. Note: Adobe AIR n'est pas compatible avec Adobe Business Catalyst InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une application contenant des régions InContext Editing, la fonctionnalité InContext Editing ne fonctionnera pas.
Une région modifiable InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:editable. La région modifiable définit une zone de la page qu'un utilisateur peut modifier directement dans un navigateur. Note: Si vous ajoutez une région modifiable InContext Editing à une page basée sur un modèle Dreamweaver, la nouvelle région modifiable InContext Editing doit se trouver à l'intérieur d'une région qui est déjà modifiable. 1 Effectuez l'une des opérations suivantes :
• Placez le point d'insertion où vous voulez insérer une nouvelle région modifiable sur la page. • Sélectionnez précisément une région modifiable dans un modèle Dreamweaver (fichier DWT). • Sélectionnez tout autre contenu de la page que vous voulez rendre modifiable (par exemple un bloc de texte). 2 Choisissez Insertion > InContext Editing > Créer une région modifiable. 3 Les options à votre disposition varient en fonction de votre sélection.
• Choisissez Insérer une nouvelle région modifiable au point d'insertion actuel, puis cliquez sur OK. Dreamweaver insère une balise div dans votre code, en ajoutant l'attribut ice:editable à la balise d'ouverture.
Note: Cette seconde option n'est disponible que lorsque le nœud parent répond précisément aux critères de transformation. Par exemple, il doit s'agit d'une des balises transformables indiquées, et elle ne doit pas être confrontée à l'une des erreurs répertoriées dans la section “Messages d'erreur d'InContext Editing” on page 519.
Note: L'ajout de balises div aux pages peut modifier le rendu de ces pages et les effets des règles CSS. Par exemple, si une règle CSS applique un cadre rouge autour des balises div, vous verrez un cadre rouge autour de votre sélection actuelle lorsque Dreamweaver l'entoure d'une balise div et la transforme. Pour éviter ce type de conflit, vous pouvez réécrire les règles CSS qui influent sur la sélection actuelle, ou annuler la transformation (Edition > Annuler), puis sélectionner et transformer une balise compatible que Dreamweaver ne doit pas entourer d'une balise div.
4 En mode Création, cliquez sur l'onglet bleu de la région modifiable afin de la sélectionner, si ce n'est pas déjà fait.
(la région conteneur), et pas la région modifiable du modèle Dreamweaver. 5 Activez ou désactivez des options dans l'inspecteur Propriétés Région modifiable. Ces options seront accessibles
6 Enregistrez la page.
Une région répétée InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:repeating. La région répétée définit une zone de la page qu'un utilisateur peut « répéter » et à laquelle il peut ajouter du contenu lorsqu'il la modifie dans un navigateur. Par exemple, si vous avez défini un titre suivi d'un paragraphe, vous pouvez transformer ces éléments en une région répétée, que l'utilisateur pourra ensuite dupliquer sur la page.
Si vous travaillez sur une page contenant déjà un groupe de régions répétées et que vous tentez d'ajouter une région répétée juste après le groupe existant, Dreamweaver détecte qu'un groupe de régions répétées précède la région que vous voulez ajouter, et vous donne la possibilité d'ajouter la nouvelle région au groupe existant. Vous pouvez décider d'ajouter la nouvelle région répétée au groupe existant ou de créer un nouveau groupe de régions répétées. Note: Si vous ajoutez une région répétée InContext Editing à une page basée sur un modèle Dreamweaver, la nouvelle région répétée InContext Editing doit se trouver à l'intérieur d'une région qui est déjà modifiable. Pour créer une région répétée dans Dreamweaver, procédez comme suit : 1 Effectuez l'une des opérations suivantes :
: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, ou encore var. • Sélectionnez tout autre contenu de la page que vous voulez rendre répétée (par exemple un bloc de texte). 2 Choisissez Insertion > InContext Editing > Créer une région répétée. 3 Les options à votre disposition varient en fonction de votre sélection.
• Choisissez Insérer une nouvelle région répétée au point d'insertion actuel puis cliquez sur OK. • Choisissez Transformer la balise parente en région répétée si vous voulez que Dreamweaver fasse de la balise parente de la sélection le conteneur de la région. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var. Note: Cette seconde option n'est disponible que lorsque le nœud parent répond précisément aux critères de transformation. Par exemple, il doit s'agit d'une des balises transformables indiquées, et elle ne doit pas être confrontée à l'une des erreurs répertoriées dans la section “Messages d'erreur d'InContext Editing” on page 519.
Créer une région répétée. Dreamweaver entoure la région répétée du modèle d'une balise div qui fait office de conteneur pour la nouvelle région répétée InContext Editing.
• Choisissez Entourer la sélection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre sélection d'une balise div puis la transformer en région répétée. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la région répétée.
: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var. 4 En mode Création, cliquez sur l'onglet bleu de la région répétée afin de la sélectionner, si ce n'est pas déjà fait. Notez
5 Activez ou désactivez des options dans l'inspecteur Propriétés Groupe de régions répétées. Deux options sont
6 Enregistrez la page.
2 Dans l'inspecteur Propriétés de la région, cliquez sur le bouton Supprimer la région.
La fonctionnalité Gestion des classes CSS disponibles d'InContext Editing est obsolète depuis Dreamweaver CS5.
Impossible d'appliquer InContext Editing aux balises contenant des balises de script ou des blocs de code côté serveur. Si votre sélection contient du code côté serveur, Dreamweaver ne vous autorise pas à la transformer en région modifiable ou répétée. Ce problème est lié à la manière dont InContext Editing enregistre les pages modifiables lorsque l'utilisateur travaille dans le navigateur. Lorsqu'un utilisateur enregistre la page après l'avoir modifiée, InContext Editing supprime le code côté serveur de la région. La sélection actuelle ne peut pas être transformée ou entourée d'une balise DIV, car le nœud parent n'autorise pas DIV comme balise enfant. Lorsqu'il est impossible de transformer directement la sélection que vous voulez transformer sur votre page, Dreamweaver doit entourer cette sélection de balises div qui feront office de conteneur pour votre nouvelle région modifiable ou répétée. C'est la raison pour laquelle les balises parentes de ce que vous voulez transformer doivent accepter les balises div comme enfants. Si la balise parente de la balise que vous tentez de transformer n'accepte pas les balises div enfants, Dreamweaver ne vous autorise pas à exécuter la transformation. La sélection actuelle contient déjà une région modifiable ou se trouve à l'intérieur d'une telle région. Les régions modifiables imbriquées ne sont pas autorisées. Si votre sélection se trouve dans une région modifiable, ou si une région modifiable se trouve à l'intérieur de la sélection, Dreamweaver ne vous autorise pas à exécuter la transformation. InContext Editing ne prend pas en charge les régions modifiables imbriquées. Les régions modifiables ne doivent pas contenir de régions répétées ou de groupes de régions répétées. Les régions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalités InContext Editing. Si vous tentez d'ajouter une région répétée ou un groupe de régions répétées à une région modifiable, Dreamweaver ne vous autorise pas à exécuter la transformation.
La sélection actuelle contient déjà une région répétée ou se trouve à l'intérieur d'une telle région. Les régions répétées imbriquées ne sont pas autorisées. Si votre sélection se trouve dans une région répétée, ou si une région répétée se trouve à l'intérieur de la sélection, Dreamweaver ne vous autorise pas à exécuter la transformation. InContext Editing ne prend pas en charge les régions répétées imbriquées. La sélection doit contenir précisément une région modifiable/répétée de modèle Dreamweaver ou se trouver dans n'importe quelle région modifiable/répétée de modèle Dreamweaver. Lorsque vous travaillez avec des fichiers de modèle Dreamweaver (fichiers .dwt), vous devez respecter certaines règles. Pour transformer une région modifiable/répétée d'un modèle en une région modifiable/répétée InContext Editing, vous devez sélectionner précisément une région modifiable/répétée Dreamweaver sur la page puis la transformer. Pour transformer une autre sélection sur la page (par exemple un bloc de texte), la sélection doit se trouver à l'intérieur d'une région modifiable de modèle Dreamweaver. Les fonctionnalités Région modifiable et Région répétée ne peuvent être appliquées simultanément qu'aux balises DIV. Si votre sélection n'est pas une balise div, et si un attribut de région répétée lui est déjà appliqué, Dreamweaver ne vous autorisera pas à lui appliquer également l'attribut de région modifiable. Seules les balises div peuvent posséder simultanément l'attribut de région modifiable et l'attribut de région répétée. Dreamweaver a détecté qu'une balise de groupe de régions répétées précédait la région répétée. Toutes les régions répétées InContext Editing doivent se trouve dans un groupe de régions répétées. Lorsque vous ajoutez une nouvelle région répétée à une page, Dreamweaver détecte si elle est déjà précédée par un groupe de régions répétées. Si c'est le cas, Dreamweaver vous propose d'ajouter la nouvelle région répétée au groupe existant ou de créer un nouveau groupe de régions répétées qui contiendra la nouvelle région.
XML dans un navigateur, elles sont mises en forme conformément aux éléments définis dans le fichier XSL. Le contenu (les données XML) et la présentation (définie par le fichier XSL) sont entièrement séparés, ce qui offre un meilleur contrôle sur la façon dont les informations sont affichées dans une page Web. En bref, le langage XSL constitue une technologie de présentation pour les données XML, la sortie principale correspondant à une page HTML.
La méthode que vous adoptez (transformations côté serveur ou client) dépend du résultat final que vous souhaitez obtenir, des technologies à votre disposition, du niveau d'accès aux fichiers XML source dont vous disposez et d'autres facteurs. Les deux méthodes présentent des avantages et des inconvénients. Les transformations côté serveur, par exemple, gèrent tous les navigateurs, alors que les transformations côté client prennent uniquement en charge les navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations côté serveur vous permettent d'afficher les données XML dynamiquement à partir de votre propre serveur ou de n'importe où sur le Web. En revanche, les données XML utilisées par les transformations côté client doivent impérativement être hébergées localement sur votre propre serveur Web. Enfin, les transformations côté serveur requièrent le déploiement des pages sur un serveur d'application configuré, tandis que les transformations côté client exigent uniquement l'accès à un serveur Web. Vous trouverez un didacticiel consacré au langage XML à l'adresse www.adobe.com/go/vid0165_fr.
à ce fragment dans la page dynamique. La création de fragments XSLT et leur utilisation avec d'autres pages dynamiques afin d'afficher des données XML constituent le cas de figure le plus courant.
Pour que la page puisse être affichée correctement, les fichiers contenant respectivement le fragment XSLT, vos données XML et la bibliothèque d'exécution doivent tous les trois se trouver sur le serveur. (Si vous sélectionnez un fichier XML distant comme source de données, par exemple un fil RSS, celui-ci doit bien entendu résider ailleurs sur Internet.) Vous pouvez également utiliser Dreamweaver pour créer des pages XSLT entières à utiliser dans les transformations côté serveur. Une page XSLT entière fonctionne exactement comme un fragment XSLT. Toutefois, lorsque vous insérez la référence à la page XSLT entière au moyen du comportement de serveur Transformation XSL, vous insérez le contenu intégral d'une page HTML. Par conséquent, vous devez effacer tout le contenu HTML de la page dynamique (la page .cfm, .php ou .asp qui sert de conteneur) avant d'insérer la référence. Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP. Note: Pour exécuter des transformations côté serveur, votre serveur doit être correctement configuré. Pour plus d'informations, contactez l'administrateur de votre serveur.
Créez d'abord une page XLST entière et associez-lui une source de données XML. (Dreamweaver vous invite à associer la source de données à la création de la page.) Vous pouvez créer une page XSLT entièrement nouvelle ou convertir une page HTML existante en page XSLT. Lorsque vous convertissez une page HTML existante en page XSLT, vous devez lui associer une source de données XML au moyen du panneau Liaisons (Fenêtre > Liaisons). Une fois que vous avez créé votre page XSLT, vous devez la lier au fichier .xml qui contient les données XML en insérant une référence à la page XSLT dans le fichier XML (tout comme vous insérez une référence à une feuille de style en cascade (CSS) externe dans la section <head> d'une page HTML). Les visiteurs de votre site doivent consulter le fichier XML (et non la page XSLT) dans un navigateur. Lorsqu'ils affichent la page, le navigateur exécute la transformation XSL et affiche les données XML, qui sont mises en forme par la page XSLT liée. D'un point de vue conceptuel, la relation entre les pages XSLT et XML liées est similaire, tout en étant différente, au modèle de page CSS externe/HTML. Lorsqu'une page HTML contient du contenu (tel que du texte), vous utilisez une feuille de style externe pour formater ce contenu. La page HTML détermine le contenu, tandis que le code CSS externe, qui est totalement invisible pour l'utilisateur, détermine la présentation. Avec XSLT et XML, la situation est inversée. Le fichier XML (que l'utilisateur ne voit jamais sous forme brute) détermine le contenu alors que la page XLST définit la présentation. La page XSLT contient les tableaux, la mise en forme, les graphiques etc. que contient d'ordinaire le code HTML standard. Lorsqu'un utilisateur affiche le fichier XML dans un navigateur, la page XSLT met le contenu en forme. 5 Navigateur Web
à votre serveur Web. Lorsque l'utilisateur affiche la page XML dans un navigateur, la page XSLT met le contenu en forme, tout comme dans l'exemple précédent. Les transformations XLS côté client de données XML provenant d'une source externe présentent toutefois un inconvénient : les données XML ne sont que partiellement « dynamiques ». Le fichier XML que vous téléchargez et modifiez est un simple « instantané » du fichier qui réside autre part sur le Web. Si le fichier XML d'origine change sur le Web, vous devez à nouveau le télécharger, le lier à la page XSLT et envoyer le fichier XML à votre serveur Web. Le navigateur assure uniquement le rendu des données qu'il reçoit du fichier XML sur votre serveur Web, non des données que contient le fichier XML source d'origine.
“Exécution de transformations XSL sur le client” on page 545
L'objet XSLT Région répétée permet d'afficher sur une page des éléments répétés provenant d'un fichier XML. Toute zone contenant un emplacement réservé pour données XML peut être convertie en région répétée. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau.
Le code suivant, par exemple, crée un tableau contenant deux espaces réservés dynamiques, sans appliquer d'objet XSLT Région répétée au tableau: <table width="500" border="1"> <tr> Type de page affichée dans le navigateur
Dreamweaver exécute la transformation et les résultats ne sont pas nécessairement garantis. Vous pouvez utiliser Dreamweaver pour afficher un aperçu du fragment XSLT pendant que vous le créez, mais pour obtenir un rendu précis des données, utilisez plutôt le serveur d'application pour afficher un aperçu de la page dynamique après y avoir inséré le fragment XSLT.
Cette méthode présente toutefois un inconvénient : il vous en effet plus difficile de déboguer votre page car le navigateur transforme le fichier XML et génère le contenu HTML en interne. Si vous sélectionnez l'option Afficher la source du navigateur pour déboguer le contenu HTML généré, vous avez uniquement accès au code XML que le navigateur a reçu à l'origine et non à la totalité du code HTML (balises, styles, etc.) qui a effectué le rendu de la page. Pour afficher la totalité du code HTML lorsque vous consultez le code source, vous devez effectuer l'aperçu de la page XSLT dans un navigateur. Aperçu de pages XSLT entières et de fragments XSLT Lorsque vous créez des pages XSLT entières et des fragments XSLT, il est souhaitable d'afficher un aperçu de votre travail pour vous assurer que les données s'affichent correctement. Si vous utilisez l'option Aperçu dans le navigateur pour afficher une page XSLT entière ou un fragment XSLT, Dreamweaver exécute la transformation au moyen d'un moteur de transformation intégré. Cette méthode garantit des résultats rapides et vous permet de facilement générer et de déboguer votre page au fur et à mesure. Elle vous permet aussi d'afficher la totalité du code HTML (balises, styles, etc.) par le biais de l'option Afficher la source du navigateur. Note: Cette méthode d'aperçu est couramment utilisée lorsque vous commencez à générer des pages XSLT, que vous utilisiez le client ou le serveur pour transformer vos données.
Processus d'exécution des transformations XSL côté serveur Vous pouvez exécuter des transformations XLS côté serveur sur le serveur. Informez-vous sur les transformations XSL côté client et côté serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de créer des page affichant des données XML. Note: Pour exécuter des transformations côté serveur, votre serveur doit être correctement configuré. Pour plus d'informations, contactez l'administrateur de votre serveur. Le déroulement général de l'exécution des transformations XSL côté serveur est le suivant (chaque étape individuelle est décrite dans d'autres rubriques) : 1. Créez un site Dreamweaver. 2. Choisissez une technologie de serveur et configurez un serveur d'application. 3. Testez le serveur d'application.
4. Créez un fragment ou une page XSLT, ou convertissez une page HTML en page XSLT.
• Convertissez une page HTML existante en une page XSLT entière.
7. Si cela s'impose, ajoutez un objet XSLT Région répétée au tableau ou à la ligne de tableau contenant les espaces réservés pour données XML. 8. Insérez des références.
9. Envoyez la page et le fragment.
10. Affichez la page dynamique dans un navigateur.
“Utilisation de sites Dreamweaver” on page 40 “Choix d'un serveur d'application” on page 559 “Utilisation de XML et XSL dans des pages Web” on page 521 “Transformations XSL côté client” on page 524 “Transformations XSL côté serveur” on page 522
Note: Si vous utilisez une page XSLT existante et devez lui associer une source de données XML. 1 Choisissez Fichier > Nouveau. 2 Dans la catégorie Page vierge de la boîte de dialogue Nouveau document, sélectionnez l'une des options suivantes
• Sélectionnez XSLT (Fragment) pour créer un fragment XSLT. 3 Cliquez sur Créer et effectuez l'une des actions suivantes dans la boîte de dialogue Localiser source XML :
Le tableau suivant décrit les différents éléments que le schéma est susceptible de contenir. Elément
1 Ouvrez la page HTML à convertir. 2 Sélectionnez Fichier > Convertir > XSLT 1.0.
2 Effectuez l'une des opérations suivantes :
3 Cliquez sur OK pour fermer la boîte de dialogue Localiser source XML.
Créateur d'expression XPATH ou l'inspecteur Propriétés pour mettre en forme les données sélectionnées qui vont s'afficher dans la page. 1 Ouvrez une page XSLT à laquelle est associée une source données XML. 2 (Facultatif) Choisissez Insertion > Tableau pour ajouter un tableau à la page. Un tableau permet d'organiser plus
Note: En règle générale, il est conseillé d'utiliser l'objet XSLT Région répétée pour afficher des éléments XML répétés sur une page. Dans ce cas, vous pouvez créer un tableau d'une seule ligne avec une ou plusieurs colonnes, ou un tableau de deux lignes si vous avez l'intention d'insérer un en-tête.
Il utilise la syntaxe XPath (XML Path Language) pour décrire la structure hiérarchique du schéma XML. Par exemple, si vous faites glisser l’élément enfant title sur la page, et si ses éléments parents sont rss, channel et item, la syntaxe de l’espace réservé dynamique sera \{rss/channel/item/title\}. Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression XPATH. Le Créateur d'expression XPATH permet de mettre les données sélectionnées en forme ou de sélectionner d'autres éléments dans le schéma XML. 4 (Facultatif) Pour affecter des styles à vos données XML, sélectionnez un espace réservé pour données XML et
5 Vérifiez le résultat dans un navigateur (Fichier > Aperçu dans le navigateur).
“Affichage d'un aperçu des données XML” on page 527 “Présentation de contenu à l'aide de tableaux” on page 188
2 Effectuez l'une des actions suivantes :
• Dans la catégorie XSLT du panneau Insertion, cliquez sur le bouton Région répétée. 3 Dans le Créateur d'expression XPATH, sélectionnez l'élément répété (il est indiqué par un signe plus de petite
“Données XML et éléments répétés” on page 525
L'inspecteur Propriétés permet de sélectionner un autre nœud XML à répéter pour créer la région répétée. ❖ Dans la zone Sélection, tapez un nouveau nœud, puis appuyez sur l'icône en forme d'éclair et sélectionnez le nœud
Après avoir inséré un objet XSLT Région répétée dans une région, vous pouvez le modifier à l’aide de l'inspecteur Propriétés. 1 Sélectionnez l'objet voulu en cliquant dans le cadre gris qui entoure la région répétée. 2 Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l'icône dynamique située en regard de la zone de
3 Dans le Créateur d'expression XPATH, effectuez les modifications nécessaires et cliquez sur OK.
Après avoir créé un fragment XSLT, vous pouvez l’insérer dans une page Web dynamique à l’aide du comportement de serveur Transformation XSL. Lorsque vous insérez ce comportement de serveur dans une page et affichez celle-ci dans un navigateur, un serveur d'application effectue une transformation qui affiche les données XML du fragment XSLT sélectionné. Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP et PHP. Note: La procédure d'insertion du contenu d'une page XSLT entière dans une page dynamique est identique. Avant d'utiliser le comportement de serveur Transformation XSL pour insérer la page XSLT entière, supprimez tout le code HTML de la page dynamique. 1 Ouvrez une page ColdFusion, ASP ou PHP. 2 En mode Création, placez le curseur là où vous voulez insérer le fragment XSLT.
S'il n'y est pas, cliquez de nouveau dans l'écran Code pour placer le point d'insertion à l'endroit voulu.
5 (Facultatif) Cliquez sur le bouton Plus (+) pour ajouter un paramètre XSLT. 6 Cliquez sur OK pour insérer une référence au fragment XSLT dans la page. Il n'est pas possible de modifier ce
Un sous-dossier includes/MM_XSLTransform/ contenant un fichier contenant une bibliothèque d'exécution est également créé dans le dossier racine du site. Le serveur d'application utilise les fonctions définies dans ce fichier lors de la transformation. 7 Transférez la page dynamique à votre serveur (Site > Placer) et cliquez sur Oui pour inclure les fichiers dépendants.
comportement de serveur Transformation XSL à supprimer. 2 Cliquez sur le bouton Moins (-).
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), double-cliquez sur le
2 Effectuez les modifications requises, puis cliquez sur OK.
Vous pouvez créer un lien dynamique dans votre page XSLT qui établit un lien vers une URL spécifique lorsque l'utilisateur clique sur un mot ou un groupe de mots spécifié dans vos données XML. Pour plus d'informations, consultez les listes d'erreurs Dreamweaver à l'adresse www.adobe.com/go/dw_documentation_fr.
Vous pouvez, par exemple, décider de créer un fragment XSLT à insérer dans une page dynamique et le mettre en forme au moyen de la même feuille de style externe que la page dynamique. Si vous attachez la même feuille de style au fragment, la page HTML résultante contient un lien en double à la feuille de style (un dans la section <head> de la page dynamique et un autre dans la section <body> de la page, là où le contenu du fragment XSLT apparaît). Une meilleure façon de procéder consiste à utiliser des feuilles de style à la conception pour référencer la feuille de style externe.
Dreamweaver. Une fois les deux étapes précédentes terminées, vous pouvez créer de nouveaux styles dans votre fragment XSLT à l'aide de la feuille de style qui a été associée à votre page dynamique. Vous obtiendrez un code HTML mieux structuré (dans la mesure où la référence à la feuille de style n'est valide que dans Dreamweaver) et le fragment affichera toujours les styles requis en mode Création. De plus, tous vos styles sont appliqués au fragment et à la page dynamique lorsque vous affichez cette dernière en mode Création ou en affichez un aperçu dans un navigateur. Note: Si vous demandez un aperçu du fragment XSLT dans un navigateur, ce dernier n'affiche pas les styles. Par contre, vous devez afficher un aperçu de la page dynamique dans le navigateur afin de consulter le fragment XSLT dans le contexte de la page dynamique.
“Utilisation des feuilles de style à la conception” on page 160
Par exemple, vous pouvez utiliser un paramètre pour identifier et afficher un article spécifique d'un fil d'informations. Lorsque la page est chargée dans un navigateur, seul l’article spécifié par le paramètre est affiché.
1 Ouvrez la boîte de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur
2 Dans la boîte de dialogue Transformation XSL, cliquez sur le bouton Plus (+) à côté du libellé Paramètres XSLT.
5 Dans la zone Valeur par défaut, indiquez la valeur que le paramètre doit utiliser si la page ne reçoit aucune valeur
1 Ouvrez la boîte de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur
2 Sélectionnez un paramètre dans la liste des paramètres XSLT. 3 Cliquez sur le bouton Modifier. 4 Effectuez les modifications requises, puis cliquez sur OK.
1 Ouvrez la boîte de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur
2 Sélectionnez un paramètre dans la liste des paramètres XSLT. 3 Cliquez sur le bouton Moins (-).
Vous pouvez créer des régions conditionnelles simples ou multiples sur une page XSLT. Vous pouvez soit sélectionner un élément en mode Création, puis appliquer une région conditionnelle à la sélection, soit insérer une région conditionnelle à l'emplacement du point d'insertion dans le document. Supposons que vous souhaitiez afficher l'expression « Non disponible » en regard du prix d'un article lorsque celui-ci est en rupture de stock. Pour ce faire, vous tapez l'expression « Non disponible » sur la page, la sélectionnez et lui appliquez une région conditionnelle. Dreamweaver entoure l'expression des balises <xsl:if> et affiche uniquement le mot « Non disponible » sur la page lorsque les données répondent aux conditions définies par l'expression conditionnelle.
Vous pouvez rédiger une expression conditionnelle simple à insérer dans votre page XSLT. Tout contenu sélectionné à l'ouverture de la boîte de dialogue Région conditionnelle est entouré d'un bloc <xsl:if>. Si aucun contenu n'est sélectionné, le bloc <xsl:if> est entré au point d'insertion. Il est judicieux d'utiliser cette boîte de dialogue pour démarrer, puis de personnaliser l'expression en mode Code. L'élément <xsl:if> est similaire à l'instruction if d'autres langages. Il a pour fonction de tester une condition et de déclencher une action en fonction du résultat. L'élément <xsl:if> vous permet de tester si une expression est vraie ou fausse. 1 Choisissez Insertion > Objets XSLT > Région conditionnelle, ou cliquez sur l'icône Région conditionnelle de la
<xsl:if test="@available='true'"> Content goes here <xsl:if> du panneau Références (Aide > Référence).
Vous pouvez rédiger une expression conditionnelle simple à insérer dans votre page XSLT. Tout contenu sélectionné à l'ouverture de la boîte de dialogue Région conditionnelle est entouré d'un bloc <xsl:choose>. Si vous ne sélectionnez pas de contenu, le bloc <xsl:choose> est entré au point d'insertion. Il est judicieux d'utiliser cette boîte de dialogue pour démarrer, puis de personnaliser l'expression en mode Code. L'élément <xsl:choose> est similaire à l'instruction case d'autres langages. Il a pour fonction de tester une condition et de déclencher une action en fonction du résultat. L'élément <xsl:choose> vous permet de tester plusieurs conditions. 1 Choisissez Insertion > Objets XSLT > Région conditionnelle multiple, ou cliquez sur l'icône Région conditionnelle
2 Entrez la première condition dans la boîte de dialogue Région conditionnelle multiple.
L'inspecteur de définition des propriétés des régions conditionnelles permet de modifier la condition utilisée dans une région conditionnelle dans votre page XSL. La région conditionnelle teste la condition et déclenche une action en fonction du résultat. ❖ Dans la zone Test, tapez une nouvelle condition et appuyez sur Entrée.
L'inspecteur de définition des propriétés des régions conditionnelles permet de modifier la condition utilisée dans une région conditionnelle multiple dans votre page XSL. La région conditionnelle multiple teste la condition et déclenche une action en fonction du résultat. ❖ Dans la zone Test, tapez une nouvelle condition et appuyez sur Entrée.
Note: Cette fonction a été conçue pour vous aider à créer des expressions XPath simples pour identifier un nœud spécifique ou pour les régions répétées. Elle ne vous permet pas de modifier les expressions manuellement. Si vous devez créer des expressions complexes, utilisez le Créateur d'expressions XPath pour démarrer, puis personnalisez vos expressions en mode Code ou au moyen de l'inspecteur Propriétés.
1 Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression
2 Dans la boîte de dialogue Créateur d'expression XPATH (Texte dynamique), sélectionnez un nœud dans
L'expression XPath appropriée est rédigée dans la zone Expression pour identifier le nœud. Note: Si vous sélectionnez un autre nœud dans l'arborescence du schéma XML, l'expression change en conséquence.
<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
Pour plus d'informations et des exemples concernant la sélection de nœuds pour renvoyer une valeur, consultez la section <xsl:value-of/> du panneau Références.
Vous pouvez sélectionner un nœud à répéter et, éventuellement, choisir de filtrer les résultats. Dans la boîte de dialogue Créateur d'expressions XPath, votre contenu sélectionné sera entouré d'un bloc <xsl:for-each>. Si aucun contenu n'est sélectionné, le bloc <xsl:for-each> est entré au point d'insertion. 1 Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression
2 Dans la boîte de dialogue Créateur d'expressions XPATH (Région répétée), sélectionnez l'élément à répéter dans
L'expression XPath appropriée est rédigée dans la zone Expression pour identifier le nœud. Note: Les éléments répétés sont identifiés par le symbole Plus (+) dans l'arborescence du schéma XML. Dans l'exemple suivant, vous souhaitez répéter chaque nœud item au sein du fichier XML.
<xsl:for-each select="provider/store/items/item"> Content goes here 1 Dans l'arborescence du schéma XML, sélectionnez un nœud à répéter.
4 Tapez les critères de filtre dans les champs suivants : Filtrer par Indique le nœud répété contenant les données sur lesquelles fonder le filtre. Ce menu déroulant propose
Où Spécifie l'attribut ou le sous-élément du nœud Filtrer par qui sera utilisé pour filtrer les résultats. Vous pouvez
XPath dans ce champ pour identifier les enfants présents aux autres niveaux. Opérateur Spécifie l'opération de comparaison à utiliser dans l'expression de filtre. Valeur Spécifie la valeur à rechercher dans le nœud Filtrer par. Indiquez une valeur. Si des paramètres dynamiques
5 Pour insérer un autre filtre, cliquez à nouveau sur le bouton Plus (+).
L'exemple suivant renvoie uniquement les nœuds item dans lesquels la valeur de l'attribut @available correspond à true (vrai).
<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here Processus d'exécution des transformations XSL côté client Vous pouvez effectuez des transformations XSL côté client. Informez-vous sur les transformations XSL côté client et côté serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de créer des page affichant des données XML. Le déroulement général de l'exécution des transformations XSL côté client est le suivant (chaque étape individuelle est décrite dans d'autres rubriques) : 1. Créez un site Dreamweaver. 2. Créez une page XSLT, ou convertissez une page HTML en page XSLT.
• Convertissez une page HTML existante en une page XSLT entière.
4. Liez vos données XML à la page XSLT. 5. Affichez les données XML en liant les données à la page XSLT entière. 6. Si cela s'impose, ajoutez un objet XSLT Région répétée au tableau ou à la ligne de tableau contenant le ou les espaces réservés pour les données XML. 7. Associez la page XSLT à la page XML. 8. Envoyez la page XML et la page XSLT liée à votre serveur Web. 9. Affichez la page XML dans un navigateur.
“Utilisation de sites Dreamweaver” on page 40 “Choix d'un serveur d'application” on page 559 “Liaison d'une page XSLT à une page XML” on page 547 “Utilisation de XML et XSL dans des pages Web” on page 521 “Transformations XSL côté client” on page 524 “Transformations XSL côté serveur” on page 522
Vous devez utiliser une page XSLT entières pour les transformations côté client. Les fragments XSLT ne sont pas pris en charge par ce type de transformation. Suivez les instructions générales suivantes pour créer des pages XSLT, y lier des données XML et les formater pour des transformations côté client : 1. Créez la page XSLT. 2. Affichez des données dans la page XSLT. 3. Affichez des éléments répétés dans la page XSLT.
“Création d'une page XSLT” on page 529 “Affichage des données XML dans des pages XSLT” on page 531 “Affichage des éléments répétés XML” on page 533
2 Sélectionnez Commandes > Associer une feuille de style XSLT. 3 Dans la boîte de dialogue, cliquez sur le bouton Parcourir, localisez la page XSLT à associer, sélectionnez-la et
4 Cliquez sur OK pour fermer la boîte de dialogue et insérer la référence à la page XSLT en haut du document XML.
Dans le langage XSLT, certains caractères ne sont pas pris en charge dans certains contextes. Il est par exemple impossible d'utiliser le signe inférieur à (<) et l'esperluette (&) dans du texte placé entre des balises ou dans une valeur d'attribut. Le moteur de transformation XSLT renvoie une erreur si ces caractères sont utilisés incorrectement. Pour résoudre ce problème, vous pouvez remplacer les caractères spéciaux par des entités de caractères. Une entité de caractère est une chaîne de caractères représentant d'autres caractères. Les entités de caractères sont nommées ou numérotées. Une entité nommée commence par une esperluette (&) suivie du nom ou des caractères et se termine par un point-virgule (;). Par exemple, < représente le chevron gauche (<). Les entités numérotées commencent et se terminent de la même façon, mais le signe dièse (#) et un nombre spécifient le caractère. XSLT propose cinq entités prédéfinies : Caractère
Si vous affichez l'aperçu d'un fichier XML associé à un fichier XSLT ou une page côté serveur associée à une transformation XSLT, c'est le serveur ou le navigateur (et non Dreamweaver) qui affiche ce message d'avertissement. L'exemple suivant illustre le message que Internet Explorer est susceptible de renvoyer lorsque vous demandez la transformation d'un fichier XML par un fichier XLS dans lequel une entité n'est pas définie.
W3C. Vous y trouverez les informations suivantes : <!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
3 Muni de ses informations, passez en mode Code et tapez la balise d'entité suivante en haut de votre fichier XSL
<!ENTITY entityname "entitycode;">
<!ENTITY Egrave "È"> Ajout de définitions d'entité dans les fichiers XSL créés par défaut par Dreamweaver 1 Localisez le fichier de configuration suivant dans le dossier d'application Dreamweaver et ouvrez-le dans un éditeur
Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml 2 Localisez la déclaration mm_xslt_1 : <documenttypedeclaration id="mm_xslt_1">
Une application Web est un site Web dont le contenu des pages est partiellement ou entièrement indéterminé. Le contenu final d'une page est déterminé uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requête à une autre en fonction des actions de l'utilisateur, ce type de page est appelé page dynamique. Les applications Web sont construites de manière à répondre à différents types de défis et de problèmes. Cette section décrit les utilisations courantes des applications Web et présente un exemple simple.
Les applications Web peuvent être utilisées de diverses façons par les visiteurs d'un site et les développeurs, notamment pour :
Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu à leur convenance. Les exemples incluent des réseaux intranet d'entreprises, tels Microsoft MSDN (www.msdn.microsoft.com), et Amazon.com (www.amazon.com).
Auparavant, les données saisies dans des formulaires HTML étaient envoyées sous forme de courriels aux employés ou sous forme d'applications CGI pour le traitement. Une application Web peut enregistrer les données d'un formulaire directement dans une base de données, ainsi qu'extraire les données et créer des rapports Web pour l'analyse. Les exemples incluent des pages de banque en ligne et de contrôle des stocks, ainsi que des sondages et des formulaires de commentaires.
Une application Web évite au créateur d'avoir à mettre fréquemment à jour le code HTML du site. Les fournisseurs de contenu, tels que les rédacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site à jour, Il peut s'agir de The Economist (www.economist.com) et de CNN (www.cnn.com).
Julie suggère une application Web basée sur un réseau intranet exécutant les tâches suivantes :
• stocker le kilométrage des employés dans une base de données ; • calculer les points de mise en forme en fonction du kilométrage ; • permettre aux employés de suivre leurs progrès au fil des mois ; • permettre à Christophe d'accéder au total des points en un seul clic à chaque fin de mois. Julie met rapidement en place l'application à l'aide de Dreamweaver, logiciel doté des outils nécessaires à la création rapide et facile de ce type d'applications.
Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifiée lorsqu'un visiteur la consulte : Le serveur Web transmet la page au navigateur qui la sollicite sans la modifier. A l'inverse, une page Web dynamique est modifiée par le serveur avant d'être transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique. Vous pouvez par exemple créer une page pour afficher les résultats du programme de mise en forme et faire en sorte que certaines informations (telles le nom et les résultats de l'employé) soient déterminées lorsqu'une page est sollicitée par un employé donné. Les sections suivantes décrivent en plus de détails la façon dont les applications Web fonctionnent.
Un site Web statique comprend un jeu de pages et fichiers HTML associés hébergés sur un ordinateur exécutant un serveur Web. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Une requête de page est générée lorsqu'un utilisateur clique sur un lien d'une page Web, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur. Le contenu final d'une page Web statique est déterminé par le créateur de la page et n'est pas modifié lorsqu'un utilisateur la demande. Exemple :
à un logiciel spécial chargé de terminer la page. Ce logiciel spécial est appelé un serveur d'application. Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en résulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le navigateur reçoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperçu du processus :
Un serveur d'application vous permet de travailler avec des ressources côté serveur telles que les bases de données. Une page dynamique peut, par exemple, ordonner au serveur d'application d'extraire des données de la base de données et de les insérer dans le code HTML de la page. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_dbguide_fr. L'utilisation d'une base de données pour stocker un contenu vous permet de séparer l'aspect conceptuel d'un site Web du contenu à afficher aux utilisateurs du site. Plutôt que de créer des fichiers HTML distincts pour chacune des pages, il vous suffit de créer une page (ou un modèle) pour les différents types d'informations que vous souhaitez présenter. Vous pouvez ensuite télécharger du contenu dans une base de données pour qu'ensuite le site Web puisse extraire ce contenu en réponse à une demande d'un utilisateur. Vous pouvez également mettre à jour des informations dans une source unique, puis répercuter cette modification à travers le site Web sans avoir à modifier chaque page manuellement. Vous pouvez utiliser Adobe® Dreamweaver® CS5 pour créer des formulaires Web permettant d'insérer, de mettre à jour ou de supprimer des données dans une base de données. L'instruction d'extraction des données de la base est nommée requête de base de données. Une requête est composée de critères de recherche rédigés dans un langage de base de données appelé SQL (Structured Query Language). La requête SQL est rédigée dans les scripts ou les balises de la page côté serveur. Un serveur d'application ne peut pas communiquer directement avec une base de données car le format propriétaire de cette dernière rend les données indéchiffrables, de la même manière qu'un document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut être indéchiffrable. Le serveur d'application peut communiquer avec la base de données uniquement via un pilote de base de données, logiciel faisant office d'interprète entre le serveur d'application et la base de données. Une fois que le pilote a établi la communication, la requête est exécutée par rapport à la base de données et un jeu d'enregistrements est créé. Un jeu d'enregistrements est un ensemble de données extraites d'une ou de plusieurs tables de base de données. Le jeu d'enregistrements est renvoyé au serveur d'application, lequel utilise les données pour terminer la page. Voici un exemple simple de requête de base de données rédigée en SQL :
Si vous prévoyez de créer de petites applications peu onéreuses, vous pouvez utiliser une base de données basée sur fichier, créée par exemple sous Microsoft Access. Si vous prévoyez de créer des applications stratégiques robustes, vous pouvez utiliser une base de données serveur, créée par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL. Si votre base de données réside sur un système autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systèmes pour un fonctionnement efficace et rapide de votre application Web.
Guide du débutant en base de données
La création d'une page dynamique consiste à écrire d'abord le code HTML, puis à ajouter les scripts ou les balises côté serveur au code HTML pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparaît incorporé dans le code HTML de la page. Par conséquent, ces langages sont appelés langages de programmation HTML intégrés. L'exemple élémentaire ci-dessous utilise le langage CFML (ColdFusion Markup Language) :
2 Insertion de la valeur de la variable, "Service commercial", dans le code HTML.
<html> <head> Nous vous invitons à visiter la page de notre Service commercial. Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employés pour les technologies de serveur prises en charge par Dreamweaver sont : Technologie de serveur
“Fonctionnement d'une application Web” on page 550. Les serveurs d'applications les plus courants sont ColdFusion et PHP. Une base de données est un ensemble de données stockées sous forme de tables. Chaque ligne d'une table correspond
Une requête de base de données désigne l'opération permettant d'extraire un jeu d'enregistrements d'une base de
Une page dynamique est une page Web qui est personnalisée par un serveur d'application avant d'être transmise à un
L'environnement de développement de Dreamweaver prend en charge les technologies de serveur suivantes :
• Pages ASP (Active Server Pages) de Microsoft Une page statique est une page Web qui n'est pas modifiée par un serveur d'application avant d'être transmise à un
Une application Web est un site Web dont le contenu des pages est partiellement ou entièrement indéterminé. Le
Un serveur Web est un logiciel qui renvoie des pages Web en réponse aux requêtes de navigateurs Web. Une requête de page est générée lorsqu'un utilisateur clique sur un lien d'une page Web dans le navigateur, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur.
Eléments nécessaires à la création d'applications Web Pour créer des applications Web dans Adobe® Dreamweaver® CS5, vous devez disposer des logiciels suivants :
• Un serveur d'application exécuté sur votre serveur Web Note: Dans le contexte des applications Web, les termes serveur Web et serveur d'application font référence à des logiciels et non à du matériel. Si vous souhaitez utiliser une base de données en conjonction avec votre application, vous devez également disposer des logiciels suivants :
• Un pilote de base de données prenant en charge votre base de données Plusieurs sociétés d'hébergement Web vous offrent la possibilité d'utiliser leurs logiciels pour tester et déployer des applications Web. Dans certains cas, il est possible d'installer le logiciel requis sur le même ordinateur que Dreamweaver à des fins de développement. Vous pouvez également installer les logiciels sur un ordinateur en réseau (le plus souvent un ordinateur fonctionnant sous Windows 2000 ou XP) pour rendre votre projet accessible aux autres développeurs de votre équipe. Si vous souhaitez utiliser une base de données avec votre application Web, vous devez au préalable établir une connexion avec cette base.
“Configuration d'un environnement de développement ColdFusion” on page 559 “Configuration d'un environnement de développement PHP” on page 560 “Configuration d'un environnement de développement ASP” on page 560
Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Un serveur Web est parfois appelé serveur HTTP. Vous pouvez installer et utiliser un serveur Web sur votre ordinateur local. Si vous travaillez sur Macintosh, vous pouvez utiliser le serveur Web Apache déjà installé sur votre machine. Note: Adobe ne fournit aucune assistance technique pour les logiciels tiers, tels que Microsoft Internet Information Server. Si vous avez besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft. Si vous utilisez Internet Information Server (IIS) pour développer des applications Web, le nom par défaut de votre serveur Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre ordinateur n'a pas de nom, le serveur utilise le mot « localhost ». Le nom du serveur correspond au dossier racine du serveur, lequel est généralement (sur un ordinateur fonctionnant sous Windows) : C:\Inetpub\wwwroot. Vous pouvez ouvrir une page Web quelconque stockée dans le dossier racine en entrant l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur. http://nom_du_serveur/nom_de_fichier
Note: Veillez à taper des barres obliques normales et non inverses dans les URL. Vous pouvez également ouvrir une page Web quelconque stockée dans un sous-dossier du dossier racine en spécifiant ce sous-dossier dans l'URL. Par exemple, supposons que le fichier soleil.html est stocké dans un sous-dossier nommé gamelan, de la façon suivante : C:\Inetput\wwwroot\gamelan\soleil.html Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur : http://mer_noire/gamelan/soleil.html Lorsque le serveur Web est exécuté sur votre ordinateur, vous pouvez remplacer le nom du serveur par localhost. Par exemple, les URL suivantes ouvrent la même page dans un navigateur : http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Note: Vous pouvez aussi utiliser une autre expression à la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).
“Configuration d'un environnement de développement ColdFusion” on page 559 “Configuration d'un environnement de développement PHP” on page 560 “Configuration d'un environnement de développement ASP” on page 560
Pour développer et tester des applications Web, vous pouvez choisir parmi plusieurs serveurs Web courants, à savoir IIS (Microsoft Internet Information Server) et Apache HTTP Server. Si vous n'utilisez pas de service d'hébergement Web, sélectionnez un serveur Web et installez-le sur un ordinateur local à des fins de développement. Les utilisateurs souhaitant développer des applications Web ColdFusion sous Windows et sur Macintosh peuvent le faire grâce au serveur Web inclus dans l'édition développeur du serveur d'application ColdFusion 8. Cette édition est disponible gratuitement. Les autres utilisateurs Windows peuvent exécuter un serveur Web sur leur ordinateur local en installant IIS. Ce serveur Web peut avoir déjà été installé sur votre ordinateur. Parcourez votre arborescence pour vérifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS crée ce dossier pendant l'installation. Les utilisateurs de Mac OS peuvent utiliser le serveur Web Apache local installé avec leur système d'exploitation. Pour plus d'informations sur l'installation et la configuration des autres serveurs Web, consultez la documentation de votre fournisseur ou consultez l'administrateur système.
Technologie de serveur Les serveurs d'application utilisent différentes technologies. Dreamweaver prend en charge
Technologie de serveur
Les bases de données se présentent sous une multitude de formes, selon la quantité et la complexité des données qu'elles doivent stocker. Lorsque vous choisissez une base de données, tenez compte de plusieurs facteurs, dont votre budget et le nombre d'utilisateurs qui devraient accéder à la base de données. Budget Certains fournisseurs proposent des serveurs de base de données d'application haut de gamme dont le prix d'achat et les coûts d'administration sont très élevés. D'autres fournisseurs proposent des solutions plus aisées et plus économiques, comme Microsoft Access ou la base de données libre MySQL. Utilisateurs Si vous pensez qu'une large communauté d'utilisateurs accédera à votre site Web, optez pour une base de données conçue pour prendre en charge l'ensemble des utilisateurs potentiels de votre site. Lorsque les sites Web nécessitent une plus grande souplesse en termes de modélisation des données et doivent prendre en charge un très grand nombre d'utilisateurs simultanés, envisagez d'employer des bases de données relationnelles serveur (communément désignées sous le nom de SGBDR), telles que Microsoft SQL Server et Oracle.
Pour plus d'informations sur la configuration d'un environnement de développement ColdFusion pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe à l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_cf.html. Les utilisateurs de Windows et de Macintosh peuvent télécharger et installer une édition gratuite et totalement fonctionnelle du serveur d'applications ColdFusion depuis le site d'Adobe, à l'adresse www.adobe.com/go/coldfusion_fr/.
Pendant l'installation, vous pouvez configurer ColdFusion de manière à utiliser le serveur Web intégré au programme ou un autre serveur Web de votre système. En principe, il est préférable de faire correspondre du mieux possible votre environnement de développement et votre environnement de production. Par conséquent, si un serveur Web (par exemple, Microsoft IIS) est installé sur l'ordinateur sur lequel vous développez vos applications, il est peut-être préférable de l'utiliser.
Il existe une version du serveur d'application PHP pour les systèmes Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X. Pour plus d'informations sur le serveur d'applications, consultez la documentation PHP, que vous pouvez également télécharger à partir du site Web PHP à l'adresse www.php.net/download-docs.php.
Pour accéder aux pages ASP, vous devez disposer d'une application prenant en charge Microsoft Active Server Pages 2.0., telle que Microsoft IIS, qui est fournie avec Windows 2000 et Windows XP Professionnel. Les utilisateurs de Windows XP Professionnel peuvent installer et exécuter IIS sur leur ordinateur local. Les utilisateurs de Macintosh peuvent faire appel à un service d'hébergement Web offrant une solution ASP ou bien installer IIS sur un ordinateur distant.
Après avoir trouvé une société d'hébergement de site Web ou avoir vous-même conçu votre serveur, créez un dossier racine pour votre application Web sur l'ordinateur où s'exécute votre serveur. Le dossier racine peut être un dossier local ou distant, suivant l'emplacement du serveur Web. Le serveur Web répondra aux requêtes HTTP d'un navigateur Web en renvoyant les fichiers de ce dossier ou de ses sous-dossiers. Par exemple, sur un ordinateur exécutant ColdFusion 8, tous les fichiers contenus dans le dossier\ColdFusion8\wwwroot et dans chacun de ses sous-dossiers peuvent être transmis à un navigateur Web. Le tableau ci-dessous répertorie les dossiers racine par défaut des différents serveurs Web : Serveur Web
Entrez l'une des URL d'hôte local suivantes correspondant à votre serveur Web : Serveur Web
• Vous avez indiqué le chemin du fichier contenant la page (par exemple, c:\ColdFusion8\wwwroot\testpage.htm) au lieu de son URL (par exemple, http://localhost:8500/testpage.htm) dans la zone d'adresse de votre navigateur.
Après avoir créé un dossier racine pour votre application, définissez un site Dreamweaver pour la gestion des fichiers.
“Fonctions élémentaires du serveur Web” on page 557 “Utilisation de sites Dreamweaver” on page 40
Après avoir configuré le système en vue du développement d'applications Web, vous devez définir un site Dreamweaver pour la gestion des fichiers. Avant de commencer, vérifiez que les conditions suivantes sont réunies :
• Vous avez créé un dossier racine pour votre application Web sur le système exécutant le serveur Web. La définition d'un site Dreamweaver pour l'application Web se déroule en trois étapes :
2. Définition d'un dossier distant Définissez un dossier situé sur l'ordinateur exécutant le serveur Web comme dossier distant Dreamweaver. Ce dossier distant est le dossier que vous avez créé sur le serveur Web pour l'application Web. 3. Définition d'un dossier de test Dreamweaver utilise ce dossier pour générer et afficher du contenu dynamique et se connecter à des bases de données pendant que vous procédez à la création du site. Ce serveur d'évaluation peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Vous devez seulement vous assurer que le serveur sélectionné est en mesure de traiter le type de pages dynamiques que vous avez l'intention de développer. Une fois le site Dreamweaver défini, vous pouvez procéder à la création de l'application Web.
“Utilisation de sites Dreamweaver” on page 40
Connexion à une base de données ColdFusion Pour développer une application Web ColdFusion sous Dreamweaver, vous devez vous connecter à une base de données en choisissant une source de données ColdFusion définie dans Dreamweaver ou la console de gestion du serveur ColdFusion Administrator. Avant d'établir une connexion à une base de données, vous devez configurer une application Web ColdFusion. Vous devez également installer une base de données sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP. Assurez-vous également que Dreamweaver sait où aller chercher les sources de données ColdFusion. Pour récupérer les sources de données ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur l'ordinateur exécutant ColdFusion. Vous devez indiquer ce dossier dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site. Ensuite, vous devez créer une source de données ColdFusion dans Dreamweaver ou le programme ColdFusion Administrator (s'il n'en existe pas déjà une). Une fois la source de données ColdFusion créée, vous pouvez l'utiliser dans Dreamweaver pour vous connecter à la base de données.
Pour être en mesure d’utiliser les informations d’une base de données dans une page Web, vous devez d’abord créer une source de données ColdFusion. Si vous utilisez la version 7 ou ultérieure de ColdFusion MX, vous pouvez directement créer ou modifier la source de données dans Dreamweaver. Si vous utilisez ColdFusion MX, vous devez utiliser la console de gestion sur le serveur, ColdFusion MX Administrator, pour créer ou modifier la source de données. Dans ce cas, vous pouvez toutefois utiliser Dreamweaver pour ouvrir ColdFusion MX Administrator.
Note: Dreamweaver n’affiche le bouton Plus que si vous exécutez ColdFusion MX 7 ou une version ultérieure. 4 Pour modifier une source de données, double-cliquez sur le bouton de connexion à la base de données dans le
Vous pouvez modifier tous les paramètres, sauf le nom de la source de données. Pour plus d'informations, consultez la documentation du fournisseur du pilote ou consultez votre administrateur système.
6.0 1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Bases de données (Fenêtre > Bases de données) de Dreamweaver, cliquez sur Modifier les sources
3 Connectez-vous à ColdFusion MX Administrator et créez ou modifiez la source de données.
Vous devez fournir certaines valeurs de paramètres pour créer la source de données ColdFusion. Pour les valeurs de paramètres spécifiques à votre pilote de base de données, consultez la documentation de votre fournisseur ou contactez votre administrateur système. Une fois que vous avez créé une source de données ColdFusion, vous pouvez l'utiliser dans Dreamweaver.
Une fois la source de données ColdFusion créée, vous pouvez l'utiliser dans Dreamweaver pour vous connecter à la base de données. Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). Vos sources de données ColdFusion s'affichent dans le panneau. Si ce n'est pas le cas, remplissez la liste de contrôle du panneau. Assurez-vous également que Dreamweaver sait où aller chercher les sources de données ColdFusion. Dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site, indiquez le dossier racine du site sur l'ordinateur exécutant ColdFusion.
“Résolution des problèmes de connexion aux bases de données” on page 573
Un DSN est un identificateur formé d'un seul mot (MaConnexion, par exemple), qui pointe vers la base de données et contient toutes les informations requises pour s'y connecter. Le DSN se définit dans Windows. Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC installé sur un système Windows. Une chaîne de connexion est une expression saisie à la main qui identifie la base de données et fournit les informations requises pour s'y connecter, comme le montre l'exemple suivant : Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner
Si vous ne précisez pas de fournisseur de OLE DB pour votre base de données, ASP utilisera le fournisseur par défaut pour les pilotes ODBC pour communiquer avec un pilote ODBC, lequel communiquera à son tour avec la base de données.
MDAC gratuitement à partir du site Web de Microsoft à l'adresse http://msdn.microsoft.com/data/mdac/downloads/. Note: Assurez-vous que vous disposez de MDAC 2.5 avant d'installer MDAC 2.7. Vous pouvez télécharger les fournisseurs de OLE DB pour les bases de données Oracle sur le site Web d'Oracle, à l'adresse www.oracle.com/technology/software/tech/windows/ole_db/index.html (enregistrement obligatoire). Pour créer une connexion OLE DB dans Dreamweaver, vous devez inclure un paramètre Provider (Fournisseur) dans une chaîne de connexion. Voici par exemple des paramètres de fournisseurs de OLE DB courants pour les bases de données Access, SQL Server et Oracle, respectivement : Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... Une chaîne de connexion aux bases de données Microsoft Access et SQL Server se compose des paramètres suivants, séparés par des points-virgules : Provider (Fournisseur) Indique le fournisseur OLE DB pour votre base de données. Voici par exemple des paramètres
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Driver (Pilote) Indique le pilote ODBC à utiliser si vous ne spécifiez pas de fournisseur de OLE DB pour votre base de
Server (Serveur) Indique le serveur hébergeant la base de données SQL Server si votre application Web est exécutée sur un serveur différent. Base de données Est le nom d'une base de données SQL Server. DBQ Est le chemin à une base de données basée sur fichier (une base de données créée dans Microsoft Access, par
UID Indique le nom de l'utilisateur. PWD Indique le mot de passe de l'utilisateur.
Il est également possible que ces paramètres aient un nom ou une utilisation différents pour d'autres types de bases de données. Pour plus d'informations, consultez la documentation du fournisseur de votre base de données ou consultez votre administrateur système. Voici un exemple de chaîne de connexion créant une connexion ODBC à une base de données Access appelée arbres.mdb : Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Vous pouvez utiliser un DSN (Data Source Name, nom de source de données) pour créer une connexion ODBC entre votre application Web et votre base de données. Un DSN est un nom contenant tous les paramètres nécessaires pour établir la connexion à une base de données précise à l'aide d'un pilote ODBC. Comme vous pouvez uniquement spécifier un pilote ODBC dans un DSN, vous devez utiliser une chaîne de connexion si vous souhaitez passer par un fournisseur de OLE DB. Vous pouvez utiliser un DSN défini localement pour créer une connexion à une base de données dans Dreamweaver. 1 Définissez un DSN sur l'ordinateur Windows exécutant Dreamweaver.
à l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596
à l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599 2 Ouvrez une page ASP dans Dreamweaver, puis accédez au panneau Bases de données (Fenêtre > Bases de données). 3 Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Nom de la source de données (DSN) dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux. 5 Activez l'option Utilisation du DSN local et choisissez le DSN que vous souhaitez utiliser dans le menu Nom de la
Si vous voulez utiliser un DSN local mais n'en avez pas encore défini, cliquez sur Définir pour ouvrir l'administrateur de sources de données ODBC Windows. 6 Renseignez les zones Nom d'utilisateur et Mot de passe. 7 Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la
8 Cliquez sur Tester pour vous connecter à la base de données, puis cliquez sur OK. Si la connexion n'aboutit pas,
Dreamweaver pour traiter les pages dynamiques.
“Limitation des informations de base de données affichées dans Dreamweaver” on page 582 “Configuration de l'ordinateur pour le développement d'applications” on page 557 “Résolution des problèmes de connexion aux bases de données” on page 573
Note: Pour réaliser les opérations présentées dans la présente section, vous devez avoir configuré une application ASP. Une base de données doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP. Note: Dreamweaver ne peut récupérer que les DSN de serveur créés à l'aide de l'administrateur de source de données ODBC Windows. Vous pouvez utiliser un DSN défini sur un ordinateur distant pour créer une connexion à une base de données dans Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit être défini sur l'ordinateur Windows exécutant votre serveur d'application (probablement IIS). Note: Comme vous pouvez uniquement spécifier un pilote ODBC dans un DSN, vous devez utiliser une chaîne de connexion si vous souhaitez passer par un fournisseur de OLE DB. 1 Définissez un DSN sur le système distant exécutant votre serveur d'application.
à l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596
à l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599 2 Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données). 3 Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Nom de la source de données (DSN) dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux. 5 Sélectionnez Utilisation de la DSN sur le serveur d'évaluation
DSN sur le serveur d'application. 6 Tapez le DSN or ou cliquez sur le bouton DSN pour vous connecter au serveur et sélectionnez le DSN pour la base
7 Renseignez les zones Nom d'utilisateur et Mot de passe. 8 Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la
Note: Vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access.
Dreamweaver pour traiter les pages dynamiques.
“Configuration de l'ordinateur pour le développement d'applications” on page 557 “Limitation des informations de base de données affichées dans Dreamweaver” on page 582 “Résolution des problèmes de connexion aux bases de données” on page 573
Vous pouvez utiliser une connexion sans DSN pour créer une connexion ODBC ou OLE DB entre votre application Web et votre base de données. Il faut utiliser une chaîne de connexion pour créer ce type de connexion. 1 Ouvrez une page ASP dans Dreamweaver, puis accédez au panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Chaîne de connexion personnalisée dans le menu.
3 Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux. 4 Tapez une chaîne de connexion vers la base de données. Si vous n'indiquez pas de fournisseur de BD OLE dans la
ODBC approprié pour votre base de données. Si votre site est hébergé par un fournisseur d'accès Internet et que vous ne connaissez pas le chemin d'accès complet à votre base de données, utilisez la méthode MapPath de l'objet de serveur ASP dans votre chaîne de connexion. 5 Si le pilote de base de données spécifié dans la chaîne de connexion n'est pas installé sur le même ordinateur que
Note: Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions aux bases de données utilisent le serveur d'application. 6 Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la
Note: Vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access. 7 Cliquez sur Tester pour vous connecter à la base de données, puis cliquez sur OK. Si la connexion n'aboutit pas,
Dreamweaver pour traiter les pages dynamiques.
“Connexion à une base de données ColdFusion” on page 562 “Limitation des informations de base de données affichées dans Dreamweaver” on page 582 “Résolution des problèmes de connexion aux bases de données” on page 573
Si vous êtes un développeur ASP travaillant pour un fournisseur d'accès Internet, il est probable que vous ne connaissez pas le chemin physique d'accès aux fichiers que vous chargez, y compris celui de vos fichiers de base de données.
Vous pouvez obtenir le chemin d'accès physique à un fichier de base de données présent sur un serveur en utilisant la méthode MapPath de l'objet serveur ASP. Note: Les techniques présentées dans la présente section sont valables uniquement si votre base de données est basée sur un fichier, comme par exemple, une base de données Microsoft Access, qui stocke les données dans un fichier .mdb.
Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont placés dans un dossier situé dans l'arborescence locale du serveur. Par exemple, sur un serveur exécutant Microsoft IIS, le chemin d'accès vers votre page d'accueil peut se présenter comme suit : c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
En revanche, l'URL permettant d'ouvrir votre fichier n'utilise pas de chemin d'accès physique. Elle utilise le nom de serveur ou de domaine suivi d'un chemin d'accès virtuel, comme dans l'exemple suivant : www.plutoserve.com/jsmith/index.htm
Si vous travaillez avec un fournisseur d'accès, il se peut que vous ne connaissiez pas le chemin d'accès physique des fichiers que vous chargez. Généralement, les fournisseurs d'accès vous fournissent un hôte FTP, parfois un répertoire hôte, ainsi qu'un nom de connexion et un mot de passe. Ils vous indiquent également une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/. Si vous connaissez cette URL, vous pouvez obtenir le chemin d'accès virtuel d'un fichier : il s'agit du chemin qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous connaissez le chemin d'accès virtuel, vous pouvez obtenir le chemin d'accès physique à un fichier présent sur le serveur en utilisant la méthode MapPath. La méthode MacPath utilise le chemin d'accès virtuel comme argument et renvoie le chemin d'accès physique et le nom du fichier. Voici la syntaxe de la méthode : Server.MapPath("/virtualpath")
Server.MapPath("/jsmith/index.htm") Pour plus d'informations sur la méthode MapPath, consultez la documentation en ligne disponible avec Microsoft IIS.
Pour écrire une chaîne de connexion sans DSN dans un fichier de base de données situé sur un serveur distant, vous devez connaître le chemin d'accès physique au fichier. Par exemple, voici une chaîne de connexion sans DSN typique pour une base de données Microsoft Access : Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
1 Chargez le fichier de base de données le fichier de base de données sur le serveur distant et notez son chemin d'accès
2 Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données). 3 Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Chaîne de connexion personnalisée dans le menu. 4 Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux. 5 Tapez la chaîne de connexion et utilisez la méthode MapPath pour fournir le paramètre DBQ.
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath¬ ("/jsmith/data/statistics.mdb") Note: Si la connexion n'échoue, cliquez deux fois sur la chaîne de connexion ou contactez votre fournisseur d'accès pour vous assurer que le pilote de base de données que vous avez spécifié dans la chaîne de connexion est installé sur le serveur distant. Vérifiez également que le fournisseur d'accès dispose de la version la plus récente du pilote. Par exemple, une base de données créée dans Microsoft Access 2000 ne fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft Access Driver, version 4.0 ou ultérieure.
double-cliquez sur le nom du jeu d'enregistrements dans le panneau Liaisons ou Comportements de serveur, et sélectionnez la connexion que vous venez de créer dans le menu Connexion), et utilisez la nouvelle connexion avec toutes les nouvelles pages que vous créerez.
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procédant de la façon suivante :
1 Ouvrez une page ASP dans Dreamweaver, puis accédez au panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la
3 Modifiez les informations de connexion, puis cliquez sur OK.
1 Ouvrez une page ASP dans Dreamweaver, puis accédez au panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la
3 Dans la boîte de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion.
Pour réaliser les opérations présentées dans la présente section, vous devez avoir configuré une application PHP. Une base de données MySQL doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP. Pour les besoins du développement, téléchargez et installez la version Windows Essentials du serveur de base de données MySQL.
2 Cliquez sur le bouton Plus (+) dans le panneau, sélectionnez Connexion MySQL dans le menu et définissez les
• Dans la zone Serveur MySQL, entrez une adresse IP ou un nom de serveur pour l'ordinateur qui héberge MySQL. Si MySQL et PHP s'exécutent sur le même ordinateur, vous pouvez entrer localhost.
• Dans la zone Base de données, entrez le nom de la base de données ou cliquez sur Sélectionner et choisissez une base de données dans la liste de bases de données MySQL, puis cliquez sur Tester. Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, revérifiez le nom du serveur, le nom d'utilisateur et le mot de passe. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier d'évaluation utilisé par Dreamweaver pour traiter les pages dynamiques. Dreamweaver tente de deviner au mieux la valeur à entrer automatiquement pour le préfixe d'URL dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site. Toutefois, il peut parfois s'avérer nécessaire de modifier le préfixe d'URL pour garantir le fonctionnement de votre connexion. Assurez-vous que le préfixe d'URL est bien l'URL que les utilisateurs entrent dans leur navigateur pour ouvrir l'application Web, moins le nom de fichier (ou la page d'accueil) de l'application. 3 Cliquez sur OK.
MySQL client » (Le client ne prend pas en charge le protocole d'identification requis. Essayez de mettre à jour le client MySQL.) lors de l'évaluation d'une connexion de base de données PHP à MySQL 4.1, consultez la section “Résolution des messages d'erreur MySQL” on page 578.
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procédant de la façon suivante :
1 Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la
3 Modifiez les informations de connexion, puis cliquez sur OK.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la
3 Dans la boîte de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion.
Résolution des problèmes d'autorisation Les problèmes d'autorisation sont la cause la plus fréquente des erreurs d'accès aux dossiers ou aux fichiers. Si votre base de données est installée sur un ordinateur équipé de Windows 2000 ou Windows XP et si vous recevez un message d'erreur lorsque vous tentez d'afficher une page dynamique dans un navigateur Web ou en mode En direct, l'erreur peut provenir d'un problème d'autorisation. Le compte Windows qui tente d'accéder à la base de données ne dispose pas des droits suffisants. Le compte peut être le compte anonyme Windows (par défaut, IUSR_computername) ou un compte utilisateur spécifique si la page a été sécurisée pour un accès authentifié. Vous devez modifier les autorisations afin d'attribuer les droits d'accès appropriés au compte IUSR_computername pour que le serveur Web puisse accéder au fichier de base de données. En outre, le dossier contenant le fichier de base de données doit également disposer de certaines autorisations pour écrire dans cette base de données. Si la page doit être accédée de manière anonyme, attribuez le contrôle complet au compte IUSR_computername pour le dossier et le fichier de base de données, comme indiqué dans la procédure ci-dessous. En outre, si le chemin d'accès à la base de données est référencé au moyen de la convention UNC (\\Serveur\Share), assurez-vous que les Autorisations de partage attribuent les droits d'accès complets au compte IUSR_computername. Cette étape s'applique même si le partage est situé au niveau du serveur Web local. Si vous copiez la base de données depuis un autre emplacement, il est possible qu'elle n'hérite pas des autorisations d'accès de son dossier de destination et que vous deviez modifier les autorisations d'accès pour la base de données.
1 Assurez-vous que vous avez des privilèges d'administrateur sur cet ordinateur. 2 Dans l'Explorateur Windows, localisez le fichier de la base de données ou le dossier contenant la base de données,
3 Cliquez sur l'onglet Sécurité.
4 Si le compte IUSR_computername n'apparaît pas dans la liste des noms d'utilisateur ou de groupe, cliquez sur le
5 Dans la boîte de dialogue de sélection des utilisateurs ou des groupes, cliquez sur Avancé.
7 Cliquez sur le bouton de recherche pour afficher une liste des noms de compte associés à l'ordinateur. 8 Sélectionnez le compte IUSR_computername et cliquez sur OK, puis cliquez une nouvelle fois sur OK pour
9 Pour attribuer les droits d'accès complets au compte IUSR, cochez la case Contrôle total et cliquez sur OK.
1 Assurez-vous que vous avez des privilèges d'administrateur sur cet ordinateur. 2 Dans l'Explorateur Windows, localisez le fichier de la base de données ou le dossier contenant la base de données,
3 Cliquez sur l'onglet Sécurité.
4 Si le compte IUSR_computername n'est pas répertorié parmi les comptes Windows dans la boîte de dialogue
5 Dans la boîte de dialogue de sélection des utilisateurs, ordinateurs ou groupes, choisissez le nom de l'ordinateur à
6 Sélectionnez le compte IUSR_computername et cliquez sur Ajouter. 7 Pour attribuer les droits d'accès complets au compte IUSR, sélectionnez Contrôle total dans le menu Type d'accès,
Pour une sécurité accrue, les autorisations peuvent être définies de façon à ce que le droit d'accès en lecture soit désactivé pour le dossier Web contenant la base de données. Il ne sera pas permis de parcourir ce dossier, mais les pages Web continueront d'accéder à la base de données. Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, consultez les notes techniques du centre de support technique Adobe :
• Définition des autorisations d'un serveur Web IIS à l'adresse www.adobe.com/go/server_permissions_fr
Ces messages d'erreur Microsoft peuvent se produire lorsque vous demandez une page dynamique au serveur si vous utilisez Internet Information Server (IIS) avec un système de base de données Microsoft tel que SQL Server ou Access. Note: Adobe n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas de résoudre votre problème, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft à l'adresse http://support.microsoft.com/. Pour plus d'informations sur les erreurs de type 80004005, voir la section « Guide de dépannage pour les erreurs de type 80004005 au niveau des composants Active Server Pages et Microsoft Data Access (Q306518) » sur le site Web de Microsoft à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q306518.
• 80004005 - General error Unable to open registry key 'DriverId' (Erreur générale. Impossible d'ouvrir la clé du registre DriverId) Les causes et les solutions possibles sont les suivantes :
Note: Si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC. Si vous utilisez Microsoft Access, le fichier de base de données (.mdb) peut être verrouillé Ce verrouillage peut être la conséquence d'un DSN avec un nom différent accédant à la base de données. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier contenant le fichier de base de données (.mdb) et supprimez-le. Si un autre DSN pointe vers le même fichier de base de données, vous pouvez supprimer ce DSN pour empêcher tout risque d'erreur à l'avenir. Redémarrez l'ordinateur après avoir apporté des modifications.
"(inconnu)" ; fichier en cours d'utilisation) Cette erreur survient lorsque vous utilisez une base de données Microsoft Access et tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Une variante de ce message d'erreur est « 80004005 Microsoft Jet database engine cannot open the file (unknown) » (Le moteur de base de données Jet ne peut pas ouvrir le fichier (inconnu)). Ceci est probablement dû à un problème d'autorisations. Voici quelques causes et solutions spécifiques :
Windows adéquats pour une base de données basée sur fichier ou pour le dossier contenant le fichier. Vérifiez les droits d'accès du compte IIS (IUSR) dans le gestionnaire utilisateur.
Pour modifier ce délai, choisissez Démarrer > Paramètres > Panneau de configuration > Outils d'administration > Sources de données (ODBC). Cliquez sur l'onglet Système, sélectionnez le DSN approprié puis cliquez sur le bouton Configurer. Cliquez sur le bouton Options et fixez la valeur de délai d'expiration de la page à 5000. Si les problèmes persistent, consultez les points suivants dans la base de connaissances Microsoft :
Cette erreur est générée par SQL Server s'il refuse ou ne reconnaît pas le compte ou le mot de passe de connexion soumis (si vous utilisez une sécurité standard), ou si un compte Windows n'est pas associé à un compte SQL (si vous utilisez une sécurité intégrée). Les solutions possibles sont les suivantes :
être définis dans la ligne de chaîne de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe.
Cette erreur survient lorsqu'un événement met à jour un jeu d'enregistrements ou y insère des données. Les causes et les solutions possibles sont les suivantes :
• La base de données est peut-être hors du répertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et parcourir les données, vous risquez de ne pas pouvoir les mettre à jour, à moins que la base de données ne soit placée dans le répertoire wwwroot.
Pour plus d'informations sur cette erreur, voir « RBN : Erreur ASP 'La requête ne peut pas être mise à jour' lorsque vous mettez l'enregistrement de la table à jour » dans la base de connaissance Microsoft à l'adresse suivante http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174640.
Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insérer l'enregistrement ou Mettre à jour l'enregistrement et que le comportement du serveur tente de définir la valeur d'une colonne Date/Heure d'une base de données Microsoft Access sur une chaîne vide ("").
Date/Heure Access avec des chaînes vides ("") ou avec toute autre valeur ne correspondant pas à la gamme de valeurs spécifiées pour le type de données.
Cette erreur survient lorsqu'une colonne spécifiée dans votre requête SQL n'existe pas dans la table de la base de données. Vérifiez les noms des colonnes de votre base de données par rapport à votre requête SQL. Cette erreur est souvent due à une typographie erronée.
Cette erreur survient lorsque vous prévisualisez une page contenant un comportement de serveur Insérer l'enregistrement dans un navigateur Web et que vous essayez de l'utiliser pour insérer un enregistrement dans une base de données Microsoft Access. Vous tentez peut-être d'insérer un enregistrement dans un champ de base de données qui comporte un point d'interrogation(?) dans son nom de champ. Le point d'interrogation est un caractère spécial pour certains moteurs de bases de données, notamment Microsoft Access, et il ne doit pas être utilisé pour les noms de tables de bases de données ou de champs. Ouvrez votre système de base de données, supprimez le point d'interrogation (?) des noms de champs et mettez à jour les comportements de serveur sur la page qui se rapporte à ce champ.
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insérer l'enregistrement. Cette erreur résulte généralement d'un ou de plusieurs problèmes, cités ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la base de données :
Par exemple, « date » est un mot réservé et ne peut pas être utilisé pour les noms de champs d'une base de données.
L'erreur peut également survenir lorsqu'un masque d'entrée est défini pour un objet de la base de données et que les données insérées ne sont pas conformes au masque. Pour résoudre le problème, évitez d'utiliser des mots réservés tels que « date », « name » « select », « where » et « level » lorsque vous spécifiez des noms de colonnes dans votre base de données. Eliminez également les espaces et les caractères spéciaux. Consultez les pages Web suivantes pour des listes détaillées de mots réservés dans les systèmes de bases de données courants.
• Microsoft SQL Server à l'adresse http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/tsqlref/ts_rarz_9oj7.asp
Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Ce problème survient lorsque la page tente d'afficher des données à partir d'un jeu d'enregistrements vide. Pour le résoudre, appliquez le comportement de serveur Afficher la région au contenu dynamique à afficher sur la page, de la manière suivante : 1 Sélectionnez le contenu dynamique de la page. 2 Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et choisissez Afficher la région >
3 Sélectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK. 4 Répétez les étapes 1 à 3 pour chaque élément de contenu dynamique sur la page.
4.1 : « Client does not support authentication protocol requested. Consider upgrading MySQL client » (Ce client ne prend pas en charge le protocole d'authentification demandé. Il peut être nécessaire de mettre à niveau le client MySQL). Il peut être nécessaire de revenir à une version précédente de MySQL ou d'installer PHP 5 et copier certaines bibliothèques de liaison dynamique (DLL). Vous trouverez des instructions détaillées dans la rubrique “Configuration d'un environnement de développement PHP” on page 560.
Utilisation de la commande Supprimer les scripts de connexion Vous pouvez utiliser la commande Supprimer les scripts de connexion pour supprimer les scripts que Dreamweaver place dans un dossier distant pour accéder aux bases de données. Ces scripts ne sont nécessaires que lors de la phase de création dans Dreamweaver. Lorsque vous sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation ou Utilisation de la DSN sur le serveur d'évaluation dans la boîte de dialogue de connexion à une base de données, Dreamweaver charge un script MMHTTPDB sur le serveur d'évaluation. Ceci permet à Dreamweaver de manipuler le pilote de base de données distant avec le protocole HTTP, ce qui permet en retour à Dreamweaver d'obtenir, dans la base de données, les informations nécessaires à la création de votre site. Toutefois, ce fichier ne permet pas de voir les noms des sources de données (DSN) définis sur l'ordinateur. Si les DSN et les bases de données ne sont pas protégés par un mot de passe, le script permet à une personne malveillante d'envoyer des commandes SQL à la base de données. Les fichiers de scripts MMHTTPDB se trouvent dans le dossier _mmServerScripts, qui est lui-même situé à la racine du site Web. Note: Le navigateur de fichiers de Dreamweaver (le panneau Fichiers) ne montre pas le dossier _mmServerScripts. Celuici n’est visible qu’à partir d’un client FTP tiers ou du navigateur de fichiers. Avec certaines configurations, ces scripts sont inutiles. Comme ces scripts ne sont pas utilisés lors du transfert des pages Web aux visiteurs du site, il est conseillé de ne pas les placer sur un serveur de production. Si vous avez transféré le fichier de scripts MMHTTPDB sur un serveur de production, il est conseillé de le supprimer. La commande Supprimer les scripts de connexion efface automatiquement ces fichiers.
Affichage de panneaux de développement d'applications Web Sélectionnez la catégorie Données du menu Catégorie du panneau Insertion afin d'afficher un groupe de boutons permettant d'ajouter du contenu dynamique et des comportements de serveur à votre page. Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fenêtre de document. Amenez la souris au-dessus d'une icône afin d'afficher une infobulle décrivant la fonction de ce bouton. Le panneau Insertion comprend des boutons qui permettent d'ajouter les éléments suivants sur la page :
• Texte ou tableaux dynamiques • Barres de navigation d'un enregistrement Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplémentaires apparaissent dans la catégorie correspondante du panneau Insertion, ce qui vous permet d'insérer du code dans la page. Par exemple, si vous visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catégorie CFML du panneau Insertion. Plusieurs panneaux vous permettent de créer des pages dynamiques :
Note: Le panneau Composants n'est activé que si vous ouvrez une page ColdFusion.
“Panneau Liaisons” on page 590 “Panneau Comportements de serveur” on page 591 “Panneau Bases de données” on page 591 “Panneau Composants” on page 592 Didacticiel consacré à l'espace de travail de développement
Une fois la connexion à la base de données réalisée, vous pouvez afficher sa structure et ses données dans Dreamweaver. 1 Ouvrez le panneau Base de données (Fenêtre > Bases de données).
Note: Dreamweaver recherche le site en cours sur le serveur ColdFusion défini. Si aucune base de données n'apparaît dans le panneau, vous devez créer une connexion de base de données. 2 Pour afficher les tables, les procédures stockées et les modes dans la base de données, cliquez sur le signe plus (+)
3 Pour afficher les colonnes de la table, cliquez sur un nom de table.
4 Pour afficher les données dans une table, cliquez sur le nom de la table dans la liste avec le bouton droit de la souris
“Configuration d'un environnement de développement ColdFusion” on page 559 “Configuration d'un environnement de développement PHP” on page 560 “Configuration d'un environnement de développement ASP” on page 560
Les développeurs d'applications Web déboguent souvent leurs pages en les vérifiant régulièrement dans un navigateur Web. Vous pouvez afficher rapidement vos pages dynamiques dans un navigateur sans avoir à les télécharger manuellement sur un serveur au préalable. Pour lancer un aperçu des pages dynamiques, vous devez compléter la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site.
L'option Aperçu dans le navigateur ne télécharge pas les pages associées (pages de résultats ou d'informations détaillées), les fichiers dépendants (tels que fichiers d'image) ou les inclusions côté serveur. Pour télécharger un fichier manquant, choisissez Fenêtre > Site pour ouvrir le panneau Site, sélectionnez le fichier dans Dossier local et cliquez sur la flèche haut bleue de la barre d'outils pour copier le fichier dans le dossier du serveur Web.
“Configuration d'un serveur d'évaluation” on page 50
Les utilisateurs chevronnés travaillant avec des systèmes de base de données de grande envergure tels qu'Oracle devront limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la conception. Une base de données Oracle peut contenir des éléments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez créer un schéma dans Oracle, puis l'utiliser dans Dreamweaver pour filtrer les éléments indésirables au moment de la conception. Note: Vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access. D'autres utilisateurs peuvent avoir intérêt à limiter la quantité d'informations récupérées par Dreamweaver au moment de la conception. Certaines bases de données contiennent des douzaines, voire des centaines de tableaux, et vous pouvez préférer ne pas tous les répertorier tous pendant que vous travaillez. Un schéma ou catalogue peut limiter le nombre d'éléments de base de données récupérés au moment de la conception. Pour commencer, créez un schéma ou un catalogue dans votre application de base de données pour pouvoir ensuite l'appliquer dans Dreamweaver. Consultez la documentation de votre système de base de données ou consultez votre administrateur système. Note: Vous ne pouvez pas appliquer un schéma ou un catalogue dans Dreamweaver si vous développez une application ColdFusion, 1 Ouvrez une page dynamique dans Dreamweaver, puis la fenêtre Bases de données (Fenêtre > Bases de données).
(Windows) ou en appuyant sur le bouton Contrôle (Macintosh) et choisissez Modifier la connexion dans le menu déroulant.
2 Cliquez sur Avancé dans la boîte de dialogue de la connexion. 3 Indiquez votre schéma ou catalogue et cliquez sur OK.
ColdFusion et les commandes ASP Modifiez la procédure stockée sélectionnée. Les options disponibles dépendent de la technologie de serveur utilisée. ❖ Modifiez les options à votre convenance. Lorsque vous sélectionnez une nouvelle option dans l'inspecteur,
Cet inspecteur Propriétés s'affiche lorsque Dreamweaver rencontre un type d'entrée inconnu. En général, cela est dû à une erreur de frappe ou à autre problème lié à la saisie de données. Si vous modifiez le type de champ dans l'inspecteur Propriétés et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la faute d'orthographe) l'inspecteur Propriétés se met à jour pour afficher les propriétés du type reconnu. Définissez les options suivantes dans l'inspecteur Propriétés : Nom du champ Attribue un nom au champ. Cette zone est obligatoire et le nom doit être unique. Type Définit le type d'entrée du champ. Le contenu de cette zone reflète la valeur du type d'entrée apparaissant
Valeur Définit la valeur du champ. Paramètres Ouvre la boîte de dialogue Paramètres pour que vous puissiez visualiser les attributs actuels du champ et
Dreamweaver et la conception de pages dynamiques Pour concevoir et créer un site Web dynamique avec succès, exécutez la procédure générale suivante. 1 Conception de la page
L'une des méthodes les plus courantes pour insérer un contenu dynamique dans une page Web consiste à créer un tableau pour présenter le contenu puis à importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette méthode vous permet de présenter divers types d'informations dans un format structuré. 2 Création d'une source de contenu dynamique
Lorsque vous insérez un élément de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insère un script côté serveur dans le code source de la page. Ce script donne pour instruction au serveur de récupérer des données à partir de la source définie et de les restituer dans la page Web. Pour insérer un contenu dynamique dans une page Web, procédez de l'une des manières suivantes :
• remplacez une chaîne de texte ou un autre espace réservé ; insérez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut de valeur d'un champ de formulaire. 4 Ajout de comportements de serveur à une page
Web à l'aide des comportements de serveur. Les comportements de serveur correspondent à des sections de code prédéfinies côté serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivité et leurs fonctionnalités. Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative à un site Web sans que vous ayez à rédiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de document ColdFusion, ASP et PHP. Les comportements de serveur sont développés et testés de sorte à être rapides, fiables et solides. Les comportements de serveur intégrés prennent en charge des pages adaptées à différents types de plates-formes et de navigateurs. Grâce à l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes à une page est aussi simple que l'insertion d'éléments de texte et de conception. Les comportements de serveur suivants sont disponibles :
à afficher sur chaque page.
Principale/Détails et de formulaires destinés à mettre à jour les informations d'une base de données.
• Création de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les enregistrements précédant ou suivant un enregistrement de base de données.
5 Test et débogage de la page
être adaptées aux personnes souffrant d'un handicap.
A propos des sources de contenu dynamique Une source de contenu dynamique est un stock d'informations à partir duquel il est possible de récupérer du contenu dynamique en vue de l'afficher dans une page Web. Différentes sources peuvent être utilisées comme sources de contenu dynamique : des informations enregistrées dans une base de données, mais aussi des valeurs envoyées au moyen d'un formulaire HTML, des valeurs contenues dans un objet de serveur, etc. Dreamweaver vous permet aisément d'établir une connexion à une base de données et de créer un jeu d'enregistrements à partir duquel extraire le contenu dynamique. Un jeu d'enregistrements correspond au résultat d'une requête de base de données. Il permet d'extraire les informations spécifiques demandées et de les afficher dans une page donnée. L'utilisateur définit le jeu d'enregistrements en fonction des informations présentes dans la base de données et du contenu qu'il souhaite afficher. Certains fournisseurs de technologie utilisent une terminologie différente pour désigner un jeu d'enregistrements. Dans les technologies ASP et ColdFusion, un jeu d'enregistrements est défini comme requête. Si vous utilisez d'autres sources de données, telles que des entrées utilisateur ou des variables de serveur, le nom de la source de données défini dans Dreamweaver est identique à celui de la source de données. Les sites Web dynamiques requièrent une source de données à partir de laquelle le contenu dynamique peut être récupéré et affiché. Dreamweaver permet d'utiliser des bases de données, des procédures stockées, des variables de demande, d'URL, de serveur et de formulaire, ainsi que d'autres sources de contenu dynamique. Suivant la source de données, il est possible soit de récupérer un nouveau contenu pour répondre à une demande, soit de modifier la page pour satisfaire aux besoins des utilisateurs. Toute source de contenu définie dans Dreamweaver est ajoutée à la liste des sources de contenu du panneau Liaisons. Vous pouvez ensuite insérer la source de contenu dans la page actuellement sélectionnée.
Une requête peut générer un jeu d'enregistrements n'incluant que certaines colonnes, certains enregistrements ou encore une combinaison des deux. Un jeu d'enregistrements peut également inclure tous les enregistrements et toutes les colonnes d'une table de base de données. Toutefois, comme les applications n'ont généralement pas besoin de toutes les informations stockées dans une base de données, il est fortement conseillé d'essayer de limiter au maximum la taille des jeux d'enregistrements. De plus, comme le serveur Web stocke temporairement en mémoire le jeu d'enregistrements, l'utilisation d'un jeu de taille limitée économise de la mémoire et peut de ce fait améliorer les performances du serveur. Les requêtes de base de données sont écrites en SQL (Structured Query Language), langage simple permettant de récupérer des informations d'une base de données, mais aussi d'ajouter des données à une base et d'en supprimer. Le générateur SQL fourni avec Dreamweaver permet de créer des requêtes simples sans maîtriser le langage SQL. Toutefois, si vous voulez créer des requêtes SQL complexes, une connaissance de base de ce langage vous permet de créer des requêtes plus avancées et vous offre davantage de souplesse pour la conception de pages dynamiques. Avant de définir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devez créer une connexion à une base de données et saisir des données dans la base si celle-ci n'en contient pas. Si vous n'avez pas encore défini de connexion à une base de données pour votre site, consultez le chapitre consacré spécifiquement à la mise en place d'une connexion à une base de données dans le contexte de la technologie de serveur que vous utilisez, et suivez les instructions fournies.
“Définition un jeu d'enregistrements sans rédiger d'instructions SQL” on page 592
Les paramètres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour définir un paramètre d'URL, vous devez créer un formulaire ou un lien hypertexte utilisant la méthode GET pour l'envoi de données. Les informations sont annexées à l'URL de la page demandée et communiquées au serveur. Lorsque vous utilisez des variables d'URL, la chaîne de la requête contient une ou plusieurs paires nom-valeur associées aux champs du formulaire. Ces paires nom-valeur sont annexées à l'URL. Les paramètres de formulaire permettent de stocker les informations récupérées dans la requête HTTP d'une page Web. Si vous créez un formulaire utilisant la méthode POST, les données envoyées par le formulaire sont transmises au serveur. Avant de commencer, vérifiez que vous avez transmis un paramètre de formulaire au serveur.
“Paramètres d'URL” on page 689 “Définition de paramètres de formulaire” on page 600
Comme les variables de session sont conservées pendant toute la session de l'utilisateur, même lorsque celui-ci passe d'une page à l'autre dans le site Web, elles conviennent parfaitement au stockage des préférences de l'utilisateur. Les variables de session peuvent également être utilisées pour insérer une valeur dans le code HTML de la page, attribuer une valeur à une variable locale ou fournir une valeur permettant d'évaluer une expression conditionnelle. Avant de définir des variables de session pour une page, vous devez les créer dans le code source. Après avoir créé une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour récupérer sa valeur et l'utiliser dans une page Web.
Les variables de session stockent des informations (très souvent des paramètres de formulaire ou d'URL envoyés par les utilisateurs) et les rendent accessibles à toutes les pages de l'application pendant la durée de la visite d'un utilisateur. Ainsi, lorsqu'un utilisateur se connecte à un portail Web lui donnant accès à une messagerie, des cours boursiers, des bulletins météo et des dossiers d'actualité, l'application Web stocke les informations de connexion dans une variable de session qui identifie l'utilisateur dans toutes les pages du site. Cela permet à l'utilisateur de ne voir que le type de contenu qu'il a sélectionné pendant qu'il parcourt le site. Les variables de session peuvent également proposer un mécanisme de sécurité en mettant fin à la session d'un utilisateur si le compte reste inactif pendant un certain temps. Cette méthode présente aussi l'avantage de libérer les ressources de traitement et la mémoire du serveur lorsque les utilisateurs oublient de se déconnecter d'un site Web. Les variables de session stockent les informations pendant toute la durée de la session d'un utilisateur. La session commence lorsque l'utilisateur ouvre une page dans l'application et se termine lorsqu'il n'ouvre pas d'autre page dans l'application pendant un laps de temps donné ou lorsqu'il met explicitement fin à la session (en général, en cliquant sur un lien de déconnexion). Tant qu'elle existe, la session est spécifique à un utilisateur donné ; chaque utilisateur dispose donc d'une session qui lui est propre. Faites appel aux variables de session pour stocker des informations auxquelles chaque page de l'application Web doit pouvoir accéder. Ces informations peuvent aller du nom de l'utilisateur à ses préférences pour la taille des polices à l'écran, en passant par un indicateur signalant la réussite ou l'échec de sa connexion. Les variables de session sont également souvent utilisées pour assurer le suivi d'un comptage cumulatif, tel que le nombre de questions auxquelles un utilisateur a répondu correctement jusqu'à présent dans un quiz en ligne ou les produits qu'il a sélectionnés dans un catalogue en ligne. Les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configuré pour accepter les cookies. Le serveur crée un numéro d'ID de session qui permet l'identification univoque de l'utilisateur lors de l'initialisation de la première session, puis envoie au navigateur de l'utilisateur un cookie contenant ce numéro d'ID. Lorsque l'utilisateur demande une nouvelle page située sur le serveur, celui-ci lit le cookie dans le navigateur pour identifier l'utilisateur et récupérer ses variables de session personnelles, stockées en mémoire.
Avant de créer une variable de session, vous devez commencer par obtenir les informations à stocker, puis les envoyer au serveur pour stockage. Vous pouvez recueillir et envoyer des informations au serveur à l'aide de formulaires HTML ou de liens hypertexte contenant des paramètres d'URL. Vous pouvez également obtenir des informations à partir d'une base de données, des cookies stockés dans l'ordinateur d'un utilisateur ou des en-têtes HTTP envoyés par son navigateur avec une demande de page.
Une fois que vous avez envoyé les informations au serveur, vous pouvez les stocker dans des variables de session en ajoutant à la page spécifiée par le paramètre de formulaire ou d'URL le code adapté à votre modèle de serveur. Appelée page de destination, cette page est spécifiée soit dans l'attribut action du formulaire HTML, soit dans l'attribut href du lien hypertexte situé dans la première page. Après avoir stocké une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la récupérer et l'utiliser dans une application Web. Après avoir défini la variable de session dans Dreamweaver, vous pouvez en insérer la valeur dans une page. La syntaxe HTML de chaque attribut se présente comme suit : <form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">
Chaque lien comporte un paramètre d'URL appelé fontsize. Il envoie au serveur la préférence de texte de l'utilisateur, comme le montre l'exemple suivant, spécifique à Adobe ColdFusion® : <a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a> En haut de la page de destination, saisissez le code suivant pour créer une session appelée font_pref qui stocke la préférence de l'utilisateur pour la taille de police. ColdFusion <CFSET session.font_pref = url.fontsize>
Les variables d'application étant conservées pendant toute la durée d'utilisation de l'application, quel que soit l'utilisateur, elles conviennent parfaitement au stockage des informations nécessaires à tous les utilisateurs, telles que l'heure et la date courantes. La valeur de la variable d'application est définie dans le code de l'application.
Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates.
Variables cookie Accèdent aux cookies transmis au serveur par le navigateur. Variables CGI Fournissent des informations sur le serveur exécutant ColdFusion et sur le navigateur à l'origine d'une demande de page, ainsi que d'autres informations sur l'environnement de traitement. Variables de serveur Sont accessibles à tous les clients et à toutes les applications du serveur. Elles sont conservées
Variables locales Créées à l'aide de la balise CFSET ou CFPARAM dans une page ColdFusion.
“Définition de variables de serveur” on page 602
Panneau Liaisons Le panneau Liaisons vous permet de définir et de modifier des sources de contenu dynamique, d'ajouter du contenu dynamique à une page et d'appliquer des formats de données à du texte dynamique. Ce panneau permet d'effectuer les opérations suivantes :
• “Utilisation de formats de données prédéfinis” on page 621 • “Association de sources de données XML” on page 531 • “Affichage des données XML dans des pages XSLT” on page 531 • “Paramètres d'URL” on page 689 • “Définition de variables de session” on page 600 • “Définition de variables d'application dans ASP et ColdFusion” on page 601 • “Définition de variables de serveur” on page 602 • “Mise en mémoire cache de sources de contenu” on page 606 • “Copie d'un jeu d'enregistrements d'une page vers une autre” on page 606 • “Création d'attributs HTML dynamiques” on page 609
Ce panneau vous permet d'ajouter les comportements de serveur Dreamweaver sur une page, de les modifier et d'en créer de nouveaux. Ce panneau permet d'effectuer les opérations suivantes :
• “Définition de sources de contenu dynamique” on page 592 • “Création de pages principale et de détails en une seule opération” on page 642 • “Création de pages de recherche et de résultats” on page 643 • “Création d'une page d'insertion d'enregistrement” on page 650 • “Création d'une page de mise à jour d'enregistrement” on page 654 • “Création d'une page de suppression d'enregistrement” on page 659 • “Création d'une page à accès restreint” on page 677 • “Création d'une page d'enregistrement” on page 672 • “Création d'une page d'ouverture de session” on page 675 • “Création d'une page à accès restreint” on page 677 • “Ajout d'une procédure stockée (ColdFusion)” on page 670 • “Suppression de contenu dynamique” on page 611 • “Ajout de comportements de serveur personnalisés” on page 623
Le panneau Bases de données vous permet de créer des connexions de base de données, d'inspecter les bases de données et d'insérer un code de base de données dans vos pages. Ce panneau vous permet de visualiser votre base de données et de vous y connecter :
• “Connexions aux bases de données pour les développeurs ASP” on page 564 • “Connexions aux bases de données pour les développeurs PHP” on page 571
Le panneau Composants vous permet de créer et d'inspecter les composants et d'insérer un code de composant dans vos pages. Note: Ce panneau ne s'ouvre pas en mode Création. Ce panneau permet d'effectuer les opérations suivantes : ❖ “Utilisation de composants ColdFusion” on page 680
Définition un jeu d'enregistrements sans rédiger d'instructions SQL Vous pouvez créer un jeu d'enregistrements sans avoir à entrer d'instructions SQL manuellement. 1 Dans la fenêtre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requête) dans le menu
La boîte de dialogue Jeu d'enregistrements simplifiée s'affiche. Si vous développez un site ColdFusion, la boîte de dialogue Jeu d'enregistrements qui s'affiche est légèrement différente. (Si la boîte de dialogue Jeu d'enregistrements avancée s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifiée.) 4 Complétez les options de la boîte de dialogue Jeu d'enregistrements pour votre type de document.
5 Cliquez sur le bouton Tester pour exécuter la requête et vérifier qu'elle récupère les informations attendues.
6 Cliquez sur OK pour ajouter le jeu d'enregistrements à la liste des sources de contenu disponibles du panneau
1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux. 2 Sélectionnez une connexion dans le menu déroulant Connexion.
Ce menu déroulant répertorie toutes les tables de la base de données spécifiée. 4 Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées,
5 Pour limiter le nombre d'enregistrements renvoyés depuis la table, complétez la section Filtre :
• Dans le deuxième menu déroulant, sélectionnez une expression conditionnelle pour comparer la valeur sélectionnée dans chaque enregistrement à la valeur de référence.
• Dans la zone, saisissez la valeur test. Si la valeur indiquée dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements. 6 (Facultatif) Pour trier les enregistrements, sélectionnez une colonne de tri, puis indiquez si les enregistrements
7 Cliquez sur Tester pour vous connecter à la base de données et créer une instance de la source de données, et cliquez
Un tableau répertoriant les données renvoyées s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. 8 Cliquez sur OK. Le jeu d'enregistrements que vous venez de définir s'affiche dans le panneau Liaisons.
Définissez un jeu d'enregistrements pour les types de document ColdFusion comme source de contenu dynamique, sans qu'il soit nécessaire de rédiger manuellement des instructions SQL. 1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux. 2 Si vous définissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans
Nouvelle fonction pour créer une fonction. Note: Le menu déroulant Fonction n’est disponible que si le document actuel est un fichier CFC, et si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure. Le jeu d'enregistrements sera défini dans cette fonction. 3 Sélectionnez une source de données dans le menu déroulant Source de données.
Il se peut qu'un nom d'utilisateur et un mot de passe soient nécessaires pour accéder aux sources de données dans ColdFusion. S'ils ne vous ont pas été communiqués, contactez l'administrateur ColdFusion de votre société. 5 Dans le menu déroulant Table, sélectionnez la table de base de données qui fournira des données au jeu
Ce menu déroulant répertorie toutes les tables de la base de données spécifiée. 6 Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées,
7 Pour limiter le nombre d'enregistrements renvoyés depuis la table, complétez la section Filtre :
• Dans le deuxième menu déroulant, sélectionnez une expression conditionnelle pour comparer la valeur sélectionnée dans chaque enregistrement à la valeur de référence.
• Dans la zone, saisissez la valeur test. Si la valeur indiquée dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements. 8 (Facultatif) Pour trier les enregistrements, sélectionnez une colonne de tri, puis indiquez si les enregistrements
9 Cliquez sur Tester pour vous connecter à la base de données et créer une instance de la source de données.
10 Cliquez sur OK. Le jeu d'enregistrements ColdFusion que vous venez de définir s'affiche dans le panneau Liaisons.
Rédigez vos propres instructions SQL à l'aide de la boîte de dialogue Jeu d'enregistrements avancée, ou créez une instruction SQL à l'aide de l'arborescence Eléments de base de données graphique. 1 Dans la fenêtre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requête) dans le menu
La boîte de dialogue Jeu d'enregistrements avancée s'affiche. Si vous développez un site ColdFusion, la boîte de dialogue Jeu d'enregistrements qui s'affiche est légèrement différente. (Si la boîte de dialogue Jeu d'enregistrements simplifiée s'affiche à la place, cliquez sur le bouton Avancé pour en ouvrir la version avancée.) 4 Définissez les options de la boîte de dialogue Jeu d'enregistrements avancée.
5 Cliquez sur le bouton Tester pour exécuter la requête et vérifier qu'elle récupère les informations attendues.
“Définition de sources de contenu dynamique” on page 592 “Ajout d'une procédure stockée (ColdFusion)” on page 670
Définissez un jeu d'enregistrements comme source de contenu dynamique en rédigeant une instruction SQL personnalisée ou en créant une instruction SQL au moyen de l'arborescence graphique Eléments de base de données. 1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux. 2 Sélectionnez une connexion dans le menu déroulant Connexion. 3 Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Eléments de base de
Pour créer une instruction SQL à l'aide de l'arborescence Eléments de base de données, procédez comme suit :
• Développez les branches de l'arborescence jusqu'à ce que vous trouviez l'objet de base de données souhaité, par exemple une colonne de table ou une procédure stockée dans la base de données.
Par exemple, si vous sélectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insérer l'instruction associée dans l'instruction SQL. Vous pouvez également utiliser une instruction SQL prédéfinie issue d'une procédure stockée en sélectionnant la procédure stockée dans l'arborescence Eléments de base de données et en cliquant sur le bouton Procédure. Dreamweaver remplit automatiquement les zones SQL et Variable. 4 Si l'instruction SQL contient des variables, définissez leurs valeurs dans la zone Variables en cliquant sur le bouton
Si l'instruction SQL contient des variables, assurez-vous que la colonne Valeur par défaut de la section Variables contient des valeurs test correctes. La valeur d'exécution correspond généralement à un paramètre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML. Paramètres d'URL dans la colonne Valeur d'exécution : Modèle de serveur
Expression de la valeur d'exécution dans le cas d'un paramètre de formulaire
6 Si le résultat vous convient, cliquez sur OK.
La boîte de dialogue Jeu d'enregistrements avancée vous permet de rédiger des requêtes SQL personnalisées ou de créer des requêtes SQL au moyen de l'interface pointer-cliquer de l'arborescence Eléments de base de données. 1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements.
Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux. Si vous définissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver), sélectionnez une fonction CFC existante dans le menu déroulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour créer une fonction. Note: Le menu déroulant Fonction n’est disponible que si le document actuel est un fichier CFC, et si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure. Le jeu d'enregistrements sera défini dans cette fonction. 2 Sélectionnez une source de données dans le menu déroulant Source de données.
Il se peut qu'un nom d'utilisateur et un mot de passe soient nécessaires pour accéder aux sources de données dans ColdFusion. S'ils ne vous ont pas été communiqués, contactez l'administrateur ColdFusion de votre société. 4 Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Eléments de base de
5 (Facultatif) Pour créer une instruction SQL à l'aide de l'arborescence Eléments de base de données, procédez
• Développez les branches de l'arborescence jusqu'à ce que vous trouviez l'objet souhaité, par exemple une colonne de table.
Par exemple, si vous sélectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insérer l'instruction associée dans l'instruction SQL. Si l'instruction SQL contient des paramètres, définissez leurs valeurs dans la zone Paramètres en cliquant sur le bouton Plus (+) et en saisissant le nom du paramètre et sa valeur par défaut (celle que doit prendre le paramètre si aucune valeur d'exécution n'est renvoyée). Si l'instruction SQL contient des paramètres, vérifiez que la colonne Valeur par défaut de la zone Paramètres contient des valeurs test correctes. Les paramètres de la page vous permettent d'indiquer les valeurs par défaut des références aux valeurs d'exécution contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante sélectionne un enregistrement d'une base de données répertoriant les employés d'une entreprise suivant la valeur du matricule de l'employé. Vous pouvez attribuer une valeur par défaut à ce paramètre pour vous assurer qu'une valeur d'exécution sera toujours renvoyée. Dans l'exemple suivant, FormFieldName désigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule : SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))
Nom Si l'instruction SQL contient des références à des valeurs d'exécution, vérifiez que la colonne Valeur par défaut du champ Paramètres de la page contient des valeurs test correctes avant de cliquer sur Tester. Un tableau répertoriant les données de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu.
Définissez des paramètres dans une instruction SQL ; la valeur par défaut est celle attribuée au paramètre lorsque aucune valeur d'exécution n'est renvoyée. 1 Sélectionnez un paramètre dans le menu déroulant Nom. 2 Dans la zone Paramètre par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre, et
Définissez des paramètres dans une instruction SQL ; la valeur par défaut est celle attribuée au paramètre lorsque aucune valeur d'exécution n'est renvoyée. 1 Entrez un nom de paramètre dans la zone Nom. 2 Dans la zone Paramètre par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre. 3 Tapez une valeur d'exécution dans la zone Valeur d'exécution puis sur OK.
Au lieu de saisir manuellement des instructions SQL dans la zone SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Eléments de base de données pour créer des requêtes complexes SQL. L'arborescence Eléments de base de données permet de sélectionner des objets de base de données et de les lier au moyen des instructions SQL SELECT, WHERE et ORDER BY. Après avoir créé une requête SQL, vous pouvez définir des variables dans la section Variables de la boîte de dialogue. Les deux exemples suivants présentent deux instructions SQL et décrivent les étapes de création de ces instructions à l'aide de l'arborescence Eléments de base de données de la boîte de dialogue Jeu d'enregistrements avancée.
Dans cet exemple, la requête sélectionne l'intégralité de la table Employees. L'instruction SQL définissant la requête se présente de la façon suivante : SELECT * FROM Employees 1 Développez la branche Tables pour afficher toutes les tables de la base de données sélectionnée. 2 Sélectionnez la table Employees. 3 Cliquez sur le bouton Select. 4 Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Dans l'exemple suivant, la requête sélectionne deux lignes de la table Employees, puis sélectionne le type de tâche (job) à l'aide d'une variable que vous devez définir. Les résultats sont ensuite classés par nom d'employé.
• Sélectionnez emplName et cliquez sur bouton Select. • Sélectionnez emplJob et cliquez sur le bouton Where. • Sélectionnez emplName et cliquez sur le bouton Order By. 3 Placez le point d'insertion après WHERE emplJob dans la zone de texte SQL et tapez ='varJob' (y compris le signe
4 Définissez la variable 'varJob' en cliquant sur le bouton Plus (+) de la zone Variables et en saisissant les valeurs
5 Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
1 Dans la fenêtre de document, ouvrez la page devant utiliser la variable. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu
“A propos des paramètres d'URL et de formulaire” on page 586 “Ajout de contenu dynamique dans les pages” on page 607 “Paramètres d'URL” on page 689 “Variables de serveur ColdFusion” on page 590
Les paramètres de formulaire permettent de stocker les informations récupérées dans la requête HTTP d'une page Web. Si vous créez un formulaire utilisant la méthode POST, les données envoyées par le formulaire sont transmises au serveur. Avant de commencer, vérifiez que vous avez transmis un paramètre de formulaire au serveur. Après avoir défini le paramètre de formulaire comme source de contenu, vous pouvez l'utiliser dans une page. 1 Dans la fenêtre de document, ouvrez la page devant utiliser la variable. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu
Le paramètre de formulaire s'affiche dans le panneau Liaisons.
“A propos des sources de contenu dynamique” on page 585 “A propos des paramètres d'URL et de formulaire” on page 586 “Définition de variables de serveur” on page 602
Les variables de session permettent de mémoriser et d'afficher des informations conservées pendant toute la durée de la visite de l'utilisateur (ou session). Le serveur crée un objet de session différent pour chaque utilisateur et le conserve pendant une période définie ou jusqu'à ce qu'il soit explicitement clos. Avant de définir des variables de session pour une page, vous devez les créer dans le code source. Après avoir créé une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour récupérer sa valeur et l'utiliser dans une page Web. 1 Créez une variable de session dans le code source et attribuez-lui une valeur.
4 Tapez le nom de la variable que vous avez définie dans le code source de l'application, et cliquez sur OK.
“Utilisation de formulaires pour recueillir des informations des utilisateurs” on page 688 “Fonctionnement des variables de session” on page 587 “Collecte, stockage et récupération d'informations dans des variables de session” on page 587
Dans ASP et ColdFusion, les variables d'application permettent de mémoriser et d'afficher des informations conservées pendant toute la durée d'utilisation de l'application, quel que soit l'utilisateur. Après avoir défini une variable d'application, vous pouvez utiliser sa valeur dans une page. Note: Il n'existe pas d'objets de variable d'application dans PHP. 1 Ouvrez un type de document dynamique dans la fenêtre de document. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu déroulant. 4 Tapez le nom de la variable que vous avez définie dans le code source de l'application, et cliquez sur OK.
“A propos de l'ajout de contenu dynamique” on page 607 “Définition de variables de serveur” on page 602
1 Assurez-vous qu'une page ColdFusion est activée dans la fenêtre de document. 2 Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Variable du nom de source de données dans
La boîte de dialogue Variable du nom de source de données s'affiche. 3 Définissez une variable et cliquez sur OK. 4 Lorsque vous définissez le jeu d'enregistrements, sélectionnez la variable comme source de données du jeu
Dans la boîte de dialogue Jeu d'enregistrements, la variable s'affiche dans le menu déroulant Source de données ainsi que les sources de données ColdFusion sur le serveur. 5 Complétez les options de la boîte de dialogue Jeu d'enregistrements, puis cliquez sur OK. 6 Initialisez la variable.
Vous définissez des variables de serveur comme sources de contenu dynamique pouvant être utilisées dans une application Web. Les variables de serveur varient d'un type de document à l'autre et comprennent notamment les variables de formulaire, les variables d'URL, les variables de session et les variables d'application. Les variables de serveur sont accessibles à tous les clients qui accèdent au serveur et à toutes les applications exécutées sur le serveur. Les variables de serveur sont conservées jusqu'à l'arrêt du serveur.
“Ajout de contenu dynamique dans les pages” on page 607 “Paramètres d'URL” on page 689 “Paramètres de formulaire HTML” on page 688 “Variables de serveur ColdFusion” on page 590
1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons). Dans la boîte de dialogue Variable de serveur, tapez le nom de la
2 Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu déroulant. 3 Saisissez le nom de l’objet et cliquez sur OK. La variable de serveur ColdFusion s'affiche dans le panneau Liaisons.
❖ Dans la boîte de dialogue Variable locale, tapez le nom de la variable locale et cliquez sur OK.
Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates. 1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons). 2 Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu déroulant. 3 Dans la boîte de dialogue Variable de demande, sélectionnez l'un des ensembles de demandes dans le menu
L'ensemble QueryString Récupère des informations annexées à l'URL de la page émettrice, par exemple lorsque la page comprend un formulaire HTML utilisant la méthode GET. La chaîne de requête est composée d'une ou de plusieurs paires nom/valeur (par exemple, last=Smith, first=Winston) annexées à l'URL avec un point d'interrogation (?). Si la chaîne de requête compte plusieurs paires nom/valeur, elles sont combinées avec des esperluettes (&). L'ensemble Form Récupère les informations de formulaire incluses dans le corps de la demande HTTP par un
L'ensemble ServerVariables Récupère les valeurs de variables d'environnement prédéfinies. Cet ensemble contient
Par exemple, Request.ServerVariables("HTTP_USER_AGENT") contient des informations sur le navigateur expéditeur, comme Mozilla/4.07 [en] (WinNT; I), qui indique un navigateur Netscape Navigator 4.07. La liste complète des variables d'environnement de serveur ASP figure dans la documentation en ligne fournie avec Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS). L'ensemble Cookies Récupère les valeurs des cookies envoyés dans une demande HTTP. Par exemple, supposez que la page lise un cookie appelé « readMe » sur l’ordinateur de l'utilisateur. Sur le serveur, les valeurs du cookie sont enregistrées dans la variable Request.Cookies("readMe").
4 Indiquez à quelle variable de l'ensemble vous souhaitez accéder, et cliquez sur OK.
Request.ServerVariables("HTTP_USER_AGENT"), tapez l'argument HTTP_USER_AGENT. Si vous souhaitez accéder aux informations de la variable Request.Form("lastname"), tapez l'argument lastname. La variable de demande s'affiche dans le panneau Liaisons.
1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons). 2 Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu déroulant. 3 Dans la boîte de dialogue Variable de demande, tapez le nom de la variable (par exemple REQUEST_METHOD),
Pour plus d'informations, recherchez le mot clé $_SERVER dans la documentation de PHP.
Définissez une variable client ColdFusion comme source de contenu dynamique pour une page. Les variables de client ColdFusion que vous venez de définir s'affichent dans le panneau Liaisons. ❖ Dans la boîte de dialogue Variable client, tapez le nom de la variable client et cliquez sur OK.
Les variables client sont des variables ajoutées au code pour associer des données à un client spécifique. Elles conservent l'état de l'application pendant que l'utilisateur passe d'une page à l'autre et d'une session à l'autre dans l'application. Il existe deux types de variables serveur : les variables intégrées et les variables définies par l'utilisateur. Le tableau cidessous répertorie les variables client ColdFusion intégrées : Variable
❖ Dans la boîte de dialogue Variable cookie, tapez le nom de la variable client et cliquez sur OK.
Le tableau ci-dessous répertorie les variables CGI de ColdFusion les plus fréquemment créées sur le serveur : Variable
REMOTE_ADDR mais pas REMOTE_HOST.
Vous pouvez stocker des sources de contenu dynamique dans une Design Note. Cette opération vous permet de travailler sur un site même lorsque vous n'avez pas accès à la base de données ou au serveur d'application contenant les sources de contenu dynamique. La mise en mémoire cache permet également d'accélérer le processus de développement puisqu'elle évite de se connecter en continu à la base de données et au serveur d'application via le réseau. ❖ Cliquez sur la touche fléchée dans le coin supérieur droit du panneau Liaisons et choisissez Cache dans le menu
Si vous modifiez l'une de vos sources de contenu, vous pouvez actualiser le cache en cliquant sur le bouton Actualiser (icône représentant une flèche en forme de cercle), dans le coin supérieur droit du panneau Liaisons Agrandissez l'affichage si ce bouton n'apparaît pas.
Vous pouvez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe quelle source de contenu figurant dans le panneau Liaisons. La modification ou la suppression d'une source de contenu dans le panneau Liaisons ne change ni ne supprime les instances de cette source sur la page. Cela affecte uniquement son rôle de source de contenu pour la page.
1 Dans le panneau Liaisons (Fenêtre > Liaisons), double-cliquez sur le nom de la source de contenu à modifier. 2 Procédez aux modifications dans la boîte de dialogue qui s'affiche. 3 Si le résultat vous convient, cliquez sur OK.
1 Sélectionnez la source souhaitée dans le panneau Liaisons (Fenêtre > Liaisons). 2 Cliquez sur le bouton Moins (-).
Vous pouvez copier un jeu d'enregistrements d'une page à une autre dans un site défini. 1 Sélectionnez le jeu d'enregistrements dans le panneau Liaisons ou dans le panneau Comportements de serveur. 2 Cliquez sur le jeu d'enregistrements avec le bouton droit de la souris et choisissez Copier dans le menu déroulant. 3 Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements.
“A propos des sources de contenu dynamique” on page 585 “Modification ou suppression de sources de contenu” on page 606
A propos de l'ajout de contenu dynamique Après avoir défini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique à la page. Les sources de contenu peuvent être une colonne dans un jeu d'enregistrements, une valeur envoyée par un formulaire HTML, la valeur d'un objet de serveur, etc. Dans Dreamweaver, vous pouvez placer du contenu dynamique quasiment n'importe où dans une page Web ou dans son code source HTML. Il est possible de placer le contenu dynamique au niveau du point d'insertion, de remplacer une chaîne de texte ou d'insérer le contenu en tant qu'attribut HTML. Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut value d'un champ de formulaire. Vous pouvez ajouter du contenu dynamique à une page en sélectionnant une source de contenu dans le panneau Liaisons. Dreamweaver insère alors dans le code source de la page un script côté serveur indiquant au serveur de transférer les données de la source de contenu sélectionnée vers le code source HTML de la page lorsqu'un navigateur appelle la page. Il existe souvent différentes méthodes pour rendre dynamique un élément d'une page. Dans le cas d'une image, par exemple, vous pouvez utiliser le panneau Liaisons, l'inspecteur Propriétés ou la commande Image du menu Insertion. Par défaut, une page HTML ne peut afficher qu'un enregistrement à la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin d'explorer les enregistrements un à un ou créez une région répétée pour afficher plusieurs enregistrements sur une seule page.
“Définition de sources de contenu dynamique” on page 592 “Création d'une barre de navigation de jeu d'enregistrements” on page 614 “Affichage de plusieurs résultats d'un jeu d'enregistrements” on page 617 “Application d'éléments typographiques et de mise en forme de page à des données dynamiques” on page 614 “Utilisation de formats de données prédéfinis” on page 621
Le texte dynamique adopte le formatage du texte initial ou du point d'insertion. Le contenu dynamique conserve ainsi le style de feuille de style en cascade (CSS, Cascading Style Sheet) du texte sélectionné qu'il remplace. Vous pouvez également ajouter ou modifier le format du texte d'un contenu dynamique à l'aide des outils de formatage de texte de Dreamweaver.
Vous pouvez substituer un texte dynamique à un texte existant ou le placer à un point d'insertion donné de la page.
“A propos des jeux d'enregistrements” on page 586 “Utilisation de formats de données prédéfinis” on page 621
1 En mode Création, sélectionnez du texte sur la page ou cliquez à l'endroit où insérer le texte dynamique. 2 Sélectionnez une source de contenu dans le panneau Liaisons (Fenêtre > Liaisons). Si vous sélectionnez un jeu
Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de contenu 3 (Facultatif) Sélectionnez un format de données pour le texte. 4 Cliquez sur Insertion ou faites glisser la source de contenu sur la page.
{RecordsetName.ColumnName}, où Recordset est le nom du jeu d'enregistrements et ColumnName le nom de la colonne choisie dans ce jeu. Il arrive que la longueur de l'espace réservé d'un texte dynamique déforme la mise en page dans la fenêtre de document. Dans ce cas, utilisez des accolades vides pour représenter les espaces réservés, comme l'explique la section suivante.
1 Choisissez Edition > Préférences > Eléments invisibles (Windows) ou Dreamweaver > Préférences > Eléments
2 Choisissez Insertion > Image.
3 Cliquez sur l'option Sources de données (Windows) ou sur le bouton Source de données (Macintosh).
La source de données doit être un jeu d'enregistrements qui contient les chemins d'accès de vos fichiers d'image. En fonction de la structure de fichiers de votre site, ces chemins peuvent être absolus, relatifs au document ou relatifs à la racine. Note: A l'heure actuelle, Dreamweaver ne prend pas en charge les images binaires stockées dans une base de données. Si aucun jeu d'enregistrements n'apparaît dans la liste ou si aucun des jeux disponibles ne correspond à vos besoins, définissez un nouveau jeu.
“Définition un jeu d'enregistrements sans rédiger d'instructions SQL” on page 592
Plus (+) pour définir une nouvelle source de données. 3 En mode Création, sélectionnez un objet HTML.
4 Dans la liste du panneau Liaisons, sélectionnez une source de contenu. 5 Dans le champ Lier à, sélectionnez un attribut HTML dans le menu contextuel. 6 Cliquez sur Lier.
1 En mode Création, sélectionnez un objet HTML, puis ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés).
2 La manière dont il faut lier une source de contenu dynamique à l'attribut HTML dépend de l'endroit où ce dernier
La liste de l'inspecteur Propriétés s'affiche.
3 Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icône représentant un éclair ou sur
Si vous cliquez sur l'icône représentant un éclair, une liste de sources de données s'affiche. Si vous avez cliqué sur l'icône de dossier, une boîte de dialogue affiche une sélection de fichiers. Cliquez sur l'option Sources de données pour afficher la liste des sources de contenu. 4 Sélectionnez une source de contenu dans la liste et cliquez sur OK.
Lors de la prochaine exécution de la page sur le serveur d'applications, la valeur de la source de données sera affectée à l'attribut HTML.
Vous pouvez rendre dynamiques les paramètres des plug-ins et des applets Java, ainsi que les paramètres des objets ActiveX, Flash, Shockwave, Director et Generator. Assurez-vous au préalable que les champs de votre jeu d'enregistrements contiennent des données appropriées pour les paramètres d'objet que vous voulez lier. 1 En mode Création, sélectionnez un objet sur la page et ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés). 2 Cliquez sur le bouton Paramètres. 3 Si votre paramètre ne s'affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne
4 Pour déterminer une valeur dynamique, cliquez sur la colonne Valeur du paramètre, puis sur l'icône représentant
La liste des sources de données s'affiche. 5 Sélectionnez une source de données dans la liste, puis cliquez sur OK.
“Définition de sources de contenu dynamique” on page 592
Recordset(myRecordset)
Recordset(mySecondRecordset)Recordset(myRecordset) comportement de serveur dans le panneau. La boîte de dialogue dans laquelle vous avez défini la source de données d'origine s'ouvre. 3 Effectuez vos modifications dans cette boîte de dialogue, puis cliquez sur OK.
❖ Après avoir ajouté un contenu dynamique à une page, vous pouvez le supprimer de l'une des façons suivantes :
• Sélectionnez le contenu dynamique dans le panneau Comportements de serveur et cliquez sur le bouton moins(-). Note: Cette opération supprime de la page le script côté serveur qui récupère le contenu dynamique de la base de données, mais ne supprime pas les données dans la base.
Vous pouvez afficher un aperçu d'un contenu dynamique et de le modifier à l'aide du mode En direct. Pendant que le contenu dynamique est affiché, vous pouvez effectuer les opérations suivantes :
• ajouter, modifier ou effacer un contenu dynamique ; • ajouter, modifier ou effacer des comportements de serveur. 1 Cliquez sur le bouton Affichage en direct pour afficher le contenu dynamique. 2 Effectuez les modifications nécessaires dans la page. Vous devrez basculer entre le mode En direct et le mode
Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute Lorsqu'un utilisateur de Contribute modifie une page comportant un contenu dynamique ou des éléments invisibles (tels que des scripts ou des commentaires), Contribute affiche le contenu dynamique et les éléments invisibles sous forme de marqueurs jaunes. Par défaut, les utilisateurs de Contribute ne peuvent ni sélectionner ni supprimer ces marqueurs. Pour que les utilisateurs de Contribute puissent sélectionner et supprimer un contenu dynamique ou d'autres éléments invisibles sur une page, vous pouvez modifier les paramètres du groupe d'autorisations en conséquence. Normalement, les utilisateurs de Contribute ne peuvent en aucun cas modifier un contenu dynamique, même s'ils sont autorisés à le sélectionner. Note: Grâce à certaines technologies de serveur, vous pouvez afficher du texte statique à l'aide d'une fonction ou d'une balise de serveur. Pour permettre aux utilisateurs de Contribute de modifier le texte statique d'une page dynamique qui utilise une technologie de serveur de ce type, placez le texte statique en dehors des balises de serveur. Pour plus d'informations, voir Administration de Contribute. 1 Sélectionnez Site > Administrer le site Contribute. 2 Si certaines options requises pour des raisons de compatibilité avec Contribute ne sont pas activées, une boîte de
Contribute. 3 Si nécessaire, tapez le mot de passe administrateur, puis cliquez sur OK.
4 Dans la catégorie Utilisateurs et rôles, sélectionnez un rôle, puis cliquez sur le bouton Modifier les paramètres de
5 Sélectionnez la catégorie Modification et désélectionnez l'option de protection des scripts et des formulaires. 6 Cliquez sur OK pour fermer la boîte de dialogue Modification des paramètres. 7 Cliquez sur Fermer pour fermer la boîte de dialogue Administration du site Web.
“Gestion de sites Contribute” on page 58 “Création d'un modèle pour un site Contribute” on page 417
Utilisez l'inspecteur Propriétés pour modifier le jeu d'enregistrements sélectionné. Les options disponibles dépendent du modèle de serveur utilisé. 1 Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), puis sélectionnez le jeu d'enregistrements dans le panneau
Pour afficher des enregistrements de base de données, il faut récupérer des informations stockées dans une source de contenu, telle qu'une base de données, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses méthodes d'affichage de contenu dynamique et propose plusieurs comportements de serveur intégrés. Ces derniers permettent d'améliorer la présentation du contenu dynamique, de faciliter les recherches et de naviguer parmi les informations renvoyées par une base de données. Les bases de données et les autres sources de contenu dynamique permettent d'obtenir de meilleurs résultats lors des opérations de recherche, de tri ou de consultation de volumes d'informations importants. L'utilisation d'une base de données pour stocker le contenu de sites Web est particulièrement recommandée lorsque vous souhaitez stocker des quantités importantes de données, puis les récupérer pour les afficher d'une manière spécifique. Dreamweaver fournit différents outils et comportements prédéfinis qui permettent de récupérer et d'afficher efficacement les informations d'une base de données.
Les comportements de serveur et les éléments de formatage proposés par Dreamweaver pour enrichir la présentation de données dynamiques sont les suivants : Formats Les formats permettent d'appliquer différents types de valeurs numériques, monétaires, de date/heure et de pourcentage à un texte dynamique.
Région répétée Ces comportements de serveur permettent d'afficher plusieurs éléments renvoyés par une requête de base de données et d'indiquer le nombre d'enregistrements à afficher par page. Navigation de jeu d'enregistrements Ces comportements de serveur permettent d'insérer des éléments de navigation
Région répétée et que le jeu d'enregistrements renvoie 40 enregistrements ; vous pouvez alors parcourir les enregistrements par groupe de dix. Barre d'état du jeu d'enregistrements Ces comportements de serveur permettent d'ajouter un compteur qui indique
Afficher la région Ces comportements de serveur permettent d'afficher ou de masquer des éléments de la page en fonction de la pertinence des enregistrements affichés. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouvez choisir de n'afficher que le lien Précédent ; le lien Suivant est alors masqué.
Les liens de navigation de jeu d'enregistrements permettent de se déplacer d'un enregistrement à un autre ou d'un jeu d'enregistrements à un autre. Après avoir créé une page devant afficher cinq enregistrements à la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou Précédent pour que l'utilisateur puisse afficher les cinq enregistrements suivants ou précédents. Vous pouvez créer quatre types de liens pour la navigation dans les jeux d'enregistrements : Premier, Précédent, Suivant et Dernier. Une page peut contenir un nombre illimité de liens, à condition que tous agissent sur un même jeu d'enregistrements : Vous ne pouvez pas insérer sur une même page des liens d'accès à des jeux d'enregistrements différents. Les éléments dynamiques suivants sont nécessaires pour la mise en place de liens de navigation de jeu d'enregistrements :
• Un contenu dynamique sur la page pour afficher le ou les enregistrements. • Du texte ou des images sur la page pour servir de barre de navigation cliquable. • Un jeu de comportements serveur Déplacer vers l'enregistrement pour naviguer dans le jeu d'enregistrements. Vous pouvez ajouter simultanément les deux derniers éléments en utilisant l'objet dynamique Barre de navigation des enregistrements ou bien les ajouter séparément en utilisant les outils de conception et le panneau Comportements de serveur.
Vous pouvez créer en une seule opération une barre de navigation de jeu d'enregistrements à l'aide du comportement de serveur correspondant. Cet objet de serveur ajoute les éléments suivants à la page :
• Un jeu de comportements de serveur Déplacer vers. • Un jeu de comportements de serveur Afficher la région. La version texte de la barre de navigation du jeu d'enregistrements a l’aspect suivant :
Après avoir placé la barre de navigation sur la page, vous pouvez personnaliser la barre à votre gré à l'aide des outils de conception. Vous pouvez également modifier les comportements de serveur Déplacer vers et Afficher la région en double-cliquant dessus dans le panneau Comportements de serveur. Dreamweaver crée un tableau qui contient des liens texte ou image permettant à l'utilisateur, lorsqu'il clique dessus, de se déplacer dans le jeu d'enregistrements sélectionné. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images Premier et Précédent sont masqués. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images Suivant et Dernier sont masqués. Vous pouvez personnaliser la mise en forme de la barre de navigation à l'aide des outils de conception et du panneau Comportements de serveur. 1 En mode Création, placez le point d'insertion à l'endroit de la page où vous souhaitez que la barre de navigation
2 Ouvrez la boîte de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets de données >
3 Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu d'enregistrements dans lequel naviguer. 4 Dans la section Afficher à l'aide de, sélectionnez le format d'affichage des liens de navigation sur la page et cliquez
Text Place des liens texte sur la page. Images Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers d'image. Lorsque la
Vous pouvez créer votre propre barre de navigation de jeu d'enregistrements qui utilise des styles de formatage plus complexes que ceux qu'offre la table simple créée par l'objet de serveur Barre de navigation du jeu d'enregistrements. Pour créer votre propre barre de navigation de jeu d'enregistrements, vous devez :
• placer les liens sur la page en mode Création ; • attribuer un comportement de serveur distinct à chaque lien de navigation. Cette section explique comment assigner un comportement de serveur distinct à chaque lien de navigation.
1 En mode Création, sélectionnez sur la page la chaîne de texte ou l'image qui servira de lien de navigation entre les
2 Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis cliquez sur le bouton
3 Choisissez Pagination du jeu d'enregistrements dans le menu déroulant, puis sélectionnez le comportement qui
Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Déplacer vers le dernier enregistrement peut être long à s'exécuter lorsque l'utilisateur clique sur le lien. 4 Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu contenant les enregistrements et cliquez sur OK.
Ajouter des liens permettant à l'utilisateur de naviguer parmi les enregistrements d'un jeu d'enregistrements 1 Si vous n'avez rien sélectionné sur la page, sélectionnez un lien dans le menu déroulant. 2 Sélectionnez le jeu contenant les enregistrements à parcourir et cliquez sur OK.
Pour concevoir une barre de navigation personnalisée, commencez par en créer la représentation visuelle à l'aide des outils de conception de page de Dreamweaver. Il est inutile de créer un lien pour la chaîne de texte ou l'image, car Dreamweaver s'en charge à votre place. La page sur laquelle créer la barre de navigation doit contenir un jeu d'enregistrements dans lequel naviguer. Une barre de navigation de jeu d'enregistrements simple, c'est-à-dire une barre dont les boutons sont créés à partir d'éléments de contenu tels que des images, ressemble à ceci :
Vous pouvez également indiquer qu'une région soit affichée ou masquée selon que le jeu d'enregistrements est vide ou non. Si un jeu d'enregistrements est vide (aucun enregistrement ne correspond à la requête, par exemple), vous pouvez afficher un message informant l'utilisateur de l'absence de résultats. Cette fonction est particulièrement utile lors de la création de pages de recherche reposant sur des termes que l'utilisateur doit entrer. De même, vous pouvez afficher un message d'erreur lorsqu'un problème survient au cours de la connexion à une base de données ou lorsque le nom et le mot de passe de l'utilisateur ne correspondent pas à ceux reconnus par le serveur. Les comportements de serveur Afficher la région sont les suivants :
• Afficher si ce n'est pas la première page • Afficher s'il s'agit de la dernière page • Afficher si ce n'est pas la dernière page 1 En mode Création, sélectionnez sur la page la région à afficher ou masquer. 2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+). 3 Dans le menu déroulant, sélectionnez Afficher la région, puis choisissez l'un des comportements de serveur
“A propos des enregistrements de base de données” on page 613 “Création d'un tableau dynamique” on page 618
Le comportement de serveur Région répétée vous permet d'afficher sur une page plusieurs enregistrements d'un jeu. Toute sélection de données dynamique peut être convertie en région répétée. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau. 1 En mode Création, sélectionnez une région comportant un contenu dynamique.
Pour sélectionner précisément une région sur une page, vous pouvez utiliser le sélecteur de balises dans le coin gauche de la fenêtre de document. Par exemple, si la région correspond à une ligne de tableau, cliquez sur la ligne, puis cliquez sur la balise <tr> située le plus à droite dans le sélecteur de balises pour sélectionner la ligne du tableau. 2 Pour afficher le panneau Comportements de serveur, choisissez Fenêtre > Comportements de serveur. 3 Cliquez sur le bouton Plus (+) et choisissez Région répétée. 4 Sélectionnez le nom du jeu d'enregistrements à utiliser dans le menu déroulant. 5 Sélectionnez le nombre d'enregistrements à afficher sur chaque page et cliquez sur OK.
“A propos des enregistrements de base de données” on page 613 “Modification de contenu dynamique” on page 611
❖ Modifiez la région répétée sélectionnée en modifiant les options suivantes :
• Jeu d'enregistrements contenant les enregistrements pour la région répétée • Nombre d'enregistrements affichés Lorsque vous sélectionnez une nouvelle option, Dreamweaver met la page à jour.
Lorsque la page est traitée par le serveur d'application, la ligne est répétée autant de fois que le nombre spécifié dans l'objet de serveur Région répétée, avec un enregistrement différent inséré dans chaque ligne. 1 Procédez de l'une des manières suivantes pour insérer un tableau dynamique :
Tableau dynamique dans le menu. 2 Sélectionnez le jeu d'enregistrements dans le menu déroulant Jeu d'enregistrements. 3 Sélectionnez le nombre d'enregistrements à afficher sur chaque page. 4 (Facultatif) Entrez les valeurs des bordures du tableau, de la marge intérieure des cellules et de l'espacement entre
Note: Si vous travaillez sur un projet nécessitant plusieurs tableaux dynamiques d'aspect semblable, tapez les valeurs de mise en forme du tableau pour simplifier le développement des pages. Une fois le tableau inséré, vous pouvez toutefois ajuster ces valeurs à l'aide de l'inspecteur Propriétés du tableau. 5 Cliquez sur OK.
BIO. Le nom de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.
Les compteurs d'enregistrements permettent aux utilisateurs de connaître leur position relative dans un jeu d'enregistrements. Ils affichent généralement le nombre total d'enregistrements renvoyés et le nombre actuel d'enregistrements affichés. Prenons l'exemple d'un jeu d'enregistrements renvoyant 40 enregistrements individuels, avec huit enregistrements affichés par page ; le compteur d'enregistrements indique alors sur la première page « Affichage des enregistrements 1 à 8 sur 40 ». Avant de créer un compteur d'enregistrements pour une page, vous devez d'abord créer un jeu d'enregistrements pour la page, une mise en forme appropriée pour la présentation du contenu dynamique et une barre de navigation de jeu d'enregistrements.
“A propos des jeux d'enregistrements” on page 586 “Création d'une barre de navigation de jeu d'enregistrements” on page 614 “Affichage de plusieurs résultats d'un jeu d'enregistrements” on page 617 “Création d'un tableau dynamique” on page 618
Un compteur d'enregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements, par rapport au nombre total d'enregistrements renvoyés. Il constitue donc un comportement utile permettant d'améliorer considérablement l'aspect fonctionnel d'un site Web. L'objet de serveur Etat de navigation du jeu d'enregistrements permet de créer un compteur d'enregistrements simple. Cet objet de serveur crée une entrée de texte sur la page pour afficher l'état de l'enregistrement actif. Vous pouvez personnaliser votre compteur d'enregistrements à l'aide des outils de création de page de Dreamweaver. 1 Placez le point d'insertion à l'endroit où vous souhaitez insérer le compteur d'enregistrements.
❖ Dans la boîte de dialogue Insérer l'état de navigation du jeu d'enregistrements, sélectionnez le jeu d'enregistrements
Vous faites appel à des comportements de comptage d'enregistrements individuels pour créer des compteurs d'enregistrements personnalisés. Les compteurs d'enregistrements personnalisés sont plus sophistiqués que le simple tableau à une seule ligne inséré par l'objet de serveur Etat de navigation du jeu d'enregistrements. Vous pouvez organiser les éléments de manières variées et créatives et appliquer un comportement de serveur approprié à chaque élément. Les comportements de serveur de comptage des enregistrements sont les suivants :
• Afficher le numéro de l'enregistrement de fin • Afficher le nombre total d'enregistrements Avant de créer un compteur d'enregistrements personnalisé sur une page, vous devez d'abord créer un jeu d'enregistrements pour la page, une mise en forme appropriée pour la présentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Dans cet exemple, un compteur d'enregistrements similaire à l'exemple de la section « Créer des compteurs d'enregistrements simples » est créé. Dans cet exemple, le texte mis en forme avec la police sans-serif représente les espaces réservés aux nombres d'enregistrements qui seront insérés dans la page. Le compteur d'enregistrements de cet exemple se présente comme suit : Affichage des enregistrements StartRow à EndRow sur RecordSet.RecordCount. 1 En mode Création, tapez le texte du compteur sur la page. Il peut s'agir de n'importe quel texte. Par exemple : Displaying records thru of .
3 Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur). 4 Cliquez sur le bouton Plus(+) dans le coin supérieur gauche, puis cliquez sur Afficher le nombre d'enregistrements.
Displaying records thru of {Recordset1.RecordCount}.
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
Nombre d'enregistrements. La chaîne de texte ressemble maintenant à ce qui suit : Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
Displaying records 1 thru 8 of 40.
Showing records 9 thru 16 of 40. Dreamweaver contient plusieurs formats de données prédéfinis que vous pouvez appliquer à des éléments de données dynamiques. Les styles de format de données prédéfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
1 Sélectionnez l'espace réservé pour contenu dynamique dans la fenêtre Document. 2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons. 3 Dans la colonne Format, cliquez sur le bouton fléché pointant vers le bas.
4 Dans le menu déroulant Format, sélectionnez la catégorie de format de données souhaitée.
5 Assurez-vous que le format a été appliqué correctement. Pour ce faire, prévisualisez la page en mode En direct.
1 Ouvrez une page contenant des données dynamiques en mode Création. 2 Sélectionnez les données dynamiques dont vous souhaitez personnaliser le format.
3 Dans le panneau Liaisons, cliquez sur la flèche vers le bas de la colonne Format pour développer le menu déroulant
Si la flèche vers le bas n'est pas visible, agrandissez davantage le panneau Liaisons. 4 Dans le menu déroulant, choisissez Modifier la liste de formats.
• Regroupement ou non des chiffres c Pour supprimer un format de données, cliquez sur le format dans la liste, puis sur le bouton Moins (-).
1 Ouvrez une page contenant des données dynamiques en mode Création. 2 Sélectionnez les données dynamiques pour lesquelles créer le format personnalisé. 3 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flèche vers le bas dans la colonne
4 Dans le menu déroulant, choisissez Modifier la liste de formats. 5 Cliquez sur le bouton Plus (+) et sélectionnez un type de format. 6 Définissez le format et cliquez sur OK. 7 Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK.
La fonctionnalité d'affichage Live Data a été abandonnée depuis Dreamweaver CS5. Elle a été remplacée par la fonction Affichage en direct, davantage optimisée. Pour afficher les données en direct en mode En direct, veillez à effectuer les opérations suivantes :
ColdFusion, sur votre ordinateur ou sur un ordinateur distant). Si la page affiche un message d'erreur lorsque vous accédez au mode En direct, assurez-vous que l'URL Web est correct dans la boîte de dialogue Définition du site.
• Fournissez tous les paramètres de la page qu'un utilisateur fournirait normalement.
1 Ouvrez la boîte de dialogue Paramètres d'affichage en direct (Affichage > Options d'affichage en direct >
4 Dans le menu déroulant Méthode, sélectionnez la méthode de formulaire HTML attendue par votre page : POST ou GET. 5 Pour enregistrer les paramètres de la page actuelle, choisissez Enregistrer les paramètres de ce document, puis
Note: Pour que les paramètres puissent être enregistrés, vous devez activer Design Notes (Fichier > Design Notes).
Bon nombre de problèmes d'affichage de donnée en direct dans le mode En direct sont liés à des valeurs manquantes ou incorrectes dans la boîte de dialogue Définition du site (Site > Modifier les sites). Vérifiez les paramètres du serveur que vous avez spécifié comme serveur d'évaluation. Vous devez spécifier un dossier capable de traiter des pages dynamiques à l'endroit où la boîte de dialogue Définition du site demande un dossier de serveur ou un répertoire racine. Voici un exemple de dossier de serveur approprié si vous exécutez IIS ou PWS sur votre disque dur : C:\Inetpub\wwwroot\myapp\ Vérifiez que la case URL Web spécifie bien une URL correspondant au dossier distant. Par exemple, si PWS ou IIS est exécuté sur votre ordinateur local, les dossiers distants suivants ont possèdent les URL Web suivantes : Dossier distant
A propos des comportements de serveur personnalisés Dreamweaver est livré avec un ensemble de comportements de serveur qui vous permettent d'ajouter aisément des options dynamiques à un site. Si vous souhaitez accroître les fonctionnalités de Dreamweaver, vous pouvez créer de nouveaux comportements de serveur en fonction de vos besoins spécifiques ou en télécharger depuis le site Web de Dreamweaver Exchange. Avant de créer vos propres comportements de serveur, vérifiez sur le site Web de Dreamweaver Exchange que le comportement de serveur offrant la fonctionnalité que vous souhaitez ajouter à votre site Web n'a pas déjà été créé par un autre développeur. Il est fréquent que des développeurs tiers créent et testent des comportements de serveur qui répondent aux besoins d'autres personnes.
Si vous êtes développeur Web et que vous maîtrisez les technologies ColdFusion, JavaScript, VBScript ou PHP, vous pouvez rédiger vos propres comportements de serveur. La création d'un comportement de serveur implique les opérations suivantes :
• Indiquer le point d’insertion du bloc de code dans le code HTML de la page. • Si le comportement de serveur requiert que la valeur d'un paramètre soit spécifiée, créer une boîte de dialogue invitant le développeur Web qui applique le comportement à fournir la valeur appropriée.
“Demande d'un paramètre pour le comportement de serveur” on page 631 “Test des comportements de serveur” on page 634
Utilisez le Créateur de comportements de serveur pour ajouter le ou les blocs de code que le comportement doit insérer dans la page. 1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+),
2 Dans le menu déroulant Type de document, sélectionnez le type de document pour lequel vous développez le
3 Dans la zone Nom, entrez le nom du comportement de serveur. 4 (Facultatif) Pour copier un comportement de serveur existant pour l'ajouter au comportement en cours de création,
La boîte de dialogue Créateur de comportements de serveur s'affiche.
6 Dans la zone Bloc de code, tapez le code d'exécution nécessaire pour implémenter le comportement de serveur.
7 Placez le point d'insertion dans le bloc de code à l'endroit où vous souhaitez insérer le paramètre, ou sélectionnez
8 Cliquez sur le bouton Insérer le paramètre dans le bloc de code. 9 Tapez le nom du paramètre dans la zone Nom de paramètre (par exemple, Session), puis cliquez sur OK.
10 Dans le menu déroulant Insérer code, choisissez une option indiquant l'endroit où incorporer les blocs de code. 11 (Facultatif) Pour spécifier des informations supplémentaires sur le comportement de serveur, cliquez sur le bouton
12 Pour créer d'avantage de blocs de code, répétez les étapes 5 à 11. 13 Si le comportement de serveur requiert que des paramètres lui soient fournis, vous devez créer une boîte de
14 Après avoir exécuté les étapes requises pour créer le comportement de serveur, cliquez sur OK.
15 Testez-le pour vous assurer qu'il fonctionne correctement.
“Répétitions des blocs de code avec la directive de boucle” on page 629 “Instructions pour le codage” on page 634 “Demande d'un paramètre pour le comportement de serveur” on page 631 “Ajout de comportements de serveur personnalisés” on page 623
Une fois le code source spécifié et l'emplacement de chaque bloc de code inséré, le comportement de serveur est complètement défini. Dans la plupart des cas, il est inutile de spécifier d'autres informations. Si vous êtes un utilisateur chevronné, vous pouvez définir les options suivantes : Identificateur Indique si le bloc de code doit être traité comme un identificateur.
Titre du comportement de serveur Indique le titre du comportement dans le panneau Comportements de serveur.
Comportements de serveur. Dans la zone Titre du comportement de serveur, spécifiez le contenu du menu déroulant Plus (+) et de la liste de comportements appliqués. Le champ comporte par défaut la valeur du nom que vous avez indiqué dans la boîte de dialogue Nouveau comportement de serveur. A mesure que les paramètres sont définis, le nom est automatiquement mis à jour : les paramètres apparaissent entre parenthèses après le nom du comportement de serveur. Set Session Variable (@@Name@@, @@Value@@)
(par exemple, Set Session Variable). Le nom et les paramètres sont répertoriés dans la liste des comportements appliqués, par exemple, Set Session Variable (« abcd », « 5 »). Bloc de code à sélectionner Sélectionner indique le bloc de code sélectionné lorsque l'utilisateur choisit le comportement dans le panneau Comportements de serveur.
Comportements de serveur, le bloc désigné est sélectionné dans la fenêtre de document. Par défaut, Dreamweaver sélectionne le premier bloc de code ne se trouvant pas au-dessus de la balise html. Si tous les blocs de code se trouvent au-dessus de la balise html, le premier est sélectionné. Les utilisateurs chevronnés peuvent indiquer le bloc de code devant être sélectionné.
Les blocs de code ajoutés dans le Créateur de comportements de serveur sont encapsulés dans un comportement de serveur figurant dans le panneau Comportements de serveur. Le code peut correspondre à tout code d'exécution conforme au modèle de serveur spécifié. Si vous choisissez ColdFusion comme type de document pour votre comportement de serveur personnalisé, par exemple, le code rédigé doit correspondre à un code ColdFusion valide pouvant s'exécuter sur un serveur d'application ColdFusion. Vous pouvez créer les blocs de code soit directement depuis le Créateur de comportements de serveur, soit en les copiant et les collant depuis d'autres sources. Chaque bloc de code ajouté dans le Créateur de comportements de serveur doit représenter une balise ou un bloc de script unique. Si vous devez insérer plusieurs blocs de balise, divisezles en blocs de code distincts. Conditions dans les blocs de code Dreamweaver permet de créer des blocs de code contenant des instructions de contrôle à exécution conditionnelle. Le Créateur de comportements de serveur utilise des instructions if, elseif et else et peut contenir des paramètres de comportement de serveur. Cela permet d'insérer plusieurs blocs de texte secondaire selon les valeurs des relations OR entre les paramètres de comportement de serveur. L'exemple suivant montre les instructions if, elseif et else. Les crochets ([ ]) indiquent que le code est facultatif, alors que l'astérisque (*) signale qu'il existe zéro occurrence ou davantage. Pour n'exécuter un bloc de code, ou une partie de celui-ci, que si certaines conditions sont remplies, utilisez la syntaxe suivante :
Le code JSP indiqué ci-dessous, par exemple, provient d'un comportement de serveur Dreamweaver utilisant le bloc de code conditionnel : @@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); Paramètre du comportement de serveur, c'est-à-dire si la valeur du paramètre @@callableName@@ n'est pas nulle, ou (@@callableName@@ != ''), le bloc de code conditionnel est remplacé par les instructions suivantes : @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();
Lorsque vous créez des blocs de code à l'aide du Créateur de comportements de serveur, vous devez préciser l'endroit où les insérer dans le code HTML de la page. Par exemple, si vous insérez un bloc de code au-dessus de la balise <html> d'ouverture, vous devez ensuite en indiquer la position par rapport aux autres balises, scripts et comportements de serveur figurant dans cette section du code HTML de la page. Il peut s'agir, par exemple, de placer un comportement avant ou après une requête portant sur des jeux d'enregistrements, qui pourrait déjà figurer dans le code de la page au-dessus de la balise <html> d'ouverture.
Options du menu Insérer code
Choisissez une balise dans le menu déroulant Balise, puis choisissez parmi les options de positionnement des balises.
Après la sélection Remplacer la sélection Envelopper la sélection
Par défaut, Dreamweaver attribue une épaisseur de 50 à tous les blocs de code d'ouverture de jeux d'enregistrement insérés au-dessus de la balise <html>. Si plusieurs blocs ont la même épaisseur, Dreamweaver les classe de façon aléatoire.
“Demande d'un paramètre pour le comportement de serveur” on page 631 “Instructions pour le codage” on page 634 “A propos des comportements de serveur personnalisés” on page 623 “Création de blocs de code” on page 626 “Test des comportements de serveur” on page 634
3 Dans la boîte de dialogue Créateur de comportements de serveur, sélectionnez une position relative à celle qui est
4 Si vous avez terminé la création du bloc de code, cliquez sur OK.
5 Testez-le pour vous assurer qu'il fonctionne correctement.
1 Dans le menu déroulant Insérer code, choisissez Relatif à une balise spécifique. 2 Dans la zone Balise, saisissez la balise ou sélectionnez-en une dans le menu déroulant.
3 Spécifiez un emplacement relatif à la balise en choisissant une option dans le menu déroulant Position relative.
1 Dans le menu déroulant Insérer code, choisissez Relatif à la sélection. 2 Spécifiez un emplacement relatif à la balise en choisissant une option dans le menu déroulant Position relative.
Pour envelopper le bloc de code autour d'une sélection, cette dernière doit se composer d'une balise d'ouverture et d'une balise de fermeture juxtaposées, comme suit: <CFIF Day="Monday"></CFIF>
Pour répéter un bloc de code, ou une partie de celui-ci, un certain nombre de fois, utilisez la syntaxe suivante : <@ loop (@@param1@@,@@param2@@) @>code block<@ endloop @>
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block être de la même longueur. Lors de la nième évaluation de la boucle, les nièmes éléments des tableaux de paramètre remplacent les occurrences du paramètre correspondant dans le bloc de code. Lorsque vous créez une boîte de dialogue pour le comportement de serveur, vous pouvez ajouter une commande à la boîte de dialogue qui permet au concepteur de la page de créer des tableaux de paramètre. Dreamweaver inclut une commande de tableau simple que vous pouvez utiliser pour créer des boîtes de dialogue. Cette commande, qui s'appelle Liste de champs de texte séparés par des virgules, est accessible à partir du Créateur de comportements de serveur. Pour créer des éléments d'interface utilisateur plus complexes et apprendre à concevoir une boîte de dialogue contenant une commande de création de tableaux (commande de grille, par exemple), consultez la documentation API. Vous pouvez imbriquer autant de directives conditionnelles ou de boucle que vous le souhaitez au sein d'une même directive conditionnelle. Ainsi pouvez-vous préciser, par exemple, que si une expression est vraie, la boucle doit être exécutée. L'exemple suivant montre comment utiliser des blocs de code répétitifs pour créer des comportements de serveur (cet exemple correspond à un comportement ColdFusion permettant d'accéder à une procédure stockée) : <CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> CFPROCPARAM dont le type de participant serait multiple. Avec la directive de boucle, il est possible de rédiger cette même procédure comme suit : <CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#> <@ loop (@@paramName@@,@@value@@,@@type@@) @> <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@"> La directive de boucle comprend deux variables intégrées utilisables dans les conditions if incorporées. Ces variables sont les suivantes : _length et _index. La variable _length se rapporte à la longueur des tableaux traités par la directive de boucle, alors que la variable _index se rapporte à l'index actuel de la directive loop elle-même. Pour que ces variables ne soient reconnues qu'en tant que directives et non en tant que paramètres à faire passer par la boucle, ne les insérez pas entre des symboles @@. Un exemple d'utilisation des variables intégrées consiste à les appliquer à l'attribut import de la directive de page. L'attribut import requiert que les paquets soient séparés par des virgules. Si la directive loop englobe l'intégralité de l'attribut import, le nom d'attribut import= ne doit sortir qu'à la première itération de la boucle (les guillemets fermants (") sont alors inclus) et aucune virgule n'apparaît à la dernière itération de la boucle. Pour ce faire, vous pouvez utiliser la variable intégrée comme suit : <@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, Cette valeur doit être insérée avant que le code du comportement de serveur ne soit inséré dans la page. Pour créer la boîte de dialogue, définissez dans le code les paramètres devant être fournis par le concepteur. Vous générez ensuite une boîte de dialogue pour le comportement de serveur qui invite le concepteur de la page à entrer une valeur de paramètre. Note: Un paramètre est ajouté à votre bloc de code sans votre intervention si vous spécifiez que votre code doit être inséré par rapport à une balise précise choisie par le créateur de la page (en d'autres termes, si vous choisissez Relatif à une balise spécifique dans le menu déroulant Insérer code). Le paramètre ajoute un menu Balise à la boîte de dialogue du comportement pour permettre au créateur de la page de sélectionner une balise.
<% Session("lang_pref") = Request.Form("@@formParam@@"); %> Dreamweaver utilise les chaînes placées entre les marqueurs de paramètre comme libellé des commandes de la boîte de dialogue qu'il génère (voir la procédure ci-dessous). Dans l'exemple ci-dessus, Dreamweaver crée une boîte de dialogue avec le libellé suivant :
1 Dans le Créateur de comportements de serveur, cliquez sur Suivant. 2 Pour modifier l'ordre d'affichage des commandes de la boîte de dialogue, sélectionnez un paramètre, puis cliquez
3 Pour modifier la commande d'un paramètre, sélectionnez le paramètre voulu, puis sélectionnez une autre
❖ Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
2 Sélectionnez votre comportement de serveur dans la liste, puis cliquez sur Ouvrir. 3 Cliquez sur Suivant.
4 Pour modifier l'ordre d'affichage des commandes de la boîte de dialogue, sélectionnez un paramètre, puis cliquez
5 Pour modifier la commande d'un paramètre, sélectionnez le paramètre voulu, puis sélectionnez une autre
Vous pouvez modifier tout comportement de serveur créé à l'aide du Créateur de comportements de serveur, y compris les comportements de serveur que vous avez téléchargé depuis le site Web de Dreamweaver Exchange et d'autres développeurs tiers. Si vous appliquez un comportement à une page puis le modifiez dans Dreamweaver, les occurrences de l'ancien comportement disparaissent du panneau Comportements de serveur. Le panneau Comportements de serveur recherche dans la page le code correspondant au code des comportements de serveur connus. Si le code d'un comportement de serveur change, le panneau ne reconnaît pas les versions antérieures du comportement sur la page.
“Utilisation du Créateur de comportements de serveur” on page 624 “Positionnement d'un bloc de code” on page 627
❖ Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fenêtre > Comportements de serveur),
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
La boîte de dialogue Modifier les comportements de serveur affiche tous les comportements de la technologie serveur courante. 2 Sélectionnez le comportement de serveur et cliquez sur Modifier. 3 Sélectionnez le bloc de code approprié et modifiez le code, les marqueurs de paramètre ou la position du bloc de
4 Si le code modifié ne contient pas de paramètres fournis par le créateur, cliquez sur OK.
5 Si le code modifié contient des paramètres fournis par le créateur, cliquez sur Suivant.
D'une façon générale, le code de votre comportement de serveur doit être compact et robuste. Les développeurs d'applications Web sont très sensibles au code ajouté à leurs pages. Respectez les règles de codage généralement appliquées pour le langage du type de document concerné (ColdFusion, JavaScript, VBScript ou PHP). Si vous ajoutez des commentaires, tenez compte des différents publics qui devront comprendre le code, tels que les concepteurs de pages Web et d'éléments interactifs ou tout autre développeur d'applications Web. Incluez des commentaires précis décrivant le but du code et ajoutez toutes les instructions utiles pour l'inclure dans une page. Tenez compte des instructions de codage suivantes lors de la création de comportements de serveur : Le contrôle des erreurs L'un des éléments indispensables. Le code du comportement de serveur doit être en mesure de
L'utilisation de noms uniques Permet de s'assurer que le code est clairement identifiable et d'éviter tout conflit entre le
Les préfixes de code Permettent d'identifier les fonctions d'exécution et les variables globales insérées dans une page. Une convention consiste à employer vos propres initiales. N'utilisez jamais le préfixe MM_, qui est exclusivement réservé à l'usage de Dreamweaver. Dreamweaver fait précéder toutes les fonctions et variables globales du préfixe MM_ pour les empêcher d'entrer en conflit avec le code que vous écrivez. var MM_ERROR_STRING = "..."; function MM_hideLayer() {
“A propos des comportements de serveur personnalisés” on page 623 “Déroulement du travail des comportements de serveur personnalisés” on page 624
Dreamweaver Exchange conseille de tester chacun des comportements de serveur que vous créez de la manière suivante :
Une fois votre comportement de serveur appliqué à la page, vérifiez ce qui suit :
(Affichage > Assistances visuelles > Eléments invisibles).
2 Définissez un jeu d'enregistrements.
Vérifiez que le jeu d'enregistrements contient toutes les colonnes de table nécessaires à la création de la page principale. Le jeu d'enregistrements doit contenir la colonne comportant la clé unique de chacun des enregistrements, à savoir la colonne d'ID d'enregistrement. Dans l'exemple suivant, la colonne Code contient la clé unique de chaque enregistrement.
3 Insérez un tableau dynamique afin d'afficher les enregistrements.
Si vous souhaitez que les utilisateurs ne puissent pas voir les ID d'enregistrement, supprimez la colonne correspondante du tableau dynamique. Cliquez dans la page afin de la rendre active. Déplacez le curseur vers le haut de la colonne dans le tableau dynamique jusqu'à ce que les cellules de la colonne s'affichent avec un contour rouge, puis cliquez sur la colonne. Appuyez sur la touche Suppr pour supprimer la colonne du tableau.
“Définition un jeu d'enregistrements sans rédiger d'instructions SQL” on page 592 “Rédaction d'instructions SQL en vue de la définition d'un jeu d'enregistrements avancé” on page 594 “Création d'un tableau dynamique” on page 618
Après avoir créé la page principale et ajouté le jeu d'enregistrements, vous devez créer des liens permettant d'ouvrir la page de détails. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements sélectionnés par l'utilisateur. La page de détails utilise cet ID pour rechercher l'enregistrement demandé dans la base de données et l'afficher. Note: La création de liens vers les pages de mises à jour s'effectue de la même manière. La page de résultats est similaire à une page principale, et la page de mises à jour à une page de détails.
“Création d'une page de mise à jour d'enregistrement” on page 654
3 Parcourez vos fichiers afin de sélectionner la page de détails. Celle-ci apparaît dans la zone Lien de l'inspecteur
Dans le tableau dynamique, le texte sélectionné apparaît lié. Lorsque la page s'exécute sur le serveur, le lien s'applique au texte de chaque ligne du tableau. 4 Dans la page principale, sélectionnez le lien dans le tableau dynamique. 5 (ColdFusion) Dans la zone Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL : ?recordID=#recordsetName.fieldName#
L'expression qui suit le signe égal correspond à la valeur du paramètre. Dans ce cas, la valeur est générée par une expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et remplacez fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond à des codes de location uniques. locationDetail.cfm?recordID=#rsLocations.CODE#
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
L'expression qui suit le signe égal correspond à la valeur du paramètre. Dans ce cas, la valeur est générée par une expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond à des codes de location uniques.
3 Dans la boîte de dialogue page de détails, cliquez sur Parcourir et recherchez la page. 4 Indiquez la valeur à lui transmettre en sélectionnant un jeu d'enregistrements et une colonne dans les menus
5 Si vous le souhaitez, vous pouvez transmettre les paramètres de page existants à la page de détails en sélectionnant
La première partie de l'URL, http://www.mysite.com/customerdetail.asp, ouvre la page. La deuxième partie, ?id=43, constitue le paramètre d'URL. Elle précise à la page de détails quel enregistrement trouver et afficher. Le terme id est le nom du paramètre d'URL et sa valeur est 43. Dans cet exemple, le paramètre d'URL contient le numéro d'ID de l'enregistrement, soit 43.
Pour pouvoir afficher l'enregistrement demandé par la page principale, vous devez définir un ensemble de données devant contenir un seul enregistrement et lier les colonnes de l'ensemble de données à la page de détails. 1 Passez à la page de détails. Si vous n'avez pas encore créé une page de détails, créez une page ColdFusion vierge
2 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements
La boîte de dialogue Jeu d'enregistrements ou Jeu de données simplifiée s'affiche. Si la boîte de dialogue avancée s'affiche, cliquez sur Simple. 3 Donnez un nom au jeu d'enregistrements, puis sélectionnez la source de données et la table de base de données qui
4 Dans la zone Colonnes, sélectionnez les colonnes du tableau à inclure dans le jeu d'enregistrements.
5 Pour rechercher et afficher l'enregistrement spécifié dans le paramètre d'URL transmis par la page principale,
• Dans la quatrième zone, tapez le nom du paramètre d'URL transmis par la page principale. 6 Cliquez sur OK. Le jeu d'enregistrements s'affiche dans le panneau Liaisons. 7 Liez les colonnes du jeu d'enregistrements à la page de détails ; pour ce faire, sélectionnez les colonnes dans le
Après avoir téléchargé la page principale et la page de détails sur le serveur, vous pouvez ouvrir la page principale dans un navigateur. Lorsque vous cliquez sur un lien dans la page principale, la page de détails correspondante s'ouvre et affiche des informations sur l'enregistrement sélectionné.
“Configuration d'un serveur d'évaluation” on page 50
Vous pouvez créer des paramètres d'URL sur l'autre page avec des hyperliens HTML ou un formulaire HTML. Pour plus d'informations, voir “Utilisation de formulaires pour recueillir des informations des utilisateurs” on page 688.
3 Dans le menu déroulant Déplacer vers l'enregistrement dans, sélectionnez le jeu que vous avez défini pour la page. 4 Dans le menu déroulant Où la colonne, sélectionnez la colonne contenant la valeur transmise par l'autre page.
5 Dans la zone Correspond au paramètre d'URL, entrez le nom du paramètre d'URL transmis par l'autre page.
Correspond au paramètre d'URL. 6 Cliquez sur OK.
Lorsque vous développez des applications Web, vous pouvez créer rapidement des pages principales et de détails à l'aide de l'objet de données Ensemble de pages Principale-Détails. 1 Pour créer une page dynamique vierge, choisissez Fichier > Nouveau > Page vierge, sélectionnez une page
Cette page devient la page principale. 2 Définissez un jeu d'enregistrements pour la page.
3 Ouvrez la page principale en mode Création, puis sélectionnez Insertion > Objets de données > Ensemble de pages
4 Dans le menu déroulant Jeu d'enregistrements, assurez-vous d'avoir sélectionné le jeu contenant les 5 Dans la zone Champs de la page principale, sélectionnez les colonnes du jeu d'enregistrements à afficher dans la
Par défaut, toutes les colonnes du jeu d'enregistrements sont sélectionnées. Si le jeu contient une colonne à clé unique, telle que recordID, sélectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas sur votre page. 6 Pour modifier l'ordre d'apparition des colonnes dans la page principale, sélectionnez une colonne dans la liste et
Dans la page principale, les colonnes du jeu d'enregistrements sont disposées horizontalement dans un tableau. Un clic sur la flèche vers le haut déplace la colonne vers la gauche ; un clic sur la flèche vers le bas déplace la colonne vers la droite. 7 Dans le menu déroulant Lier à la page de détails depuis, sélectionnez la colonne du jeu d'enregistrements qui
identifiant les enregistrements. En général, la colonne choisie est le numéro d'identification de l'enregistrement. Cette valeur est transmise à la page de détails afin d'identifier l'enregistrement choisi par l'utilisateur. 9 Si la colonne à clé unique n'est pas numérique, désactivez l'option Numérique.
10 Spécifiez le nombre d'enregistrements devant s'afficher dans la page principale. 11 Dans la zone Nom de la page de détails, cliquez sur Parcourir et localisez le fichier de page de détails que vous avez
12 Dans la zone Champs de la page de détails, sélectionnez les colonnes à afficher dans la page de détails.
(-) afin qu'elle ne s'affiche pas dans la page d'informations détaillées. 13 Pour modifier l'ordre d'apparition des colonnes dans la page de détails, sélectionnez une colonne dans la liste et
Dans la page de détails, les colonnes du jeu d'enregistrements sont disposées verticalement dans un tableau. Un clic sur la flèche vers le haut déplace la colonne vers le haut ; un clic sur la flèche vers le bas déplace la colonne vers le bas. 14 Cliquez sur OK.
15 Personnalisez la mise en forme de la page principale et de la page de détails en fonction de vos besoins.
Vous pouvez également modifier les comportements de serveur en double-cliquant dessus dans le panneau Comportements de serveur. Après avoir créé l'ensemble de pages principales et de détails à l'aide de l'objet de données, utilisez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) pour modifier les divers éléments que l'objet de données insère dans les pages.
“Modification de contenu dynamique” on page 611 “Définition de sources de contenu dynamique” on page 592
A propos des pages de recherche et de résultats Vous avez la possibilité d'utiliser Dreamweaver pour créer un ensemble de pages permettant aux utilisateurs d'effectuer des recherches dans votre base de données et d'afficher les résultats de la recherche.
• Etablissement d'une connexion à la base de données et recherche d'enregistrements • Création d'un jeu composé des enregistrements trouvés • Affichage du contenu du jeu d'enregistrements L'insertion d'une page d'informations détaillées est également possible, en option. Une page d'informations détaillées donne des informations supplémentaires sur un enregistrement figurant dans une page de résultats. Si la recherche se fait sur la base d'un seul critère, Dreamweaver vous permet d'ajouter des fonctions de recherche à votre application Web sans utiliser de requêtes ni de variables SQL. Contentez-vous de créer vos pages et de compléter les champs des quelques boîtes de dialogue qui s'affichent à l'écran. Si la recherche dépend de plusieurs critères, il vous faut rédiger une instruction SQL pour laquelle vous définissez de multiples variables. Dreamweaver insère la requête SQL dans la page. Lorsque la page s'exécute sur le serveur, chaque enregistrement de la table de base de données est vérifié. Si la valeur du champ indiqué dans un enregistrement répond aux conditions de la requête SQL, l'enregistrement sera inclus dans le jeu d'enregistrements. La requête SQL en cours crée un jeu d'enregistrements contenant uniquement les résultats de la recherche. Par exemple, le service commercial peut détenir des renseignements sur les clients d'une zone particulière dont les revenus sont supérieurs à un niveau donné. Dans le formulaire d'une page de recherche, le responsable des ventes saisit un secteur géographique et un niveau de revenu minimum, puis clique sur le bouton Envoyer pour envoyer les deux valeurs à un serveur. Sur le serveur, les valeurs sont communiquées à l'instruction SQL de la page de résultats, qui crée ensuite le jeu d'enregistrements contenant uniquement les clients du secteur indiqué avec des revenus supérieurs au niveau donné.
“Définition de sources de contenu dynamique” on page 592 “Création de pages de recherche et de résultats” on page 643
Une page de recherche sur le Web se compose normalement de champs destinés à la saisie de critères particuliers. La page de recherche doit contenir au minimum un formulaire HTML et un bouton Envoyer. Pour ajouter un formulaire HTML à une page de recherche, procédez comme suit : 1 Ouvrez la page de recherche ou créez une nouvelle page, puis choisissez Insertion > Formulaire > Formulaire.
Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges. 2 Insérez des objets de formulaire afin de permettre aux utilisateurs de taper leurs critères de recherche en choisissant
(Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone de texte Valeur. A présent, il convient d'informer le formulaire du lieu où envoyer les critères de recherche lorsque l'utilisateur clique sur le bouton Envoyer. 5 Sélectionnez le formulaire à l'aide de la balise <form> dans le sélecteur de balises situé en bas de la fenêtre de
7 Dans le menu déroulant Méthode, sélectionnez l'une des options suivantes pour déterminer comment les données
“Création de formulaires Web” on page 691
Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les critères sont envoyés à une page de résultats sur le serveur. La charge de récupération des enregistrements dans la base de données incombe non pas à la page de recherche sur le navigateur, mais à la page de résultats sur le serveur. Si la page de recherche envoie un critère unique au serveur, vous pouvez créer la page de résultats sans requête ni aucune variable SQL. Vous créez un jeu d'enregistrements élémentaire auquel vous ajoutez un filtre qui supprime tous les enregistrements non conformes au critère envoyés par la page de recherche. Note: Si vous appliquez plusieurs conditions de recherche, utilisez la boîte de dialogue Jeu d'enregistrements avancée pour définir votre jeu (consultez la section “Création d'une page de résultats avancée” on page 647).
“Création d'une page de détails pour une page de résultats” on page 649
1 Ouvrez la page de résultats dans la fenêtre de document.
2 Créez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le
3 Assurez-vous que la boîte de dialogue Jeu d'enregistrements simplifiée s'affiche à l'écran.
4 Attribuez un nom au jeu d'enregistrements et sélectionnez une connexion.
5 Dans le menu déroulant Table, sélectionnez le tableau à consulter dans la base de données.
Pour consulter plusieurs tableaux simultanément, utilisez la boîte de dialogue Jeu d'enregistrements avancée et définissez une requête SQL. 6 Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées,
(Macintosh) enfoncée. Il est préférable d'inclure uniquement les colonnes qui contiennent des informations que vous souhaitez afficher dans la page de résultats. Pour le moment, ne fermez pas la boîte de dialogue Jeu d'enregistrements. Vous l'utiliserez lors de l'étape suivante pour récupérer les critères envoyés par la page de recherche et pour créer un filtre destiné à exclure tous les enregistrements non conformes aux critères de recherche.
Par exemple, si la valeur envoyée par la page de recherche est le nom d'une ville, sélectionnez la colonne qui répertorie des noms de ville. 2 Dans le menu déroulant situé à côté du premier menu, sélectionnez le signe égal (=) (en principe, la valeur par
3 Dans le troisième menu déroulant, choisissez Variable de formulaire ou Paramètre d'URL, selon que vous
Par exemple, vous désirez créer un jeu d'enregistrements comprenant uniquement les raids et randonnées dans un pays particulier. Supposons qu'une colonne du tableau se nomme TRIPLOCATION et que le formulaire HTML de votre page de recherche utilise la méthode GET et contienne un objet de menu nommé Location qui affiche une liste de pays. L'exemple suivant indique à quoi peut ressembler votre section de filtre :
La valeur test est une simulation de la valeur qui sans cela aurait été renvoyée de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 6 Si le jeu d'enregistrements vous convient, cliquez sur OK.
L'étape suivante consiste à afficher le jeu d'enregistrements sur la page de résultats. Pour plus d'informations, consultez la section “Affichage des résultats de la recherche” on page 649.
Si la page de recherche envoie plusieurs critères au serveur, il vous faut formuler une requête SQL pour la page de résultats et intégrer les critères de recherche dans les variables SQL.
3 Attribuez un nom au jeu d'enregistrements et sélectionnez une connexion.
4 Saisissez l'instruction Select dans la zone de texte SQL.
Dans l'exemple suivant, les variables sont varLastName et varDept : SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ WHERE LASTNAME LIKE 'varLastName' ¬ AND DEPARTMENT LIKE 'varDept' 5 Donnez aux variables SQL les valeurs des critères de recherche. Pour ce faire, cliquez sur le bouton Plus (+) dans la
Dans l'exemple ASP suivant, le formulaire HTML sur la page de recherche utilise la méthode GET et contient deux champs de texte, « LastName » et « Department ».
6 (Facultatif) Cliquez sur Tester pour créer une instance du jeu d'enregistrements à l'aide des valeurs de variable par
Les valeurs par défaut sont une simulation des valeurs qui sans cela auraient été renvoyées de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 7 Si le jeu d'enregistrements vous convient, cliquez sur OK.
Affichage des résultats de la recherche Après avoir créé un jeu d'enregistrements pour y insérer les résultats de la recherche, vous devez afficher les informations sur la page de résultats. L'affichage des enregistrements est une opération simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons vers la page de résultats. Ajoutez au choix des liens de navigation pour aller et venir dans le jeu d'enregistrements, ou créez une région répétée si vous préférez afficher plusieurs enregistrements sur la page. Vous pouvez également insérer des liens sur une page d'informations détaillées. Pour plus d'informations sur les méthodes d'affichage du contenu dynamique sur une page autres que l'affichage de résultats dans un tableau dynamique, consultez la section “Affichage des enregistrements de base de données” on page 613. 1 Placez le point d'insertion à l'endroit où vous souhaitez que le tableau dynamique apparaisse dans la page de
2 Dans la boîte de dialogue Tableau dynamique, sélectionnez le jeu d'enregistrements que vous avez défini afin de
3 Cliquez sur OK. Un tableau dynamique contenant les résultats de la recherche est inséré sur la page de résultats.
Vos pages de recherche et de résultats peuvent inclure une page comportant des informations détaillées à propos d'enregistrements spécifiques répertoriés dans la page de résultats. Dans ce cas, la page de résultats fait également fonction de page principale dans un ensemble de pages principale/détails.
“Création de pages principale et de détails en une seule opération” on page 642 “Création de la page de recherche” on page 644 “Création d'une page de résultats de base” on page 645
Vous pouvez créer un lien qui ouvre une page associée et transmet à cette dernière les paramètres existants. Vous ne pouvez recourir au comportement de serveur que si vous utilisez le modèle de serveur ASP. Avant d'ajouter un comportement de serveur Aller à la page associée à une page, assurez-vous que la page reçoit les paramètres de formulaire ou d'URL d'une autre page. Le rôle du comportement de serveur consiste à transmettre ces paramètres à une troisième page. Vous pouvez, par exemple, communiquer les critères de recherche reçus par une page de résultats à une autre page, de manière à ce que l'utilisateur n'ait pas à les taper plusieurs fois. Sur la page, vous pouvez également sélectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien sélectionner pour que le texte du lien soit inséré. 1 Dans la zone de texte Aller à la page associée, cliquez sur Parcourir et localisez le fichier de la page associée.
2 Si les critères à communiquer ont été directement reçus d'un formulaire HTML via la méthode GET ou qu'ils
Votre application peut contenir une page permettant à l'utilisateur d'insérer de nouveaux enregistrements dans une base de données. Une page d'insertion se compose de deux éléments :
• un comportement de serveur Insérer l'enregistrement pour mettre à jour la base de données. Lorsque l'utilisateur clique sur le bouton Envoyer d'un formulaire, le comportement de serveur insère des enregistrements dans une table de base de données. Vous pouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet de données Formulaire d'insertion d'enregistrement ou les insérer individuellement à l'aide des outils de formulaire de Dreamweaver et du panneau Comportements de serveur. Note: La page d'insertion ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Mettre à jour l'enregistrement ou Supprimer l'enregistrement.
Vous pouvez également créer une page d'insertion à l'aide des outils de formulaires et des comportements de serveur.
“Création de formulaires Web” on page 691
1 Créez une page dynamique (Fichier > Nouveau > Page vierge) et effectuez-en la mise en forme à l'aide des outils de
2 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges.
4 Insérez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque
Les objets de formulaire sont destinés à la saisie de données. On utilise souvent des champs de texte dans ce but, mais rien ne vous empêche d'utiliser des menus, des options et des boutons radio. 5 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
Propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Etiquette.
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
2 Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire. 3 Dans le menu déroulant Source de données, sélectionnez une connexion à la base de données. 4 Saisissez votre nom d'utilisateur et votre mot de passe. 5 Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle insérer
6 Indiquez la colonne de base de données dans laquelle vous souhaitez insérer l'enregistrement. Dans le menu
Envoyer en tant que, sélectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes). Répétez cette procédure pour chaque objet du formulaire. 7 Dans la zone Après l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table ou
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
2 Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données.
5 Dans le menu déroulant Obtenir les valeurs de, sélectionnez le formulaire HTML à utiliser pour la saisie des
Dreamweaver sélectionne automatiquement le premier formulaire apparaissant sur votre page. 6 Indiquez la colonne de base de données dans laquelle vous souhaitez insérer l'enregistrement. Dans le menu
Envoyer en tant que, sélectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes). Répétez cette procédure pour chaque objet du formulaire. 7 Cliquez sur OK.
Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
2 Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire. 3 Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données. 4 Dans le menu déroulant Insérer un tableau, sélectionnez la table de base de données dans laquelle vous souhaitez
5 Indiquez la colonne de base de données dans laquelle vous souhaitez insérer l'enregistrement. Dans le menu
Envoyer en tant que, sélectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes). Répétez cette procédure pour chaque objet du formulaire. 6 Dans la zone Après l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table ou
2 Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données. Cliquez sur le bouton
3 Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle vous souhaitez
4 Si vous utilisez ColdFusion, saisissez le nom d'utilisateur et le mot de passe. 5 Dans la zone Après l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table ou
6 Dans la zone Champs de formulaire, spécifiez les objets de formulaire que vous souhaitez inclure dans le formulaire
Par défaut, Dreamweaver crée un objet de formulaire pour chaque colonne de la table de base de données. Si votre base de données génère automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe déjà. Vous pouvez également modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de sélectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue. 7 Définissez la façon dont chaque champ de saisie de données devra être affiché dans le formulaire HTML en cliquant
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Champ de fichier et Champ masqué. Note: Les champs masqués sont insérés à la fin du formulaire.
à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire). Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.
Lorsqu'un utilisateur veut mettre à jour un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vous devez donc créer une page de recherche et de résultats qui fonctionnera en tandem avec la page de mise à jour. L'utilisateur entre des critères de recherche dans la page de recherche et sélectionne l'enregistrement dans la page de résultats. Lorsqu'il clique sur l'enregistrement sur la page de résultats, la page de mise à jour s'ouvre et affiche l'enregistrement dans un formulaire HTML.
“Création de pages de recherche et de résultats” on page 643
Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats afin d'ouvrir la page de mise à jour. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements sélectionnés par l'utilisateur. La page de mise à jour utilise cet ID pour rechercher l'enregistrement demandé dans la base de données et l'afficher. Le processus destiné à ouvrir la page de mise à jour et à la transmission d'un ID d'enregistrement est identique à celui d'ouverture d'une page de détails et à la transmission d'un ID d'enregistrement. Pour plus d'informations, consultez la section “Création de liens vers la page de détails” on page 638.
“Paramètres d'URL” on page 689
Lorsque la page de résultats a transmis un ID d'enregistrement à la page de mise à jour, de manière à identifier l'enregistrement à mettre à jour, la page de mise à jour doit lire le paramètre, récupérer l'enregistrement dans la table de base de données, puis le stocker temporairement dans un jeu d'enregistrements. 1 Créez une page dans Dreamweaver et enregistrez-la.
2 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements.
3 Nommez le jeu d'enregistrements et indiquez où se trouvent les données à mettre à jour à l'aide des menus
5 Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d'URL
Ce type de filtre crée un jeu d'enregistrements ne contenant que l'enregistrement spécifié par la page de résultats. Par exemple, si votre colonne à clé contient des informations d'ID d'enregistrement et s'appelle PRID et si la page principale transmet les informations d'ID d'enregistrement correspondantes dans le paramètre d'URL appelé id, votre zone Filtre doit avoir l'aspect suivant :
Une page de mise à jour est constituée de trois éléments :
• un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement ; • un comportement de serveur Mettre à jour l'enregistrement permettant de mettre à jour la base de données. Vous pouvez insérer séparément les deux derniers éléments de base d'une page de mise à jour à l'aide des outils de formulaire et du panneau Comportements de serveur.
“Récupération de l'enregistrement à mettre à jour” on page 654 “Création de formulaires Web” on page 691
1 Créez une page (Fichier > Nouveau > Page vierge) Cette page devient la page de mise à jour. 2 Mettez la page en forme à l'aide des outils de conception de Dreamweaver. 3 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges. 4 Pour nommer le formulaire HTML, commencez par le sélectionner en cliquant sur la balise <form> au bas de la
Vous n'avez pas besoin de définir l'attribut action ou method du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Mettre à jour un enregistrement définit automatiquement ces attributs.
A chaque objet de formulaire doit correspondre une colonne dans le jeu d'enregistrements défini précédemment. La seule exception est la colonne à clé unique, qui ne doit pas avoir d'objet de formulaire correspondant. 6 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
Propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Etiquette.
1 Assurez-vous que vous avez défini au préalable un jeu d'enregistrements pour stocker l'enregistrement à mettre à jour.
2 Liez chaque objet du formulaire à des données du jeu d'enregistrements, comme décrit dans les sections suivantes :
• “Activation dynamique d'une case à cocher HTML” on page 702 • “Activation dynamique d'un bouton radio HTML” on page 703 • “Insertion ou modification d'un menu de formulaire HTML dynamique:” on page 701 • “Ajout de la fonctionnalité dynamique à des menus de formulaire HTML existants” on page 702
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
La boîte de dialogue Mettre à jour l'enregistrement s'affiche. 2 Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire. 3 Dans le menu déroulant Source de données ou Connexion, sélectionnez une connexion à la base de données. 4 Tapez votre nom d'utilisateur et votre mot de passe, le cas échéant. 5 Dans le menu déroulant Mettre à jour la table, sélectionnez la table de base de données qui contient l'enregistrement
6 (ColdFusion, PHP) Indiquez la colonne de base de données à mettre à jour. Dans le menu déroulant Valeur,
Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes). Répétez cette procédure pour chaque objet du formulaire. 7 (ASP) Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement
(généralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de données. Si la valeur est un nombre, sélectionnez l'option Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.
Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Mettre à jour l'enregistrement.
Une page de mise à jour est constituée de trois éléments :
• un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement ; • un comportement de serveur Mettre à jour l'enregistrement permettant de mettre à jour la base de données. Vous pouvez insérer les deux derniers éléments d'une page de mise à jour en une seule étape à l'aide de l'objet de données Formulaire de mise à jour des enregistrements. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement. Pour que vous puissiez utiliser l'objet de données, il faut que votre application Web soit capable d'identifier l'enregistrement à mettre à jour et que votre page de mise à jour soit en mesure de le récupérer. Après avoir inséré les éléments sur la page au moyen de l'objet de données, vous pouvez utiliser les outils de conception de Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre à jour l'enregistrement. Note: La page de mise à jour ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Supprimer l'enregistrement. 1 Ouvrez la page en mode Création, puis choisissez Insertion > Objets de données > Mettre à jour l'enregistrement >
La boîte de dialogue Formulaire de mise à jour des enregistrements s'affiche. 2 Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données.
3 Dans le menu déroulant Table à mettre à jour, sélectionnez la table de base de données qui contient l'enregistrement
4 Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement affiché
5 Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d'ID de
7 Dans la zone Champs du formulaire, indiquez les colonnes de la table de base de données que chaque objet de
Par défaut, Dreamweaver crée un objet de formulaire pour chaque colonne de la table de base de données. Si votre base de données génère automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe déjà. Vous pouvez également modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de sélectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue. 8 Définissez la façon dont chaque champ de saisie de données doit s'afficher sur le formulaire HTML. Pour ce faire,
Dreamweaver affiche dans ce champ le nom de la colonne de la table.
Champ de fichier et Champ masqué. Note: Les champs masqués sont insérés à la fin du formulaire.
9 Définissez les propriétés des autres objets de formulaire en sélectionnant une autre ligne Champs du formulaire et
Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés. Pour les options, définissez une comparaison entre la valeur actuelle de l'enregistrement pour l'option et une valeur donnée afin de déterminer si l'option doit être activée ou désactivée lorsque l'enregistrement est affiché. 10 Cliquez sur OK.
L'objet de données insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver. (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire). Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Mettre à jour l'enregistrement.
1 Choisissez Manuellement ou Depuis la base de données selon la manière dont vous envisagez de créer l'élément de
2 Cliquez sur le bouton Plus (+) pour ajouter un élément. 3 Saisissez l'étiquette et la valeur de l'élément. 4 Pour qu'un élément particulier soit sélectionné à l'ouverture de la page dans un navigateur ou lorsqu'un
Pour choisir une valeur statique ou dynamique, cliquez sur l'icône représentant un éclair, puis sélectionnez une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur indiquée doit correspondre à l'une des valeurs de l'élément.
A propos des pages de suppression d'enregistrements Votre application peut comporter un ensemble de pages permettant à l'utilisateur de supprimer des enregistrements d'une base de données. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de résultats et d'une page de suppression. Ce type de page est généralement une page d'informations détaillées fonctionnant en tandem avec une page de résultats. Les pages de recherche et de résultats permettent aux utilisateurs de récupérer l'enregistrement et la page de suppression de le confirmer puis de le supprimer. Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats, de manière à ouvrir la page de suppression, puis créer une page de suppression qui affiche les enregistrements et un bouton Envoyer.
Lorsqu'un utilisateur veut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vous devez donc créer une page de recherche et de résultats qui fonctionnera en tandem avec la page de suppression. L'utilisateur entre des critères de recherche dans la page de recherche et sélectionne l'enregistrement dans la page de résultats. Lorsque l'utilisateur clique sur l'enregistrement, la page de suppression s'ouvre et l'enregistrement s'affiche dans un formulaire HTML sur cette page.
“Création de pages de recherche et de résultats” on page 643
2 Activez l'option Colonnes et l'option Après la colonne courante, puis cliquez sur OK.
3 Dans la colonne que vous venez de créer, entrez la chaîne Delete dans la ligne contenant les espaces réservés pour
Vous pouvez également insérer une image comprenant un mot ou un symbole évoquant une suppression. 4 Sélectionnez la chaîne Delete afin de lui appliquer un lien. 5 Dans l'inspecteur Propriétés, entrez le nom de la page de suppression dans la zone Lien. Vous pouvez entrer le nom
Une fois que vous avez cliqué en dehors de la zone Lien, la chaîne Delete apparaît liée dans le tableau. Si vous activez le mode En direct, vous pouvez observer que le lien s'applique au même texte dans chaque ligne du tableau. 6 Sélectionnez le lien de suppression dans la page de résultats. 7 (ColdFusion) Dans la zone Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL : ?recordID=#recordsetName.fieldName#
L'expression qui suit le signe égal correspond à la valeur du paramètre. Dans ce cas, la valeur est générée par une expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond à des codes de location uniques : confirmDelete.cfm?recordID=#rsLocations.CODE#
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
L'expression qui suit le signe égal correspond à la valeur du paramètre. Dans ce cas, la valeur est générée par une expression ASP qui renvoie un ID d'enregistrement à partir du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression ASP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond à des codes de location uniques : confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
1 Dans la page de résultats, créez une colonne dans le tableau utilisé pour afficher les enregistrements. Pour ce faire,
2 Activez l'option Colonnes et l'option Après la colonne courante, puis cliquez sur OK.
3 Dans la colonne que vous venez de créer, entrez la chaîne Delete dans la ligne contenant les espaces réservés pour
Vous pouvez également insérer une image comprenant un mot ou un symbole évoquant une suppression. 4 Sélectionnez la chaîne Delete afin de lui appliquer un lien.
6 Dans la boîte de dialogue Page de détails, cliquez sur Parcourir et recherchez la page à supprimer. 7 Dans la zone Passer le paramètre d'URL, entrez le nom de votre paramètre, par exemple recordID.
8 Indiquez la valeur à transmettre à la page de suppression en sélectionnant un jeu d'enregistrements et une colonne
9 Activez l'option Paramètres d'URL. 10 Cliquez sur OK.
Prenons l'exemple d'un paramètre d'URL appelé recordID et d'une page de suppression appelée confirmdelete.asp ; lorsque l'utilisateur clique sur le lien, l'URL se présente comme suit : http://www.mysite.com/confirmdelete.asp?recordID=43 La première partie de l'URL, http://www.mysite.com/confirmdelete.asp, ouvre la page de suppression. La deuxième partie, ?recordID=43, constitue le paramètre d'URL. Elle précise à la page de suppression quel enregistrement trouver et afficher. Le terme recordID est le nom du paramètre d'URL et sa valeur est 43. Dans cet exemple, le paramètre d'URL contient le numéro d'ID de l'enregistrement, soit 43.
Après avoir créé la page répertoriant les enregistrements, passez à la page de suppression. La page de suppression affiche l'enregistrement et invite l'utilisateur à confirmer sa suppression. Lorsque l'utilisateur confirme l'opération en cliquant sur le bouton du formulaire, l'application Web supprime l'enregistrement de la base de données. La création de cette page consiste à créer un formulaire HTML, à récupérer l'enregistrement à afficher dans le formulaire, à l'afficher dans le formulaire et à ajouter la logique permettant de supprimer l'enregistrement de la base de données. Les opérations de récupération et d'affichage de l'enregistrement impliquent de définir un jeu d'enregistrements destiné à recevoir cet enregistrement (celui que l'utilisateur souhaite supprimer) et de lier les colonnes du jeu d'enregistrements au formulaire. Note: La page de suppression ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Mettre à jour l'enregistrement.
1 Créez une page et enregistrez-la de sorte qu'elle devienne la page de suppression définie dans la section précédente.
Utilisez le nom de cette page lorsque vous enregistrez le fichier pour la première fois (par exemple, deleteConfirm.cfm). 2 Insérez un formulaire HTML dans la page (Insertion > Formulaire > Formulaire). 3 Ajoutez un champ masqué au formulaire.
5 Modifiez la présentation de la page selon les besoins et enregistrez-la.
1 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements
La boîte de dialogue Jeu d'enregistrements ou Jeu de données simplifiée s'affiche. Si la boîte de dialogue Jeu d'enregistrements avancée s'affiche, cliquez sur Simple. 2 Attribuez un nom au jeu d'enregistrements, puis sélectionnez une source de données ainsi que la table de base de
3 Dans la zone Colonnes, sélectionnez les colonnes (champs d'enregistrement) à afficher sur la page.
Assurez-vous que le champ d'ID d'enregistrement est compris dans la sélection, même si vous ne souhaitez pas l'afficher. 4 Renseignez la section Filtre comme suit, pour rechercher et afficher l'enregistrement spécifié dans le paramètre
• Dans le troisième menu déroulant, choisissez Paramètre d'URL. La page contenant les liens de suppression utilise un paramètre d'URL pour transmettre des informations à la page de suppression.
1 Sélectionnez les colonnes de jeu de données (champs d'enregistrement) dans le panneau Liaisons et faites-les glisser
Veillez à insérer le contenu dynamique en lecture seule au sein des limites du formulaire. Pour plus d'informations sur l'insertion de contenu dynamique dans une page, consultez la section “Création de texte dynamique” on page 608. Vous devez ensuite lier la colonne d'ID d'enregistrement au champ de formulaire masqué. 2 Vérifiez que l'option Eléments invisibles est activée (Affichage > Assistances visuelles > Eléments invisibles), puis
Le champ masqué est sélectionné. 3 Dans l'inspecteur Propriétés, cliquez sur l'icône en forme d'éclair située en regard de la zone Valeur. 4 Dans la boîte de dialogue Données dynamiques, sélectionnez la colonne d'ID d'enregistrement dans le jeu
Dans l'exemple suivant, la colonne d'ID d'enregistrement, CODE, contient des codes de magasin uniques.
1 Assurez-vous que la page de suppression ColdFusion ou PHP est ouverte dans Dreamweaver. 2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+),
5 Dans le menu déroulant Table, sélectionnez la table de base de données contenant les enregistrements à supprimer. 6 Dans le menu déroulant Colonne de la clé primaire, sélectionnez la colonne contenant les ID d'enregistrement.
Si l'ID d'enregistrement est numérique, sélectionnez l'option Numérique. 7 (PHP) Dans le menu déroulant Valeur de la clé primaire, sélectionnez la variable de la page contenant l'ID
La variable est générée par le champ de formulaire masqué. Son nom correspond à l'attribut name du champ masqué. Suivant l'attribut method du formulaire, elle se présente sous la forme d'un paramètre de formulaire ou d'un paramètre d'URL. 8
2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+),
3 Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données de sorte que le
Cliquez sur le bouton Définir si vous devez définir une connexion.
6 Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d'ID de
Si la valeur est un nombre, sélectionnez l'option Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte. 7 Dans le menu déroulant Supprimer en envoyant, spécifiez le formulaire HTML contenant le bouton Envoyer qui
8 Dans la zone Après la suppression, aller à, indiquez la page à ouvrir après la suppression de l'enregistrement de la
Cette page peut par exemple présenter un bref message indiquant à l'utilisateur que l'opération a réussi, ou bien répertorier les enregistrements restants afin que l'utilisateur puisse vérifier que l'enregistrement a bien été supprimé. 9 Cliquez sur OK et enregistrez votre travail. 1 Envoyez les pages de recherche, de résultats et de suppression à votre serveur Web, ouvrez un navigateur et
Lorsque vous cliquez sur un lien de suppression sur la page de résultats. la page de suppression doit s'afficher. 2 Cliquez sur le bouton Confirmer pour supprimer l'enregistrement de la base de données. 3 Recherchez l'enregistrement pour vous assurer qu'il a bien été supprimé. L'enregistrement ne doit plus figurer sur
A propos des objets de commande ASP Un objet de commande ASP est un objet de serveur qui effectue une opération donnée dans une base de données. Il peut contenir toute instruction SQL valide, y compris une instruction qui renvoie un jeu d'enregistrements, ou qui insère, met à jour ou supprime des enregistrements dans une base de données. Un objet de commande peut modifier la structure d'une base de données si l'instruction SQL ajoute ou supprime une colonne dans la table. Il peut également servir à exécuter une procédure stockée dans une base de données. Un objet de commande est dit réutilisable car le serveur peut exécuter plusieurs fois la commande à l'aide d'une seule version compilée de l'objet. Pour qu'une commande soit réutilisable, définissez la propriété Préparé de l'objet de commande sur true, comme dans l'instruction VBScript suivante : mycommand.Prepared = true
Elle pourrait même ignorer la requête de préparation de la commande et définir la propriété Préparé sur false. Sur une page ASP, un objet de commande est créé par l'intermédiaire de scripts. Cependant, Dreamweaver vous permet de créer des objets de commande sans avoir à écrire une seule ligne de code ASP.
1 Dans Dreamweaver, ouvrez la page ASP qui doit exécuter la commande. 2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+),
3 Saisissez le nom de la commande, choisissez une connexion à une base de données contenant les enregistrements
Supprimer). Dreamweaver rédige le début de l'instruction SQL en fonction du type d'opération sélectionné. Par exemple, voici la boîte de dialogue qui s'affiche lorsque vous sélectionnez le type Insérer :
et de la taille de chaque variable empêche les attaques par injection.
Note: Les types de données Numérique, Booléen et date/heure emploient toujours la taille -1. Pour déterminer la valeur Type, reportez-vous au tableau suivant : Type dans la base de données
Dreamweaver insère dans votre page un code ASP qui, lorsqu'il s'exécute sur le serveur, crée une commande qui insère, met à jour ou supprime des enregistrements dans la base de données. Par défaut, la propriété Préparé de l'objet de commande est définie sur true, ce qui permet au serveur d'application de réutiliser une seule version compilée de l'objet chaque fois que la commande est exécutée. Pour modifier ce paramètre, basculez en mode Code et définissez la propriété Préparé sur false.
Bien qu'il soit possible d'utiliser des comportements de serveur pour créer des pages qui modifient des bases de données, vous pouvez également créer ces pages en utilisant des objets de manipulation de base de données, tels que des procédures stockées ou des objets de commande ASP. Une procédure stockée est un élément de base de données réutilisable qui effectue des opérations dans une base de données. Elle contient du code SQL qui permet notamment d'insérer, de mettre à jour ou de supprimer des enregistrements. Elle peut également modifier la structure de la base de données. Une procédure stockée peut ainsi servir à ajouter une colonne ou encore à supprimer une table. Elle peut également appeler une autre procédure stockée, accepter des paramètres d'entrée et renvoyer à la procédure d'appel plusieurs valeurs sous la forme de paramètres de sortie. Une procédure stockée est dite réutilisable car vous pouvez effectuer une opération dans la base de données plusieurs fois à l'aide d'une seule version compilée de la procédure. Si vous savez qu'une tâche de base de données sera exécutée un grand nombre de fois ou qu'elle sera exécutée par différentes applications, il est conseillé d'utiliser une procédure stockée pour améliorer l'efficacité des opérations effectuées dans la base de données. Note: Les bases de données MySQL et Microsoft Access ne prennent pas en charge les procédures stockées.
Vous pouvez modifier une base de données à l'aide d'une procédure stockée. Une procédure stockée est un élément de base de données réutilisable qui effectue des opérations dans une base de données. Avant de modifier une base de données à l'aide d'une procédure stockée, assurez-vous que cette dernière contient un code SQL qui modifie la base de données d'une manière ou d'une autre. Pour créer et stocker une procédure stockée dans une base de données, consultez la documentation de la base de données et un bon manuel Transact-SQL. 1 Dans Dreamweaver, ouvrez la page qui doit exécuter la procédure stockée. 2 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Procédure stockée. 3 Dans le menu déroulant Source de données, sélectionnez une connexion à une base de données contenant la
4 Saisissez le nom d'utilisateur et le mot de passe pour la source de données ColdFusion. 5 Sélectionnez une procédure stockée dans le menu déroulant Procédure.
6 Sélectionnez un paramètre et cliquez sur Modifier si vous voulez y apporter des modifications.
Note: Vous devez indiquer des valeurs test pour tout paramètre d'entrée d'une procédure stockée. 7 Apportez les modifications de votre choix :
Note: Vous devez indiquer les paramètres de page correspondant à chaque valeur de retour de paramètre d'une procédure stockée. Il est inutile d'ajouter les paramètres de page s'il n'y a pas de valeur de retour correspondante. Cliquez de nouveau sur le bouton Plus (+) pour ajouter un autre paramètre de page, si nécessaire. 9 Sélectionnez un paramètre de page, puis cliquez sur le bouton Moins (-) pour supprimer le paramètre si besoin ou
10 Activez l'option Renvoie le jeu d'enregistrements nommé, puis tapez le nom du jeu d'enregistrements. Si la
Dreamweaver exécute la procédure stockée et affiche le jeu d'enregistrements, le cas échéant. Note: Si la procédure stockée renvoie un jeu d'enregistrements et accepte des paramètres, vous devez indiquer une valeur dans la colonne Valeur par défaut de la zone Variables pour tester la procédure stockée. Vous pouvez utiliser différentes valeurs test pour générer divers jeux d'enregistrements. Pour modifier une valeur test, cliquez sur le bouton Modifier correspondant au paramètre, puis modifiez la valeur test ou cliquez sur le bouton Modifier correspondant au paramètre de page, puis modifiez la valeur par défaut. 11 Activez l'option Renvoie le code d'état nommé, puis saisissez le nom du code d'état si la procédure stockée renvoie
Lorsque vous fermez la boîte de dialogue, Dreamweaver insère dans votre page un code ColdFusion qui, lorsqu'il s'exécute sur le serveur, appelle une procédure stockée dans la base de données. La procédure stockée effectue alors une opération dans la base de données, telle que l'insertion d'un enregistrement. Si la procédure stockée accepte des paramètres, vous pouvez créer une page qui recueille les valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de créer une page qui recueille des valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
“Rédaction d'instructions SQL en vue de la définition d'un jeu d'enregistrements avancé” on page 594
4 Pour sélectionner votre procédure stockée, développez la branche Procédures stockées dans la zone Eléments de
5 Entrez tous les paramètres requis dans le tableau Variables.
Par défaut, la propriété Préparé de l'objet de commande est définie sur true, ce qui permet au serveur d'application de réutiliser une version compilée de l'objet chaque fois que la procédure stockée est exécutée. Si vous savez que la commande sera exécutée un grand nombre de fois, il est conseillé d'utiliser une seule version compilée de l'objet pour améliorer l'efficacité des opérations effectuées dans la base de données. Cependant, si la commande n'est exécutée qu'une ou deux fois, ceci risque de ralentir votre application Web car le système doit s'interrompre pour compiler la commande. Pour modifier ce paramètre, basculez en mode Code et définissez la propriété Préparé sur false. Note: Les commandes préparées ne sont pas prises en charge par tous les fournisseurs de base de données. Si votre base de données ne les prend pas en charge, vous risquez de recevoir un message d'erreur lors de l'exécution de la page. Basculez en mode Code et définissez la propriété Préparé sur false. Si la procédure stockée accepte des paramètres, vous pouvez créer une page qui recueille les valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de créer une page qui recueille des valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
A propos des pages d'enregistrement Vous pouvez inclure dans votre application Web une page qui oblige les utilisateurs à s'enregistrer la première fois qu'ils visitent votre site. Une page d'enregistrement se compose des éléments structurels suivants :
• un formulaire HTML qui permet aux utilisateurs de sélectionner un nom d'utilisateur et un mot de passe et qui peut également être utilisé pour obtenir d'autres informations personnelles de la part des utilisateurs ;
“Ajout d'un formulaire HTML pour la sélection d'un nom d'utilisateur et d'un mot de passe” on page 673 “Mise à jour de la table de base de données des utilisateurs” on page 674 “Ajout d'un comportement de serveur pour garantir l'unicité des noms d'utilisateur” on page 674
L'étape suivante de la création d'une page d'enregistrement consiste à ajouter un formulaire HTML à cette page afin de permettre aux utilisateurs de choisir un nom d'utilisateur et un mot de passe (le cas échéant).
“Stockage des privilèges d'accès dans la base de données des utilisateurs” on page 679
Pour permettre à l'utilisateur de sélectionner son nom d'utilisateur et son mot de passe, vous devez ajouter un formulaire HTML à la page d'enregistrement (le cas échéant). 1 Créez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page d'enregistrement à l'aide des outils
2 Pour ajouter un formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges. 3 Pour nommer le formulaire HTML, commencez par le sélectionner en cliquant sur la balise <form> au bas de la
Vous n'avez pas besoin de définir l'attribut action ou method du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insérer un enregistrement définit automatiquement ces attributs. 4 Ajoutez des champs de texte (Insertion > Formulaire > Champ de texte) afin de permettre à l'utilisateur d'entrer un
Le formulaire peut également comporter d'autres objets permettant d'enregistrer d'autres données personnelles. Il est conseillé d'ajouter des étiquettes (texte ou images) à côté de chaque objet de formulaire, afin d'indiquer à l'utilisateur de quoi il s'agit. Il est également conseillé d'organiser les objets de formulaire en les plaçant dans un tableau HTML. Pour plus d'informations sur les objets de formulaire, consultez la section “Création de formulaires Web” on page 691. 5 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
Vous devez ajouter le comportement de serveur Insérer un enregistrement à la page d'enregistrement pour mettre à jour la table des utilisateurs dans la base de données. 1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+)
La boîte de dialogue Insérer un enregistrement s'affiche. 2 Complétez la boîte de dialogue en veillant à bien indiquer la table des utilisateurs dans la base de données dans
La dernière étape de la création d'une page d'enregistrement consiste à s'assurer que le nom d'utilisateur n'est pas déjà utilisé par un autre utilisateur enregistré.
“Création d'une page d'insertion élément par élément” on page 650
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+).
2 Dans le menu déroulant Champ Nom d'utilisateur, sélectionnez la zone de texte du formulaire dans laquelle
3 Dans la zone Si existe déjà, aller à, indiquez la page à ouvrir si un doublon est trouvé dans la table de la base de
Cette page doit alerter l'utilisateur que le nom qu'il a choisi est déjà pris et lui permettre d'en entrer un autre.
Une page de connexion se compose des éléments structurels suivants :
• un formulaire HTML permettant aux utilisateurs d'entrer leur nom d'utilisateur et leur mot de passe ; • un comportement de serveur Connecter l'utilisateur qui vérifie que le nom d'utilisateur et le mot de passe saisis sont valides ; une variable de session correspondant au nom d'utilisateur est créée pour l'utilisateur lorsqu'il se connecte avec succès.
“Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter” on page 675 “Vérification du nom d'utilisateur et du mot de passe” on page 676
Vous avez besoin d'une table de base de données regroupant les utilisateurs déjà enregistrés pour vérifier que le nom d'utilisateur et le mot de passe saisis dans la page de connexion sont valides. ❖ Pour créer cette table, utilisez votre application de base de données et une page d'enregistrement. Pour plus
L'étape suivante de la création d'une page de connexion consiste à ajouter un formulaire HTML à la page afin de permettre aux utilisateurs de se connecter. Vous trouverez des instructions dans la rubrique suivante.
“Création d'une page d'enregistrement” on page 672
2 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges. 3 Pour nommer le formulaire HTML, commencez par le sélectionner en cliquant sur la balise <form> au bas de la
4 Ajoutez au formulaire les champs de texte Nom d'utilisateur et Mot de passe (Insertion > Formulaire > Champ de
Ajoutez des étiquettes (texte ou images) à côté de chaque zone de texte, puis organisez ces zones en les plaçant dans un tableau HTML et en donnant à l'attribut BORDER de la table la valeur 0. 5 Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).
Propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Etiquette. L'étape suivante de la création d'une page de connexion consiste à ajouter le comportement de serveur Connecter l'utilisateur pour vérifier que le nom d'utilisateur et le mot de passe saisis sont valides.
Vous devez ajouter le comportement de serveur Connecter l'utilisateur à la page de connexion pour vérifier la validité du nom d'utilisateur et du mot de passe tapés par un utilisateur. Lorsqu'un utilisateur clique sur le bouton Envoyer, sur la page de connexion, le comportement de serveur Connecter l'utilisateur compare les valeurs saisies par l'utilisateur à celles des utilisateurs déjà enregistrés. Si les valeurs correspondent, le comportement de serveur ouvre une page (généralement la page d'accueil du site). Si elles ne correspondent pas, le comportement de serveur ouvre une autre page (qui alerte généralement l'utilisateur que la connexion a échoué). 1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+).
2 Définissez le formulaire et les objets de formulaire que les visiteurs utilisent pour entrer leur nom d'utilisateur et
3 (ColdFusion) Tapez votre nom d'utilisateur et votre mot de passe, le cas échéant. 4 Définissez la table de la base de données et les colonnes qui contiennent les noms d'utilisateur et les mots de passe
Le comportement de serveur compare le nom d'utilisateur et le mot de passe entrés par le visiteur sur la page de connexion aux valeurs de ces colonnes. 5 Indiquez la page à ouvrir si la connexion est établie.
6 Indiquez la page à ouvrir si la connexion échoue.
7 Si vous voulez que les utilisateurs envoyés vers la page de connexion après avoir essayé d'accéder à la page
Si un utilisateur essaie d'accéder à votre site en ouvrant une page à l'accès restreint sans s'être préalablement connecté, la page à accès restreint peut l'envoyer vers la page de connexion. Une fois l'utilisateur connecté, la page de connexion le redirige vers la page à accès restreint qui l'a préalablement envoyé vers la page de connexion. Lorsque vous saisissez les informations relatives au comportement de serveur Restreindre l'accès à la page dans la boîte de dialogue, prenez soin de préciser la page de connexion dans la zone de texte Si l'accès est refusé, aller à.
“Renvoi des utilisateurs non autorisés” on page 678 “Création d'une page à accès restreint” on page 677 Les niveaux d'accès vous permettent aussi de ne pas octroyer immédiatement l'accès à la totalité du site aux utilisateurs récemment enregistrés. Ainsi, vous pouvez, par exemple, attendre de recevoir un paiement avant d'octroyer l'accès aux pages membre du site. Pour cela, protégez les pages membre avec un niveau d'accès Membre et n'octroyez que les privilèges d'accès Visiteur aux utilisateurs récemment enregistrés. Après réception du paiement, vous pouvez octroyer à l'utilisateur les privilèges d'accès supérieurs, c'est-à-dire Membre (dans la table de base de données des utilisateurs enregistrés). Si vous n'envisagez pas d'utiliser des niveaux d'accès, vous pouvez néanmoins protéger une page de votre site en ajoutant simplement à la page le comportement de serveur Restreindre l'accès à la page. Ce comportement redirige vers une autre page tout utilisateur n'ayant pas réussi à établir la connexion. Si vous envisagez d'utiliser des niveaux d'accès, vous pouvez protéger une page de votre site à l'aide des blocs structurels suivants :
Que vous utilisiez les niveaux d'accès ou non, vous pouvez ajouter un lien à la page protégée pour permettre à l'utilisateur de se déconnecter et d'effacer toutes les variables de session.
“Sécurisation d’un dossier dans votre application (ColdFusion)” on page 680
Si vous voulez attribuer à plusieurs pages du site les mêmes droits d'accès, vous pouvez copier-coller ces droits d'une page vers une autre.
1 Ouvrez la page à protéger. 2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+).
3 Sélectionnez le niveau d'accès pour la page. Si vous voulez que seuls les utilisateurs ayant certains privilèges puissent
Vous pouvez par exemple stipuler que seuls les utilisateurs disposant des privilèges Administrateur peuvent afficher la page, en sélectionnant Administrateur dans la liste des niveaux d'autorisation. 4 Pour ajouter des niveaux d'autorisation à la liste, cliquez sur Définir. Dans la liste Définir les niveaux d'accès qui
Vérifiez que la chaîne du niveau d'autorisation correspond exactement à la chaîne stockée dans votre base de données des utilisateurs. Par exemple, si la colonne autorisation de votre base de données contient la valeur Administrator, tapez Administrator, et non Admin, dans la zone de texte Nom. 5 Si vous voulez définir plusieurs niveaux d'autorisation pour une page, cliquez sur les niveaux de la liste tout en
Vous pouvez par exemple stipuler que tout utilisateur possédant les privilèges Visiteur, Membre ou Administrateur peut consulter la page. 6 Indiquez la page à ouvrir si un utilisateur non autorisé tente d'ouvrir la page protégée.
1 Ouvrez la page protégée et sélectionnez le comportement Restreindre l'accès à la page dans le panneau
2 Cliquez sur la flèche dans le coin supérieur droit du panneau et sélectionnez Copier dans le menu déroulant.
3 Ouvrez une autre page à protéger de la même façon. 4 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur la flèche dans le
5 Répétez les étapes 3 et 4 pour chaque page à protéger.
1 Si vous voulez que certains utilisateurs connectés aient différents privilèges d'accès, assurez-vous que votre table de
(Visiteur, Utilisateur, Administrateur, etc.). Les privilèges d'accès de chaque utilisateur doivent être entrés dans la base de données par l'administrateur du site. Dans la plupart des applications de base de données, vous avez la possibilité d'affecter une valeur par défaut à une colonne pour chaque nouvel enregistrement créé. Choisissez comme valeur par défaut les privilèges d'accès les plus courants de votre site (Invité, par exemple), puis changez manuellement les exceptions (en remplaçant Invité par Administrateur, par exemple). L'utilisateur a maintenant accès à toutes les pages administrateur. 2 Vérifiez que chaque utilisateur dans la base de données n'a qu'un seul privilège d'accès, comme Invité ou
Lorsque l'utilisateur établit la connexion avec succès, une variable de session composée du nom d'utilisateur est créée. Lorsque l'utilisateur quitte votre site, vous pouvez utiliser le comportement de serveur Déconnecter l'utilisateur pour effacer cette variable de session et rediriger l'utilisateur vers une autre page (généralement une page de fin de session ou de remerciement). Vous pouvez appeler le comportement de serveur Déconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spécifique est chargée.
1 Sélectionnez le texte ou l'image à utiliser comme lien dans la page. 2 Dans le panneau Comportements de serveur (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et
3 Indiquez une page à ouvrir lorsque l'utilisateur clique sur le lien, puis cliquez sur OK.
1 Ouvrez la page qui se chargera dans Dreamweaver.
2 Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et sélectionnez Authentification de
3 Sélectionnez l'option Se déconnecter au chargement de la page, puis cliquez sur OK.
Note: Cette fonctionnalité n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure. 1 Ouvrez un document ColdFusion dans Dreamweaver, et choisissez Commandes > Assistant d’ouverture de session
2 Saisissez les paramètres voulus dans l’assistant d’ouverture de session ColdFusion a Indiquez le chemin d’accès complet du répertoire à sécuriser. b Dans l’écran suivant, choisissez l’un des types d’authentification suivants : Authentification simple Sécurise l’application à l’aide d’un nom et d’un mot de passe identiques pour tous les
Authentification Windows NT Sécurise l’application avec les noms d’utilisateur et mots de passe de Windows NT. Authentification LDAP Sécurise l’application avec les noms d’utilisateur et mots de passe enregistrés sur un serveur LDAP.
• Si vous avez choisi l’authentification Windows NT, indiquez le domaine NT à utiliser pour la validation. • Si vous avez choisi l’authentification LDAP, indiquez le serveur LDAP à utiliser pour la validation. 3 Transférez les nouveaux fichiers sur le site distant. Ces fichiers se trouvent dans le dossier local de votre site.
“Activation des améliorations ColdFusion” on page 707 “Création d'une page à accès restreint” on page 677 “Sécurisation d’un dossier dans votre application (ColdFusion)” on page 680
A propos des composants ColdFusion Les fichiers de composants ColdFusion (CFC) permettent d'encapsuler la logique d'application et d'entreprise au sein d'unités autonomes réutilisables. Ils permettent également de créer rapidement des services Web.
Vous pouvez utiliser Dreamweaver pour travailler avec des CFC. Pour plus d'informations sur les balises et la syntaxe des CFC, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). Note: Les CFC ne peuvent être utilisés qu’avec ColdFusion MX ou une version ultérieure. Les CFC ne sont pas pris en charge par la version 5 de ColdFusion. Les CFC sont conçus pour offrir aux développeurs une méthode d'encapsulage des éléments de leurs sites Web, qui soit à la fois simple et puissante. Ces composants s'utilisent généralement pour la logique d'application ou d'entreprise. Utilisez des balises personnalisées pour introduire des éléments de présentation tels que des messages personnalisés ou des menus dynamiques. L'ajout de parties interchangeables peut rendre les sites dynamiques plus efficaces, comme c'est le cas pour bon nombre d'autres types de structures. Il peut arriver, par exemple, qu'un site dynamique doive exécuter la même requête à maintes reprises ou recalculer le prix total d'un panier d'achats à chaque fois qu'un article est ajouté. Les composants peuvent se charger de ces tâches. Vous pouvez réparer, améliorer, développer, voire remplacer un composant sans que cela ait un grand impact sur le reste de l'application. Prenons l'exemple d'un magasin en ligne qui calcule les frais de port en fonction du total de la commande passée. Pour les commandes inférieures à 20 €, les frais de port sont de 4 € ; pour les commandes comprises entre 20 € et 40 €, ils sont de 6 €, etc. Vous pourriez insérer la logique de calcul des frais de port sur la page du panier d'achats et sur la page de règlement. Vous seriez alors amené à mélanger du code de présentation HTML et du code de logique CFML. Avec cette méthode, il est cependant souvent difficile de réutiliser et de gérer le code. Il vaut donc mieux créer un CFC appelé Pricing, incluant entre autres une fonction appelée ShippingCharge. La fonction accepte un argument représentant un prix et renvoie les frais de port. Ainsi, si la valeur de l'argument est de 32,80, la fonction renvoie 6. Sur les pages du panier d'achats et de règlement, il vous reste à insérer une balise spéciale appelant la fonction ShippingCharge. Lorsque la page est demandée, la fonction est appelée et les frais de port sont renvoyés à la page. Supposons que le magasin fasse ultérieurement une offre promotionnelle : livraison gratuite pour toute commande d'un montant supérieur à 100 €. Il vous suffit alors de modifier les frais de port à un seul endroit, à savoir la fonction ShippingCharge du composant Pricing, pour que les frais de port soient mis à jour sur toutes les pages utilisant la fonction.
Le panneau Composants (Fenêtre > Composants) permet d'afficher et de modifier les composants ColdFusion, ainsi que d'écrire dans la page un code qui appelle la fonction lorsque la page CFM est demandée. Note: Le panneau Composants est uniquement disponible lors de l'affichage d'une page ColdFusion dans Dreamweaver.
“Création de pages Web qui emploient des CFC” on page 684
Vous pouvez utiliser Dreamweaver pour définir visuellement un CFC et ses fonctions. Dreamweaver crée un fichier .cfc et insère automatiquement les balises CFML nécessaires.
3 Cliquez sur le bouton plus (+), complétez la boîte de dialogue Créer un composant, puis cliquez sur OK. a Dans la section Composants, saisissez les détails du composant. Voici une liste partielle : Nom Spécifie le nom de fichier du composant. Ce nom ne peut contenir que des caractères alphanumériques et des
Répertoire des composants Indique l'endroit dans lequel le composant sera enregistré. Sélectionnez le dossier racine de l'application Web (\Inetpub\wwwroot\monapp\, par exemple) ou l'un de ses sous-dossiers.
Veillez à bien définir le type de valeur renvoyée par la fonction dans l'option Type de renvoi. Si vous choisissez l'option « distant » dans le menu Accès, la fonction peut désormais servir de service Web. c Pour définir un ou plusieurs arguments pour une fonction, choisissez Arguments dans la liste Section, sélectionnez
4 Si vous utilisez un serveur de développement distant, téléchargez vers le serveur distant le fichier CFC et tous les
Le téléchargement des fichiers vers le serveur garantit que les fonctionnalités de Dreamweaver, telles que le mode Live et Aperçu dans le navigateur, fonctionnent correctement. Dreamweaver écrit un fichier .cfc et l'enregistre dans le dossier spécifié. Le nouveau composant s'affiche également dans le panneau Composants (il vous suffit de cliquer sur Actualiser). 5 Pour supprimer un composant, vous devez supprimer manuellement le fichier CFC du serveur.
“Création de pages Web qui emploient des CFC” on page 684 “A propos des composants ColdFusion” on page 680
Dreamweaver permet d’examiner visuellement et globalement les composants ColdFusion (CFC) situés dans le dossier de votre site ou sur le serveur. Dreamweaver lit les fichiers CFC et affiche les informations qui les concernent dans une arborescence qu'il est facile de parcourir dans le panneau Composants. Dreamweaver recherche les composants sur votre serveur d'évaluation (consultez la section “Connexion à la base de données dans Dreamweaver” on page 563). Si vous créez des CFC ou modifiez des CFC existants, veillez à les transférer sur le serveur d’évaluation afin qu’ils apparaissent dans le panneau Composants. Pour afficher les composants situés sur un autre serveur, modifiez les paramètres du serveur d'évaluation. Vous pouvez consulter les informations suivantes relatives aux composants CF :
• examiner les propriétés des fonctions qui servent de services Web. Si vous voulez utiliser Dreamweaver pour inspecter les CFC résidant dans la racine du serveur tout en gérant les fichiers du site dans une racine de site Web différente, vous pouvez définir deux sites Dreamweaver. Configurez le premier site de façon à ce qu'il renvoie à la racine du serveur et le second pour qu'il renvoie à la racine du site Web. Utilisez le menu Site du panneau Fichiers pour passer rapidement d'un site à l'autre. Pour afficher les CFC dans Dreamweaver, procédez comme suit : 1 Ouvrez une page ColdFusion dans Dreamweaver. 2 Dans le panneau Composants (Fenêtre > Composants), choisissez Composants CF dans le menu déroulant. 3 Dans le panneau, cliquez sur le bouton Actualiser pour récupérer les composants.
Si les composants existants n'apparaissent pas, cliquez sur le bouton Actualiser dans la barre d'outils du panneau. 4 Pour afficher uniquement les CFC situés dans le dossier de votre site, cliquez sur le bouton Afficher uniquement
Note: Cette fonctionnalité n’est disponible que si vous avez défini un ordinateur exécutant ColdFusion MX 6 ou une version ultérieure comme serveur d’évaluation de Dreamweaver. Note: Si le site actuel apparaît dans un dossier virtuel sur le serveur distant, le filtrage n’est pas opérationnel. 5 Cliquez sur le bouton Plus (+) en regard du nom du dossier pour afficher les composants qu'il contient.
• Pour connaître les arguments qu'une fonction accepte, ainsi que leur type et leur caractère facultatif ou obligatoire, développez la branche de la fonction dans l'arborescence. Aucun bouton Plus (+) ne figure en regard des fonctions sans argument.
Vous pouvez également cliquer sur l'élément avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) et choisir Obtenir des détails dans le menu déroulant qui s'affiche. Les détails de l'élément sont affichés dans une boîte de message.
“Configuration d'un serveur d'évaluation” on page 50 “Activation des améliorations ColdFusion” on page 707 “Création de pages Web qui emploient des CFC” on page 684
Dreamweaver permet de modifier de façon rationalisée le code des composants ColdFusion définis dans un site. Vous pouvez, par exemple, ajouter, modifier ou supprimer toute fonction d'un composant sans quitter Dreamweaver.
Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants. Pour afficher les composants, ouvrez le panneau Composants (Fenêtre > Composants), choisissez Composants CF dans le menu déroulant du panneau, puis cliquez sur le bouton Actualiser dans le panneau. Comme ColdFusion s'exécute localement, Dreamweaver affiche les composants figurant sur votre disque dur. Procédez comme suit pour modifier un composant. 1 Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants (Fenêtre
2 Dans le menu déroulant du panneau, choisissez Composants CF, puis cliquez sur le bouton Actualiser la liste des
Le fichier du composant est ouvert en mode Code. 4 Pour modifier une fonction, un argument ou une propriété spécifique, double-cliquez sur l'élément dans
5 Effectuez les modifications manuellement en mode Code. 6 Enregistrez le fichier (Fichier > Enregistrer). 7 Pour qu'une nouvelle fonction apparaisse dans le panneau Composants, actualisez la vue en cliquant sur le bouton
“Affichage de CFC dans Dreamweaver” on page 682
Note: Pour connaître d'autres modes d'utilisation des composants, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). 1 Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant. 2 Basculez en mode Code (Affichage > Code).
• Sélectionnez la fonction dans le panneau et cliquez sur le bouton Insérer de la barre d'outils du panneau (deuxième bouton à partir de la droite). Dreamweaver insère le code dans la page au niveau du point d'insertion. 5 Si vous insérez une fonction possédant des arguments, complétez manuellement le code des arguments.
ColdFusion). 6 Enregistrez la page (Fichier > Enregistrer).
(CFC). En définissant un jeu d’enregistrements dans un CFC, il n’est plus nécessaire de le définir dans chaque page qui l’utilise. Le jeu d’enregistrements est défini une fois pour toutes dans le CFC, qui est utilisé dans les différentes pages. Note: Cette fonctionnalité n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure. Pour plus d’informations, consultez la section “Activation des améliorations ColdFusion” on page 707. 1 Créez ou ouvrez un fichier CFC dans Dreamweaver. 2 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements
La boîte de dialogue Jeu d’enregistrements s'affiche. Vous pouvez choisir de travailler dans la boîte de dialogue simple ou avancée. 3 Pour utiliser une fonction existante du CFC, sélectionnez cette fonction dans la liste déroulante Fonction, puis
Le jeu d'enregistrements sera défini dans cette fonction. 4 Pour définir une nouvelle fonction dans le CFC, cliquez sur le bouton Nouvelle fonction, saisissez le nom de la
Ce nom ne peut contenir que des caractères alphanumériques et des caractères de soulignement (_). 5 Pour définir un jeu d'enregistrements pour la fonction, définissez les options de la boîte de dialogue Jeu
La nouvelle fonction est insérée dans le CFC qui définit le jeu d'enregistrements.
La boîte de dialogue Jeu d’enregistrements s'affiche. Vous pouvez choisir de travailler dans la boîte de dialogue simple ou avancée. 3 Cliquez sur le bouton Requête CFC. 4 Remplissez la boîte de dialogue Requête CFC, cliquez sur OK, puis cliquez à nouveau sur OK pour ajouter le jeu
5 Utilisez le panneau Liaisons pour lier le jeu d’enregistrements aux divers éléments de la page.
1 Dans la zone Nom, saisissez le nom du jeu d'enregistrements CFC.
Le nom d'un jeu d'enregistrements ne peut contenir que des caractères alphanumériques et des caractères de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux. 2 Sélectionnez un dossier parmi ceux qui sont définis sur le serveur.
Auparavant, vérifiez que vous avez bien transféré vos CFC sur le serveur d’évaluation. Seuls les fichiers CFC sur le serveur d’évaluation sont affichés. 3 Sélectionnez un composant parmi ceux qui sont définis dans le dossier sélectionné.
4 (Facultatif) Pour créer un nouveau composant, cliquez sur le bouton Créer un nouveau composant. a Dans la zone Nom, saisissez le nom du nouveau CFC. Ce nom ne peut contenir que des caractères alphanumériques
5 Dans le menu déroulant Fonction, sélectionnez la fonction contenant la définition du jeu d’enregistrements.
Note: Les zones Connexion et SQL sont toutes les deux en lecture seule.
Le type de valeur peut être un paramètre d’URL, une variable de formulaire, un cookie, une variable de session, une variable d’application ou une valeur fixe que vous saisissez. b Dans la zone Valeur par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre.
7 Cliquez sur Tester pour vous connecter à la base de données et créer une instance du jeu d'enregistrements.
Si la requête a été correctement exécutée, le jeu d’enregistrements est affiché dans un tableau. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer la requête. 8 Cliquez sur OK.
A propos de la collecte d'informations auprès des utilisateurs Vous pouvez utiliser des formulaires Web ou des liens hypertexte pour recueillir des informations provenant des utilisateurs, les stocker dans la mémoire du serveur et les utiliser pour générer des réponses dynamiques basées sur les données entrées par les utilisateurs. Les outils les plus fréquemment utilisés pour recueillir des informations utilisateur sont les formulaires HTML et les liens hypertexte. Les formulaires HTML permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la
Les liens hypertextes permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la
En cas d'emploi de la méthode POST, les paramètres sont envoyés au serveur Web dans l'en-tête du document et ne sont pas visibles ni accessibles à quiconque visualise la page par une méthode standard. La méthode POST doit être utilisée pour les valeurs qui influent sur le contenu d'une base de données (par exemple insertion, mise à jour ou suppression d'enregistrements) ou pour les valeurs envoyées par courrier électronique. La méthode GET annexe les paramètres à l'URL demandée. Ces paramètres sont pour leur part visibles pour quiconque affiche la page. La méthode GET doit être utilisée pour les formulaires de recherche. Vous pouvez utiliser Dreamweaver pour concevoir rapidement des formulaires HTML qui envoient les paramètres de formulaire au serveur. Vous devez connaître la méthode que vous utilisez pour transmettre les informations du navigateur au serveur.
à cocher ou liste/menu afin de contrôler les valeurs susceptibles d'être envoyées par l'utilisateur. Cela évite que les utilisateurs ne commettent des erreurs lors de la saisie d'informations et empêche de ce fait toute erreur au niveau de l'application. L'exemple ci-dessous décrit un formulaire contenant un menu déroulant à trois choix :
“Création de formulaires Web” on page 691 “Ajout de contenu dynamique dans les pages” on page 607 “Accès à une base de données” on page 552
Lorsqu'il reçoit une demande et que des paramètres sont annexés à l'URL de la demande, le serveur met les paramètres à la disposition de la page demandée avant de fournir la page au navigateur.
2 Le serveur stocke temporairement en mémoire le paramètre d'URL. 3 La page report.cfm utilise le paramètre pour obtenir le tarif des articles en euros. Ces montants peuvent soit être
4 Le serveur renvoie la page report.cfm au navigateur en affichant le montant des articles dans la devise demandée.
SERVEUR WEB http://www.mysite.com/ report.cfm?Currency="€" Currency="€" Les sites Web financiers affichant le cours d'actions particulières en fonction des symboles boursiers sélectionnés précédemment par un utilisateur ont recours à ce type de paramètres, par exemple. Les développeurs d'applications Web utilisent souvent les paramètres d'URL pour transmettre des valeurs aux variables au sein des applications. Vous pouvez, par exemple, transmettre des termes à rechercher à des variable SQL au sein d'une application Web afin de générer des résultats de recherche.
Dans l'exemple ci-dessous, trois liens créent un même paramètre d'URL (action) pouvant avoir trois valeurs : Add (ajouter), Update (mettre à jour) et Delete (supprimer). Lorsque l'utilisateur clique sur un lien, une valeur de paramètre différente est envoyée au serveur et l'action demandée est exécutée. <a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a> <a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a> Après avoir défini un paramètre d'URL dans Dreamweaver, vous pouvez en insérer la valeur dans une page.
“A propos des paramètres d'URL et de formulaire” on page 586 “Etablissement de liens” on page 289 “Définition de paramètres de formulaire” on page 600 “Ajout de contenu dynamique dans les pages” on page 607 “Accès à une base de données” on page 552
A propos des formulaires Web Lorsqu'un visiteur saisit des informations dans un formulaire Web affiché dans un navigateur Web et clique sur le bouton d'envoi, les informations sont envoyées à un serveur, où une application ou un script côté serveur les traite. Le serveur répond en renvoyant les informations traitées à l'utilisateur (ou au client) ou en exécutant une autre action déterminée par le contenu du formulaire. Vous pouvez créer des formulaires qui envoient des données à la plupart des serveurs d'application, dont PHP, ASP et ColdFusion. Si vous utilisez ColdFusion, vous pouvez également ajouter des contrôles de formulaire spécifiques à ColdFusion dans vos formulaires. Note: Vous pouvez également envoyer des données de formulaire directement à une adresse électronique.
Dans Dreamweaver, les types d'entrées de formulaire sont appelés des objets de formulaire. Les objets de formulaire sont les éléments qui permettent aux utilisateurs d'entrer des données. Vous avez la possibilité d'ajouter les objets de formulaire suivants à un formulaire : Champs de texte Acceptent tout type d'entrée alphanumérique. Vous pouvez afficher le texte sur une seule ligne, sur
Champs masqués Stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse électronique ou
Boutons Exécutent des actions lorsque l'utilisateur clique dessus. Vous pouvez ajouter une étiquette ou un nom personnalisé à un bouton ou utiliser l'une des étiquettes prédéfinies : Envoyer ou Rétablir. Utilisez un bouton pour l'envoi des données du formulaire au serveur ou pour la réinitialisation du formulaire. Vous pouvez également attribuer à un bouton d'autres tâches de traitement préalablement définies dans un script. Un bouton peut ainsi calculer le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées.
Menus de reroutage Sont des listes de navigation ou des menus déroulants qui vous permettent d'insérer un menu dans lequel chaque option est reliée à un document ou à un fichier. Champs de fichier Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le télécharger en tant que données de formulaire. Champs d'image Permettent d'insérer une image dans un formulaire. Utilisez les champs d'image pour créer des boutons graphiques (bouton Envoyer ou Réinitialiser, par exemple). Vous devez associer un comportement à l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tâche autre que l'envoi de données.
Dans une page affichée en mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas cette bordure, choisissez Affichage > Assistances visuelles > Eléments invisibles. 3 Définissez les propriétés du formulaire HTML dans l'inspecteur Propriétés (Fenêtre > Propriétés) : a Dans la fenêtre de document, cliquez sur la bordure du formulaire afin de le sélectionner. b Dans la zone Nom du formulaire, tapez un nom unique afin d'identifier le formulaire.
VBScript. Si vous n'attribuez aucun nom au formulaire, Dreamweaver génère un nom en utilisant la syntaxe formn et augmente la valeur de n pour chaque nouveau formulaire ajouté à la page. c Dans la zone Action, indiquez la page ou le script qui va traiter les données du formulaire en entrant son chemin
Par défaut Permet de se baser sur le paramétrage par défaut du navigateur pour envoyer les données du formulaire au serveur. En général, la valeur par défaut est la méthode GET. GET Permet d'annexer la valeur à l'URL demandant la page. POST Permet d'incorporer les données du formulaire dans la requête HTTP.
Il est possible d'ajouter des signets aux pages dynamiques générées par des paramètres transmis par la méthode GET, car toutes les valeurs nécessaires pour régénérer la page sont contenues dans l'URL affichée dans la zone Adresse du navigateur. En revanche, il n'est pas possible d'ajouter de signet aux pages dynamiques générées par des paramètres transmis par la méthode POST. Si vous rassemblez des noms d'utilisateur et des mots de passe, des numéros de cartes de crédit ou d'autres informations confidentielles, la méthode POST peut sembler plus sûre que la méthode GET. Toutefois, les informations envoyées par la méthode POST ne sont pas codées. Par conséquent, les pirates peuvent les récupérer facilement. Pour garantir leur sécurité, utilisez une connexion sécurisée à un serveur sécurisé. e (Facultatif) Utilisez le menu déroulant Enctype pour définir le type de codage MIME des données envoyées au
Le paramètre par défaut application/x-www-form-urlencode est généralement utilisé en conjonction avec la méthode POST. Si vous créez un champ de téléchargement de fichier, spécifiez le type de codage MIME multipart/form-data. f
_blank Ouvre le document de destination dans une nouvelle fenêtre sans nom. _parent Ouvre le document de destination dans la fenêtre parente de celle affichant le document actif. _self Ouvre le document de destination dans la même fenêtre que celle dans laquelle le formulaire a été envoyé. _top Ouvre le document de destination au sein de la fenêtre en cours. Cette valeur permet de s'assurer que le
4 Insérez des objets de formulaire dans la page : a Placez le point d'insertion à l'endroit où l'objet de formulaire doit s'afficher dans le formulaire. b Choisissez l'objet dans le menu Insertion > Formulaire, ou dans la catégorie Formulaires du panneau Insertion. c Complétez la boîte de dialogue Attributs d'accessibilité des balises d'entrée. Pour plus d'informations, cliquez sur
Note: Si la boîte de dialogue Attributs d'accessibilité des balises d'entrée n'est pas visible, il se peut que le point d'insertion se trouvait en mode Code lorsque vous avez tenté d'insérer l'objet de formulaire. Assurez-vous que le point d'insertion se trouve bien en mode Création, puis réessayez. Pour plus d'informations à ce sujet, reportez-vous à l'article Creating HTML forms in Dreamweaver (en anglais) de David Powers. d Définissez les propriétés des objets. e Entrez un nom pour l'objet dans l'inspecteur Propriétés.
L'étiquette que vous attribuez à l'objet correspond au nom de la variable où la valeur du champ (les données saisies) sera stockée. Il s'agit de la valeur envoyée au serveur pour traitement. Note: Tous les boutons radio d'un même groupe doivent porter le même nom. f
Lors de la conception de formulaires, n'oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin que les utilisateurs sachent ce qu'ils ont à faire (par exemple, « Entrez votre nom » pour demander des informations de nom). Utilisez des tableaux pour fournir une structure pour les objets et les étiquettes de champ. Assurez-vous, lorsque vous utilisez des tableaux dans un formulaire, que toutes les balises table sont incluses entre les balises form. Vous trouverez un didacticiel consacré à la création de formulaires à l'adresse www.adobe.com/go/vid0160_fr. Vous trouverez un didacticiel consacré à la mise en page de formulaires à l'aide de CSS à l'adresse www.adobe.com/go/vid0161_fr.
“Définition de paramètres d'URL” on page 599 “Création de formulaires ColdFusion” on page 706 “Création de pages Spry visuellement” on page 442 Didacticiel consacré à la création de formulaires Didacticiel consacré à la mise en page de formulaires
Sélectionnez l'objet champ de texte et définissez les options suivantes dans l'inspecteur Propriétés : Largeur car. Définit le nombre maximal de caractères pouvant être affichés dans le champ. Ce nombre peut être inférieur à Nbre max. de caract., qui définit le nombre maximal de caractères pouvant être entrés dans le champ. Ainsi, si le champ Largeur de caractère est défini sur la valeur par défaut 20 et qu'un utilisateur saisit 100 caractères, ce dernier ne pourra voir que 20 de ces caractères dans le champ de texte. Bien que l'utilisateur ne voie pas tous les caractères saisis dans le champ, ils sont reconnus par l'objet de champ et envoyés au serveur pour traitement. Nbre max. de caract. Définit le nombre maximum de caractères qu'il est possible de saisir dans le champ pour les champs de texte à une seule ligne. Utilisez Nbre max. de caract. pour limiter un code postal à 5 chiffres, un mot de passe à 10 caractères, etc. Si vous ne renseignez pas la zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d'une longueur illimitée. Si l'entrée de l'utilisateur dépasse la largeur des caractères du champ, le texte défile. Si l'entrée de l'utilisateur dépasse le nombre maximum de caractères, le formulaire émet un son d'alerte. Nbre lignes (Disponible lorsque l'option Multiligne est sélectionnée) Définit la hauteur du champ pour les champs de
Désactivé Désactive la zone de texte. Lecture seule Transforme la zone de texte en zone en lecture seule. Type Désigne le type de champ : ligne simple, multiligne ou mot de passe.
• Lignes multiples Permet de positionner une balise textarea. Le paramètre Larg. des caractères est relié à l'attribut cols ; Nbre caract. max. est relié à l'attribut rows.
Larg. des caractères et Nbre max. de caract. sont reliés aux mêmes attributs que les champs de texte à une seule ligne. Lorsqu'un utilisateur entre des données dans un champ mot de passe, le texte apparaît sous forme de puces ou d'astérisques pour le protéger du regard de tiers. Init val Attribue la valeur affichée dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ. Classe Permet d'appliquer des règles CSS à l'objet.
Valeur Détermine le texte apparaissant sur le bouton. Action Détermine ce qui se passe lorsque le bouton est cliqué.
Les données sont envoyées à la page ou au script spécifié par la propriété Action du formulaire.
• Aucun Spécifie l'action a exécuter lorsque l'utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui ouvre une autre page lorsque l'utilisateur clique sur le bouton. Classe Applique des règles CSS à l'objet.
Valeur Définit la valeur à envoyer au serveur lorsque la case à cocher est activée. Par exemple, dans un sondage, vous
Etat initial Détermine si la case à cocher est sélectionnée lorsque le formulaire est chargé dans le navigateur. Dynamique Permet au serveur de déterminer de façon dynamique l'état initial de la case à cocher. Par exemple, vous pouvez présenter visuellement les informations Oui/Non stockées dans un enregistrement de base de données à l'aide de cases à cocher. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'exécution, le serveur lit l'enregistrement de base de données et active la case à cocher si la valeur est Oui. Classe Applique des règles CSS (Cascading Style Sheets, feuilles de style en cascade) à l'objet.
Valeur Définit la valeur à envoyer au serveur lorsque le bouton radio est sélectionné. Par exemple, vous pouvez taper ski dans la zone de texte Valeur pour indiquer qu'un utilisateur a choisi le ski.
Dynamique Permet au serveur de déterminer de façon dynamique l'état initial du bouton radio. Par exemple, vous
Classe Applique des règles CSS à l'objet.
Liste/Menu Attribue un nom au menu. Ce nom doit être unique. Type Indique si le menu se déroule lorsque l'utilisateur clique dessus (option Menu) ou s'il affiche une liste déroulante
Sélectionnez l'option Liste pour afficher quelques-unes ou l'ensemble des options lorsque le formulaire s'affiche dans un navigateur, afin de permettre aux utilisateurs de sélectionner plusieurs éléments. Hauteur (Type Liste uniquement) Définit le nombre d'éléments affichés dans le menu.
2 Tapez un libellé ainsi qu'une valeur optionnelle pour chaque élément de menu.
3 Utilisez les boutons fléchés Haut et Bas pour réorganiser les éléments de la liste.
Dynamique Permet au serveur de sélectionner de façon dynamique un élément dans le menu lors de son affichage
Classe Permet d'appliquer des règles CSS à l'objet. Initialement sélectionné Définit les éléments sélectionnés par défaut dans la liste. Cliquez sur un ou plusieurs
Vous pouvez créer un champ de téléchargement de fichier permettant aux utilisateurs de sélectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le télécharger sur le serveur. Un champ de fichier est similaire à un champ de texte, mais contient également un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accès au fichier à télécharger, soit cliquer sur le bouton Parcourir pour le rechercher et le sélectionner. Avant d'utiliser les champs de téléchargement de fichiers, vous devez disposer d'un script côté serveur ou d'une page capable de traiter les soumissions de fichiers. Consultez la documentation de la technologie serveur à utiliser pour traiter les données des formulaires. Par exemple, si vous utilisez PHP, consultez la section « Handling files uploads » (Gestion des téléchargements de fichiers) dans le manuel PHP à l'adresse http://us2.php.net/features.file-upload.php. Les champs de fichier nécessitent l'utilisation de la méthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transféré à l'adresse indiquée dans la zone de texte Action du formulaire. Note: Avant d'utiliser le champ de fichier, vérifiez auprès de votre administrateur de serveur que le téléchargement anonyme de fichiers est autorisé. 1 Insérez un formulaire dans la page (Insertion > Formulaire). 2 Sélectionnez le formulaire pour en afficher l'inspecteur Propriétés. 3 Dans le menu déroulant Méthode, sélectionnez POST. 4 Dans le menu déroulant Enctype, sélectionnez multipart/form-data. 5 Dans la zone de texte Action, spécifiez le script côté serveur ou la page capable de traiter le fichier téléchargé. 6 Placez le point d'insertion à l'intérieur de la bordure du formulaire et sélectionnez Insertion > Formulaire > Champ
7 Définissez les options suivantes dans l'inspecteur Propriétés : Champ de fichier Indique le nom de l'objet champ de fichier. Largeur car. Définit le nombre maximal de caractères pouvant être affichés dans le champ.
2 Sélectionnez Insertion > Formulaire > Champ d'image.
3 Sélectionnez l'image souhaitée pour le bouton dans la boîte de dialogue Sélectionnez la source de l'image et cliquez
4 Définissez les options suivantes dans l'inspecteur Propriétés : Zone_image Attribue un nom au bouton. Les deux noms réservés, Envoyer et Réinitialiser, indiquent respectivement
Src Spécifie l'image à utiliser pour le bouton. Sec Permet de saisir un texte descriptif au cas où l'image ne parvient pas à se charger dans le navigateur. Alignement Définit l'attribut d'alignement de l'objet. Modifier image Lance votre éditeur d'image par défaut et ouvre le fichier d'image afin que vous puissiez le modifier. Classe Permet d'appliquer des règles CSS à l'objet.
Champ masqué Indique le nom du champ. Valeur Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l'envoi du formulaire.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Sélectionnez Insertion > Formulaire > Groupe de boutons radio. 3 Complétez les options de la boîte de dialogue, puis cliquez sur OK. a Dans la zone de texte Nom, tapez le nom du groupe de boutons radio.
dans la zone de texte Sélectionner une valeur égale à, saisissez une valeur égale à celle du bouton radio. Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icône représentant un éclair (en regard de la zone de texte), puis sélectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indiquée doit correspondre à celle de l'un des boutons radio du groupe. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés). e Sélectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons.
Dreamweaver crée un tableau à une seule colonne en plaçant les boutons radio sur la gauche et les étiquettes sur la droite. Vous pouvez également définir les propriétés à l'aide de l'inspecteur Propriétés ou directement en mode Code.
1 Placez le point d'insertion dans la bordure du formulaire. 2 Choisissez Insertion > Formulaire > Groupe de cases à cocher. 3 Complétez les options de la boîte de dialogue, puis cliquez sur OK. a Dans la zone Nom, tapez le nom du groupe de cases à cocher.
Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icône représentant un éclair (en regard de la zone de texte), puis sélectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indiquée doit correspondre à celle de l'une des cases à cocher du groupe. Pour afficher les valeurs des cases à cocher, sélectionnez chacune d'elles puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés). e Sélectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les cases à cocher.
Vous pouvez également définir les propriétés à l'aide de l'inspecteur Propriétés ou directement en mode Code.
Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d'un site. Par exemple, de nombreux sites utilisent des menus pour présenter aux utilisateurs un ensemble d'options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des éléments de menu en un seul endroit (la table de base de données dans laquelle sont stockés ces éléments) afin de mettre à jour toutes les instances de ce même menu sur le site.
“Définition de sources de contenu dynamique” on page 592
1 Insertion d'un objet de formulaire Liste/Menu HTML dans votre page a Cliquez à l'intérieur du formulaire HTML sur la page (Insertion > Formulaire > Formulaire). b Choisissez Insertion > Formulaire > Liste/Menu pour insérer l'objet de formulaire. 2 Effectuez l'une des opérations suivantes :
Dynamique de l'inspecteur Propriétés.
3 Complétez les options de la boîte de dialogue Liste/Menu dynamique, puis cliquez sur OK. a Dans le menu déroulant Options du jeu d'enregistrements, choisissez le jeu d'enregistrements à utiliser comme
Ajout de la fonctionnalité dynamique à des menus de formulaire HTML existants 1 En mode Création, sélectionnez l'objet de formulaire liste/menu. 2 Dans l'inspecteur Propriétés, cliquez sur le bouton Dynamique. 3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis définir un jeu d'enregistrements ou une autre source de contenu dynamique pour la zone de texte. 1 Sélectionnez le champ de texte dans le formulaire HTML de votre page. 2 Dans l'inspecteur Propriétés, cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Val. init. pour
3 Sélectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.
1 Dans le menu déroulant Champ de texte, sélectionnez le champ de texte que vous souhaitez rendre dynamique. 2 Cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Définir la valeur à, puis sélectionnez une
Cette source doit contenir des informations textuelles. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source.
“Définition de sources de contenu dynamique” on page 592
Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis définir un jeu d'enregistrements ou une autre source de contenu dynamique pour ces cases à cocher. L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false. 1 Sélectionnez un objet de formulaire correspondant à une case à cocher dans votre page. 2 Dans l'inspecteur Propriétés, cliquez sur le bouton Dynamique.
La source de données doit contenir des données booléennes telles que Yes et No, ou true et false. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source.
Par exemple, pour que la case soit activée lorsqu'un champ donné d'un enregistrement a la valeur Yes, tapez Yes dans la zone de texte Egal à. Note: Cette valeur est également renvoyée au serveur si l'utilisateur clique sur le bouton Envoyer du formulaire.
Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis insérer au moins un groupe de boutons radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez également définir un jeu d'enregistrements ou une autre source de contenu dynamique pour les boutons radio. L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false. 1 En mode Création, sélectionnez un bouton radio dans le groupe. 2 Dans l'inspecteur Propriétés, cliquez sur le bouton Dynamique. 3 Complétez les options de la boîte de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.
1 Dans le menu déroulant Groupe de boutons radio dynamiques, sélectionnez un formulaire et un groupe de boutons
La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe. 2 Dans la liste des valeurs affichées, sélectionnez la valeur à présélectionner dynamiquement. Cette valeur s'affiche
3 Cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Sélectionner une valeur égale à, puis
Le jeu d'enregistrements que vous sélectionnez contient des valeurs correspondant à celles des boutons radio. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés). 4 Cliquez sur OK.
(ColdFusion) 1 Dans le menu déroulant Groupe de boutons radio, sélectionnez un groupe de boutons radio et un formulaire. 2 Cliquez sur l'icône en forme d'éclair en regard de la zone de texte Sélectionner une valeur égale à. 3 Renseignez la boîte de dialogue Données dynamiques, puis cliquez sur OK. a Sélectionnez une source de données dans la liste.
Vous pouvez également créer dans Dreamweaver des formulaires ColdFusion qui valident le contenu de certains champs. Pour plus d'informations, consultez le chapitre consacré à ColdFusion ci-dessous. 1 Créez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer.
2 Sélectionnez le bouton Envoyer. 3 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez le
4 Définissez les règles de validation de chaque champ de texte et cliquez sur OK.
Note: Le comportement Valider le formulaire est uniquement disponible lorsqu'un champ de texte a été inséré dans le document.
“Utilisation du widget Validation de zone de texte Spry” on page 464 “Utilisation du widget Zone de texte de validation Spry” on page 469 “Utilisation du widget Validation de la sélection Spry” on page 473 “Utilisation du widget Validation de case à cocher Spry” on page 476 “Validation des données de formulaire ColdFusion” on page 719
1 Sélectionnez l'objet de formulaire HTML. 2 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez un
Dreamweaver, vous pouvez configurer un bouton de formulaire pour exécuter un script particulier côté client lorsqu'un utilisateur clique sur le bouton. 1 Sélectionnez un bouton Envoyer dans un formulaire. 2 Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel
3 Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript à exécuter lorsque l'utilisateur clique sur le
Vous pouvez, par exemple, indiquer le nom d'une fonction qui n'existe pas encore, comme processMyForm(). 4 Si la fonction JavaScript ne figure pas encore dans la section head du document, ajoutez-la maintenant.
Vous devez effectuer cette opération une seule fois. 2 Dans le document, placez le point d'insertion à l'endroit où l'objet de formulaire doit apparaître. 3 Choisissez Insertion > Formulaire, puis l'objet de formulaire à insérer.
4 Complétez les options de la boîte de dialogue, puis cliquez sur OK. Voici une liste partielle des options :
ID attribue un ID au champ de formulaire. Cette valeur peut être utilisée pour faire référence au champ à partir de JavaScript. Elle est également utilisée comme valeur de l'attribut for si vous activez l'option Joindre une balise d'étiquette à l'aide de l'attribut For du groupe Style. Envelopper avec une balise d'étiquette Entoure l'élément de formulaire d'une balise d'étiquette, comme suit : <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> Note: Il s'agit de l'option d'accessibilité la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilisé. Aucune balise d'étiquette N'utilise pas de balise d'étiquette, comme suit: <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Ordre des tabulations Indique l'ordre d'apparition des objets de formulaire. Si vous définissez un ordre d'apparition
La définition d'un ordre d'apparition peut se révéler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un à l'autre dans un ordre particulier. 5 Cliquez sur Oui pour insérer une balise de formulaire.
Note: Si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.
1 Dans la fenêtre de document, sélectionnez l'objet. 2 Effectuez l'une des opérations suivantes :
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier la balise.
A propos des formulaires ColdFusion Les formulaires ColdFusion fournissent plusieurs mécanismes intégrés permettant de valider les données de formulaire. Par exemple, vous pouvez vérifier si un utilisateur a entré une date valide. Certains contrôles de formulaire comportent des fonctionnalités supplémentaires. Certaines d'entre elles n'ont pas de correspondant HTML et d'autres prennent directement en charge le remplissage dynamique du contrôle à partir de sources de données.
Il n’est nécessaire de définir le serveur d’évaluation que la première fois. Dreamweaver détecte ensuite automatiquement la version du serveur d'évaluation et rend les améliorations disponibles si ColdFusion est détecté. 1 Si ce n’est déjà fait, définissez un site Dreamweaver pour votre projet ColdFusion. 2 Choisissez Site > Gérer les sites, sélectionnez votre site dans la liste, puis cliquez sur Edition. 3 Sélectionnez la catégorie Serveurs et choisissez un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure
4 Ouvrez un document ColdFusion.
Note: Ces améliorations ne sont disponibles que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Ouvrez une page ColdFusion et placez le point d'insertion à l'endroit où vous souhaitez insérer le formulaire. 2 Choisissez Insertion > Objets ColdFusion > Formulaire > Formulaire, ou sélectionnez la catégorie Formulaires du
Dreamweaver insère un formulaire ColdFusion vierge. Dans une page affichée en mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas la bordure, vérifiez que l'option Affichage > Assistances visuelles > Eléments invisibles est activée. 3 En veillant à ce que le formulaire soit toujours sélectionné, utilisez l’inspecteur Propriétés pour définir les propriétés
Formulaire CF Définit le nom du formulaire.
Cible Permet de modifier la valeur de l’attribut « target » de la balise cfform. Type de codage Précise la méthode de codage utilisée pour transmettre les données du formulaire.
« application/x-www-form-urlencoded ». Format Détermine le type de formulaire à créer :
• XML Génère un formulaire XML XForms et place les résultats dans une variable avec le nom du formulaire ColdFusion. Rien n'est envoyé au client. Les contrôles enfants cfgrid et cftree peuvent être au format Flash ou applet. Style Permet d’indiquer un style pour le formulaire. Pour plus d'informations, consultez la documentation ColdFusion. Enveloppe Flash/XML Permet d’indiquer la couleur de halo pour donner un style au résultat. Le thème détermine la
Préserver les données Détermine si les valeurs initiales des contrôles doivent être remplacées ou non par les nouvelles
• Si elle a la valeur Vrai, ce sont les valeurs saisies qui sont utilisées. Source scripts Indique l’adresse URL (relative à la racine du site) du fichier JavaScript qui contient le code côté client utilisé par la balise et ses balises enfants. Cet attribut est utile si le fichier ne se trouve pas dans l'emplacement par défaut. Cet attribut peut être nécessaire dans certains environnements et configurations qui bloquent l'accès au dossier /CFIDE. L’emplacement par défaut, qui peut être modifié par l’administrateur ColdFusion, est /CFIDE/scripts/cfform.js. Archive Indique l’adresse URL des classes Java téléchargeables pour les contrôles d’applet cfgrid, cfslider et cftree. Leur emplacement par défaut est /CFIDE/classes/cfapplets.jar. Hauteur Indique la hauteur du formulaire. Largeur Indique la largeur du formulaire. Afficher l'éditeur de balises pour cfform Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur
4 Insérez des contrôles de formulaire ColdFusion.
Avant de définir les propriétés dans l'inspecteur Propriétés, vérifiez que le contrôle est sélectionné en mode Création. Pour plus d'informations sur les propriétés, cliquez sur l'icône Aide de l'inspecteur Propriétés. 6 Améliorez la mise en forme du formulaire ColdFusion.
ColdFusion dans un autre formulaire ColdFusion (c'est-à-dire faire se chevaucher des balises), mais vous pouvez inclure plusieurs formulaires ColdFusion dans une même page. Si vous créez un formulaire Flash, utilisez les styles CSS (feuilles de style en cascade ) pour le mettre en page. ColdFusion ignore les balises HTML du formulaire. N’oubliez pas de donner un libellé avec un texte descriptif aux champs du formulaire ColdFusion, pour aider les utilisateurs. Par exemple, créez un libellé « Indiquez votre nom » pour le champ destiné au nom de l’utilisateur.
“Validation des données de formulaire ColdFusion” on page 719 “Création d'un formulaire HTML” on page 694 Le panneau Insertion et le menu Insérer permettent d'insérer rapidement des contrôles dans un formulaire ColdFusion. Vous devez créer un formulaire ColdFusion vierge avant d’y insérer des contrôles. Note: Ces améliorations ne sont disponibles que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, placez le point d'insertion à l'intérieur de la bordure du formulaire. 2 Sélectionnez le contrôle dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catégorie
3 Cliquez sur le contrôle sur la page pour le sélectionner, puis définissez ses propriétés dans l'inspecteur Propriétés.
“Modification de contrôles de formulaire ColdFusion” on page 719 “Validation des données de formulaire ColdFusion” on page 719
Vous pouvez insérer visuellement dans votre formulaire un champ de texte ou de mot de passe ColdFusion, puis définir ses options. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure.
1 En mode Création, placez le point d'insertion à l'intérieur de la bordure du formulaire.
4 Pour attribuer une étiquette au champ de texte dans la page, cliquez en regard du champ de texte et tapez le texte
1 Répétez les étapes 1 et 2 de la procédure précédente (insertion d’un champ de texte). 2 Sélectionnez le champ de texte que vous venez d’insérer pour l’afficher dans l’inspecteur Propriétés. 3 Dans l'inspecteur Propriétés, sélectionnez la valeur Mot de passe dans le menu déroulant Mode texte.
Pour définir les options d'un champ de texte ou de mot de passe ColdFusion, définissez les options suivantes dans l'inspecteur Propriétés : CFtextfield (Ch. Texte CF) Définit l’attribut id de la balise <cfinput>. Valeur Permet d’indiquer le texte à afficher dans ce champ lorsque la page s’ouvre dans un navigateur. Cette chaîne
Pour indiquer une valeur dynamique, cliquez sur l'icône représentant un éclair à côté de la zone Valeur, et sélectionnez la colonne d'un jeu d'enregistrements dans la boîte de dialogue Données dynamiques. Les jeux d’enregistrements de cette colonne fournissent les valeurs affichées dans le champ de texte lorsque le formulaire est affiché dans un navigateur. Mode texte Permet de passer d’un champ de saisie de texte standard à un champ de saisie de mot de passe, et
Lecture seule Permet de mettre le texte affiché en lecture seule. Long. max. Indique le nombre maximum de caractères que peut contenir le champ. Masque Permet d’indiquer un masque de texte. Cette propriété permet de valider la saisie des utilisateurs Le format du masque est composé de caractères A, 9, X et ? .
Valider Spécifie le type de validation du champ actuel. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le champ de texte. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. Largeur Permet d’indiquer la largeur du contrôle, en pixels. Taille Permet d’indiquer la taille du contrôle. Obligatoire Permet de préciser si le champ de texte doit contenir des données pour que le formulaire soit transmis au
Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
Ces informations sont masquées afin que l'utilisateur ne puisse pas les voir. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, placez le point d'insertion à l'intérieur de la bordure du formulaire. 2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Champ caché CF.
Assistances visuelles > Eléments invisibles. 3 Sélectionnez le champ masqué sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cfhiddenfield (Champ masqué) Indique le nom unique du champ masqué. Valeur Permet d’indiquer la valeur du champ masqué. Cette chaîne peut être statique ou dynamique.
Valider Spécifie le type de validation du champ actuel. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le contrôle. A l'exécution, ce paramètre est ignoré par le serveur ColdFusion. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Zone de texte CF.
3 Sélectionnez la zone de texte sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cftextarea (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Largeur car. Indique le nombre de caractères par ligne. Nbre lignes Permet d’indiquer le nombre de lignes à afficher dans la zone de texte. Wrap (Renvoi à la ligne) Permet d’indiquer comment le texte saisi par les utilisateurs doit être renvoyé à la ligne. Obligatoire Permet d’indiquer si la saisie de texte dans ce contrôle est obligatoire (case cochée) ou non (case non
Valeur initiale Permet d’indiquer le texte à afficher dans la zone de texte lorsque la page s’ouvre dans un navigateur. Valider Spécifie le type de validation du champ actuel. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le contrôle. Style Permet d’indiquer un style pour le contrôle. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Vous pouvez insérer visuellement dans votre formulaire un bouton ColdFusion, puis définir ses propriétés. Les boutons contrôlent les différentes opérations du formulaire ColdFusion. Les boutons permettent d'envoyer les données du formulaire au serveur ou de réinitialiser le formulaire. Il s'agit en général des boutons Envoyer et Réinitialiser. Vous pouvez également attribuer à un bouton d'autres tâches de traitement préalablement définies dans un script. Un bouton peut ainsi calculer le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Placez le point d'insertion dans la bordure du formulaire ColdFusion. 2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Bouton CF.
Cfbutton (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Action Permet d’indiquer le type de bouton à créer. Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
“Modification de contrôles de formulaire ColdFusion” on page 719
Vous pouvez insérer visuellement dans votre formulaire une case à cocher ColdFusion, puis définir ses propriétés. Utilisez des cases à cocher pour permettre aux utilisateurs d'activer plusieurs options dans un groupe. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Placez le point d'insertion dans la bordure du formulaire. 2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Case à cocher CF.
3 Sélectionnez la case à cocher sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cfcheckbox (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Valeur Permet d’indiquer la valeur renvoyée par la case à cocher si l’utilisateur l’active. Etat initial Permet d’indiquer si la case à cocher est déjà activée lorsque la page s’ouvre dans un navigateur. Valider Spécifie le type de validation de la case à cocher. Valider à Spécifie le moment de validation de la case à cocher : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour la case à cocher. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
Vous pouvez insérer visuellement dans votre formulaire un bouton radio ColdFusion, puis définir ses propriétés. Utilisez des boutons radio lorsque vous souhaitez que les utilisateurs ne sélectionnent qu'une seule option dans un groupe. Elles sont généralement utilisées en groupe. Tous les boutons radio d'un même groupe doivent porter le même nom. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Placez le point d'insertion dans la bordure du formulaire. 2 Choisissez Insertion > Objets ColdFusion > Formulaire > Bouton radio.
3 Sélectionnez le bouton radio sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cfradiobutton (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Valeur Permet d’indiquer la valeur renvoyée par le bouton radio si l’utilisateur l’active. Etat initial Permet d’indiquer si le bouton radio est déjà activé lorsque la page s’ouvre dans un navigateur. Valider Spécifie le type de validation du bouton radio. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le bouton radio. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
“Modification de contrôles de formulaire ColdFusion” on page 719 “Validation des données de formulaire ColdFusion” on page 719
Il est possible d'insérer deux types de zones de liste dans un formulaire : un menu qui se « déroule » lorsque l'utilisateur clique dessus, ou un menu qui affiche une liste d'éléments que vous pouvez faire défiler et sélectionner. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Placez le point d'insertion dans la bordure du formulaire. 2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Sélection CF.
3 Sélectionnez la zone de liste sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cfselect (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Type Permet de choisir entre un menu déroulant ou une liste. Si vous choisissez le type Liste, les options Hauteur liste
Hauteur liste Permet d’indiquer le nombre de lignes à afficher dans la liste. Cette propriété n’est disponible qu’avec le
Autoriser la sélection de plusieurs listes Permet d’indiquer si l’utilisateur peut sélectionner plusieurs options à la fois dans la liste. Cette propriété n’est disponible qu’avec le type Liste. Modifier les valeurs Ouvre une boîte de dialogue qui permet d'ajouter, modifier ou supprimer des options à la zone de
Initialement sélectionné Définit les éléments sélectionnés par défaut dans la liste. Si vous avez activé l’option
Jeu d'enregistrements Permet d’indiquer le nom de la requête ColdFusion à utiliser pour remplir la liste ou le menu. Afficher colonne Permet d’indiquer la colonne du jeu d’enregistrements qui doit fournir le libellé de chaque élément de la liste. Cette propriété est utilisée de concert avec la propriété Jeu d’enregistrements. Colonne valeurs Permet d’indiquer la colonne du jeu d’enregistrements qui doit fournir la valeur de chaque élément
Etiquette Flash Permet d’indiquer un libellé pour la zone de liste. Hauteur Flash Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Flash Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Vous pouvez insérer visuellement dans votre formulaire un champ d’image ColdFusion, puis définir ses options. Les champs d’image permettent de créer des boutons personnalisés. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, placez le point d'insertion à l'intérieur de la bordure du formulaire. 2 Dans la catégorie Formulaire du panneau Insertion, cliquez sur l'icône Champ d'image CF. Recherchez l’image à
Note: Si le fichier d’image se trouve à l’extérieur du dossier racine du site, il est préférable de copier cette image dans le dossier racine. En effet, les images situées à l’extérieur du dossier racine risquent d’être inaccessible après publication du site. 3 Sélectionnez le champ d'image sur la page et définissez les options suivantes dans l'inspecteur Propriétés : Cfimagefield (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Src Permet d’indiquer l’adresse URL de l’image à insérer. Sec Permet d'indiquer un message qui apparaîtra lorsque l'image ne peut pas être affichée. Alignement Permet d’indiquer l’alignement de l’image. Bordure Permet d’indiquer la largeur de la bordure de l’image. Modifier image Ouvre l’image dans votre logiciel de retouche d’images par défaut.
Valider Spécifie le type de validation du champ d’image. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le bouton radio. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. Largeur Permet d’indiquer la largeur du contrôle, en pixels. Taille Permet d’indiquer la taille du contrôle. A l'exécution, ce paramètre est ignoré par le serveur ColdFusion. Obligatoire Permet de préciser si le contrôle doit contenir des données pour que le formulaire soit transmis au serveur. Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
Vous pouvez créer un champ de fichier pour permettre aux utilisateurs de sélectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le transférer sur le serveur. Un champ de fichier ColdFusion est similaire à un champ de texte, mais contient également un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accès au fichier à transférer, soit cliquer sur le bouton Parcourir pour le rechercher et le sélectionner. Les champs de fichier nécessitent l'utilisation de la méthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transféré à l'adresse indiquée dans la zone de texte Action du formulaire. Avant d'utiliser le champ de fichier, vérifiez auprès de votre administrateur de serveur que le transfert anonyme de fichiers est autorisé. Les champs de fichier nécessitent aussi que le codage du formulaire soit défini comme « multipart/form ». Dreamweaver active automatiquement ce paramètre lorsque vous insérez un contrôle de champ de fichier. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, sélectionnez le formulaire ColdFusion pour l’afficher dans l’inspecteur Propriétés.
2 Dans l'inspecteur Propriétés, définissez la méthode du formulaire comme « POST ». 3 Dans le menu déroulant Enctype, sélectionnez multipart/form-data. 4 Placez le point d'insertion à l'intérieur de la bordure du formulaire, à l’endroit où le champ de fichier doit
5 Choisissez Insertion > Objets ColdFusion > Formulaire > Champ fichier. Cffilefield (Zone de texte) Permet d’indiquer un nom unique pour le contrôle. Long. max. Indique le nombre maximum de caractères que peut contenir le chemin d’accès du fichier. Valider Spécifie le type de validation du champ actuel. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le champ. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Largeur Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur
Afficher l'éditeur de balises Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.
“Modification de contrôles de formulaire ColdFusion” on page 719 “Validation des données de formulaire ColdFusion” on page 719
Vous ne pouvez pas insérer visuellement dans votre formulaire un champ de date ColdFusion, mais vous pouvez définir visuellement ses propriétés. Un champ de date ColdFusion est un type spécial de champ de texte qui permet de sélectionner une date dans un mini-calendrier afin de l’insérer dans le champ de texte. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, sélectionnez le formulaire ColdFusion pour l’afficher dans l’inspecteur Propriétés.
2 Dans l'inspecteur Propriétés, définissez le format du formulaire comme « Flash ».
3 Passez en mode d’affichage Code (Affichage > Code) et insérez la balise suivante en un point quelconque entre les
<cfinput name="datefield" type="datefield">
Pour indiquer une valeur dynamique, cliquez sur l'icône représentant un éclair à côté de la zone Valeur, et sélectionnez la colonne d'un jeu d'enregistrements dans la boîte de dialogue Données dynamiques. Les jeux d’enregistrements de cette colonne fournissent les valeurs affichées dans le champ de date lorsque le formulaire est affiché dans un navigateur. Valider Spécifie le type de validation du champ actuel. Valider à Spécifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d’indiquer un libellé pour le champ. Schéma Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques
Hauteur Permet d’indiquer la hauteur du contrôle, en pixels. Largeur Permet d’indiquer la largeur du contrôle, en pixels. Taille Permet d’indiquer la taille du contrôle.
Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 En mode Création, sélectionnez le contrôle de formulaire ; en mode Code, cliquez dans la balise du contrôle
L'inspecteur Propriétés affiche les propriétés du contrôle de formulaire. 2 Modifiez ces propriétés dans l'inspecteur Propriétés.
3 Pour définir d'autres propriétés, cliquez sur le bouton Afficher l'éditeur de balises dans l'inspecteur Propriétés, et
Dreamweaver permet de créer des formulaires ColdFusion permettant de vérifier dans le contenu des champs de texte spécifiés que l'utilisateur a bien saisi le type de données approprié. Note: Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure. 1 Créez un formulaire ColdFusion comprenant au moins un champ de saisie et un bouton Envoyer. Assurez-vous
2 Dans le formulaire, sélectionnez le champ à valider. 3 Dans l’inspecteur Propriétés, indiquez comment le champ doit être validé.
Pour les développeurs Dreamweaver qui doivent faire appel aux fonctions d'accessibilité, l'application prend en charge des lecteurs d'écran, la navigation avec le clavier et les fonctions d'accessibilité de votre système d'exploitation. Pour les concepteurs Web qui souhaitent créer du contenu accessible, Dreamweaver vous aide à créer des pages accessibles au contenu utile pour les lecteurs d'écran et en conformité avec les directives gouvernementales. Par exemple, des boîtes de dialogue vous invitent à entrer des attributs d'accessibilité, tels que l'équivalent texte d'une image, lorsque vous insérez des éléments de page. Ainsi, lorsque l'image s'affiche sur le système d'un utilisateur ayant des problèmes de vue, le lecteur d'écran lit la description. Note: Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section 508 de la loi américaine Federal Rehabilitation Act (www.section508.gov). Aucun outil de création Web ne peut automatiser entièrement le processus de développement. Pour concevoir des sites Web accessibles, vous devez comprendre les exigences liées à l'accessibilité et devez continuellement tenir compte lors de vos prises de décisions de la façon dont les personnes souffrant d'un handicap interagissent avec les pages Web. La meilleure façon de s'assurer qu'un site Web est accessible est de respecter toutes les procédures de préparation, de développement, de tests et d'évaluation.
Un lecteur d'écran récite le texte qui s'affiche sur l'écran de l'ordinateur. Il lit aussi les informations non textuelles, telles que les étiquettes de boutons ou les descriptions d'images dans l'application, fournies dans les balises ou les attributs d'accessibilité lors de la création. En tant que concepteur Dreamweaver, vous pouvez utiliser un lecteur d'écran pour vous assister dans la création de vos pages Web. Le lecteur d'écran commence sa lecture par le coin supérieur gauche de la fenêtre de document. Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows de Freedom Scientific (www.freedomscientific.com) et Window-Eyes de GW Micro (www.gwmicro.com).
Dreamweaver prend en charge les fonctionnalités d'accessibilité des systèmes d'exploitation Windows et Macintosh. Par exemple, sur le Macintosh, définissez les préférences visuelles dans la boîte de dialogue Préférences d'accès universelles (Apple > Préférences système). Les paramètres sélectionnés sont alors repris par l'espace de travail de Dreamweaver.
• Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système. Par exemple, si vous fixez les couleurs à Blanc sur Noir, les boîtes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en arrière-plan.
Lorsque vous créez des pages accessibles, vous devez associer des informations aux objets présents sur les pages, telles que des étiquettes et des descriptions, pour rendre votre contenu accessible à tous les utilisateurs. Pour ce faire, activez la boîte de dialogue Accessibilité de chaque objet, de façon à ce que Dreamweaver vous demande d'entrer les informations d'accessibilité lorsque vous insérez des objets. Vous pouvez activer une boîte de dialogue pour n'importe quel objet de la catégorie Accessibilité dans les préférences. 1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh). 2 Sélectionnez la catégorie Accessibilité dans la liste à gauche, sélectionnez un objet, définissez les options suivantes,
Affichage des attributs lors de l'insertion Sélectionnez les objets pour lesquels vous souhaitez activer les boîtes de
Laisser le focus sur le panneau Conserve le panneau à l'état actif afin qu'il soit disponible pour le lecteur d'écran. Si
Restitution hors écran Sélectionnez cette option lorsque vous utilisez un lecteur d'écran.
La fonction de validation de l'accessibilité de Dreamweaver a été abandonnée depuis Dreamweaver CS5.
Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les boîtes de dialogue, les cadres et les tableaux sans utiliser de souris. Note: L'utilisation de la touche de tabulation et des touches fléchées n'est prise en charge que sous Windows.
1 Dans la fenêtre de document, appuyez sur Ctrl+F6 pour activer un panneau.
sur Ctrl+Maj+F6 pour activer le panneau précédent. 3 Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier indiqués dans le menu
Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme réduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez de nouveau sur la barre d'espace pour réduire le panneau. 4 Appuyez sur la touche de tabulation pour passer d'une option à une autre dans le panneau. 5 Utilisez les touches fléchées de façon appropriée :
1 Appuyez sur Ctrl+F3 pour afficher l'inspecteur Propriétés, s'il n'est pas visible. 2 Appuyez sur Ctrl+F6 (Windows uniquement) jusqu'à ce que l'inspecteur Propriétés soit actif. 3 Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Propriétés à une autre. 4 Utilisez les touches fléchées pour parcourir les différentes options. 5 Appuyez sur Ctrl+Flèche vers le bas/Flèche vers le haut (Windows) ou sur Commande+Flèche vers le bas/Flèche
Alternativement, placez le focus sur la flèche de développement dans le coin inférieur droit puis appuyez sur la barre d'espace. Note: Pour pouvoir développer et réduire l'inspecteur Propriétés, le focus du clavier doit se trouver dans celui-ci, et pas sur le titre du panneau.
1 Appuyez sur la touche de tabulation pour passer d'une option à une autre dans la boîte de dialogue. 2 Utilisez les touches fléchées pour faire défiler les choix d'une option. 3 Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste
4 Appuyez de nouveau sur Ctrl+Tab pour afficher les options d'une catégorie. 5 Appuyez sur Entrée pour quitter la boîte de dialogue.
❖ Si votre document contient des cadres, vous pouvez utiliser les touches fléchées pour activer un cadre.
1 Appuyez sur Alt+Flèche vers le bas pour placer le point d'insertion dans la fenêtre de document. 2 Appuyez sur Alt+Flèche vers le haut pour sélectionner le cadre actif. 3 Continuez d'appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s'il
Navigation dans un tableau 1 Utilisez les touches fléchées ou appuyez sur la touche de tabulation pour vous déplacer vers d'autres cellules dans
Si vous appuyez sur la touche de tabulation lorsque vous être dans la cellule la plus à droite, vous ajoutez une ligne au tableau. 2 Pour sélectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d'insertion est dans la
3 Pour sélectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d'insertion est dans une
4 Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d'insertion est dans une cellule,
Notice Facile