| Comment faire un site Internet
|
Leçon 2
Les pages du site.
La deuxième leçon
sera de créer les pages dont tu auras besoin pour construire un site web.
Tu te servira du
modèle de la Première page de la leçon 1 et tu la modifiera
avec Front Page pour avoir plusieurs pages
différentes qui te permettront de réaliser un site similaire à celui-ci. Tu construira dans l'ordre : Le menu, la page titre et
quelques pages de contenu. Tu te serviras aussi de
la page créée dans la leçon 1. Pour terminer, tu vas préparer
une page INDEX qui sert à faire le lien entre les pages. Quand tes pages seront
prêtes, tu passera à la leçon 3 où tu placera ton site sur internet.
|
Recommandation:
Veillez garder cette page ouverte en
redimensionnant votre navigateur à
la moitié de l'écran afin de lire les instructions. Dans l'autre
moitié de l'écran,
redimensionnez la fenêtre de Front Page.
|
Tout est prêt ? Allons-y!
Première page : Le menu
D'abord dans Front Page, ouvre le fichier
menu_model.htm qui est dans le répertoire de
la leçon2. Vérifie que tu es bien en mode de visionnement NORMAL (Onglet
en bas à gauche de l'écran). Va dans
l'onglet "Fichier"
( ou File) et "sauvegardez sous", choisis le répertoire "lecon2/Mon nouveau
site" et
indiquez le nom menu.html.
La page que tu as est définie avec une
couleur de fond Hex={CC,CC,99}. pour la changer, va sous
l'onglet "Format" dans l'option "Background"
et choisis ta couleur. Remarque ce code de couleur, il pourrais t'être utile
pour comparer des couleurs. Pour l'instant, choisis la même que mon site. Nous
verrons plus tard comment choisir les couleurs
du fond ou des images de fond en fonction des couleurs de texte pour garder
la facilité de lecture de tes pages.
Sauvegardes à nouveau ce fichier. Nous le complèterons
plus tard dans la lecon.
Seconde page : La page titre
Ouvre la page
logo_model.htm qui est dans le
répertoire de la leçon 2, va dans
l'onglet "Fichier"
( ou File) et "sauvegardez sous", choisis le répertoire "lecon2/mon nouveau
site" et change le nom du fichier pour :
logo.html.
Tu peux alors
Autres pages : pages de contenu
Utilise le même processus de
sauvegarde que pour les pages précédentes
pour créer successivement les pages suivantes à partir du fichier
accueil_model.htm :
lec2page1.html
lec2page2.html
lec2page3.html
lec2page4.html
accueil.html
Tu as donc maintenant créé 7 pages : menu, logo, 4 pages
de contenu
et une page d'accueil. Ou plutôt, 8 pages incluant la page créée
dans la lecon 1. Il faudrait que tu ramène cette page dans le même
répertoire que tes nouvelles pages :ouvrir dans Front Page le fichier
lec1page1.html et le sauvegarder
dans le répertoire "Mon nouveau site" de la "lecon2".
Création du logo de la page titre
Ta page titre est vide. Dans cet exercice, il s'agit d'ajouter un tableau qui contienne
un fond avec l'image choisie et d'y inscrire ton titre de site. L'encadré
suivant présente le code pour reproduire exactement le logo de mon site.
Énoncés à Copier / coller
<div align="center">
<center>
<table border="1" align="center" summary="">
<tr style="background: url('images/IMGP0255b.jpg') ; "height="111" width="1660"
alt="" border="2">
<td align="center"><font size="6" color="silver">
<!--
******************************************************* -->
Vous pouvez changer ce titre
</font>
</td>
</tr>
</table>
</center>
</div>
|
En fait, il s'agit
d'ajouter un tableau
qui contienne
un fond avec l'image choisie et d'y
inscrire le titre du site que tu désire. Cette méthode
te permet de "voir le code"
html et de comprendre de façon sommaire une des nombreuses utilisations des
tableaux.
Pour cela, ouvre ton fichier logo.html
du répertoire "mon nouveau site" de la
Leçon 2 avec Front Page.
À l'aide de l'onglet "Table" (en haut), insère
une table d'une (1) cellule. Tu peux en même temps désigner l'alignement
"center" pour centre ton titre.
Ensuite, examine ce qui est écrit en rouge dans le cadre ci-haut et
replacez tous ces mots dans le programme source en cliquant sur l'onglet du bas
pour le visionnement HTML . Pour voir si c'est correct, utilise l'onglet du bas
Preview. Notez bien: les espaces et tous les signes orthographiques
sont à respecter intégralement sinon l'ordinateur ne comprendra
rien ! Exemple : <tdalign... doit être <td
align=...etc... L'ordinateur change automatiquement la couleur du texte
lorsqu'il comprends la commande... alors porte attention aux signes qu'il
t'envoie !
Si ça ne marche pas, ouvrez le fichier
model_logo.html et sauvegardez-le sous le nom logo.html et continuez
la leçon, c'est pas grave, vous y reviendrez plus tard à
tête reposée...
Remplir la
page d'accueil
C'est la première page qui apparaîtra sur ton site. C'est en quelque
sorte
celle qui annonce, c'est la vitrine de ton site, ta marque de commerce etc...
Elle doit être super belle sans quoi les internautes passeront vite par dessus
ton site pour aller voir des sites plus attirants. Et tes amis ne te
diront
pas la vérité à ce sujet... Alors, penses-la avec beaucoup d'imagination.
Tu apprendras ici comment insérer une image dans
ta page, tu rédigeras un
petit mot de bienvenue aux visiteurs, Tu pourra y ajouter une brève
explication
du fonctionnement de ton site et son plan et comment on y navigue. Je te
montrerai aussi comment faire référence à d'autres site en y mettant des
signets.
Dans le dossier
"images"du répertoire de la Leçon 2, j'ai enregistré quelques images que tu
pourra utiliser. Peu importe où tu la prends, choisis une image qui te plaît
mais qui est peu contrastée pour faciliter la lecture du texte que tu placera
sur l'image.
Commençons:
Dans Front Page, ouvre
la page accueil.html de ton répertoire
"Mon nouveau site"
Ajuste la justification du texte à "texte centré" (avec le bouton
de la barre d'outil).
Dans l'onglet "Insert", ouvre
"Picture" et "From file", choisis une image à ton goût et double-clique
dessus. Tu peux la redimensionner en allant dans le code HTML, en changeant la largeur
width=" " et la hauteur
height=" ". Entre les
guillemets indique le nombre de pixels.
Exemple : <img border="0" src="../images/IMGP0255b.jpg"
width="648" height="148">
Ajoute quelque part sur la page
ton mot de
bienvenue, le plan du site, la façon de l'utiliser, etc.
Utilise le
visionnement Preview pour voir
le résultat.
Ce sont des liens externes ou tout simplement des hyperliens.
Ajoute un signet pour un site qui
te plaît. C'est ce qu'on appelle un hyperlien. Sur une ligne tape le
Nom
de ce site et une brève description. Immédiatement après cela, sur une autre
ligne,
insère une icône centrée (si tu n'en as pas, j'en ai mis dans le dossier
icone du repertoire
de la Leçon 2).
Place le curseur sur l'icône et avec le bouton droit de la souris, ouvre
Hyperlink. Dans le panneau hyperlink, choisis target
et choisis Nouvelle fenêtre, si tu veux que la page nouvelle ouvre sa propre fenêtre
tout en laissant la fenêtre de ton site ouverte.
Ce genre de liens peut diriger
autant vers des sites sur internet que vers d'autres pages de ton site. Les
astuces de la fin des leçons vont t'aider à mieux comprendre l'insertion des
hyperliens.
Liens vers
points précis de tes pages
Ces liens sont ce qu'on appelle des liens
internes. Ils réfèrent à des endroits particuliers dans les pages de ton
site. Les astuces de la fin des leçons vont t'aider à
mieux comprendre l'insertion des liens internes.
Tes coordonnées.
Il est toujours intéressant pour le visiteur de ton site de pouvoir te rejoindre. Il peut vouloir
de l'information, te passer des remarques, corriger des fautes, te
faire des
suggestions, et même t'engager ! Pour cela tu vas
ajouter un lien
vers ton courriel.
Inscris au centre en bas de la page, "Pour me rejoindre : Je m'appelle (ton vrai nom ou
un pseudonyme)". Saute une ligne et choisis un icône que tu insère à cet
endroit.
Il ne reste plus qu'à faire l'hyperlien de type
mailto
: Place le curseur sur l'icône et avec le bouton droit de la souris,
ouvre Hyperlink (ou dans le menu de l'onglet INSERT au haut de la
fenêtre) et ouvre
le bouton E-Mail Adress et
compléte le formulaire. Tu y inscris ton adresse de courriel
et sur la ligne sujet (subject) un énoncé qui te convient.
Remplir les autres pages
Ouvres les quatre autres pages et ajoutes-y le contenu que tu désire. Pour
accélérer la réalisation du site, inscris simplement dans chacune un titre
par exemple page 1, page 2 ou autre chose différente à chaque page,
car nous aurons besoin de les distinguer les unes des autres pour vérifier si le site fonctionne.
Remplir la page Menu
Maintenant que ta structure est mieux connue et que tes pages sont faites, il
faut construire le menu de navigation pour que l'internaute ait accès à ces
pages facilement. Ouvre la page
menu.html de ton dossier "Mon nouveau site"
du répertoire de la Leçon 2.
Environ au tiers de la page, aligné à la gauche de
l'écran, inscris à double interligne :
Accueil
Page leçon 1
Leçon 2
Page 1
Page 2
Page 3
Page 4
Il ne reste plus qu'à faire des hyperliens sur chacune des
pages comme je viens de te le dire.
La seule précaution à prendre : c'est de choisir la bonne page avec le bon
nom de page !
