Création de site 3 Création de site 3 - Cyber-base de Decize

Création de sites internet – Fiche récapitulative 3
« Squelette » du site et menu
Pour cette fiche, je prendrai un exemple concret. Je veux créer un site sur les bandes dessinées de
super-héros. J'ai choisi un plan très simple, en quatre pages :
•
Une page d'accueil (la page index)
•
Une page Auteurs
•
Une page Personnages
•
Une page Contacts
J'ai aussi une vague idée de la forme que prendra mon site : la première page comprendra un titre et
une grande image, et le menu apparaîtra sous la forme d'un encadré situé à gauche. Je prévois
également que les internautes puissent me contacter : un lien vers mon adresse de courrier
électronique apparaîtra donc en bas de la première page. Muni de ces informations, je vais créer le
squelette de mon site.
1 – Créer le projet sous Namoweb
En premier lieu, je crée dans Mes documents un dossier que j'intitule « Mon site ». C'est dans ce
dossier que je vais créer toutes mes pages internet et enregistrer mon « projet de site ». En effet,
Namoweb n'enregistre pas que vos fichiers HTML (les fichiers au format internet) et vos images, il
crée également des fichiers de référence, dont un fichier de projet affecté de l'extension « .wej », et
qui contient plusieurs informations sur votre site. Vous verrez que cela facilite grandement la
gestion de votre site.
Sachant que je vais inclure des
images dans mon site, je
prévois de les enregistrer toutes
au même endroit. Dans mon
dossier Mon site, je crée donc
un dossier « images ». C'est là
que j'enregistrerai toutes les
images de mon site (au format
JPG ou GIF).
J'ouvre le logiciel Namoweb, et
je vais dans le menu
Fichier/Nouveau projet. Dans
la case Nom du projet, j'inscris
« Mon site de superhéros ».
Ensuite, je clique sur le bouton
Parcourir, et je vais sélectionner le dossier Mon site, dans Mes documents. J'obtiens à peu près cette
fenêtre (voir ci-contre).
Je clique sur le bouton Terminer. Mon projet est prêt.
2 – Créer les fichiers du site
* Le fichier index
Un premier fichier vierge nommé Sansnom1 apparaît. Ce sera mon index. Dans la page blanche qui
apparaît, j'écris « Accueil ». Je vais dans le menu Fichier/Enregistrer sous, et j'enregistre ce
1/3– Cours photoshop n°14 – Sandy JULIEN – Cyber-base de Decize – http://decize.cyberbase.free.fr - 2006
fichier dans le dossier Mon site, sous le nom index (auquel Namoweb ajoutera automatiquement
l'extension .htm). Voilà donc déjà mon premier fichier. Namoweb me demande si je veux ajouter ce
fichier au projet : je clique sur Oui. Ainsi, Namoweb sait qu'il s'agit d'un des fichiers composant
mon site internet.
Vous remarquerez que la barre de titre de la fenêtre indique : Namo Webeditor – Sans titre. Bien
que mon fichier soit nommé, le code HTML de la page ne contient pas son nom, et lui donne le
nom Sans Titre. Pour modifier cela, je fais un clic droit dans ma page, je choisis Propriétés du
document, je clique sur l'onglet Informations. Un formulaire apparaît. Dans la case Titre, j'écris
« Superweb, le site des superhéros ». Dans la case mots-clés, je peux indiquer des mots-clés liés à
mon site (ce qui facilitera son inclusion à des moteurs de recherche), par exemple : spider-man,
batman, superman. Je les sépare par des virgules. Je valide en cliquant sur OK : désormais, le titre
de ma page est bien « Superweb, le site des superhéros ».
* Les autres fichiers
Il me reste à créer les fichiers correspondant aux autres pages. C'est très simple : je clique sur le
bouton Nouveau ( ) de Namoweb. Un nouveau fichier apparaît, sous forme d'onglet. Il s'appelle de
nouveau
Sans Nom1. J'écris « Auteurs » à l'intérieur (pour l'identifier par la suite) et je
l'enregistre sous le nom auteurs (sans majuscule : il est plus pratiquer d'adopter d'entrée de jeu des
conventions simples pour les noms).
Je fais de même pour les fichiers personnages et contact. J'ai désormais quatre fichiers qui
apparaissent dans la colonne de gauche de Namoweb.
3 – Créer le menu
* Créer le tableau
Mon menu va se présenter sous la forme d'un simple tableau. Pour le
créer, je vais dans le menu Tableau/Nouveau tableau. Je choisis 4 lignes
et 1 colonne, puis je valide. Un large tableau apparaît. Je réduis déjà sa
taille : il suffit de placer le curseur de la souris sur le côté droit du tableau
et de glisser-déposer vers la gauche.
Je remplis chacune des cases par le nom d'une de mes pages (son nom,
et non pas son nom de fichier : ainsi, je commence par Accueil et non
index).J'obtiens le tableau ci-contre.
* Créer les liens du menu
Il me reste à relier chacun de ces titres à sa page respective. Pour cela, je sélectionne le titre (
Accueil, puis je clique sur le bouton « Créer ou éditer un hyperlien » (ressemblant à une petite
chaîne (vous pouvez également utiliser la touche F9 du clavier)
La fenêtre des liens apparaît. Je clique sur le bouton Parcourir, et je vais sélectionner le fichier
index. Je valide : le lien se manifeste sous la forme d'une couleur et d'un trait soulignant le mot
Accueil.
Il ne me reste plus qu'à faire de même pour les mots Auteurs, Personnages et Contact.
4 – Intégrer le menu à toutes les pages
Je veux que mon site soit rapidement fonctionnel, et j'ai donc envie de trouver le menu sur toutes les
pages. Je vais donc le copier-coller dans chaque page.
Je sélectionne mon menu : pour cela, je fais un clic droit sur le tableau qui le contient, et je choisis
Sélectionner le tableau. Je vais dans le menu Edition/Copier (ou je fais CTRL+C). Je clique sur
l'onglet représentant un autre fichier (le fichier auteurs, par exemple), et je fais Edition/Coller. Je
recommence l'opération dans les pages Personnages et Contact.
2/3– Cours photoshop n°14 – Sandy JULIEN – Cyber-base de Decize – http://decize.cyberbase.free.fr - 2006
5 – Je ne peux pas écrire à côté de mon menu !
Si je veux écrire à côté de mon menu, je n'y parviens pas... Voilà quelque chose que je n'avais pas
prévu. Je vais utiliser une petite astuce pour pouvoir écrire dans la zone blanche située à droite du
menu.
Je me mets dans mon fichier index en cliquant sur l'onglet qui le représente. Là, je saute une ligne
sous mon menu (si vous n'arrivez pas à positioner le point d'insertion juste après le tableau
contenant le menu, voici une astuce : mettez-le après le dernier caractère de la dernière cellule du
tableau – ici le t de contact – et appuyez ensuite sur la touche flèche droite du pavé fléché; vous
pouvez ensuite appuyer sur Entrée pour sauter une ligne).
Je crée un tableau spécial : je vais dans Tableau/Nouveau tableau, pour créer un tableau ayant 2
colonnes mais 1 seule ligne. Dans la catégorie Bordure, je réduis également la valeur Epaisseur à 0 :
comme elle représente l'épaisseur des lignes, je vais me retrouver avec un tableau aux lignes
invisibles. Il me permet de faire une mise en page « en trichant ».
Je sélectionne mon tableau de menu, en faisant un clic droit dessus puis Sélectionner le tableau. Je
fais ensuite Edition/Couper.
Je clique dans la première case (celle de gauche) de mon tableau « invisible » (que je vois tout de
même sous forme de petits pointillés), et je fais Edition/coller. Namoweb me demande si je veux
« Insérer comme sous-tableau ». Je clique sur OK.
Et voilà !
6 – Le menu n'apparaît pas au bon endroit !
Je peux bien sûr déjà déplacer la ligne qui sépare les colonnes de mon tableau invisible, pour bien
caler mon menu à gauche.
Un problème va se poser : mon menu sera toujours situé au milieu de la première cellule de mon
tableau invisible, et le texte que j'écrirai dans la cellule de droite sera lui aussi centré. Si je veux que
le menu reste en haut et que le texte reste en haut à gauche, voici ce que je dois faire :
•
Faire un clic droit dans le tableau invisible (de préférence dans la cellule vide, celle de droite).
•
Cliquer sur Sélectionner le tableau : la totalité du tableau est sélectionnée (c'est important,
sinon la manipulation suivante ne s'appliquera qu'à la cellule sélectionnée).
•
Refaire un clic droit et choisir Propriétés des cellules.
•
Dans la fenêtre qui apparaît, choisir comme valeurs d'Alignement : Haut pour Vertical et
Gauche pour Horizontal.
Désormais, tout ce qu'on écrit dans les cellules du tableau invisible commence bien en haut à
gauche.
3/3– Cours photoshop n°14 – Sandy JULIEN – Cyber-base de Decize – http://decize.cyberbase.free.fr - 2006