6. La mise en page
Les blocs
section "…" :une partie de la page, avec son titre ;bloc :une boîte ;ligne :des éléments côte à côte ;colonne :des éléments les uns sous les autres ;grille :des cases qui se rangent selon la largeur de l'écran.
page "accueil" :
titre "Le Comptoir"
section "Notre maison" :
texte "Une cuisine de saison, au cœur de la ville."
ligne :
lien "Voir la carte" vers "accueil"
lien "Réserver" vers "accueil"
section "Nos plats" :
grille avec colonnes 3 et espacement moyenne :
bloc avec ombre legere et bordure douce et remplissage moyenne :
texte "Risotto aux champignons"
bloc avec ombre legere et bordure douce et remplissage moyenne :
texte "Tarte fine aux légumes"
bloc avec ombre legere et bordure douce et remplissage moyenne :
texte "Poisson du jour"Les réglages des blocs : largeur (etroite, large), remplissage et espacement (petite, moyenne, grande), colonnes, ombre (legere, moyenne), bordure douce, repartition entre, alignement centre, degrade bleu vers violet, colle (reste en haut pendant le défilement).
Une page qui tient dans l'écran
entete avec fixe : garde l'en-tête immobile : seule la zone en dessous défile, avec sa barre. hauteur ecran fait remplir l'écran à un bloc, sous l'en-tête, et defilement interne donne à un bloc son propre défilement, sans faire bouger le reste. Ensemble, ils font une page de documentation : le sommaire et le texte défilent chacun de leur côté, sans une ligne de CSS.
entete avec fixe :
lien "Accueil" vers "guide"
page "guide" :
titre "Le guide"
ligne avec hauteur ecran :
menu vertical avec defilement interne :
lien "Installer" vers "guide"
lien "Les pages" vers "guide"
colonne avec defilement interne :
texte "Un long chapitre, qui défile seul."Sur le statique, la barre de défilement reste celle de la fenêtre. Sur le téléphone, toute la page défile : hauteur ecran et defilement interne n'ont pas d'effet, et un avertissement le dit.
Selon l'appareil
page "accueil" :
titre "Accueil"
sur telephone :
bouton "Menu"
sur tablette ou ordinateur :
ligne :
lien "La carte" vers "accueil"
lien "Réserver" vers "accueil"Le thème
Un bloc theme : en haut du fichier donne les couleurs, les polices et le mode (clair, sombre ou automatique) de toute l'application :
theme :
couleur marque clair "#0e5a6b" sombre "#5fc3d6"
couleur sable "#f3e9d2"
police titres "Georgia"
mode automatique
largeur large
page "accueil" :
titre "Le Comptoir" avec couleur marque
bouton "Réserver" avec fond sable et couleur marque
bouton "Mode sombre"
quand l'utilisateur clique sur "Mode sombre" :
changer theme par sombreHumalis vérifie le contraste : une couleur de texte trop pâle sur le fond est signalée à la compilation.
Une police peut être livrée avec le site, sans dépendre d'un service extérieur : police titres "Space Grotesk" depuis "./polices/space-grotesk.woff2" (fichiers .woff2, .woff, .ttf ou .otf).
Le visiteur peut aussi passer d'un thème à l'autre. basculer theme passe au thème inverse de celui qu'on voit, et si theme est sombre : (ou clair) réagit au thème affiché :
theme :
mode automatique
page "accueil" :
titre "Accueil"
bouton "Changer de thème"
quand l'utilisateur clique sur "Changer de thème" :
basculer theme
si theme est sombre :
texte "Bonne soirée"
sinon :
texte "Bonne journée"L'en-tête et le pied communs
entete : et pied : s'affichent sur toutes les pages. Une page peut s'en passer avec sans entete ou sans pied. Avec un en-tête, Humalis ajoute seul un lien « Aller au contenu », caché tant que le clavier ne l'atteint pas : il permet de sauter l'en-tête.
entete avec colle :
ligne avec repartition entre :
lien "Le Comptoir" vers "accueil"
lien "La carte" vers "carte"
pied :
texte "Ouvert du lundi au samedi"
page "accueil" :
titre "Bienvenue"
page "carte" :
titre "La carte"
page "connexion" sans entete et sans pied :
titre "Connexion"