Création de page Web - Les bonnes pratiques

Création d’un tableau sur une page Web

Mise en forme d'une page avec un tableau contenant des horaires et informations diverses destinées à être présentées de façon bien aligné pour en faciliter la lecture.

L’éditeur de page Web vous permet de créer tous types de pages qui seront visibles sur votre site public. Cependant un grand nombre de méthodes sont disponibles, les bonnes et les mauvaises.

Mise en forme d'une page avec un tableau contenant des horaires et informations diverses destinées à être présentées de façon bien aligné pour en faciliter la lecture.

L’éditeur de page Web vous permet de créer tous types de pages qui seront visibles sur votre site public. Cependant un grand nombre de méthodes sont disponibles, les bonnes et les mauvaises.

Lorsque vous créez une page pour votre site vous devez avoir à l’esprit, que contrairement à une page imprimée sur une feuille A4, l’utilisateur pourra la consulter sur tous types de navigateurs Internet ayant une largeur et une hauteur variable (Smartphone, tablette, station de travail).

Donc pour la largeur des éléments que vous placerez dans vos pages, préférez une largeur en pourcentage plutôt qu’en pixels.

Dans l’exemple ci-contre nous avons placé un élément centré qui fait 60% de la taille totale de notre document et non pas en pixels qui n’aurait pas
varié selon la taille de votre document.

Vous obtenez donc un élément bien centré avec une largeur toujours proportionnelle à la largeur totale de votre document.

Création d’un programme de votre manifestation sur une page Web

Nous allons donc créer ensemble un exemple de programme qui pourra vous servir de support lors de votre prochaine création.

Exemple de résultat attendu :

Création du tableau principal

Dans un premier vous avez une page blanche sur laquelle vous devez taper la date du premier jour de votre programme. Ajoutez un retour de ligne pour placer votre curseur sous la date.

Vous pouvez ensuite cliquer sur le bouton « Ajouter un tableau », un écran de propriété du tableau s’ouvre et vous permet de définir les propriétés du tableau que vous désirez créer.

Plusieurs propriétés sont disponibles, nous ne nous concentrerons que sur celles utiles dans notre exemple.

La première propriété « Lignes » disponible permet de définir le nombre de lignes que vous désirez pour votre tableau. Vous pouvez indiquer une valeur numérique, mais sachez que vous aurez la possibilité d’ajouter autant de lignes que nécessaire par la suite. Pour notre exemple indiquer « 10 » lignes.

La deuxième propriété « Colonnes » permet de définir le nombre de colonnes que vous désirez pour votre tableau. Dans notre exemple nous avons une première colonne contenant les horaires, une deuxième contenant les titres et les auteurs et une troisième contenant le nom de la salle. Nous indiquerons donc trois colonnes. Pour notre exemple indiquez « 3 » colonnes.

La troisième propriété « Largeur » permet de définir la largeur du tableau. C’est ici que vous devrez indiquer une valeur en pourcentage par rapport à la largeur total de votre document. Pour notre exemple entrez « 100% », pour que le tableau occupe la totalité de la largeur du document.

Saisi du contenu

Complétez les cellules du tableau avec les horaires, les titres, les auteurs et les noms des salles comme dans l’écran ci-dessous, respectez bien la position de chaque texte dans les cellules de façon à bien suivre notre exemple.

La cellule qui contient les trois témoignages d’entreprise est plus haute que les autres car elle contient trois lignes séparées par des fins de paragraphe.

Vous pouvez ajouter des puces devant chacune des lignes en sélectionnant les trois lignes et en cliquant sur le bouton « Ajouter une puce » .

Vous obtenez donc un résultat comme ci-dessous.

Coloration des cellules de titre

Coloration des cellules de titre

Réunissez les couleurs que vous allez utiliser pour créer votre tableau en fonction de la charte utilisée pour votre évènement. Dans notre exemple nous avons choisi les deux couleurs suivantes comme couleur de fond des cellules :

Comme pour les couleurs que nous avons choisis dans notre exemple, votre graphiste vous fournira les couleurs soit sous forme de trois valeurs RVB Rouge, Vert, Bleu ou alors un code hexadécimal correspondant à la couleur.

Vous devez sélectionner les trois cellules de la ligne que vous désirez colorer, cliquez ensuite avec le bouton droit de la souris, le menu contextuel s’affiche, cliquez sur « Propriété de la cellule » disponible dans l’option « cellule » comme ci-dessous.

Modification de plusieurs cellules simultanées

Cette option n’est accessible que si vous utilisez le navigateur « Mozilla Firefox », sur les autres navigateurs vous devrez modifier les cellules les une après les autres.

Pour sélectionner plusieurs cellules :

Sélectionnez une première cellule, puis cliquez et tirez sur les autres cellules
A l’aide de la touche contrôle (CTRL) du clavier vous pouvez modifier votre sélection
En cliquant avec le bouton droit de la souris sur une des cellules sélectionnées vous pourrez modifier l’ensemble des propriétés des cellules (alignement, couleurs, fusion de cellules,..)

Attention : Les propriétés de toutes les cellules sélectionnées seront modifiées avec des valeurs identiques pour chaque cellule.
L’écran de définition des propriétés de cellules s’ouvre, vous pouvez coller la valeur de la couleur dans la case de saisie « Couleur d’arrière plan », puis cliquez sur « OK ».

Vous pouvez ainsi colorer toutes les lignes de titre avec cette même couleur et utiliser la deuxième couleur pour la ligne de déjeuner, jusqu’à obtenir un résultat comme dans l’exemple ci-dessous.

Mise en forme des textes

Comme précédemment pour colorer les lignes, vous pouvez sélectionner ces mêmes lignes et appliquer le Gras et la Couleur blanche pour le texte comme dans l’exemple ci-dessous.

Notre tableau commence à ressembler au résultat attendu, il reste quelques réglages à effectuer.

Pensez donc à enregistrer votre travail de temps en temps en cliquant sur le bouton « Enregistrer ». Cette action referme l’éditeur et vous oblige à le rouvrir, mais il sauvegarde votre travail en cas de coupure Internet.

Nous allons maintenant aligner à droite toute les cellules contenant des horaires et toutes les cellules contenant un nom de salle. Cliquez dans chacune de ces cellules puis utilisez le bouton « alignement à droite ». Vous devez donc obtenir un écran comme ci-dessous.

Avec le navigateur Internet « Mozilla firefox », vous pouvez sélectionner plusieurs colonnes et cellules en même temps avec la touche « ctrl » de votre clavier et en cliquant gauche avec la souris, puis utilisez le bouton « alignement à droite ».

Il ne nous reste plus qu’à cacher les lignes du tableau afin d’avoir un rendu visuel plus sympathique. Pour cacher les lignes cliquez sur le tableau avec le bouton droit de la souris, sélectionnez l’option « Propriété du tableau » puis dans taille de la bordure mettez « 0 ».

Vous pouvez insérer un espace après chaque heure pour espacer un peu plus les horaires des titres et ainsi améliorer le rendu.