Créer un site Web avec Nvu, tutoriel & guide de travaux pratiques en pdf.
Démarrage d’un site Web
Création du répertoire racine
Pour démarrer votre site Web, vous devez tout d’abord créer le dossier racine du site. Vous pouvez le nommer du nom de votre école, sans accent ni espace. Prenons l’exemple qui vous permettra de vous pratiquer, mon_ecole.
Je vous suggère créer le répertoire sur le bureau de votre ordinateur, afin d’éviter la création de liens relatifs (pour éviter que les liens créés le soient à partir de votre disque local).
À l’intérieur de ce répertoire, créez un dossier nommé images. Si vous avez déjà en votre possession des photos (format jpeg) ou illustrations (format gif) qui serviront à votre projet, vous pouvez les y déposer.
Configuration de NVU
Maintenant que votre dossier racine est créé, voici comment configurer NVU afin qu’il reconnaisse votre site.
S’il n’est pas affiché, faites apparaître le gestionnaire de sites, par le menu Affichage.
Vous allez maintenant configurer, pour commencer, un site local (sur votre ordinateur) et ensuite un site distant.
Configuration du site local
Dans le Gestionnaire de sites (à gauche de la fenêtre), cliquez sur le bouton suivant :
4. Donnez un nom à votre site (il apparaîtra dans la zone 4 quand vous aurez validé). Je vous propose d’utiliser le nom de votre école, suivi de LOCAL. Ce dernier définiera le site présent sur votre ordinateur et que vous avez précédemment créé (vous vous rappelez, le dossier racine mon_ecole?).
5. Cliquez sur le bouton Parcourir et pointez le dossier racine du site. Une fois le dossier sélectionné, cliquez sur Choisir.
6. Validez en appuyant sur OK.
Configuration du site distant
Recommencez les opérations, mais cette fois en donnant les informations du serveur distant, données par l’administrateur du serveur Web.
7. Donnez un nom à votre site (il s’ajoutera dans la zone 5 quand vous aurez validé). Je vous propose d’utiliser le nom de votre école, suivi de DISTANT. Ce dernier identifiera le site, sur le serveur Web, où vous transférerez vos pages quand vous les aurez créées.
8. Inscrivez l’adresse du serveur Web distant (par exemple, www.cssh.qc.ca).
9. Inscrivez votre code d’usager et votre mot de passe, donnés par l’administrateur.
10.Validez en appuyant sur OK.
Note : le crochet Mémoriser le mot de passe permet de se connecter au serveur directement, sans inscrire de mot de passe. Ceci est déconseillé lorsque vous travaillez sur un ordinateur partagé, mais est utile lorsque vous possédez votre propre appareil.
Le Gestionnaire de sites affiche maintenant les deux sites.
Pour voir les fichiers contenus dans le dossier racine, cliquez sur la flèche grise. Pour l’instant, vous travaillerez à partir du site LOCAL. Lorsque vous y aurez créé des pages, vous verrez apparaître un contenu qui ressemble à celui-ci :
C’est à l’aide du gestionnaire de site que vous pourrez ouvrir les pages existantes, créer de nouveaux dossiers et modifier les noms de fichiers.
L’espace de travail : les outils, la mise en forme et l’affichage
Description de la fenêtre de travail
1. Nom du fichier (dans ce cas-ci, il n’a pas encore été enregistré; Sans titre s’affiche)
2. Barre de titre. Elle affiche le titre de la page et nom du fichier, lorsque celui-ci est enregistré
3. Barre d’outils
4. Barre de mise en forme du texte
5. Corps du document. L’endroit où vous composerez votre page et ferez la mise en forme
6. Gestionnaire de site
7. Barre d’état. Affiche les balises (on peut les saisir pour sélectionner des éléments, comme une cellule de tableau, par exemple)
8. Barre des modes d’affichage
La barre d’outils de composition
Vous voyez ici la barre d’outils en deux parties. Les fonctions des outils sont décrites plus loin dans le document.
1. Introduction
2. Notions préliminaires
3. La structure d’un site Web scolaire
4. Un peu de vocabulaire
Les applications
La page Web (vue dans un navigateur)
Petit lexique du webmestre
5. Aide-mémoire
6. Démarrage d’un site Web
7. Création du répertoire racine
8. Configuration de NVU
Configuration du site local
Configuration du site distant
9. L’espace de travail : les outils, la mise en forme
10. Description de la fenêtre de travail
11. La barre d’outils de composition
12. La barre de mise en forme
13. L’affichage des pages
14. Les modes d’affichage
Le mode Normal
Le mode Balises HTML
Le mode Source
Le mode Aperçu
15. La construction d’une page Web
16. Création d’une nouvelle page
17. Titre de la page et nom de fichier
18. Saisie et mise en forme du texte
19. Insertion d’une image
Onglet Emplacement
Onglet Dimensions
Onglet Apparence
Onglet Liens
20. Insertion d’une barre horizontale (filet)
21. Fond de page et couleur des liens
22. Insertion et édition d’un tableau
Création du tableau
Modification de la taille des cellules du tableau
Ajout et suppression de rangées et de colonnes
Fond de cellule et fond de tableau
Contenu des cellules
Fusion de cellules
Mise en page à l’aide de tableaux
23. Création d’hyperliens
Lien à partir d’une image vers une page ou un site Web
Lien à partir d’un texte vers une page ou un site Web
Création d’une ancre
Lien vers une ancre de la même page
Lien vers une ancre d’une autre page
24. Prévisualisation dans le navigateur
25. Utilisation de modèles
26. Transfert vers le site distant (serveur Web)
27. Bibliographie et références