Menu
▾
▴
[Frenchmozilla-cvs] nvutut/locale/fr-FR/nvutut books-index.rdf,NONE,1.1 chap01.xhtml,NONE,1.1 chap02.xhtml,NONE,1.1 chap03.xhtml,NONE,1.1 chap04.xhtml,NONE,1.1 chap05.xhtml,NONE,1.1 chap06.xhtml,NONE,1.1 contents.rdf,NONE,1.1 firebird-glossary.rdf,NONE,1.1 glossary.xhtml,NONE,1.1 nvutut_book.rdf,NONE,1.1 nvututStyle.css,NONE,1.1 sampleText-bg.xhtml,NONE,1.1 sampleText-em.xhtml,NONE,1.1 sampleText-h2.xhtml,NONE,1.1 sampleText-hl.xhtml,NONE,1.1 sampleText-img.xhtml,NONE,1.1 sampleText-just.xhtml,NONE,1.1 sampleText-list.xhtml,NONE,1.1 sampleText-p.xhtml,NONE,1.1 sampleText-table.xhtml,NONE,1.1 sampleText.xhtml,NONE,1.1 schemas.xml,NONE,1.1 toc.rdf,NONE,1.1 welcome.xhtml,NONE,1.1
Update of /cvsroot/frenchmozilla/nvutut/locale/fr-FR/nvutut In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv4581 Added Files: books-index.rdf chap01.xhtml chap02.xhtml chap03.xhtml chap04.xhtml chap05.xhtml chap06.xhtml contents.rdf firebird-glossary.rdf glossary.xhtml nvutut_book.rdf nvututStyle.css sampleText-bg.xhtml sampleText-em.xhtml sampleText-h2.xhtml sampleText-hl.xhtml sampleText-img.xhtml sampleText-just.xhtml sampleText-list.xhtml sampleText-p.xhtml sampleText-table.xhtml sampleText.xhtml schemas.xml toc.rdf welcome.xhtml Log Message: Import initial. --- NEW FILE: books-index.rdf --- <?xml version="1.0" encoding="UTF-8"?> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/NC-rdf#"> <rdf:Description about="urn:root"> <nc:subheadings> <rdf:Seq> <rdf:li> <rdf:Description ID="a" nc:name="A" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="b" nc:name="B" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="c" nc:name="C" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="d" nc:name="D" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="e" nc:name="E" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="f" nc:name="F" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="g" nc:name="G" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="h" nc:name="H" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="i" nc:name="I" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="j" nc:name="J" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="k" nc:name="K" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="l" nc:name="L" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="m" nc:name="M" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="n" nc:name="N" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="o" nc:name="O" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="p" nc:name="P" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="q" nc:name="Q" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="r" nc:name="R" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="s" nc:name="S" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="t" nc:name="T" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="u" nc:name="U" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="v" nc:name="V" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="w" nc:name="W" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="x" nc:name="X" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="y" nc:name="Y" nc:link=""/></rdf:li> <rdf:li> <rdf:Description ID="z" nc:name="Z" nc:link=""/></rdf:li> </rdf:Seq> </nc:subheadings> </rdf:Description> <rdf:Description about="#b"> <nc:subheadings> <rdf:Seq> <rdf:li><rdf:Description nc:name="Barre d'outils de mise en forme" nc:link="chap01.html#composition_toolbar"/></rdf:li> </rdf:Seq> </nc:subheadings> </rdf:Description> </rdf:RDF> --- NEW FILE: chap01.xhtml --- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ENTITY % brandDTD SYSTEM "chrome://global/locale/brand.dtd" > %brandDTD; ]> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>N|vu Tutorial</title> <link rel="stylesheet" type="text/css" href="nvututStyle.css" /> </head> <body> <div id="chapNo">Chapitre 1</div> <h1 id="chapTitle">Introduction</h1> <p para="first">Nvu (prononcer : « <em>N-view</em> »), est un logiciel complet d'édition de pages Web <acronym title= "What You See Is What You Get (Ce que vous voyez est ce que vous obtenez)"> WYSIWYG</acronym>, open source et multi-plateforme. Il est basé sur la technologie de pointe Gecko Runtime Environment (GRE). <acronym title="Gecko Runtime Environment">GRE</acronym> est le cœur des applications basées sur Mozilla comme <a href="http://getfirefox.com">Firefox</a>, <a href= "http://www.mozilla.org/products/thunderbird/">Thunderbird</a>, <a href= "http://www.mozilla.org/projects/calendar/sunbird.html">Sunbird</a>, etc. En plus d'être un éditeur <acronym title= "Hyper Text Markup Language">HTML</acronym> puissant, c'est aussi un éditeur WYSIWYG très facile à utiliser pour les débutants.</p> <!-- <em>open source</em> <acronym title="What You See Is What You Get">WYSIWYG</acronym> web editor. It is based on Mozilla Composer, the WYSIWYG component of <a href="http://www.mozilla.org/products/mozilla1.x/">Mozilla Suite</a>. It uses the state-of-art <em>Gecko</em> rendering engine.--> <h2 id="user_interface">L'interface utilisateur</h2> <p>L'interface de Nvu est compée d'une barre d'outils de boutons facilement accessibles pour toutes les fonctions essentielles nécessaires à l'utilisateur pour concevoir une page Web. Avec la technologie moderne Gecko comme base, Nvu offre des fonctionnalités incroyables tels qu'une <em>interface par onglets</em>, un <em>gestionnaire d'extensions</em>, un <em>gestionnaire de thèmes</em>, une <em>console JavaScript</em>, etc. Avec la possibilité d'ouvrir de multiples onglets dans une même fenêtre, vous pouvez éditer plusieurs fichiers dans la même instance de Nvu sans gaspiller de place sur votre bureau ou encombrer la barre des tâches. Une autre fonctionnalité propre à Nvu, c'est la barre d'état qui affiche les balises encadrant la position actuelle du curseur en temps réel vous donnant une idé du code source <acronym title= "Hyper Text Markup Language">HTML</acronym> tout en éditant le document en mode WYSIWYG. Les utilisateurs avancés peuvent éditer le document <acronym title= "Hyper Text Markup Language">HTML</acronym> en mode <em>Normal</em>, <em>Balises HTML</em> ou <em>Source</em>. Les sections suivantes vous familiariseront à l'interface de base de Nvu.</p> <h3 id="composition_toolbar">Barre d'outils principale</h3> <p>La barre d'outils principale est composée de boutons utilisés pour accomplir les tâches courantes pour éditer une page Web. Ces boutons réalisent les actions que vous effectuerez le plus souvent en créant ou en éditant vos pages Web. La <a href="#Fig1.1">Figure 1.1</a> ci-dessous, montre la barre d'outils principale (encadrée de bleu) dans sa configuration par défaut. La liste ci-dessous décrit brièvement les fonctions de chaque bouton de la barre d'outils principale.</p> <ul> <li><strong>Nouveau</strong> : Ouvre un nouveau document vierge à éditer. En cliquant sur la petite flèche à côté du bouton <strong>Nouveau</strong> vous aurez le choix d'ouvrir ce nouveau document vierge dans un nouvel onglet ou une nouvelle fenêtre. Le troisième élément de la liste déroulante, <em>Plus d'options…</em>, ouvre une boîte de dialogue vous permettant d'ouvrir au choix soit un document vierge (dans un nouvel onglet ou une nouvelle fenêtre), soit un document basé sur un modèle soit un modèle vierge.</li> <li><strong>Ouvrir</strong> : Ouvre une boîte de dialogue où vous pouvez choisir un fichier existant pour l'éditer.</li> <li><strong>Enregistrer</strong> : Enregistre le document en cours d'édition. Si le document est enregistré pour la première fois, une boîte de dialogue s'ouvre pour demander à l'utilisateur où enregistrer le fichier.</li> <li><strong>Publier</strong> : Ouvre le <a href= "site_manager">gestionnaire de sites</a> pour publier le document sur le serveur qui héberge vos pages Web.</li> <li><strong>Navigateur</strong> : Ouvre le document en cours d'édition dans votre navigateur par défaut. Vous pouvez alors voir à quoi ressemblera la page lorsque des utilisateurs visiteront votre site Web. Si la page n'est pas enregistrée, Nvu vous demandera de le faire, puis il l'ouvrira dans le navigateur.</li> <li><strong>Ancre</strong> : Ouvre une boîte de dialogue pour créer une <em>ancre</em>. Une ancre est un emplacement cible utilisé pour aller d'un endroit à un autre dans la même page. Par exemple, un document avec une petite table des matières peut utiliser des ancres pour permettre à l'utilisateur de se rendre directement à la section concernée.</li> <li><strong>Lien</strong> : Ouvre une boîte de dialogue pour créer un lien hypertexte. Vous pouvez également indiquer, soit une <acronym title= "Universal Resource Locator">URL</acronym> d'un fichier local, soit celle d'un fichier sur Internet soit une ancre. Vous pouvez également saisir d'autres propriétés pour le lien comme le texte du titre , des informations <acronym title= "XHTML Friends Network">XFN</acronym> ou d'autres propriétés avancées avec l'<em>Éditeur de propriétés avancées</em>. Voir l'<a href= "app01.xhtml">Annexe 1</a> pour des détails sur l'éditeur de propriétés avancées.</li> <li><strong>Image</strong> : Ouvre une boîte de dialogue pour sélectionner une image à insérer à l'emplacement actuel du curseur. Pour d'autres paramètres avancés de l'image à insérer, consultez l'<a href="app02.xhtml">Annexe 2</a>.</li> <li><strong>Tableau</strong> : Ouvre une boîte de dialogue pour sélectionner la taille du tableau à insérer à l'emplacement en cours du curseur. Consultez le <a href="chapxx.xhtml">Chapitre xx</a> pour des détails sur l'insertion et l'utilisation de tableaux dans vos documents.</li> <li><strong>Formulaire</strong> : Ouvre une boîte de dialogue demandant à l'utilisateur de saisir les propriétés pour insérer un formulaire à l'emplacement actuel du curseur. Consultez le <a href= "chapxx.html">Chaptire xx</a> pour des détails sur l'utilisation des formulaires dans vos documents.</li> <li><strong>Orthographe</strong> : Démarre le correcteur orthographique pour vérifier l'orthographe du texte saisi dans le document. Le correcteur orthographique utilise le dictionnaire que vous avez choisi (le dictionnaire anglais est sélectionné par défaut).</li> <li><strong>Imprimer</strong> : Ouvre la boîte de dialogue <em>Imprimer</em> pour sélectionner l'imprimante et les propriétés d'impression avant d'imprimer votre document.</li> </ul> <p class="fig" id="Fig1.1"><img src= "./images/composition_toolbar.png" alt="" />Figure 1.1 La <em>Barre d'outils principale</em> est encadrée de bleu.</p> <p>Alors que les utilisateurs peuvent ouvrir la fenêtre de dialogue de composition avec les boutons <em>Ancre</em>, <em>Lien</em>, <em>Image</em> et <em>Tableau</em> pour créer les objets respectifs sur la page Web, cliquer sur l'un de ces boutons quand le curseur est déjà positionné sur l'objet ouvrira la boîte de propriétés de l'objet. Par exemple, si le curseur est dans un tableau, cliquer sur le bouton <em>Tableau</em> ouvrira le boîte de dialogue de propriétés du tableau. Les utilisateurs peuvent par conséquent facilement changer ou ajouter des propriétés pour ces objets.</p> <h3 id="formatting_toolbar">La barre de mise en forme</h3> <p>La barre de mise en forme est située juste sous la barre d'outils principale. Elle se compose de deux rangées de boutons, les <a href="#Fig1.2">Figure 1.2</a> et <a href= "#Fig1.3">Figure 1.3</a> montrent la barre de mise en forme par défaut. Les utilisateurs peuvent également la personnaliser en faisant un clic droit sur celle-ci et en choisissant <em>Personnaliser</em>. La barre de mise en forme permet un accès rapide aux fonctions de formatage de texte les plus fréquentes comme par exemple mettre le texte en gras, en italique, en souligné, choisir la police, créer des listes numérotées ou non, etc. Une description plus détaillée de chaque bouton est donnée ci-dessous :</p> <h4 id="formatting_toolbar_row_1">La barre de mise en forme : rangée 1</h4> <p class="fig" id="Fig1.2"><img src= "./images/format_toolbar_r1.png" alt="" /> Figure 1.2 La <em>Barre de mise en forme - rangée 1</em> est encadrée de bleu.</p> <ul> <li><strong>Choisir un format de paragraphe</strong> : Choisir le style du paragraphe du texte sélectionné. Les options disponibles sont : <ul> <li><em>Corps de texte</em> : Marque le texte sélectionné en texte non formaté.</li> <li><em>Paragraphe</em> : Marque le bloc de texte sélectionné en tant que paragraphe.</li> <li><em>Titre 1-6</em> : Marque le texte sélectionné en tant que titre de niveau 1,2,… ou 6.</li> <li><em>Adresse</em> : Marque le texte sélectionné au format <em>Adresse</em>. Le format <em>Adresse</em> est en fait du texte en italique; vous devrez y ajouter vous-même les retours à la ligne.</li> <li><em>Préformaté</em> : Marque le texte sélectionné en tant que texte <em>préformaté</em>. Le texte préformaté est affiché par le navigateur tel quel. Par exemple, les navigateurs traitent de multiples espaces consécutives comme une seule espace, mais dans du texte préformaté, une espace est affichée telle quelle. Le texte préformaté est généralement utilisé pour afficher des exemples de code.</li> </ul> </li> <li><strong>Choisir une police</strong> : Avec cette liste déroulante, vous pouvez choisir une police pour le texte sélectionné. La liste ne contient que les polices installées sur votre système. Il est conseillé d'utiliser une famille de police générique, car les polices installées sur votre système peuvent ne pas être disponibles sur le système des utilisateurs qui verront votre page sur le Web.</li> <li><strong>Choisir la couleur de texte</strong> : Ouvre le sélecteur de couleurs pour choisir la couleur du texte sélectionné.</li> <li><strong>Choisir la couleur de fond</strong> : Ouvre le sélecteur de couleurs pour choisir la couleur d'arrière-plan du bloc de texte sélectionné.</li> <li><strong>Choisir la couleur de surlignage du texte</strong> : Ouvre le sélecteur de couleurs pour choisir la couleur de surlignage du texte sélectionné.</li> <li><strong>Réduire la taille de police</strong> : Diminue la taille de la police du texte sélectionné.</li> <li><strong>Augmenter la taille de police</strong> : Augmente la taille de la police du texte sélectionné.</li> <li><strong>Gras</strong> : Transforme le texte sélectionné en caractères gras.</li> <li><strong>Italique</strong> : Transforme le texte sélectionné en italique.</li> <li><strong>Souligné</strong> : Souligne le texte sélectionné.</li> <li><strong>Appliquer ou enlever une liste numérotée</strong> : Commence une liste numérotée.</li> <li><strong>Appliquer ou enlever une liste à puces</strong> : Commence une liste à puces.</li> <li><strong>Aligner à gauche</strong> : Aligne à gauche le bloc de texte sélectionné.</li> <li><strong>Centrer</strong> : Centre le bloc de texte sélectionné.</li> <li><strong>Aligner à droite</strong> : Aligne à droite le bloc de texte sélectionné.</li> <li><strong>Justifier</strong> : Justifie le bloc de texte sélectionné des deux côtés.</li> <li><strong>Augmenter le retrait (vers la droite)</strong> : Augmente le retrait à droite du bloc de texte sélectionné.</li> <li><strong>Diminuer le retrait (vers la gauche)</strong> : Diminue le retrait vers la gauche d'un texte déjà indenté.</li> </ul> <h4 id="formatting_toolbar_row_2">Barre de mise en forme : Rangée 2</h4> <p class="fig" id="Fig1.3"><img src= "./images/format_toolbar_r2.png" alt="" />Figure 1.3 La <em>Barre de mise en forme - rangée 2</em>.</p> <ul> <li><strong>Appliquer une classe à la sélection</strong> : Applique une des classes disponibles au texte sélectionné. Note : est seulement disponible s'il y a une feuille de style attachée à votre document (interne ou externe).</li> <li><strong>Dissocier du texte</strong> : Définit un bloc (conteneur <em><div></em>).</li> <li><strong>Placer au premier plan</strong> : Passe le groupe d'éléments sélectionné à l'avant-plan des autres éléments.</li> <li><strong>Placer à l'arrière-plan</strong> : Passe le groupe d'éléments sélectionné à l'arrière-plan des autres éléments.</li> <li><strong>Mettre en évidence</strong> : Met en évidence le texte sélectionné.</li> <li><strong>Mettre fortement en évidence</strong> : Met fortement en évidence le texte sélectionné.</li> <li><strong>Appliquer ou enlever un terme de définition</strong> : Transforme le texte sélectionné en <em>terme de définition</em>.</li> <li><strong>Appliquer ou enlever une définition</strong> : Transforme le texte sélectionné en <em>description de définition</em>.</li> <li><strong>Attacher à la bordure gauche</strong> : Définit la marge de gauche (absolue) explicitement pour un bloc.</li> <li><strong>Laisser au centre</strong> : Définit les marges de gauche et de droite (absolues) explicitement pour garder le bloc au centre de la fenêtre.</li> <li><strong>Attacher à la bordure droite</strong> : Définit la marge de droite (absolue) explicitement pour un bloc.</li> <li><strong>Attacher en haut</strong> : Définit la marge du haut (absolue) explicitement pour un bloc.</li> <li><strong>Laisser au milieu</strong> : Définit les marges du haut et du bas (absolues) explicitement pour un bloc.</li> <li><strong>Attacher en bas</strong> : Définit la marge du bas (absolue) explicitement pour un bloc.</li> </ul> <h3 id="customizing_toolbars">Personnalisation des barres d'outils</h3> <p>Les utilisateurs peuvent <em>personnaliser</em> les barres d'outils principale et de mise en forme comme ils le désirent. La personnalisation d'une barre d'outils permet aux utilisateurs d'effectuer les opérations suivantes :</p> <ul> <li><em>ajouter des boutons</em> à la barre d'outils à partir de la fenêtre de personnalisation,</li> <li><em>supprimer des boutons</em> de la barre d'outils en les reposant dans la fenêtre de personnalisation, et</li> <li><em>ajouter/supprimer</em> des espaces <em>fixes/flexibles</em> à la barre d'outils pour créer un groupe de boutons, par ex. des boutons aux fonctionnalités similaires.</li> </ul> <p>Pour ouvrir la fenêtre de personnalisation, faites un clic droit sur la barre d'outils principale ou sur la barre de mise en forme et sélectionnez <em>Personnalisation des barres d'outils</em>. Vous pouvez à présent faire des glisser-déposer de boutons, de séparateurs, d'espaces fixes ou flexibles vers la barres d'outils pour y ajouter des éléments. Pour enlever des éléments de la barre d'outils, faites un glisser-déposer de ceux-ci vers la fenêtre de personnalisation. Vous pouvez également choisir de n'afficher que les icônes, les icônes avec le texte ou seulement le texte dans la barre d'outils en utilisant le menu déroulant <strong>Montrer</strong>.</p> <h3 id="tabbed_interface">Interface par onglets</h3> <p>Nvu, tout comme <a href= "http://www.mozilla-europe.org/fr/">Firefox</a> a la possibilité d'avoir une interface par onglets. De multiples onglets permettent à l'utilisateur d'éditer plusieurs documents dans la même fenêtre en même temps. Chaque onglet a une liste <tt>Annuler/Refaire</tt> indépendante, de sorte que l'édition de plusieurs documents soit indépendante pour chaque document.</p> <p class="fig" id="Fig1.4"><img src="./images/tabs.png" alt= "" />Figure 1.4 Interface par onglets avec des documents enregistrés et non-enregistrés</p> <p>La <a href="#fig4">Figure 1.4</a> est une copie d'écran typique de l'apparence d'une fenêtre à plusieurs onglets lors de l'édition. Pour que ce soit commode, indique l'état du document qui y est édité. Un document qui n'a pas été enregistré affiche une icône de <em>disquette rouge</em> dans l'onglet correspondant, ainsi que le montre de deuxième onglet de la <a href="#Fig1.4">Figure 1.4</a>. Vous pouvez fermer un onglet individuellement en faisant un clic droit sur l'onglet et en sélectionnant <strong>Fermer l'onglet</strong>. L'onglet en cours d'utilisation peut également être fermé en cliquant sur l'icône <em>Fermer</em> (la croix rouge) à l'extrême droite de la barre d'onglet.</p> <p>L'<em>interface par onglets</em> permet également aux utilisateurs de travailler plus efficacement. Vous pouvez facilement basculer d'une page à l'autre en cliquant sur l'onglet correspondant ou en utilisant les raccourcis clavier <tt>Ctrl+Pg Préc.</tt> et <tt>Ctrl+Pg Suiv.</tt>.</p> <!--h3 id="viewing_modes">Viewing Modes</h3> <p>Nvu can be used as a <acronym title="What You See Is What You Get">WYSIWYG</acronym> web page editor by people who are new to web page building and design. For the more experienced ones, Nvu allows more control over the generated code for the document. Experienced users can view their document in any of the available <em>4</em> viewing modes. The viewing modes can be changed by clicking on the corresponding tab at the bottom of the document being edited. <a href="#Fig1.5">Fig1.54</a> shows the relevant part of the Nvu window with Normal viewing mode as the active one.</p> <p class="fig" id="Fig1.5"><img src="./images/viewing_toolbar.png" alt=""/>Fig1.5 Viewing Mode Switching Tabs</p> <p>Below is a brief description of the viewing modes available in Nvu.</p> <ul> <li><strong>Normal</strong> Normal mode is the basic WYSIWYG viewing mode.</li> <li><strong>HTML Tags</strong> HTML Tags mode is similar to WYSIWYG but it also shows the HTML tags enclosing a block of text or images at the top left corner of the block.</li> <li><strong><HTML>Source</strong> HTML Source view is detailed HTML code being generated by Nvu. HTML Source view should only be used by users who are confident enough that they know HTML and can edit the code by hand.</li> <li><strong>Preview</strong> Preview mode shows how the web document will look in a browser.</li> </ul--> <h2 id="sample_text">Échantillon de texte</h2> <p>Dans ce tutoriel, nous utiliserons le texte situé dans la boîte ci-dessous. Pour le moment, il s'agit de texte brut. Au fur et à mesure, le texte sera transformé en utilisant différentes fonctionnalités de Nvu. Pour chaque type de transformation, il y aura un lien en fin de section qui ouvrira l'échantillon de texte dans votre navigateur par défaut avec <em>seulement cette transformation appliquée</em>. L'ensemble des transformations appliqué au texte brut sera affiché à la fin de chaque chapitre dans une boîte similaire.</p> <p>Il serait profitable pour vous d'effectuer les tâches décrites dans ce tutoriel au fur et à mesure. Tout ce que vous aurez à faire sera de copier le <em>même texte</em> de la section et de le coller dans Nvu. Vous pouvez effectuer les mêmes opérations que celles indiquées dans ce tutoriel et vérifier votre progression en comparant votre document avec le résultat affiché dans le tutoriel. Une fois fait, vous pouvez jouer avec les diverses fonctions pour bien les maîtriser et vous sentir à l'aise. Prenez également l'habitude de cliquer régulièrement sur le bouton <em>Enregistrer</em> de la barre d'outils principale.</p> <p>Si vous voulez seulement lire ce tutoriel, vous trouverez plus facile de voir tout l'échantillon de texte à la fin du chapitre, avec toutes les transformations appliquées. Pour plus de clarté, le texte formaté sera de couleur noire (ou d'une couleur différente du <em>gris</em>).</p> <!-- Sample Text Starts --> <div id="sampleText" class="testText">Échantillon de texte<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac massa non enim dictum vulputate. Vestibulum iaculis. Maecenas nisl magna, suscipit quis, vulputate nec, egestas vel, enim. Ut venenatis blandit elit. Aliquam erat volutpat. Nam eros. Morbi imperdiet, diam at lacinia luctus, diam lacus porttitor quam, a posuere nulla sem vel diam. Suspendisse quam felis, scelerisque vel, fringilla sit amet, commodo quis, orci. Etiam at eros. Aenean facilisis adipiscing libero. Phasellus malesuada sem ornare nulla. Sed sit amet elit.<br /> Aenean vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi. Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque magna urna, auctor consectetuer, tristique sit amet, porta sit amet, dui.<br /> Statistiques<br /> Paragraphes 2<br /> Mots 168<br /> Octets 1149<br /> Une liste à puces<br /> Ci-dessous se trouve une liste non-ordonnée, c-à-d. une liste à puces. Les listes ordonnées ou numérotées peuvent également être réalisées en suivant une procédure similaire à celle pour créer les listes à puces en cliquant sur le bouton des listes numérotées dans la barre de mise en forme.<br /> * Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> * Sed nec velit sit amet dui malesuada porttitor.<br /> * Fusce auctor turpis ac dui ornare feugiat.<br /> * Ut et elit ut ante mattis ullamcorper.<br /> * Maecenas sed tortor at tellus pulvinar commodo.<br /> Liens intéressants<br /> Nvu.com Mozilla.org Firefox Thunderbird NvuHelp Debian/GNU Linux<br /></div> <!-- Sample Text Ends --> <h2 id="next">Chapitre suivant</h2> <p>Dans le <a href="chap02.xhtml">prochain chapitre</a>, nous utiliserons la barre de mise en forme pour formater l'échantillon de texte. Bien que la barre de mise en forme nous aide beaucoup grâce à l'accès rapide aux options de formatage les plus fréquentes, nous introduirons également quelques astuces de formatage en utilisant le menu <em>Format</em>. Le menu <em>Format</em> fournit toutes les fonctionnalités de formatage d'un document Web.</p> <p id="chapFoot">©2004-2005 KDS Sahambi<br /> Traduction française : Cédric Corazza</p> </body> </html> --- NEW FILE: chap02.xhtml --- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [ <!ENTITY % brandDTD SYSTEM "chrome://global/locale/brand.dtd" > %brandDTD; ]> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nvu Tutorial</title> <link rel="stylesheet" type="text/css" href="nvututStyle.css" /> </head> <body> <div id="chapNo">Chapitre 2</div> <h1 id="chapTitle">Formatage de texte</h1> <p para="first">Nvu étant un éditeur <acronym title="What You See Is What You Get">WYSIWYG</acronym> pour des documents Web, il vous suffit juste de taper le texte que vous voulez voir s'afficher lors les internautes consulteront votre site Web. Le processus de conception d'une page Wen avec Nvu est similaire à celui de l'écriture et de la mise en page d'une lettre ou d'un article dans votre éditeur de texte préféré. Du texte brut n'attire pas l'œil car il manque de mise en page et de présentation. Avec Nvu vous pouvez facilement formater le texte que vous voulez écrire de sorte à avoir un texte mis en page de façon attrayante (en utilisant toutes les fonctionnalités de formatage HTML) et qui sera agréable à lire. Dans ce chapitre, nous aborderons les différentes manières de formater du texte dans un document Web en utilisant la <em>Barre de mise en forme</em>. Une autre façon de créer de belles pages est d'utiliser des feuilles de style. Une introduction aux feuilles de style sera ajoutée dans ce tutoriel plus tard.</p> <p class="adv">N'oubliez pas de cliquer régulièrement sur le bouton <em>Enregistrer</em>.</p> <p>Les navigateurs utilisent principalement deux types de boîte pour formater du texte dans un document Web. Le texte peut être encadré dans une <em>boîte de type « bloc »</em>, par ex. <tt><h1>…</h1></tt>, <tt><h2>…</h2></tt>, <tt><p>…</p></tt>, etc., ou dans une <em>boîte de type « en ligne »</em>, par ex. <tt><b>…</b></tt>, <tt><em>…<em></tt>, etc.</p> <p>En général, les boîtes de type « bloc » peuvent contenir d'autres boîtes de type « bloc » et/ou de type « en ligne ». Les boîtes de type « bloc », par défaut, commencent par une nouvelle ligne, contrairement aux boîtes de type « en ligne ».</p> <p>Par défaut, les boîtes de type « en ligne » peuvent contenir des données ou d'autres boîtes de type « en ligne » mais pas de boîtes de type « bloc ». Les options de formatage en ligne de la barre de mise en forme concernent le paramétrage de la couleur de police et de l'arrière-plan, la mise en évidence du texte, la taille de police et la mise en caractères gras, italiques ou soulignés.</p> <p>Maintenant que nous avons une vue d'ensemble des boîtes <acronym title= "Hyper Text Markup Language">HTML</acronym> de type « bloc » et de type « en ligne », voyons comment les utiliser dans un document Web.</p> <h2 id="heading_levels">Niveaux de titre</h2> <p>Les titres dans un document peuvent être utilisés de la même façon que dans les livres, les articles de journaux, etc. Comme vous le savez sûrement, un titre est généralement composé de quelques mots formatés dans un style pour se détacher du texte normal qui le suit. Il est conseillé de garder des titres courts c'est-à-dire juste quelques mots. Le langage HTML autorise 6 différents niveaux de titres, <tt>h1, h2, …, h6</tt>. Le niveau de titre <tt>h1</tt> étant le plus haut et le niveau de titre <tt>h6</tt> le plus bas.</p> <p class="adv">Vous pouvez également modifier le style de rendu par défaut d'un élément HTML en utilisant des feuilles de style (CSS).</p> <p>Pour formater une partie de texte en titre, sélectionnez le texte désiré (cliquer et sélectionner à la souris) et choisissez le niveau de titre que vous voulez (<tt>Titre 1, Titre 2, etc.</tt>) dans le menu déroulant <tt>Corps de texte</tt> dans la bare de mise en forme. Le texte sélectionné sera formaté en fonction du niveau de titre que vous avez choisi. Le niveau de titre de cette section est <tt>Titre 3</tt>, et le nom de ce chapitre est formaté comme <tt>Titre 1</tt> (Bien que la couleur du texte ait été changée pour le titre du chapitre). Vous remarquerez que les titres dans cet <a href= "#sampleText">échantillon de texte</a> sont en noir alors que dans les titres de ce tutoriel, les titres sont bleu marine avec un fond de style code-à-barres. Ceci a été réalisé à l'aide de feuilles de styles. Les <acronym title= "Cascading Style Sheets">CSS</acronym> peuvent être utilisées pour modifier le style par défaut d'un élément affiché par le navigateur. L'utilisation des CSS est une manière élégante de séparer le contenu de l'apparence d'une page Web. Cependant, une introduction sur la façon d'utiliser les CSS serait hors de propos à ce point du tutoriel. Nous l'aborderons plus loin.</p> <p>Vous pouvez voir le résultat d'un texte formaté en « Titre 1 » appliqué aux titres de section en cliquant <a href= "sampleText-h2.xhtml" target="_blank">ici</a>. Le formatage des titres a été intégré avec toutes les autres modifications de mise en page effectuées dans ce chapitre à la <a href="#sampleText">fin</a> de cette page.</p> <h2 id="paragraph">Paragraphe</h2> <p>Tout comme il existe des paragraphes dans le texte manuscrit, le langage HTML permet également le regroupement de phrases en paragraphe. Le texte encadré par <tt><p> et </p></tt> est traité comme un paragraphe en HTML. Le texte marqué comme paragraphe est une boîte de type « bloc » et par conséquent, chaque paragraphe commence par une nouvelle ligne.</p> <p>Pour marquer un groupe de phrases comme un paragraphe dans un document Web, sélectionnez toutes ces phrases avec la souris et choisissez l'option « <tt>Paragraphe</tt> » dans le menu déroulant <tt>Corps de texte</tt> dans la barre d'outils de mise en forme. Même le présent paragraphe de texte a été encadré par des balises HTML <tt><p> et </p></tt>. Notre <a href= "#sampleText">échantillon de texte</a> présente les deux premiers groupes de lignes comme du texte marqué par des balises paragraphe <tt><p> et </p></tt>.</p> <h2 id="bold_italic_underline_text">Texte en caractères gras, italiques et soulignés</h2> <p class="adv">Utilisez <i><b>I</b></i>, <u><b>U</b></u> et <b>B</b> avec modération. Une utilisation trop importante de ces balises distrait le lecteur.</p> <p>Le texte peut être marqué en gras, italique et/ou souligné en utilisant les boutons correspondants de la barre d'outils de mise en forme. Vous pouvez sélectionner n'importe quelle partie du texte de votre document pour le marquer en gras, italique ou souligné. Le texte sélectionné peut également faire partie de d'une boîte de type « bloc » car les boîtes de type « en ligne » peuvent être imbriquées dans des boîtes de type « bloc ». Pour marqué du texte sélectionné en gras, cliquez sur le bouton « <tt>Gras</tt> « (bouton <b>B</b> dans la barre d'outils de mise en forme. <b>Le texte sélectionné sera modifié en caractères gras, comme cette phrase</b>. Pour le texte en <i>italique</i> et en <u>souligné</u>, suivez la même procédure en utilisant les boutons correspondants (<i><b>I</b></i>, <u><b>U</b></u>) dans la barre d'outils de mise en forme.</p> <p>Pour augmenter la taille d'une partie de texte, sélectionnez le texte et cliquez sur le bouton « <tt>Augmenter la taille de police</tt> » dans la barre d'outils de mise en forme. Suivez la même procédure pour diminuer la taille de police en utilisant le bouton « <tt>Réduire la taille de police</tt> ». Notre <a href= "#sampleText">échantillon de texte</a> a été modifié pour que le premier de chaque paragraphe soit dans une police plus grande.</p> <h2 id="choosing_a_font_face">Choisir une police</h2> <p>Vous pouvez choisir la police que vous voulez pour le texte de votre document. La police peut être changée pour chaque élément de votre document. Pour changer la police pour une partie du texte, sélectionnez le texte et choisissez la police que vous aimez dans le menu déroulant « <tt>Choisir une police</tt> » (qui se trouve par défaut en dessous et à droite du menu déroulant <tt>Corps de texte</tt>) dans la barre d'outils de mise en forme. <span style="font-family: Arial;">Cette phrase a été formatée en utilsant la police « Arial »</span>.</p> <p>Lorque vous choisirez une police pour une section de texte, vous devrez garder à l'esprit que lorsque des utilisateurs visitent votre page Web, le texte dans leur navigateur sera affiché en utilisant les polices <strong>qu'ils ont</strong> sur <strong>leur</strong> ordinateur. S'ils n'ont pas une des polices que vous avez spécifiée dans votre document Web, leur navigateur utilisera la police par défaut de leur système d'exploitation pour afficher cette partie du texte, ce qui peut donner une apparence vraiment différente de celle que vous avez sur votre ordinateur. Par conséquent, la bonne pratique est d'utiliser une famille de police générique comme dernière option. Une famille de polcie générique indique d'utiliser la police par défaut de cette famille au cas où l'ordinateur ne disposerait pas de la police que vous avez indiquée.</p> <p>Notre <a href="#sampleText">échantillon de texte</a> présente la dernière ligne de chaque paragraphe formatée avec la police <em>courier</em>, et si elle n'est pas disponible, la police <em>monospace</em> est utilisée.</p> <h2 id="font_color">Couleur de police</h2> <p>Changer la couleur de tout ou partie du texte de votre document peut être facilement réalisé en utilisant le bouton « <tt>Choisir la couleur de texte</tt> ». Pour trouver l'emplacement du bouton <tt>Choisir la couleur de texte</tt>, consultez la section <a href= "chap01.xhtml#">Barre de mise en forme</a> du chapitre 1.</p> <p class="fig" id="Fig2.1"><img src="./images/colorPicker.png" alt= "" />Fig 2.1 Boîte de dialogue Couleur du texte</p> <p>Pour changer la couleur de tout ou partie du texte de votre document, Sélectionnez le texte désiré puis cliquer sur le bouton <tt>Choisir la couleur de texte</tt>. Cela ouvrira la boîte de dialogue <em>Couleur du texte</em> (<a href= "#Fig2.1">Fig2.1</a>). Sélectionnez la couleur que vous voulez pour le texte soit en cliquant dans le nuancier soit en saisissant la valeur hexadécimale du code de la couleur. Par ex. le rouge correspond à #FF000. Cliquez sur le bouton <tt>OK</tt> pour confirmer les modifications. Une procédure similaire a été suivie pour colorer le texte du premier paragraphe de notre <a href="#sampleText">échantillon de texte</a> en marron. Pour le choix des couleurs, il est conseillé de choisir des couleurs faciles à lire, c-à-d. dont le contraste est suffisant par rapport à la couleur d'arrière-plan.</p> <h2 id="background_color_and_highlighting_text">Couleur de fond et surlignage de texte</h2> <p>Pour donner du style à votre document, vous pouvez également changer la couleur de fond pour un bloc de texte ou même pour tout le document. Sélectionnez le bloc de texte pour lequel vous voulez changer la couleur de fond. Puis, cliquez sur le bouton <tt>Choisir la couleur de fond</tt> dans la barre de mise en forme (derrière le bouton <tt>Choisir la couleur du texte</tt>). Ceci ouvrira la boîte de dialogue <em>Couleur de fond de bloc</em> où vous pouurez sélectionner la couleur de fond. Après avoir choisi la couleur, cliquez sur le bouton <span class= "button">OK</span> et enregistrez les changements.</p> <p>À titre d'exemple, le second paragraphe de notre <a href="#sampleText">échantillon de texte</a> a un fond coloré. Pour voir seulement le résultat de changement de couleur de fond sur notre échantillon de texte <em>brut</em> (dans votre navigateur par défaut), cliquez <a href= "sampleText-bg.xhtml" target="_blank">ici</a>.</p> <p>La procédure ci-dessus changera la couleur de fond pour le fond sélectionné, c-à-d. que si vous choisissez un bloc de texte à l'intérieur d'un paragraphe, cela changera la couleur de fond de tout le paragraphe. En d'autres termes, le changement de couleur de fond s'applique aux éléments de niveau « bloc ». Pour ne changer que la couleur de fond du texte sélectionné, c-à-d. pour surligner le texte sélectionné, cliquez sur <em>Choisir la couleur de surlignage de texte</em> (icône en forme de stylo dans la barre de mise en forme <a href= "chap01.xhtml#Fig1.3">Fig1.3</a>). Ceci ouvrira la boîte <em>Couleur de surlignage</em>. Après avoir choisi la couleur désirée pour surligner, cliquez sur le bouton <span class="button">OK</span> et enregistrez le document.</p> <p>Vous pouvez voir un bel exemple dans notre <a href= "#sampleText">échantillon de texte</a> où le texte « liste numérotée » a été surligné dans une teinte de bleu. Pour ne voir que le résultat du surlignage (dans votre navigateur par défaut) cliquez <a href= "sampleText-hl.xhtml" target="_blank">ici</a>.</p> <h2 id="creating_lists">Création de liste</h2> <p>Nous avons souvent besoin de rassembler des informations sous forme de listes. Nvu propose deux types de liste simple : les listes numérotées et les listes à puces. La création de l'une ou l'autre utilise la même procédure à l'exception du bouton de création. Pour créer une liste numérotée, cliquez sur le bouton <em>Appliquer ou enlever une liste numérotée</em> dans la barre de mise en forme (<a href="chap01.xhtml#Fig1.2">Fig1.2</a>) et pour créer une liste à puces, cliquez sur le bouton <em>Appliquer ou enlever une liste à puces</em>.</p> <p class="adv">Pour les listes contenant un élément et une description, utilisez les <em>listes de définition</em>.</p> <p>Après avoir cliqué sur l'un des boutons de listes, Nvu placera le curseur à côté du chiffre 1 ou d'une puce en fonction du bouton de liste sur lequel vous avez cliqué. Après avoir saisi le texte de l'élément de la liste en cours, appuyer sur la touche <kbd>Entrée</kbd> (<acronym title= "Carriage Return">CR</acronym>), créera un second élément de la liste avec le curseur à côté. Un nouvel élément de la liste sera créé chaque fois que vous appuierez sur la touche <kbd>Entrée</kbd>. Pour revenir au mode texte normal, appuyez sur la touche <kbd>Entrée</kbd> après avoir écrit le dernier élément de la liste, puis cliquez sur le bouton <em>Appliquer ou enlever une liste numérotée</em> ou <em>Appliquer ou enlever une liste à puces</em> (le bouton avec lequel vous avez commencé la liste). Ceci terminera le mode liste et vous ramera au mode texte normal.</p> <p>Notre <a href="#sampleText">échantillon de texte</a> montre un exemple de liste numérotée dans la section « Liste numérotée ». Pour ne voir que le résultat de la liste numérotée appliqué à notre échantillon de texte, cliquez <a href="sampleText-list.xhtml">ici</a>.</p> <h2 id="justifying_text">Justification de texte</h2> <p>Souvent lorque l'on écrit un article ou un texte semblable, nous voulons aligner le texte à droite ou à gauche, le centrer ou le justifier. Avec Nvu <em>la justification du texte</em> se fait facilement. Il est conseillé de justifier votre texte paragraphe par paragraphe plutôt qu'en sélectionnant tout le document. Car en sélectionnant tout le document, cela affecte aussi les blocs qui ne sont pas des paragraphes, par exemple les listes, les tables, etc.</p> <p>Pour justifier un paragraphe, sélectionnez le texte du paragraphe et cliquez sur le bouton qui répond à vos besoins. Il y a <em>4 boutons</em> pour chaque type de justification : aligner à gauche, centrer, aligner à droite et justifier. Vous trouverez ces boutons sur le côté droit de la liste des boutons de la <a href="chap01.xhtml#Fig1.2">barre d'outils de mise en forme</a>. À titre d'exemple, le premier paragraphe de l'<a href= "#sampleText">échantillon de texte</a> est <em>justifié</em>. Pour ne voir que le résultat de la justification du texte appliqué à l'échantillon de texte (le premier paragraphe justifié, le second aligné à droite), cliquez <a href= "sampleText-just.xhtml" target="_blank">ici</a>.</p> <p><strong>Note :</strong> Par défaut, tout texte que vous saisissez est <em>aligné à gauche</em>.</p> <h2 id="emphasizing_text">Mise en évidence de texte</h2> <p>Mettre en évidence du texte dans un paragraphe ou un article est l'une des deux façons de faire ressortir des mots ou des phrases. Nvu peut mettre en évidence du texte de deux manières. La première met <em>en évidence</em>(normale) le texte et la seconde met <strong>fortement en évidence</strong> le texte. Vous trouverez les boutons de mise en évidence dans la seconde rangée de la barre d'outils de mise en forme. La mise en évidence normale est représentée par un bouton avec un <em>point d'exclamation</em> alors que la mise en forte évidence est représentée par un bouton avec un <em>double point d'exclamation</em>.</p> <p class="adv">Trop de mise en évidence va à l'encontre du résultat espéré.</p> <p>Pour mettre en évidence ou en forte évidence un mot ou une phrase, sélectionnez le texte avec la souris et cliquez sur un des deux boutons de mise en évidence sur la barre de mise en forme. vous pouvez voir le résultat de la mise en évidence sur l'<a href= "#sampleText">échantillon de texte</a> où le premier mot de chaque phrase du premier paragraphe est mis en évidence et où la première phrase du second paragraphe est msie en forte évidence. Pour ne voir que les effets de la mise en évidence sur notre échantillon de texte, cliquez <a href="sampleText-em.xhtml" target="_blank">ici</a>.</p> <h2 id="sample_text">Échantillon de texte</h2> <p>Ci-dessous se trouve l'échantillon de texte. Le texte formaté à l'aide des règles étudiées dans ce chapitre apparaît en noir et en couleur.</p> <!-- Sample Text Starts --> <div id="sampleText" class="testText"> <h2 class="used">Échantillon de texte</h2> <p style="color: brown; text-align: justify;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit. <em>Nunc</em> ac massa non enim dictum vulputate. <em>Vestibulum</em> iaculis. <em>Maecenas</em> nisl magna, suscipit quis, vulputate nec, egestas vel, enim. <em>Ut</em> venenatis blandit elit. <em>Aliquam</em> erat volutpat. <em>Nam</em> eros. <em>Morbi</em> imperdiet, diam at lacinia luctus, diam lacus porttitor quam, a posuere nulla sem vel diam. <em>Suspendisse</em> quam felis, scelerisque vel, fringilla sit amet, commodo quis, orci. <em>Etiam</em> at eros. <em>Aenean</em> facilisis adipiscing libero. <em>Phasellus</em> malesuada sem ornare nulla. <span style= "font-family: courier, monospace;"><em>Sed</em> sit amet elit</span>.</p> <p class="used" style="background-color: #F2E6BE;"><strong>Aenean vel turpis</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi. Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. <span style="font-family: courier, monospace;">Quisque magna urna, auctor consectetuer, tristique sit amet, porta sit amet, dui</span>.</p> <h2 class="used">Statistiques</h2> Paragraphes 2<br /> Mots 168<br /> Octets 1149<br /> <h2 class="used">Une liste numérotée</h2> <p class="used">Ci-dessous se trouve une liste ordonnée c-à-d. une <span style= "background-color: #A5F1FC;">liste numérotée</span>. Les listes non ordonnées (à puces) peuvent être créées en suivant une procédure similaire à celle pour créer les listes numérotées en cliquant sur le bouton des listes à puces dans la barre de mise en forme.</p> <ol class="used"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Sed nec velit sit amet dui malesuada porttitor.</li> <li>Fusce auctor turpis ac dui ornare feugiat.</li> <li>Ut et elit ut ante mattis ullamcorper.</li> <li>Maecenas sed tortor at tellus pulvinar commodo.</li> </ol> <h2 class="used">Liens intéressants</h2> Nvu.com Mozilla.org Firefox Thunderbird NvuHelp Debian/GNU Linux<br /></div> <!-- Sample Text Ends --> <h2 id="next">Chapitre suivant</h2> <p>Dans le <a href="chap03.xhtml">prochain chapitre</a> nous étudierons la création des hyperliens. Les hyperliens (ou liens hypertexte) sont utilisés pour naviguer à l'intérieur d'un document ou vers d'autres documents. Les hyperliens peuvent être considérés comme des <em>pointeurs</em> d'un document Web vers un autre ou d'une position dans un document vers une autre position dans le même document. En créant des hyperliens, vous pouvez connecter des pages <em>dans</em> votre site Web ou des pages externes du <acronym title= "World Wide Web">WWW</acronym>.</p> <p id="chapFoot">©2004-2005 KDS Sahambi<br /> Traduction française : Cédric Corazza</p> </body> </html> --- NEW FILE: chap03.xhtml --- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ENTITY % brandDTD SYSTEM "chrome://global/locale/brand.dtd" > %brandDTD; ]> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nvu Tutorial</title> <link rel="stylesheet" type="text/css" href="nvututStyle.css" /> </head> <body> <div id="chapNo">Chapitre 3</div> <h1 id="chapTitle">Création d'hyperliens</h1> <p para="first">La fonctionnalité la plus importante d'un document <acronym title= "Hyper Text Markup Language">HTML</acronym> est la possibilité de le <em>lier</em> à d'autres documents ou d'autres parties du même document. Lier signifie que nous créons un <em>hyperlien</em>,qui, lorsque l'on clique dessus, affichera le document HTML (ou une partie de ce même document) vers lequel pointe le lien, dans la fenêtre du navigateur. Sans la fonctionnalité d'hyperlien, ce serait comme avoir un brochure publicitaire sans adresse ou numéro de téléphone où s'adresser pour obtenir plus de renseignements. Sans les liens, les utilisateurs seraient obligés de saisir (et de se rappeler) les <acronym title= "Uniform Resource Locator">URL</acronym> pour chaque page qu'ils veulent visiter sur le Web.</p> <p>Un lien a deux extrémités, appelées <em>ancres</em> et une <em>direction</em>. L'ancre de départ d'un lien est appelée ancre « source » qui pointe vers une ancre « destination ». L'ancre « destination » peut être n'importe quelle ressource du Web comme une image, un clip audio ou vidéo, un document HTML (à l'intérieur du même document ou externe) ou tout autre type de fichiers. Par exemple, le texte <tt>GNU</tt> à la fin de cette phrase est un lien (ancre « source ») qui pointe vers le site Web <tt>http://www.gnu.org/home.fr.html</tt> (ancre « destination »), <a href= "http://www.gnu.org/home.fr.html">GNU</a>.</p> <h2 id="creating_internal_links">Création de liens internes au document</h2> <p>Les liens internes sont des liens vers des ressources du document en cours d'édition. Les liens internes à un document facilite et accélère la navigation. Les liens internes sont très utiles dans les longs documents où il y a plusieurs sections. Une table des matières en début de document aide les utilisateurs à se rendre directement à la partie qui les intéresse.</p> <p>Pour créer un lien interne, vous devez d'abord définir l'ancre « destination ». Nous créerons l'ancre « destination » en tant qu'<em>ancre nommée</em>. Sélectionnez le texte qui sera la destination du lien et cliquez sur le bouton <strong>Ancre</strong> dans la barre de mise en forme. Ceci ouvrira la boîte de dialogue <em>Propriétés de l'ancre</em>. Si vous avez sélectionné le texte dont vous voulez faire une ancre, vous verrez ce texte dans la boîte de texte « Nom de l'ancre : ». Vous pouvez également le changer si vous voulez la renommer. L'illustration <a href= "#Fig3.1">Fig3.1</a> montre montre à quoi ressemblera boîte de dialogue « Propriétés de l'ancre ». Maintenant cliquez sur le bouton « <span class="button">OK</span> » pour marquer le texte sélectionné comme une ancre.</p> <p class="fig" id="Fig3.1"><img src="./images/namedAnchor.png" alt= "" />Fig3.1 Boîte de dialogue Propriétés de l'ancre</p> <p>La seule chose qu'il nous reste à faire est de créer le lien interne pour définir l'ancre « source ». Sélectionnez le texte que vous voulez transformer en lien (qui pointera sur l'ancre que nous venons de créer) et cliquez sur le bouton <span class="button">Lien</span> dans la barre de mise en forme. Ceci ouvrira la boîte de dialogue <em>Propriétés du lien</em>. Cliquez sur la flèche de la liste déroulante dans le cadre <em>Emplacement du lien</em> et sélectionnez l'ancre que nous venons de créer dans la liste des ancres. Cliquez sur le bouton <span class="button">OK</span> et eregistrez les changements. À titre d'exemple, si vous cliquez sur <a href="#chapNo">Début</a>, cela vous amènera au début de ce chapitre.</p> <h2 id="creating_external_links">Création de liens externes</h2> <p class="adv">Les couleurs des liens actifs ou visités ou lors du passage de la souris peuvent être changés en utilisant une CSS</p> <p>Les liens externes connectent votre document HTML à d'autres ressources du Web, par ex. un document HTML document (qui peut être sur votre site ou un site différent), une image, un clip vidéo, etc. Pour créer un lien externe, sélectionnez le texte que vous voulez transformer en lien avec la souris. Puis cliquez sur le bouton « <em>Lien</em> » dans la barre de mise en forme. Ceci ouvrira la boîte de dialogue « Propriétés du lien ». Vous pouvez y saisir l'adresse (URL) de l'ancre <em>destination</em> du lien ou cliquez sur <em>Parcourir…</em> pour atteindre le fichier que vous désirez lier puis cliquez sur le bouton <em>Ouvrir</em>. L'URL peut être relative (si le fichier se trouve sur votre site Web) ou absolue si vous faites un lien vers un document sur le Web. Cliquez sur le bouton <span class="button">OK</span> pour que les changements soient pris en compte et <em>enregistrez</em> le document.</p> <p>Les URL relatives pointent vers un document sur le même site Web en utilisant un chemin relatif. Un chemin relatif peut commencer par <span class="code">./</span> ou par <span class="code">../</span>. <span class="code">./</span> signifie <em>répertoire courant</em> alors que <span class="code">../</span> signifie <em>un répertoire au dessus</em> dans la hiérarchie des répertoires. Par exemple, un lien tel que <span class="code">href="../toto.pdf"</span> pointerait vers un document pdf ayant pour nom <span class= "code">toto.pdf</span> et se trouvant <em>un répertoire plus haut</em> que le répertoire du document en cours d'édition.</p> <p class="fig" id="Fig3.2"><img src="./images/linkProperties.png" alt="" />Fig3.2 Boîte de dialogue Propriétés du lien</p> <p><strong>Astuce :</strong> Utilisez des liens relatifs pour les images ou les autres fichiers se trouvant sur votre site Web. Cela permet un changement de nom du site Web plus facile, puisque la seule chose que vous aurez besoin de modifier sera le nom du site. Tous les liens relatifs continueront à fonctionner tant que la structure des répertoires reste inchangée.</p> <p>Les liens produits avec la procédure ci-dessus ressembleront à ceux présents dans notre <a href="#sampleText">échantillon de texte</a>. Si vous cliquez sur les liens dans la se... [truncated message content] |