Gérer un site avec Nvu 1.0
http://www.nvu.com

d'après le diaporama d'Isabelle Motte

Facultés Universitaires Notre-Dame de la Paix de Namur

Plan du cours

Préliminaire	:	Description de la fenêtre	de travail

1ère Partie :	Gestion d'un site Web

2ème Partie	:	Edition de pages Web

3ème Partie	:	Trucs et astuces pour

gagner du temps

Préliminaire :
Description de la fenêtre
de travail

barre de titre

barre d'outils

barre d'état

corps

du document

barre de menu

Nom du fichier

Gestionnaire de site

barre de mise

en forme du

texte

onglet

d'affichage

NEW LOOK !!

NEW

Il est possible de personnaliser le style de la fenêtre de travail en installant un autre thème via le menu Outils - Thèmes

La barre d'outils de composition

Gérer

les documents

Envoyer le document

sur le site distant

Voir le document dans le navigateur

(s'il est enregistré dans un site)

Insérer des objets

Imprimer

le document

Outil de correction

orthographique

NEW : installé

par défaut

Les différents modes d'affichage

Mode Normal : pour éditer les pages

(les tableaux et ancres sont visibles)

Les différents modes d'affichage

Mode Balises HTML : pour voir les balises principales

Ce mode est pratique pour appliquer des styles

Les différents modes d'affichage

Mode Source : pour voir le code

NEW

Numéros

de lignes

Les différents modes d'affichage

Mode Aperçu : pour voir le résultat de la mise en forme

… mais le plus simple est de visualiser

le résultat sous un navigateur : bouton

1ère Partie :
Gestion d'un site Web

Gestionnaire de site Nvu

Accessible via la touche F9

Gestionnaire de site Nvu

Le plus simple pour gérer un site Web est de configurer :

un site local (sur votre ordinateur)

et un site distant (sur le serveur)

Dans les noms de dossiers et de fichiers, évitez les espaces, les lettres accentuées et autres caractères spéciaux.

Gestionnaire de site Nvu

Définition d'un site local :

il suffit de choisir le répertoire racine.

Gestionnaire de site Nvu

Définition d'un site distant

opérations sur les répertoires et fichiers NEW : tout fonctionne sauf la création de

dossiers sur le site distant

Gestionnaire de site Nvu

Site local : Possibilité de créer de nouveaux dossiers, de modifier les noms des fichiers, …

Site distant : Pour l'instant, il n'est pas encore possible de créer des répertoires via l'accès ftp.

Il faut donc créer les répertoire via un autre accès ftp, par exemple un navigateur Internet (amélioration à venir …)

Gestionnaire de site Nvu

Pour publier …

2ème Partie :
Edition de pages Webs

Les pages Webs élémentaires

La mise en forme du texte

Les images

La mise en forme des pages

Les liens

Les listes

Les tableaux

Les cadres

2ème Partie :
Edition de pages webs (suite)

9) Les formulaires

10) Les médias

11) Les styles

12) Les balises META

=> structure analogue au cours de HTML !

1) Les pages Web élémentaires

A/ Les opérations sur les fichiers

… comme dans

tous les éditeurs

de texte

pour publier

sur le site distant

1) Les pages Web élémentaires

B/ Les propriétés de la page (Outils – Préférences)

choix

important

pour reformater

un document

créé avec

un autre

logiciel

(Word, …)

1) Les pages Web élémentaires

B/ Les propriétés de la page

Choix de la police pour

l'affichage,

en mode

Normal

ou Aperçu

Ce choix est indépendant

de l'affichage dans le navigateur.

 uniquement pour éditer les pages

1) Les pages Web élémentaires

B/ Les propriétés de la page

Paramètres

par défaut

des

nouvelles

pages

NEW

Au cas où

aucune

connexion

directe

ne serait

configurée

1) Les pages Web élémentaires

B/ Les propriétés de la page

1) Les pages Web élémentaires

C/ Le code

le mode HTML Source permet de travailler directement dans le code

le mode Balises HTML permet de visualiser les principales balises et donne accès à leurs attributs via un double clic

NEW : numéros des lignes en mode HTML Source

NEW : possibilité d'éditer les commentaires et les scripts php dans les divers modes

1) Les pages web élémentaires

C/ Le code

le menu Outils – Validateur de le code HTML... permet de vérifier la syntaxe HTML utilisée.

Il faut que ce document soit sur un site distant (connexion) car le script exécuté n'est pas disponible dans le programme en local, mais sur le site du W3C.

Nvu propose alors d'insérer un lien vers le script dans le code du document qui affiche une icône attestant la validité de votre code :

2) La mise en forme du texte

le menu Format permet de définir les propriétés du texte :

Police (Arial, …)

Taille (1,…,7,…)

Style (souligné, …)

Couleur

Direction de l'écriture

Suppression des styles, des liens, des ancres

Paragraphes (P, H1, …)

Listes (3 types)

Indentation

Alignement (centré, …)

…

Les barres de mise en forme du texte permet tent d'accéder principales propriétés du texte

style de

paragraphe

police

de

caractère

couleur

du texte

couleur en arrière-plan des paragraphes *

couleur

de

du texte

surlignement

diminuer,

augmenter

la taille

du texte

gras,

italique,

souligné

listes

alignements de paragraphe

retraits de paragraphe

premier plan ou

arrière-plan

pour les objets

2) La mise en forme du texte

transformation

d'un bloc en objet zone de texte

* Pour la couleur de fond de la page entière :

menu Format – Couleurs et fond de page

3) Les images

Insertion d'une image : menu Insertion – Image ou bouton de la barre d'outils

Attributs de la balise IMG : définis dans l'Inspecteur de propriétés, à l'insertion de l'image ou par double clic sur l'image.

3) Les images

L'Inspecteur de propriétés des images :

SRC

ALT

3) Les images

L'Inspecteur de propriétés des images :

WIDTH

HEIGHT

3) Les images

L'Inspecteur de propriétés des images :

HSPACE

VSPACE

BORDER

ALIGN

USEMAP

(à venir)

3) Les images

L'Inspecteur de propriétés des images :

A HREF

autres

attributs

3) Les images

Les barres horizontales :

Pour créer une barre horizontale :

menu Insertion – Ligne horizontale

Attributs de la balise HR

définis via l'Inspecteur

de propriétés

(double-clic sur la balise HR

en mode Balises HTML)

4) La mise en forme des pages

Couleur d'arrière-plan, couleur de texte par défaut … :
menu Format – Couleurs et fond de page

Séparation entre paragraphes ( balise <P>) :
menu Format – Paragraphe – Paragraphe

Pour insérer un saut de ligne sans créer un nouveau paragraphe (balise <BR>), utiliser la touche Entrée

Création d'en-têtes : avec le menu Format - Paragraphe ou la barre de mise en forme du texte

Alignement des différents éléments :
boutons de la barre d'outils

Pour du texte Préformaté : menu Format – Paragraphe - Préformaté ou barre d'outils

Pour mettre du texte en retrait : menu Format – Augmenter / Diminuer le retrait ou boutons

Espaces insécables : ils sont automatiquement insérés avec la barre d'espacement

Lettres accentuées de tous types et symboles spéciaux :
menu Insertion – Caractères et symboles

Il n'existe aucun moyen automatique pour créer des regroupements de lignes (NOBR) et des sauts de lignes conditionnels (WBR) car ces balises sont dépréciées.

Elles peuvent toutefois être insérées directement dans le code.

5) Les liens

Insertion d'un lien :

- Sélectionner le texte ou l'image déclencheur

- Bouton ou menu Insertion – Lien

pour choisir

la cible

NEW

5) Les liens

A/ Créer des liens

Insertion d'une ancre nommée : bouton
ou menu Insertion – Ancre.

Insertion d'un lien vers une section de page :
- créer un lien vers la page
- ajouter # suivi du nom de l'ancre.

Pour modifier la couleur par défaut des liens (non visités, visités, survolés, …) :
menu Format – Titre et propriétés de la page
MAIS en général c'est déconseillé !

6) Les listes

Création de listes de définitions :
saisir alternativement le terme à définir et la définition, séparés par des retours à la ligne (Entrée).

Retraits et mise en forme sont automatiquement réalisés en sélectionnant les termes ou définitions et en cliquant sur Format – Liste – Terme ou Définition.

Parfois il y a des problèmes de mise en forme et il faut aller dans le code placer correctement les balises <DT> et <DD>.

Création de listes numérotées et de listes à puces :

Texte – Liste ou boutons

7) Les tableaux

Insertion d'un tableau :
menu Tableau – Insérer - Tableau
ou bouton

rapidement …

7) Les tableaux

Insertion d'un tableau :
menu Tableau – Insérer - Tableau
ou bouton

de façon

plus

précise …

7) Les tableaux

Insertion d'un tableau :
menu Tableau – Insérer - Tableau
ou bouton

d'autres

attributs

de mise

en forme…

7) Les tableaux

Par défaut, toutes les cellules du tableau ont la même taille et la taille des cellules s'adapte automatiquement au contenu

Pour modifier la taille des cellules, il suffit de déplacer les délimiteurs dans les règles horizontale et verticale :

7) Les tableaux

modifier un tableau : via le menu Table on peut insérer/supprimer lignes et colonnes, fusionner des cellules, …

certaines actions peuvent être réalisées via les poignées de cellule :

supprimer la ligne

ajouter une ligne

au dessus

ajouter une ligne

en dessous

supprimer la colonne

ajouter une colonne

à gauche

ajouter une colonne

à droite

7) Les tableaux

Les attributs du tableau peuvent être modifiés à tout moment par double-clic :

7) Les tableaux

Les attributs du tableau peuvent être modifiés à tout moment par double-clic :

8) Les cadres

Les cadres ne sont pas implémentés sous Nvu car ils sont déconseillés pour les moteurs de recherche

Il faut même éviter d'ouvrir un fichier contenant des cadres car Nvu risquerait d'écraser le code.

9) Les formulaires

Le plus simple est d'utiliser le bouton Formulaire de la barre d'outils :

9) Les formulaires

Définition du formulaire (FORM)

SELECT

TEXT

TEXTAREA

RADIO

CHECKBOX

SUBMIT

RESET

RAPPEL

HTML

9) Les formulaires

Insertion des champs TEXT, PASSWORD, RADIO, CHECKBOX, …

9) Les formulaires

Insertion d'un champ TEXTAREA :

9) Les formulaires

Insertion d'un menu déroulant (SELECT) :

9) Les formulaires

Insertion d'un menu déroulant (SELECT) :

9) Les formulaires

Insertion d'un bouton de soumission ou de réinitialisation (SUBMIT ou RESET) :

10) Le multimédia

L'insertion de fichiers sons ou vidéos n'est pas directement implémentée sous Nvu

Les médias peuvent être insérés comme liens vers des fichiers externes : taper le chemin vers ce fichier dans la case Link

Il est également possible de les incorporer directement dans la page : taper la balise <EMBED …> directement dans le code mais cette balise est dépréciée !

11) Les styles
CSS = Cascaded Style Sheet

- Style local : appliqué à un endroit de la page

Style interne : appliqué partout dans une page

- Style externe : appliqué dans plusieurs pages

Priorité :

- d'abord les styles locaux

- puis les styles internes

- et finalement les styles externes.

11) Les styles

Utiliser les styles locaux …

pour remplacer les balises et attributs dépréciés (recommandé par le W3C)

Menu Outils – Préférences, onglet Général

 cocher la case : Utiliser les styles CSS au lieu des éléments et attributs HTML.

11) Les styles

Outils - Editeur CSS...

pour parcourir

les différents styles

pour définir

les feuilles de style

pour définir

les styles

pour les

initiés

au code

HTML

pour faire un lien

vers une feuille de style externe

pour créer une feuille

de style interne

11) Les styles

1ère étape : Créer une feuille de style interne

cliquer sur le bouton Nouveau groupe, insérer le nom de la feuille de style et créer cette feuille

Liste médias : précise le périphérique de destination de la feuille de style (screen, print, ...). Une page peut être liée à plusieurs feuilles de style pour garantir un résultat optimal selon le périphérique utilisé pour la visualiser.
Par défaut, laisser la case
vide, la feuille de style
s'appliquera à tous
les périphériques.

clic

11) Les styles

1ère étape : créer une feuille de style interne

pour insérer des styles dans cette feuille de style

11) Les styles

2ème étape : Créer des styles

Créer une classe :

bouton Règle, option "style nommé"

taper le nom de la classe :

clic

11) Les styles

2ème étape : Créer des styles

Créer une classe :

personnaliser les propriétés de la classe

11) Les styles

2ème étape : Créer des styles

Personnaliser les propriétés d'une balise

bouton Règle, option "Style appliqué à tous les éléments de type..."

taper le nom de la balise à personnaliser :

clic

11) Les styles

2ème étape : Créer des styles

Personnaliser les propriétés d'une balise

personnaliser les propriétés de la balise :

11) Les styles

2ème étape : Créer des styles

Créer un id :

bouton Règle, option "Style appliqué à tous les éléments concernant le sélecteur suivant..."

taper # et le nom de l'id :

11) Les styles

2ème étape : Créer des styles

Créer un id :

personnaliser les propriétés de l'id :

11) Les styles

3ème étape : Utiliser un style

Pour utiliser un style de niveau bloc, il faut insérer une balise DIV

Exemple, pour le retrait à gauche, cliquer sur

Pour un style de niveau ligne, sélectionner le texte et utiliser le menu déroulant des styles (uniquement classe !) : balise SPAN

Remarque : pour afficher le menu déroulant des styles, il faut personnaliser la barre de mise en forme du texte (voir 3ème partie).

11) Les styles

3ème étape : Utiliser un style

le plus simple est de se placer dans le mode HTML tags et de sélectionner la balise qui va endosser le style ou la partie de texte ou l'objet concerné ;

pour appliquer un style classe, le plus simple est d'utiliser le menu déroulant disponible dans la barrre de mise en forme du texte ;

pour appliquer un style id, utiliser le clic droit et dans les propriétés avancées et complétez à la main, l'attribut id.

11) Les styles

4ème étape : Créer une feuille de style externe

Sélectionner la feuille de style interne à exporter

Cliquer sur le bouton Exporter la feuille de style...

Donner un nom avec l'extension .css

clic

11) Les styles

4ème étape : Créer une feuille de style externe

Attention : c'est le chemin absolu qui est affiché

=> mettre le chemin relatif dans le code
avant de transférer sur le serveur

11) Les styles

5ème étape : Utiliser une feuille de style externe

Dans l'éditeur de styles, bouton Lier feuille

Cliquer sur Parcourir pour choisir le fichier

clic

12) Les balises META

Le menu Format – Titre et propriétés de la page permet de compléter quelques balises META (author, description, ...) mais pas toutes (les mots-clés par exemple doivent être insérés directement dans le code);

3ème Partie :
Trucs et astuces pour gagner du temps

Personnaliser Nvu

Utiliser les modèles

1) Personnaliser Nvu

Pour personnaliser les barres de menu de Nvu :

- soit un clac (clic droit) sur la barre d'outils concernée

- soit le menu Affichage – Barres d'outils –

Personnalisation de barre d'outils

 barre d'outils Mise en forme

(par exemple, ajout d'un bouton pour les bordures)

 barre d'outils Composition

(par exemple, ajout d'un bouton pour les règles horizontales)

1) Personnaliser Nvu

Exemple de personnalisation des barres d'outils, par un clac (clic droit) ou par le menu :

2) Utiliser les modèles

Qu'est ce qu'un modèle ?

Un modèle est un document qui mémorise une mise en forme, pour pouvoir la reproduire dans de nombreuses autres pages.

Une fois la mise en forme du modèle conçue, les autres pages sont créées à partir de ce modèle.

La mise à jour du modèle affecte toutes les pages où il est utilisé.

La page modèle n'est pas modifiable ; il faut y insérer les zones éditables dans lesquelles le contenu variable sera inséré.

2) Utiliser les modèles

Créer un modèle Nvu (fichier d'extension .mzt)

Fichier – Nouveau – Modèle vide

Personnaliser le document

Insérer les zones éditables

Insertion – Modèles – Insérer une zone éditable

Enregistrer : Fichier – Enregistrer

OU

A partir d'un document HTML existant :

Fichier – Enregistrer sous – Type : Modèles HTML

2) Utiliser les modèles

Utiliser un modèle :

Fichier – Nouveau – Nouveau document utilisant un modèle

Sélectionner le modèle et valider (OK)

Attention : Le chemin vers le modèle est le chemin absolu

 mais ce n'est pas grave, il n'est pas nécessaire de mettre le modèle sur le serveur !!

Remarques :

- Il n'est pas encore possible de mettre à jour
les fichiers à partir du fichier modèle

- Parfois, il est possible de modifier des zones
prévues comme non éditables.

 améliorations à venir …

Conclusion

Pour la gestion de sites Web ne contenant pas trop de médias, Nvu est un logiciel qui tend à devenir l'équivalent de Dreamweaver.

A améliorer :

l'éditeur de sites

l'utilisation des modèles

une interface pour la création d'images mappées

Bibliographie

"N|vu Ze|N tutoriel" par Fun Sun diffusé sur le site http://www.framasoft.net

Les forums Nvu sur le site http://forum.nvudev.org/

Remerciements

Merci à tous les stagiaires CUD qui ont participé à l'expérimentation du logiciel et qui ont contribué à de nombreuses précisions dans ce support :
Thierry-Narcisse KOUAGOU-BANGASSI - Remy William ANGORA - Othon Olivier LIKENG - Jean Fidèle NZIHOU -Innocent Mano – Farès TOUNSI –Eric BAREKE – Emery Patrice KALONJI MUYA – Djamila ZITOUNI – Cubaka MUGUMAODERHA – Binta Fatouma BOUBACAR KALME – Ayitchéou Judicaël Tchedji DEGUENON – Augustin KANYIMBU MUTOMBO – Anatolie SINGIRANKABO – Valéry MUCOWINTORE – Venant Irenee NYANDWI – Xavier LEONARD

Remerciements

Ce cours sur Nvu fait partie de la formation dispensée dans le cadre du stage "Formation aux techniques multimédia et à leur utilisation dans le domaine de l'auto-formation" financé par la Coopération Universitaire au Développement et se déroulant aux Facultés Universitaires Notre-Dame de la Paix de Namur.

Menus et copies d'écran Nvu en français : Francis Draillard

Gérer un site avec Nvu 1.0

Isabelle Motte

2005-02-15T10:14:56

Isabelle Motte