Faire son site et le publier

Kompozer et CSS

• Internet avec Kompozer
• Kompozer installation
• Prise en main
  Premier site
• Publier avec Filezilla
• Feuille de style
  interne - export
• Mise en forme CSS
• Faire des menus avec CSS et PHP

Site général de téléchargement  kompozer.net

Installation de Kompozer 0.8b3 en français

Aller sur le site Frenchmozilla

Aller sur le forum Geckozone / onglet Téléchargements
descendre jusqu'à la rubrique Kompozer et faire son choix. En cliquant sur le lien Obtenir de précédentes versions, il est toujours possible de télécharger sur le site officiel  la 0.7.10, dernière version stable pour Windows ainsi que le pack de langage en français.

Extensions compatibles

Aller sur le site Kompozer Add-On

Lier un éditeur de texte externe (Notepad++)

Voir le tuto pdf sur le site duson
De la même façon lier d'autres applications externes comme un navigateur par défaut et un logiciel de traitement d'images.

Installation de Kompozer 0.7.10

KompoZer 0.7.10 en français est un éditeur de pages HTML dit « WYSIWYG »(ce que vous voyez est ce que vous obtiendrez), c'est-à-dire permettant de générer une page identique à ce que nous visualisons dans KompoZer. L'un des avantages de ce type de logiciel est qu'il n'est pas nécessaire de connaître la syntaxe HTML pour créer une page web. Il permet également d'ouvrir des pages contenant du PHP. La liste complète des fonctionnalités de KompoZer est disponible sur son site officiel. C'est une version dérivée de Nvu, avec des bogues corrigés. Lire l'article Geckozone.

1 -  Pourquoi adjoindre à Kompozer des modules complémentaires ?

Un bug connu de KompoZer peut provoquer la désactivation de certaines fonctions puis un arrêt brutal du logiciel lorsque l'on opère des modifications dans l'onglet Source. C'est la raison pour laquelle il est préférable de travailler le code source avec Handcoder couplé avec l'éditeur Notepad++ et avec Tidy pour nettoyer le code.

Handcoder surveille les modifications, ce qui permet d'éditer une page simultanément en WYSIWYG et en mode texte; il permet de ne plus utiliser l'onglet source (source de bugs), mais un éditeur texte externe. Il possède une icône qui peut être placée dans la barre d'outils. Ainsi, le lancement de l'éditeur texte externe peut se faire par un simple clic dans la barre d'outils (quasi aussi rapide que l'onglet source!). L'éditeur et Kompozer sont synchro: si une modification est faite dans l'une des deux applications et le fichier enregistré, lors du passage à l'autre application, il est demandé si on accepte les modifications effectuées. Handcoder étant couplé avec Tidy, le code est indenté et nettoyé à l'ouverture dans l'éditeur texte. Les Php/Asp/Jsp sont supportés

Tidy : Nettoyeur de site. Il est fréquent de commettre quelques erreurs lorsque l'on écrit directement le code dans un éditeur de texte ou lorsque l'on se livre à des conversions hasardeuses (comme le passage du .doc au .html dans Word où Tidy s'avère particulièrement efficace dans son nettoyage). Tidy met le code en conformité avec les normes. Il effectue son travail en fonction de la configuration règlée par l'opérateur et en fonction du doctype rencontré dans le fichier à traiter.

Firefox 3.6 : Navigateur permettant d'utiliser la WebDeveloper Toolbar : Extension de Firefox, pour le web (version française)

Notepad++  est un éditeur de source avec mise en relief de la syntaxe et mise en forme de cette dernière. Ce logiciel permet également de colorer les mots définis par l'utilisateur. Nous pouvons ainsi imprimer notre code source en couleur. De plus, Notepad++ possède une fonction multi-vues qui nous permet d'éditer différents documents à la fois et même d'éditer le même document en synchronisant 2 vues différentes. Il supporte entièrement le glisser-déposer: Nous pouvons déposer le fichier pour l'ouvrir mais également glisser et visionner un document d'une vue à une autre. Enfin, ce logiciel fonctionne aussi vite que le bloc-note fourni par MS Windows.

FileZilla est un logiciel permettant de se connecter à distance sur un serveur pour y télécharger des fichiers. Pour publier nos pages il est préférable, pour l'instant, d'utiliser Filezilla plutôt que le module de publication de Kompozer qui est très limité.

NsmConText : Module complémentaire permettant de visionner les pages avec plusieurs navigateurs différents installés dans notre système et de pouvoir, par un menu contextuel, ouvrir et modifier des fichiers non html avec l'application que nous voulons. 

2 - Télécharger

Pour les extensions de Kompozer (HandCoder et NsmContext) un clic gauche (ou droit, suivant la version du navigateur) sur le lien fait ouvrir la fenêtre de téléchargement.
Dans cette fenêtre choisir Enregistrer le fichier.
Il ne faut pas se servir des anciennes versions d'Internet Explorer car les fichiers .xpi sont considérés par ces navigateurs comme des zips. Si ce n'est pas déjà fait il faut donc commencer par télécharger et installer un autre navigateur plus performant comme Firefox ou Opera.

Firefox 3.6  Pour télécharger une version en français :
http://www.mozilla-europe.org/fr/firefox/  ou bien  
http://www.frenchmozilla.fr/
Nous obtenons un fichier "Firefox Setup 3.6.8.exe"
Note : Faire bien attention d'aller sur le site officiel de Mozilla pour obtenir la version originale. (Mozilla.fr n'appartient pas à la fondation Mozilla mais à un particulier. Lire l'article).

Kompozer 
http://www.frenchmozilla.fr/
Cliquer sur le lien KompoZer 0.8b3 
Pour avoir la version précédente, stable, descendre jusqu'à la section KompoZer 0.7.10 en Français. Nous obtenons un fichier exécutable "kompozer-0.7.10-win32.fr-FR.exe"
http://kompozer.net/download.php
Sur le site officiel (en anglais) il est possible de choisir  la version qui nous convient le mieux dans la langue que nous désirons.

NsmConText
http://extensions.geckozone.org/NsmConText/
Nous obtenons un fichier "NsmConText-0.3.2-fr.xpi"

Handcoder : http://extensions.geckozone.org/HandCoder/
Cliquer sur le premier lien en haut à droite.
Nous obtenons un fichier "HandCoder-0.3.4-fr.xpi"

Notepad++
http://www.commentcamarche.net/download/telecharger-34055333-notepad
Nous obtenons un fichier d'installation "npp.5.7.Installer.exe".
Il suffit de double cliquer sur le fichier d'installation et l'installeur va créer un sous-dossier NotePad++ dans ProgramFiles qui contiendra l'application. Le fichier exécutable « notepad++.exe » doit se trouver dans le sous dossier. Il est possible de le vérifier avec l'explorateur Windows. Lors du paramétrage il faudra indiquer à Kompozer le chemin de cet exécutable.
Il n'est pas nécessaire de lancer le programme. Il se lance dans Kompozer quand on clique sur l'icône Éditeur.

Tidy : http://tidy.sourceforge.net/#support
Choisir la dernière version pour Windows Windows 95/98/ME/2000/XP exe
Nous obtenons un dossier zippé "tidy_win32.zip" qu'il faut décompresser dans un sous-dossier de ProgramFiles. L'exécutable « tidy.exe » s'y trouve.

Autres extensions pouvant se révéler utiles : (se rendre sur le site extensions.geckozone pour Kompozer afin d'avoir la liste)
Lorem Ipsum [fr] :permettant d'insérer 3 paragraphes de faux texte. Autre site de téléchargement : Mozilla Corporation
Table Nette [fr] : permettant de nettoyer le code des tableaux  importés d'Excel

3 - Installer

• Installer Kompozer par double clic sur le fichier .exe.
  Accepter les valeurs par défaut pour l'installer normalement dans le répertoire Program Files.
• Relancer Komposer.
• Ouvrir la fenêtre Extensions par Menu Outils.
• Dans cette fenêtre se trouve déjà l'extension FrenchLocale pour la traduction française.
• Placer dans la fenêtre, par cliquer-glisser-déposer le fichier "HandCoder-0.3.4-fr.xpi"
• Relancer Kompozer
• Placer dans la fenêtre, par cliquer-glisser-déposer le fichier  "NsmConText-0.3.2-fr.xpi" 
• Relancer Kompozer.

Autre procédure pour installer une extension dans Kompozer :
Ouvrir KompoZer / Outils / Extensions...
Dans la la fenêtre Extension, cliquer sur installer.../ aller chercher le fichier .xpi téléchargé / après 2-3 secondes, lancer l'installation.
Relancer KompoZer pour que l'extension soit prise en compte.

4 - Paramétrer Komposer

• Outils / Préférences/ Paramètres de pages/ Internationalisation
  • Langue : fr-fr. Les étiquettes de langue ayant un préfixe commun, comme par exemple [fr-fr] permettent aux utilisateurs de profiter des styles prévus pour le français de France ou à défaut le français générique ou international [fr]
  • Sens de l'écriture : Pas de direction spécifiée. Garder le paramètre par défaut.
  • Encodage : ISO-8859-1. Garder le paramètre par défaut. Vérifier dans Notepad++ que nous avons le même Encodage. 
    Paramétrage / Préférences / Nouveau document / Pour Windows : ANSI
• Outils / Préférences / Avancées
• • Balisage : choisir Langage HTML 4 et DTD de transition
  • Caractères spéciaux : cliquer sur la flèche pour ouvrir le menu déroulant  et choisir Les caractères spéciaux pour HTML 4

5 - Paramétrer Handcoder et Tidy

• Pour paramétrer Handcoder et Tidy dans Kompozer, aller dans le menu Outils / Handcoder / Options
• Onglet options : Editeur texte / chemin de l'Exécutable / mettre le chemin vers un éditeur texte tel que Notepad++ ou autre (exemple: C:\Program Files\Notepad++\notepad++.exe).
  Pour Parcourir cliquer sur le bouton à droite du champ "..."
• Onglet Tidy : (avant toute chose, vérifier avec l'explorateur de Windows que l'exécutable tidy.exe se trouve bien dans un sous dossier nommé Tidy dans Program Files. Si ce n'est pas le cas créer le sous dossier et y glisser l'exécutable)
  Dans l'onglet Tidy mettre le chemin où a été installé Tidy (C:\Program Files\tidy.exe)
  Arguments par défaut :--keep-time yes --indent yes --wrap 120     

6 - Paramétrer NsmConText

Nous allons pouvoir, grâce au paramétrage de l'extension NsmConText, visionner nos pages avec plusieurs navigateurs installés dans notre système.

Dans Menu Outils / Extensions  / double clic sur MsnConText

• Dans la fenêtre qui s'ouvre cliquer sur l'onglet Launchy 
• • Cliquer sur le bouton Ajouter une application. La fenêtre Launchy s'ouvre :
  • Donner le nom que l'on veut voir apparaître dans le menu déroulant, par exemple Firefox.
  • Dans le champ Type choisir Navigateur
  • Chemin de l'EXE : Parcourir . Par exemple : C:\Program Files\Mozilla Firefox3\firefox.exe  et OK
  • De façon similaire il est possible de paramétrer : lecteur multimédia, client ftp, explorateur de fichiers, éditeur, lecteur d'images.
• Dans la même fenêtre  cliquer sur l'onglet Éditeurs par défaut / Options.  Cliquer sur Navigateur et choisir celui que nous voulons par défaut. Ainsi un simple clic sur l'icône Navigateur ouvrira la page dans le navigateur choisi par défaut.
  Pour changer de programme par défaut, cliquer sur le type de fichiers voulu et dans Options/Éditeur choisir le programme que nous voulons avoir par défaut.

Dans le gestionnaire de sites :

• Les fichiers html peuvent être ouverts dans Kompozer par un double clic.
• Un clic droit sur un fichier non html ouvre un menu contextuel permettant de choisir un programme externe de notre choix (ex : une image pourra être ouverte directement dans « the Gimp » ou « Photoshop » pour la redimentionner).
• Un double clic sur ce fichier l'ouvrira dans le programme défini par défaut.

7 - Placer les icônes Éditeur et abc Orthographe dans la barre d'outils

• Clic droit sur un espace vide de la barre d'outils ouvre, comme dans beaucoup d'applications, la fenêtre personnalisation de la barre d'outils.
• Faire glisser l'icône Éditeur et en profiter pour faire glisser aussi l'icône abc pour la vérification de l'orthographe. Quand un document est ouvert, il est alors possible en cliquant sur l'icône Éditeur d'accéder au code source dans Notepad++, ce qui est aussi rapide que l'onglet Source.

8 - Le plugin Orthographe

Un plugin est un programme qui interagit avec un logiciel principal, appelé programme hôte, pour lui apporter de nouvelles fonctionnalités.
Orthographe n'est pas une extension proprement dite car il ne peut pas être vu via la fenêtre des extensions (une extension suit le profil de l'utilisateur avec les favoris et autres) par contre on peut dire que c'est un plugin, car il est rattaché au logiciel. 

Le meilleur dictionnaire français pour KompoZer est actuellement le dictionnaire classique version Myspell à télécharger depuis  la nouvelle adresse : http://www.dicollecte.org/  
Cliquer sur Français puis sur le menu Télécharger.
D'après le forum Geckozone la version de Kompozer actuellement distribuée comprend le dictionnaire.

9 - Paramétrer Windows

Dans l'explorateur Windows / Menu Outils / Options des dossiers / Affichage.
Descendre avec la barre de défilement jusqu'à la ligne Masquer les extensions des fichiers dont le type est connu.

 

Par défaut Windows masque les extensions de fichiers. Pour travailler plus confortablement et pouvoir reconnaître facilement toutes les  sortes de fichiers que nous aurons à utiliser (.html, .css, .xml, .png, .jpg ...), il convient de décocher cette case et OK.

Trucs et astuces pour compléter l'installation et l'emploi de Kompozer

Haut de page

 Jos Argaud - Mise à jour 14/06/2010 -  Pour m'écrire