La création de pages WEB
|
La création de pages WEB |
|
Vous trouverez un exemple de ce cours à l'adresse suivante : http://www.comete.ch/~cep/did/index_did_1.html.
Un exemple du travail final se trouve à l'adresse suivante : http://www.comete.ch/~cep/did/.
Pour aller directement à une étape de votre travail, utilisez un des liens suivants :
Une fois Claris Home Page lancé, une nouvelle page s'affiche, ainsi qu'une barre de menus et des barres d'outils.
Figure 5 : Barre de menus
Figure 6 : Barres d'outils
Il nous faut dans un premier temps indiquer à Claris Home Page quel dossier nous allons utiliser pour enregistrer les fichiers constituant notre site. Pour ce faire, il faut :
L'éditeur de site apparaît. Il nous permettra de gérer nos fichiers.
Dans un premier temps, nous allons enregistrer la nouvelle page vide comme étant notre Home Page. Nous la nommerons "index", ce qui est la coutume pour la première page d'un site.
Le titre apparaît dans la fenêtre de notre navigateur Web (Netscape ou IE) voir la Figure 7 ci-dessous.
Ce n'est pas le nom de notre fichier et nous pouvons donc utiliser tous les caractères de notre clavier, accents et espaces compris.
Figure 7 : Titre dans Netscape
Afin de ne pas oublier que nous faisons une page pour le Web, devant être lue sur un écran, nous allons demander à Claris Home Page de nous afficher notre nouvelle page Web au format d'écran le plus courant qui est une fenêtre de 640 pixels X 480 pixels.
Afin de rendre notre page un peu plus "sexy", nous pouvons définir un ensemble de couleurs pour le fond de la page (l'arrière-plan), le texte et les liens.
Cependant, pensons que notre page doit rester lisible. Donc accordons la couleur du fond avec le texte et ne jouons pas trop sur les contrastes violents (par exemple, fond bleu-roi avec texte rouge vif)
Figure 8 : Arrière-plan - Onglet "Apparence" des Options du Document
Toujours dans les "Options du document", nous pouvons définir la couleur pour le texte et les liens.
Figure 9 : Couleur du texte - Onglet "Apparence" des Options du Document
Nous allons tout d'abord taper notre titre de bienvenue.
Figure 10 : Utilisation des styles prédéfinis
Figure 11 : Alignement du texte
Nous poursuivons en entrant un petit texte d'introduction expliquant ce que les visiteurs vont trouver dans ces quelques pages. Le texte prend par défaut la couleur prédéfinie dans les options du document, mais il est possible d'en changer la couleur en sélectionnant un mot (ou un groupe de mots) et en utilisant l'outil "couleur du texte" :
Figure 12 : Couleurs des caractères sélectionnés
Nous pouvons aussi mettre un mot (ou un groupe de mots) en gras ou en italique à l'aide des boutons suivants :
Figure 13 : Gras ou italique
Si nous souhaitons mettre un mot (ou un groupe de mots) avec une taille de caractère plus grande ou plus petite, nous utilisons les boutons suivants :
Figure 14 : Modification de la taille des caractères
Oups! Pendant qu'on y pense, nous allons enregistrer nos modifications en cliquant sur l'icone de la disquette :
Figure 15 : Enregistrement du fichier
Claris Home Page possède une bibliothèque d'images que nous pouvons utiliser pour agrémenter nos pages.
Figure 16 : Menu contextuel de la bibliothèque d'images
Nous pouvons procéder de la même manière pour insérer une image dans la page et non comme arrière-plan. Il suffit de choisir l'option "Insérer dans la page", en indiquant notre page index.html.
Avant de terminer notre travail de ce jour, nous allons insérer en bas de page un lien sur notre e-mail afin que nos visiteurs puissent nous faire part de leurs commentaires ou de leurs questions.
mailto:Didier.Strasser@pse.unige.ch
Figure 17 : Créer un lien vers son e-mail
Il reste une dernière procédure à effectuer avant de terminer notre travail : regrouper nos fichiers. En effet, il est indispensable de passer par cette procédure, sans quoi les fichiers images provenant de la bibliothèque ne seront pas intégrés dans le répertoire images que nous avons créer.
Figure 18 : Regrouper un site Web
Figure 19 : Paramètres du regroupement
|
Retour à la page du cours | |