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]