Création d`un site web avec Nvu 1. 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
sources principales d'informations:
• http://www.framasoft.net/article2656.html
• http://info.sio2.be/NVU/index.php
• http://www.anseladams.com
dans votre espace de travail les
documents que vous réalisez !
ETAPE 1
1. Le but de ce TP est d’utiliser le logiciel Nvu* pour réaliser un site simple sur le thème de la photographie. Pour
commencer, créez dans votre espace de travail l’arborescence suivante :
2. Ouvrez maintenant le logiciel Nvu. 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
*
Il s'agit d'un logiciel libre et gratuit disponible en téléchargement sur l'Internet. Ses autres avantages : il est léger, portable, simple
d'emploi, traduit en français. De plus, il produit des pages web respectueuses des standards actuels.
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 de la page suivante. 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. Donnez un nom au site que
vous allez créer, dans l’exemple « sitePhoto ». Dans la zone Serveur de publication, cliquez sur Parcourir
pour retrouver le dossier sitePhoto que vous avez créé au début du TP. Cliquez sur Nouveau site et ensuite 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
sitePhoto) ; puis photographes.html, theorie.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. Les fichiers doivent apparaître dans le gestionnaire de sites, cliquez
2
IUT TC
2006-2007
éventuellement sur
pour mettre à jour la liste. A la fin de la première étape, vous aurez donc un site avec la
structure suivante :
sitePhoto
Pages
Medias
photographes.html
Index.html
theorie.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 de la figure 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 » qui 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 être jamais
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 photographes.html, le lien
« Quelques photographes » doit être désactivé 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 / photos ». Mettez ensuite
en forme la page photographes.html selon le modèle ci-dessous :
4
IUT TC
2006-2007
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. Fixer une hauteur de 110
pixels à chacune des photos, pour créer de miniatures. L’onglet Apparence permet de régler l’alignement de
l’image par rapport au texte :
Dans l’onglet Lien, créez un lien vers l’original de l’image contenu dans votre dossier images. Enregistrez votre
fichier et vérifiez-le en le visualisant dans le navigateur.
3. Copiez dans le dossier « Medias » de votre site, les documents pdf du dossier « ressources / docs ». Mettez ensuite
en forme la page theorie.html en utilisant un tableau (2 colonnes x 10 lignes sans bordures), selon le modèle cidessous :
5
IUT TC
2006-2007
Pour insérer un tableau (et pour réaliser sa mise en forme), placez le curseur à l’endroit où vous voulez insérer le
tableau et utilisez le menu Tableau / Insérer / Tableau… ou le bouton Tableau :
.
• Créez des liens internes vers les 3 fichiers pdf de votre dossier
• Créez des liens externes vers les publications suivantes :
Maison Européenne de la Photographie – Ville de Paris
http://www.mep-fr.org
Revue Etudes photographiques
http://etudesphotographiques.revues.org
Les ambiguïtés d'un drôle de spot pour la prévention du tabagisme chez les jeunes
http://www.comanalysis.ch/ComAnalysis/Publication78.htm
Les risques du second degré : la campagne « choc » du GRA contre le racisme et l’antisémitisme
http://www.comanalysis.ch/ComAnalysis/Publication79.htm
« Je mange donc je suis » : pamphlet ou plaidoyer à l'égard de la publicité agroalimentaire?
http://www.comanalysis.ch/ComAnalysis/Publication81.htm
René Magritte, publicist & artist. One and the same?
http://www.comanalysis.ch/ComAnalysis/Publication84.htm
4. 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 : 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.
6
IUT TC
•
2006-2007
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. Insérez ensuite 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,
vérifiez qu’il est bien enregistré et lisible !
Tout problème avec le fichier (impossible à lire, incomplet, en retard)
entraînera des pénalités !
7