Conception et réalisation d'un site internet
Objectif : Il s’agit de réaliser un site Internet afin de présenter des informations sous la forme de
différentes pages Web. Les pages Web se reconnaissent par leur extension « .html », elles sont
composées de différents types d’informations (textes, images, sons, etc…) et dans lesquelles il est
possible de se déplacer grâce à des liens hypertextes.
La réalisation d’un site Web s’effectue avec un logiciel qui ressemble à un traitement de texte. Le
logiciel que l’on utilisera s’appelle KompoZer, il est gratuit, simple d’emploi, en français et
téléchargeable sur frenchMozilla.fr
1 - MISE EN PLACE DE LA STRUCTURE DU SITEAvant même de commencer à écrire quoi que ce soit, il est important de mettre en place l'ossature du
site dans votre serveur personnel. Sinon vous devrez recommencer votre travail à chaque séance.
Cliquer sur le poste de travail ou alors utiliser l'explorateur de Windows ,
aller dans votre serveur (il s’agit de H: ).
serveur=4 lettres de votre nom 4 lettres de votre prénom
Vous êtes dans Mes documents.
avec la commande
Fichier > Nouveau > Dossier
Dans ''Mes documents'', créer un répertoire que vous nommerez "site web" avec un sous-répertoire
''images''. (mettre tout en minuscule). Par exemple :
Pour réaliser votre site web, vous avez besoin d'images. Celle-ci sont à votre disposition dans :
mediatheque\techno\3\Kompozer sélectionner toutes les images , effectuer un copier
retourner dans votre dossier site web\images et faites un coller.
Quand c’est terminé, montrer votre travail au professeur
M. LANCELOT - 1 - Réalisation d'un site
Tout en minuscule
Il est temps maintenant de produire un petit site de présentation personnelle. Le site créé est accessible
uniquement en local, c'est-à-dire qu’il est enregistré sur l’ordinateur sur lequel vous êtes.
Si KompoZer n'est pas installé, aller le chercher dans le serveur
mediatheque\techno\3\Kompozer puis cliquer sur KompoZer.exe
et enfin fermer la fenêtre d'astuces.
2 - PRISE EN MAIN DE KOMPOZERIl s’agit de produire 4 pages web, la page de présentation est appelé page d’accueil elle permet
d’accéder aux principales informations d'un site et cette page doit être nommé index.html
Lancer le logiciel KompoZer . La fenêtre de KompoZer ressemble à une fenêtre de logiciel
de traitement de texte. Pour gagner de la place sur l'affichage , fermer le gestionnaire de sites (inutile pour
le moment).
Fermer
La première chose à faire est de sauvegarder la page vierge dans le répertoire H:\site web
pour cela :
Fichier > Enregistrer sous...
Immédiatement, une boîte de dialogue apparaît; elle nous demande d'indiquer un titre pour la page.
Indiquer le titre "index" puis cliquer sur le bouton OK
M. LANCELOT - 2 - Réalisation d'un site
Organisation du site
Enregistrer la page sous apparaît :
Rechercher votre répertoire "site web"
Vérifier le nom index
Valider avec Enregistrer
Ensuite, cliquer sur Créer une nouvelle page
Demander Enregistrer sous
Indiquer le titre "parcours" puis cliquer sur le bouton OK
Valider avec OK
Enregistrer la page sous apparaît :
Vérifier que vous êtes dans "site web"
Vérifier le nom parcours
et en utilisant le même méthode,
enregistrer au même endroit
les autres pages : equipe et realisation
Vous venez de créer 4 pages vides
correspondants aux 4 pages web
de votre premier site.
Fermer le logiciel KompoZer
Quand c’est terminé, montrer votre travail au professeur
M. LANCELOT - 3 - Réalisation d'un site
3 - STRUCTURE ET ASPECT D'UN SITEL'ensemble d'un site doit être facilement repérable par un aspect visuel caractéristique. C'est pourquoi la
page d'accueil et l'ensemble du site doit être typique en utilisant par exemple un fond bleu, une police
d’écriture spécifique, etc…Tout d'abord, il faut ouvrir la page d’accueil utiliser la commande
Fichier > Ouvrir un fichier...
allez chercher la page index.html
Ecrire votre nom par exemple ''Dominique Dupont''
Sauter 1 ligne (taper sur Enter) et poursuivre l'écriture du texte par votre présentation :
Je suis élève en 3° B au collège Grimaux. Cette année en technologie, notre collège
participe au concours robots des collèges de Charente-maritime et mon travail est de
concevoir un véhicule capable de se mesurer contre les autres réalisations dans un
parcours bien défini.
C'est pourquoi je vous propose de découvrir :
– ma réalisation,
– les différents parcours,
– mon équipe.
Sélectionner tout le texte (il doit être en bleu) :
Changer la police : par exemple Comic sans MS, puis augmenter la taille de police
M. LANCELOT - 4 - Réalisation d'un site
Changer la couleur de texte :
Changer la couleur de fond (de page) :
Choisir un ensemble couleur de police et couleur de fond agréable à l'œil (fond noir et couleur jaune...)
Sur votre nom : agrandir la police et centrer :
Si tout est conforme, n'oubliez pas d'enregistrer votre travail
La disquette s'efface :
Travail à effectuer :
Ouvrir la page parcours.html, écrire les indications suivantes et effectuer le changement de couleurs
pour avoir un ensemble homogène (même couleur de fond et et de police). Enregistrer
M. LANCELOT - 5 - Réalisation d'un site
Ouvrir la page equipe.html, écrire les indications suivantes et effectuer le changement de couleurs pour
avoir un ensemble homogène (même couleur de fond et et de police). Enregistrer
Ouvrir la page realisation.html, écrire les indications suivantes et effectuer le changement de couleurs
pour avoir un ensemble homogène (même couleur de fond et et de police). Enregistrer
4 - INSERTION D’UNE IMAGEPlacer le curseur de texte derrière votre nom (exemple avec Dominique Dupont) et insérer un nouveau
paragraphe en frappant la touche Enter.
Cliquer sur l'icône Image
Dans la boîte de dialogue qui apparaît, cliquer sur le bouton Parcourir, afin de rechercher
l’image enregistrée dans le répertoire images de votre site web : « walle.jpg ».
Dans Texte alternatif mettre l’indication « robot » (ou autre chose).
Choisir une dimension de 400 pixels x 196 pixels
M. LANCELOT - 6 - Réalisation d'un site
REMARQUE CONCERNANT LES IMAGES SUR UN SITE
Pour convenir à la publication sur le web, l’image doit obligatoirement être dans un
format compatible. Les trois formats d'images qui conviennent pour le web sont : JPG
GIF PNG (il s’agit de l’extension), il suffit de vérifier l’extension avec la commande
propriétés lors de la sélection d’un fichier.
Les autres formats ne peuvent pas être utilisés.
Pour ne pas surcharger votre site avec des images de taille importante :
une image ne devrait pas dépasser 100ko.
Ces informations sont visible dans l'explorateur
Vérifier la taille de l’image
Si la photo ne fait pas les dimensions voulues, il faut la modifier avec un logiciel spécialisé dans le
traitement de l’image, Paint Shop Pro par exemple. La page obtenue doit ressembler à ceci :
M. LANCELOT - 7 - Réalisation d'un site
Si l'image est trop grande, l'affichage est
très lent.
Travail à effectuer :
Insérer les images correspondantes dans les pages correspondantes :
equipe.jpg dans equipe.html,
les différents parcours (dedale, scorpion, multipente, vadrouilleur, ligne droite) dans parcours.html
realisation.jpg dans realisation.html
Pour harmoniser le site, chaque image doit faire 300 pixels de Largeur (garder les proportions)
Double-cliquer sur l'image
et
demander l'onglet Dimensions
Enregistrer chaque page.
Exemple :
M. LANCELOT - 8 - Réalisation d'un site
5 - ETABLIR DES LIENS HYPERTEXTEUn lien hypertexte ou hyperlien est un élément (texte ou image) qui relie les différentes parties d’un ou
plusieurs sites. La page d'accueil « index.html » va permettre de naviguer facilement entre les différentes
pages de notre site. Pour créer les hyperliens qui permettront cette navigation : sélectionner ma
réalisation dans la page index.html
puis cliquer sur Insérer un nouveau lien
Parcourir
Une nouvelle boîte de dialogue permet d'indiquer le lien prévu lorsque le visiteur cliquera sur le mot
ma réalisation
aller chercher la page realisation.html
M. LANCELOT - 9 - Réalisation d'un site
Travail à effectuer :
Sélectionner les différents parcours puis mettre un lien sur la page parcours.html, sélectionner mon
équipe puis mettre un lien sur la page equipe.html
Les liens hypertextes sont signalés par une écriture bleu surlignée :
6 - TESTER LA PAGE DANS LE NAVIGATEUR
Visualiser les pages dans un navigateur en utilisant l'icône Navigateur (enregistrer vos pages)
Lancer l'application
Vérifier vos liens en cliquant dessus.
Dans le navigateur (Internet Explorer ou Mozilla Firefox), il est facile de vérifier que l’affichage et le
fonctionnement est conforme. Les liens sont actifs dans un navigateur.
En cas de problèmes, corriger les pages « html » en retournant dans le logiciel KompoZer en fermant le
navigateur.
M. LANCELOT - 10 - Réalisation d'un site
Titre : index
Votre nom d'auteur
Description : site perso
La présence d'une disquette indique que la page a été modifiée et qu'il faut l'enregistrer pour prendre en compte les modifications...
7 - TITRE ET PROPRIETES DES PAGES
Les différentes pages du site peuvent être compléter ou modifier avec des informations
complémentaires, ces informations ne sont pas indispensables mais permettent de gérer plus facilement
les pages du site.
Vous travaillez actuellement sur la page index.html. (ou bien ouvrer là)
Dans le menu Format,
sélectionner la commande Titre et propriétés de la page...
Une boîte de dialogue apparaît qui permet
de définir les propriétés générales de la page.
Compléter les informations :
Cliquer sur le bouton OK
Ouvrir les autres pages de votre site web (equipe.html parcours.html realisation.html)
compléter les propriétés « Auteur » et « Description » de chaque page, normalement le titre correspond
au nom
Si tout est correct, en ouvrant toutes les pages de votre site vous devez avoir les informations suivantes
au niveau des onglets :
M. LANCELOT - 11 - Réalisation d'un site
8 - FINITION DES PAGESDans la page index, rajouter le texte suivant :
Des informations sur le concours robot de Charente-Maritime
Sélectionner ce texte et mettre un lien externe de votre site : http://robotique17.pagesperso-orange.fr
Travail à effectuer :
Sélectionner la page realisation.html et complèter la avec un texte de votre choix.
Ne pas oublier d’enregistrer votre travail en cliquant sur
Sélectionner la page equipe.html et complèter la avec un texte de votre choix.
Ne pas oublier d’enregistrer votre travail en cliquant sur
Compléter les page avec un texte et des images de votre choix et par des commentaires
personnels.
M. LANCELOT - 12 - Réalisation d'un site
Onglet Précisément : tableau 2 lignes, 5 colonnes
Largeur : 1000 pixelsBordure : 1
9 - INSERTION D’UN TABLEAUSélectionner la page parcours.html, nous allons installer un tableau pour améliorer cette page.
Se positionner ici
Ensuite dans la barre d'outils, cliquer le bouton Tableau. La boîte de dialogue qui apparaît permet de
fixer rapidement les caractéristiques principales du tableau :
Un tableau est créé.
Compléter le tableau avec les parcours selon cet exemple :
N'oublier pas de modifier la couleur de police,
de centrer les textes dans le tableau.
Et de modifier les dimensions des images
avec une largeur de 200 pixels.
Visualiser les pages dans un navigateur
M. LANCELOT - 13 - Réalisation d'un site
10 - AMELIORER LA NAVIGATION DANS UN SITE
Une fois dans le navigateur, nous pouvons nous rendre compte que le retour dans la page d'accueil n'est
pas prévu. Pour chaque page, nous allons insérer une image puis mettre un lien hypertexte sur cette image
nous renvoyant à la page d'accueil.
Image indiquant le retour : home.gif
Dans la page ligne.html, insérer l'image home.gif
Demander Dissocier du texte
Sélectionner l'image home.gif
(le curseur est en croix)
Effectuer un cliquer-glisser et positionner home.gif en haut à gauche de la page.
Et enfin, mettre un lien hypertexte sur cette image sur index.html
Ne pas oublier d’enregistrer votre travail en cliquant sur
Visualiser le résultat dans le navigateur.
Travail à effectuer :
En procédant de manière identique, insérer un retour vers la page d'index sur toutes les pages de votre
site (sauf la page index.html).
M. LANCELOT - 14 - Réalisation d'un site
11 - UN LIEN VERS UNE ADRESSE E-MAILAucun doute que votre site web ne laisse personne indifférent. Chaque visiteur voudra pouvoir vous
contacter par mail. Il serait donc bon d'ajouter un lien vers une adresse e-mail.
Ouvrir la page index.html, Placer le curseur de texte à la fin de celle-ci. Ecrire : Contacter-moi : et
rajouter l'image mail.png puis centrer le tout.
Le lien vers une adresse e-mail 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.
Sélectionner l'image mail.gif
Mettre un lien hypertexte sur cette image.
Dans la boîte de dialogue qui suit :
Indiquer le lien vers votre adresse e-mail
Cocher/vérifier que ces cases soient cochées
Valider par OK
(pour votre site, il faudra remplacer l'adresse e-mail par votre vrai adresse e-mail).
Ne pas oublier d’enregistrer votre travail.
Visualiser le résultat dans le navigateur.
Vérifier que le lien est correct en cliquant sur l'adresse e-mail. Cette action met en route le logiciel de
messagerie.
Vérifier finalement dans le navigateur que l'ensemble du site web est fonctionnel.
M. LANCELOT - 15 - Réalisation d'un site
Travail à effectuer :
Créer des pages html permettant d'expliquer les différents parcours. Utiliser les noms de pages
suivantes :
ligne.html
vadrouilleur.html
scorpion.html
multipente.html
dedale.html
Pour accéder sur ces pages, positionner des liens hypertextes dans le tableau de la page parcours :
Exemple pour la ligne droite :
Images :
lignedroite.gif
ligne_explication.jpg
M. LANCELOT - 16 - Réalisation d'un site
Rappel pour les noms de pagesPas de majuscule et pas d'accent
12 - AMELIORATION D'UN SITERéaliser des pages html agréable est un exercice qui nécessite beaucoup de travail et de réflexion. En
effet, un bon site web doit s'appuyer sur trois composantes : le contenu, le visuel et le fonctionnel.
L'exemple suivant permettra d'utiliser les possibilités de KompoZer.
Format > Couleurs et fond de page...
Cela va permettre de mettre
une image en fond de page.
Aller chercher l'image
fondrobot.jpg
Puis valider par OK
Pour décaler le texte et pour ne pas que l'écriture se retrouve dans le fondrobot d'arrière plan,
sélectionner le texte à décaler et demander un retrait.
Pour donner du dynamisme, il est possible de positionner des images animées comme marque.gif
Cette image est animée, enregistrer la page et tester la dans le navigateur.M. LANCELOT - 17 - Réalisation d'un site
13 - FACILITER LA NAVIGATIONIl est facile de naviguer dans un site en utilisant un bandeau. Cela nécessite une refonte totale du site.
Créer un nouvelle page.
Insérer un tableau avec les caractéristiques suivantes :
Valider par OK
Ecrire les information des différentes pages
Centrer/modifier les informations, positionner TITRE et texte
Créer des pages identiques avec les noms equipe.html, parcours.html, realisation.html
Sélectionner la page index.html et mettre des liens sur Equipe, Parcours et Réalisation.
Changer Titre avec Le concours robots
Faire de même avec la page equipe.html mettre des liens sur Index, Parcours et Réalisation.
M. LANCELOT - 18 - Réalisation d'un site
Faire de même avec la page parcours.html mettre des liens sur Index, Equipe et Réalisation.
Faire de même avec la page realisation.html mettre des liens sur Index, Equipe et Parcours.
Vérifier le bon fonctionnement de votre site, le bandeau est très pratique pour naviguer.
Continuer votre site avec des images, des images animées, un fond de page, etc...
N'oublier pas un bon site doit être sobre et efficace...
M. LANCELOT - 19 - Réalisation d'un site
13 - MISE EN LIGNE DU SITEJusqu'à maintenant, votre site web n'existe que dans l’ordinateur du collège sur lequel vous êtes. Or, ce
sont les internautes du monde entier qui attendent avec impatience de pouvoir consulter vos pages. Pour
satisfaire leur attente fébrile, il faudrait envoyer l'ensemble des documents qui constituent le site sur un
serveur Web. Un serveur Web est un ordinateur connecté en permanence à Internet et sur lequel
fonctionne un logiciel appelé " serveur ".
Généralement, on choisit de confier son site web à une société qui gère un ou plusieurs serveurs Web
qui sont surveillés en permanence, de manière à intervenir rapidement en cas de panne. Souvent, les
particuliers utilisent l'espace web offert par leur fournisseur d'accès à l'Internet ou des serveurs web
gratuits qui offrent leur service en échange d'une publicité apposée sur les pages du site (par exemple
http://www.multimania.lycos.fr).
Si l'on ne souhaite pas de publicité, il faudra " acheter " de l'espace disque sur un serveur Web
commercial. Un grand nombre de sociétés offrent ce service pour des prix très variables.
(http://www.1and1.fr). L'avantage de cette solution c'est de pouvoir disposer d'un nom de domaine par
exemple http://www.monsite.fr)
Pour envoyer les pages sur le serveur Web de notre hébergeur, il nous faut disposer d'un logiciel de
transfert de fichiers ou logiciel FTP (file transfer protocol). KompoZer dispose d'un module permettant la
publication des pages html (voir Fichier > Publier). Cependant, ce n'est pas très pratique, il est beaucoup
plus facile d'utiliser des logiciels FTP spécialisés. Il existe de nombreux logiciel FTP, autant prendre un
logiciel gratuit pour assurer cette tache comme Filezilla (http://www.filezilla.fr).
Ce logiciel se présente un peu comme l'explorateur de Windows, d'un coté les fichiers de son ordinateur
personnel et de l'autre l'espace mis à votre disposition par votre hébergeur. Bien sur, pour être reconnu
chez votre hébergeur vous disposez d'un identifiant et d'un mot de passe.
M. LANCELOT - 20 - Réalisation d'un site