Réaliser un site Web

Transcription

1 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

2 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 Nom : somm1.html Mobilier Nom : somm2.html Décoration Nom : somm3.html Service Limoges Nom : limoges.html Service Sèvres Nom : sèvres.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 : 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 Bon de commande 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

3 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

4 Présentation de la page nommée «somm2» (mobilier) Présentation de la page nommée «somm3» (décoration) Page 4/10

5 Présentation de la page nommée «limoges» Présentation de la page nommée «sèvres» Page 5/10

6 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

7 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

8 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

9 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

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