Atelier Composition Web

Objectif général de l'atelier  :

  • Réaliser la structure de sa page personnelle à l'aide de l'outil KompoZer

Référence : voir RESSOURCES iTIC:

Rappel : quand vous vous connectez à l'université sous vos coordonnées, utilisez préférentiellement le navigateur " Firefox " pour que les caractéristiques de votre cheminement sur le web soient conservées (historique des liens parcourus, signets).

 PRINCIPE : Vous découvrez la structure interne d'une page Web et comment elle est construite. Vous utilisez vos signets.


A. Introduction - durée estimée : 15 min
  1. Consulter la fiche technique "Composition web", lire le point " Qu'est-ce qu'une page web ? "

SENS : Une page Web utilise le langage universel des pages Web, le HTML. On notera que les images ne sont pas dans la page Web, mais appelées (en indiquant l'URL des images). L'utilisation des signets vous permet de retrouver plus rapidement une page Web visitée ultérieurement.








PRINCIPE : Vous préparez le fichier qui va devenir votre page personnelle et vous apprenez à enregistrer un fichier dans un emplacement précis de votre espace privé.

B. Préparation de l'activité - durée estimée : 15 min
  1. Lire le 2e point de la fiche de ressource " Avec quel outil réaliser une page web ? "
  2. Garder le navigateur Firefox ouvert
  3. Ouvrir KompoZer, en cliquant sur Démarrer/Programmes/KompoZer
  4. Dans KompoZer,

SENS : Vous venez de réaliser votre première page HTML qui deviendra votre page d'accueil personnelle visible ultérieurement sur le Web. Vous la sauvez dans votre espace privé pour le moment, car elle est en cours d'élaboration.






PRINCIPE : Vous apprenez à introduire dans une page Web des tableaux dans lesquels vous allez pouvoir organiser des informations, des images et des liens (internes et externes). Vous savez faire la différence entre liens internes et liens externes.



C. Activité sur base d'un canevas de page : durée estimée - 1h25


  1. La page perso que vous allez réaliser va avoir la structure ci-contre :
    En réalisant les différents éléments de cette structure, vous aurez passé en revue les éléments principaux constituant une page web.
    Cet atelier ne constitue bien entendu qu’un premier pas…







  2. Si vous souhaitez plus tard changer le titre de la page, qui apparaîtra dans le menu titre du navigateur : Format / Titre et Propriétés de la page
  3. titre_page

  4. insertion_tableauPremière étape dans la construction de votre page, créer un tableau dans lequel vous allez venir positionner les différents éléments du canevas. C'est la seule manière de structurer des éléments sur une page web.
    Avant d'insérer le tableau, faire un retour à la ligne puis cliquer sur l'icône du tableau tableau, une fenêtre vous permet notamment de sélectionner le nombre de colonnes, de lignes et la taille de la bordure : par défaut, KompoZer indique 2 lignes/2 colonnes/bordure 1. Vous changez uniquement la bordure que vous passez à 0. Puis vous cliquez sur "OK"





  5. SENS : Le HTML ne permet pas facilement les mises en pages subtiles. L'usage d'un tableau permet de définir des blocs dans la page.






  6. Il s'agit maintenant d'insérer une image d'accueil que vous avez sauvée dans votre répertoire perso dans un précédant atelier : H:/PRIVE/pageperso/images (si vous n'avez pas pu la placer avant, appelez un tuteur)
  7.            Positionner le curseur dans la cellule en haut à gauche du tableau (voir la structure de page ci-dessus)
               Insertion/Image : sélectionner l'image dans le répertoire H:/PRIVE/pageperso/images (pour voir les fichiers images: choisir le bon format de fichier (il existe deux formats principaux : .gif et .jpeg), puis cliquez sur Ouvrir

    PRINCIPE : Nous avons en fait du code HTML qui va appeler l'image. Elle n'est pas vraiment insérée dans la page.







Ecrire un message d'accueil - Bienvenue chez… ou Vous êtes chez… (dans cellule en haut à droite)
Insérer un lien vers l'adresse électronique (sous le message d'accueil)
Ecrire votre adresse mail ou un texte du genre " Pour m'écrire "
Cliquer sur l'éditeur de lien lien, sélectionner à l'aide de votre souris l'adresse mail ou le texte que vous avez écrit et écrire dans l'éditeur de lien  "mailto:votreadressemail"

Sauvez le document (Fichier/enregistrer)…faites ça régulièrement comme dans tout travail de production sur un ordinateur…

    5. Insérer un lien interne : il s'agit d'un lien vers une page qui est interne à votre " site " pageperso. Pour rendre le bookmark (liste de signets) accessible depuis votre page perso, on va faire un lien vers ce fichier qui se trouve déjà normalement dans votre répertoire H:/PRIVE/pageperso (si ce n'est pas le cas, appelez un tuteur). Retenez que ce lien est " relatif ", vous irez voir dans la fiche online " Composition web " ce que cela signifie :

            commencer par écrire dans la cellule du tableau en bas à gauche, " Mes liens favoris "
            sélectionner le texte et en gardant dessus le pointeur de la souris, sélectionner " Lien " lien
            dans la fenêtre de sélection du fichier, trouver le fichier bookmark.htm (dans H:/PRIVE/pageperso) et cliquer sur " Ouvrir "


SENS : Les liens hypertextes externes sont essentiels dans le Web pour relier les pages entre elles. Les écrans ne peuvent pas toujours permettre de voir toute la longueur d'une page, d'où l'intérêt des liens internes dans une page Web.





    6. Insérer des liens externes : il s'agit de liens vers des pages externes à votre " site " page perso. Il s'agit de faire un lien vers une adresse complète d'une page : on appelle ce lien un lien " absolu ". On va faire ces liens vers les pages d'accueil de l'UniGE et de la FAPSE :

            écrire l'un en dessous de l'autre (après " Mes liens favoris " ou avant), " L'Université de Genève ", " La FAPSE " même procédure que pour les liens précédents,
            sélectionner l'icône Editeur de lien lien ou selectionner le texte qui fera le lien de la page externe, par exemple "L'Université de Genève", après, cliquer avec le button droite de la souris . une fenêtre apparaît dans laquelle vous indiquez l'adresse de la page d'accueil du site que vous avez sélectionné (pour UniGE - http://www.unige.ch), laisser la fenêtre de lien ouverte et sélectionner l'autre site (La FAPSE) et inscrire l'adresse correspondante dans la fenêtre de l'éditeur de lien (http://www.unige.ch/fapse), cliquer sur le dernier lien réalisé et fermer la fenêtre (x)

lien_externe

lien proprietes

PRINCIPE : Pour établir un lien vers une position particulière de la page, il faut créer un repère ; il s'agit d'une ancre.

Faire une sauvegarde du document (Fichier/Enregistrer)

    7.Insérer une ancre  : il s'agit d'un lien à l'intérieur de la page qui permet de naviguer plus facilement surtout quand la page est un peu longue à faire défiler. Le principe est de  mettre une " ancre " à un endroit déterminé, vers laquelle on peut pointer depuis un lien dans la page. Une ancre très habituelle est celle qui permet de revenir en haut de la page. Pour le moment, votre page est encore vide et vous n'en verrez pas l'utilité mais dès qu'elle sera plus longue ce sera évident.

            Placer le curseur au-dessus du tableau, cliquer sur l'icône d'ancrage ancre, changer le nom inscrit par défaut dans la fenêtre (ancrage) par " top ".
            En dessous du tableau, écrire " [haut de la page] ", sélectionner le texte et ouvrir l'éditeur de lien; écrire : #top, cliquer sur le lien et fermer la fenêtre de l'éditeur.

inserer_ancre

    Faire une sauvegarde du document (Fichier/enregistrer)

    Ajouter une indication de la date de mise à jour en bas de page

    Tester des fonctions de mise en forme

    Mettre en italique " Mise à jour : … " Réduire la taille de caractère de " haut de la page " et " mise à jour "  taille_lettre

    Ecrire un petit texte de présentation dans la cellule en bas à droite du tableau

    Ce message est important, vous n'aurez pas beaucoup de temps pour le peaufiner dans cet atelier : nous vous suggérons de le reprendre plus tard. Pour avoir une idée de ce que vous pouvez y mettre, allez par exemple voir des pages d'autres étudiant(e)s (voir dans l'iTIC - depuis les projets des autres années).

    Faire une sauvegarde du document (Fichier/enregistrer)

    Pour vérifier que vous avez bien réussi toutes les étapes : cliquer ici

Pour ceux qui voudraient aller plus loin : voir les ressources d'approfondissement.

SENS : Vous avez intégré dans votre page personnelle les éléments essentiels à connaître pour composer une page Web (tableaux, informations, liens, images). Vous savez mettre en forme des informations et créer des liens externes et internes. Cette page n'est pas encore visible sur le Web.
Au niveau du contenu, cette page représente un résumé partiel de votre situation et de vos centres d'intérêt. La date est un indice de validité des données. La référence à l'Université permet de contextualiser cette page ; on sait qu'il s'agit d'une page d'étudiant(e), dans le contexte d'un cours.


dernière modification: M.V  Retour à la page d'accueil de l'EO771L apprend