Comment définir la présentation

Un minimum d’organisation s’impose lorsqu’on souhaite concevoir un site Web. Nous vous proposons de créer sur votre disque dur un dossier spécifique (par exemple MonSite), lui-même divisé en deux sous-dossiers HTML et Images.Dans le premier seront enregistrées toutes les pages du site, sauf la page d’accueil. Le second comprendra les images. Plus tard, lorsque votre site sera entièrement fabriqué, vous transférerez les dossiers sur le serveur d’un hébergeur à l’aide d’un logiciel spécial appelé FTP.

Etape 1 – Construire d’abord un tableau

Le tableau est le meilleur moyen pour aligner avec précision du texte et des images. La majorité des sites les utilisent, bien qu’ils soient invisibles à l’?”il nu. Pour le vérifier, accédez au site Telecharger.com. Dans le menu Fichier, sélectionnez Modifier : Vous constaterez que cette page, d’apparence simple, est en fait un vaste tableau composé de sous-tableaux.Le premier avantage est de permettre de déterminer la taille exacte des images au pixel près. Afin que votre page Web soit affichée dans son intégralité et que notamment la barre d’ascenseur verticale soit toujours visible, veillez à ajuster la taille de votre tableau. La majorité des internautes utilisant une définition d’affichage de 800 x 600 points, la largeur idéale pour votre page est de 770 points.Prenons un exemple simple. Dans FrontPage Express, cliquez, dans la barre d’outils, sur l’icône en forme de tableau. Un tableau de cinq cases par cinq apparaît. En cliquant sur la première case, en haut à gauche, vous créez un tableau d’une seule case.Placez le curseur de la souris au milieu d’elle et cliquez du bouton droit. Un menu apparaît où figure Propriété du tableau… Cette option détermine de nombreuses propriétés du tableau sélectionné. Réglez les bordures à 0, puis cliquez sur Spécifier la largeur et sur En pixels avant de taper 770 dans le petit cadre.Cliquez à l’intérieur de ce premier tableau constitué d’une ligne unique et cliquez sur Créer un tableau. Dans le petit tableau de 5 x 5, choisissez maintenant un tableau de deux lignes pour une colonne en cliquant sur la première case de la deuxième ligne. Nous obtenons un tableau avec deux cases.La première servira pour le titre du site et la seconde accueillera le contenu de la page après avoir été divisée à son tour. Cliquez dans la case du bas, puis à nouveau sur Créer un tableau. Choisissez un tableau de deux colonnes pour une ligne en cliquant sur la deuxième case de la première ligne. En cliquant du bouton droit dans l’une des cellules ainsi créées, réaffichez le tableau des propriétés du tableau et réglez les bordures à 0 ainsi que la largeur à 100 % comme pour le cadre principal.A vous ensuite de placer dans les cases vos différents éléments : textes, dessins, photos, etc. Nous vous conseillons d’espacer chacun d’eux afin d’éviter qu’ils soient collés les uns aux autres. Dans chaque case, cliquez du bouton droit pour faire apparaître la fenêtre des propriétés du tableau et, dans la section Disposition, réglez l’espacement entre les cellules à 5 environ.

Etape 2 – Personnaliser l’arrière-plan

Vous pouvez modifier l’arrière-plan de votre page ?” qui est blanc par défaut ?” en sélectionnant une autre couleur ou en choisissant une petite image, qui se reproduira à l’infini sur le fond. Nous vous conseillons d’opter dès le départ pour cette seconde solution, même si vous n’avez pas encore d’image. Dans ce cas, utilisez un simple carré blanc. Ensuite, il vous suffira de le modifier (ou de remplacer ce fichier par un autre) pour que le chargement s’applique automatiquement à toutes vos pages.Pour créer l’image d’arrière-plan, nous allons utiliser Paint, le logiciel de dessin livré avec Windows. Au lancement du logiciel, l’image affichée est trop large pour être utilisée comme arrière-plan. Afin de modifier sa largeur et sa hauteur, déroulez le menu Image, puis cliquez sur Attributs. Remplacez la valeur de la largeur et de la hauteur par 10. Cliquez sur OK pour valider.Pour modifier l’aspect de l’image, cliquez sur l’une des couleurs proposées par la palette, puis cliquez sur Remplissage. Au moment de l’enregistrement dans votre dossier Images du dossier Monsite, sélectionnez le format Gif dans le menu déroulant Type.Une fois cette image créée, il reste à l’intégrer à vos pages. Lancez FrontPage Express, puis ouvrez la page d’accueil de votre site. Déroulez le menu Format, puis cliquez sur Arrière-plan. Cochez la case Image d’arrière-plan, puis cliquez sur Parcourir. Dans l’onglet Autre emplacement, cliquez sur Parcourir, puis sélectionnez le fichier de votre image de fond enregistré dans votre dossier Images.

Etape 3 – Récupérer l’image de fond de page

Afin de créer un beau fond de page, il existe une solution plus simple : empruntez-le à un site existant, à condition bien sûr de ne pas utiliser une photo ou un dessin sans l’accord de son auteur. Sur le site de votre choix, cliquez du bouton droit sur le fond d’écran, puis sélectionnez Enregistre l’arrière-plan sous… Dans la fenêtre d’enregistrement, sélectionnez le dossier Images du dossier de votre site sur le disque dur.

Etape 4 – Donner du style

Pour l’aspect du texte, ne vous limitez pas au simple choix de la police de caractères, de la taille et des attributs (gras, italique, etc.). Vous pouvez en effet, à l’intérieur même du code HTML, ajouter des commandes appelées feuille de style (en anglais CSS, Cascading Style Sheet). Il suffit de connaître quelques codes (ou balises) pour obtenir déjà un résultat intéressant.A la manière d’un traitement de texte, les balises que nous décrivons ci-après définiront des styles pour les différents types de textes de vos pages : titre général, titres de paragraphe, texte. A l’aide de votre éditeur (par exemple FrontPage Express ou Word), ouvrez le fichier de la page d’accueil de votre site et affichez le code HTML. Les codes à insérer devront être placés dans l’en-tête, entre les balises et .Commencez par ajouter les indications de début la feuille de style :

type=”text/css”>
Nous avons en fait doubler l’information avec ?”>

Entre les deux, insérez les définitions de styles en vous inspirant de nos exemples :

body {font-family/ Arial} : Arial devient la police par défaut pour toute la page.

h1 {color: red; font-weight: bold; font-style: italic} : le style de titre h1 existe déjà dans HTML et apparaît sans doute déjà dans le code de votre page pour le titre général. Mais ici nous l’avons modifié. Les lignes de texte débutant par h1 afin que ce style (celui que nous avons choisi pour le titre) soit appliqué. Le texte sera rouge (red), gras (bold) et en italique.h4 {font-style: normal; font-weight: bold} : pour les titres de paragraphes, nous utiliserons le style h4 qui donnera des caractères gras.

p {text-align: right; font-size: x-small} : dans une page HTML, les blocs de texte courant sont définis par p. Nous avons dans ce cas modifié ce style afin que le texte soit aligné à droite et que sa taille soit plus petite que la normale.