Le programme NVU est en anglais ou en français. Il est
simple
d'utilisation, gratuit et il crée un code de bonne
qualité.
Evitez frontpage, un programme payant qui crée du
code de mauvaise qualité.
Nous allons
tout d’abord télécharger NVU sur
internet. Tapez NVU sur Google et choisissez
de le télécharger sur le site clubic ou 01net.
Vous pouvez télécharger soit la
version française, soit la version originale en
anglais.
Le but de
travailler avec un programme comme NVU est de pouvoir écrire
notre
texte comme si nous l’écrivions sur un document
Word. Il n’y a rien de
compliqué.
Lorsque
vous avez ouvert le programme, nous pouvons voir en bas de la page
quatre
possibilités pour afficher notre page : "Normal",
"Balises html", "Source" et
"Aperçu" (en rouge sur l'exemple).
L’affichage "Normal"
va être le
plus utilisé, car c'est celui que nous
utilisons comme un document Word. Nous n'utiliserons pas,
à notre niveau, la
partie "Balises html".
L’affichage "Sources"
est notre
page écrite en code html. Nous allons l’utiliser
plusieurs
fois pour modifier du code ou en ajouter. Cet affichage va beaucoup
servir pour
le référencement ce que nous verrons
ultérieurement.
L’affichage "Aperçu" est
utilisé pour voir l'aspect que votre page aura sur internet.
En haut de
votre page, vous pouvez voir plusieurs raccourcis (en rouge sur
l'exemple).
Ces raccourcis sont très pratiques et font gagner beaucoup
de temps.
Création de tableaux :
Le mieux pour faire un site de bonne qualité est d'utiliser
les tableaux. Faisons un essai pour votre première page :
Cliquez sur le raccourci "tableau", une fenêtre s'ouvre :
Vous avez plusieurs choix : soit vous voulez créer un
tableau
rapidement et vous sélectionnez sur les cases le nombre de
lignes et de colonnes désirées, soit vous
cliquez sur "Précisément" et vous choisissez le
nombre
de lignes et de colonnesque vous voulez.
Nous allons commencer avec un tableau d'une ligne sur une colonne pour
faire le cadre de notre page. Cliquez sur "OK". Votre tableau s'affiche
sur votre document.
Double-cliquez maintenant sur le tableau, une nouvelle
fenêtre s'ouvre :
Nous pouvons choisir beaucoup d'options pour la
mise en page de la cellule. Nous allons d'abord nous occuper de la
partie tableau.
Choisissez une largeur de 750 pixels pour votre page. Ensuite vous
pouvez choisir si vous voulez ou non un contour à votre
tableau.
J'ai choisi dans l'exemple de ne pas mettre de
bordure car ce n'est pas très joli d'entourer votre page.
Donc
les valeurs doivent être de 0. Vous pouvez à
souhait
modifier
les bordures, l'écartement entre les cellules et
l'espacement
entre la bordure et le contenu des cellules.
Pour l'alignement du tableau choisissez l'option centré.
Vous pouvez ensuite appliquer vos changements.
Nous allons créer un second tableau dans le premier.
Cliquez une fois dans le premier tableau et cliquez tout en haut sur
"tableau", "insérer", "tableau":
Choisissez un tableau de deux colonnes et une ligne.
Ce tableau va nous permettre d'avoir une petite colonne à
gauche
pour le menu et une grande colonne à droite pour le texte
principal.
Double-cliquez sur le nouveau tableau et inscrivez les mêmes
options que pour le premier tableau : largeur 750 pixels, etc...
Cliquez sur "Cellule" et fixez une largeur à votre cellule
de
gauche.
Vous pouvez maintenant écrire vos titres de chapitre dans la
colonne de gauche. Pour faire encore mieux, vous pouvez ajouter un
nouveau tableau dans la colonne de gauche du deuxième
tableau,
avec une colonne et le nombre de ligne dont vous avez besoin.
En utilisant ce système, vous pouvez créer des
sites de
très bonne qualité. Faites attention tout de
même
à ne pas rajouter trop de tableau car vous risquez de
vous
perdre.
Si vous vous rendez compte que vous avez oublié une ligne ou
une
colonne à un tableau, ce n'est pas grave du tout. Vous
pouvez la
rajouter en faisant un clic droit avec la souris puis "Insertion dans
le tableau" et
ensuite il suffit d'ajouter ce qui vous manque (ligne au
dessus, ligne en dessous, colonne avant, colonne après).
Maintenant que la mise en page n'est plus un problème pour
vous,
nous allons ajouter des images pour l'améliorer.
Insertion d'images par NVU :
Pour insérer une image, il n'y a rien de
compliqué. Il
faut juste avant de commencer, placer vos images dans un dossier images
qui se trouvera au même endroit que votre page internet
"index.html".
Nous pouvons à présent insérer une
image en cliquant sur le raccourci "image", une fenêtre
s'ouvre :
Cliquez sur "Parcourir..." et choisissez votre image. L'adresse de
l'image
doit avoir la même forme que ci-dessus. Choisissez de ne pas
utiliser le texte alternatif. Vous pouvez encore modifier les
dimensions de votre image en cliquant sur "Dimensions" en haut de votre
fenêtre. Mais faites bien attention à toujours
conserver
les proportions de votre image pour ne pas la déformer.
Création de liens :
Nous allons apprendre à créer des liens. C'est
une
étape facile mais néanmoins très
importante car
sinon vous ne pourrez pas avoir plusieurs pages avec des liens entre
elles.
Vous pouvez créer des liens avec du texte ou avec des images.
Sélectionnez la partie du texte ou l'image avec laquel vous
voulez faire un lien. Ensuite cliquez sur le raccourci "Lien", une
nouvelle fenêtre s'ouvre :
Dans l'exemple ci-dessus, j'ai créer un lien texte
appelé
"mon premier lien". Pour l'emplacement du lien vous devez
écrire
l'adresse comme
indiqué sur l'exemple
(./mon-premier-lien.html ).
Si vous voulez faire un lien avec une adresse internet, il vous faut
faire
attention à bien écrire l'adresse
complète. Exemple :
http://creer-sitegratuit.isuisse.com
Vous savez maintenant les choses les plus importantes pour utiliser le
programme NVU.
Si vous avez encore des questions ou besoin de précisions,
n'hésitez pas à me contacter et je vous
répondrais rapidemment.
|