EDITEUR DE PAGE HTML NETSCAPE COMPOSER
Transcription
EDITEUR DE PAGE HTML NETSCAPE COMPOSER
FICHE PRATIQUE : Editeur de page HTML Netscape Composer EDITEUR DE PAGE HTML NETSCAPE COMPOSER Utilisation Netscape Composer est un éditeur de pages HTML : il vous permet de modifier et créer des pages au format HTML pour les diffuser sur le Web. Il est intégré dans la suite "Netscape Communicator" (Macintosh & Windows). Il a l'avantage d'être gratuit et simple d'utilisation. Vous trouverez Communicator sur le site de Netscape : http://home.netscape.com/fr/download/index.html Pour lancer Netscape Composer Après avoir lancé votre logiciel Netscape, l'accès au "Composer" se fait : ! par le menu Communicator : ! ou bien par la palette des outils de Netscape : Palette Palette :: Composer Composer PALETTE PALETTE :: FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 1 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Quand vous lancez le Composer de Netscape, une page HTML vide s'affiche : Barre d’outils du Composer (a) (a) (b) (b) a) barre d’outils de rédaction - créer un nouveau document - ouvrir un document existant - enregistrer un document - transférer le document sur le serveur - visualiser le document en consultation avec le navigateur - couper/copier/coller - imprimer - rechercher sur la page - créer un lien (ancre) - créer une étiquette (cible) - insérer une image - créer une ligne horizontale - créer un tableau - vérifier l’orthographe b) barre d’outils de formatage - définir le style du paragraphe - définir la police (selon polices installées sur le poste) - définir la taille de la police - définir les couleurs - enlever/mettre le caractère en gras - enlever/mettre le caractère en italique - enlever/mettre le caractère en souligné - supprimer tous les attributs du caractère - faire une liste à puce - faire une liste numérotée - décaler le paragraphe à gauche - décaler le paragraphe à droite - alignement du texte gauche/droite/centré FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 2 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Paramètrage du Composer Accéder aux préférences Comme pour tous les logiciels, un certain nombre de paramètres se définissent pour définir nos préférences de configuration et les options choisies parmi celles qui nous sont proposées par le logiciel. Pour Netscape Communicator, ils se définissent dans le menu >Edition > Préférences, puis choisir "Composer" dans la partie gauche de la fenêtre qui s'ouvre (zone sur fond blanc) : 2 niveaux de paramètres sont disponibles, un clic sur le "+" devant "Composer" permet de voir le sousmenu "Publication" : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 3 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Exemple de configuration Dans la fenêtre gauche, dans le menu Composer : Le nom de l'auteur c'est le nom qui sera dans la méta donnée "author" de vos pages HTML (invisible à la lecture du document mais consultable en ouvrant le source HTML de la page et souvent utilisé par les moteurs de recherche pour référencer les pages HTML dans leurs bases de données.) Les éditeurs externes paramètres facultatifs pour indiquer avec quel logiciel installé sur votre poste vous voulez pouvoir ouvrir le texte source HTML de la page (texte donc logiciels NotePad (PC) ou Teachtext ou SimpleText (Mac) ou Word etc.) et avec quel logiciel vous voulez pouvoir ouvrir les images. A noter : si vous modifiez des éléments, ces modifications ne sont validées que si vous cliquez sur le bouton <OK> de la fenêtre comme pour toute boîte de dialogue. FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 4 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Mode de taille de la police pour les textes de vos pages : Choix de paramètrage & résultats dans le Composer, en visualisation Web et dans le code source : Attention à la configuration de la taille des polices de votre navigateur pour l'option qui s'y rapporte : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 5 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Les images Dans la 2ème partie des configurations (cliquer sur la petite croix + pour développer l'arborescence du menu Composer si nécessaire pour voir l'option Publication) : Il est déconseillé de conserver les images avec la page : quand vous utiliserez une image dans plusieurs pages HTML elle serait systématiquement copiée dans les différents répertoires de ces pages HTML : encombrement inutile et difficulté de mise à jour. Les adresses de publication ne sont utiles que si vous utilisez le menu de transfert de Netscape (icône Publier). Lorsque vous avez réalisés vos fichiers HTML avec Netscape Composer, pour les diffuser sur le web, il est plus pratique de réaliser les transferts sur le serveur en utilisant le mode FTP (File Transfer Protocol). Ce système est beaucoup plus pratique, il offre des fonctionnalités très utiles par exemple pour envoyer plusieurs documents en même temps, pour créer un répertoire sur le serveur, … Des logiciels comme Fetch sur Macintosh ou WinFTP sur PC permettent de réaliser cette opération. Vous les trouverez par exemple sur le site FTP de Lyon2 (accessible avec un navigateur Web à l'adresse : ftp://ftp.univ-lyon2.fr/pub). FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 6 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Exemple de modifications d'une page existante Une fois le Composer lancé, j'ouvre le document à modifier qui se trouve sur le disque dur de mon micro (je parcours le disque dur de mon micro si nécessaire pour trouver mon document) : Les lignes pointillées représentent le tableau qui sert à la mise en page du document. Les images n'apparaissent pas mais leur emplacement est marqué par l'icône par défaut : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 7 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Modification du texte il suffit de positionner le curseur à l'endroit où l'on veut écrire et de taper son texte, supprimer les caractères, etc. Pour changer les caractéristiques du texte (niveau de titre, ou gras/italique/souligné, ou taille ou police …), il suffit de sélectionner le texte concerné et de choisir dans la barre d'outils les caractéristiques qu'on veut lui appliquer. Exemples : Insertion d'image je me positionne dans mon texte à l'endroit où je souhaite insérer une image et je sélectionne dans la barre d'outil l'icône appropriée : La boîte de dialogue qui concerne l'image s'ouvre : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 8 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer A l'onglet Image : ! mettre l'adresse de l'image (nom du fichier avec éventuellement son chemin relatif ou absolu selon l'endroit où est stockée l'image sur le serveur) ! choisir éventuellement la position du texte par rapport à l'image, ! conserver la taille d'origine (dans la plupart des cas), ! le bouton "Autre texte" peut éventuellement vous permettre de mettre le texte de remplacement de l'image. Exemple : Résultat : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 9 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Création d'un lien hypertexte il suffit de sélectionner le texte qui servira d'ancre : puis de choisir l'icône appropriée : dans la boîte de dialogue qui s'ouvre indiquer sur quelle page vous voulez envoyer votre lecteur lorsqu'il cliquera sur cette ancre : Résultat : Création d'un tableau Les tableaux sont souvent utilisés pour la mise en page de documents HTML afin de placer les différents éléments d'une page comme les colonnes de textes, la position des images, etc. On fait alors des tableaux avec des bordures à zéro. Les tableaux sont conformes au standard HTML 3 du W3C et sont donc lus directement par les logiciels de navigations dès la version 3 (Netscape 3, IE 3, …). On positionne le curseur à l'endroit de la page où l'on veut insérer le tableau, puis on choisit l'icône Tableau : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 10 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer La boîte de dialogue concernant les tableaux s'ouvre : Résultat : et après avoir rempli les cases du tableau dans le Composer : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 11 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Voir le résultat avec le navigateur (Aperçu): les cases vides du tableau n'apparaissent pas, si on voulait les voir aussi en rose (!) il suffirait de mettre un espace (barre d'espace) dans les cases qui étaient vides. Autre exemple d'utilisation d'un tableau pour la mise en page : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 12 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Création d'une nouvelle page Pour créer une nouvelle page : au moment de l'ouverture du Composer, une page vide s'ouvre. Sinon, vous pouvez aussi ouvrir une nouvelle page vide par le bouton Ouvrir de la barre d'outils de rédaction ou par le menu Fichier : Dans la page vide vous tapez votre texte : Vous travaillez la présentation comme pour une modification de page (insertion d'image, gras/italique, niveau de titre, création de lien hypertexte, etc). Enregistrement de la page Enregistrer le document dans le répertoire de votre micro où vous le souhaitez en lui donnant un nom : Répertoire Nom du document FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 13 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Création d'un titre pour la page Un titre vous est demandé au premier enregistrement de la page. Par défaut, il vous propose le nom du fichier que vous venez de choisir. Pour ce titre, vous pouvez mettre une phrase : titre proposé par défaut = nom du fichier titre choisi Il est recommandé de mettre un titre significatif parce que ce titre : " apparaît pour votre lecteur en haut de la page, " est le nom par défaut du signet (favori) que votre lecteur peut vouloir mémoriser pour accéder à votre page ultérieurement, " est utilisé par les moteurs de recherche pour indexer votre page. Modification des propriétés et des couleurs de la page : par le menu > Format > Propriétés et couleurs de la page : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 14 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Modification du titre & de l'auteur Dans la boîte de dialogue des Propriétés de la page qui s'ouvre, vous avez par l'onglet Générales accès à la modification du titre & de l'auteur de la page : ✔ ✔ Modification des couleurs de la page Toujours dans les propriétés de la page, par l'onglet Couleurs et arrière-plan, vous pouvez éventuellement modifier les couleurs de la page : du fond, de l'écriture, des liens hypertextes, … voir même utiliser une image en fond. Il vaut mieux rester simple et ne pas oublier que vos lecteurs n'ont pas la même configuration matérielle et logicielle que vous et donc ne verront pas les couleurs comme vous. Soyez prudents si vous les modifiez : elles doivent faciliter la lecture du document donc les couleurs excessives ou trop peu contrastées (écriture/fond) sont à éviter. FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 15 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer Pour modifier une couleur :cliquer dessus pour en choisir une autre : Des modèles de couleurs pré-définis vous sont aussi proposés par Netscape : FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 16 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation] FICHE PRATIQUE : Editeur de page HTML Netscape Composer TABLE DES MATIERES : EDITEUR DE PAGE HTML NETSCAPE COMPOSER............................................................................ 1 Utilisation.................................................................................................................................................. 1 Pour lancer Netscape Composer ............................................................................................................... 1 Barre d’outils du Composer ...................................................................................................................... 2 a) barre d’outils de rédaction ........................................................................................................ 2 b) barre d’outils de formatage....................................................................................................... 2 Paramètrage du Composer ........................................................................................................................ 3 Accéder aux préférences ....................................................................................................................... 3 Exemple de configuration ..................................................................................................................... 4 Le nom de l'auteur............................................................................................................................. 4 Les éditeurs externes ......................................................................................................................... 4 Mode de taille de la police ................................................................................................................ 5 Les images......................................................................................................................................... 6 Exemple de modifications d'une page existante ....................................................................................... 7 Modification du texte ............................................................................................................................ 8 Insertion d'image ................................................................................................................................... 8 Création d'un lien hypertexte .............................................................................................................. 10 Création d'un tableau........................................................................................................................... 10 Création d'une nouvelle page .................................................................................................................. 13 Enregistrement de la page ................................................................................................................... 13 Création d'un titre pour la page ........................................................................................................... 14 Modification des propriétés et des couleurs de la page : .................................................................... 14 Modification du titre & de l'auteur.................................................................................................. 15 Modification des couleurs de la page.............................................................................................. 15 FICHE PRATIQUE Editeur HTML Netscape Composer - © [email protected] -Page 17 sur 17 Mars 2001, Mise à jour : 13/04/01 (Version 2.0) [http://www.univ-lyon2.fr/sentiers/formation]