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
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
dans le gestionnaire de sites, cliquez éventuellement sur étape, vous aurez donc un site avec la structure suivante : pour mettre à jour la liste. A la fin de la première sitecineclub Pages programme.html Medias Index.html infos.html nous.html Images 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
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
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
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