Structure / Class
- Chaque chapitre est une
<section></section>
, si l'on souhaite que le chapitre apparaisse dans le sommaire, il faut ajouter la class "chapter" à cette section
- La class "page" permet de créer une page (saut de page après la page)
- La class "page-right" permet de dire que cette page est toujours sur la page de droite
la class "page-left" permet de dire que cette page est toujours sur la page de gauche
- Les titres des chapitres doivent être des
<h2>
dans une <div>
possédant la classe "chapter-title"
Class pour les images
Vous pouvez utilisez des classes pré-existantes pour les images:
- .image-big => image à 100%
- .image-medium => image à 2/3
- .image-small => image à 1/3
- .image-left-pos => positionne l'image à gauche
- .image-right-pos => positionne l'image à droite
- .image-top-pos => positionne l'image en haut
- .image-bottom-pos => positionne l'image en bas
Contenu
Il est possible d'utiliser PHP pour afficher automatiquement le contenu image ou texte d'un dossier. Le fichier "utils.php" contient une fonction getFileList($dir)
, permettant de lister tous les fichiers contenus dans un dossier.
Images
Pour afficher toutes les images dans un dossier:
<?php $dir = getFileList("nom du dossier");
<!-- permet de lister les fichiers par ordre alphabétique -->
array_multisort(array_column($dir, "name"), SORT_ASC, $dir );
foreach ($dir as $file):?>
<?php if($file['type'] == 'image/jpeg'):?>
<figure>
<img src="<?php echo $file['name']?>">
</figure>
<?php endif;?>
<?php endforeach;?>
Textes
Pour lire le contenu d'un fichier texte:
<?php $text = file_get_contents('dossier/nomdufichier.txt');?>
<p><?php echo $text;?></p>
Pour afficher le contenu de tous les fichiers texte dans un dossier
<?php $dirText = getFileList("nom du dossier");
<!-- permet de lister les fichiers par ordre alphabétique -->
array_multisort(array_column($dirText, "name"), SORT_ASC, $dirText );
foreach ($dirText as $file):?>
<?php if($file['type'] == 'text/plain'):?>
<article class="text">
<p><?php echo $text;?></p>
</article>
<?php endif;?>
<?php endforeach;?>
Grille (aide au développement)
Il est possible d'afficher une grille de repère
Afficher la grille
Utiliser le raccourci: ctrl + b
- aller dans
main.js
- changer ces valeurs tout en haut du fichier:
let nbOfColumns = 3;
(défini le nombre de colonnes)
let gap = 5;
(défini la gouttière)
- Aller dans
style-screen.css
, dans .gui-column, changer le height
avec la taille de la hauteur du (format - marges * 2)