Cours n°8 - fiche travail - Elève

Fiche travail
n°11
Réaliser un site Web
DATE :
/
/
Un site intranet est un ensemble de fichiers liés entre eux, mis à la disposition d’un utilisateur. Le
grand intérêt de cette technique réside dans les liens hypertexte qui permettent de présenter
immédiatement à l’écran une autre page, lorsqu’on clique sur une zone déterminée (texte ou image).
Un site internet fonctionne sur le même principe. Il est par contre mis à disposition de tous sur le
réseau, et chacun peut s’y connecter grâce à sa ligne téléphonique et par l’intermédiaire d’un portail
d’accès (Club-internet, liberty surf, AOL, Wanadoo, free …).
La consultation d’un site internet peut être totalement gratuite, hors frais de communication (sncf.fr,
onisep.fr, assemblee-nationale.fr, ca-paris.justice.fr, …) mais d’autres sites sont en partie payant et
nécessitent un abonnement.
L’exercice suivant vous donne les procédures et les conseils pour créer assez rapidement un site
intranet simple, avec quelques fichiers liés (appelés pages web). La présentation des informations est
simple à réaliser, tout en étant agréable grâce à l’utilisation des couleurs, images et autres attributs.
L’enregistrement de ce site sur le serveur d’un hébergeur (Wanadoo, MultiMania, …) en ferait un site
internet. Nous ne traiterons pas de cette partie hébergement, mais tous les fournisseurs d’accès
internet donnent cette possibilité, ainsi que des conseils spécifiques à leur système.
Le choix de DREAMWEAVER2 est lié à la disponibilité pour tous (logiciel gratuit permettant la
consultation mais aussi la création d’un site), et à la simplicité des commandes.
Bien sûr, il existe d’autres moyens de créer des pages web (FrontPage, Word 2000, Claris Home Page,
Dreamweaver, …). Tous fonctionnent néanmoins selon les mêmes principes, et les connaissances
apprises avec cet exercice seront aisément transférables avec un autre logiciel. Attention toutefois,
plus un logiciel permet de “ fioritures ” de présentation, plus il est compliqué à apprendre et à utiliser.
A vos claviers et souris…
Page 1/10
Travail à réaliser
NEW ART est une petite société de vente par correspondance de produits en promotion, spécialisée
dans la vente de vaisselle, mobiliers et articles de décoration.
1. Architecture du site
Vous devez réaliser un site permettant aux clients de connaître les produits afin de les commander.
Ce site doit respecter l’architecture suivante :
Accueil
Nom de la page : index.html
Vaisselle
Mobilier
Décoration
Nom : somm1.html
Nom : somm2.html
Nom : somm3.html
A chaque page, des liens permettront de se
déplacer instantanément sur un autre endroit
de la même page ou sur une autre page :
Service Limoges
Service Sèvres
Nom : limoges.html
Nom : sèvres.html
Bon de commande
Sommaire général – Aller à la page d’accueil
Vaisselle – Aller au sommaire Vaisselle
Mobilier – Aller au sommaire Mobilier
Décoration – Aller au sommaire Décoration
Service Limoges – Aller au service Limoges
Service Sèvres – Aller au service Sèvres
Début – Aller en haut de page
Sommaire – Aller au sommaire de la partie ou
au sommaire général
Commander – Aller au Bon de commande
Nom : commande.html
Page 2/10
2. Exemple de présentation des différentes pages du site
Présentation de la page nommée « index » (page d’accueil)
Présentation de la page nommée « somm1 » (vaisselle)
Page 3/10
Présentation de la page nommée « somm2 » (mobilier)
Présentation de la page nommée « somm3 » (décoration)
Page 4/10
Présentation de la page nommée « limoges »
Présentation de la page nommée « sèvres »
Page 5/10
Présentation de la page nommée « commandes »
3. Conseils pour la réalisation du site
Il faut créer toutes les pages du site, même si elles restent vides pour l’instant, car nous en aurons
besoin pour créer les liens entre les pages.
* CREER LA PAGE D’ACCUEIL DU SITE :
Cette page est le sommaire général. On l’appelle aussi Home page.
Menu Fichier – Enregistrer “ Index ” – cliquer sur Enregistrer
* CREER LES AUTRES PAGES DU SITE :
Cliquer sur l’icône Nouv.- Choisir Page vierge - Menu Fichier - Enregistrer sous – Tapez le nom du
fichier “ Somm1 ” (il est inutile de taper l’extension .htm car elle se crée automatiquement) Enregistrer - OK (ne pas modifier le titre de la page pour l’instant car nous allons la remplacer plus
tard).
Répéter les mêmes opérations pour les autres fichiers (somm2, somm3, limoges, sèvres, commande)
Dans la barre des tâches (en bas de l’écran), tous les fichiers créés sont ouverts. Vous pouvez passer
de l’un à l’autre en cliquant une fois dessus. Fermer toutes ces fenêtres, sauf la page d’accueil que
nous allons maintenant modifier pour lui donner une présentation qui nous servira de modèle pour les
autres pages.
* CHOISIR UN FOND EN COULEUR :
Page 6/10
Menu Format – Onglet Couleur et arrière-plan -Choisir Propriétés et couleurs de la page – Cliquer
sur “ Utiliser les couleurs personnalisées ” - Choisir “ Arrière plan ” - Choisir la couleur désirée – OK
* INSERER UNE ZONE DE LIENS :
Menu Insérer - Tableau – Choisir 1 ligne et 4 colonnes – Alignement au centre – dans la zone
“ Arrière plan du tableau ” cocher Couleur – Choisir la couleur désirée – OK
Sélectionner les 4 cellules du tableau – Format – Aligner – Centre
* INSERER DES LIENS :
Cliquer sur la 1° cellule du tableau – Menu Insérer – Lien – Taper le texte “ Sommaire général ” Cliquer sur Choisir un fichier – Dans le dossier New_Art, Cliquer sur index.htm – Ouvrir – OK
Cliquer sur la 2° cellule du tableau – Menu Insérer – Lien – Taper le texte “ Vaisselle ” - Cliquer sur
Choisir un fichier – Cliquer sur somm1.htm – Ouvrir – OK
Répéter cette opération pour les autres cellules :
“ Mobilier ” - lien vers somm2.htm
– puis – “ Décoration ” - lien vers somm3.htm
* AJOUTER UN NOM A LA PAGE :
Créer plusieurs lignes blanches en tapant sur Entrée - les sélectionner - Format – Aligner - Centre Se
positionner sur la 2° ligne (au dessous du tableau des liens) – Taper “ NOM DE LA PAGE ” Sélectionner le texte - Format Taille - Sélectionner 18 – Format Style - Sélectionner Gras –
Souligné – Remarque : vous pouvez aussi utiliser la barre d’icônes pour ces modifications.
Nous allons maintenant créer des boutons permettant à l’utilisateur, en cliquant dessus, d’accéder
immédiatement à l’endroit de la page où nous avons mis une cible (ici en haut de page).ou à une autre
page.
Il faut pour cela faire 3 opérations : créer le bouton, créer la cible, puis créer le lien entre le bouton
et la cible (ou la page).
* AJOUTER UN BOUTON DE RETOUR (appelé début) :
Se placer à l’endroit où vous voulez insérer le bouton de retour (en fin de page)
Insérer - Image - Choisir le fichier Début.jpg - Ouvrir - OK
Format - Aligner - Centre
* CREER LA CIBLE :
Cliquer sur la 1° ligne de la page (tout en haut à gauche, avant la zone de liens) - Insérer - Cible –
Taper “ Début ” - OK
* CREER LE LIEN ENTRE LE BOUTON DE RETOUR ET LA CIBLE DEBUT :
Cliquer une fois sur le bouton de retour pour le sélectionner - Insérer - Lien – Sélectionner la cible
Début - OK
* AJOUTER UN BOUTON SOMMAIRE :
Se placer à l’endroit où vous voulez insérer le bouton sommaire (à droite du bouton retour, ajoutez
quelques espaces)
Page 7/10
Insérer - Image - Choisir le fichier sommaire.jpg - Ouvrir - OK
* CREER LE LIEN ENTRE LE BOUTON SOMMAIRE ET LA PAGE D’ACCUEIL :
Cliquer une fois sur le bouton Sommaire pour le sélectionner - Insérer - Lien – Choisir un fichier –
Sélectionner index.htm - Ouvrir - OK
* SAUVEGARDER :
Cliquer sur l’icône Enregistrer
Maintenant que la structure complète de la page d’accueil est créée, on va l’utiliser comme modèle de
présentation pour toutes les autres pages, ce qui permet de gagner du temps et donne une cohérence
au site.
* COPIER LE MODELE DE PRESENTATION SUR LES AUTRES PAGES :
Fichier – Enregistrer sous – Cliquer sur Somm1.htm – Enregistrer – Répondre Oui au remplacement –
Il faut maintenant modifier le nom de cette nouvelle page – Menu Format – Choisir Propriétés et
couleurs de la page – Onglet Générales - Taper “ Sommaire Vaisselle ” - OK –
Répéter cette opération pour tous les autres fichiers (Somm2.html, Somm3.html, Limoges.html,
Sèvres.html, Commande.html), selon les indications suivantes :
Nom du fichier
somm2.htm
somm3.htm
limoges.htm
sèvres.htm
commande.htm
Titre
Sommaire Mobilier
Sommaire Décoration
Service Limoges
Service Sèvres
Bon de commande
La structure du site est maintenant créée. Il suffit de modifier et de compléter chacune des pages.
Page 8/10
Exemple pour la page d’accueil
Cliquer sur l’icône Ouvrir – Sélectionner Index.htm – Ouvrir
* CHANGER LE NOM DE LA PAGE :
A la place de “ NOM DE LA PAGE ” – taper “ BIENVENUE CHEZ VOUS ” Changer si besoin les
attributs de présentation selon le modèle de l’annexe.
Ligne suivante, taper “ NEW ART ” - Modifier la couleur et mettre en clignotement (voir la procédure
ci-dessous)
Ligne suivante, insérer l’image du salon.
* POUR ECRIRE EN COULEUR :
Sélectionner le texte – Cliquer sur l’icône Couleur et choisir la couleur désirée.
*POUR FAIRE CLIGNOTER DU TEXTE :
Sélectionner le texte – Format – Style - Clignotement
* POUR INSERER UN IMAGE :
Insérer – Image – Cliquer sur “ Choisir le fichier ” - Sélectionner “ Salon.jpg ” - Ouvrir - Dimensions Décocher la boîte Contraintes - Hauteur – Taper 150 (pixels) – Largeur – Taper 225 (pixels)- OK
* SAUVEGARDER :
Avant de sauvegarder, vérifier la présentation de la page (notamment, les boutons en bas de page
doivent bien être séparés par des espaces).
Cliquer sur l’icône Enregistrer
Recommencer ces opérations pour toutes les pages
* CREER LE LIEN ENTRE LE SOMMAIRE VAISSELLE ET LE SERVICE LIMOGES :
Ecrire la page en entier (sans souligner) – Sélectionner le mot Limoges - Insérer - Lien – Choisir un
fichier – Choisir limoges.htm - Ouvrir - OK
Faire les mêmes opérations pour créer un lien vers Sèvres.
* POUR INSERER L’IMAGE DU SERVICE LIMOGES :
Insérer – Image – Cliquer sur “ Choisir le fichier ” - Sélectionner “ Limoges.jpg ” - Dimensions
Hauteur – Taper 150 (pixels) – la largeur (150 pixels) s’inscrit automatiquement car la boîte
Contraintes est cochée - OK
Une fois toutes les pages modifiées et sauvegardées, le site est terminé.
Nous pouvons vérifier qu’il fonctionne correctement.
Fermer toutes les fenêtres de Netscape Composer.
Menu Communicator – Choisir Navigator –
Page 9/10
Menu Fichier – Consulter une page – Cliquer sur Choisir le fichier – Chercher dans le dossier
New_Art le fichier index.htm et le sélectionner – Ouvrir - Ouvrir
Tester tous les liens.
Page 10/10