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
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 |
|
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). |
|
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 |
|
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 |