Une fois KompoZer démarré, l'interface graphique de KompoZer montre une barre de menu (Fichier, Édition, Affichage, etc). Sous la barre de menu, vous retrouvez 3 barres. Pour vous assurer qu'elles sont toutes visibles, sélectionnez Affichage > Barre d'outils et voyez si chaque barre est cochée/sélectionnée: barre Principale, barre de Mise en forme , barre de Modes d'édition, barre d'état (aussi appelé barre de structure dans KompoZer), Règles, Gestionnaire de Sites.
Les 3 barres au haut de l'application possèdent des boutons de commande (représentés par des icônes). Laissez votre curseur de souris au-dessus de l'un d'eux pour découvrir leur fonction dans une info-bulle. Si l'un d'eux est désactivé (grisé), c'est qu'il ne peut être fonctionnel compte tenu du contexte.
Note. Tous les boutons ne sont pas initialement installés. La liste complète est donnée à la section 9.2.
Au bas de l'interface se trouve la barre d'état (aussi appelé la barre de structure).
!!Dans le centre de l'application se trouvent 2 panneaux: le Gestionnaire de Sites à gauche et un panneau de contenu servant à éditer une page Web à droite. Le Gestionnaire de Sites est un outil puissant dont on parlera dans la section 8. Puisqu'il n'est pas nécessaire pour le moment, vous pouvez le fermer en cliquant le bouton Fermer [x] ou en pressant F9.!!
Au haut du panneau d'édition de contenu se trouve la barre d'onglets de pages qui affiche les noms de page (“Sans titre”) (L'Aide KompoZer l'appelle barre d'onglets.) Au bas du panneau d'édition de contenu se trouve la ‘barre de Modes d'édition’qui comporte quatre (4) onglets qui sélectionne un (1) des quatre (4) ‘modes d'édition’ pour une page (‘Normal’, ‘Balises HTML’, ‘<HTML> Source’, ‘Aperçu’.)
Pour plus d'explications sur les modes d'édition, allez à la section 3.15
Note. La figure montre les boutons de commande tels qu'ils apparaissent lors d'un premier démarrage. Leur disposition peut être configuré de façon différente (voir la section 9). Si c'est le cas, alors il se peut que quelques explications soient plus difficiles à suivre. Pour restaurer la configuration par défaut, cliquez Affichage > Barre d'outils > Personnalisation des barres d'outils > Barre Principale > Configuration par défaut et de la même façon, répétez le tout pour la barre de Mise en forme.
Une nouvelle page peut être éditée soit en créant une page vierge ou en ouvrant une page déjà existante.
Note. Il existe plusieurs façons de faire que KompoZer exécute une tache précise. Ce guide va utiliser les boutons de la barre Principale quand cela s'avère possible. Pour les équivalents menu, allez à la section 9.2 ‘Éditer les Préférences - barres’.
Les pages Web utilisent le HTML. Il existe plusieurs variantes de ce language de base; certains détails qui les définissent sont disponibles dans l'Appendice 3. KompoZer est capable de créer et d'éditer 4 variantes de HTML; dans le cadre de ce Guide Utilisateur, pour vous simplifier la vie, nous vous recommandons d'utiliser la définition stricte de la variante HTML 4. Vous pouvez configurer KompoZer ainsi: Outils > Préférences... > Avancées... > Balisage et ici choisissez HTML 4 et stricte. Nous recommandons aussi de sélectionner Outils > Préférences > Général et de cocher la case "Utiliser
les styles CSS au lieu des éléments et attributs HTML"; cela va vous donner un maximum de fonctionnalité. Vous pouvez éditer des documents qui ont été initialement édités dans d'autres variantes et cocher la case "Utiliser les styles CSS au lieu des éléments et attributs HTML".
Note Si vous découvrez qu'un bouton ou un item de menu est désactivé (grisé), c'est possiblement dû au fait que la case "Utiliser les styles CSS au lieu des éléments et attributs HTML" n'a pas été cochée. Le bouton ou l'item de menu pourrait devenir activable si vous cochez la case "Utiliser les styles CSS au lieu des éléments et attributs HTML".
Il existe plusieurs façons de démarrer de nouvelles pages ou d'ouvrir des pages déjà existantes.
Pour démarrer une nouvelle page vierge.
Sur la barre de menu, cliquez Fichier > Nouveau.
Une fenêtre avec l'entête ‘Créer un nouveau document ou modèle’ apparaît. Sélectionnez ‘Un document vide’, cochez la case à cocher ‘DTD strict’ et décochez la case à cocher ‘créer un document XHTML’. (Sans la case cochée ‘DTD strict’, le document utiliserait alors la déclaration de type de document ‘Transitional’.)
Note La prochaine fois que vous voulez répétez cette action, cliquez simplement le bouton ‘Nouveau’ de la barre Principale et les choix précédemment faits seront mémorisés.
L'utilisation de modèles sera couvert dans la section 7.
Pour ouvrir une page Web déjà existante.
Vous pouvez soit
cliquer sur le bouton Ouvrir pour accéder à une boîte de dialogue.
cliquer Fichier > Pages récentes procure un accès rapide aux pages qui ont été chargés dans KompoZer récemment.
ou utiliser le Gestionnaire de Sites (Section 8) qui offre une mini-navigation puissante et qui est très facile à configurer.
La déclaration de type de document (NdT. doctype declaration) d'une page existante demeure la même que lorsque la page fut créée. La déclaration de type de document ne peut changer dans KompoZer.
(Dans un contexte de travail sur plusieurs documents chargés dans plusieurs onglets) Chaque page ouverte démarre dans un nouvel onglet distinct; on peut cliquer sur un onglet pour le rendre actif et ainsi choisir le document sur lequel on peut travailler (ou faire Ctrl+PgUp/Ctrl+PgDn).
Note Un petit triangle noir (▼) à l'intérieur du bouton déclenche une liste déroulante offrant plus de choix quant au démarrage d'une nouvelle page soit dans un nouvel onglet ou même dans une nouvelle fenêtre. Dans le cas d'une nouvelle fenêtre, cela résulterait en une nouvelle instance de KompoZer.
Le petit triangle noir (▼) à la droite du bouton offre ‘Plus d'options’. L'un d'eux est ‘Un nouveau document basé sur un modèle’. Un modèle est effectivement une page avec un nombre de détails pré-configurés, pré-établis. Cela peut être utile si plusieurs pages sont appelés à avoir une apparence similaire ou un contenu commun. Les modèles sont couverts dans la Section 7.
KompoZer supporte tous les raccourci-clavier standard de Windows pour les commandes d'édition. par ex. Copier Ctrl+C, Coller Ctrl+V, Sélectionner tout Ctrl+A, Annuler Ctrl+Z, Refaire Ctrl+Y. Trouver Ctrl+F, Nouveau Ctrl+N, Ouvrir Ctrl+O, Enregistrer Ctrl+S. Il en existe plusieurs autres, spécifiques à KompoZer. Ils sauvent du temps.
Note. Le symbole Ctrl+ représente la touche Control lorsque maintenu enfoncé en pressant une autre touche du clavier.
Dans le mode d'édition ‘Balises HTML’, KompoZer supporte le glisser et déposer (NdT. drag and drop) pour l'édition de blocs. (Sélectionnez un item en pressant la touche Ctrl et ensuite cliquez sur l'élément à glisser.)
Une façon rapide d'activer les boîtes de dialogues pour la configuration des éléments tels que liens, images et tableaux est de double-cliquer ces éléments dans la page.
KompoZer supporte plusieurs niveaux de Annuler et Refaire, néanmoins les changements apportés dans le mode d'édition ‘<HTML> Source’ ne peuvent être annulés une fois que vous changez de mode d'édition.
HTML est l'abréviation que signifie HyperText Markup Language ou, en Français, Langage de Balis(ag)e HyperTexte. Il est le language de publication du World Wide Web sur lequel KompoZer se base. Idéalement, il devrait être possible d'utiliser KompoZer sans une connaissance préalable de ce langage et certainement sans une connaissance en détail. Néanmoins, une connaissance de base est fortement recommandée. Ce tutoriel couvre un minimum de détail en même temps qu'il présente quelques fonctionnalités de KompoZer.
Cliquez sur l'onglet '<> Source'. Vous allez voir un nombre d'expressions à l'intérieur de signes angles ou comparateur mathématiques Inférieur à, Supérieur à <>. Ce sont là des ‘balises’ HTML. Tout ce qui commence depuis <body> et finissant avec </body> va apparaître sur votre page Web.
Note Dans la plupart des cas, les balises apparaissent en paire avec une – balise de départ et une balise de fin (ou quelquefois on dit balise de clôture) – Les balises de fin sont précédées d'une barre oblique ascendante "/" (NdT. forward slash).
Tout ce qui constitue la page n'est pour le moment qu'une seule et unique balise <br> qui est un retour à la line (NdT. line break) et qui est, bien sûr, invisible.
Plus tard, lorsque l'édition de la page progresse, plusieurs autres paires de balises s'ajoutent au code de la page. La plupart du temps, les paires de balises renferment les ‘éléments’ à partir desquels la page est constituée, est construite – éléments comme les Paragraphes, les Titres (aussi appelés Entêtes ou Intitulés), les Tableaux, les Images. Le nom des balises sont habituellement le même que le nom anglais des éléments ou leurs abréviations; par exemple, ‘table’ pour tableau, ‘img’ pour image, ‘p’ pour paragraphe, ‘br’ pour retour à la ligne (qui n'a pas de balise de fin).
Rien n'apparaît entre les balises <head> et </head> mais cette section peut néanmoins avoir plusieurs fonctions utiles. Par exemple, entre les balises <title> et </title>, il n'y a rien. Allez-y et tapez entre les balises title “Ma première page” ou quelquechose du genre. Cliquez sur l'onglet de mode d'édition ‘Normal’ et maintenant l'onglet sur la barre d'onglet affiche le titre de votre page Web. Bravo!
Si vous êtes trop gêné, rien n'est perdu. Il n'y a normalement aucune justification à s'aventurer dans le codage HTML proprement dit. Allez à Format > Titre et propriétés de la page.... Ici, vous pouvez entrer les différents paramètres incluant le titre et la langue dans laquelle vous écrivez. Ces informations vont être entrées dans la section <head> pour vous. Dans certaines circonstances, celles-ci peuvent être importantes; le titre et la description, par exemple, sont souvent utiliser par les engins de recherche qui indexent votre page.
Revenons à la vue 'Source'. Remarquez que la première balise est <html> et le dernier </html>. Toutes les pages Web doivent avoir ces balises à de telles positions dans le document. Actuellement, la casse (MAJUSCULE versus minuscule) n'importe pas vraiment mais il est généralement admis et préférable d'utiliser les minuscules pour l'écriture des balises.
La première ligne, en couleur différente, spécifie la déclaration ‘Doctype’. Ceci est la référence au type de document HTML. KompoZer choisit la déclaration de type de document (NdT. doctype declaration) selon les options sélectionnées lors de la création de la page.
Finalement, donnez à votre document un nom de fichier et enregistrez-le.
KompoZer aime que les fichiers aient des titres. Si vous essayez d'enregistrer un fichier qui n'a jusqu'à maintenant pas de titre, une boîte de dialogue apparaît et vous demande de fournir un titre. Cliquez le bouton ‘Enregistrer’ . La boîte de dialogue ‘Titre de Page’ apparaît. Donnez à votre page un titre descriptif, significatif et cliquez OK. Maintenant, vous entrez dans une boîte de dialogue pour parcourir votre disque local ou votre système.
Une boîte de dialogue ‘Enregistrer la page sous’ vous offre de naviguer jusqu'au répertoire que vous pouvez choisir sur votre système. Vous allez trouver le nom de fichier déjà pré-sélectionné avec le titre de votre page. Vous allez tout probablement vouloir choisir un nom de fichier plus court, tout en minuscule mais vous n'y êtes pas obligé. Vous allez découvrir que le type de fichier est déjà sélectionné en tant que ‘html’; vous pouvez préférer “htm” et vous pouvez le changer à “htm” si vous le désirez.
Après avoir édité un fichier, vous devez le re-enregistrer périodiquement. Cliquez le bouton ‘Enregistrer’.
Il n'y a rien de mystérieux avec les fichiers. Un curieux peut ouvrir le fichier en utilisant un éditeur texte, comme par exemple, Notepad de Windows. Ce qu'il va voir est comme le code HTML source qu'il verrait dans le mode d'édition ‘Code Source HTML’. Ceci prouve que le fichier source n'est qu'un simple fichier en format texte.
Le texte tapé directement dans une page KompoZer apparaît dans le format pour l'élément ‘body’. HTML définit un petit nombre d'éléments spécifiques pour le texte et il est habituellement préférable d'utiliser ceux-ci.
Pour formater du texte dans un format standard pour un texte, sélectionnez le texte à être modifié (il est actuellement nécessaire de cliquer à quelque part dans le bloc de texte) et cliquez sur la première liste déroulante dans la barre de Mise en forme. Ceci offre une liste de format de texte standard. Paragraphe est le plus approprié pour le texte en général.
Une fois formaté en tant que paragraphe, quand vous entrerez du texte dans un endroit de la page, utilisez la touche ‘Entrée’ pour commencer un nouveau bloc de texte i.e. un paragraphe. Pour commencer un nouvelle ligne dans le paragraphe courant, faites la combinaison Maj+Entrée; cette combinaison ajoute un retour à la ligne.
Les autres formats standards sont les formats de titre (d'entête) de 1 (1 étant le format le plus grand) à 6 (6 étant le plus petit). Les navigateurs rendent généralement les titres (entêtes) en caractères gras.
Le texte peut être édité dans n'importe quel mode d'édition et KompoZer répondra à tous les raccourci-clavier standard Windows.
Astuce: Le contour de chaque bloc de texte peut être activé en sélectionnant Affichage > Mise en évidence des blocs. Les dimensions de chaque bloc en pixels sont affichées sur les règles au haut et à la gauche du panneau d'édition de contenu.
Les éléments décrits jusqu'à présent (paragraphes, titres) sont des éléments de type bloc.
Les éléments de type bloc commence habituellement une nouvelle ligne
Les éléments de type bloc ont un espacement au-dessus et en-dessous d'eux et cet espacement est déterminé par les marges (voir la section 4.2.1.4)
Les marges verticales fusionnent i.e. la plus grande marge est appliquée, la plus petite est ignorée
A l'intérieur d'éléments de type bloc, il est possible de sélectionner (en vidéo inversé) des éléments de type en-ligne.
Les élément de type en-ligne ne commencent habituellement pas une nouvelle ligne.
Astuce: Le texte à être formaté peut être sélectionné de plus d'une façon.
Simplement placez le curseur quelquepart dans un bloc. Quand le formatage désiré peut seulement n'être qu'appliqué à tout un bloc, cela suffit.
Double-cliquez dans un bloc pour sélectionner un mot.
Triple-cliquez dans un bloc pour sélectionner toute une ligne de texte.
Traînez à travers une section de texte pour surligner (mettre en vidéo inversé) et sélectionner cette section seulement.
Dans le mode d'édition 'Balises HTML', enfoncez la touche Ctrl tout en cliquant l'icône jaune de l'élément pour le sélectionner complètement.
En utilisant la barre d'état (aussi appelé la barre de structure). Voir la section 3.17
Le texte peut être formaté de diverses façons. On peut utiliser la barre de Mise en forme. D'abord, il faut sélectionner le texte à formater, soit en cliquant à l'intérieur du texte, soit en traînant le curseur qui sélectionne une portion précise de texte en vidéo inversé. Les changements listés dans le tableau peuvent être appliqués. Placez votre curseur au-dessus des boutons de la barre de Mise en forme pour voir un info-bulle décrivant leur fonction.
* Choisir une police de caractères
* Choisir la couleur de texte
Choisir la couleur de fond
* Choisir une couleur de surlignage
* Rapetisser le texte
* Agrandir le texte
* Mettre en caractères gras
* Italiciser
* Souligner
Formater comme une liste numérotée
Formater comme une liste à puces (aussi appelée liste non-ordonnée)
Aligner à gauche
Aligner au centre
Aligner à droite
Justifier
Indenter le texte
Désindenter le texte
* Mettre en évidence
* Mettre fortement en évidence
Note 1 Pour les commandes précédées d'un astérisque, on doit sélectionner un texte plutôt que de simplement cliquer à l'intérieur de l'élément (comme un paragraphe); ceci signifie que vous pouvez avoir quelques mots dans un paragraphe avec une taille différente ou avec un quelconque formatage spécifique. (Quand vous accomplissez cela, vous insérez un élément ‘Span’ pour marquer, pour identifier ce bout de texte.)
Note 2 'Choisir la couleur de fond' définit une couleur pour l'arrière-plan du bloc courant. Si la case à cocher 'Utiliser les styles CSS plutôt que les éléments et attributs HTML' n'est pas cochée, alors la couleur d'arrière-plan de toute la page est changée.
Note 3 Le bouton Mettre en évidence va italiciser le texte dans la plupart des navigateurs graphiques et le bouton Mettre fortement en évidence va mettre en caractères gras.
Attention Avec KompoZer 0.7.10 quand vous utilisez le DTD strict, assurez-vous de cocher la case 'Utiliser les styles CSS plutôt que les éléments et attributs HTML' dans Outils > Préférences... > Général pour vous assurer la disponibilité de toutes les options.
Règle générale, la position d'un texte est déterminée par le fait que les blocs se suivent l'un après l'autre, dans l'ordre normal de l'édition du document.
L'espacement entre les éléments de bloc est contrôlé par votre navigateur. L'espacement est contrôlable en spécifiant les marges dans les données d'une feuille de style (voir la section 4.2.1.4).
Les paragraphes et les blocs d'entête s'étendent d'un côté du panneau d'édition de contenu à l'autre côté du panneau d'édition de contenu. C'est une façon élégante de fonctionner. Essayer de redimensionner la fenêtre de KompoZer. Le redimensionnement de la fenêtre entraîne le redimensionnement du flux du texte sur chaque ligne dans le panneau d'édition de contenu. Il est un fait fondamental que le Web a été conçu pour la transmission de l'information et non de sa présentation. Les outils de conception de pages web nous permettent de raffiner cette présentation mais, si nous la sur-contraignons, nous pouvons rencontrer des problèmes d'affichage sur l'écran. Nous devrions allouer au navigateur le plus de liberté et de flexibilité que possible.
KompoZer permet de contraindre la largeur d'un paragraphe. (Même chose pour les blocs de titres, d'entête.) Essayer ceci. Redimensionnez la largeur de la fenêtre pour qu'elle soit plus étroite que la largeur maximale de l'écran i.e. pour que cette fenêtre puisse devenir plus étroite ou plus large.
Prenez 2 longs mais semblables paragraphes qui remplissent approximativement la moitié de la largeur du panneau d'édition du contenu. Cliquez dans le premier: vous verrez les règles à la fois au haut et à gauche. Prenez l'extrémité gauche de la règle et ramenez-la à mi-chemin du panneau. Faites la même chose pour l'autre paragraphe mais prenez l'extrémité droite de la règle et ramenez-la à mi-chemin du panneau dans la direction opposée.
Vous pensez peut-être que vous avez réussi une disposition élégante et découvert un outil flexible. Redimensionnez la fenêtre pour être plus large. Pensez-vous toujours que c'est le cas? Ce que vous avez réussi c'est de rendre le texte pour être dans une position fixe, rigide et avec une largeur fixe. Le texte ne re-glisse, ne re-flotte (NdT. re-flow) plus. Gardez à l'esprit que vos visiteurs vont visualiser vos pages avec de très petits ou de très larges écrans. Vont-ils tous voir ce que vous voulez qu'ils voient?
Supposons que vous n'aimiez pas ce que vous venez tout juste de faire – vous pouvez simplement annuler vos dernières commandes – Édition > Annuler ou Ctrl+Z. Néanmoins si vous laissez une commande, par la suite vous devrez d'abord annuler les autres commandes qui ont succédés avant d'"atteindre" cette commande. Vous pouvez formater ou reformater un paragraphe directement et spécifiquement. En faisant ainsi, vous avez un plus grand contrôle que si vous utilisiez seulement la règle. Choisissez le mode d'édition 'Balises HTML', cliquez sur le marqueur jaune 'p' pour paragraphe, sur la barre d'état (aussi appelé sous KompoZer barre de structure), faites un clique droit de la souris sur le <p> surligné (NdT. highlighted) et
sélectionnez ‘Style internes’. Maintenant, sélectionnez ‘Propriétés de la boîte’. Ceci vous permet un édition précise du paragraphe à l'intérieur de la fenêtre flottante modale et selon les propriétés qui y sont listées. Si vous dégagez toutes les valeurs et que vous cliquez “OK’, vous allez revenir à un paragraphe par défaut. Alternativement, vous pouvez tout aussi bien augmenter les informations de formatage de la boîte et configurer les données de stylisation de la boîte.
KompoZer peut formater une liste d'items en donnant à chaque item un numéro séquentiel dans plusieurs formats. Dans le code HTML, on l'appelle liste ordonnée (Ordered List - <ol>) ou en les présentant sous forme de puces (Unordered List - <ul>).
Pour faire une liste
Cliquez un des boutons de liste (liste numérotée ou liste à puces) sur la barre de Mise en forme.
Écrivez le premier item de cette liste.
Appuyez sur Entrez et tapez l'item suivant.
Pour terminer, au dernier item (vide), appuyez sur Entrée
Pour changer un texte existant en une liste
Sélectionnez le texte à convertir en liste
Cliquez un des boutons de listes sur la barre de Mise en forme
Le texte va être changé en liste où chaque paragraphe (ou autre bloc rencontré) devient un nouvel item
Pour ajouter des items à une liste
Cliquez à la fin du dernier item d'une liste.
Appuyez sur Entrée et tapez un nouvel item.
La numérotation et le format vont être préservés selon l'item précédent.
Pour changer le formatage d'une liste, cliquez dans une liste et, sur la barre de menu, sélectionnez Format > Liste et choisissez l'option souhaitée. Plus de possibilités sont disponibles via les propriétés de listes (qui sont accessibles avec un clique droit dans la liste).
Pour les listes numérotées , le style de numérotation peut être sélectionné.
Pour les listes à puces , le type de puce peut être modifié.
Vous pouvez altérer l'indentation d'une liste en utilisant les boutons ‘Augmenter le retrait (vers la droite)’ ou ‘Diminuer le retrait (vers la gauche)’ sur la barre de Mise en forme.
Pour commencer un autre niveau dans une liste existante
Cliquez à la fin d'une ligne d'un item
Appuyez sur Maj+Enter
Cliquez sur le bouton de liste sur la barre de Mise en forme.
Tapez le contenu de chaque item de la liste et terminez avec Entrée.
Chaque niveau de liste dans un ensemble imbriqué peut avoir son propre format qui peut être défini de la façon décrite précédemment. KompoZer ne définit aucun format par défaut. Les navigateurs rendent normalement par défaut les listes numérotées avec des nombres décimaux mais chaque niveau d'une liste à puces peut utiliser un symbole de puce différent.
Le menu Format sur la barre de menu offre plusieurs façons de formater le texte. Dans quelques cas, vous pouvez simplement cliquer à l'intérieur du texte; dans d'autres cas, vous devez sélectionner en vidéo inversé la portion de texte que vous voulez formater. Quelques effets vont répéter plusieurs fois la commande alors que d'autres vont inverser la commande.
Les options offertes incluent l'indentation de texte. Ceux qui ne sont pas familier avec la conception de pages Web essayeront en vain la touche de clavier tab (ou tabulation). HTML ne rend pas l'effet d'indentation dû à la touche de tabulation. KompoZer remplace l'effet de la touche Tab par des plusieurs espaces blancs – bien sûr ces espaces blancs ne produisent pas l'effet d'un décalage véritable qu'une touche Tab ferait. Les espaces introduits par la touche Tab sont appelés espaces blancs insécables (NdT. non-breaking spaces). Activer la barre d'espacement plusieurs fois insère plusieurs espaces blancs insécables.
Strictement parlant, KompoZer ne permet pas d'importer des fichiers provenant d'autres applications, sauf en format texte brut (NdT. plain text). Il est possible de copier et coller du texte provenant d'éditeurs de texte comme Microsoft Word ou OpenOffice.org ou Bloc-notes de Windows.
Quant le texte est collé dans KompoZer, la plupart de l'information de formatage est perdu mais l'information des blocs (paragraphes ou blocs d'entête) est conservée. Le texte est collé dans l'élément sélectionné par ex. body ou ‘p’. Si plusieurs paragraphes sont collés dans un élément ‘p’, alors ils sont rendus en tant que paragraphes individuels. S'ils sont collés dans le body, vous pouvez les sélectionner et les reformater en tant que paragraphes <p> et ainsi ces paragraphes individuels seront restitués.
Les listes numérotées sont conservées.
Les caractères tabulations sont convertis en 3 espaces blancs insécables.
Le contenu de tableaux peut être collé; les cellules individuelles vont être séparées comme s'ils étaient séparées par des espaces de tabulations.
En parlant de caractères spéciaux, nous voulons faire référence aux caractères qui n'ont pas leurs équivalents sur le clavier. HTML supporte un large éventail (plage) de caractères incluant tous les symboles de devises internationales. Un nombre de caractères fréquemment rencontrés, incluant ceux qui sont accentués dans diverses langues, peuvent être insérés en utilisant Insérer > Caractères et Symboles.
KompoZer ne supporte pas directement les caractères guillemet simple gauche et guillemet simple droit (NdT. ‘smart quotes’) mais le texte copié provenant d'applications comme Microsoft Word ou OpenOffice.org peut inclure les caractères guillemet simple gauche et guillemet simple droit et vont être correctement rendus par les navigateurs Web.
Si vous nécessité un caractère qui n'est pas disponible par ces méthodes, il peut être inséré en éditant le fichier dans le mode d'édition Source. Voir la section 3.16. Les caractères peuvent être insérés soit en utilisant le code décimal du caractère soit en utilisant la forme nommée (plus mnémonique) de l'entité. Précédez le code décimal avec &# et l'entité avec & et terminez avec un point-virgule (;). N'insérez aucun espace blanc. La spécification du HTML 4.01 dans la section 24 enumère tous les codes.
Quelques exemples sont montrés dans le tableau à droite.
Simplicité en soi! Dans tous les modes d'édition autre que ‘Source’, cliquez sur le bouton ‘Orthographe’ . Le vérificateur orthographique va travailler séquentiellement à travers la page. KompoZer a un dictionnaire anglais (États-Unis) par défaut mais vous pouvez y ajouter vos propres mots.
Vous pouvez installer une version française du dictionaire comme ceci. Avec votre navigateur,
Faites un clique droit sur le lien French (France) ou sur le lien Dict fr-FR.
Sous Firefox (ou Mozilla Seamonkey), choisissez "Enregistrer la cible du lien sous...". Sous MSIE 6, choisissez "Enregistrer la cible sous...".
Une boîte de dialogue apparaît vous demandant le chemin du répertoire où vous voulez téléchargez le fichier
Une fois le fichier spell-fr-FR.xpi téléchargé ou dict-fr_FR.xpi téléchargé, démarrez KompoZer et faites Fichier/Ouvrir un fichier ... Ctrl+O et parcourez jusqu'au fichier spell-fr-FR.xpi ou dict-fr_FR.xpi puis sélectionnez-le. Si vous ne le trouvez pas, assurez-vous que vous avez le sélecteur "Fichier de type:" à l'option "Tous les fichiers".
Une boîte nommée Installation d'un logiciel va apparaître. Cliquez le bouton "Installer maintenant".
Une fois l'installation terminée, il se peut que l'icône d'activité de l'onglet reste actif continuellement; il s'agit d'un bogue. Fermez l'onglet. Redémarrez KompoZer si c'est nécessaire.
Si vous sélectionnez (en vidéo inversé) une section de votre page, alors seulement cette section sera controlée par le vérificateur orthographique.
Il est possible de faire fonctionner le vérificateur orthographique en tout temps. Tout mot mal orthographié est souligné en rouge. Pour définir cette option dans la barre de menu, sélectionnez Outils > Préférences > Avancées et cochez la case ‘Souligner les mots mal orthographiés’ – OK.
Attention Avec KompoZer 0.7.10, cette configuration doit être faite après que la page a été ouverte. Autrement, annulez et recommencez.
Note Le vérificateur orthographique utilise beaucoup les ressources systèmes (CPU). Lorsque vous travaillez sur de longs documents, si votre système est trop accaparé ou ralenti, alors il vaut mieux désactiver le vérificateur orthographique.
Le panneau d'édition de contenu agit/affiche comme un navigateur Web; il peut modifier la taille d'affichage du texte sans pour autant modifier le code de la page lui-même. Vous pouvez configurer cet affichage en utilisant Affichage > Taille du texte. Cette fonctionnalité n'a aucun effet dans le Mode d'édition Source HTML.
Vous devrez utiliser une application pour les images (comme le logiciel libre et gratuit GIMP 2.10.34 ou supérieur en Français téléchargeable de http://www.clubic.com/telecharger-fiche10178-the-gimp.html ou de http://www.gimpfr.org/news.php) pour convertir votre image en un de ces 3 formats convenables. Pour le Web, le meilleur format pour la compression d'image et pour la qualité graphique d'image est le format PNG; le format GIF est bon aussi. JPG est le moins bon (rapport compression du fichier versus qualité graphique) des trois ci-haut mentionnés. Vous pouvez insérer une image située n'importe où sur votre ordinateur mais, pour les nécessités de gestion d'un projet de développement d'un site web, il est fortement recommandé de placer toutes les images dont vous avez l'intention d'utiliser dans votre site web dans un seul et même répertoire.
Attention Avant d'insérer une image, enregistrez votre page Web. Sinon, KompoZer ne saura pas comment référencer votre image et où se trouve votre image.
Comme exercice, placez votre curseur dans le milieu d'un paragraphe, disons, au début d'un énoncé.
Pour insérer une image
Cliquez le bouton 'Image' dans la barre Principale.
La fenêtre Propriétés Image s'ouvre. Cliquez 'Choisir Fichier', naviguez et sélectionnez un fichier
Cliquez ‘Ouvrir’. Cochez la case à cocher ‘L'URL est relative à l'emplacement de la page ’; cela va vous permettre de déplacer la page et l'image à un autre endroit sur votre ordinateur. (Si vous décochez cette case à cocher et déplacez la page, KompoZer va tenter de trouver l'image à l'endroit original sur votre ordinateur selon un chemin absolu.) Note Si la case à cocher ‘L'URL est relative à l'emplacement de la page ’ est grisée, est désactivée, c'est tout probablement parce que le fichier n'a pas encore été sauvegardé.
Dans la case à cocher ‘Texte alternatif’, ajoutez une description textuelle de l'image. (Ceci formate l'attribut ‘alt’ de l'élément img (pour image) et fournit un texte alternatif qui va apparaître à la place de l'image pour les agents utilisateurs (navigateurs, lecteurs d'écran, synthétiseurs de voix, etc.) qui ne peuvent rendre les images. Cet attribut va être utilisé par les utilisateurs avec un handicap visuel. Le contenu de ce champ texte doit être soigneusement considéré pour qu'il soit d'un maximum d'assistance en de telles circonstances.) Note Quand une image est purement décorative et pas nécessaire à la compréhension ou utilisation de la page, le texte alternatif n'est pas requis et devrait être omis.
Dans la boîte de texte ‘Vignette’, vous pouvez optionnellement insérer un texte pour l'image. La très grande majorité des navigateurs vont rendre ce texte dans un info-bulle quand le curseur plane au-dessus de l'image.
Vous devriez voir l'image insérée dans le milieu du paragraphe. Peut-être l'image s'affiche dans une dimension incorrecte ou inappropriée. Cliquez sur l'image. Une boîte de redimensionnement avec 8 poignées graphiques (8 petits carrés blancs) apparaît tout autour de l'image.
Saisissez une poignée graphique pour altérer la dimension de l'image. Donnez-lui une dimension sensée. Traînez/Draguez une poignée graphique au centre d'un côté va altérer la forme de l'image qui est habituellement indésirable.
Un plus grand contrôle peut être accompli via la boîte 'Propriétés de l'image' décrite après la note. Sélectionnez l'onglet ‘Dimensions’.
Note Idéalement, les images devraient être produites à la taille requise plutôt que d'avoir à les afficher dans des dimensions différentes. Importer de larges images et en réduire ensuite leurs dimensions gaspillent la bande passante et ralentit le téléchargement et la présentation. Redimensionner par petites quantités peut introduire des artéfacts indésirables.
Les images dans le milieu de paragraphes ne sont habituellement pas voulues. Vous pouvez les placer soit à la droite ou à la gauche et en ayant le texte qui s'écoule sur son flanc (NdT. wrap round).
Pour aligner une image (méthode pour les documents utilisant le DTD transitional)
Cliquez sur l'image
Cliquez le bouton Image dans la barre Principale; cela va ouvrir la boîte ‘Propriétés de l'image’.
Sélectionnez l'onglet ‘Apparence’
Dans le menu déroulant ‘Placement du texte’, sélectionnez l'alignement désiré.
Cliquez OK
Essayez les diverses options. Le texte à partir du point où l'image est insérée va s'écouler (NdT. wrap around) autour de l'image.
Vous pouvez préférer que le paragraphe au complet se mette à la ligne (NdT. to wrap). Enfoncez le bouton gauche de votre souris sur l'image et glisser/traîner (NdT. drag) le curseur au début du paragraphe ou ailleurs. Déplacer les images est facile!
Vous pouvez trouver que la première des 2 options est source de confusion. Ces options réfèrent à la position du texte relative à l'image et NON l'image relative au texte. En particulier, vous ne trouverez pas une façon de placer une image au milieu d'une page avec le texte qui s'écoule tout autour.
Note Ce type de présentation, assez commune dans les imprimés, est quasiment impossible à réaliser en HTML même avec l'usage du CSS.
Vous pouvez décider que l'image est trop proche du texte et que vous voudriez davantage d'espacement autour de l'image. A nouveau, la boîte ‘Propriétés de l'Image’ vous permet d'agir. Dans l'onglet ‘Apparence’, définissez ‘Espacement’ A haut et en bas et/ou A gauche et à droite comme souhaité. Vous pouvez aussi définir l'épaisseur de bordure entourant une image. La bordure va être de même couleur que celle du texte adjacent.
Pour aligner une image (méthode pour les documents utilisant le DTD strict)
Cliquez sur l'image
Cliquez le bouton Image dans la barre Principale; cela va ouvrir la boîte Propriétés de l'image.
Cliquez le bouton ‘Édition avancée...’ et l'onglet ‘Style interne’
Dans les champs ‘Propriété’ et ‘Valeur’ en bas, vous pouvez entrer les propriétés CSS requises pour l'alignement.
Cliquez OK et OK encore pour fermer la boîte ‘Propriétés de l'image’
Pour définir l'alignement dans la boîte de propriétés, la propriété doit être ‘float’. Les valeurs possibles sont ‘right’ et ‘left’.
Une autre façon d'aligner une image est d'appliquer un style telle qu'expliquée dans les sections 4.2.1.4 et 4.2.3.
Les tableaux permettent aux données – images, liens, champs de formulaires, zone de texte, boutons radio, etc. – d'être disposées en rangées et colonnes dans des cellules.
Un tableau est fondamentalement une grille rectangulaire formée de cellules dans lesquelles les données sont placées. Cette grille peut être visible ou invisible et les lignes de cette grille, qui sont appelées ‘bordures’ (NdT. rules) peuvent être de n'importe quelle couleur. Les boîtes internes qu'elles forment sont appelées ‘cellules’ et peuvent aussi avoir leur propre couleur. La disposition de la grille n'a pas à être régulière – la première rangée peut ne contenir qu'une seule cellule, la deuxième quatre cellules, la troisième en contenir 2, etc.; néanmoins, au moment de la création, la grille est toujours régulière.
Le W3C recommande
“Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition de la page plutôt que des tableaux.”
(HTML 4.01 Specification, Section 11.1 (traduction française))
Dans la barre Principale, cliquez le bouton tableau . La boîte de dialogue “Insérer un tableau” va apparaître.
Dans l'onglet ‘Rapidement’, glisser/traîner le curseur dans la matrice et relƒchez le bouton gauche de la souris dans la cellule droite en bas pour définir les dimensions du tableau.
Les cellules apparaissent dans le panneau d'Édition de contenu avec de minces barres de contour.
Note Si plus tard, la bordure de tableau est remise à zéro, ces bordures vont disparaître mais, dans le Mode d'édition ‘Normal’, KompoZer représente les cellules avec un quadrillé de petits points rouge. Ce quadrillage de petits points rouge n'apparaît pas dans le Mode d'édition Aperçu ou lorsqu'on examine dans la fenêtre du navigateur.
Les tableaux ont des poignées graphiques similaires à celles utilisées pour les images. (Tout comme les images, la boîte de redimensionnement peut être décalée, excentrée de sa position correcte.)
Alternativement, pour davantage de contrôle
Dans la barre Principale, cliquez le bouton Tableau. La boîte de dialogue “Insérer un tableau” apparaît.
Cliquez sur l'onglet ‘Précisément’.
Spécifiez le nombre de rangées et colonnes désirées.
Spécifiez la largeur du tableau soit en pixels ou en tant que pourcentage de la taille de la fenêtre.
Si une bordure est requise autour du tableau, entrez sa largeur en pixels, sinon entrez ‘0’. Si la bordure est spécifiée, alors chaque cellule aura aussi une bordure mais de largeur mince.
Note Les feuilles de style offre un contrôle complet des bordures. Voir la section 4.2.1.3.
Pour davantage d'options
Selon que vous avez créé le tableau avec l'onglet ‘Rapidement’ ou l'onglet ‘Précisément’, l'onglet ‘Cellule’ offre davantage d'options.
Alignement du texte dans les cellules
Retour automatique à la ligne
Espacement entre les cellules
Marge (espacement) dans les cellules ou remplissage entre le contenu de la cellule et sa bordure
Les tableaux créés en utilisant l'onglet ‘Rapidement’ vont utiliser 100% de la largeur disponible de l'élément <body>. Notez que l'élément body a par défault des marges de 8px dans KompoZer. Les navigateurs ont des valeurs de marge par défaut qui varient d'un navigateur à l'autre. Il est utile de noter que Internet Explorer a des marges verticales de 15 pixels par défaut (15 pixels pour la marge en haut et 15 pixels pour la marge en bas) et des marges horizontales de 10 pixels par défaut (10 pixels pour la marge gauche et 10 pixels pour la marge droite) pour l'élément body.
Note Quelquefois, KompoZer crée des tableaux à des largeurs différentes qui peuvent par la suite être modifiées tel que décrit ci-dessous.
Les tableaux à pleine largeur utilise l'espace maximal disponible pour le tableau. La largeur s'accommode de l'écran ou de la taille de la fenêtrela largeur disponible du bloc conteneur (qui est très souvent l'élément <body>).
Il est possible d'établir la largeur à un plus petit pourcentage de la taille de l'élément <body> ou à une taille fixe en pixels. Les tableaux à taille fixe sont inflexibles en pratique et peuvent amener l'utilisateur à avoir à utiliser la barre de défilement horizontal pour accéder au contenu; donc les tableaux à taille fixe sont à utiliser avec précaution. Il est aussi possible de laisser la largeur non-spécifiée. Ceci produit souvent le meilleur résultat puisque les navigateurs définissent la largeur à sa valeur idéale.
Pour ajuster la taille d'un tableau, avec le curseur dans le tableau, cliquez le bouton tableau (ou double-cliquez le tableau). Dans la boîte de dialogue Propriétés du tableau, sélectionnez l'onglet ‘Tableau’. La largeur peut être définie en tant que pourcentage de la largeur de la fenêtre ou de façon fixe, en pixels.
Il est possible d'ajuster la taille d'un tableau en utilisant les poignées graphiques. Quand vous faites cela, la taille est spécifiée en pixels.
Faites un clique droit dans le tableau ou dans une cellule et plusieurs options dans un menu vous offre de formater le tableau ou une cellule comme désiré. Plusieurs de ces options sont contextuelles.
‘Couleur de fond du tableau ou d'une cellule’ vous permet de définir la couleur du tableau au complet ou de n'importe quelle cellule.
‘Insérer un tableau’ vous offre les moyens d'ajouter des rangées, colonnes ou des cellules individuelles.
‘Effacer un tableau’ vous offre l'opposé.
Une cellule peut être jointe à une cellule à sa droite, donc en fusionnant deux cellules. Les cellules uniques ne peuvent être scindées mais les cellules jointes le peuvent.
Si des cellules adjacentes (à l'intérieur d'une même rangée ou d'une même colonne) sont sélectionnées, elles peuvent être fusionnées ensemble.
Chaque cellule, lorsque cliquée, révèle un ensemble de six symboles de manipulation (4 flèches formée par un triangle: et 2 cercles avec un "x" à l'intérieur ); ceux-ci procurent
une méthode rapide pour insérer ou pour supprimer des lignes ou colonnes de cellules, tel que le montre cette figure.
Définir la couleur de fond de cellules adjacentes à une couleur foncée révèle l'espacement entre les cellules.
Ceci peut être utile si les cellules ont à être rempli avec du texte puisque cela évite que 2 items de texte se touchent l'un et l'autre.
A d'autres moments, cela peut représenter un problème. L'espacement est contrôlé par l'attribut ‘cellspacing’ responsable de l'espacement entre cellules.
"Cette propriété spécifie l'image d'arrière-plan d'un élément. En même temps qu'une image, les auteurs devraient aussi spécifier une couleur d'arrière-plan, cette couleur étant employée en remplacement d'une image indisponible. Celle-ci, une fois disponible, vient se superposer sur le fond coloré. La couleur du fond étant ainsi visible au travers des zones transparentes de l'image."
L'image apparaît derrière le contenu du tableau. Si l'image est plus large que le tableau, alors le tableau n'en est pas affecté i.e. le tableau ne s'agrandit pas pour accommoder l'image d'arrière-plan, seule la portion nécessaire de l'image convenant aux dimensions du tableau est rendue. Si l'image est plus petite que le tableau, alors plusieurs options sont offertes par ex. l'image peut être centrée ou être répétée horizontalement ou verticalement ou dans les deux directions à la fois jusqu'à ce qu'elle remplit le tableau.
Appliquer une image d'arrière-plan
Dans le Mode d'édition 'Balises HTML', cliquez dans le tableau.
Sur la barre d'état (ou aussi appelé barre de structure dans KompoZer), cliquez sur l'élément de votre choix (table ou td).
Sélectionnez ‘Style internes’, puis ‘Propriétés du fond’.
Vous pouvez alors sélectionner la répétition et/ou la propriété de position tels que souhaitées.
Note Les images d'arrière-plan sont visibles dans le Mode d'édition Normal ou Aperçu mais pas dans le Mode d'édition Balises HTML.
Faites un clique droit, sélectionnez 'Propriétés Cellule' et la boîte de dialogue ‘Propriétés du tableau’ apparaît. En sélectionnant l'onglet 'Table', l'espacement est révélé et est par défaut 2 pixels entre les cellules. Si l'espacement est défini à zéro, les espaces entre les cellules disparaissent.
Note La boîte de dialogue ‘Propriétés du tableau’ peut aussi être accédée en cliquant quelque part à l'intérieur du tableau et puis en cliquant le bouton ‘Tableau’ dans la barre Principale.
Notez que la bordure de tableau par défaut est 1 pixel. Cette bordure apparaît autour du tableau, aussi autour de chaque cellule et rend le contour du tableau visible. Si la bordure est défini à zéro, elle disparaît. KompoZer, en Mode d'édition Normal, replace judicieusement les bordures de cellules avec de minces bordures rouge en guise de repères visuels; ces minces bordures rouge disparaissent dans le mode d'édition Aperçu et lorsqu'on visualise avec le navigateur par défaut.
Si la bordure est définie à une valeur supérieure à 1 pixel, les minces bordures de cellules réapparaissent et le contour du tableau apparaît selon la largeur définie. L'apparence exact de la bordure du tableau dépend du navigateur utilisé.
D'autres aspects concernant ces lignes par ex. couleur ou suppression des bordures de cellules quand la bordure de tableau est sélectionnée ne peut pas être contrôlée en utilisant ces méthodes.
La boîte de dialogue ‘Propriétés du tableau’ permet aussi de définir l'espacement intra-cellules. Remplissage est la distance entre la bordure et le contenu des cellules. Ceci offre une autre façon alternative de définir l'espace entre le contenu de cellules adjacentes. Le remplissage (NdT. padding) s'applique aux quatre côtés d'une cellule et à toutes les cellules d'un tableau. Encore une fois, l'usage de feuilles de style donne plus de contrôle.
Alors que vous travaillez dans un tableau, la taille des cellules peut se modifier. Il est utile de comprendre comment les navigateurs procèdent avec les tableaux. A moins que la taille d'un tableau ou d'une cellule soit contrainte d'une quelconque façon, un navigateur va modifier la taille d'une cellule pour accommoder l'espace requis pour tout texte inséré. D'autres cellules dans la même colonne vont avoir la même largeur. Cela va tendre à réduire l'espace disponible pour toute colonne de cellules adjacentes. Éventuellement, le navigateur va tenter d'équilibrer l'allocation de chaque colonne en mettant à la ligne (NdT. wrap) le texte. L'effet final va probablement minimiser la hauteur totale du tableau.
Les tableaux peuvent avoir leur largeur complètement non-spécifiée ou spécifiée à une largeur fixe en pixels ou selon un pourcentage de la largeur de la fenêtre.
Quand un tableau est inséré automatiquement avec ‘Insérer un tableau’ et l'onglet ‘Rapidement’, KompoZer peut prendre des décisions. Si l'onglet ‘Précisément’ est sélectionné, l'utilisateur peut sélectionner la largeur en pixels ou en pourcentage et spécifier la largeur de bordure. Les tableaux spécifiés en pourcentage ou de largeur non-spécifié sont davantage échelonnables et donc flexibles pour les écrans et fenêtres de dimensions variables et sont fortement recommandés.
Les navigateurs n'ont pas à suivre aveuglément les instructions de formatage. Si un tableau est trop étroit pour accommoder le contenu des cellules, alors le tableau s'élargit au-delà des limites spécifiées. Cela peut se produire si une large image est insérée ou un mot très/trop long comme ‘anticonstitutionnellement’.
La boîte de dialogue 'Propriétés du tableau' s'ouvre quand vous
Double-cliquez dans un tableau
Cliquez un tableau et cliquez le bouton Tableau dans la barre Principale
Faites un clique droit n'importe où dans le tableau et sélectionnez ‘Propriétés Cellule...’.
Tableaux et cellules peuvent être reformatés de plusieurs façons. Cela signifie que vous n'avez pas à planifier tout d'avance avant de commencer votre tableau puisque les choses peuvent se préciser au fur et à mesure.
Les propriétés d'un tableau offrent l'option d'insérer une légende qui peut être positionnée sur n'importe quel côté du tableau.
Pour les usagers avancés, dans la boîte de dialogue, le bouton ‘Édition avancée...’ donne un accès direct au styles internes du tableau.
Astuce. Choisissez le Mode d'édition 'Balises HTML' pour voir où insérer du texte.
Insérer du texte dans une cellule d'un tableau est l'une des taches des plus facile. Le texte inséré va être formaté en tant qu'élément <td> mais il peut être modifié en tant que paragraphe ou stylisé avec l'Éditeur CSS.
Même une tache simple peut devenir fastidieuse si elle est effectuée de façon répétitive comme par ex. copier et coller un texte pré-sélectionné.
Après avoir sélectionné une portion de texte, KompoZer peut faciliter les choses avec Tableau > Créer un tableau à partir de la sélection. Les lignes de texte (déterminées par des fins de lignes ou par des retours à la ligne) vont être converties en rangées de tableau, une nouvelle cellule étant générée à chaque fois que le caractère spécifié est rencontré. Ceci permet aux listes séparées par des caractères tabulation d'être créées et surmonte le fait que le HTML ne rend pas le caractère tabulation. Il suffit de taper un trait d'union (ou un autre caractère) au lieu d'un caractère tabulation et alors convertir le texte en un tableau.
En utilisant cette méthode, les tableaux peuvent être importés en provenance d'autres applications comme MS-Word. Dans MS-Word, la conversion de tableau à texte séparé par un caractère qui n'apparaît pas dans le texte est possible.
Note N'utilisez pas une tabulation en tant que caractère de séparation parce que KompoZer va l'interpréter comme plusieurs espaces blancs. (Voir la section 3.4.5)
Les navigateurs Web affiche par défaut le texte aligné à gauche et, verticalement, dans le milieu de la cellule. Pour modifier ce formatage, cliquez dans la cellule puis cliquez le bouton Tableau dans la barre Principale. La boîte Propriétés du tableau avec l'onglet Cellules apparaît et rend possible des modifications dans 'Alignement du contenu'. Pour modifier l'alignement de toutes les cellules, sélectionnez d'abord Tableau > Sélectionner > Toutes les cellules.
Pour aligner un tableau au centre de la page, faites un clique droit dans une des cellules du tableau, choisissez ‘Propriétés Cellule...’, choisissez l'onglet ‘Tableau’ et sélectionnez ‘Alignement du tableau’ à ‘Centre’.
Note Pour les pages utilisant le DTD transitional, Internet Explorer aligne les tableaux à gauche. Dans le cas de IE 6, il existe une façon de contourner ce problème tout en ayant recours à un code valide. Dans le mode d'édition 'Source HTML', précédez la balise de début <table> avec le code <div align="center"> et ajoutez après la balise de fin </table> avec le code </div>.
Il existe plusieurs façons par lesquels on peut améliorer la présentation et l'accessibilité des tableaux. Celles-ci incluent:
Caption (Légende) - C'est un texte décrivant la nature du tableau. Insérez-le en utilisant la boîte Propriétés du tableau... puis en choisissant Légende. Choisissez la position du caption dans le menu déroulant Légende.
Summary (Sommaire) - Les légendes (caption) vont souvent être inadéquates en tant que sommaire du but et de la structure de la table pour les gens qui utilisent un agent utilisateur non-visuel. Le W3C recommande: Les auteurs devraient prendre soin de fournir des informations supplémentaires, qui résument l'objet et la structure de la table, en utilisant l'attribut summary de l'élément TABLE. Ceci est particulièrement important pour les tables dépourvues de légende (caption). Pour ajouter un sommaire (summary), dans la boîte Propriétés du tableau, sélectionnez l'onglet Tableau et cliquez sur le bouton Édition Avancé... . Dans l'onglet Attributs HTML,
sélectionnez l'attribut summary et insérez le texte dans la zone de texte 'Valeur'.
Entêtes de rangée et/ou de colonne (Headings) - Les entêtes de rangée et/ou de colonne (on peut aussi dire titre de rangée et titre de colonne) améliorent la présentation visuelle et rendent la signification du contenu plus claire. Par défaut, les entêtes sont affichées en caractères gras et sont centrées. Les entêtes sont implantées en HTML en remplaçant les éléments td (qui signifie table data) par des éléments th (qui signifie table header). Pour changer une cellule de td (cellule normale) à une cellule d'entête, sélectionnez la cellule et, en utilisant la boîte de Propriétés du tableau, avec l'onglet 'Cellules', cochez la case à cocher 'Style de cellule' et choisissez 'Titre'.
Accessibilité - Ajouter un sommaire et des entêtes représentent la première étape pour améliorer l'accessibilité des tablaux pour les utilisateurs non-visuels. Le HTML offre des améliorations encore plus puissantes pour les appareils de conversion de texte à voix (synthétiseur de voix, lecteur Braille pour le Web) (NdT. text-to-speech devices). Pour plus de détails, voir la section 11.4 de la spécification du HTML 4.01.
Cet exercice ne va produire rien d'utile mais son intention est de familiariser les débutants à construire un tableau pour qu'ils soient en mesure de les formater facilement.
Vous devez construire un tableau de 3 lignes et 3 colonnes avec une bordure brune foncée pleine de 6 pixels; la première des 3 lignes sert de titre à chaque colonne. Chaque cellule doit avoir un espacement interne de 8 pixels. Voici les informations que ce tableau devrait contenir. Le sénateur T. Sexton boit du café expresso sans sucre; le sénateur J. Dinnen boit du café décaféiné avec du sucre. Vous devez inclure uné légende pour le tableau avec la balise <caption> et un sommaire (summary) pour le tableau.
La légende du tableau indique ce dont le tableau est l'object, le genre de données que le tableau présente. La couleur d'arrière-plan de la colonne du milieu devrait être de couleur brun café au lait; la couleur du texte de la colonne du milieu devrait être blanche.
Voici le résultat:
Type de café consommé par chaque sénateur
Nom du sénateur
Type de café
Avec ou sans sucre
T. Sexton
Expresso
Sans sucre
J. Dinnen
Décaféiné
Avec sucre
Étapes suivis:
Cliquer le bouton Tableau, choisir l'onglet Précisément, Lignes: 3, Colonnes: 3, Largeur: champ vide, Bordure: 6, Bouton OK
Cliquer le tableau, cliquer le bouton Tableau, sélectionner l'onglet Tableau, Marges: 0, Espacement: 8, Légende: Au-dessus du tableau, bouton Appliquer, bouton OK
Cliquer dans l'élément caption et éditer "Type de café consommé par chaque sénateur" ou un texte descriptif comparable
Cliquer dans la première cellule et éditer le champ, passer à l'autre cellule avec la touche flèche droite, et ainsi de suite et remplir les données pour tout le tableau. C'est seulement ici que vous devriez voir le tableau prendre de l'expansion en largeur. Le tableau se redimensionne pour ne prendre que l'espace nécessaire à rendre les données du tableau.
Cliquer et draguer les 3 cellules de la première ligne, clique droit Propriétés Cellules..., Style de cellule Titre, bouton Appliquer, bouton OK.
Dans la barre d'état, faites un clique droit sur le noeud <table> puis choisir Style internes, Propriétés des bordures, choisir Style: Plein, Épaisseur: 6px, Choisir couleur brun foncé, cliquez OK.
Cliquer la première cellule du haut de la 2ème colonne, clique droit, Propriétés Cellule..., couleur de fond: choisir une couleur proche du café au lait, Bouton Appliquer, bouton OK.
Répéter la procédure précédente pour les 2 autres cellules de la 2ème colonne
Cliquer dans le tableau, cliquer le bouton Tableau,, sélectionner l'onglet Tableau, bouton Édition avancée..., onglet Attributs HTML, Attribut: summary, Valeur: "Ce tableau montre le type de café consommé par chaque sénateur et s'il est pris avec ou sans sucre" ou un texte semblable, bouton OK, bouton Appliquer, bouton OK
Cliquer dans le tableau, cliquer le bouton Tableau,, sélectionner l'onglet Tableau, bouton Édition avancée..., onglet Attributs HTML, Attribut: rules, Valeur: all; bouton OK, bouton Appliquer, bouton OK
Les liens procurent les moyens de naviguer à des sites Web et à l'intérieur de sites. Ils vous permettent de vous déplacer rapidement d'un endroit à un autre à l'intérieur d'un même site ou à l'intérieur d'une même page d'un site. Les liens peuvent être attachés à n'importe quel élément d'une page; en fait, presque n'importe quelle partie du contenu d'une page peut former la base d'un lien à des fins de navigation. Habituellement, on utilise quelques mots ou une image sur lequel un clique va activer un lien.
Sélectionnez avec le clavier ou en traînant la souris (en mettant en vidéo inversé) quelques mots
Sur la barre Principale, cliquez sur le bouton ‘Lien’. Alternativement, faites un clique droit sur les mots sélectionnés et sélectionnez ‘Créer un lien...’. La boîte ‘Propriétés du lien’ s'ouvre.
Cliquez sur ‘Parcourir...’ et naviguer jusqu'au fichier que vous voulez lier s'il s'agit d'un fichier local (sur votre système).
Cliquez Ouvrir.
Dans le Mode d'édition Normal ou Aperçu, vous verrez vos mots soulignés et en une autre couleur (probablement bleu). Si vous double-cliquez maintenant sur le texte, la boîte 'Propriétés du lien' s'ouvre. Cette procédure peut s'avérer fort utile si vous voulez changer le fichier auquel le lien réfère. (Dans un navigateur, vous vous attendriez à ce que le fichier visualisé soit remplacé par celui auquel le lien réfère!)
Si vous passez au mode d'édition 'Balises HTML', vous allez voir votre texte précédé par un icône jaune avec un 'A' à l'intérieur. Votre texte a été défini avec l'élément 'A' (Anchor).
Il est possible d'insérer une adresse de courrier électronique dans un lien hypertexte. Le résultat est que, lorsque cliqué ou activé, le lien déclenche l'application de courrier électronique par défaut sur le système du visiteur et il insère l'adresse de courrier électronique sélectionnée.
Pour réaliser un lien de courrier électronique, procédez comme dans la précédente section (3.7.1.1). Quand la boîte ‘Propriétés de lien’ s'ouvre (ou si c'est la boîte Propriétés de l'image, alors cliquez l'onglet Lien), entrez l'adresse de courrier électronique et cochez la case ‘La valeur ci-dessus est une adresse de courrier électronique’.
Il existe un second type d'élément ancre appelée ‘ancre nommée’. Une telle ancre est extrêmement utile puisqu'elle peut agir comme un signet définissant un endroit précis sur une page. Les liens peuvent atteindre de tels "signets".
Pour insérer une ancre nommée
Placez le curseur à l'endroit désiré que vous voulez marquer.
Cliquez le bouton 'Ancre' sur la barre Principale ou, dans la barre de Menu, sélectionnez Insérer > Ancre nommée. La boîte de Propriétés de l'ancre nommée va apparaître.
Entrez un nom unique pour cette ancre.
Cliquez OK.
Dans le mode d'édition 'Balises HTML', cette fois l'icône jaune a une image d'ancre.
Note L'ancre est aussi visible dans le mode d'édition Normal (mais pas dans le mode d'édition Aperçu).
Commencez comme dans la section ci-haut pour lier à un autre fichier. Quand la boîte de 'Propriétés de lien' s'ouvre, plutôt que de choisir un fichier, utiliser la liste déroulante. Votre nom d'ancre devrait apparaître précédé par un #. Cliquez-le et faites OK. Voilà, ca y est! Si vous faîtes un test sur votre page dans un navigateur, quand vous cliquez le lien, la page devrait se positionner à l'endroit de l'ancre.
Note Si votre page est courte, vous pourriez ne pas constater ce repositionnement de la page. Vous devez faire un test avec une page relativement longue avec un lien situé vers la fin du document et une ancre au début du document (ou vice versa). Avec la plupart des navigateurs, l'ancre doit être située sur une ligne visible.
Vous pouvez atteindre directement la position d'ancres nommées dans d'autres pages. KompoZer ne rend pas cela très facile à accomplir. Procéder tel que dans ‘ 3.7.1.1 Liaison à un autre fichier’ ci-haut. Après avoir choisi le fichier et cliqué 'Ouvrir', vous allez voir le nom du fichier dans la boîte, puis immédiatement après, le caractère dièse ‘#’ puis immédiatement suivi par le nom de l'ancre. Donc, si le nom de votre fichier s'appelle "pagedeux.html" et que l'ancre s'appelle "p2ancre", l'entrée complète devrait lire "pagedeux.html#p2ancre" (sans les guillemets). Soyez vigilants pour ce qui est de la casse du texte. Sur certains systèmes, cela n'importe
pas mais sur d'autres, votre lien va échouer si la casse est incorrecte. Je recommende de toujours utiliser les minuscules pour les noms de fichier et les ancres.
Note Le nom de l'ancre est ‘p2ancre’ et NON ‘#p2ancre’. Le symbole dièse est seulement pour indiquer au navigateur que le texte qui suit est une ancre, c'est-à-dire un endroit précis, balisé dans une page.
Vous pouvez aussi, et c'est ce qui est très utile, "sauter"/atteindre d'autres pages ou endroits sur des sites Web. Tout ce que vous avez à faire, c'est d'entrer l'adresse complète URL dans la boîte. A nouveau, vous devez être attentif à bien choisir la casse. Assurez-vous que la case à cocher (‘L'URL est relative à l'adresse de la page’ est décochée (vous n'aurez peut-être pas de choix de toute façon).
Bien que vous pouvez lier vos pages à des ancres nommées sur d'autres sites, je suggère que vous ne le fassiez pas. Confinez-vous à lier votre site personnelle (habituellement se terminant par / ou /index.htm). Pour lier à d'autres pages ou ancres présuppose que le webmestre ne va pas réarranger la structure de son site – en bout de ligne, vos visiteurs peuvent aboutir nulle part parce que les liens ne fonctionnent plus.
Les liens sont habituellement soulignés et en bleu. Si vous regardez attentivement, vous pouvez voir la couleur changer et vous demandez pourquoi il en est ainsi. Les liens peuvent exister dans différents états, les principaux sont:
État d'un lien
Description de l'état
liens non-visités
l'état initial
liens visités
les liens ont été visités dans le passé
liens survolés
le curseur plane, survole maintenant le lien
Bien que ceux-ci apparaissent probablement dans des couleurs différentes, c'est le navigateur qui détermine ces couleurs.
Note KompoZer offre une façon d'altérer les couleurs via Outils > Préférences > Paramètres de page. Toutes nouvelles pages devraient utiliser une telle nouvelle sélection (les couleurs ne changent pas dans une page actuellement ouverte). Une meilleure façon d'obtenir un contrôle complet et fiable est de décocher "Utiliser des couleurs personalisées" et de définir les couleurs en utilisant les styles. Voir la section 4.2.5.2.
(NdT. Par image réactive, nous voulons dire une image qui, si elle est cliquée, se comporte comme un lien textuel. On dit aussi images cliquables.) Les techniques et les possibilités sont très similaires à celles utilisées pour créer un lien textuel.
Pour créer une image réactive
Cliquez sur l'image
Dans la barre Principale, cliquez sur le bouton Lien ou alternativement faîtes un clique droit sur l'image et sélectionnez "Créer un lien...". La boîte ‘Propriétés de l'Image’ s'ouvre avec l'onglet ‘Lien’ déjà sélectionné.
Cliquez sur le bouton "Parcourir..." et naviguer jusqu'au fichier auquel vous voulez que votre image soit lié.
Pour changer le fichier auquel un lien réfère, dans le mode "Normale" ou "Balises HTML" ou "Aperçu", double-cliquez le lien. La boîte de ‘Propriétés de lien’ s'ouvre (pour une image, la boîte ‘Propriétés de l'Image’ s'ouvre - cliquez l'onglet Lien). Éditez le lien.
Pour enlever le lien, effacez le URL de la zone de texte.
Si vous ne savez pas ce que sont les cadres, alors vous ne perdez rien. Les cadres ne sont pas recommendables.
KompoZer ne supporte pas les cadres - du moins maintenant. Si vous ouvrez un document dans un cadre, vous allez lire le message ‘Cette page ne peut être édité pour une raison inconnue’ mais le contenu du cadre va s'afficher sans problème. Alors, vous ne pouvez rien faire sauf si vous cliquez sur l'onglet/mode d'édition "HTML source". Vous allez alors voir le code source mais votre système va sembler figer, bloquer. Actuellement, votre système n'est pas bloqué et vous pouvez charger une autre page et continuer d'autres opérations normales.
Ceci n'est pas une grande limitation. Bien qu'il faille un certain temps pour s'en familiariser, le code pour les cadres est habituellement court et peut facilement être produit en utilisant un éditeur texte. Une fois construit, le code a rarement besoin d'être modifié. Vous pouvez utiliser KompoZer pour développer les pages qui iront dans les cadres.
Les présentations reposant sur des cadres peuvent être simulées en utilisant le CSS. http://www.nvu.com/demos/frames/frameSimulate.html offre un guide utile qui fonctionne bien sous les navigateurs de Mozilla mais moins bien sous Internet Explorer.
Les formulaires offrent un mécanisme par lequel un visiteur à un site peut envoyer des données à un serveur pour traitement. Ceci peut être aussi simple qu'une zone de texte pour écrire un message pour un courriel ou aussi complexe qu'une sélection d'items d'un catalogue et l'envoi d'une commande à un fournisseur. Les formulaires colligent, rassemblent les données entrées ou colligées de cases à cocher ou listes et les envoient au serveur. Il s'ensuit que les formulaires peuvent être utilisés en association avec un logiciel compatible roulant sur le serveur.
Les formulaires peuvent être placés dans des pages web standard et agir comme éléments de bloc. Dans le mode d'édition Normal, KompoZer entoure les formulaires avec une boîte de bordure en tirets de couleur cyan (bleu turquoise). Les formulaires peuvent contenir d'autres éléments de niveau bloc (paragraphes, entêtes, etc.) autant que d'autres éléments spécifiques appelés ‘Contrôles de formulaire’ qui sont conçus pour la collection de données. Puisque ces contrôles de formulaires sont essentiellement des éléments en-ligne, ils doivent être disposés à l'intérieur d'éléments de niveau bloc (habituellement des paragraphes bien que des divs pourraient tout aussi bien faire l'affaire aussi).
Chaque item de donnée envoyé au serveur est associé à l'information sur quel controle de formulaire l'envoie. Donc, les dévelopeurs web doivent donner un nom unique à chaque contrôle de formulaire qui sera utilisé pour l'envoi de données.
Les données colligées par un formulaire seront envoyées à un URL spécifié dans l'attribut action que KompoZer ajoute à un formulaire. Cet URL est souvent sur le serveur qui héberge la page web mais ce n'est pas obligatoire. Les données sont traitées en utilisant une (1) de deux (2) méthodes appelées ‘GET’ ou ‘POST’ qui requiert aussi d'être spécifié. Ces détails sont disponibles de votre fournisseur de logiciel associé.
Dans la boîte de dialogue Propriétés de formulaire, donnez/choisissez un nom au formulaire.
Complétez la zone de texte URL de l'action avec l'URL correct et sélectionnez la méthode appropriée.
‘Encodage’ et ‘Cadre cible’ ne sera pas requis la plupart du temps mais, s'ils sont requis, sélectionnez ’Plus de propriétés’ et complétez les champs.
Cliquez OK
Dans le formulaire, placez les entêtes, paragraphes et images qui assurent/façonnent la structure dans laquelle les contrôles de formulaires seront placés.
Là où les contrôles seront nécessaires, cliquez dans les endroits désirés et utilisez la liste déroulante à droite du bouton Formulaire et sélectionnez le contrôle.
Donnez un nom unique à chaque contrôle.
Chaque contrôle a une information spécifique qui doit être entrée. Entrez l'information dans chaque zone dans la fenêtre qui apparaît.
Note Puisque ce guide s'adresse à l'utilisation de KompoZer et non à la conception de formulaires, ce guide n'ira pas plus loin sur ce sujet.
Si le style standard du formulaire ne vous plaît pas, il est possible de les styliser selon vos goûts personnels. Pour ceux qui sont familiers avec l'usage des styles, des détails spécifiques sont fournis à la section 4.2.5.3.
Une des ‘Astuce du jour’ de KompoZer dit “Saviez-vous que … vous pouvez déplacer des éléments? Simplement placer le curseur dans le bloc que vous voulez déplacer et cliquez une fois sur le bouton de calque pour rendre ce bloc mobile.”
Les éléments formant des calques sont retirés du flux normal du document et placés dans des positions définies sur la page de façon absolue i.e. dans des positions fixes par rapport aux limites de la page.
Bien que les calques introduisent une plus grande flexibilité et de nouvelles possibilités dans le formatage et dans la disposition d'une page, les calques amènent et impliquent des complexités que les débutants pourraient préférer d'éviter. Cette section est donc pour ceux qui désire approfondir davantage.
Cliquez dans un bloc que vous voulez formater en tant que calque.
Cliquez le bouton Calque sur la barre (2) secondaire de Mise en forme.
Le bloc devient un ‘Calque’. Les calques ont des poignées graphiques qui permettent d'en modifier leurs dimensions. Au haut du calque se trouve la poignée de repositionnement (décrivant une croix faite de 4 flèches ). Pour déplacer ce calque, simplement cliquez et draguez/traînez cette poignée.
Les calques n'ont pas à être un bloc unique – toute séquence d'éléments qui peuvent être sélectionnés ensemble peuvent être convertis en calque. Un calque peut donc être plusieurs paragraphes avec ou sans entêtes, images et tableaux.
Les calques permettent à des éléments d'être placés en position absolue dans la page. Ceci est une capacité commune aux logiciels de dessin et de publication qui permettent à différents items d'être superposés l'un par-dessus l'autre. Comme tel, il s'agit d'un outil puissant.
Les éléments de texte ont normalement une couleur de fond (arrière-plan) transparente; donc ils sont confondus, amalgamés lorsque superposés. En les formatant avec une couleur de fond (arrière-plan), ils deviennent "solides". Même chose pour les tables avec une image de fond (arrière-plan) non-transparente ou une couleur d'arrière-plan: ils peuvent être superposés l'un par-dessus l'autre pour produire un effet graphiques différenciés.
Les items convertis en calques ont plusieurs caractéristiques qui diffèrent des autres items ‘normaux’.
Les calques dans KompoZer sont contenus dans des éléments ‘div’. (Pour plus d'information sur les ‘div’s, allez à la section 4.5)
Les calques modifie le flux normal du document c'est-à-dire le flux où chaque bloc suit le précédent et précède le suivant.
Les calques ont une largeur définie; donc ils ne se redimensionnent pas lorsque la fenêtre est élargie ou est rétrécie.
Les calques n'ont pas de hauteur définie; donc leur hauteur se modifie lors d'un changement de taille de caractères dans le navigateur.
Les calques, tels que créés, sont caractérisés par trois (3) paramètres: ‘top’ (haut), ‘left’ (gauche), et ‘width’ (largeur). Ceux-ci définissent, en pixels, la distance/coordonnée du coin supérieur à gauche du calque par rapport aux coordonnées d'origine du bloc conteneur et la largeur du calque.
Les calques peuvent être manipulés en utilisant les boutons sur la barre secondaire de Mise en forme.
Pour déplacer un calque, cliquez la poignée de repositionnement et draguez/traînez-la à la position souhaitée sur la page.
Pour redimensionner un calque, draguez/traînez une poignée de redimensionnement tel que pour d'autres éléments.
Quand vous repositionnez un calque, KompoZer permet un mouvement précis au pixel. Ceci peut être difficile à accomplir et, si vous essayez d'aligner différents items, de petites erreurs de positionnement précis peuvent être décelées.
De meilleures résultats peuvent être réalisés en adaptant la grille à un pas plus grand (NdT. by snapping positions to a coarser grid). Pour se faire, sélectionnez Format > Grille magnétique et définissez la précision en pixels requise. Le déplacement d'un calque va ainsi être contraint à la sélection faite.
Note Cette configuration doit être définie à chaque ouverture de page. La valeur de configuration n'est pas conservée par KompoZer.
Note L'adaptation de la grille s'applique au dragage de la position et non pour la taille.
Attention Si plusieurs calques se superposent sur une page, il peut devenir impossible de cliquer sur une poignée. Dans une telle situation, essayez de redimensionner le calque pour que la poignée graphique deviennent accessible, sinon essayez de déplacer temporairement un calque au-dessus hors du chemin de ce calque.
Note Si la hauteur du calque est draguée, traînée, alors que précédemment non-définie, la hauteur devient définie. Néanmoins, les navigateurs semblent ignorer cela.
Lors du positionnement de calques pour les superposer les uns par-dessus les autres, un mécanisme est nécessaire pour définir lequel va être sur le dessus, au-dessus des autres (pour être entièrement visible), lequel sera derrière (pour être partiellement masqué, voilé). Deux (2) boutons (‘Placer au premier plan’ et ‘Placer à l'arrière-plan’ ) sur la barre secondaire (2) de Mise en forme s'occupe de ce mécanisme. Sélectionnez le calque et cliquez le bouton approprié.
Les calques, tels que créés, n'ont pas le paramètre ‘index Z’ défini. Lorsqu'amené en avant, la valeur de index Z est égale à 1. L'index Z définit à quel niveau en avant le calque est situé. Si un autre calque est amené devant le calque le plus avancé, il doit avoir la valeur de son index Z à 2. Le sélectionner et l'amener devant ne fait que mettre la valeur de son index Z à 1. En répétant le processus, la valeur de index Z est mise à 2 et le calque est amener davantage vers l'avant.
Note Les boutons pourraient être mieux nommés, identifiés avec ‘Amener vers l'avant’ et ‘Repousser vers l'arrière’.
Six (6) autre boutons sur la barre secondaire de Mise en forme peuvent être utilisés pour modifier le comportement des calques. Ce sont:
Attacher à la bordure gauche
Attacher à la bordure droite
Garder/Maintenir au centre
Attacher à la bordure du haut
Attacher à la bordure du bas
Maintenir au milieu
Le premier comportement (Attacher à la bordure gauche) n'a aucun effet perceptible, à moins que vous éditiez un document dans une langue où le sens de l'écriture est de droite vers la gauche comme les langues arabiques et l'hébreu.
Le deuxième comportement (Attacher à la bordure droite) définit la distance entre le côté droit (plutôt que le côté gauche) d'un calque du bord de son bloc conteneur.
Le troisième comportement (Attacher au centre) définit la position, non pas en termes absolus mais selon le pourcentage de la largeur de son bloc conteneur. Donc, si créé au centre, disons, d'un <div> positionné (un calque) ou de l'élément <html>, alors le calque restera au centre de celui-ci, selon ses dimensions.
Le quatrième comportement (Attacher à la bordure du haut) n'a aussi aucun effet perceptible.
Attacher à la bordure du bas définit la distance entre le bas du calque et le bas de de son bloc-conteneur.
Maintenir au milieu est semblable à ‘Garder/Maintenir dans le centre’ mais il réferre à l'axe verticale.
Si un élément de la page qui a été attaché ou positionné est subséquemment dragué/traîné à une position différente, alors sa position antérieure sur la page ne peut être réétablie en annulant (avec Ctrl+Z) la dernière action de dragage/traînée.
Note Les effets bas et milieu semblent être interprétés en relation avec la zone de visualisation (NdT. viewport) plutôt qu'en fonction de la page.
Note Les boutons décrits comme n'ayant aucun effet n'en ont aucun initialement mais si appliqué ap`res un autre effet, alors ils peuvent produire les 2 effets simultanément, de façon combinée.
Déplacer/Positionner un object est une action assez imprécise. KompoZer implémente les calques dans le code source en utilisant le positionnement absolu du CSS. Un plus grand contrôle peut être obtenu en éditant les valeurs de propriétés de style.
Pour faire ainsi, dans le mode d'édition Balises HTML, faîtes un clique droit sur la balise ‘<div>’ du calque et sélectionnez ‘Propriétés Avancées’ puis l'onglet ‘Style interne’.
Il est utile de noter quelles propriétés sont appliquées pour réaliser chaque effet.
Plutôt que de définir les calques manuellement tels que décrits précédemment, on peut déclarer une classe pour un ‘<div>’ qui agira comme un calque. L'éditeur CSS permet de déclarer des classes ayant les données de propriétés de style nécessaires à cette fin.
Dans l'éditeur CSS, toutes les propriétés requises sont situés dans l'onglet ‘Boîte’. Les propriétés et les valeurs sont
Nom de propriété
Valeur
Unité
Position
absolue
Largeur
Largeur
px ou %
Haut
Décalage - Haut
px ou %
Gauche
Décalage - Gauche
px ou %
Droit
Décalage - Droit
px ou %
Bas
Décalage - Bas
px ou %
index Z
index Z
Entier
En définissant une classe, davantage de possibilités deviennent disponibles qui ne le seraient en utilisant les boutons de la barre de mise en forme secondaire. Le sélecteur de position procure les choix de Absolue, Relative, Statique ou Fixe. Le choix ‘fixe’ est utilisé dans la version HTML de ce Guide d'utilisateur pour positionner le menu. Cette couche demeure dans une position fixe sur l'écran et ne défile pas. Cet effet est similaire celui d'utiliser un cadre (multi-fenêtre) dans un site Web.
Avertissement Internet Explorer version 6 interprète ‘fixe’ comme si c'était 'relative' donc il va afficher initialement dans la position correcte mais il défile plutôt que de demeurer fixé dans la page.
Ailleurs dans ce guide, quelques méthodes pour entourer les images et tables de bordures ont été mentionnées. Le niveau de contrôle possible varie d'une méthode à l'autre; pour obtenir un contrôle complet sur les bordures, l'usage de feuilles de style a été mentionné et est recommendé.
Il existe une autre méthode qui est très facile à appliquer et qui est appliquable à tous les éléments de bloc par ex. table, entête, paragraphe, formulaire. Cette méthode utilise les possibilités du CSS pour les bordures qui procurent un contrôle complet.
Couleur de la bordure
Épaisseur de la bordure
Style: plein, pointillé, tiret, double, cannelure, etc.
Différent choix pour chaque côté
La méthode ne couvre pas d'autre options qui sont quelquefois disponibles ailleurs par ex. Espacement/Marge interne (NdT. padding).
Pour appliquer une bordure, sélectionnez un bloc et cliquez sur le bouton ‘Bordures’.
Note Le bouton Bordures n'est pas installé par défaut. Pour l'installer, configurer la barre de Mise en forme. Voir la section 9.1.
Laissez la case à cocher "Utiliser le même style pour tous" cochée et choisissez le style, largeur and couleur pour la bordure supérieure. Si tous les côtés ont la même configuration, alors cliquez ‘OK’ sinon décochez la case à cocher et éditez les valeurs pour les autres côtés.
Note Les bordures peuvent être appliquées de plus d'une manière. Si vous cliquez dans un bloc, la bordure peut être appliquée tel que décrit. Si, dans le mode d'édition "Balises HTML", vous sélectionnez le marqueur de bloc, le bloc est placé dans un div et la bordure est appliquée au div. Si, dans tout mode d'édition, vous sélectionnez plus d'un bloc, alors ils sont placés dans un div et la bordure s'y applique. (Pour plus d'information, allez à la section 4.5.)
C'est l'arrière-plan sur lequel page sied. Le body peut être pensé comme la page elle-même. Normalement, cette analogie n'apporte pas de problèmes pour le développeur mais il existe quelques situations où une telle analogie ne s'applique pas.
Le <body> peut avoir sa couleur d'arrière-plan ou une image en arrière-plan qui va siéger derrière toute la page dans les documents HTML; dans les documents XHTML, l'arrière-plan de l'élément <body> définit seulement l'élément <body>. L'apparence d'ensemble d'une page Web peut être significativement déterminée par le contenu de son arrière-plan (couleur ou image).
Pour définir l'arrière-plan
Dans le mode d'édition "Balises HTML", cliquez sur l'icône jaune Body tout en maintenant enfoncée la touche Ctrl.
Sur la barre d'état, faîtes un clique-droit sur ‘Body’. (Cet item est particulier en ce sens que vous ne le verrez pas surligné, sélectionné sur fond clair (NdT. highlighted).)
Sélectionnez ‘Styles internes’ et ‘Propriétés de fond’.
Faîtes vos choix et cliquez OK.
Les ‘Styles internes’ permettent de définir plusieurs autres propriétés pour toute la page. Cela inclut propriétés du texte, propriétés des bordures et propriétés de la boîte. C'est une façon rapide de styliser toute une page puisque les propriétés du texte, par exemple, vont se généraliser (en réalité, on dit qu'elles sont héritées) à tous les autres éléments de la page qui n'ont pas été spécifiquement déclarés.
Les styles internes peuvent définir la largeur de l'élément <body> pour être moins large que la fenêtre. Dans un tel cas, il peut être souhaitable de centrer la page dans la fenêtre.
Pour centrer (horizontalement) la page dans la fenêtre
Dans le mode d'édition "Balises HTML", cliquez sur l'icône jaune body tout en maintenant enfoncé la touche Ctrl
Sur la barre d'état (aussi appelé barre de structure dans KompoZer), faîtes un clique droit sur ‘Body’ (il ne sera pas en vidéo inversé).
Faîtes un clique droit ‘Styles internes’ et sélectionnez ‘Propriétés de la boîte’.
Dans la zone de texte ‘Largeur’, sélectionnez la largeur désirée pour la page.
Dans la zone de texte ‘Marges’, dans les zones de texte ‘Gauche’ et ‘Droit’, éditez ‘auto’.
Cliquez OK.
Les feuilles de style (voir la section 4.4) servent souvent à définir plusieurs propriétés générales pour l'élément body qui évite de répéter ces définitions de propriétés plusieurs fois.
Si vous avez un long document avec des sections identifiées avec les entêtes de format H1, H2 etc., KompoZer peut générer une table des matières automatiquement. Cette table reflètera la structure de la page, le contenu des entêtes formant le texte de la table.
Par défaut, les entrées dans la table des matières vont être liées aux entêtes auxquelles elles réfèrent, ainsi facilitant ainsi la navigation de la page.
Si requis, la table des matières peut être numérotée pour que les entêtes de niveau 1 soient numérotées de 1 et plus, les entêtes de niveau 2 soient numérotés de 1 et plus mais le système de numérotation recommence chaque fois dès que le niveau 1 est incrémenté. Même chose pour les niveaux inférieurs.
Il n'est pas nécessaire de lister tous les niveaux d'entête dans la table des matières; par ex., il est possible de sélectionner seulement le premier et second niveaux. Plus important encore, il n'est pas nécessaire d'inclure un niveau particulier d'entête; donc, si la page utilise le niveau d'entête de niveau 5 (h5) ou de niveau 6 (h6) seulement, vous pouvez en faire la base de la table des matières. L'usage de la table des matières impose peu de contrainte sur la structure du document.
Si les entêtes de la page ne procurent pas une structure satisfaisante pour la table des matières, il est possible d'inclure de courts paragraphes spécifiquement pour ce but. Ceux-ci peuvent être inclus à tout niveau dans la table des matières. Les paragraphes sélectionnés sont identifiés en appliquant une classe nommée ( section 4.2.3 ) générée à cette fin. Alternativement, un <div> ( section 4.5 ) auquel un nom de classe a été appliquée peut être utilisé.
Générer et utiliser une table des matières de cette façon comporte un avantage considérable en ce qu'elle peut être maintenue automatiquement et assure que d'éventuels changements dans la page sont réfletés correctement.
Une table des matières fonctionne seulement à l'intérieur de la page dans laquelle elle réside. Les liens aux autres pages doivent être édités manuellement et devront être entretenus manuellement.
Placez le curseur là où la table doit être insérée.
Cliquez Insertion > Table des Matières > Insérer .
La boîte ‘Table des Matières’ s'ouvre.
Dans la colonne intitulée ‘Balise’, sélectionnez la balise pour chaque niveau par ex. pour le niveau 1, sélectionnez h3 et pour le niveau 2, sélectionnez h4 and pour tous les autres, sélectionnez ‘--’.
Si, au lieu d'utiliser des entêtes, vous désirez utiliser des paragraphes classées ou un div, plutôt que de sélectionner une balise d'entête, sélectionnez ‘p’ or ‘div’ et dans la boîte dans la colonne intitulée ‘Class’ !!entrez la classe requise!!. (C'est, bien sûr, aussi possible de sélectionner les entêtes en allouant une classe.)
Si vous désirez que le contenu soit numéroté, cochez la case à cocher ‘Numéroter toutes les entrées dans la table des matières’.
Si vous désirez construire une table des matières seulement mais sans être liée aux balises listées, cochez la case à cocher ‘Table des matières en lecture seule’.
Cliquez OK.
Attention A l'étape 7 dans KompoZer 0.7.10, l'option requise apparaît désactivée.
La table des matières va se créer.
Pour mettre à jour une table des matières après quelques changements survenus dans une page.
Il n'est pas nécessaire de positionner le curseur.
Cliquez Insertion > Table des Matières > Mettre à jour .
La fenêtre ‘Table des Matières’ apparaît montrant les sélections précédemment faites.
Si désiré, les changements peuvent être faits ??If desired, changes may be made to the selections??.
Pour mettre à jour la table des matières, cliquez OK.
Pour effacer une table des matières.
Il n'est pas nécessaire de positionner le curseur.
Cliquez Insertion > Table des Matières > Supprimer.
KompoZer construit une table des matières en utilisant des listes numérotées ou des listes à puces. ( section 3.4.4 ). Ces listes peuvent être imbriquées pour produire la structure requise. Le résultat est que chaque niveau du contenu est indenté de façon relative au précédent niveau. L'indentation peut être altéré en utilisant les styles et en spécifiant les éléments OL ou UL et LI. Les changements requis vont être apportés aux marges (margin) et espacement interne (padding) ( section 4.2.1.4 ). Tout changement fait sera appliqué aux listes sur la page (pas seulement à la table des matières).
Dans le but de rendre réactif les liens, chaque balise listée dans la table va avoir un nom d'ancre ajouté automatiquement quand la table sera créée ou mise à jour. Supprimer une table des matières supprime aussi tous les ancres.
Chaque document HTML commence avec un bloc “Head“. Ce bloc procure des informations aux navigateurs, engins de recherche mais ce bloc demeure invisible sur la page.
Les items inclus dans le bloc head proviennent de sources variées. Celles-ci peuvent inclure:
Items qui dépendent de la déclaration de Doctype tels que définis lors de la création de la page ( section 3.2.1 ).
Items provenant de Preferences ( section 9.3 ). Inclut nom d'auteur, language.
Items définis par le menu Format > Titre de Page et propriétés. Inclut Titre, Auteur, Description, Language, Direction de texte et jeu de caractères.
KompoZer offre quatre (4) façons de voir et éditer une page - ‘Normal’, ‘Balises HTML’, ‘Source’, ‘Aperçu’. Ceux-ci peuvent être sélectionnés en utilisant les onglets sur la barre de modes d'édition. Chaque mode d'édition offre des capacités d'édition.
Le mode Aperçu offre presque la même vue que dans un navigateur, avec toutefois l'addition des règles et des boîtes de dimensionnement. Les principales différences sont que les scripts ne fonctionnent pas (donc leurs effets ne sont pas constatés), les liens ne sont pas fonctionnels et les styles ne s'appliquent pas aux liens. Les info-bulles fonctionnent néanmoins.
Le mode Normal est très similaire mais ici les contours de table sont visibles et les icônes pour les ancres nommées apparaissent.
Le mode Balises HTML assiste ceux qui sont familiers avec le HTML.
Il y a un icône jaune pour la balise de départ pour tous les éléments (les balises de fin sont omises). Cliquez sur un icône jaune sélectionne et surligne l'élément au complet.
Note Si lorsque cliqué, l'icône jaune d'un élément ne le sélectionne pas, alors maintenez enfoncé la touche Ctrl tout en le cliquant.
Vous allez aussi voir l'élément surligné (en vidéo inversé) sur la barre d'état (voir figure ?? à faire ??). Si vous changez pour le mode d'édition Source, l'élément demeure surligné.
Note L'élément surligné peut être hors de vue et situé un peu plus loin dans le code, vers le bas. Il faut alors utiliser la barre de défilement vertical.
Ceci est d'une grande aide lors de l'édition. Sauf pour quelques exceptions, les noms de marqueurs (icônes jaunes) correspondent aux noms de balise HTML.
Note Les ancres nommées sont identifiées avec le symbole où les liens sont identifiés par l'icône jaune "A". L'icône jaune "Span" est utilisé quand certains changements sont faits en-ligne avec un texte - par exemple si la couleur est changé pour un seul mot. La balise Span dans le HTML a un usage plus restreint étant confiné à implémenter des changements de style. Ceci peut créer une certaine confusion.
Dans le mode d'édition Balises HTML, les images de fond n'apparaissent pas.
Le mode d'édition Source montre tous les détails du code HTML. Tout le code, excepté la déclaration DOCTYPE, peut être édité.
Un mode d'édition additionel est fourni avec le bouton ‘Navigateur’. Celui-ci ouvre le navigateur web par défaut et donne toutes les fonctionnalités du navigateur et son affichage de la page.
Avertissement Si votre navigateur par défaut est Internet Explorer, la page peut ouvrir la vue Source et non la page dans la fenêtre du navigateur.
Ce mode est destiné à ceux qui connaissent bien le code HTML. Dans ce mode, KompoZer n'est pas simplement un éditeur texte. Dès qu'on change de mode d'édition, KompoZer exécute des routines de validation et de correction du code HTML. Lorsque nécessaire, KompoZer modifie le code HTML du mieux qu'il le peut. KompoZer peut ne pas comprendre les intentions de l'usager et, si c'est le cas, alors les modifications au code HTML ne sont pas annulables (Ctrl+Z). Bien que cela peut vous épargnez beaucoup d'efforts d'édition, si vous savez ce que vous faîtes et si vous comprenez le codage HTML, il est possible d'aboutir à une page lourdement embrouillée - qui pourra être affichée mais dont une partie importante du contenu pourra avoir disparue.
Insistons pour dire qu'une bonne pratique/habitude de sauvegarde peut prévenir des désastres de la sorte. Le Gestionnaire de Sites (voir la section 8) est présentement un outil utile pour une telle tache. Créez un répertoire de sauvegarde de versions précédentes.
La colonne de numérotation de lignes dans la marge à gauche est utile; elle ne fait pas partie du code HTML comme tel. Cette colonne peut aider à trouver un endroit dans le code lorsque vous changez de mode d'édition. Lorsque vous changez d'applications, les numéros de lignes sont approximatifs et ne correspondent pas toujours de façon exacte.
KompoZer offre quelques autres options dans la façon d'afficher les lignes tel que mentionné à la section 9.3 sur les ‘Préférences’ ou voir Aide dans KompoZer.
A ce point, les utilisateurs de KompoZer devraient être familiers avec la sélection et la manipulation d'items. Une récapitulation peut s'avérer utile malgré tout.
Les prochaines remarques s'appliquent au modes d'édition Normal, Balises HTML ou Aperçu.
KompoZer offre souvent plusieurs façons de faire certaines choses. Quelquefois, une seule méthode fonctionnera; quelquefois, plusieurs méthodes fonctionneront. Laquelle méthode fonctionne va dépendre de:
ce qui est sélectionné et
ce qui peut être fait avec une telle sélection.
Sélection de texte.
Simplement placer le curseur n'importe où dans un bloc. Ceci est souvent suffisant lorsqu'un formatage doit être appliqué à un bloc entier.
Double-cliquez à l'intérieur d'un bloc pour sélectionner un mot.
Triple-cliquez à l'intérieur d'un bloc pour sélectionner une ligne de texte.
Draguez à travers une section de texte pour surligner (en vidéo inversé) et sélectionnez une section seulement.
Plusieurs fonctions peuvent être appliquées sur un texte sélectionné incluant
Draguer/traîner à une position différente,
Appliquer à une classe
Changer la balise d'un élément par ex. changer d'un paragraphe à une liste.
Sélectionner dans le mode d'édition Balises HTML
Quelquefois, les sélections dans les modes d'édition Normal ou Aperçu deviennent difficile ou impossible.
Dans le mode d'édition Balises HTML, maintenir la touche Ctrl enfoncée pendant que vous cliquez sur l'icône jaune de la balise du bloc que vous voulez sélectionner.
Les actions appropriées pour compléter les blocs tel que draguer/traîner ou faire appliquer une classe sont possibles.
Sélectionner via la barre d'état (aussi appelé barre de structure dans KompoZer)
C'est un excellent outil. Cliquez dans n'importe object texte ou image, puis, dans la barre d'état, cliquez sur le marqueur le plus à droite ou sur celui qui correspond (... niveau d'imbrication ...) L'object est sélectionné. A sa gauche, vous voyez les autres éléments qui lui sont au-dessus dans l'arborescence du document. Cliquez n'importe quel de ces éléments pour sélectionner un élément correspondant.
Double-cliquer
Le double-clique est un moyen contextuel puissant qui souvent procure une façon très rapide d'accéder aux actions appropriées dans un contexte déterminé.
Double-cliquez une image pour amener la boîte 'Propriétés d'Image' qui permet d'apporter des changements à une image comme l'emplacement, nom, dimensions, lien, etc.
Double-cliquez un lien ou une ancre pour éditer le nom, propriétés, etc.
Double-cliquez une table ou cellule pour accéder aux propriétés comme la taille, couleur, alignement.
Double-cliquez la plupart des choses pour obtenir un accès aux "Propriétés Avancées" via le bouton 'Propriétés Avancées' qui apparaît dans la première fenêtre qui s'ouvre. Bien que ces propriétés requiert davantage de connaissance du HTML ou du CSS, ils peuvent être utilisé pour appliquer des options de formatage extensif aux items.
cliquer sur le bouton Ouvrir pour accéder à une boîte de dialogue.
. La boîte de dialogue ‘Titre de Page’ apparaît. Donnez à votre page un titre descriptif, significatif et cliquez OK. Maintenant, vous entrez dans une boîte de dialogue pour parcourir votre disque local ou votre système.
Le bouton ‘Imprimer’ vous permet d'imprimer la page courante. Cela imprime la vue de page et non le codage HTML.
KompoZer peut formater une liste d'items en donnant à chaque item un numéro séquentiel dans plusieurs formats. Dans le code HTML, on l'appelle liste ordonnée (Ordered List - <ol>) ou en les présentant sous forme de puces (Unordered List - <ul>).
, le style de numérotation peut être sélectionné.
, le type de puce peut être modifié.
Vous pouvez altérer l'indentation d'une liste en utilisant les boutons ‘Augmenter le retrait (vers la droite)’ ou ‘Diminuer le retrait (vers la gauche)’ sur la barre de Mise en forme.
. Le vérificateur orthographique va travailler séquentiellement à travers la page. KompoZer a un dictionnaire anglais (États-Unis) par défaut mais vous pouvez y ajouter vos propres mots.
. La boîte de dialogue “Insérer un tableau” va apparaître.
Chaque cellule, lorsque cliquée, révèle un ensemble de six symboles de manipulation (4 flèches formée par un triangle: 
et 2 cercles avec un "x" à l'intérieur 
); ceux-ci procurent
une méthode rapide pour insérer ou pour supprimer des lignes ou colonnes de cellules, tel que le montre cette figure.
Sur la barre Principale, cliquez sur le bouton ‘Lien’. Alternativement, faites un clique droit sur les mots sélectionnés et sélectionnez ‘Créer un lien...’. La boîte ‘Propriétés du lien’ s'ouvre.
sur la barre Principale ou, dans la barre de Menu, sélectionnez 
Les formulaires offrent un mécanisme par lequel un visiteur à un site peut envoyer des données à un serveur pour traitement. Ceci peut être aussi simple qu'une zone de texte pour écrire un message pour un courriel ou aussi complexe qu'une sélection d'items d'un catalogue et l'envoi d'une commande à un fournisseur. Les formulaires colligent, rassemblent les données entrées ou colligées de cases à cocher ou listes et les envoient au serveur. Il s'ensuit que les formulaires peuvent être utilisés en association avec un logiciel compatible roulant sur le serveur.
Une des ‘Astuce du jour’ de KompoZer dit “Saviez-vous que … vous pouvez déplacer des éléments? Simplement placer le curseur dans le bloc que vous voulez déplacer et cliquez une fois sur le bouton de calque pour rendre ce bloc mobile.”
Le bloc devient un ‘Calque’. Les calques ont des poignées graphiques qui permettent d'en modifier leurs dimensions. Au haut du calque se trouve la poignée de repositionnement (décrivant une croix faite de 4 flèches 
). Pour déplacer ce calque, simplement cliquez et draguez/traînez cette poignée.
et ‘Placer à l'arrière-plan’ 
) sur la barre secondaire (2) de Mise en forme s'occupe de ce mécanisme. Sélectionnez le calque et cliquez le bouton approprié.
Les calques, tels que créés, n'ont pas le paramètre ‘index Z’ défini. Lorsqu'amené en avant, la valeur de index Z est égale à 1. L'index Z définit à quel niveau en avant le calque est situé. Si un autre calque est amené devant le calque le plus avancé, il doit avoir la valeur de son index Z à 2. Le sélectionner et l'amener devant ne fait que mettre la valeur de son index Z à 1. En répétant le processus, la valeur de index Z est mise à 2 et le calque est amener davantage vers l'avant.
Six (6) autre boutons sur la barre secondaire de Mise en forme peuvent être utilisés pour modifier le comportement des calques. Ce sont:
Le premier comportement (Attacher à la bordure gauche) n'a aucun effet perceptible, à moins que vous éditiez un document dans une langue où le sens de l'écriture est de droite vers la gauche comme les langues arabiques et l'hébreu.
Le deuxième comportement (Attacher à la bordure droite) définit la distance entre le côté droit (plutôt que le côté gauche) d'un calque du bord de son bloc conteneur.
Le troisième comportement (Attacher au centre) définit la position, non pas en termes absolus mais selon le pourcentage de la largeur de son bloc conteneur. Donc, si créé au centre, disons, d'un <div> positionné (un calque) ou de l'élément <html>, alors le calque restera au centre de celui-ci, selon ses dimensions.
Le quatrième comportement (Attacher à la bordure du haut) n'a aussi aucun effet perceptible.
Attacher à la bordure du bas définit la distance entre le bas du calque et le bas de de son bloc-conteneur.
Maintenir au milieu est semblable à ‘Garder/Maintenir dans le centre’ mais il réferre à l'axe verticale.
Pour appliquer une bordure, sélectionnez un bloc et cliquez sur le bouton ‘Bordures’.
Un mode d'édition additionel est fourni avec le bouton ‘Navigateur’. Celui-ci ouvre le navigateur web par défaut et donne toutes les fonctionnalités du navigateur et son affichage de la page.
C'est un excellent outil. Cliquez dans n'importe object texte ou image, puis, dans la barre d'état, cliquez sur le marqueur le plus à droite ou sur celui qui correspond (... niveau d'imbrication ...) L'object est sélectionné. A sa gauche, vous voyez les autres éléments qui lui sont au-dessus dans l'arborescence du document. Cliquez n'importe quel de ces éléments pour sélectionner un élément correspondant.
Section précédente
Début de la page
