Les Fiches pratiques Coin-Web

Transcription

1 Créer / modifier son site web à l aide d un logiciel Open Source Pré-requis : Sommaire Avant de consulter cette fiche pratique, il est bon d avoir assimilé les notions d HTML et CSS. 1. Définitions Installation de KompoZer Utilisation de KompoZer... 4 a. Ouvrir une page existante... 4 b. Créer une nouvelle page... 6 c. Mettre en forme du texte... 6 d. Faire un lien... 7 i. Les liens externes au site... 7 ii. Les liens internes au site... 7 iii. Les renvois vers un endroit de la page en cours... 8 iv. Lien vers une adresse mail e. Ajouter une image, un tableau, un formulaire... 9 f. Les feuilles de style Définitions «Open source» : La désignation Open Source (Code source libre ou Code source accessible en français) s'applique aux logiciels dont la licence respecte des critères précisément établis par l'open Source Initiative. Voici les principaux critères : la libre redistribution ; un code source disponible ; les travaux dérivés possibles. Qu est-ce que NVU? Prononcer «N-view». NVU est un logiciel multi-plateforme destiné à la création et à l administration de pages web, en mode visuel. Il est en quelque sorte le pendant libre de logiciels comme Dreamweaver, GoLive ou Frontpage. NVU est disponible ici : La version non-officielle de l évolution de NVU 1.0 (l auteur de NVU, Daniel Glazman, occupé par le développement de Composer2, a souhaité ne pas maintenir le développement de Nvu au delà de la version 1.0) s appelle KompoZer ( 2. Installation de KompoZer Téléchargez l exécutable pour Windows (existe aussi pour les plateformes Unix et MacOs) ainsi que le pack Fr pour la traduction en français.

2 Installez le logiciel (lancez le.exe et laissez-vous guider) Pour ajouter l extension «Fr», lancez KompoZer puis cliquez sur Tools... Extentions Ajoutez l extension en cliquant sur Install Fermez la boîte de dialogue «extension» en cliquant sur la croix rouge en haut à droite. Redémarrez KompoZer pour prendre en compte les modifications. Votre logiciel est maintenant en français.

3 Il vous faut maintenant configurer les paramètres de votre site. Nous vous conseillons d en configurer 2 : - votre site distant, pour faciliter le transfert des fichiers depuis votre site local ou effectuer des modifications mineures sans risques de disfonctionnement pour l utilisateur - votre site local, pour les mises à jour de plus grande envergure. Configuration du site distant : Cliquez sur «Edition des sites» pour paramétrer les informations de votre site web (reportez-vous aux informations fournies par votre hébergeur pour renseigner le champ «serveur de publication»). Configuration du site local : De la même manière, cliquez sur «Edition des sites» pour paramétrer les informations de votre site web (reportez-vous aux informations fournies par votre hébergeur pour renseigner le champ «serveur de publication»). Utilisez le bouton «Parcourir» de la fenêtre cidessus pour désigner le répertoire contenant votre site. Ne précisez pas d adresse http, d identifiant et de mot de passe.

4 Votre ou vos sites vont apparaître dans le Gestionnaire de site : développez l arborescence en cliquant sur la croix. Vous pouvez maintenant commencer à travailler. 3. Utilisation de KompoZer a. Ouvrir une page existante Double-cliquez sur le nom d un fichier dans le gestionnaire de sites. Ici le titre de votre page, tel qu il apparaîtra dans le navigateur web. Balise non visible au final Vous venez d ouvrir la page index.html de votre site web.

5 L affichage par défaut est proche du résultat final d affichage de la page (il mentionne juste les balises non visibles) Vous pouvez également consulter toutes les balises constituant votre page (utile pour la mise en place CSS) : Un clic sur la balise «DIV» grise les éléments pré visualisés contenus dans cette balise. Le bas de la fenêtre vous renseigne sur le nom de la balise et son arborescence dans la page. L onglet «Source» vous renseigne sur le code source HTML associé (là encore, si vous avez sélectionné la balise DIV sur l onglet «balise HTML», le code correspondant est grisé)

6 Pour une présentation du langage HTML et des feuilles de style, reportez-vous à la fiche pratique Coin- Web correspondante. Une fois les modifications apportées satisfaisantes, vous pouvez mettre en ligne votre travail. Pour cela, cliquez sur Vous n avez plus qu à choisir «Mon site Web» comme destination de publication. Si vous avez la même arborescence entre votre site local et votre site web, votre fichier ira directement se mettre à sa place sur le site distant. Vous n avez plus qu à cliquer sur «Publier» et le tour est joué. b. Créer une nouvelle page Créons maintenant une nouvelle page dans notre site, elle s appellera «liens.html». Créez la page en cliquant sur. Une nouvelle page «Sans Titre» se crée dans un nouvel onglet. (Si vous ne voulez pas tout refaire, vous pouvez repartir d une page existante et la sauver sous un nouveau nom en utilisant la commande «Fichier» / «Enregistrer sous».) Allez sous le menu «Fichier» et enregistrer la page avec le nom «index.html». c. Mettre en forme du texte Tapez un texte. Vous allez pouvoir le mettre en forme grâce à la barre d outil texte : Classe sera vu avec les feuilles de style.

7 d. Faire un lien i. Les liens externes au site En utilisant le bouton, vous allez pouvoir créer un lien vers une adresse web. Sélectionnez au préalable une partie du texte (vous pouvez faire également un lien à partir d une image). Le texte que vous avez sélectionné Saisissez l adresse du lien En cliquant sur «Plus de propriétés», vous pouvez spécifier l ouverture du lien dans une nouvelle fenêtre (propriété «cible»). ii. Les liens internes au site Pour un lien interne au site, procédez de la même manière. Vous pouvez mentionner le chemin (adresse) en relatif (i.e. depuis la page en cours) ou en absolu (adresse complète) Ex. Pour faire un lien depuis «une_autre_page.html» vers «index.html», je peux écrire «../index.html» en relatif ou encore «/index.html» en absolu De façon classique : «.» signifie le répertoire en cours «..» signifie remonter d un répertoire dans l arborescence «/» en début de lien signifie la racine du site.

8 iii. Les renvois vers un endroit de la page en cours. Pour pouvoir faire un renvoi vers un endroit particulier de la page, il faut au préalable y poser un repère. On parle d une. Placez le curseur à l endroit du fichier que vous voulez marquer puis cliquez sur l ancre. Saisissez un nom pour l ancre. Pour les noms, prenez la (bonne) habitude «unix», «linux» ou «ancienne version windows», à savoir : pas d espace dans vos noms de fichiers. Insérez ensuite votre lien comme précédemment. Tapez directement le lien vers l ancre : nom de l ancre précédé par «#» (dont «#Haut_de_page» dans notre exemple). Vous pouvez également cliquer sur la flèche et sélectionner l ancre adéquate dans le menu déroulant : iv. Lien vers une adresse mail. De la même façon, vous pouvez faire un lien vers une adresse mail.

9 Pour éviter de vous faire spammer trop rapidement, il convient de coder cette adresse mail. Sélectionnez la balise «a» associée dans l onglet «balises HTML» et cliquez sur l onglet «source». Copiez le code associé. Rendez-vous sur le site Copiez le code HTML crypté et collez-le à la place de l autre dans votre page. Sauvez votre travail! e. Ajouter une image, un tableau, un formulaire Pour ajouter une image, utilisez le bouton

10 Sélectionnez l adresse de l image (vous pouvez utiliser la navigation dans les répertoires ou saisir l adresse directement). Vous pouvez saisir un texte alternatif qui s affichera à la place de l image en cas de problème ou sur l image quand on passera la souris dessus. Pour ajouter un tableau, utilisez le bouton Laissez-vous guider : l utilisation est très intuitive. Pour ajouter un formulaire, utilisez le bouton : f. Les feuilles de style L éditeur CSS associé à NVU est Cliquez sur la palette pour afficher le menu déroulant et sélectionnez «feuille incorporée». Appuyez sur «Créer la feuille de style»

11 Puis sur «Exporter la feuille de style et utiliser la version exportée». Une fois la feuille créée, vous allez pouvoir créer des règles de style. Créez par exemple une règle qui s applique sur les paragraphes (balise <p>)

12 Appuyez que «créer la règle» Les autres onglets sont maintenant accessibles. Précisez les fonctionnalités que vous voulez voir appliquer à tous les éléments paragraphes. Cliquez sur «OK» lorsque vous êtes satisfait pour sauver vos réglages. Revenez sur la page aperçu : tous les éléments de type «paragraphe» sont modifiés. Vous pouvez ainsi modifier tous les styles prédéfinis. Pour une présentation du langage HTML et des feuilles de style, reportez-vous à la fiche pratique Coin- Web correspondante.