création de site internet td 1

Création de pages Internet avec le logiciel libre Nvu - 1/7
CRÉATION DE SITE INTERNET TD 1
I LANCEMENT DE NVU ET CRÉATION DU SITE.
1) Liminaire :
Créez en premier, un sous-dossier consacré au travail avec Nvu, dans
votre dossier personnel sur le serveur. Pour cela :
1) Lancez l'explorateur de Windows en cliquant sur Démarrer /
Programmes (ou Tous les programmes) / Accessoires /
Explorateur de Windows.
2) Dans la fenêtre de gauche, remontez et regardez les disques dont vous
disposez sur la machine. Vous devez trouver A: le lecteur de
disquettes, pas de B:, C: le premier disque dur de la machine.
Le disque D: qui est sur votre machine et qui contient des
données, le disque E: qui est le lecteur de cédéroms.
3) Vous devez voir un disque P: avec votre nom, c'est celui de votre
dossier personnel sur le serveur. C'est dans ce dossier qu'il
vous faut créer votre dossier de travail pour Nvu.
4) Double-cliquez avec le bouton gauche sur le disque P:. Dans la fenêtre
qui s'est ouverte, en haut à gauche cliquez sur le mot Fichier
puis Nouveau puis Dossier et dans le menu qui s'ouvre,
cliquez sur Nouveau, puis sur Dossier. Dans la fenêtre de
droite, vous devez voir apparaître ceci :
il
suffit de taper le nom qui vous convient et d'appuyer sur
Entrée.
2) Récupération des éléments ;
Votre dossier de travail est maintenant créé, dans votre dossier personnel,
sur le serveur. Nous allons y déposer les éléments dont nous avons besoin dans
notre page. D'une manière générale, c'est une bonne méthode de travail que de
disposer les éléments nécessaires, dans les bons dossiers, avant de créer les pages.
Allez dans le poste de travail (sur le Bureau ou à l'aide de l'Explorateur de
Windows), dans le dossier TD Nvu. Copiez les éléments qui s'y trouvent (CTRL A
pour tout sélectionner et clic droit pour copier – à nouveau clic droit et coller, dans le
dossier de travail que vous venez de créer, dans votre dossier personnel.
3) Nvu :
Démarrez Nvu en cliquant sur Démarrer / Programmes (ou Tous les
programmes) / Nvu / Nvu.
Création de pages Internet avec le logiciel libre Nvu - 2/7
II CRÉATION DE NOTRE PREMIÈRE PAGE :
1) Les paramètres importants d'une page :
a- Le titre :
Du point de vue de l'Internet, il y a deux titres pour une page. Il y a le titre
comme nous avons l'habitude de le considérer, c'est celui qui apparaît dans la page,
ici. Il existe un autre titre, auquel on ne fait pas attention si l'on n'en a pas entendu
parler, c'est celui qui s'affiche dans le bandeau du navigateur, en haut de l'écran.
Il est très important, certains outils de recherche accordent le poids (l'importance) le
plus grand, aux mots de ce titre. C'est-à-dire que dans un moteur de recherche, un
site qui contiendrait le mot Neuvic dans ce titre, serait classé avant une page qui
contiendrait le
mot
Neuvic
dans le corps
de la page. Ce
titre est aussi
celui
qui
apparaît dans
les favoris, les
signets,
l'historique, il
ne faut pas le
négliger.
Les éléments
généraux de la
page sont accessibles par le menu Format / Titre et propriétés de la page. Cette
page s'affiche alors, mais il
sera toujours possible de
modifier nos choix par la
suite.
Lorsque
vous
aurez choisi votre Titre, par
exemple Neuvic, il faudra le
saisir (taper) ici. Vous
pouvez entrer un nom
d'Auteur, il ne s'affichera
pas dans votre page, mais
il sera possible d'accéder à
cette
information.
Description est du même
genre, vous pouvez remplir
ce champ, mais il ne
s'affichera pas dans la
page elle-même.
Création de pages Internet avec le logiciel libre Nvu - 3/7
b- Propriétés générales de la page :
Nous pouvons maintenant définir les propriétés générales de la page,
comme la couleur du fond ou l'image de fond, la couleur des caractères.
Cliquez sur Format / Couleurs et fond de page, cette fenêtre s'ouvre.
En cochant le bouton Couleurs
personnalisées, vous pouvez
choisir la couleur du texte et celle
du fond de la page en cliquant sur
les boutons associés.
Pour l'instant, ne changez pas les
couleurs des liens. De manière
générale, il vaut mieux laisser ces
options comme elles sont définies
dans la grande majorité des
pages. Cependant, vous pouvez
les modifier si vous l'estimez
nécessaire, par exemple de part
votre choix de la couleur du fond
et de celle de vos caractères.
Si vous ne précisez rien pour le
fond de votre page, elle sera soit
en blanc, soit en gris, selon le
navigateur utilisé par la personne
qui le consultera.
c- Image d'arrière-plan - Trame de fond :
Au lieu de ne mettre qu'une couleur en arrière plan de la page, on peut
aussi placer une image. Si sa taille est inférieure à celle de la page, elle sera
reproduite plusieurs fois en mosaïque, de façon à couvrir tout le fond. Cliquez ici, la
fenêtre suivante s'ouvre :
En cliquant sur cette flèche,
vous pouvez vous déplacer dans les
répertoires, allez dans Poste de travail
/ Images / Images de fond. Après
avoir choisi une image, cliquez sur le
bouton Ouvrir.
Le fond de votre page est
couvert par l'image. Faites d'autres
essais et revenez peut-être à un fond
de couleur uni, sans image, pour que le
texte soit plus facilement lisible.
Création de pages Internet avec le logiciel libre Nvu - 4/7
2) Premier texte, premières images :
En haut de votre page, écrivez Bienvenue à Neuvic. Les outils de mise en
forme sont classiques :
La lettre B signifie Bold, ce qui veut dire gras. Pour l'instant, nous ne nous
intéresserons qu'aux fonctions de base. Après avoir sélectionné votre titre, vous
pouvez choisir sa couleur, gras, italiques, aligné à gauche, centré, aligné à droite.
La taille des caractères se choisit ici, mais vous ne disposez pas de toutes
les tailles habituelles d'un traitement de texte. Cela vous permet en fait d'agrandir ou
de diminuer le texte que vous aurez sélectionné. Les raisons en sont données dans
le polycop de cours.
III MISE EN PAGE :
1) Insérer un tableau :
Pour mettre en page les
éléments d'une page Internet, nous ne
disposons pas de tous les outils d'un
traitement de texte. Le principal outil est le
tableau, c'est lui qui permettra de gérer la
disposition sur la page.
Pour insérer un tableau, cliquez
sur Insertion / Tableau puis sur le bouton
Précisely. Choisissez 3 lignes, 3
colonnes et 75% de largeur et la valeur 1
pour la l'épaisseur de la bordure des cellules et cliquez sur OK.
2) Adaptation d'un tableau :
Création de pages Internet avec le logiciel libre Nvu - 5/7
À la façon d'un tableur, vous pouvez modifier les largeurs des lignes et
des colonnes en déplaçant ces repères. Des informations sur les tableaux et leur
gestion, vous sont fournies dans le polycop de cours NVU.
3) Alignement du tableau :
Pour centrer le tableau horizontalement dans la page, cliquez
n'importe où dans la tableau et ensuite cliquez sur le bouton Tableau, dans
la barre d'outils. Cette fénêtre s'ouvre, cliquez sur l'onglet Tableau pour que
vos modifications s'appliquent bien à l'ensembel du tableau et pas à la seule cellule
sélectionnée.
Ici, vous pouvez choisir l'alignement du tableau. Si vous
cliquez sur
OK, la fenêtre se ferme et votre modification est appliquée. En
cliquant
sur le bouton Appliquer, votre modification est appliquée, mais vous ne quittez pas
cette fenêtre, ce qui vous permet d'effectuer d'autres modifications en même temps.
Dans la cellule (la case) du milieu en haut dans le tableau, écrivez Neuvic,
dans celle de gauche 1 850 habitants et dans celle de droite Sport. Remplissez
ensuite les cases comme sur le modèle, sans vous soucier des images, pour
l'instant.
Pensez à enregistrer votre travail, Fichier / Enregistrer ou par CTRL + S.
Création de pages Internet avec le logiciel libre Nvu - 6/7
IV SUIVI DU TRAVAIL :
A partir de ce moment, vous pouvez vérifier la page que vous êtes en train
de créer, en l'ouvrant dans un navigateur Internet, par exemple Mozilla, Firefox ou
Microsoft Internet Explorer. Tout d'abord, enregistrez votre travail avec CTRL + S ou
Fihiers / Enregistrer. À l'aide de l'Explorateur de Windows, allez dans votre dossier
de travail (P:) sur le serveur et double-cliquez sur le nom de votre fichier. Il doit
s'ouvrir dans Firefox, Mozilla ou Internet Explorer.
Chaque fois que vous voudrez vérifier votre page, n'en restez jamais à ce
que vous montre votre outil de création, que ce soit Nvu ou n'importe quel autre,
mais prenez l'initiative d'utiliser un navigateur et mieux, plusieurs navigateurs.
Par la suite, il n'est plus nécessaire de se servir de l'Explorateur de
Windows, il suffit de procéder ainsi :
1) Enregistrez votre travail dans Nvu
2) Allez dans votre navigateur, par exemple en cliquant en bas de l'écran,
sur le bouton de ce navigateur, puis cliquez sur le bouton actualiser
dans Internet Explorer, ou
dans Mozilla
et
pour
Firefox
Vous pouvez également voir votre page dans le navigateur, en cliquant
sur Affichage / Aperçu mais cette fonction est parfois malcommode.
V INSERTION DES IMAGES :
Pour l'instant, nous allons paramètrer Nvu, pour qu'il place une copie des
images que nous plaçons dans nos pages, dans le même dossier que celui de la
page elle-même. Dans notre cas, cela a peu d'importance, car nous effectuons nos
enregistrements, dans le même dossier que celui qui contient nos images. Cliquez
sur Outils / Préférences, dans la fenêtre qui s'ouvre, vous devez voir ces options :
Vérifiez que Enregistrer les images et les autres fichiers associés, soit
coché. Cela va permettre que toutes images, quel que soit l'endroit où vous saurez
été les chercher, seront copiées dans le répertoire dans lequel vous effectuez
l'enregistrement de votre page. Ceci est important lorsque l'on publiera les pages sur
l'Internet.
Création de pages Internet avec le logiciel libre Nvu - 7/7
Insérez la photo de la mairie de Neuvic, dans la case centrale du tableau.
Pour cela cliquez sur Insertion / Image ou sur le bouton Image dans la barre
d'outils et allez chercher cette image dans votre dossier de groupe, sousdossier
TD1Nvu.
La
fenêtre suivante
s'ouvre, cliquez
ici.
Remontez
dans la liste,
jusqu'à trouver le
disque G: qui est
celui de votre
groupe, c'est-àdire votre classe.
Ouvrez-le,
en
vous déplaçant
vous devez y
trouver,
le
dossier TD1Nvu
et à l'intérieur
l'image Mairie.
En cliquant sur
son nom, vous ne pouvez malheureusement pas la visualiser dans cette fenêtre,
mais lorsque vous l'aurez choisie et que vous aurez cliqué sur le bouton Ouvrir, vous
pourrez la visualiser en dessous de Aperçu de l'image.
Plusieurs autres champs vous sont proposés, Texte alternatif par
exemple, pour les personnes qui n'affichent pas les images lors de la navigation, etc.
Pour l'instant, vous pouvez cliquer plus simplement sur le bouton Pas de texte
alternatif puis sur le bouton OK.
A partir de là, votre page est créée et fonctionne !
VI EXPLORATION :
Vous pouvez maintenant, changer les couleurs, le fond, la disposition, etc.
en particulier en utilisant le polycop de cours, mais nous y reviendrons en détails.
Vous pouvez par exemple placer des couleurs ou des images de
fond dans les cellules d'un tableau, c'est le cas dans notre modèle, en
cliquant dans la cellule que vous avez choisie et en cliquant ensuite sur ce
bouton, etc.