Liens complémentaires

Eléments de base pour la création de pages Internet sur NVU



I. Structuration du site

Elle consistera à créer un dossier qui comportera des sous-dossiers : un pour les images (img par exemple), un autre pour le son (si nécessaire), d'autres pour les sujets abordés dans le site. Par exemple : 'lecture", 'ecriture' etc. Dans cette phase d'apprentissage, on pourra nommer le dossier 'txt'.

Le nommage des dossiers et fichiers est très important, et demande une vigilance de tous les instants. Ainsi, on écrira "écriture" ecriture... tous les accents, cédilles, sont proscrits : nous sommes sous la loi de l'ASCII ("American Standard Code for Information Interchange"). Mieux vaut se limiter à l'usage des minuscules. Sont proscrits aussi les espaces entre mots : on utilisera le caractère de soulignement (ou underscore, la touche du chiffre 8) pour produire_un_effet_d'espace...

II. Création d'un modèle

  1. Réglage des couleurs (charte graphique de base)
    - Commande Format > Couleurs et fond de page
    - Cocher "Couleurs personnalisées" et choisir les couleurs selon la règle du contraste optimal (entre le fond de page - pastel, atténué - et le texte ; entre la couleur des caractères et les différents types de liens, etc.).
    Nota : pour être sûr de créer des pages "harmonieuses" : à partir d'une reproduction de tableau contemporain, dans un logiciel de traitement d'image numérique, utiliser la pipette, et coller les codes (qui commencent par un #).
  2. Création d'un cartouche pour le titre
    - Dans la barre des icônes : icône Tableau > sélectionner une seule cellule
    - Une fois celle-ci en place > clic droit > propriétés cellules : procéder aux réglages comme dans l'illustration ci-dessous.

    Propriétés du tableau

    - Clic sur la bordure du tableau  > centrer (barre de mise en forme).
    Nota 1 : on choisira dans tous les cas une largeur en pourcentage afin d'obtenir un affichage sorrect quelle que que soit la taille de l'écran du visiteur de vos pages.
    Nota 2 : Inutile de préciser la hauteur, elle s'adaptera au contenu de la cellule.

    - Saisir le titre de la page, déterminer la police (Verdana, ou Georgia par exemple) et la taille des caractères (commande "Format").
  3. Création d'un tableau pour gérer la cohabitation de texte et d'images
    - Dans la barre des icônes : icône Tableau > sélectionner 6 cellules comme ci-dessous.

    2 cellules ont été fusionnées
    Emplacement pour une image Emplacement pour du texte
    etc. etc.

    - Clic droit > Propriétés tableau : 90% de la page (ou ce que vous souhaitez...).
    Vous pourrez ainsi associer texte et images. Si sur une ligne vous souhaitez une seule cellule, sélectionner les deux cellules > clic droit > fusionner. Si au contraire sur une ligne vous souhaitez 3 cellules : clic droit > insérer.
    Nota 1 : les cellules sont élastiques. Quand on insère un contenu, leurs dimensions peuvent varier, et on peut ajuster leurs dimensions sur la règle (sous les onglets où figure le nom de la page).
    - Rendre le tableau invisible (c'est un pur artifice de mise en page) : clic droit sur le tableau > Propriétés cellule > Onglet Tableau : Bordure 0 pixel.
    Nota 2 : Pour positionner une image dans une cellule, on peut le faire soit à partir d'un clic droit sur l'image > Propriétés Images > onglet "Apparence" ; soit en cliquant sur le bouton d'alignement adéquat.

  4. Création d'un cartouche pour la signature : même démarche que pour le titre.

    Alain Salvatore - Service TICE - IUFM de Paris - 2005/2006

    Une fois la page de modèle correctement configurée, commande "Fichier" > Enregistrer sous > naviguer pour trouver le dossier conteneur de votre site, et la nommer "modèle.html" : l'accent grave servira ici à vous rappeler que cette page n'est pas destinée à aller sur le réseau. Elle vous servira à générer d'autres pages.

    On nommera la page d'accueil du site 'index.html', placée "à la racine du site", c'est-à-dire sur le même plan que les dossiers que nous avons créés ('txt', 'img', etc.). Pour les pages de contenu, on les placera dans le dossier 'txt', ou dans un dossier avec un nom explicite quant-à son contenu.

    Nota : au moment où vous allez enregistrer, une fenêtre apparaît qui vous demande un titre pour la page. C'est l'équivalent du "titre courant" qui apparaît en haut des pages d'un roman, par exemple. Il figurera dans la barre de titre du navigateur Internet. Vous pouvez vous exprimer ici en "langage narurel" (Majuscules, signes de ponctuation, etc. "Bienvenue sur mon site !").

    III. Création de liens

La technique est simplissime : Sélection d'un mot, d'un groupe de mots, d'une image > icône Lien :
Lien hypertexte

On distinguera les liens "externes", pour lesquels on saisira avec la plus grande rigueur l'adresse internet (http://www.google.fr ou http://formation.paris.iufm.fr) dans le champ de saisie "Emplacement du lien", et les liens internes (des pages de votre site) pour lesquels on cliquera sur le bouton Parcourir.

Pour tester les liens : Ctrl + s (sauvegarde le fichier) > Icône Navigateur.

Nota 1 : il peut être souhaitable que les liens externes s'ouvrent dans une autre fenêtre que celle de votre site (pour ne pas perdre ses visiteurs...) : dans la fenêtre "Propriétés du lien", on cliquera sur le bouton Plus de propriétés > cocher "Le lien doit s'ouvrir" > dans une nouvelle fenêtre.
Nota 2 : il est possible de créer des liens vers des adresses de courrier électronique (dans ce cas, le clic ouvre le logiciel de messagerie). Dans "Emplacement du lien", on saisira "mailto:adresse.electronique@courrier.org".

Ancres

Sur les pages longues, il peut être judicieux (comme dans cette page) d'utiliser des ancres (ou "signets") pour faciliter le déplacement dans la page. Vous êtes ainsi à la hauteur du signet "III".
- Dans un premier temps, créer les "ancres" à l'aide du bouton qui porte ce nom (on essaiera de se limiter à deux ou trois caractères).
- Faire un sommaire, et lier (bouton Lien) les items du sommaire aux ancres : cliqer sur le bouton Parcourir pour trouver le fichier dans lequel on se trouve ; en cliquant sur l'onglet à droite du champ, les ancres apparaissent, précédées d'un signe dièse (#).

Nota : il est possible d'appeler des ancres à partir d'un autre fichier que celui dans lequel on se trouve. Pour ce faire, créer un lien dans cette page vers la page qui contient les ancres, et saisir "à la main", après "html" le nom du signet précédé du signe dièse (Alt Gr et touche du chiffre 3).
 
'tech_nvu.html#II' par exemple...

IV. Insertion d'images

Même technique que dans un traitement de texte : bouton Image > Parcourir et sélectionner (normalement les images doivent se trouver dans un dossier qui leur est dédié...).

Contraintes particulières :

  • le positionnement : c'est ainsi que peut intervenir le tableau comme artifice de mise en page...
  • les dimensions : dans le cas de modifications importantes, on utilisera un logiciel dédié de manipulation d'images (Microsoft Photo Editor livré avec Office, ACDSee, PhotoShop, Paint Shop Pro, Gimp, etc.). Si les modifications sont minimes, on se contentera de cliquer droit sur l'image > Propriétés > onglet "Dimensions".
    Il doit être entendu qu'en utilisant cette méthode, le poids de l'image ne variera pas d'un octet...
  • le poids de l'image : sauf cas exceptionnels, dans les alentours des 50 ko. Il est nécessaire de passer par un logiciel de traitement d'image numérique (PhotoShop > commande Fichier > Enregistrer pour le web - ou Gimp).

V. Mise en ligne

Veiller à ce que toutes vos modifications dans les pages aient été enregistrées (Ctrl + s)...
Pour la mise en ligne, vous aurez besoin d'un logiciel FTP, de connaître l'identité du serveur, de votre identifiant et de votre mot de passe sur ce serveur.

Le logiciel FTP

NVU dispose d'un module FTP, mais qui ne me semble pas très fiable... On utilisera plutôt Internet Explorer (que vous avez forcément sur vos machines...), WS-FTP, FileZilla. Pour tout savoir sur le FTP sur Mac...

Le serveur

formation.paris.iufm.fr (sur Internet explorer, saisir ftp://formation.paris.iufm.fr).

Identifiant et mot de passe

Les vôtres, et je n'en dirai pas plus...

L'adresse internet de votre site

http://formation.paris.iufm.fr/~identifiant/

Nota 1 : il peut être judicieux, dans votre dossier "sites" (c'est le seul qui permet la publication) de créer un dossier nommé "old" dans lequel vous glisserez une version ancienne de votre travail avant de transférer la nouvelle. C'est une sécurité.

Nota 2 : vous le constaterez rapidement : dans le protocole ftp, on ne peut supprimer que des dossiers vides (prudence...). Il faut donc ouvrir le dossier concerné, supprimer son contenu (Ctrl + a pour sélectionner la totalité), remonter dans l'arborescence et supprimer le dossier désormais vide...

Alain Salvatore - Service TICE - IUFM de Paris - 2005/2006