Mise en page avancée des bases de données

De M@gistère
Révision datée du 25 mai 2021 à 11:34 par Jacques-paul.dubois ac-dijon (discussion | contributions) (Page créée avec « == L'affichage liste == === L'affichage liste par défaut === L'affichage liste reprend les informations de chaque fiche et les présente sous la forme d'un tableau gén... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Sauter à la navigation Sauter à la recherche

L'affichage liste

L'affichage liste par défaut

L'affichage liste reprend les informations de chaque fiche et les présente sous la forme d'un tableau général, avec un bloc par fiche.

Voici un exemple d'affichage liste par défaut

BdD affichage liste défaut2.jpg

Cette capture d'écran permet de repérer les 3 parties de la page :

  • L'Entête qui contient tout ce qui est avant la liste des fiches (entouré en rouge);
  • La 'Fiche répétée' qui correspond à la liste de toutes les fiches répétées (une fiche complète est entourée en rose) ;
  • Le pied de page qui correspond à tout ce qui est après la liste des fiches (entouré en bleu).

Un peu d'ergonomie

Si l'on veut un affichage ergonomique, il est utile de limiter les champs affichés dans cette liste pour chaque fiche en se limitant aux champs essentiels pour pouvoir exploiter et trier les différentes fiches.

De même, il est plus facile d'organiser une fiche sur une seule ligne de tableau avec les noms des champs en haut du tableau.

Voici une première version améliorée.

BdD affichage liste niv1.jpg

On constate que tous les champs définis par le formateur ne sont pas affichés, par contre, on a rajouté un champs 'standard', l'auteur de la fiche.

Le pictogramme pour visualiser la fiche a été déplacé au plus près du nom de la fiche.

On a décidé d'afficher le bouton pour accéder aux commentaires associés à la fiche.

Attention, la mise en page se fait en travaillant directement le code HTML de la page, il faut donc désactiver l'éditeur en cliquant sur le texte correspondant.

Désactiver éditeur.jpg

Le code correspondant à cette première version améliorée se présente en trois parties comme suit.

En-tête

<p dir="ltr" style="text-align: left;">
Bonjour à tous, <br>
Voici l'ensemble des projets proposés.<br></p>
<table  width="100%">
<tr><th>Nom du projet</th><th>Auteur</th><th>structure</th><th>commentaires</th></tr>

Cet en-tête contient le texte au-dessus du tableau ainsi que l'ouverture du tableau (balise <table>), et la ligne du tableau contenant les titres des colonnes.

Fiche répétée

<tr><td>##more## [[Nom du projet]]</td><td>##user##</td><td>[[structure]]</td><td>##comments##</td><td> ##edit## ##delete##</td></tr>

Nous retrouvons ici une ligne de tableau, qui sera répétée autant de fois qu'il y a de fiches.

Les champs définis par l'utilisateur sont entre doubles crochets, les champs 'standard', sont entre double dièse.

Pied de page

</table>
<p dir="ltr" style="text-align: left;">Bonne continuation<br></p>

Le pied de page contient la fermeture du tableau (balise </table>) et le texte après le tableau.

Mise en forme avec le CSS