Création d un site web avec Nvu

Transcription

1 Création d un site web avec Nvu sources principales d'informations: Pensez à sauvegarder fréquemment 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

2 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

3 éventuellement sur structure suivante : pour mettre à jour la liste. A la fin de la première étape, vous aurez donc un site avec la sitephoto Pages photographes.html Medias Index.html theorie.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 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

4 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

5 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

6 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 Revue Etudes photographiques Les ambiguïtés d'un drôle de spot pour la prévention du tabagisme chez les jeunes Les risques du second degré : la campagne «choc» du GRA contre le racisme et l antisémitisme «Je mange donc je suis» : pamphlet ou plaidoyer à l'égard de la publicité agroalimentaire? René Magritte, publicist & artist. One and the same? 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

7 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