Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10

of 30
39 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
Table des matières 1. AVANT-PROPOS PRESENTATION DE NVU CARACTERISTIQUES PRINCIPALES DE NVU OBJECTIF DE CE DOCUMENT PRE-REQUIS NECESSAIRES MODE D'EMPLOI
Document Share
Document Transcript
Table des matières 1. AVANT-PROPOS PRESENTATION DE NVU CARACTERISTIQUES PRINCIPALES DE NVU OBJECTIF DE CE DOCUMENT PRE-REQUIS NECESSAIRES MODE D'EMPLOI DU DOCUMENT CONDITION DE REUTILISATION DE CE DOCUMENT PREPARER SON ENVIRONNEMENT DE TRAVAIL UTILISER LE DOSSIER SYSTEME «MES DOCUMENTS» RECUPERER LE PROGRAMME D'INSTALLATION DE NVU RECUPERER LE FICHIER ARCHIVE «DL_HTML.NVU.ZIP» RECUPERER LE DICTIONNAIRE FRANÇAIS D'OPENOFFICE.ORG POUR NVU RECUPERER 7-ZIP (FACULTATIF) INSTALLER NVU INSTALLER 7-ZIP (FACULTATIF) INSTALLER LE DICTIONNAIRE FRANÇAIS DECOMPRESSER LE FICHIER ARCHIVE «DL_HTML_NVU.ZIP» AFFICHER LES EXTENSIONS DE FICHIERS CREER UNE ARBORESCENCE POUR LE SITE DECOUVRIR L'INTERFACE DE NVU LANCER L'EXECUTION DE NVU IDENTIFIER LES PRINCIPAUX ELEMENTS DE L'INTERFACE DE NVU MASQUER LA FENETRE DE GESTION DE SITES PARAMETRER NVU PERSONNALISER LES BARRES D'OUTILS CREER UNE PREMIERE PAGE HTML DEMARRER NVU SAISIR DU TEXTE ENREGISTRER LA PAGE AFFICHER LA PAGE DANS UN NAVIGATEUR MODIFIER LE TITRE AFFICHER LE CODE SOURCE DE LA PAGE MISE EN FORME DU TEXTE MISE EN FORME DE PARAGRAPHE IDENTIFIER LES BALISES DE TITRE MISE EN FORME DE CARACTERES CHOIX DES COULEURS MODIFIER LE FOND DE LA PAGE INSERTION D'IMAGE UTILISER UNE IMAGE DE FOND INSERER DES IMAGES DANS LA PAGE Travail préparatoire Insérer une image IDENTIFIER LA BALISE «IMG» GESTION DES TABLEAUX : CREATION D'UNE BARRE DE NAVIGATION CREATION DE LA BARRE IDENTIFIER LES BALISES HTML DES TABLEAUX MODIFIER LES PROPRIETES DU TABLEAU IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 2 / 38 7.4. MODIFIER LES PROPRIETES DES CELLULES FUSIONNER LES CELLULES D'UN TABLEAU CREER DES LIENS HYPERTEXTES CREER DES LIENS INTERNES VERS D'AUTRES PAGES DU SITE IDENTIFIER LA BALISE A CREER DES LIENS EXTERNES VERS DES PAGES D'INTERNET Récupération de l'adresse Création du lien Préciser la cible du lien CREER DES LIENS INTERNES VERS DES DOCUMENTS TRAVAIL PREPARATOIRE CREATION DES LIENS CREER DES «ANCRES» DANS UN DOCUMENT LONG ère étape : création des ancres nde étape : création des liens hypertextes vers les ancres UTILISER LES FEUILLES DE STYLE TRAVAIL PREPARATOIRE CREATION D'UNE FEUILLE DE STYLE INTERNE CREER UNE FEUILLE DE STYLE EXTERNE Création de la feuille de style externe Lier une feuille de style à une page web CREER DE NOUVEAUX STYLES Créer un nouveau style Modifier le style «.barrenav» Attribuer un style à une balise LES PRINCIPALES BALISES HTML FICHIER HTML MISE EN FORME DES CARACTERES MISE EN FORME DE PARAGRAPHES LISTES HYPERLIENS IMAGES TABLEAU IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 3 / 38 1. Avant-propos 1.1. Présentation de Nvu Nvu (se prononce n-view en anglais) est un logiciel libre de création de site web pour Linux et Windows qui se donne pour objectif de rivaliser avec Frontpage de Microsoft ou Dreamweaver de Macromedia. Adresse du site officiel : «http://www.nvu.com/index.html» Adresse du site français : «http://frenchmozilla.sourceforge.net/nvu/» Nvu est encore perfectible mais il permet déjà de créer facilement un petit site web. N-B : ce parcours guidé utilise la version nvu-1.0-win32-installer-fr.exe Caractéristiques principales de Nvu éditeur de page web WYSIWYG 2 aussi facile à utiliser qu'un traitement de texte. Mise à jour de site web distant par FTP. Production de code HTML compatible avec tous les navigateurs courants. Bascule d'affichage WYSIWYG / code source HTML / Aperçu. Éditeur multi-documents à l'aide d'onglets. Prise en charge avancée des formulaires et des tableaux. Gestion des feuilles de style Objectif de ce document Proposer un parcours guidé permettant à un enseignant de créer un petit site web, c'est à dire un ensemble de pages simples au format html pouvant «contenir» des images, des tableaux, des liens hypertextes internes ou externes, vers d'autres pages au format html ou vers des documents dans des formats standard : Acrobat «PDF», Flash «SWF», Rich Text Format «RTF», «ZIP»,... par exemple pour publier sur un intranet d'établissement. N-B : la publication sur un site web, un cédérom, un intranet n'est pas abordé dans ce document Pré-requis nécessaires Savoir gérer (créer, supprimer, copier, renommer) des dossiers et des fichiers sur son ordinateur. Avoir navigué sur Internet, et en particulier : * savoir saisir une adresse web (URL) dans la barre d'adresse du navigateur, * utiliser les boutons «Page précédente», «Page suivante», «Actualiser»,... * savoir récupérer un fichier depuis un site web vers son ordinateur. Savoir utiliser les fonctions de base du traitement de texte. Savoir décompresser un fichier archive zip Mode d'emploi du document Ce document vous propose un parcours guidé : Les paragraphes encadrés d'un trait simple ombré avec l'icône objectifs des activités proposées juste après. présentent la démarche et les Les paragraphes encadrés doubles avec l'icône présentent des concepts. contiennent des informations générales ou Les paragraphes avec un trait vertical double à gauche décrivent les tâches à réaliser. L'icône en début de ligne précise la nature des activités demandées : il faut utiliser la souris, il faut utiliser le clavier, l'ordinateur réalise l'action, il faut observer, il faut répondre par écrit sur le document. 2 What You See Is What You Get. IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 4 / 38 1.6. Condition de réutilisation de ce document Le contenu de ce document est soumis à la licence «Public Documentation licence» dont le contenu peut être consulté à l'adresse : «http://www.openoffice.org/licenses/pdl.html». Cela signifie que vous êtes libre de le reproduire, le recopier, le réutiliser, le modifier et le distribuer à condition de lui attribuer les mêmes libertés de copie, d'utilisation etc. Vous pouvez télécharger la dernière version de ce document sur mon espace personnel : «http://tice.caen.iufm.fr/tice/members/dlachiver». 2. Préparer son environnement de travail Nous allons installer la dernière version française de Nvu. De plus, nous aurons besoin d'un fichier archive contenant des documents nécessaires à la réalisation de ce parcours guidé. Enfin, nous modifierons la configuration de Windows Utiliser le dossier système «Mes Documents» Le dossier «Mes Documents» est un dossier système dont l'emplacement réel peut varier suivant la configuration de votre ordinateur, particulièrement dans un environnement réseau. Windows XP propose dans ses boîtes de dialogues «Fichier Ouvrir» ou «Fichier Enregistrer», un accès rapide au dossier «Mes Documents» comme dans la figure ci-contre à droite. Dans la suite de ce parcours nous utiliserons ce dossier «Mes Documents». N-B : Bien entendu, vous pouvez utiliser un autre dossier, il faudra alors adapter la suite de ce parcours en conséquence Récupérer le programme d'installation de Nvu Dans un premier temps, nous allons récupérer le programme d'installation du logiciel Nvu. Ouvrir votre navigateur web préféré (Firefox, Internet Explorer ou Mozilla par exemple). Saisir l'url «http://tice.caen.iufm.fr/tice/» Le navigateur affiche la page d'accueil du portail «TICE de l'iufm de Basse-Normandie». A gauche dans la zone de navigation, cliquer sur «Membres», puis sur «D. Lachiver». Le navigateur affiche la page d'accueil de «l'espace de D. Lachiver». Cliquer sur le lien «NVU : Création de pages HTML pour le web». N-B : la récupération de fichier diffère un peu selon le navigateur utilisé. IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 5 / 38 Si vous utilisez «Internet Explorer» Cliquer droit sur le lien du fichier «nvu-1.0-win32- installer-fr.exe». Le navigateur affiche un menu contextuel. Cliquer sur la commande «Enregistrer la cible sous». Le navigateur ouvre une boîte de dialogue : «Enregistrer Sous». Sélectionner l'emplacement «Mes documents». Cliquer sur le bouton «Enregistrer». Si vous utilisez «Firefox» Cliquer gauche sur le lien «nvu-1.0-win32-installerfr.exe». Le navigateur affiche une boîte de dialogue «Ouverture...». Sélectionner l'option «Enregistrer sur le disque». Valider N-B : par défaut, Firefox enregistre sur le bureau. Si le navigateur ouvre une boîte de dialogue : «Enregistrer Sous». Sélectionner l'emplacement «Mes documents». Valider. N-B : par défaut, le navigateur «Firefox» ne vous demande pas d'emplacement : il télécharge le document sur le bureau. Vous pouvez modifier le paramétrage du navigateur : sélectionner le menu «Outils Options Téléchargement», sélectionner l'option «Me demander où enregistrer le fichier» Récupérer le fichier archive «dl_html.nvu.zip» Le fichier archive «dl_html_nvu.zip» contient des ressources : images, fichiers PDF,... que nous utiliserons dans la suite de ce parcours guidé. Depuis la même page «NVU : Création de pages HTML pour le web», en appliquant la même procédure que ci-dessus, récupérer dans votre dossier «Mes Documents» le fichier archive «dl_html.nvu.zip» Récupérer le dictionnaire français d'openoffice.org pour Nvu Nvu utilise le dictionnaire d'openoffice. La version nvu-1.0-win32-installer-fr.exe n'intègre pas le dictionnaire français pour des problèmes de licence. Nous allons récupérer ce dictionnaire français. N-B : ce dictionnaire peut aussi être récupéré depuis le site d'openoffice. Depuis la même page «NVU : Création de pages HTML pour le web», en appliquant la même procédure que ci-dessus, récupérer dans votre dossier «Mes Documents» le fichier archive «fr_fr.zip» Récupérer 7-Zip (facultatif) Un fichier archive est un fichier contenant, sous une forme compressée un ensemble de fichiers et/ou dossiers. Le format que l'on rencontre le plus souvent sur Internet est le format Zip. Le système d'exploitation Windows XP prend en charge ce type de fichier archive. Néanmoins 7Zip ajoute des fonctionnalités, je vous conseille donc de l'installer même sur Windows XP. Si vous souhaitez installer 7-zip sur votre ordinateur, vous pouvez le télécharger à partir du lien de la page «NVU : Création de pages HTML pour le web». Sinon, vous pouvez sauter cette étape. Depuis la même page «NVU : Création de pages HTML pour le web», récupérer dans votre dossier «Mes Documents» le fichier d'installation «7z432.exe» de 7-zip 2.6. Installer Nvu Nous allons installer le programme NVU. L'installation de Nvu ne pose aucun problème. Attention, si vous avez une version antérieure, il faut la désinstaller auparavant (Menu démarrer Panneau de configuration Ajout / suppression de programmes). Refermer toutes les fenêtres, pour y voir plus clair. IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 6 / 38 Lancer l'installation Nvu en double-cliquant sur le fichier «nvu-1.0-win32-installer-fr.exe» récupéré précédemment. Accepter la licence d'utilisation et suivre les instructions en conservant les options proposées par défaut. En fin d'installation, décocher la case «Exécuter NVU». Vous avez installé Nvu : un nouveau sous-menu «Nvu» a été ajouté au menu «Démarrer Programmes». Ce sous-menu contient un raccourci qui permettra de lancer l'exécution de Nvu Installer 7-zip (facultatif) Lancer l'installation de 7-zip en double-cliquant sur le fichier «7z432.exe» récupéré précédemment. Suivre les instructions en conservant les options proposées par défaut. Vous avez installé 7-zip : * une nouveau sous-menu «7-zip» a été ajouter au menu «Démarrer Programmes». Ce sous-menu contient un raccourci qui permettra de lancer l'exécution de «7-zip file manager». * de nouvelles commandes ont été ajoutées au menu contextuel lorsqu'on clique droit sur un fichier. Par défaut, 7-zip est installé avec une interface en anglais. Nous allons sélectionner l'interface française. Lancer l'exécution de «7-Zip File Manager» depuis le menu démarrer. Sélectionner la commande «Tools Options». 7-zip ouvre une boîte de dialogue «Options». Sélection l'onglet «Language». Dans la liste déroulante, sélectionner «French (Français)». Valider. Refermer 7-Zip Installer le dictionnaire français Nous allons décompresser le fichier archive «fr_fr.zip» dans le dossier «C:\Program Files\Nvu\components\myspell\». Déplacer (couper-coller) le fichier «fr_fr.zip» récupéré précédemment vers le dossier C:\Program Files\Nvu\components\myspell\». Avec Windows XP Cliquer droit sur le fichier «fr_fr.zip». Sélectionner la commande «Extraire tout». Windows XP ouvre une fenêtre «Assistant Extraction». Suivre les instructions : lorsque Windows vous propose un emplacement : cliquer sur le bouton «Parcourir» et sélectionner le dossier «C:\Program Files\Nvu\components\myspell\». «Terminer» l'assistant sans afficher les fichiers extraits. Avec 7-Zip Cliquer droit sur le fichier archive «fr_fr.zip». Sélectionner la commande «7-zip Extraire ici». Le dossier C:\Program Files\Nvu\components\myspell\» doit contenir les deux fichiers «fr_fr.dic» et «fr_fr.aff». IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 7 / 38 Vous pouvez effacer les fichiers «fr_fr.zip» et «README_fr_FR.txt» de ce dossier Décompresser le fichier archive «dl_html_nvu.zip» Nous allons décompresser le fichier archive «dl_html_nvu.zip» dans notre dossier «Mes Documents». Ouvrir le dossier «Mes Documents» de votre ordinateur. («Menu Démarrer Mes documents») Déplacer (couper-coller) le fichier «dl_html_nvu.zip» récupéré précédemment dans ce dossier «Mes Documents» si nécessaire. Avec Windows XP Cliquer droit sur le fichier «dl_html_nvu.zip». Sélectionner la commande «Extraire tout». Windows XP ouvre une fenêtre «Assistant Extraction». Suivre les instructions : lorsque Windows vous propose un emplacement : cliquer sur le bouton «Parcourir» et sélectionner le dossier «Mes documents». «Terminer» l'assistant sans afficher les fichiers extraits. Noter l'apparition d'un dossier «ressources» dans votre dossier «Mes Documents». Ouvrir ce dossier «ressources». Vérifier la présence de différents fichiers et dossiers comme sur la figure ci-contre. Avec 7-Zip Cliquer droit sur le fichier archive «dl_html_nvu.zip». Sélectionner la commande «7-zip Extraire ici» Afficher les extensions de fichiers Sous Windows XP, le nom des fichiers comporte deux parties : * la partie principale * l'extension, séparée de la partie principale par un point. Par exemple, «favoris.html» est un fichier dont la partie principale du nom est «favoris» et son extension «html». L'extension permet au système d'exploitation Windows XP de reconnaître le type de fichier, par exemple : * exe correspond à un fichier exécutable, une application, * htm ou html correspond à une page au format html, *... Par défaut, Windows masque les extensions de fichiers. Lors de la création de liens, il sera nécessaire d'identifier le nom complet des fichiers : il faut donc absolument afficher les extensions de fichiers. Nous allons donc vérifier la configuration de Windows et si nécessaire corriger cette configuration afin d'afficher les extensions de fichiers. IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 8 / 38 Ouvrir le dossier «ressources» dans «Mes Documents». Vérifier que Windows ne masque pas les extensions de fichiers. Vous devez notamment voir les extensions «jpg» ou «gif» des fichiers images contenus dans ce dossier. Si vous ne voyez pas les extensions de fichier : Sélectionner la commande : «Outils Option des dossiers», Cliquer sur l'onglet «Affichage» comme sur la figure ci-dessus. Décocher la ligne «Masquer les extensions des fichiers dont le type est connu». Valider Créer une arborescence pour le site Site web : Ensemble de pages html développés par un particulier, un établissement, généralement hébergés sur un serveur web. Il est important que toutes les ressources d'un site web : fichiers html, fichiers images, fichiers son,... soient enregistrées dans une même arborescence de dossiers afin de faciliter le transfert sur un serveur web ou un cédérom. Dans le dossier «Mes Documents», nous allons créer l'arborescence suivante : site img doc media Nom du dossier Contenu Extension des fichiers site Ce dossier contiendra tous les fichiers html au format html. img Ce sous-dossier contiendra tous les png, gif, jpg fichiers images. doc Ces sous-dossier contiendra tous les rtf, pdf fichiers documents (doc, pdf, sxw,...) media Ce sous-dossier contiendra tous les fichiers multimédias : sons, animations,... wav, mp3... IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 9 / 38 Créer un dossier «site» dans votre dossier «Mes Documents». Ouvrir ce dossier «site». Créer trois dossiers «img», «doc», «media» dans ce dossier «site». Refermer toutes les fenêtres ouvertes (bouton ). Rappel : Vous pouvez choisir un autre emplacement, l'essentiel est de créer un dossier «site» et ses trois sous-dossiers Découvrir l'interface de Nvu 3.1. Lancer l'exécution de Nvu Lancer l'exécution «Nvu». N-B : lors de son 1 er lancement, Nvu ouvre deux boîtes de dialogue : une boîte dont le titre est «Veuillez-nous tenir au courant...», une boîte de dialogue présentant des astuces au démarrage. Valider pour refermer ces deux fenêtres. Agrandir la fenêtre de Nvu si nécessaire. Sélectionner la commande «Fichier Ouvrir un fichier» ou cliquer sur le bouton «ouvrir» de la barre d'outils. Nvu ouvre une boîte de dialogue «Ouvrir un fichier html». Sélectionner le fichier «exemple.html» placé dans le dossier «ressources». Nvu affiche le document dans la zone d'édition Identifier les principaux éléments de l'interface de Nvu A l'aide de la figure de la page suivante, repérer de haut en bas : la barre de titre, la barre de menus, la barre de composition, la barre de mise en forme, la fenêtre de gestion de site à gauche (il est possible que cette zone soit masquée), la barre d'onglets des documents ouverts, la zone principale d'édition, la règle entre la zone d'édition et la barre d'onglets des documents ouverts, la barre d'onglets du choix du mode d'édition : «Normal», «balises HTML», «HTML source», «Aperçu». la barre d'état. Sélectionner les différents modes d'édition à l'aide de la barre d'onglet du bas. IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 10 / 38 Parcours guidé : créer des pages simples au format html avec Nvu 28/01/2010 IUFM de Basse-Normandie Dominique Lachiver page 11 / 38 Exercice n 1 : Ouvrir dans un nouvel onglet le fichier «exemple2.html» qui se trouve aussi dans le dossier «ressources». Afficher successivement les deux pages à l'aide de la barre d'onglets du haut Masquer la fenêtre de gestion de sites Nous n'utiliserons pas la mise à jour de site distant par ftp. Nous allons masquer la fenêtre de gestion de sites. Appuyer plusieurs fois sur la touche pour afficher / masquer la fenêtre de gestion de sites. N-B : La touche est une touche bascule. Vous pouvez aussi sélectionner la commande «Affichage Barre d'outils Barre latérale». Masquer la fenêtre de site Paramétrer Nvu Nous allons vérifier certains paramètres de Nvu et les modifier si nécessaire. Sélectionner la commande «Outils Préférences». Nvu ouvre une boîte de dialogue «Options». Dans la section «Général» : Choisir l'option «Reformater la source HTML». N-B : l'option «Reformater la source HTML» permet de nettoyer les pages créées par des traitements de texte par exemple. Décocher si nécessaire la case «Utiliser les styles CSS au lieu des éléments et attributs HTML». N-B : pour démarrer notre parcours, il vaut mieux garder les balises HTML standard. Dans la section «Paramètre des pages» : Saisir votre n
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks
SAVE OUR EARTH

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!

x