GUIDE D`UTILISATION CRÉER SON SITE WEB

GUIDE D’UTILISATION
CRÉER SON SITE WEB - PROJET RESCOL
1. Avant de commencer
Il existe plusieurs éditeurs de pages Web qui vous permettent de construire
un site Web. Nous vous conseillons toutefois de travailler avec Front Page
Express de Microsoft. Il est accessible gratuitement sur Internet et il est
facile d’utilisation pour les débutants.
Avant de commencer à travailler avec le logiciel, il faut s’organiser et
télécharger le logiciel.
2. Le plan - l’organisation «papier»
Pour la réalisation de votre site Web, vous aurez besoin d’un plan «papier»
de votre site: les images ou dessins que vous désirez mettre sur le site;
les textes de l’activité; etc. Votre site doit avoir un minimum de cinq pages
pour rencontrer les exigences de Rescol à la Source.
La première chose à faire est donc de décider de l’organisation de votre
site. Prenez une feuille de papier et essayez d’illustrer rapidement à quoi
devrait ressembler votre page d’accueil, celle sur laquelle on arrive lorsque
l’on indique votre adresse de site Web. Donnez-lui un nom (par exemple
index.html). Faites la même chose pour les autres pages. Écrivez également
sur ces pages, ce que vous aimeriez y retrouver.
Voici, par exemple, l’illustration de cinq pages brouillon d’une très simple
organisation «papier» d’un site Web pour le projet du Dictionnaire.
Exemple d’organisation «papier»
3. Installer Front Page Express
Vous devez maintenant installer le logiciel Front Page Express. Il est possible que votre école ou l’ordinateur de votre classe ait déjà ce logiciel.
Vérifiez donc s’il n’est pas caché sur votre disque dur. Faites une recherche sur fpe.exe dans le répertoire C:/Program Files/. S’il est déjà installé,
vous pouvez le faire démarer directement en double-cliquant sur le fichier
trouvé. Si vous ne trouvez rien, c'est qu'il n'est pas installé.
Vous pouvez le télécharger gratuitement sur le site de Memoclic. Rendezvous à cette adresse sur Internet:
http://www.memoclic.com/divers/download/telecharge38.php
Cliquez soit sur l’image de la disquette ou de la fenêtre ouverte. Le logiciel
se téléchargera automatiquement sur votre ordinateur. Vous pouvez lire à
cette adresse: «Nouveau : le fichier en téléchargement est un exécutable qui installera
un raccourci vers Front Page Express sous Menu démarrer - Programmes - Accessoires Outils Internet - Front Page Express.»
Le logiciel n’est donc pas des plus accessible, il faudra créer un raccourci
sur votre bureau ou dans la barre de lancement rapide. Pour ce faire,
cliquez une fois sur le logiciel et allez dans le menu Fichier et cliquez sur
Créer un alias. Vous pourrez alors l’amener sur votre bureau.
Lancez le logiciel Front page Express, vous arrivez sur cette fenêtre :
Si vous connaissez un peu Word, cet environnement devrait vous paraître familier.
On retrouve les barres d'outils ainsi que les icônes standards. Si vous ne connaissez
pas Word, la prise en main est très facile. Mais avant de commencer le travail
dans le logiciel, il est très important d’organiser ses fichiers.
4. Concernant l'organisation de vos fichiers
Il est impératif que tous vos fichiers soient dans le même répertoire principal.
Ce répertoire peut bien sûr comporter plusieurs sous-répertoires. N'oubliez
jamais que ce que votre site Web se retrouvera sur un serveur (autre ordinateur).
Vous pouvez voir sur la gauche, mon plan d’organisation.
J'ai décidé de placer le répertoire principal de mon site Web
sous le répertoire Mes Documents. Ce répertoire principal
se nomme «monsite» (qui correspond à la racine de votre
site).
Par exemple, toutes les pages et les images utilisées pour créer le site:
www.village.prologue.qc.ca se trouveraient dans le répertoire «monsite» sous le
répertoire mes documents, sur mon disque dur.
Dans le répertoire Fichiers, placez-y toutes les pages (.html) de votre site que
vous construirez au fur et à mesure. Dans le répertoire Images, insérez-y toutes
les images que vous aurez besoin pour votre site Web (les images doivent être
enregistrées en format .GIF ou .JPG). Encore une fois, il est très important de
garder ses répertoires organisés et d’éviter de déplacer des documents à différents
endroits. Lorsque vous aurez terminé votre site, il ne vous restera plus qu’à
transférer votre répertoire principal nommé «monsite» sur le serveur qui vous
hébergera sur le Web (voir section 9 de ce guide). Il est important de ne pas
mettre d’accents ni d’espaces dans vos titres de pages et d’images.
5. Créer les pages Web
Il est maintenant temps de créer vos pages. Allez dans le logiciel, dans le menu
Fichier et cliquez sur Nouveau. Une page vide vous apparaît. Vous pouvez inscrire
votre texte en faisant du copier-coller (vous copier un texte dans un traitement
de texte - ctrl+C - et le collez sur la page voulue dans Front page Express ctrl+V). Vous avez ensuite le contrôle sur l’allure de la police et du texte en
général:
Augmenter la police
Réduire la police
Gras (Ctrl+G)
Italique (Ctrl+I)
Souligné (Ctrl+S)
couleur de police
alignement du texte
liste numérotée. Pour arrêter la numérotation, tapez 2 fois sur Entrée sur
votre dernière ligne numérotée.
liste à puces : même remarque que pour la liste numérotée.
Augmenter le retrait (Touche de raccourci : Ctrl+M)
Diminuer le retrait (Touche de raccourci Ctrl+Shift +M)
6. Les propriétés de votre page
Les propriétés de la page vous permettent de donner un titre à votre page, de
spécifier les marges, les couleurs
d'arrière plan, de liens, etc. Pour afficher
les propriétés, cliquez sur le Clic Droit
de votre souris n'importe où sur votre
page puis sur propriétés de la page,
vous arrivez sur cette fenêtre :
GENERAL
Emplacement : l'endroit où est
enregistré votre répertoire principal sur
votre disque dur.
Titre : Très important. Le titre de votre
page. C'est ce qui apparaît dans la barre
de titre de votre navigateur. C'est
également ce résumé de votre page qui s'inscrira en lien sur les moteurs de
recherches.
Fond sonore : pour les mélomanes, vous pouvez spécifier un fichier son qui fera
jouer une mélodie dès le chargement de votre page. Emplacement est le fichier
son (WAV, MID, etc.). Vous pouvez le répéter X fois ou toujours.
ARRIÈRE PLAN
Image d'arrière plan :
Cochez cette case puis
choisissez une image de fond
si vous voulez une image
d'arrière plan. Attention aux
couleurs. Pour une image à
dominante
noire
par
exemple, un texte bleu se
verra très mal. Si vous ne
désirez pas d’image en
arrière plan vous pouvez choisir une couleur simplement. Vous pouvez aussi
spécifier les couleurs de votre texte, de lien standard, déjà visité ou actif.
MARGES
Si vous ne touchez pas à ceci, vous
aurez tout de même une marge à votre
document. Pour supprimer les marges
cochez et laissez 0 dans le champ
pixels.
7. Insérer une image
Pour insérer une image cliquez sur
. Vous arrivez sur cette fenêtre :
GÉNÉRAL
Source de l'image : désigne l'emplacement sur votre disque dur de l'image qui va
être insérée. Si vous n'avez pas lu les paragraphes 2 et 4 c’est le moment de le
faire.
Basse résolution : Lorsque le fichier image indiqué dans Source de l'image est
trop lourd à télécharger pour l'internaute, vous pouvez préciser dans ce champ
l'emplacement d'une image de même taille (largeur & hauteur), beaucoup plus
légère qui indiquera à l'internaute qu'une image plus lourde est en train de s'afficher.
Mieux vaut tout simplement éviter les images trop lourdes.
Texte : Lorsque vous survolez une image avec la souris, un texte alternatif peut
s'afficher. Entrez ce texte dans le champ texte.
Emplacement : c'est le lien.
APPARENCE
Cet onglet vous permet de paramétrer quelques options supplémentaires
concernant l'image ou plutôt ce qui est en rapport avec l'image.
Alignement Gauche : permet, quand le texte fait plusieurs lignes et que l'image
est haute, d'aligner l'image à gauche et le texte à côté.
Alignement Droite
: permet, quand le texte fait plusieurs lignes et que l'image
est haute, d'aligner l'image à droite et le texte à côté.
Epaisseur de bordure
Une image sans bordure:
Epaisseur de bordure = 1 :
Epaisseur = 2 :
Lorsque vous créez un lien sur une image, il est possible qu'une bordure bleue
s'ajoute. Pour la supprimer indiquez simplement Bordure égal 0.
Espacement Horizontal/Vertical : vous permet de spécifier un espacement par
rapport au texte autour de l'image.
Les deux formats proposés dans Front Page Express pour vos images sont GIF et
JPG. Vos images se doivent d'être enregistrées sous ce format. Il faudra donc
d’abord numériser vos images et les travailler dans un logiciel de traitement de
l’image comme Photoshop.
Attention, évitez de placer des images trop lourdes. N'oubliez pas que vous
êtes sur Internet. Vos visiteurs sont des internautes comme vous. Une image de
30 K sera longue à télécharger. Alors imaginez si vous placez une dizaine d’images
de cette grosseur sur votre site, faites le calcul. Personne n'attendra la fin du
chargement.
8. Créer un lien hypertexte
Un lien peut être placé sur du texte (sélectionnez simplement le texte à l'aide de
la souris) ou bien sur une image (cliquez sur l'image) pour activer le lien cliquez
sur
ou bien Ctrl+K.
Créer un lien vers un document de votre site
La procédure de Front Page Express pour la création d'un lien vers un fichier de
votre site, n'est ni intuitive, ni pratique. Vous avez le fichier page1.html et vous
voulez faire un lien vers le fichier page2.html. Ces deux fichiers doivent être
ouverts. Ensuite, il vous faut donner un titre à vos pages HTML. Par exemple ma
page2.html se nomme «CONTENU DE MA 2emme PAGE». En effet, lorsque vous
sélectionnez le fichier en lien, ce sont les titres et non les noms de fichiers qui
sont indiqués.
Pour modifier un titre de page : cliquez sur le Clic droit de votre souris sur votre
page (n'importe où) puis sur propriétés de la page. Changez alors le champ titre.
Vous y êtes ? Cliquez sur
, vous arrivez sur cette fenêtre, à gauche.
Sous l'onglet OUVERTURE
DES PAGES, vous avez la liste
des fichiers ouverts dans Front
Page Express. Ceux-ci sont
identifiés par leurs titres.
Signet : un signet correspond
à un emplacement sur une
page. Ce lien peut par exemple
vous amener au bas de la
page. Dans ce cas, il faut au
préalable créer le signet au bas
de la page sur la page cible.
L'insertion d'un signet se
trouve sous le menu Édition Signet. Vous arrivez sur cette
fenêtre à gauche.
Nommez simplement votre signet. Une fois validé à l'aide de
OK, votre signet est créé et
peut faire l'objet d'un lien.
Vous retrouvez dans la liste des
signets, ceux créés pour la
page sélectionnée dans la
fenêtre lien.
L’onglet WORLD WIDE WEB
Cet onglet vous permet de
créer un lien sur un site
externe. Évitez de créer un lien vers un fichier de votre site avec cette méthode.
Cela utilise des ressources supplémentaires pour rien. Préférez la précédente
méthode ou la suivante.
Les types de liens
Avant de créer un lien, vérifiez que le bon type de lien est sélectionné.
Vous n'aurez pratiquement besoin que de http (lien normal vers autre
site) et mailto (envoyer un message électronique). Si par exemple, le
mauvais type est sélectionné, File par exemple, votre site (en ligne)
vous affichera une page non trouvée.
Pour utiliser mailto : sélectionnez le type mailto, puis inscrivez l'adresse
électronique. Lorsque l'utilisateur cliquera ce lien, ce sera son logiciel de messagerie
qui s'affichera.
L’onglet NOUVELLE PAGE est le plus pratique pour créer des liens sur un fichier
de votre site. Non seulement vous allez créer le lien vers un fichier mais en plus
vous
lui donnerez
automatiquement un titre et
son nom de fichier. Quand
vous validez, ce nouveau
fichier s'ouvre (avec le bon
titre).
9. Publier votre site sur un serveur
Lorsque vous utilisez un logiciel d’édition sur Internet comme Front Page Express,
vous créez vos propres pages Web. Le logiciel crée les documents et les sauvegarde
sur votre disque dur, mais il ne les place pas sur Internet. Vous devez publier vos
documents et fichiers en les transférant sur un serveur.
Informez-vous auprès de votre technicien ou de votre directeur d’école pour savoir
si votre Commission scolaire dispose d’un serveur. La plupart des Commissions
scolaires mettent un serveur à la disposition des classes mais peu d’enseignants
en sont avertis.
Lorsque vous transférez votre répertoire de base sur un serveur, vous devez
arriver à une organisation du genre:
Le répertoire serveur correspond au serveur web qui vous
héberge. Quant à www il correspond au répertoire monsite
que j'ai sur mon disque dur. On doit retrouver la même
arborescence sur le serveur et le disque dur de votre
ordinateur. Dans le cas contraire, vous risquez d'avoir cette
fameuse Erreur 404 qui correspond à un document non trouvé.
Plusieurs sites offrent aussi l’hébergement gratuitement en échange de publicité.
Voici une adresse utile pour vous faire héberger:
http://iquebec.ifrance.com/heberg/
Si vous n’avez aucun recours pour vous faire héberger, le serveur du Village
Prologue pourra accueillir votre site Web. Vous devez cependant nous faire parvenir
votre répertoire principal, incluant toutes vos images et vos fichiers. Postez le
tout à: [email protected]
ou: [email protected]
Une fois votre site Web terminé, postez l’adresse à l’animatrice de votre projet:
Pascale Tremblay ou Marianne Tremblay et nous soumettrons votre demande
à Rescol à la Source pour que vous receviez votre subvention.
10. Sources et autres liens
Ce présent document a été créé à l’aide du guide de Mémoclic accessible à cette
a d r e s se : h t t p : / / w w w . m e m o c l i c . co m / d at a / c r e at i o n _ d e _ /
creation_de__269.php?PHPSESSID=42d059484731aaa14355c168e231989b
Voici l’adresse d’un site créé par l’API (Assistance pédagogique en informatique)
qui explique comment créer un site Web en trois étapes avec le logiciel Claris
HomePage 3.0 http://www.cssh.qc.ca/enseignants/api/www3etapes/
Voici l’adresse d’un site créé par la Commission scolaire des Trois-Lacs qui explique
comment utiliser le logiciel Front Page Express pour la réalisation d’un site Web.
http://www.cstrois-lacs.qc.ca/recit/formation/comment_faire/FPage/
Ce site peut aider les enseignants à réaliser un site Web pour la première fois:
http://iquebec.ifrance.com/castoraction/
Ce site intéressant de La Toile du Québec vous dirige vers d’autres sites pertinents
pouvant vous aider:
http://www.toile.com/guides/informatique_et_internet/page_web/
index.html
11. Contactez-nous
Si vous éprouvez des difficultés techniques, ne les laissez pas vous enlever le
plaisir de travailler avec le Village Prologue. Contactez-nous et nous tenterons de
vous aider.
[email protected]
[email protected]
Pascale Tremblay 514-273-9446