conception et réalisation d'un site internet

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


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


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


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


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


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 :


Si l'image est trop grande, l'affichage est

très lent.


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 :


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



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.


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 :


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


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.


Compléter les page avec un texte et des images de votre choix et par des commentaires

personnels.


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


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


Visualiser le résultat dans le navigateur.


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).


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

[email protected]

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.



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


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.


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...


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.


conception et réalisation d'un site internet

Documents