Préparez le plan du site sur papier
1Concevez la structure du site
Un crayon et quelques feuilles de papier restent des outils nécessaires à l’élaboration d’un site Web. L’expérience montre que se lancer tête baissée dans la création des pages, sans avoir pensé leur organisation et leur contenu, donne rarement de bons résultats : votre site risque d’être mal structuré, d’oublier des parties (des rubriques), d’offrir une consultation incohérente… et, par la suite, vous aurez plus de mal à réaménager l’ensemble. Le plan du site n’a pas besoin d’être très compliqué : il s’agit de dessiner l’arborescence de toutes les pages. Représentez-les par des rectangles. Puis inscrivez dans chacun d’eux un nom en résumant le contenu prévu. H
La logique implique de commencer par la page d’accueil : c’est l’équivalent d’un sommaire de magazine donnant accès aux autres pages et à différentes rubriques. Figurez par des flèches les liens entre les différentes pages. Vous obtenez ainsi une vue globale de votre site. Bien entendu, tant qu’il n’existe que sur papier, il est facile de modifier sa structure : une gomme suffit !
2Crayonnez une maquette
Une fois le plan du site dessiné, vous pouvez vous pencher sur le détail des pages. Là encore, le papier est de rigueur. Pour chaque page, utilisez une feuille de papier en haut de laquelle vous inscrivez le nom que vous lui avez donné (celui que vous avez défini à l’étape 1).
Puis notez brièvement les éléments graphiques, les textes ou les extraits sonores qu’elle devra contenir.
Quel que soit le sujet choisi, n’hésitez pas à faire et défaire vos maquettes, c’est-à-dire la présentation des informations des pages. A moins d’être un artiste accompli, vous n’aurez pas forcément tout de suite la mise en page parfaite et il vous faudra plusieurs essais avant d’arriver à la page idéale.
LES CONSEILS DE CLIC-CLIC
– Evitez l’avant-garde. Mieux vaut opter pour quelque chose de classique ou, au minimum, d’intuitif. Les internautes qui surferont sur votre site doivent pouvoir naviguer aisément sans avoir à lire un quelconque mode d’emploi !
-Soignez en particulier la page d’accueil, trop souvent bâclée sur certains sites personnels. Elle doit être à la fois agréable et attractive pour donner envie d’aller plus loin. Inutile de vouloir tout dire et d’assommer le visiteur avec une quantité trop importante d’informations. Décrivez en quelques phrases et titres accrocheurs l’objet du site et ce qu’on y trouve sans tomber dans le rapport sec et froid.
Créez un dossier spécial sur votre disque dur
Vous avez un plan de la structure du site et les maquettes des pages sont prêtes. Place à l’informatique ! Sur le disque dur de votre micro, créez un dossier spécial qui contiendra l’intégralité des éléments du site : les pages HTML, les images, les sons, etc.
Mais attention : ce dossier ne reproduit pas la structure du site telle que vous l’avez dessinée, en intégrant autant de sous-dossiers que de pages à concevoir. Dans la pratique, en effet, le dossier peut se contenter de deux sous-dossiers.
Sur le bureau de Windows, cliquez avec le bouton droit et choisissez Nouveau puis Dossier, et nommez-le, par exemple, Monsite. Double-cliquez sur le dossier, et créez de la même façon deux sous-dossiers baptisés respectivement Images et HTML.
Le premier servira à stocker tous les éléments graphiques, le second tous les fichiers HTML (les pages). Toutefois, la page d’accueil, elle, devra se trouver impérativement au premier niveau de votre dossier, le même que celui des dossiers Images et HTML.
En outre, le fichier de cette page d’accueil devra impérativement s’appeler index. htm (nous repréciserons ce point plus loin).
Concevez les pages avec FrontPage Express
Les logiciels de PAO wysiwyg ont créé une révolution à leur apparition dans les années 1980, en offrant la possibilité de mettre en page de façon visuelle les documents sur ordinateur. Auparavant, la conception électronique de livres ou de magazines relevait de la programmation, à base de codes et de balises.
Dédiés à la création des pages Web, les éditeurs HTML proposent des fonctions de mise en page plus rudimentaires. Concrètement, pour concevoir des pages soignées, il est nécessaire de recourir à leur fonction principale : le tableau. Celle-ci est un petit peu complexe, mais ce n’est qu’à partir d’un tableau et de cases de tailles variées que vous réaliserez des mises en page élaborées avec des alignements de textes et d’objets irréprochables.
Toutes les manipulations qui suivent s’appliquent, dans leur principe, à la création de tous les types de pages. Nous prenons ici pour exemple la conception de la page d’accueil.
1Enregistrez la page
Démarrez le logiciel FrontPage Express. Il s’ouvre sur une page blanche appelée Page normale sans titre. Renommez-la en cliquant sur le menu Fichier et en choisissant Enregistrer sous. Dans la bo”te de dialogue qui s’affiche, cliquez sur le bouton Fichier. Puis, dans la bo”te Enregistrer en tant que fichier, naviguez dans le dossier du disque dur pour vous placer à l’intérieur du dossier Monsite. Nommez votre page d’accueil en tapant index dans le champ nom : et cliquez sur le bouton Enregistrer. Tapez toujours les noms en lettres minuscules.
2Placez le tableau
Dans la barre d’outils de mise en forme de FrontPage Express, cliquez sur le bouton qui permet de centrer le texte ou les objets. Cliquez ensuite sur le menu Tableau et choisissez Insérer tableau. Dans le cadre supérieur de la fenêtre de réglages du tableau qui s’est affichée, tapez 2 pour définir le nombre de lignes et 1 pour le nombre de colonnes. Puis cliquez en bas de la fenêtre sur le bouton OK.
FrontPage Express affiche maintenant deux petites cases l’une au-dessus de l’autre.
3Insérez une image
Bien entendu, pour insérer une image (dessin ou photo) dans le tableau, vous devez l’avoir stockée.
Sur la plupart des sites, le bandeau mesure entre 640 et 760 points de largeur et environ 100 points de hauteur. Pour continuer notre exemple, à l’aide d’un logiciel de dessin, créez l’image du bandeau et enregistrez-la dans le sous-dossier Images du dossier Monsite.
De retour dans FrontPage Express, vous remarquez que le curseur se place automatiquement dans la case supérieure du tableau. Cliquez sur le menu Insertion et choisissez l’option Image. Dans la bo”te de dialogue qui s’ouvre, cliquez sur le bouton Parcourir, puis naviguez dans les dossiers de votre disque dur jusqu’à localiser l’image que vous voulez insérer. Sélectionnez-la et cliquez sur le bouton Ouvrir. Elle appara”t dans la case supérieure du tableau, dont la taille s’adapte à celle de l’image.
LES CONSEILS DE CLIC-CLIC
Pour s’afficher rapidement, les pages doivent être légères, sinon les internautes, qui n’ont pas tous des modems ultrarapides, devront patienter avant que la totalité de la page s’affiche, et risquent de se lasser rapidement.
Pour éviter cela, les images et les sons de chaque page ne doivent pas excéder 50 Ko chacun. Il y a même moyen de placer de grandes images qui pèseront moins de 20 Ko. Nous reviendrons plus loin sur ce point technique très important.
4Ajoutez les colonnes de la maquette
Cliquez ensuite dans la case inférieure du tableau, puis ouvrez le menu Tableau et choisissez Scinder cellules… Dans la bo”te de dialogue qui appara”t, cochez l’option Scinder en colonnes, tapez la valeur 3 dans le champ Nombre de colonnes : et cliquez sur le bouton OK.
La case inférieure s’est partagée en trois cellules égales. Cliquez du bouton droit dans la cellule de gauche et, dans le menu déroulant, choisissez Propriétés de la cellule… Dans la zone Disposition, choisissez Centré pour l’Alignement Horizontal, et Haut pour l’Alignement vertical. Vous avez aussi la possibilité de modifier la couleur de fond de cette cellule, qui va devenir la colonne du menu de navigation du site. Pour cela, dans la zone Arrière-plan personnalisé, cliquez sur la flèche noire pointée vers le bas à droite du champ Couleur d’arrière-plan, et choisissez une couleur dans la liste déroulante ou Personnalisée pour en créer une nouvelle. Enfin, cochez l’option Spécifier la largeur dans le cadre Largeur minimale et tapez la valeur 100. Cliquez ensuite sur Appliquer puis sur OK.
Renouvelez cette opération pour la cellule située à l’extrême droite en choisissant Droit pour l’Alignement Horizontal, Haut pour l’Alignement vertical, et en cochant l’option Spécifier la largeur dans le cadre Largeur minimale avec, là encore, la valeur 100. Cliquez ensuite sur Appliquer, puis sur OK.
Enfin, faites de même pour la dernière cellule, au centre, en choisissant Gauche pour l’Alignement Horizontal, Haut pour l’Alignement vertical, et en cochant l’option Spécifier la largeur dans le cadre Largeur minimale et tapez la valeur440. Cliquez sur Appliquer puis sur OK.
LES CONSEILS DE CLIC-CLIC
Limitez la largeur de votre tableau de mise en page à 640 points : si la plupart des écrans de PC affichent aujourd’hui en 800 x 600 points (ou 1 024 x 768 points), vous serez sûr ainsi que vos pages s’afficheront en entier sans que les internautes aient à utiliser la barre d’ascenseur horizontale, une man?”uvre souvent longue et fastidieuse.
En revanche, et si besoin est, vos pages peuvent être plus longues que la hauteur de l’écran : les internautes sont habitués à faire défiler la barre d’ascenseur verticale. Mais n’abusez pas sur la longueur de la page.
5Composez les textes
Placez le curseur dans la cellule de gauche et composez le texte qui doit servir de menu de navigation et permettre d’arriver aux différentes pages du site.
Comme dans un traitement de texte, FrontPage Express donne la possibilité de modifier la taille, la couleur et l’alignement des caractères en utilisant les icônes situées juste sous la barre des menus. La seule différence fondamentale avec Word, par exemple, c’est que FrontPage ne permet pas d’accéder directement par sa barre de boutons à la taille des caractères. L’éditeur HTML ne propose en effet que deux boutons pour augmenter ou diminuer la taille des caractères qu’on a sélectionnés, symbolisés par la lettre A. Pour plus de précisions, vous pouvez néanmoins sélectionner un mot ou un paragraphe, cliquer sur le menu Format et choisir Polices pour accéder aux réglages généraux des caractères.
L’alignement des caractères (à gauche, à droite ou au centre), dans les éditeurs HTML, s’applique à tous les textes et objets situés dans un même paragraphe. FrontPage Express considère comme paragraphe tous les éléments compris entre deux sauts de paragraphe, obtenus en appuyant sur la touche Entrée du clavier.
En enfonçant la touche Maj du clavier et en appuyant sur la touche Entrée, on produit, en revanche, un simple saut de ligne. Si, dans une même cellule, vous avez placé une image et un peu de texte séparés par un ou plusieurs sauts de ligne (Maj + Entrée), l’alignement s’appliquera à tous les éléments. Mais si vous séparez l’image du texte par un saut de paragraphe (Entrée), l’alignement ne s’appliquera qu’à l’élément (le texte ou l’image) que vous avez sélectionné. Faites donc des essais.
LES CONSEILS DE CLIC-CLIC
Les polices trop originales risquent de ne pas s’afficher chez les internautes qui ne les ont pas. N’utilisez que les polices système (Arial, Courrier, Garamond, Times…), les seules à être reconnues par tous les ordinateurs de la planète. Et n’utilisez pas plus de deux ou trois polices différentes dans une même page.
6Placez différents types de liens
S’ils sont moins complets pour la maquette que les vrais logiciels de PAO, les éditeurs HTML permettent, en revanche, de créer très simplement des liens hypertextes.
Le principe est simple : il suffit de sélectionner le mot, l’expression, la phrase, le paragraphe ou encore l’image que l’on veut rendre cliquable, d’activer l’outil de création de lien, et de définir, enfin, la nature de ce lien et l’adresse du fichier ou du programme qu’il doit déclencher. Voici comment faire.
Un lien vers une autre page du site
Dans la colonne de gauche de votre page d’accueil (celle du menu), sélectionnez par exemple le mot Photos, qui doit être cliquable, et déclenchez l’affichage d’une page de votre site consacrée à vos photos personnelles.
Cliquez ensuite sur l’outil de création de lien (l’icône symbolisant la terre et un maillon de cha”ne) dans la barre de FrontPage Express. La fenêtre Créer un lien s’affiche.
Sélectionnez l’onglet World Wide Web si ce n’est déjà fait, cliquez sur le petit triangle noir pointé vers le bas à droite du champ Type de lien et choisissez (autre).
Dans le champ URL, tapez l’adresse relative à la page qui doit être affichée lors de ce clic. Si vous suivez nos conseils et stockez les pages de votre site dans le dossier HTML que vous avez créé dans le dossier Monsite, et en imaginant que vous enregistrerez la page de photos sous le nom photos. htm, l’adresse à taper dans le champ URL sera HTML/photos. htm.
Puis cliquez sur OK. Enfin, n’oubliez pas de construire ensuite, avec FrontPage Express, la page correspondante (bien respecter le nom choisi, dans notre cas photos. htm) et de l’enregistrer dans le dossier HTML.
Un lien vers une adresse électronique
Si vous souhaitez que les internautes vous envoient des e-mails, sélectionnez par exemple le mot Contact, que vous avez tapé quelque part dans votre page d’accueil, cliquez sur l’outil de création de lien, choisissez l’option mailto : qui figure dans le champ Type de lien. Dans le champ URL, tapez votre adresse électronique à côté de l’expression mailto : qui est affichée. Le champ URL devrait ainsi afficher quelque chose du genre mailto:dupont@fournisseur. fr. Cliquez enfin sur OK.
Un lien vers vos sites préférés
Il n’est guère plus compliqué de créer des liens vers d’autres sites. La manipulation est en effet la même : vous devez sélectionner le mot, l’expression ou l’image à cliquer, activer l’outil de création de lien, choisir http: dans le champ nommé Type de lien. Ensuite, dans le champ URL, tapez l’adresse du site sur lequel vous souhaitez renvoyer, directement après http:// qui est affiché, et cliquez sur OK
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
