Création d`un site web avec Nvu Le but de ce TP est d`utiliser le

IUT TC
2006-2007
Création d’un site web avec Nvu
Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez !
Le but de ce TP est d’utiliser le logiciel Nvu pour réaliser un site simple pour un club de cinéma. Nvu est un logiciel libre
et gratuit, disponible en téléchargement sur l'Internet. Ses autres avantages : il est léger, portable, simple d'emploi (il
s’utilise comme un traitement de texte), traduit en français. De plus, il produit des pages web respectueuses des
standards actuels.
ETAPE 1
1. . Pour commencer, créez dans votre espace de travail l’arborescence suivante :
2. Ouvrez maintenant le logiciel Nvu (Démarrer / Tous les programmes / PortableNVU). Vous aurez l’interface de la
figure ci-dessous. Utilisez le menu Affichage / Barre d’outils pour afficher les zones qui ne sont pas visibles.
Menu et barres d’outils
Zone d’édition
Gestionnaire
de sites
Vues possibles
1
IUT TC
2006-2007
3. Dans le menu Outils/préferences, Rubrique « Général » modifiez les paramètres comme indiqué dans la
figure. Les options les plus importantes pour le travail à réaliser sont signalées en rouge.
4. Dans le Gestionnaire de sites de Nvu, cliquez sur le bouton Edition des sites. Cliquez sur Nouveau site et
donnez un nom au site que vous allez créer, dans l’exemple « siteCineClub ». Dans la zone Serveur de
publication, cliquez sur Parcourir pour retrouver le dossier siteCineClub que vous avez créé au début du TP,
laissez vides les autres paramètres. Cliquez sur OK. Vous devez voir dans le gestionnaire de sites l’arborescence
de votre site :
5. Créez, en utilisant les commandes Nouveau et Enregistrer, quatre pages : index.html (dans le dossier
siteCineClub) ; puis programme.html, infos.html et nous.html (dans le dossier pages). Lors du premier
enregistrement d’une page, il faut fournir deux informations : le titre de la page (qui apparaîtra dans la barre de titre
du navigateur) et le nom du fichier (par défaut, Nvu propose le titre comme nom ). Les fichiers doivent apparaître
2
IUT TC
2006-2007
dans le gestionnaire de sites, cliquez éventuellement sur
pour mettre à jour la liste. A la fin de la première
étape, vous aurez donc un site avec la structure suivante :
siteCineClub
Pages
Medias
programme.html
Index.html
infos.html
Images
nous.html
ETAPE 2
Les barres d’outils et les menus de Nvu ressemblent à ceux des logiciels de traitement de texte. Vous trouverez donc
dans le menu Format les commandes pour changer la police, la taille du texte, le type de paragraphe, définir les listes
et les couleurs de la page (Couleur et fond de page et ensuite cliquez sur Couleurs personnalisées).
Pour la plupart de fonctionnalités, un bouton est disponible dans la barre d’outils de mise en forme :
1. Mettez en forme la page d’accueil (index.html) selon le modèle et les instructions ci-dessous. Un site bien conçu doit
présenter des moyens de navigation clairs pour permettre à l’utilisateur de parcourir toutes les pages du site sans
« se perdre ». Dans notre cas, nous allons créer une « barre de navigation » que sera présente dans toutes les
pages du site :
3
IUT TC
2006-2007
Remarquez que le lien « Accueil » n’est pas activé. Evidemment, le lien de la page courante ne doit jamais être
actif. Pour définir les liens dans Nvu, utilisez la commande ou le bouton Lien et cliquez ensuite sur Parcourir
pour sélectionner sur le disque le fichier cible. Les adresses – URL – sont relatives à la page de création : Il est
aussi possible de définir la manière d’ouvrir le lien en utilisant le bouton Plus de propriétés :
Une fois créée la barre dans la page index.html, faites copier / coller pour l’insérer en haut de chacune des pages du
site. Vous devez activer / désactiver les liens correspondants, par exemple dans la page programme.html, le lien
« Programme » doit être désactivé (clic droit et « Supprimer les liens ») et le lien « Accueil » doit être activé. Vérifiez
les liens de chaque page en utilisant la commande ou le bouton Fichier / Aperçu dans le Navigateur :
2. Copiez dans le dossier « images » de votre site, les images du dossier «ressourcesSite / images ». Pour insérer les
images, placez le curseur à l’endroit où vous voulez insérer l’image et utilisez le menu Insertion / Images ou le
bouton Image :
. Le bouton Parcourir vous permet de sélectionner le fichier souhaité. L’onglet Dimension
permet d’ajuster la taille de l’image telle qu’affichée dans la page. L’onglet Apparence permet de régler
l’alignement de l’image par rapport au texte :
4
IUT TC
2006-2007
3. Mettez ensuite en forme la page programme.html selon le modèle et les instructions ci-dessous :
La page « Programme » contient 5 films dans un tableau, dont l’information se trouve dans le fichier films.txt :
• Le seigneur des Anneaux - La Communauté de l'Anneau
• La guerre des mondes
• L'Orange mécanique
• Tout sur ma mère
• Le goût des autres
Copiez dans le dossier « Medias » de votre site, les documents pdf du dossier « ressourcesSite / docs ». Créez un lien
vers le document « programme.pdf » qui sera activé en cliquant sur l’icône PDF :
Fixez une largeur de 110 pixels à chacune des photos, pour créer de miniatures. Dans l’onglet Lien des propriétés
de l’image, créez un lien vers l’original de l’image contenu dans votre dossier images. Enregistrez votre page et vérifiez
son fonctionnement en la visualisant dans le navigateur.
4. Mettez ensuite en forme la page infos.html selon le modèle de la figure de la page suivante.
• Créez un lien interne vers le fichier « HoraireWebCannes.pdf » de votre dossier « Médias »
• Créez des liens externes vers les publications suivantes :
Le festival de Cannes
http://www.festival-cannes.fr
Le printemps du cinéma
http://www.printempsducinema.com
Le site Cinefil
http://www.cinefil.com
5
IUT TC
2006-2007
Le site « The Internet Movie Database »
http://www.imdb.com
La féderation des Ciné-clubs de la Méditerranée
http://www.cinerenc-pezenas.com/
Les informations sur comment fonder un ciné-club de l’Académie de Créteil
http://www.ac-creteil.fr/acl/domaines/QR-Cinema/cineclub.htm
5. Mettez en forme la page nous.html :
•
Ecrivez quelques lignes vous présentant (chacun des membres de votre groupe). Indiquez dans ce texte que
vous étudiez à l’IUT de Montpellier. Ajoutez une image et un arrière-plan pour accompagner la présentation que
vous venez d’écrire (des images sont disponibles dans le dossiers « backgrounds » et « imagesPerso »).
•
Ajoutez un « profil chinois » à votre présentation en répondant aux questions : si j’étais (une plante, une
saison, une chanson, un animal, un sentiment, un livre, une couleur, un personnage d’un film )... je
serais...
•
Insérez au début de la page une rubrique « sommaire » qui liste les présentations. Définissez une ancre au
niveau du sommaire.
•
Insérez des lignes horizontales pour séparer les diverses présentations et insérez une ancre au début de
chaque partie.
•
Insérez ensuite les liens permettant d’aller du sommaire vers les différentes présentations, et un lien de retour
vers le sommaire à la fin de chaque présentation.
Si vous avez du temps devant vous ☺ essayez d’avoir le Bonus (TP Media) !!
Pour finir, déposez votre site (fichier zip) dans le lecteur partage
6