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 à: pascale.tremblay@prologue.qc.ca ou: marianne.tremblay@prologue.qc.ca 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 esse:http://www. memoclic.com/data/creation_de_/ 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. pascale.tremblay@prologue.qc.ca marianne.tremblay@prologue.qc.ca Pascale Tremblay 514-273-9446