Passer au contenu

2) Réalisez les pages de votre site

Place à la conception proprement dite des différentes pages html, à commencer par la plus importante, celle de l’accueil, véritable ” vitrine ” de votre site.

Créez la page d’accueil

1 – Enregistrer la pageMunis du papier où vous avez dessiné l’architecture de votre site, vous pouvez entamer la conception de votre page d’accueil. Pour cela, activez Namo Web Editor en double-cliquant sur l’icône du programme situé sur le bureau. Ensuite, il vous appartient de remplir la page blanche comme avec un classique logiciel de traitement de texte.Pour vous éviter toute mauvaise surprise, nous vous conseillons d’abord d’enregistrer le fichier. Pour cela, cliquez d’abord sur le menu Fichier, puis sélectionnez la commande Enregistrer sous

Ensuite, dans la fenêtre de dialogue, nommez le fichier index.htm (c’est obligatoire !). Par ailleurs, dans le champ Titre du document, tapez le titre de la page, il apparaîtra en haut du logiciel de navigation de vos visiteurs (par exemple : Aux amateurs de Snowboard). Cliquez sur le bouton Enregistrer pour valider.2 – Définir la couleur de fondAprès l’enregistrement de la page d’accueil, il faut définir sa couleur de fond. Pour notre exemple, nous avons choisi la même couleur de fond pour toutes les pages. Rien ne vous empêche de choisir une couleur différente pour chacune, même si c’est un peu gênant pour l’homogénéité de l’ensemble.Pour notre site, nous avons choisi un fond noir. Pour faire votre choix, cliquez avec le bouton droit de la souris au milieu de la page, puis choisissez la commande Propriétés du document. Dans l’onglet Apparence, déroulez la liste Arrière-plan, puis sélectionnez la couleur que vous souhaitezCliquez ensuite sur Appliquer, puis sur OK.3 – Choisir la couleur du textePar défaut, la couleur de la police de caractères est noire. C’est parfait si l’arrière-plan est de couleur claire (blanc, jaune, etc.).Dans notre exemple, nous allons la modifier. Pour cela, cliquez de nouveau avec le bouton droit de la souris au milieu de la page, puis choisissez la commande Propriétés du document. Toujours dans l’onglet Apparence, déroulez la liste Texte, puis sélectionnez la couleur. Cliquez sur Appliquer, puis sur OK pour valider.4 – Placer un tableauCliquez sur l’icône Créer un tableau dans la barre d’outils de Namo WebEditor, puis déplacez le curseur de la souris pour choisir 1×1. Cliquez sur la case bleutée pour insérer le tableau sur la page.Ensuite, placez le curseur de la souris à l’intérieur du tableau, puis cliquez sur le bouton droit de la souris. Sélectionnez la commande Propriétés du tableau. Dans la section Taille, cochez Largeur spéc. et laisser à 100%. Dans la section Bordures, réglez l’épaisseur à 0.Cliquez sur OK pour valider. Comme vous le constatez, votre tableau prend toute la largeur de la page et des pointillés marquent les bordures.5 – Ajouter des sous-tableaux


> Le premier sous-tableau
Un tableau seul ne sert à rien. Il faut donc le subdiviser pour créer le squelette de la page. Ainsi, on va obtenir de multiples cellules correspondant aux cases des sous-tableaux où l’on insérera des images et du texte.Placez de nouveau le curseur à l’intérieur du tableau, puis cliquez sur l’icône Créer un tableau. Cette fois-ci, choisissez un tableau avec deux lignes et une colonne (2×1).Cliquez sur la cellule bleutée la plus basse afin d’insérer le tableau. Enlevez les bordures et définissez la largeur en répétant la même opération que celle de la fin de l’étape 4.Nous obtenons donc un tableau avec deux cellules. La première cellule servira pour placer le titre du site. Quant à la seconde cellule, nous allons l’utiliser pour le contenu de la page en la divisant à son tour.


> Le second sous-tableau
Placez le curseur de la souris dans la cellule du bas, puis cliquez sur l’icône Créer un tableau. Choisissez deux colonnes et une ligne (1×2). Cliquez sur la cellule bleutée la plus basse pour insérer le tableau. Enlevez les bordures et définissez la largeur en répétant la même opération qu’à la fin de l’étape 4.6 – Définir le tableau du sommaireLa cellule de gauche va contenir le sommaire. Elle sera évidemment plus étroite que celle de droite. C’est pour cette raison que nous allons la redimensionner.Placez votre curseur à l’intérieur de la cellule de gauche, puis cliquez sur le bouton droit de la souris. Dans le menu contextuel, sélectionnez la commande Propriétés des cellules. Dans l’onglet Apparence, repérez la catégorie Taille. Cochez le bouton Larg spec. , réglez la largeur à 20 % (c’est-à-dire 20 % de la page en largeur), et cliquez sur OK7 – Définir le tableau du contenu principalLa cellule de droite est destinée à accueillir les images et le texte. Comme nous avons réglé la cellule de gauche pour le sommaire, nous allons modifier les paramètres de la cellule de droite.Placez votre curseur dans la cellule de droite, puis cliquez sur le bouton droit de la souris. Dans le menu contextuel, sélectionnez la commande Propriétés des cellules. Dans l’onglet Apparence, repérez la catégorie Taille. Cochez le bouton Larg spec., et réglez ensuite la taille à 80 %. Cliquez sur OK.8 – Créer les sous-tableaux du sommaireReplacez le curseur dans la cellule de gauche, puis cliquez sur le bouton droit de la souris. Dans le menu contextuel, sélectionnez la commande Propriétés des cellules. Ensuite, dans la catégorie Alignement, réglez l’alignement vertical sur Haut, et l’alignement horizontal sur Centré.Cliquez sur l’icône Créer un tableau. Cette fois-ci, choisissez un tableau avec une colonne et six lignes (6X1). Cliquez sur la cellule bleutée la plus basse pour insérer le tableau. Enlevez les bordures et définissez la largeur en répétant la même opération qu’à la fin de l’étape 4.-Insérez les images et les textes– Le titre de la pageLe squelette de la page d’accueil est prêt. Il reste à insérer les images et les textes. D’abord le titre : placez votre curseur dans la cellule du haut et tapez le nom que vous avez choisi pour votre site. Ensuite, sélectionnez-le et modifiez ses attributs.Pour cela, utilisez les listes déroulantes Police par défaut et Taille de la police situées dans la barre d’outils. Profitez-en aussi pour centrer votre titre et le mettre en gras.– Les intitulés du sommairePlacez votre curseur dans la première ligne du tableau du sommaire. Tapez dans chaque cellule le nom de chacune des parties de votre site.– L’image de la page d’accueilPlacez votre curseur dans la cellule de droite. Ensuite, déroulez le menu Insertion, puis sélectionnez la commande Image. Dans l’onglet Options, cliquez sur le bouton Parcourir, sélectionnez le dossier Images, puis choisissez celle que vous souhaitez faire apparaître dans votre page d’accueil.Notez qu’une fenêtre Aperçu permet de visualiser le fichier avant de l’insérer. Une fois que vous avez choisi votre image, cliquez successivement sur Ouvrir puis sur OK.– Le texteUne fois 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 cliquez sur l’icône Centrer dans la barre d’outils.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Fabrice Auclert et Emmanuel Genty