Pour vous affranchir des contraintes inhérentes aux modèles tout faits, réalisez vous-même une à une toutes les pages de votre site. Pour illustrer notre propos, nous allons créer un site nommé Vies de pierre, consacré à la sculpture, et composé de sept pages.
Etape 1 : Créez les dossiers de votre site
Pour plus de commodité, les éléments de votre site (textes et images) seront tous regroupés dans un même dossier créé pour l’occasion. Nous avons choisi de le faire dans le dossier Mes documents de Windows, mais vous pouvez choisir n’importe quel autre dossier. Double-cliquez sur l’icône Mes documents située sur le bureau. Cliquez avec le bouton droit de la souris dans la fenêtre qui s’ouvre et choisissez Nouveau, puis Dossier. Donnez un nom au sous-dossier créé, par exemple Mon site, puis double-cliquez dessus et créez deux dossiers nommés Html et Images
Dans le premier seront enregistrées toutes les pages de votre site, à l’exception de la page d’accueil.
Dans le second, vous pourrez stocker tous les fichiers de photos et autres illustrations. Au besoin, créez d’autres dossiers comme Sons, Textes ou Fichiers, si vous prévoyez des éléments de ce type sur votre site.
Etape 2 : Montez la page d’accueil
Muni de votre projet de structure des pages de votre site, entamez la création de votre page d’accueil. Pour cela, lancez Namo Web Editor en double-cliquant sur son icône située sur le bureau. Avant tout, enregistrez immédiatement votre page d’accueil vierge en cliquant sur Fichier, puis en sélectionnant Enregistrer sous
Sélectionnez le dossier créé plus tôt (Mon site dans Mes documents) et nommez le fichier index.htm (c’est obligatoire !). Par ailleurs, dans le champ Titre du document, tapez le titre de la page tel qu’il apparaîtra en haut du navigateur de vos visiteurs. Dans notre exemple, le titre est Vies de pierre. Cliquez alors sur le bouton Enregistrer pour valider.
Etape 3 : Caractérisez votre site
La fenêtre Inspecteur vous permet de modifier rapidement les propriétés des éléments sélectionnés. Si elle n’est pas affichée, déroulez le menu Fenêtre puis cliquez sur Inspecteur. Complétez les informations en précisant votre nom dans la case Auteur. Puis, dans Mots-clés, tapez une série de mots en rapport avec votre site : ils seront utilisés par les moteurs de recherche pour répondre aux internautes. Vous n’êtes pas limité en nombre, alors ne vous contentez pas d’un seul mot-clé et soyez pertinent !
Etape 4 : Définissez les couleurs
Nous allons maintenant définir la couleur de fond des pages. Pour notre exemple, nous avons choisi la même couleur de fond pour toutes les pages (le gris). Rien ne vous empêche de choisir une couleur différente pour chaque page, mais cela nuira à l’homogénéité du site. Pour les choisir, dans la fenêtre Inspecteur, cliquez sur la case blanche, à droite de la case Arrière-Plan, puis sélectionnez la couleur que vous souhaitez en cliquant dessus.
De la même façon, déterminez la couleur du texte en cliquant sur la case noire à droite de la mention Texte.
Plutôt que de choisir un fond de couleur unie, il est possible de personnaliser l’arrière-plan d’une page Web en y plaçant une image… et en s’entourant de précaution. L’image doit être petite et pas trop lourde (pas plus de 2 ou 3 Ko). Pour la mettre en place, cliquez sur l’icône inspirée de l’explorateur Windows. Sélectionnez l’image de fond, validez par Ouvrir.
Etape 5 : Placez un tableau
Pour aligner avec précision images et textes, le tableau est l’élément essentiel de la mise en page. En en imbriquant plusieurs, on obtient une présentation sophistiquée. Cliquez sur Créer un tableau dans la barre d’outils de Namo Web Editor, puis déplacez le curseur de la souris pour choisir 1 ?- 1.
Cliquez sur la case bleutée pour insérer le tableau
Cliquez ensuite n’importe où à l’intérieur du tableau. La fenêtre Inspecteur affiche dorénavant les propriétés du tableau. Cliquez sur le premier onglet (représentant un tableau sélectionné).
Cochez la case Largeur, et donnez-lui la valeur 100 %
Dans la section Bordures, réglez l’épaisseur à 0
Appuyez sur la touche Entrée pour la prise en compte de vos modifications. Comme vous le constatez, votre tableau prend toute la largeur de la page et des pointillés marquent les bordures.
Etape 6 : Ajoutez des sous-tableaux
Nous allons subdiviser le tableau précédent pour créer le squelette de la page. On va ainsi obtenir de multiples cellules pour les cases des sous-tableaux où l’on insérera images et textes.
Le premier sous-tableau Placez le curseur à l’intérieur du tableau, puis cliquez sur Créer un tableau. Cette fois, choisissez un tableau avec deux lignes et une colonne (2 ?- 1), puis cliquez sur la cellule bleutée la plus basse pour insérer le tableau. Cliquez à l’intérieur du nouveau tableau puis enlevez les bordures et définissez la largeur en répétant les opérations précédentes. On obtient ainsi un tableau à deux cellules. La première accueillera le titre. Nous allons diviser la seconde à son tour. Elle recevra le contenu de la page.
Le second sous-tableau Placez le curseur de la souris dans la cellule du bas, puis créez un nouveau tableau mais de deux colonnes et une ligne (1 ?- 2). Enlevez les bordures. Définissez la largeur comme auparavant.
Etape 7 : Définissez le tableau du sommaire
La cellule de gauche va contenir le sommaire et sera plus étroite que celle de droite. Pour la redimensionner, cliquez dessus. Dans la fenêtre Inspecteur, cliquez sur le deuxième onglet
Cochez Largeur, puis réglez la case à 20 % : déroulez les menus de la case de droite et choisissez % puis tapez 20 dans la case de gauche
Validez par Entrée.
La cellule de droite accueillera la partie principale. Il vous faut également modifier ses paramètres. Procédez comme précédemment, mais réglez sa largeur à 80 %.
Etape 8 : Créez les sous-tableaux du sommaire
Replacez le curseur dans la cellule de gauche. Toujours dans la fenêtre Inspecteur, réglez l’alignement vertical sur Haut et l’alignement horizontal sur Centré en enfonçant les boutons idoines :
Puis créez à l’intérieur de cette cellule un tableau, cette fois avec une colonne et six lignes (6 ?- 1). Enlevez les bordures et définissez la largeur en répétant la même opération qu’à la fin de l’étape 5.
Etape 9 : Insérez des images et du texte
Ça y est, le squelette de la page est prêt ! Reste à insérer les images et les textes.
Le titre de la page
Placez votre curseur dans la cellule du haut, et tapez le nom de votre site. Puis sélectionnez-le et modifiez ses attributs. Pour cela, utilisez les listes déroulantes Police par défaut et Taille de la police de la barre d’outils. Profitez-en aussi pour centrer votre titre et le mettre en gras et, éventuellement, dans une couleur différente.
Les intitulés du sommaire
Placez votre curseur dans la première ligne du tableau du sommaire, puis tapez dans chaque cellule le nom des parties de votre site.
L’image de l’accueil
Placez votre curseur dans la cellule de droite. Dans la barre d’outils, cliquez sur l’icône Insérer une image :
Dans la fenêtre qui apparaît, cliquez sur le bouton Parcourir et sélectionnez l’image à placer. Notez qu’un aperçu est disponible dans le bas de la fenêtre quand vous cliquez sur un fichier. L’image choisie, cliquez sur Ouvrir puis OK.
Le texte
L’image insérée, appuyez sur la touche Entrée, puis tapez le texte qui accueillera les visiteurs. Pour finir, sélectionnez l’image et le texte à l’aide de la souris, puis cliquer sur l’icône Centrer dans la barre d’outils.
Etape 10 : Composez les autres pages
La page d’accueil (nommée index.htm) servira de modèle pour les autres pages. Déroulez le menu Fichier, puis sélectionnez Enregistrer sous. Dans la fenêtre de dialogue, double-cliquez sur le dossier html créé plus tôt. Dans le champ Nom, remplacez index.htm par le nom de la page, par exemple liens.htm, et cliquez sur le bouton Enregistrer. Une boîte de dialogue Copie des ressources vous demande si vous souhaitez copier les différents éléments de la page. Veillez à décocher les images, puis cliquez sur le bouton OK.
Répétez l’opération autant de fois que nécessaire pour obtenir une première ébauche de toutes vos pages.
Il ne tient plus qu’à vous de modifier ces pages une à une. Supprimez leur contenu (images et textes), et remplacez-les par les éléments propres à chaque page. Vous pouvez à nouveau insérer des tableaux afin d’organiser la mise en page.
Etape 11 : Liez les pages entre elles
Une fois votre page d’accueil et vos pages créées, il faut les lier entre elles grâce à des hyperliens. Ouvrez la page d’accueil index.htm. Repérez la zone du sommaire, sélectionnez le premier terme, Gargouilles dans notre exemple. Appuyez sur la touche F9. Dans Créer un hyperlien, cliquez sur Documents ouverts.
Sélectionnez la page de destination du lien, puis cliquez sur OK. Le mot Gargouilles apparaît dorénavant en bleu, signifiant qu’il s’agit bien dun lien. Répétez la manipulation pour chaque autre terme du sommaire
