Créer des pages WEB à l aide de KompoZer.

Transcription

1 Document élève 1/14 Créer des pages WEB à l aide de KompoZer.

2 Document élève 2/14 INTERNET : CREATION D UN SITE PRESENTATION Un site web (aussi appelé site internet par abus de langage) est un ensemble de fichiers HTML, liés par des liens hypertextes, stockés sur un serveur web, c'est-à-dire un ordinateur connecté en permanence à internet, hébergeant les pages web. Pour concevoir un site web il faut : Avoir un contenu et une architecture qui soit réfléchie. Exemple d'organigramme : Choisir un éditeur de page web ou html. Ex : KompoZer Héberger son site sur un serveur web. 1 - L ARCHITECTURE D UN SITE : Les visiteurs reviennent généralement sur un site pour son contenu, plus que pour son design. Les études menées sur les internautes montrent que le facteur d'appréciation principal d'un site web est en premier lieu le contenu rédactionnel. Ainsi, un site simplissime avec un contenu fort intéressant sera potentiellement bien plus visité qu'un site creux au graphisme soigné. La conception d un site doit se faire sous forme d un organigramme sur lequel doit apparaître tous les éléments du site : liens de page en page, images insérées, nom du fichier etc Exemple : 2 - UNE PAGE WEB : Le standard désormais établi pour la diffusion de documents sur le web est le langage HTML (HyperText Markup Language). Le langage HTML permet de définir la présentation du document ainsi que les liens hypertextes vers d'autres documents à l'aide de balises de formatage. Une page web doit donc avoir l extension htm ou html pour être reconnue par un navigateur : Exemple : toto.html ou toto.htm Remarque : Il est préférable que le nom du fichier ne dépasse pas 8 caractères, et ne contienne pas de caractères spéciaux afin d'assurer une bonne compatibilité entre navigateur!!!!

3 Document élève 3/ LE CONTENU D UNE PAGE : Cette page web peut contenir : des images des vidéos des sons des liens hypertextes vers d autres pages web 3.1. LES IMAGES D UNE PAGE WEB : Les images d une page web peuvent avoir l extension GIF ou JPEG LES VIDEOS D UNE PAGE WEB : Les vidéos d une page web peuvent avoir l extension AVI MPEG ou MOV LES SONS D UNE PAGE WEB : Les sons d une page web peuvent avoir l extension MID MP3 ou WAV LES LIENS HYPERTEXTES : Les liens peuvent se faire vers tous les types de fichiers : 4 LES HEBERGEURS : Afin de rendre disponible un site web 24/24H il est nécessaire qu'il soit hébergé sur un serveur relié en permanence à Internet. Afin de rendre un service de qualité aux visiteurs, il est conseillé de recourir aux services d'un hébergeur, c'est-à-dire une société proposant l'hébergement (en anglais hosting) du site internet sur des serveurs spécialisés connectés en permanence à internet à très haut débit. On distingue généralement les types d'hébergement suivants : * Hébergement gratuit * Hébergement professionnel 5 - EXERCICES : Présentation Afin de vous familiariser avec la création de pages web, il vous est proposé deux exercices à réaliser avec le logiciel KompoZer. En ce qui concerne l activité 1, suivez les consignes de travail qui suivent cette présentation et appelez le professeur lorsque vous avez terminé le travail Les différents fichiers nécessaires à l activité sont enregistrés dans le disque Classes sur 'Serveur SambaEdu 3 (se3)' sur serveur H: sous les dossiers H:\Classe_3EMEx\_travail\Technologie\Informatique\création pages Web\saison Ensuite, vous pourrez passer à l activité 2 en ouvrant le fichier nommé site web 2.pdf qui se trouve sous H:\Classe_3EMEx\_travail\Technologie\Informatique\création pages Web. Appelez le professeur lorsque vous avez terminé le travail Les différents fichiers nécessaires à l activité sont enregistrés dans le disque disque Classes sur 'Serveur SambaEdu 3 (se3)' sur serveur H : sous les dossiers H:\Classe_3EMEx\_travail\Technologie\Informatique\création pages Web\TINTIN

4 Document élève 4/14 KompoZer KompoZer est un éditeur de pages HTML dit «WYSIWYG»(What You See Is What You Get, traduisez Ce que vous voyez est ce que vous obtenez), c est-à-dire permettant de générer une page identique à ce que vous visualisez dans KompoZer. L un des avantages de ce type de logiciel est qu il n est pas nécessaire de connaître la syntaxe HTML pour créer une page web. Il permet également d ouvrir des pages contenant du PHP. La liste complète des fonctionnalités de KompoZer est disponible sur son site officiel. D'après Barre des titres Barre d'outils Alignements Polices de caractère Couleurs des caractères Taille des caractères Style des caractères : Gras, Italique, Souligné Fenêtre de Saisie Vous pouvez saisir votre texte dans une fenêtre, puis lui appliquer des styles avec le pointeur de la souris, grâce à des commandes de menus et des boutons : modifier la taile et le type de polices, écrire en gras, en italique, choisir une couleur et bien plus. Vous pourrez également ajouter des graphiques et des éléments multimédias.

5 Document élève 5/14 1 ) Organigramme de l architecture du site: PRESENTATION DE L EXERCICE Afin de créer un site Web, il est nécessaire de réfléchir au contenu (bien entendu) mais aussi à l architecture du site. C est dans ce but que l on prépare un organigramme du site. Dans notre cas, il s agit d un site présentant les 4 saisons. Comme le montre l organigramme suivant, le site est composé d une page d accueil nommé saisons.htm et de quatre autres pages présentant les saisons avec une photo en format GIF. On doit pouvoir passer de l accueil vers une des 4 autres pages grâce à des liens hypertextes. Nom des fichiers créés Contenu des pages (en quelque mots) Éléments contenu dans la page web (images, sons, vidéos ) Printemps printemps.gif PRINTEMPS.HTML SAISONS Printemps Eté Automne Hiver SAISONS.HTML Eté Automne ete.gif automne.gif ETE.HTML AUTOMNE.HTML Hiver hiver.gif HIVER.HTML Remarques : Il est très important de préparer tous les éléments d une page (images, sons, vidéos ) avant de commencer la création d un site internet. Dans notre cas, les photos ont été préparées et placées dans le dossier H:\Classe_3EMEx\_travail\Technologie\Informatique\création pages Web\saison Il ne faut pas négliger la recherche sur papier de l architecture du site afin d éviter les erreurs (en particulier dans les sites complexes). Pour réaliser ce travail, vous allez donc apprendre à : Créer une page Mettre en forme Insérer des images Placer un fond de couleur dans une page Créer des liens hypertextes Vous vérifiez le fonctionnement de vos pages à l aide d'un navigateur Firefox ou Internet Explorer. Pour réaliser l exercice, vous allez vous créer des dossiers : création pages web et saison. Ce dossier devra être placé sous K:\Technologie\ Tous les fichiers que vous allez créer dans cette exercice devront être enregistrer sous ces dossiers : K:\Technologie\Création pages Web\saison

6 Document élève 6/14 2 ) Lancez KompoZer et créez une page : Pour ouvrir KompoZer. Cliquez sur l icône La fenêtre suivante apparaît : On va tout de suite enregistrer la page ouverte par défaut : Menu Fichier Enregistrer sous Dans la fenêtre ouverte, on entre le titre de la page : SAISONS ATTENTION : Il ne faut pas confondre titre de la page et nom du fichier même si ils peuvent être parfois identiques. Une fois que le titre de la page est tapé, cliquez sur OK. LE P M E EX E D E R T Ê N FE Pour enregistrer cette page, il faut se déplacer dans le chemin K:\Technologie\Création pages Web\saison Taper le nom du fichier : saison.html Une fois que vous êtes dans le bon dossier et que vous avez tapé le bon nom de fichier, validez en cliquant sur le bouton Enregistrer. Vous verrez plus tard que ce titre s affichera tout en haut dans la fenêtre du navigateur. REMARQUE : pourquoi une extension HTML sur le fichier que vous venez d'enregistrer?? : c'est l'abréviation de HyperText Markup Language. Ce langage HTML, c'est celui avec lequel vous tapez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...". C'est donc ce genre de fichier qui constitue en grande partie le Web et que les navigateurs ouvrent

7 Document élève 7/14 3 ) Créer les pages printemps.html / été.html / automne.html / hiver.html : Vous allez tout de suite faire l'enregistrement des 4 autres pages même si elles sont provisoirement vierges Nous allons donc utiliser la même technique 4 fois, à vous de suivre!!! Créez une nouvelle page : sur Fichier Nouveau Une nouvelle fenêtre apparaît : vérifiez que le document vide est sélectionné et qu'il va être crée dans un nouvel onglet... Si c'est le cas, vous pouvez cliquer sur OK... Enregistrez la nouvelle page : Menu Fichier Enregistrer sous Dans la fenêtre ouverte, on entre le titre de la page : printemps PL E M EXE E D RE T Ê FEN Enregistrer cette page dans K:\Technologie\Création pages Web\saison Taper le nom du fichier : printemps.html Refaites ces 4 opérations pour obtenir tous les fichiers. Ne fermez aucun fichiers crées, ils doivent apparaître dans les onglets, il suffit alors de cliquer sur leur nom pour passer d'une page à une autre...

8 Document élève 8/14 4 ) Mettre en forme la page SAISONS.html : Ouvrir le fichier SAISONS.html : Si vous ne l avez pas fermé, il apparaît dans les onglets en haut de page Si vous l avez fermé : Fichier Ouvrir Une fois que cette page est ouverte, nous allons changer ses paramètres Réalisez la présentation suivante: 5 ) Insérez des images dans la page SAISONS.html : Pour insérer une image, il suffit de faire: Menu Insertion Image ou cliquez sur l icône Insérez les images comme le modèle ci-dessous (page suivante) / Enregistrez votre page une fois le travail terminé

9 Document élève 9/14 Pour cela: 1 Placez votre curseur à l endroit voulu 2 Cliquez sur insertion image 3 Une nouvelle fenêtre apparaît qui vous permet de choisir les propriétés de l'image mais dans un premier temps, il faut déjà la sélectionner : Cliquez sur le bouton Parcourir (image d'un dossier) 4 Sélectionnez le fichier qui se trouve sous H:\Classe_3EMEx\_travail\Technologie\Informatique\créati on pages Web\saison Choisir votre fichier suivant l'image désirée exemple pour le printemps, l'image printemps.gif logique, non!!!! P LE M EX E E D RE T Ê F EN 5 L'image est donc sélectionnée et apparaît dans la ligne Adresse de l'image et en aperçu en bas de la fenêtre. Cochez la case Ne pas utiliser de texte alternatif Puis validez grâce à la touche OK. REMARQUE : Ce n'est pas l'image qui est directement collée dans le document mais son adresse. Ce qui veut dire que si vous effectuez un changement sur l'image (si vous déplacez le fichier par exemple), il faudra recommencez l'opération d'insertion!!! Renouvelez ces 5 étapes pour placer toutes les images dans le fichier SAISONS.html (n oubliez pas d enregistrer).

10 Document élève 10/14 6 ) Mettre en forme et insérez des images dans les pages été / automne / hiver / printemps : En vous aidant de la partie 5, respecter les mises en formes des pages comme ci-dessous : 7 ) Placer un fond de couleur dans les pages été / automne / hiver / printemps : Afin d'ajouter un peu de couleur dans ce triste site, nous allons ajouter un fond de couleur à nos page. Pour cela, on peut : passer par le menu Format Couleurs et fond de page

11 Document élève 11/14 Dans la fenêtre Couleurs et fond de page, sélectionnez Fond. Sélectionnez les couleurs personnalisées si ce n'est pas le cas. REMARQUE 1 : Dans un premier temps, on conseille de laisser les couleurs par défaut utilisées pour les liens, les liens visités et les liens actifs. Faîtes bien attention que votre couleur de fond (couleur claire) soit compatible avec votre couleur de texte (par défaut le noir). REMARQUE 2 : On peut placer une image en fond de page d'un site web mais dans ce cas, il faudra sans doute retravailler l'image pour obtenir un effet correct... Dans la fenêtre du choix des couleurs, sélectionnez la couleur : RESPECTER LES COULEURS SUIVANTES Page PRINTEMPS Couleur Jaune Page HIVER Couleur rouge Page ETE Couleur vert Page AUTOMNE Couleur Bleue Si les goûts et les couleurs ne se discutent pas, votre texte et votre présentation doivent toujours rester lisibles. REMARQUE : Avez vous pensé à enregistrer votre travail??? Si ce n'est pas le cas, il serai bon de le faire!!! Un petit icône rouge en forme de disquette est présent devant le titre de votre page web si elle n'est pas enregistré Sympathique, non???

12 Document élève 12/14 8 ) Insérez des liens hypertextes : Rappel de la notion de liens hypertextes La différence entre un traitement de texte et un éditeur de page web (encore appelé éditeur hypertexte) est la possibilité pour ce dernier de lier les pages les unes avec les autres. On crée des liens hypertextes entre ces pages : Le schéma à respecter est le suivant : Page d accueil : Page qui comporte les liens SAISONS Printemps hypertextes vers les pages été / Eté SAISONS.HTML printemps / automne et hiver Automne Hiver Liens hypertextes Printemps printemps.gif PRINTEMPS.HTML Eté Automne ete.gif automne.gif ETE.HTML AUTOMNE.HTML Hiver hiver.gif HIVER.HTML Créer un lien hypertexte entre SAISONS.html et printemps.html (exemple de démarche) : Sélectionnez la zone à transformer en lien hypertexte (ici le texte Printemps) Pour cela, mettre le texte en surbrillance. Cliquez sur le menu Insertion Liens ou sur l icône Dans la boîte de dialogue des propriétés du lien, clique sur le bouton Parcourir.

13 Recherchez le fichier printemps.html sous K:\Technologie\Création pages Web\saison qui est la page qui doit être liée avec ce texte. Document élève 13/14 LE P M E X E DE E R T Ê FEN Dans la boîte de dialogue des propriétés du lien, vous pouvez vérifier que la page est bien sélectionnée. Cliquez sur le bouton OK lorsque le fichier a été trouvé. REMARQUE 1 : Pour établir un lien vers un autre site web, il faut obligatoirement indiquer l'adresse URL complète de la page d'accueil de ce site web. REMARQUE 2 : Le lien vers une adresse électronique n'est rien d'autre qu'un lien hypertexte, au même titre que le lien vers une autre page. Cependant, il n'utilise pas le protocole http. La syntaxe est donc un peu différente. Il faut alors cocher la case "La valeur ci-dessus est une adresse électronique". Le texte se transforme, il est souligné en bleu (ce qui caractérise un lien hypertexte) Lien hypertexte Recommencez ces 6 étapes afin de réaliser les liens hypertextes pour été, hiver et automne Enregistrez tout votre travail (oubli classique). REMARQUE : J'entends déjà dire : «Bah, ça ne marche même pas votre truc. Je passe la souris sur les liens, je clique, il ne se passe rien!» Heureusement qu'il ne se passe rien. Si les liens fonctionnaient, il deviendrait très difficile d'y apporter des modifications. Un petit clic sur un mot pour corriger l'orthographe, et hop... on serait emporté au loin. Avant de «pester», regardez la page suivante...

14 Document élève 14/14 9 ) Tester la page dans le navigateur : Votre site est maintenant prêt. Vous pouvez le tester dans votre navigateur web (que ce soit Mozilla Firefox ou Microsoft Internet Explorer). Enregistrez tes pages une dernière fois si nécessaire. Dans la barre d'outils, cliquez sur le bouton de visualisation dans le navigateur. Si c'est la première fois que vous faîtes cette requête, vous risquez d'avoir une fenêtre d'avertissement comme celle ci : Dans ce cas, cochez la case : Se souvenir de mon choix pour tous les liens de ce type afin d'être tranquille par la suite... Cliquez ensuite sur Lancer l'application pour démarrer votre navigateur. La page saison s ouvre, vérifiez la validité des liens hypertextes en cliquant dessus. Appelez le professeur pour vérification.