Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Transcription

1 Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le contenu de vos pages web comme vous le feriez avec un logiciel de traitement de texte. Au démarrage le logiciel ouvre une page vide que vous remplirez en y tapant du texte et en y insérant des images, des tableaux, des liens, etc. Ce cours d initiation au logiciel NVU traite des points suivants : Saisie et mise en forme de textes Insertion d images Création et mise en forme d un tableau Couleurs du texte et du fond de page Liens hypertextes Mise en œuvre du logiciel : En exercice support, vous devrez concevoir un site Internet présentant quelques vues de la ville de Bastia. Pour cela, vous allez commencer par créer la page d accueil du site : Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. DIAZ Frédéric 1

2 Insertion d une image : Cliquez sur le bouton Image : La fenêtre Propriété de l image apparaît alors. Cliquez sur le bouton Parcourir afin de sélectionner l image à insérer : Cliquez sur l icône du fichier image concerné, puis cliquez sur le bouton ouvrir : L adresse de l image étant spécifiée, saisissez un texte alternatif : La taille réelle de cette image étant importante, nous allons gérer sa taille à l écran. Pour cela, cliquez sur l onglet Dimensions : Saisissez la nouvelle largeur de l image. La case «Conserver les proportions» étant cochée, la hauteur sera automatiquement calculée : DIAZ Frédéric 2

3 Cliquez maintenant sur l onglet Apparence : Indiquez une épaisseur de bordure de 2 pixels : Cliquez maintenant sur le bouton OK, afin de valider l insertion de l image. L image est maintenant insérée sur la page d accueil du site. Vous allez maintenant insérer un tableau d une ligne et de trois colonnes. Pour cela, cliquez sur le bouton de la barre d outils. Dans la fenêtre «Insérer un tableau», cliquez sur l onglet Précisément, puis spécifiez 1 ligne et 3 colonnes : Le champ Bordure doit rester égal à 0, car dans cet exemple nous désirons que les contours du tableau restent invisibles. Validez l insertion du tableau en cliquant sur le bouton OK : DIAZ Frédéric 3

4 Remplissez chaque cellule du tableau avec le texte suivant : Sélectionnez maintenant l ensemble du tableau : Cliquez sur les boutons B (gras) et centré : Le contenu du tableau est maintenant en gras et centré dans les cellules : Menu Tableau, commande Propriétés du tableau : Réglez la largeur du tableau à 100% de la fenêtre, et demandez un alignement centré. Validez les transformations en cliquant sur le bouton OK. Le tableau prend maintenant toute la largeur de la page : Vous allez maintenant centrer l image. Pour cela, sélectionnez la en cliquant une fois dessus, puis cliquez sur le bouton centré de la barre d outils : DIAZ Frédéric 4

5 L image est maintenant centrée. Vous allez maintenant mettre en forme le titre de la page : Sélectionnez le titre de la page : Cliquez sur le bouton centré de la barre d outils : Sélectionnez ensuite le style Titre 1 : Le titre de la page est mis en valeur : Avant de sauvegarder la page, il vous fournir quelques renseignements. Pour cela, menu Format, commande Titre et propriétés de la page : Renseignez les champs Titre, Auteur, Description et Langue : Ceci fait, cliquez sur le bouton OK DIAZ Frédéric 5

6 Sauvegardez votre page d accueil sous le nom index.html Il est fortement conseillé de créer un dossier spécifique au site Internet en construction. Couleurs du texte et du fond de page : Menu Format, commande Couleur et fond de page Cliquez sur texte normal, puis sélectionnez la couleur blanche : Demandez également un Texte de lien blanc sur un fond d écran bleu, puis validez en cliquant sur le bouton OK : Vous allez maintenant réaliser la deuxième page du site : Menu Fichier, commande Nouveau. Cliquez sur le bouton Ouvrir : DIAZ Frédéric 6

7 Une page vierge est chargée dans un nouvel onglet : En vous aidant des indications précédentes, reproduisez la page présente ci-dessous : Sauvegardez la page sous : saint_jean.html Vous allez maintenant créer un lien hypertexte retour vers la page d accueil : Sélectionnez la phrase, «Retour à la page d accueil» Cliquez sur le bouton Lien : Dans la boite de dialogue qui apparaît alors, cliquez sur le bouton Parcourir : Sélectionnez le fichier index.html, puis cliquez sur le bouton Ouvrir : DIAZ Frédéric 7

8 Le fichier index.html étant désigné comme cible du lien, cliquez sur le bouton OK. Revenez maintenant à la page d accueil en cliquant sur son onglet : Sélectionnez le texte Basilique Saint Jean : Cliquez sur le bouton Lien : Sélectionnez le nom de fichier : puis cliquez sur OK saint_jean.html Le lien hypertexte est maintenant souligné : Quittez le logiciel NVU. Consultation des pages web : Ouvrez le dossier contenant les pages du site, Puis double-cliquez sur la page index.html DIAZ Frédéric 8

9 Votre site s affiche dans une fenêtre d Internet Explorer ( ou tout autre navigateur. ) : Si vous cliquez sur le lien «Basilique Saint Jean», la page correspondante s ouvre : Un clic sur le lien retour, rappellera la page d accueil. Entraînez vous maintenant à créer les pages marche.html et sainte_marie.html, puis établissez les liens permettant d y accéder depuis la page d accueil. DIAZ Frédéric 9