Tuto 2 Sigil : la page de titre

Bonjour à tous et à toutes. Je vous ai laissé à la fin du précédent tuto après avoir réalisé avec vous la page de couverture. Nous allons maintenant nous occuper de créer la page de titre.

Pour commencer, allez sur votre page de couverture. Placez votre curseur après l’image de couverture et cliquez sur l’icône encadrée sur la photo ci-dessus.

Cette icône permet de créer une nouvelle page à partir de l’actuelle. En fait, Sigil fait une scission au niveau du curseur. D’où l’importance de le placer après l’image de couverture ; sans quoi elle se retrouverait sur la page de titre.

Votre nouvelle page est vierge en mode « vue livre » et ressemble à la photo ci-dessus en mode « vue code ».

À présent, vous pouvez supprimer la balise div qui n’a plus lieu d’être. Vous pouvez aussi changer le titre de la page entre les balises title :

<title>Tuto Sigil</title>

N’oubliez pas non plus de renommer la feuille dans le menu de droite. Appelez-la Titre.

Enregistrez votre travail régulièrement pour ne pas le perdre.

Revenons en vue livre.

Sans vous soucier de la présentation, écrivez votre titre, puis le genre de votre livre, par exemple, « Roman ». Vous pouvez aussi rajouter une tilde pour faire plus joli (vous la trouverez en cliquant sur l’icône oméga) et encore en-dessous, votre nom.

Il nous faut maintenant aller dans notre feuille de style. Si vous ne l’avez pas encore créée, il n’est pas trop tard, pour ce faire, suivez le tuto 1.

Pour l’instant, votre feuille de style, si vous vous en êtes déjà servi dans le tuto 1, doit ressembler à cela :

Si vous venez de la créer, elle doit encore être vierge.

Tout en haut de la feuille de style, écrivez ceci :

body {
font-family: Cambria, Garamond, serif, sanserif, monospace;
margin: 4%;
}

Pas de point devant body, contrairement à couverture, car ce n’est pas une classe. Font-family sert à indiquer les polices de caractères que vous voulez utiliser. Si la police par défaut de Sigil vous convient, ce n’est pas une obligation. Les polices doivent apparaître dans votre ordre de préférence. Tous les appareils de lecture ne disposent pas des mêmes polices. Ainsi, avec cet exemple, un appareil qui ne dispose pas de Cambria utilisera Garamond. S’il ne possède ni l’une ni l’autre, il prendra n’importe quelle police avec serif et ainsi de suite.

Margin indique que le texte doit être décollé du bord de l’écran pour une lecture plus agréable. Certains mettent 2%. Personnellement, je préfère 4.

Notez qu’il n’y a jamais d’espace avant les deux-points et que les lignes se terminent par un point-virgule (lui aussi sans espace avant).

À présent, sous la classe de couverture, nous allons créer quatre nouvelles classes :

.autrice {
font-size: 1.5em;
text-align: center;
margin-bottom: 5%;
}

.titre {
font-size: 2.5em;
text-align: center;
margin-top: 10%;
}

.tilde {
font-size: 1em;
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}

.genre {
font-size: 1.2em;
text-align: center;
}

Font-size indique la taille de la police. Margin-bottom la marge en-dessous, margin-top la marge au-dessus.

Nous avons donc maintenant une feuille de style qui ressemble à ceci :

Revenez à votre page de titre : rien n’a changé en dehors de la police qui est maintenant la bonne. Mais la mise en page, elle, n’a pas bougé. Prenez la vue code.

Vous avez normalement quelque chose comme cela :

Commencez par remplacer la balise p de votre titre par une balise h1 :

<h1>Tuto Sigil</h1>

Mais ce n’est pas finit. À la balise h1 d’ouverture, rajoutez la classe correspondante :

<h1 class= »titre »>Tuto Sigil</h1>

Attention, puisque le langage du code est de l’anglais, pas de e à class.

Quant aux autres balises p, voici comment vous devez les modifier :

<p class= »genre »>Roman</p>
<p class= »tilde »>˜</p>
<p class= »autrice »>Marjolaine Pauchet</p>

Il ne vous reste plus qu’à revenir en vue livre pour admirer votre œuvre ! 😉

 

Article publié pour la première fois sur Overblog le 10 juin 2019.