CRÉATION DE SITE INTERNET TD 1

Transcription

1 Création de pages Internet avec le logiciel libre Nvu - 1/7 CRÉATION DE SITE INTERNET TD 1 I LANCEMENT DE NVU ET CRÉATION DU SITE. 1) Liminaire : Créez en premier, un sous-dossier consacré au travail avec Nvu, dans votre dossier personnel sur le serveur. Pour cela : 1) Lancez l'explorateur de Windows en cliquant sur Démarrer / Programmes (ou Tous les programmes) / Accessoires / Explorateur de Windows. 2) Dans la fenêtre de gauche, remontez et regardez les disques dont vous disposez sur la machine. Vous devez trouver A: le lecteur de disquettes, pas de B:, C: le premier disque dur de la machine. Le disque D: qui est sur votre machine et qui contient des données, le disque E: qui est le lecteur de cédéroms. 3) Vous devez voir un disque P: avec votre nom, c'est celui de votre dossier personnel sur le serveur. C'est dans ce dossier qu'il vous faut créer votre dossier de travail pour Nvu. 4) Double-cliquez avec le bouton gauche sur le disque P:. Dans la fenêtre qui s'est ouverte, en haut à gauche cliquez sur le mot Fichier puis Nouveau puis Dossier et dans le menu qui s'ouvre, cliquez sur Nouveau, puis sur Dossier. Dans la fenêtre de droite, vous devez voir apparaître ceci : il suffit de taper le nom qui vous convient et d'appuyer sur Entrée. 2) Récupération des éléments ; Votre dossier de travail est maintenant créé, dans votre dossier personnel, sur le serveur. Nous allons y déposer les éléments dont nous avons besoin dans notre page. D'une manière générale, c'est une bonne méthode de travail que de disposer les éléments nécessaires, dans les bons dossiers, avant de créer les pages. Allez dans le poste de travail (sur le Bureau ou à l'aide de l'explorateur de Windows), dans le dossier TD Nvu. Copiez les éléments qui s'y trouvent (CTRL A pour tout sélectionner et clic droit pour copier à nouveau clic droit et coller, dans le dossier de travail que vous venez de créer, dans votre dossier personnel. 3) Nvu : Démarrez Nvu en cliquant sur Démarrer / Programmes (ou Tous les programmes) / Nvu / Nvu.

2 Création de pages Internet avec le logiciel libre Nvu - 2/7 II CRÉATION DE NOTRE PREMIÈRE PAGE : 1) Les paramètres importants d'une page : a- Le titre : Du point de vue de l'internet, il y a deux titres pour une page. Il y a le titre comme nous avons l'habitude de le considérer, c'est celui qui apparaît dans la page, ici. Il existe un autre titre, auquel on ne fait pas attention si l'on n'en a pas entendu parler, c'est celui qui s'affiche dans le bandeau du navigateur, en haut de l'écran. Il est très important, certains outils de recherche accordent le poids (l'importance) le plus grand, aux mots de ce titre. C'est-à-dire que dans un moteur de recherche, un site qui contiendrait le mot Neuvic dans ce titre, serait classé avant une page qui contiendrait le mot Neuvic dans le corps de la page. Ce titre est aussi celui qui apparaît dans les favoris, les signets, l'historique, il ne faut pas le négliger. Les éléments généraux de la page sont accessibles par le menu Format / Titre et propriétés de la page. Cette page s'affiche alors, mais il sera toujours possible de modifier nos choix par la suite. Lorsque vous aurez choisi votre Titre, par exemple Neuvic, il faudra le saisir (taper) ici. Vous pouvez entrer un nom d'auteur, il ne s'affichera pas dans votre page, mais il sera possible d'accéder à cette information. Description est du même genre, vous pouvez remplir ce champ, mais il ne s'affichera pas dans la page elle-même.

3 Création de pages Internet avec le logiciel libre Nvu - 3/7 b- Propriétés générales de la page : Nous pouvons maintenant définir les propriétés générales de la page, comme la couleur du fond ou l'image de fond, la couleur des caractères. Cliquez sur Format / Couleurs et fond de page, cette fenêtre s'ouvre. c- Image d'arrière-plan - Trame de fond : En cochant le bouton Couleurs personnalisées, vous pouvez choisir la couleur du texte et celle du fond de la page en cliquant sur les boutons associés. Pour l'instant, ne changez pas les couleurs des liens. De manière générale, il vaut mieux laisser ces options comme elles sont définies dans la grande majorité des pages. Cependant, vous pouvez les modifier si vous l'estimez nécessaire, par exemple de part votre choix de la couleur du fond et de celle de vos caractères. Si vous ne précisez rien pour le fond de votre page, elle sera soit en blanc, soit en gris, selon le navigateur utilisé par la personne qui le consultera. Au lieu de ne mettre qu'une couleur en arrière plan de la page, on peut aussi placer une image. Si sa taille est inférieure à celle de la page, elle sera reproduite plusieurs fois en mosaïque, de façon à couvrir tout le fond. Cliquez ici, la fenêtre suivante s'ouvre : En cliquant sur cette flèche, vous pouvez vous déplacer dans les répertoires, allez dans Poste de travail / Images / Images de fond. Après avoir choisi une image, cliquez sur le bouton Ouvrir. Le fond de votre page est couvert par l'image. Faites d'autres essais et revenez peut-être à un fond de couleur uni, sans image, pour que le texte soit plus facilement lisible.

4 Création de pages Internet avec le logiciel libre Nvu - 4/7 2) Premier texte, premières images : En haut de votre page, écrivez Bienvenue à Neuvic. Les outils de mise en forme sont classiques : La lettre B signifie Bold, ce qui veut dire gras. Pour l'instant, nous ne nous intéresserons qu'aux fonctions de base. Après avoir sélectionné votre titre, vous pouvez choisir sa couleur, gras, italiques, aligné à gauche, centré, aligné à droite. La taille des caractères se choisit ici, mais vous ne disposez pas de toutes les tailles habituelles d'un traitement de texte. Cela vous permet en fait d'agrandir ou de diminuer le texte que vous aurez sélectionné. Les raisons en sont données dans le polycop de cours. III MISE EN PAGE : 1) Insérer un tableau : Pour mettre en page les éléments d'une page Internet, nous ne disposons pas de tous les outils d'un traitement de texte. Le principal outil est le tableau, c'est lui qui permettra de gérer la disposition sur la page. Pour insérer un tableau, cliquez sur Insertion / Tableau puis sur le bouton Précisely. Choisissez 3 lignes, 3 colonnes et 75% de largeur et la valeur 1 pour la l'épaisseur de la bordure des cellules et cliquez sur OK. 2) Adaptation d'un tableau :

5 Création de pages Internet avec le logiciel libre Nvu - 5/7 À la façon d'un tableur, vous pouvez modifier les largeurs des lignes et des colonnes en déplaçant ces repères. Des informations sur les tableaux et leur gestion, vous sont fournies dans le polycop de cours NVU. 3) Alignement du tableau : Pour centrer le tableau horizontalement dans la page, cliquez n'importe où dans la tableau et ensuite cliquez sur le bouton Tableau, dans la barre d'outils. Cette fénêtre s'ouvre, cliquez sur l'onglet Tableau pour que vos modifications s'appliquent bien à l'ensembel du tableau et pas à la seule cellule sélectionnée. Ici, vous pouvez choisir l'alignement du tableau. Si vous cliquez sur OK, la fenêtre se ferme et votre modification est appliquée. En cliquant sur le bouton Appliquer, votre modification est appliquée, mais vous ne quittez pas cette fenêtre, ce qui vous permet d'effectuer d'autres modifications en même temps. Dans la cellule (la case) du milieu en haut dans le tableau, écrivez Neuvic, dans celle de gauche habitants et dans celle de droite Sport. Remplissez ensuite les cases comme sur le modèle, sans vous soucier des images, pour l'instant. Pensez à enregistrer votre travail, Fichier / Enregistrer ou par CTRL + S.

6 Création de pages Internet avec le logiciel libre Nvu - 6/7 IV SUIVI DU TRAVAIL : A partir de ce moment, vous pouvez vérifier la page que vous êtes en train de créer, en l'ouvrant dans un navigateur Internet, par exemple Mozilla, Firefox ou Microsoft Internet Explorer. Tout d'abord, enregistrez votre travail avec CTRL + S ou Fihiers / Enregistrer. À l'aide de l'explorateur de Windows, allez dans votre dossier de travail (P:) sur le serveur et double-cliquez sur le nom de votre fichier. Il doit s'ouvrir dans Firefox, Mozilla ou Internet Explorer. Chaque fois que vous voudrez vérifier votre page, n'en restez jamais à ce que vous montre votre outil de création, que ce soit Nvu ou n'importe quel autre, mais prenez l'initiative d'utiliser un navigateur et mieux, plusieurs navigateurs. Par la suite, il n'est plus nécessaire de se servir de l'explorateur de Windows, il suffit de procéder ainsi : 1) Enregistrez votre travail dans Nvu 2) Allez dans votre navigateur, par exemple en cliquant en bas de l'écran, sur le bouton de ce navigateur, puis cliquez sur le bouton actualiser dans Internet Explorer, ou dans Mozilla et pour Firefox Vous pouvez également voir votre page dans le navigateur, en cliquant sur Affichage / Aperçu mais cette fonction est parfois malcommode. V INSERTION DES IMAGES : Pour l'instant, nous allons paramètrer Nvu, pour qu'il place une copie des images que nous plaçons dans nos pages, dans le même dossier que celui de la page elle-même. Dans notre cas, cela a peu d'importance, car nous effectuons nos enregistrements, dans le même dossier que celui qui contient nos images. Cliquez sur Outils / Préférences, dans la fenêtre qui s'ouvre, vous devez voir ces options : Vérifiez que Enregistrer les images et les autres fichiers associés, soit coché. Cela va permettre que toutes images, quel que soit l'endroit où vous saurez été les chercher, seront copiées dans le répertoire dans lequel vous effectuez l'enregistrement de votre page. Ceci est important lorsque l'on publiera les pages sur l'internet.

7 Création de pages Internet avec le logiciel libre Nvu - 7/7 Insérez la photo de la mairie de Neuvic, dans la case centrale du tableau. Pour cela cliquez sur Insertion / Image ou sur le bouton Image dans la barre d'outils et allez chercher cette image dans votre dossier de groupe, sousdossier TD1Nvu. La fenêtre suivante s'ouvre, cliquez ici. Remontez dans la liste, jusqu'à trouver le disque G: qui est celui de votre groupe, c'est-àdire votre classe. Ouvrez-le, en vous déplaçant vous devez y trouver, le dossier TD1Nvu et à l'intérieur l'image Mairie. En cliquant sur son nom, vous ne pouvez malheureusement pas la visualiser dans cette fenêtre, mais lorsque vous l'aurez choisie et que vous aurez cliqué sur le bouton Ouvrir, vous pourrez la visualiser en dessous de Aperçu de l'image. Plusieurs autres champs vous sont proposés, Texte alternatif par exemple, pour les personnes qui n'affichent pas les images lors de la navigation, etc. Pour l'instant, vous pouvez cliquer plus simplement sur le bouton Pas de texte alternatif puis sur le bouton OK. A partir de là, votre page est créée et fonctionne! VI EXPLORATION : Vous pouvez maintenant, changer les couleurs, le fond, la disposition, etc. en particulier en utilisant le polycop de cours, mais nous y reviendrons en détails. Vous pouvez par exemple placer des couleurs ou des images de fond dans les cellules d'un tableau, c'est le cas dans notre modèle, en cliquant dans la cellule que vous avez choisie et en cliquant ensuite sur ce bouton, etc.