Nvu pour les novices
(cette documentation s'adresse aux débutants)
Création d'une page modèle

Ce tutoriel est fait pour être utilisé avec Nvu ("public licence" donc gratuit) ainsi que les fichiers html qui le composent.  Tout est Ici

Table des matières

Page 01    Préparations de base
                Création de la feuille css  (Cascading Style Sheets ou feuilles de style en cascade)
                Création de l'entête du site
Page 02    Création de la barre de navigation (contient les liens vers des sites extérieurs)
Page 03    Création de la colonne de navigation (contient les liens vers les autres pages du site)
Page 04    Création de l'espace "Contenu"
Page 05    Création du pied de page
Page 06    Création de liens entre les pages du site
Page 07    Création de liens vers des sites exterieurs
                 Titre de la page
Page 08    Couleur ou image de fond de page
Page 09    Modification générale de la présentation
Page 10    Insertion de texte, images et tableaux dans le "contenu"
Page 11    Bordures, couleurs, images de fond des conteneurs du "contenu"
                Utilisations des classes
Page 12    Création de liens internes à la page
                Création d'un lien pour ouvrir la boite de messageries
Page 13    Donner un titre et une description à la page
Page 14    Exporter la feuille de style (feuille de style liée)
Page 15    Modification de la présentation de  plusieurs pages avec la feuille css liée

---------------------------------------------------------------------------------------------------




Nvu pour les novices
(cette documentation s'adresse aux débutants)
Fichier à charger avec Nvu: Nvu-pas-a-pas-01.html
Page 01
Suivante

Préparations de base
Création de la feuille css  (Cascading Style Sheets ou feuilles de style en cascade)
Création de l'entête du site

Avant toute chose créez un répertoire de travail ou vous enregistrerez vos pages web.


A l'ouverture de Nvu nous avons une page blanche. Création d' une page modèle qui  servira pour les autres pages du site.
Cette page contiendra:
Une entête
Une barre de navigation vers d'autres sites
Une colonne de navigation entre les pages du site
Un contenu
Un pied de page

Ensuite, nous insérerons dans cette page (dans le bloc "Contenu" )
du texte
des images
des liens vers d'autres sites
des liens à l'intérieur de la page
des liens pour ouvrir la boite de messagerie.

Note: si vous n'arrivez pas à écrire dans une cellule ou autre problème, fermez nvu et rouvrez. Quelques bugs peuvent apparaître.
Enregistrez votre page -   -
Pour l'instant mettrez Nvu_pas_à_pas_01. Et bouton OK

Avec des  "_" à la place des espaces, pour différencier les fichiers. Les fichiers de cette documentation  sont avec des "-" et vos fichiers seront avec des "_".
Vous pourrez ainsi enregister votre page en cours de construction Nvu_pas_à_pas_01, Nvu_pas_à_pas_02 , Nvu_pas_à_pas_03 etc. Ce qui vous permettra de revenir en arrière si nécessaire.

Une bonne habitude
Ne pas laisser d'espace ou caractères spéciaux (ex: Nvu pas à pas 01) dans le nom des fichiers (remplacer les espaces  par des "-" ou "_". Mettez des noms de fichier explicite (pour vous et les moteurs de recherche).




1erEnregistrement

Lorsque vous construirez réellement votre site.

La 1ere page de votre site devra s'appeler index

Sur un serveur le fichier index est le fichier qui est ouvert lorsque le site est appelé.
Ex: quelque part dans le monde quelqu'un tape
http://www.wertronic.com, c'est le fichier index qui sera chargé (la page d'accueil du site).

Pendant la conception, si vous enregistrez le fichier d'entrée du site sous un autre nom , tout fonctionnera normalement.
Mais lorsque vous mettrez votre site sur un serveur, le fichier d'entrée devra impérativement s'appeler Index.html  (ou avec une extension valide .htm, .html, .php etc..).

Dans un ordre général
Ctrl-z (touches ctrl et z en même temps): Revient à l'état précédent
Ctrl-y (touches ctrl et y en même temps): Va à l'état suivant
Ces touches sont très utiles lorsque l'on veut revenir en arrière après une ou des modifications qui ne conviennent pas.

Le curseur se trouve actuellement en haut à gauche de la page.
Si vous ne voyez pas le curseur tapez sur le clavier un caractère.

Appuyez une dizaine de fois sur la touche du clavier <Entrée> ou <Return> le curseur se trouve a peu près en milieu de page.
Ces retours chariot ne servent que pour créer les différents conteneurs génériques.

Conteneurs génériques pour la présentation du site:
Une entête
Une barre de navigation vers d'autres sites
Une colonne de navigation entre les pages du site
Un contenu
Un pied de page


Placez le curseur tout en haut à gauche de la page
et insérez un conteneur générique










Rien de plus n'apparait à l'écran, c'est normal.
Pour visualiser les conteneurs génériques -> voir figure
Vous verrez alors le conteneur générique en pointillé.


Placer le curseur à l'intérieur du conteneur (balise div).




Click sur le bouton droit de la souris, sélectionnez "Propriétés avancées"







Sélectionnez attribut  id  (c'est quoi? -> ce sera expliqué plus loin)
Ecrire à valeur: Entete




Création de la feuille css  (Cascading Style Sheets ou feuilles de style en cascade)

Elle peut être liée ou incorporée à la page.

Si la feuille css est incorporée à la page, les propriétés des conteneurs seront définies exclusivement pour cette page.
C'est à dire que chaque page du site pourra avoir une présentation différente.

Si la feuille css est liée à la page, les propriétés des conteneurs pourront aussi définir la présentation des autres pages du site
C'est à dire que toute modification de la feuille css liée modifiera la présentation de toutes les pages du site.


Pour la première page modèle que nous allons créer
la feuille css sera incorporée à la page.


Sélectionnez Editeur Css




Click sur le bouton "Feuille incorporée".


Donnez un titre à la feuille css incorporée.
Ex: Css-nvu-pas-a-pas-page

Sélectionnez  ----> voir figure
Sinon le bouton "Règle ne sera pas actif.

Click sur le bouton "Règle".

Créer une nouvelle règle "style appliqué à tous les éléments d'un type"
#Entete (le # pour les règles id).


Définir la largeur: 100%


Définir une bordure
Bien entendu il sera possible de la modifier ensuite

Définir une couleur

Sélectionnez l'onglet "Fond"
Bien entendu il sera possible de la modifier ensuite


Ecrire pour mémoire Entête du site à l'intérieur de la balise.



Placez le curseur à l'intèrieur de la balise Entête
Sélectionnez "Titre 1"









Page
Suivante



Wertronic hébergement
Hébergeur de sites internet (noms de domaine inclus)
Hébergement, installation de  Boutiques e-commerce (nom de domaine inclus)