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 SITE Avant 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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.