Création de pages web HTML

Transcription

1 Création de pages web HTML Macromedia Dreamweaver 8 FORMASOFT

2 Sommaire 1 INTRODUCTION L'ESPACE DE TRAVAIL LA FENETRE DE DOCUMENT LA BARRE OUTILS DE DOCUMENT LA BARRE D'ETAT : LA BARRE "INSERER" OU PANNEAU "INSERTION" L'INSPECTEUR DES PROPRIETES LE PANNEAU FICHIERS CONTRAINTES TECHNIQUES REGLE N 1 : LA PAGE INDEX REGLE N 2 : LES CARACTERES SPECIAUX REGLE N 3 : LES CARACTERES DE SEPARATION REGLE N 4 : LA CASSE DES CARACTERES REGLE N 5 : LES EXTENSIONS CONFIGURER UN NOUVEAU SITE CREER ET ORGANISER LES DOSSIERS DU SITE DEFINIR UN SITE CONCEPTION DES PAGES DU SITE CREER UN NOUVEAU DOCUMENT PROPRIETES DE LA PAGE LES TABLEAUX INSERER UN TABLEAU SELECTIONNER UN TABLEAU AUTRES PROPRIETES DU TABLEAU CONTENU DES CELLULES REDIMENSIONNER TABLEAUX, LIGNES OU COLONNES UNIFORMISER LARGEURS DE COLONNE EN MODE CODE AVEC LARGEURS VISUELLES SUPPRIMER TOUTES VALEURS DE LARGEURS ET HAUTEURS AJOUTER OU SUPPRIMER LIGNE OU COLONNE FUSIONNER OU FRACTIONNER CELLULES IMBRIQUER DES TABLEAUX TRIER UN TABLEAU INSERTION ET MISE EN FORME DE TEXTE INSERTION DE TEXTE IMPORTER DES DONNEES TABULAIRES IMPORTER UN DOCUMENT MICROSOFT OFFICE AJOUT D'ESPACEMENTS DE PARAGRAPHE MISE EN FORME TEXTE ET PARAGRAPHES UTILISATION DE FEUILLES DE STYLES EN CASCADE (CSS) DESCRIPTION DES FEUILLES DE STYLE EN CASCADE CREER UNE FEUILLE DE STYLES CSS APPLIQUER UN STYLE CSS OTER UN STYLE CSS ATTACHER UNE FEUILLE DE STYLE CSS : MODIFIER UNE REGLE DE STYLE CSS CREER UNE NOUVELLE REGLE DANS UNE FEUILLE DE STYLE CSS (FICHIER) EXISTANTE EXPORTER DES STYLES POUR CREER UNE NOUVELLE FEUILLE DE STYLE CSS SUPPRIMER UNE REGLE DE CSS DANS UNE FEUILLE DE STYLE LES IMAGES INSERER UNE IMAGE INSERER UN ESPACE RESERVE POUR UNE IMAGE MODIFIER LES PROPRIETES D'UNE IMAGE INSERER UNE IMAGE SURVOLEE (ROLL-OVER)...52 AFCI NewSoft 2

3 12 TESTER VOTRE DOCUMENT DANS UN NAVIGATEUR LES CALQUES INSERER UN CALQUE SELECTIONNER UN CALQUE DEFINIR LES PROPRIETES D'UN CALQUE CONVERTIR DES CALQUES EN TABLEAUX EMPECHER LE CHEVAUCHEMENT DES CALQUES ANIMER UN CALQUE GESTION DES MODELES CREER UN MODELE LES REGIONS MODIFIABLES D'UN MODELE APPLIQUER UN MODELE DETACHER UN MODELE D'UN DOCUMENT MODIFIER UN MODELE LES COMPORTEMENTS OUVRIR UN LIEN DANS UNE FENETRE (POP-UP) AFFICHER TEXTE DANS BARRE D ETAT MESSAGE CONTEXTUEL AFFICHER-MASQUER LES CALQUES INSERER UN ELEMENT FLASH INSERER UNE ANIMATION FLASH (FICHIER SWF) INSERER UN BOUTON «FLASH» INSERER UN TEXTE «FLASH» AJOUTER UN SON A UNE PAGE INCORPORER UN FICHIER AUDIO CREER UN LIEN VERS UN FICHIER AUDIO CREER UN FORMULAIRE HTML INSERER UN FORMULAIRE INSERER UN CHAMP LISTE/MENU (SELECT) INSERER UN CHAMP DE TEXTE (TEXTFIELD) INSERER DES BOUTONS RADIO (RADIOBUTTON) INSERER DES CASES A COCHER (CHECKBOX) INSERER UN CHAMP DE ZONE DE TEXTE (TEXTAREA) INSERER DES BOUTONS DE COMMANDE (SUBMIT) PARAMETRAGE DU FORMULAIRE INSERER UN CADRE FLOTTANT (OU <IFRAME> ) LES LIENS LIEN VERS UNE PAGE DU SITE DEFINIR LA CIBLE DES LIENS LIEN DE MESSAGERIE ELECTRONIQUE LIEN SUR UNE ZONE REACTIVE LIEN EXTERNE LIEN VERS UN AUTRE EMPLACEMENT DANS LA MEME PAGE LIEN DE TELECHARGEMENT TRANSFERT DU SITE VERS SERVEUR DISTANT REFERENCER SON SITE QU'EST-CE QUE LE REFERENCEMENT? AMELIORER SON REFERENCEMENT REFERENCEMENT ANNUAIRE REFERENCEMENT MOTEUR LES META TAGS...88 AFCI NewSoft 3

4 1 INTRODUCTION Macromedia Dreamweaver MX 8 est un éditeur HTML (Hypertext Markup Language) professionnel destiné à la conception, au codage et au développement de sites, de pages et d applications Web. Quel que soit l environnement de travail utilisé (codage manuel HTML ou environnement d édition visuel), Dreamweaver propose des outils qui vous aideront à créer des applications Web. 2 L'ESPACE DE TRAVAIL 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. Ce chapitre vous présente une vue d ensemble de l espace de travail de Dreamweaver 8. Barre Insérer Groupes de Panneaux Barre d'outils de document Fenêtre de document Sélecteur de balises Panneau Fichiers L'inspecteur des propriétés Les panneaux peuvent être masqués ou développés en cliquant sur leur intitulé situé en haut à gauche de chaque panneau. AFCI NewSoft 4

5 2.1 La fenêtre de document La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d affichage suivants, en cliquant sur un des 3 boutons dans la "barre d'outils de document" : Affichage Création est 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. Affichage Code est un environnement de codage manuel pour rédiger et modifier du code HTML, JavaScript et du code de langage de-serveur, tel que le langage PHP, ASP ou CFML (ColdFusion Markup Language), ou tout autre type de code. Affichages Code et Création vous permettent d obtenir l affichage Code et l affichage Création du document dans une même fenêtre. Lorsque la fenêtre de document dispose d une barre de titre, cette dernière affiche le titre de la page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver affiche un astérisque à la suite du nom de fichier si vous avez apporté des modifications et que vous ne les avez pas encore enregistrées. Lorsque vous agrandissez la fenêtre de document de la présentation de l espace de travail intégré (sous Windows uniquement), elle s affiche sans barre de titre; le titre de la page, ainsi que le chemin et le nom du fichier s affichent alors dans la barre de titre de la fenêtre principale de l espace de travail. En outre, lorsqu une fenêtre de Document est agrandie, des onglets s affichent en haut de la zone de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à un autre document, cliquez sur son onglet. AFCI NewSoft 5

6 2.2 La barre outils de document Valider le marqueur Gestion de fichiers Aucune erreur navigateur Titre du document Aperçu/Débogage dans navigateur Actualiser le mode création Options d'affichage Mode Code Modes Code et Création Mode Création Assistances visuelles Mode Code /Modes Code et Création / Mode Création : voir chapitre précédent. Titre de document vous permet d attribuer un titre à votre document et l afficher dans la barre de titre du navigateur. Si votre document possède déjà un titre, celui-ci s affiche dans ce champ. Aucune erreur du navigateur permet de vérifier la compatibilité avec différents navigateurs. Valider le marqueur vous permet de valider le document actif ou la balise sélectionnée. Gestion des fichiers pour afficher le menu contextuel correspondant. Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans un navigateur. Sélectionnez un navigateur dans le menu contextuel. Actualiser le mode Création pour actualiser le mode Création du document après avoir apporté des modifications dans le mode Code. Les modifications apportées dans le mode Code n apparaissent pas automatiquement dans le mode Création. Vous devez exécuter tout d abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton. Options d affichage pour 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. Assistance visuelle pour vous fournir des supports visuels différents en vue de la conception de vos pages, telles que des bordures de tableaux ou de cadres. AFCI NewSoft 6

7 2.3 La barre d'état : La barre d état, située au bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création. Outil "Main" Outil "Zoom" Outil "Sélectionner" Définir facteur de "zoom"" Sélecteur de balises Taille de la fenêtre Taille du document (fichier) et temps de téléchargement Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Par exemple, cliquez sur <body> pour sélectionner tout le corps du document. Il est préférable de faire appel au Sélecteur de balises, car il garantit avec certitude la bonne sélection. L outil Main vous permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document. Cliquer sur l outil Sélectionner pour désactiver l outil Main. L outil Zoom et le menu contextuel Définir le facteur de zoom permettent de définir un taux d agrandissement pour votre document. Taille de la fenêtre (visible en mode Création uniquement) permet de redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées. Taille du document et du temps de téléchargement de la page : 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. AFCI NewSoft 7

8 2.4 La barre "Insérer" ou panneau "Insertion" Les boutons qui composent la barre Insérer permettent de créer et d insérer des objets, tels que des tableaux, des calques et des images. Lorsque vous placez le curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton apparaît. Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la barre Insérer. D autres catégories s affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie utilisée s ouvre. Les différentes catégories : La catégorie Commun permet de créer et d insérer les objets les plus couramment utilisés, comme les images et les tableaux. La catégorie Mise en forme permet d insérer des tableaux, des balises div, des calques et des cadres. Vous pouvez également choisir parmi trois types de tableaux : Standard (par défaut), Tableaux étendus et Mise en forme. Si le mode Mise en forme est sélectionné, vous pouvez utiliser les outils de mise en forme de Dreamweaver : Dessiner la cellule de Mise en forme et Dessiner le tableau de Mise en forme. La catégorie Formulaires contient des boutons permettant de créer des formulaires et d y insérer des éléments. La catégorie Texte insère diverses balises de mise en forme de texte et de liste. La catégorie HTML insère des balises HTML pour les règles horizontales, le contenu de l en-tête, les tableaux, les cadres et les scripts. Les catégories de code serveur sont disponibles uniquement pour les pages utilisant un langage serveur spécifique comme ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode Code. La catégorie Application insère des éléments dynamiques, tels que les jeux d enregistrements, les régions répétées et les formulaires d insertion d enregistrements et de mise à jour. La catégorie éléments Flash insère des éléments Flash de Macromedia. La catégorie Favoris permet de regrouper et d organiser, dans un espace commun, les boutons de la barre Insérer que vous utilisez le plus fréquemment. Afficher les onglets, affiche le panneau Insertion sous forme d'onglets, comme dans la version précédente! AFCI NewSoft 8

9 2.5 L'inspecteur des propriétés L inspecteur de propriétés permet de consulter et de modifier les propriétés les plus fréquentes de l élément sélectionné dans la page, tel que du texte ou une image. Le contenu de l inspecteur de propriétés varie donc en fonction de l élément sélectionné. Par exemple, si vous sélectionnez une image de la page, l inspecteur des propriétés se modifie pour montrer les propriétés de l image (telles que le chemin d accès au fichier, la largeur et la hauteur de l image, la bordure autour de l image, s il y a lieu, et ainsi de suite). Par défaut, l inspecteur de propriétés se trouve au bas de l espace de travail, mais vous pouvez l ancrer en haut de l espace de travail si vous le souhaitez. Vous pouvez aussi le laisser flotter dans l espace de travail. 2.6 Le panneau Fichiers Le panneau Fichiers permet d'afficher et d'exploiter les fichiers de votre site Dreamweaver. Vous pouvez agrandir ou réduire le panneau Fichiers par cliquer glisser à droite de l'intitulé du panneau. Dans sa forme réduite (comme ci-dessus), 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 (en cliquant sur le dernier outil ) le panneau affiche le site local et soit le site distant, soit le serveur d évaluation. Le panneau Fichiers peut également afficher une carte d arborescence du site local. AFCI NewSoft 9

10 3 CONTRAINTES TECHNIQUES 3.1 Règle N 1 : La page index Le fichier index est la page HTML que vos visiteurs verront en premier en arrivant sur votre site. Il est donc vital qu'elle soit la plus attrayante possible. C'est le fichier par défaut du site, qui doit se trouver à la racine de votre site, c'est-à-dire dans le premier dossier. Lorsque vous tapez le nom de votre site, par exemple : La page qui s'affiche est ou.htm (ou encore.php,.asp...). Le fichier index peut s'appeler de quatre façons différentes : index.html ou index.htm lorsque vous êtes hébergé par un serveur francophone. default.html ou default.htm lorsque vous êtes hébergé par un serveur anglophone. Si votre site ne possède pas de fichier index, en saisissant l'url : vous obtiendrez donc une liste des fichiers du site!! Vous ne voulez pas que vos visiteurs obtiennent cet écran? Prenez donc garde à nommer la première page index.htm!! 3.2 Règle N 2 : Les caractères spéciaux Vos fichiers et dossiers ne doivent pas comporter de caractères spéciaux c'est à dire : pas d'accents, pas d'apostrophes pas de signes de ponctuation. Sont acceptés : le. (point), - (tiret normal ou signe -) et _ (underscore ou tiret bas) Évitez les noms comportant des espaces. Car, même s'ils sont admis, ils seront convertis en %20. Par exemple un fichier : "mon fichier avec espaces.html" apparaîtra de la manière suivante dans la barre d'adresse de votre navigateur : mon%20fichier%20avec%20espaces.html Ce qui nuit à la lisibilité!! AFCI NewSoft 10

11 3.3 Règle N 3 : Les caractères de séparation Afin d'éviter l'utilisation des espaces, il est conseillé d'utiliser les tirets - plutôt que les tirets bas _. En effet, les (tirets) sont correctement interprétés par les moteurs de recherche qui comprennent que le nom du fichier comporte des mots distincts alors que les _ (tirets bas) ne permettent pas de différencier les mots. Ce point est important car les URL, et donc les noms de fichiers et de dossiers, ainsi que votre nom de domaine sont pris en compte dans le classement des sites. Ainsi, indépendamment du contenu d'un site, un fichier ayant pour URL : ressortira sur les requêtes des mots qui composent son URL, soit : poissons, exotiques, aquariophilie et débutant, nettoyage et vitres. A l'inverse, un fichier ayant pour URL : ne ressortira que sur les requêtes des mots : poissons et exotiques. Il est donc très important de soigner les noms des fichiers et des dossiers ainsi que, la logique de l'architecture pour optimiser son référencement. 3.4 Règle N 4 : La casse des caractères La casse des caractères, c'est-à-dire les majuscules ou les minuscules, est prise en compte dans une URL (sauf pour les noms de domaines). Un fichier : nettoyage-vitres.html sera différent de : nettoyage-vitres.html. Préférez donc l'utilisation de minuscules. 3.5 Règle N 5 : Les extensions Pour vos pages web, les extensions htm et html sont équivalentes. Vous pouvez utiliser indifféremment l'une ou l'autre mais attention un fichier nommé fichier.html sera différent de fichier.htm! AFCI NewSoft 11

12 4 CONFIGURER UN NOUVEAU SITE 4.1 Créer et organiser les dossiers du site Vous devez au préalable, créer sur votre disque dur un dossier principal pour votre site, par exemple : mon_site_web, dans lequel seront stockées toutes les pages web du site. A l'intérieur de ce dossier, créer au minimum, 1 dossier pour stocker les images du site, par exemple : images. Si vous disposez de beaucoup d'images, vous pouvez, bien entendu, créer plusieurs dossiers afin de mieux les organiser.!! Attention : N'oubliez pas que vos dossiers et fichiers devront être nommés sans espace, sans accent, sans apostrophe, et éviter les noms trop longs! (voir chapitre précédent). 4.2 Définir un site Vous devez définir un site ("dossier local Dreamweaver") pour chaque site Web créé. Ce "dossier local" fait référence au dossier que vous avez crée sur votre disque dur, et dans lequel seront stockés l'ensemble des fichiers du site. Ce dossier local est indispensable au bon fonctionnement de certaines fonctions de Dreamweaver. Cliquer sur le menu Site / Nouveau site Cliquer, si nécessaire sur l'onglet Elémentaire Nommer ici votre projet de site Facultatif - Saisir ici l'url de votre site, si vous la connaissez (fournie par votre hébergeur) Cliquer Suivant AFCI NewSoft 12

13 Etape 2 de l'assistant : Cliquer Non, pas de technologie de serveur Cliquer Suivant Etape 3 de l'assistant : Cliquer Modifier copies locales Cliquer le bouton Parcourir pour sélectionner le dossier principal du site sur votre ordinateur Cliquer Suivant AFCI NewSoft 13

14 Etape 4 de l'assistant : Choisir Aucun serveur distant si vous souhaitez utiliser un logiciel FTP tel que Filezilla, FTPexpert ou autre. Sinon choisir FTP, puis définir tous vos paramètres de connexion au serveur distant (adresse d'hôte ; nom d'utilisateur (login) et mot de passe). Cliquer Suivant Etape 5 de l'assistant : Le résumé de votre configuration apparaît Cliquer Terminé Après validation, l'arborescence de votre site apparaît dans le panneau Fichiers, à droite de l'écran! AFCI NewSoft 14

15 5 CONCEPTION DES PAGES DU SITE Vous pouvez ajouter des contenus variés à vos pages Web à l'aide des outils visuels de Macromedia Dreamweaver 8. Ajouter des tableaux, des calques, des textes, des images, couleurs, animations, sons et autres formes de données, puis réaliser une mise en forme. Macromedia Dreamweaver 8 dispose de nombreuses fonctions vous permettant de créer de nouvelles pages Web en toute facilité. Vous pouvez ainsi aisément définir de nombreuses propriétés de page (titre, image et couleur d'arrière-plan, couleurs personnalisées des liens, etc.). De plus, Dreamweaver comprend des outils vous permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs Web. Organisez avec soin votre site : cela vous fera gagner beaucoup de temps par la suite. L'organisation d'un site ne se réduit pas à déterminer l'emplacement des fichiers : elle inclut également l'analyse des besoins du site, des profils de ses utilisateurs et de ses objectifs. 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. Dreamweaver vous permet de progresser à votre rythme et selon vos envies dans la mise en forme de vos pages. 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. 6 CREER UN NOUVEAU DOCUMENT Appuyer sur les touches CTRL N ou cliquer le menu Fichier / Nouveau Choisir la catégorie Pages de base, puis HTML Pour rendre un document HTML compatible XHTML, sélectionner XHTML 1.0 transitionnel (ou XHTML 1.0 Strict) dans le menu déroulant Type de document (DTD), Cliquer sur le bouton Créer. AFCI NewSoft 15

16 Définition du XHTML : XHTML (extensible Hyper Text Markup Language) signifie "langage de balisage hypertexte extensible". Langage normalisé par le W3C 1 (World Wide Web Consortium) servant à la publication de pages web sur Internet. Le XHTML offre les mêmes possibilités que le HTML tout en étant conforme à la norme XML. Les documents HTML devraient peu à peu être remplacés par leur équivalent en XHTML, (quoique les avis soient partagés!!), dont la structure se doit d'être plus rigoureuse pour en faciliter l'accès à d'autres machines que des ordinateurs, comme les téléphones mobiles par exemple. Il est la conséquence de l'incompatibilité des fichiers HTML et XML que certains navigateurs n'arrivaient pas à déchiffrer. C'est une extension du HTML qui, en outre, reprend les caractéristiques les plus intéressantes du XML, telles que la structuration et l'extensibilité des données (il est possible d'étendre les fonctions standards du langage, en employant des bibliothèques externes chargeables sous forme de module par le biais du DTD). Le XHTML est le garant de la séparation entre le contenu et la présentation, grâce à l'utilisation combiné du XHTML et des feuilles de styles CSS. Moins lourd que le langage HTML, il permet de dissocier la structure du site (réalisée en XHTML) de la présentation (réalisée à l'aide de feuilles de style CSS), rendant ainsi le téléchargement de la page plus rapide. Le XHTML permet donc d'avoir un code léger, qu'il soit utilisé de manière graphique ou textuelle et apporte une facilité de maintenance. Un meilleur respect de la sémantique (La sémantique du web est l'utilisation de chaque balise à bon escient) en fonction du type de contenu aidant de plus en plus au bon référencement de votre site. Les variantes de DTD (type de document) sont : DTD XHTML strict : un ensemble de règles obligeant à une formulation XHTML rigoureuse. DTD XHTML transitionnel : une définition plus permissive autorisant l'emploi d'éléments HTML obsolètes. 1 Le W3C a été fondé en octobre 1994 par Tim Berners-Lee (l'inventeur du World Wide Web) dont le but est de promouvoir l'évolutivité du Web et de garantir son interopérabilité. AFCI NewSoft 16

17 7 PROPRIETES DE LA PAGE Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de mise en forme dans la boîte de dialogue 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. Par défaut Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (CSS : Cascading Style Sheets). Vous pouvez choisir d'utiliser le langage HTML pour mettre les pages en forme par le biais de la boîte de dialogue Préférences (Edition > Préférences). Lors de l'utilisation des propriétés de page CSS, Dreamweaver utilise des balises CSS pour l'ensemble des propriétés définies dans les catégories Aspect, Liens et En-têtes de la boîte de dialogue Propriétés de la page. Les balises CSS qui définissent ces attributs sont intégrées dans la section <head> de la page. Remarque : 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. Comparaison des "Propriétés de page" CSS et HTML Si vous choisissez d'utiliser des balises HTML au lieu des styles CSS, l'inspecteur Propriétés affiche quand même le menu déroulant Style. Cependant, les commandes de police, taille, couleur et alignement indiquent uniquement les propriétés qui utilisent les balises HTML. Les valeurs des propriétés CSS appliquées à la sélection en cours ne sont plus visibles et le menu déroulant Taille est désactivé. Si vous préférez utiliser des balises HTML, désactivez l'option Utiliser des balises CSS au lieu de balises HTML dans la catégorie Général de la boîte de dialogue Préférences. Choisissez Edition / Préférences. Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Utiliser des balises CSS au lieu de balises HTML. Cette case à cocher se trouve dans la catégorie Options d'édition du panneau Préférences générales. Cliquez sur OK. Pour définir les propriétés de votre page web : Utiliser le raccourci clavier CTRL J ou cliquer sur le menu Modifier / Propriétés de la page Choisir une catégorie, à gauche, puis définir les propriétés de votre page AFCI NewSoft 17

18 Catégorie Aspect : Définir ici la police de la page par défaut, la taille, ainsi que la couleur du texte. La couleur d'arrière plan sera appliquée sur toute la page. L'image d'arrière plan est désormais possible sans répétition en mosaïque, mais sera calée en haut à gauche de votre page. Les marges pour votre page sont à définir en pixels, en cm ou autre mesure de votre choix. Catégorie Liens : Définir ici la police pour les liens (sur texte uniquement!!), taille et couleurs. Les liens pourront être soulignés ou non.!! Remarque : Liens de survol permet d'obtenir un effet "roll-over" sur le texte. Liens actifs est la couleur qui apparaît au moment du clic. AFCI NewSoft 18

19 Catégorie En-têtes : La catégorie En-têtes CSS permet de spécifier la famille et la taille de polices des en-têtes de pages CSS : Police spécifie la famille de polices par défaut à utiliser dans vos pages Web. Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné. Les champs En-tête 1 à En-tête 6 spécifient les tailles et couleurs à utiliser pour chaque niveau de balises d'en-tête, que vous pourrez ensuite appliquer par le panneau Inspecteur des propriétés. Catégorie Titre / Codage : Titre permet de spécifier 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 HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant. Codage précise le codage utilisé pour les caractères du document. (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 ">. Le document affiché dans Dreamweaver contient les polices que vous spécifiez dans Préférences de polices pour l'encodage Occidental (Latin1) ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour l'encodage Occidental (Latin1). Si vous spécifiez Japonais (Maj JIS), la balise meta suivante est insérée : <meta http-equiv="content-type" content="text/html; charset=shift_jis">. Le document affiché dans Dreamweaver contient les polices que vous spécifiez pour les encodages du japonais ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour les encodages du japonais.) AFCI NewSoft 19

20 Catégorie Tracé de l'image : Permet d'insérer un fichier image à utiliser comme guide dans la création de votre page : Tracé de l image permet de spécifier l'image à utiliser comme guide pour reproduire une mise en page. Cette image sert uniquement de référence et n'apparaît pas lorsque le document s'affiche dans un navigateur. Transparence détermine l'opacité du tracé de l'image, de complètement transparent à complètement opaque. AFCI NewSoft 20

21 8 LES 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. 8.1 Insérer un tableau Placer le curseur à l endroit où vous souhaitez insérer le tableau, Dans le panneau Insertion (ou Insérer, catégorie "Commun"), onglet "Commun", cliquer sur le bouton "tableau" Définir le nombre de lignes, de colonnes, largeur en pixels ou pourcentage, épaisseur des bordures en pixels (0 pour masquer) Dans la section En-tête, sélectionnez l'une des options d'en-tête suivantes : 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 chaque 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 colonne du tableau. Les deux vous permet d'entrer des en-têtes de colonne et de ligne dans le tableau. AFCI NewSoft 21

22 Conseil : Il est judicieux d'employer des en-têtes au cas où l'un des visiteurs de votre site Web utiliserait un lecteur d'écran. Les lecteurs d'écran lisent les en-têtes de tableau et aident les utilisateurs à garder une trace des informations de tableau. Dans la section Accessibilité, définissez les options suivantes : Légende fournit un titre de tableau qui s'affiche en dehors du tableau. Aligner la légende indique où la légende du tableau apparaît par rapport au tableau. Résumé fournit une description du tableau. Les lecteurs d'écran lisent le texte de résumé mais le texte n'apparaît pas dans le navigateur de l'utilisateur. Cliquez sur OK pour créer le tableau. 8.2 Sélectionner un tableau Placer le curseur dans une cellule du tableau, Cliquer sur la balise <table> dans le sélecteur de balises. Cliquer sur la balise <td> pour sélectionner une cellule Cliquer sur la balise <tr> pour sélectionner la ligne Remarque : La sélection d'une colonne ne peut pas se faire par une balise puisse qu'elle ne sont pas spécifiées en code HTML, vous devez cliquer sur le pointeur placé au dessus de la colonne, puis choisir "sélectionner la colonne". 8.3 Autres propriétés du tableau Sélectionner le tableau Définir les différentes options dans le panneau des Propriétés. AFCI NewSoft 22

23 8.4 Contenu des cellules Dans chaque cellule, vous pouvez saisir directement du texte, insérer une image ou insérer un autre tableau. La touche tabulation du clavier permet de placer le curseur dans la cellule suivante et d'ajouter une ligne en fin de tableau depuis la dernière cellule. 8.5 Redimensionner tableaux, lignes ou colonnes Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer. 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. a) Redimensionner un tableau : Vous pouvez redimensionner un tableau dans l'inspecteur Propriétés ou en faisant glisser l'une de ses poignées de sélection. Dreamweaver affiche la largeur du tableau, ainsi que le menu des en-têtes du tableau, en haut ou en bas du tableau lorsque celui-ci est sélectionné ou que le point d'insertion se trouve dedans. 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. Sélectionner le tableau, Dans le panneau des Propriétés, saisir une valeur en pixels ou pourcentage pour la largeur (L) et/ou pour la hauteur (H). AFCI NewSoft 23

24 Pour activer ou désactiver les menus au dessus du tableau et de colonnes : Cliquer le menu Affichage / Assistances visuelles / Largeurs des tables. Ou Cliquez du bouton droit de la souris dans le tableau, puis choisissez Tableau / Largeurs des tables. b) Redimensionner colonnes et 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. 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. Pour modifier la largeur d'une colonne tout en conservant la même largeur de tableau : Faites glisser la bordure droite de la colonne à modifier. La largeur de la colonne contiguë est également modifiée, ainsi vous redimensionnez deux colonnes. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau ne variant pas. Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite de l'extrême droite du tableau, la largeur du tableau est modifiée et toutes les colonnes s'adaptent proportionnellement. AFCI NewSoft 24

25 Pour modifier la largeur d'une colonne en conservant les dimensions des autres colonnes : Maintenez la touche Maj (Shift) enfoncée, puis faites glisser la bordure de la colonne. Seule la largeur de cette colonne change. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau varie en fonction de la colonne redimensionnée. Pour définir la largeur d'une colonne ou la hauteur d'une ligne à l'aide de l'inspecteur Propriétés : Sélectionnez une colonne ou une ligne, Dans l'inspecteur Propriétés, saisissez une valeur dans le champ de texte L pour la largeur ou dans le champ de texte H pour la hauteur. Appuyez sur Tab ou Entrée pour valider. Conseil : Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement. 8.6 Uniformiser largeurs de colonne en mode Code avec largeurs visuelles Si vous voyez deux nombres indiquant la largeur d'une colonne, cela signifie que la largeur de colonne définie dans le code HTML est différente de la largeur apparente à l'écran. Vous pouvez uniformiser la largeur spécifiée dans le code et la largeur visuelle. Pour uniformiser les largeurs : Cliquer dans une cellule. Cliquez sur le menu des en-têtes de colonne, puis choisissez Uniformiser toutes les largeurs. AFCI NewSoft 25

26 Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.!! Attention : L'option d'affichage des menus doit être activée, (Menu Affichage / Assistances visuelles / Largeurs des tables) 8.7 Supprimer toutes valeurs de largeurs et hauteurs Il peut être parfois utile d'effacer les largeurs et les hauteurs définies, avant de redimensionner un tableau ou en cas de problème lors du redimensionnement de colonnes ou de lignes individuelles d'un tableau. Remarque : Lorsque vous redimensionnez un tableau en faisant glisser l'une de ses poignées de sélection, vous modifiez la dimension visuelle des cellules dans le tableau mais vous ne modifiez pas les largeurs et hauteurs spécifiées des cellules. Il est judicieux de supprimer des largeurs et des hauteurs définies avant le redimensionnement. Sélectionner le tableau, Cliquer sur le pointeur au-dessus du tableau et dans le menu, cliquer sur Effacer toutes les hauteurs ou Effacer toutes les largeurs. AFCI NewSoft 26

27 Vous pouvez également supprimer les largeurs en cliquant sur un des boutons dans l'inspecteur des Propriétés : Pour effacer la largeur d'une seule colonne : 1. Placer le curseur dans une cellule de la colonne concernée, 2. Cliquez sur le menu d'en-tête de la colonne, puis choisissez Effacer la largeur de colonne. 8.8 Ajouter ou supprimer ligne ou colonne a) Pour Insérer une colonne : Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou Insérer une colonne à droite. b) Pour insérer une ligne : Cliquer droit dans une des cellules de la ligne adjacente à la nouvelle ligne à insérer, Dans le menu contextuel, choisir Tableau / Insérer une ligne Remarque : L'insertion de ligne s'effectue toujours au-dessus de la position initiale du curseur. AFCI NewSoft 27

28 c) Supprimer ligne ou colonne : Sélectionner ligne ou colonne entière à supprimer, Appuyer sur la touche Suppr du clavier. 8.9 Fusionner ou Fractionner cellules b) Pour fusionner des cellules (rassembler) : Sélectionner les cellules à fusionner, Cliquer sur le bouton "Combiner la sélection rectangulaire des cellules" dans le panneau Inspecteur des Propriétés. c) Pour fractionner une cellule (diviser en plusieurs lignes ou colonnes) : Placer le curseur dans la cellule à fractionner, Cliquer sur le bouton "Diviser la cellule en lignes ou en colonnes" dans le panneau Inspecteur des Propriétés Imbriquer des tableaux 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! Placer le curseur dans une cellule, Dans la panneau Insertion, onglet "Commun", (ou Insérer, catégorie "Commun"), cliquer sur le bouton "tableau", Compléter les options de la boite de dialogue, cliquer OK pour insérer le nouveau tableau. AFCI NewSoft 28

29 Remarque : Il est parfois utile d'insérer un tableau à l'intérieur d'un premier tableau dont la largeur et la hauteur sont à 100%, de façon à aligner le deuxième tableau sur les valeurs de fenêtre du navigateur quel qu'en soit sa taille Trier un tableau 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. Sélectionner le tableau, Cliquer le menu Commandes / Trier le tableau, Définir les options de la boite de dialogue. 9 INSERTION ET MISE EN FORME DE TEXTE Dreamweaver permet d'ajouter et de mettre en forme du texte dans un document de plusieurs façons. Vous pouvez insérer du texte, définir un type, une taille ou une couleur de police, des attributs d'alignement ou encore créer et appliquer vos propres styles à l'aide de feuilles de style en cascade (CSS). 9.1 Insertion de texte Dreamweaver vous permet d'insérer facilement du texte dans un document. Vous pouvez le taper directement, effectuer un copier/coller ou réaliser une importation. Vous pouvez également insérer des espaces supplémentaires entre les caractères et les lignes de votre texte. AFCI NewSoft 29

30 9.2 Importer des données tabulaires Vous pouvez importer des données tabulaires dans un document HTML 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 (*.txt). Pour importer des données tabulaires : Cliquer le menu Insertion / Objets du tableau / Importer les données tabulaires, Dans la boîte de dialogue recherchez le fichier souhaité en cliquant sur le bouton Parcourir..., Choisir le délimiteur utilisé lors de l'enregistrement du fichier en tant que texte délimité, Les différentes options sont : Tab, Virgule, Point-virgule, Deux points et Autre. Si vous sélectionnez Autre, un champ vierge s'affiche à côté de l'option. Préciser alors le caractère utilisé comme délimiteur, Utilisez les options restantes pour définir le tableau dans lequel seront importées les données, Cliquez sur OK. AFCI NewSoft 30

31 9.3 Importer un document Microsoft Office Vous pouvez insérer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante ou créer un lien vers ce fichier. 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. Placez le fichier à importer (Word ou Excel) dans le dossier de votre site, Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel, Assurez-vous que vous êtes en mode Création, Dans le panneau Fichiers, cliquez glissez le fichier Word ou Excel vers la page web (ou menu Fichier / Importer ), La boîte de dialogue Insérer un document apparaît : Définissez les options souhaitées, puis cliquez sur OK. Les options de mise en forme sont les suivantes : Texte seul permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, cette dernière est supprimée. Texte structuré permet d'insérer du texte en conservant sa structure, mais sans la mise en forme de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres mises en forme. Texte structuré avec formatage de base permet d'insérer du texte structuré et du texte HTML avec une mise en forme simple. Texte structuré avec formatage complet permet d'insérer du texte conservant toute sa structure, mise en forme HTML et styles CSS. AFCI NewSoft 31

32 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. 9.4 Ajout d'espacements de paragraphe Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur la touche Entrée 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. Pour insérer un saut de paragraphe : Appuyez sur la touche Entrée. Pour insérer un saut de ligne : Appuyez sur les touches Maj (Shift)+Entrée. 9.5 Mise en forme texte et paragraphes Vous pouvez appliquer un formatage de texte à une seule lettre, à des paragraphes entiers du site ou encore à des blocs de texte. Sélectionner le texte ou paragraphe à mettre en forme, Dans le panneau Inspecteur des Propriétés, définir taille, couleur, alignement, retrait Pour mettre en forme un paragraphe : Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie du texte du paragraphe. Dans menu déroulant Format de l'inspecteur Propriétés, puis sélectionnez un format : par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc. La balise HTML associée au style choisi (par exemple, <h1> pour En-tête 1, AFCI NewSoft 32

33 <h2> pour En-tête 2, <p> pour paragraphe, <pre> pour Texte pré-formaté, etc.) est appliquée à tout le paragraphe. Choisissez Aucun pour supprimer un format de paragraphe. Lorsque vous choisissez une balise d'en-tête pour un paragraphe, Dreamweaver applique la mise en forme définie dans les propriétés de la page, catégorie En-tête (voir chapitre correspondant). 10 UTILISATION DE FEUILLES DE STYLES EN CASCADE (CSS) Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS : Cascading Style Sheets) pour mettre le texte en forme. Les styles appliqués au texte à l'aide de l'inspecteur Propriétés ou des commandes de menu génèrent des règles CSS intégrées à la section <head> du document. 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. Macromedia 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 Description des feuilles de style en cascade Les feuilles de style en cascade (CSS) regroupent des règles de mise en forme qui déterminent l'aspect du contenu d'une page Web. Lorsque vous utilisez CSS pour formater une page, vous séparez le contenu de sa 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>). CSS permet de contrôler de façon précise et souple l'aspect de la page, tant en termes de précision de l'emplacement des éléments, qu'en termes de choix de polices et de styles spécifiques. Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration. Le sélecteur est un terme (tel que P, H1, un nom de classe ou une id) qui identifie l'élément formaté, tandis que la déclaration définit les éléments du style. Dans l'exemple suivant, H1 correspond au sélecteur et tout ce qui est placé entre les accolades ({}) correspond à la déclaration : H1 { font-size: 16 px; font-family: Helvetica; font-weight:bold; } La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises H1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras. AFCI NewSoft 33

34 Le terme en cascade signifie qu'il est possible d'appliquer plusieurs feuilles de style à un même élément. Vous pouvez, par exemple, créer une règle CSS pour définir la couleur et une autre pour les marges, puis les appliquer toutes les deux au même texte sur une page.css présente l'avantage d'une mise à jour facile et rapide. Lorsque vous modifiez une règle CSS en un emplacement, la mise en forme de tous les documents utilisant ce style reflète automatiquement le nouveau style. Les feuilles de style CSS externes regroupent des 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 situé dans la section <head> d'un document. Les feuilles de style CSS internes (ou incorporées) regroupent les règles CSS incluses dans une balise style de la section <head> d'un document HTML Créer une feuille de styles CSS Afficher le panneau Styles CSS (menu Fenêtre / styles CSS), Cliquer sur le bouton Nouvelle règle de CSS Choisir un type de sélecteur (ex : classe) Type Classe permet de créer un style personnalisé applicable en tant qu'attribut class à une plage ou un bloc de texte, entrez ensuite le nom du style dans la zone de texte Nom. Remarque : 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. Type Balise permet de redéfinir la mise en forme par défaut d'une balise HTML spécifique. Choisissez ensuite une balise HTML dans le menu déroulant ou saisissez-en une dans le champ Balise. Type Avancé permet de définir la mise en forme d'une combinaison particulière de balises ou de toutes les balises contenant un attribut Id spécifique. Entrez ensuite une ou plusieurs balises HTML dans le champ Sélecteur ou choisissez-en une dans le menu déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe) disponibles dans le menu déroulant sont a:active, a:hover, a:link et a:visited. Nommer le style, Définir le style dans un nouveau fichier CSS ou Uniquement dans ce document, Cliquer sur OK, puis choisir emplacement dans votre site où le fichier CSS sera enregistré, AFCI NewSoft 34

35 Définir le contenu du style, à l'aide de la boite de dialogue, en choisissant une catégorie (à gauche) Cliquer sur OK pour créer le style. Description des différentes catégories de la boite de dialogue : Catégorie Type : Permet de définir les paramètres élémentaires de police, de couleur, de casse d'un texte. Police : permet de définir la famille de polices du style. Les navigateurs affichent le texte en utilisant la première police installée sur l'ordinateur de l'utilisateur de la combinaison de polices choisie. Pour assurer la compatibilité avec Internet Explorer, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs. Taille : définit la taille du texte. Les pixels en tant qu'unité fonctionnent correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs. Style : permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. Cet attribut est pris en charge par les deux navigateurs. Hauteur de ligne : définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait généralement référence à la notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la taille de la police ou entrez une valeur fixe et sélectionnez une unité de mesure. Cet attribut est pris en charge par les deux navigateurs. Décoration : 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 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. Epaisseur : applique aux caractères un niveau d'épaisseur. Cet attribut est pris en charge par les deux navigateurs. Variante : définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator. Casse : 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. AFCI NewSoft 35