lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

module 3 et 4 3TQS

Browse Source
This commit is contained in:
lrdlg
2026-09-26 15:53:15 +02:00
parent 75c541e5b6
commit e3fa8e747c
6 changed files with 900 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
3tq-technique-sociale/index.html
+16
View File
@@ -74,6 +74,22 @@
<span class="module__meta">Textes à saisir · chronomètre de frappe · quiz de fin de module</span>
</a>
</li>
<li class="module">
<a class="module__lien" href="module3/index.html">
<span class="module__num">Module 3</span>
<span class="module__titre">Mettre le texte en forme</span>
<span class="module__resume">Caractère ou paragraphe, polices et tailles, alignements, retraits, espacements, encadrés.</span>
<span class="module__meta">Atelier de mise en forme en direct · textes à saisir · quiz de fin de module</span>
</a>
</li>
<li class="module">
<a class="module__lien" href="module4/index.html">
<span class="module__num">Module 4</span>
<span class="module__titre">Mise en page et impression</span>
<span class="module__resume">Format et marges, sauts de page, en-tête et pied de page, numérotation, aperçu et PDF.</span>
<span class="module__meta">Feuille A4 réglable · deux démonstrations comparées · quiz de fin de module</span>
</a>
</li>
</ul>
</main>
3tq-technique-sociale/indexold.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3e TQ Technique sociale — Traitement de texte</title>
<meta name="description" content="Les modules du cours de traitement de texte de 3e TQ Technique sociale.">
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/theme.css">
</head>
<body class="classe-ts">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>3e TQ Technique sociale</strong>
</nav>
<h1>3e TQ Technique sociale</h1>
<p class="entete__meta">Traitement de texte · M. Courcelle</p>
</div>
</header>
<main class="contenu">
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module se lit du début à la fin, avec des exercices à faire directement dans la page.</p>
<h2>Les modules du cours</h2>
<!-- ==================================================================
POUR AJOUTER UN MODULE
1. Créer le dossier du module à côté de ce fichier, avec son
index.html dedans (le plus simple : copier un module existant).
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
avant la fin de la liste, et remplir les quatre champs :
module__num « Module 3 », « Module C »…
module__titre le titre affiché à l'élève
module__resume une phrase sur ce qu'on y fait
module__meta nombre de séances, chapitre du cours papier…
3. Adapter le href vers le dossier du nouveau module.
Gabarit à copier :
<li class="module">
<a class="module__lien" href="DOSSIER/index.html">
<span class="module__num">Module N</span>
<span class="module__titre">Titre du module</span>
<span class="module__resume">Ce qu'on y apprend, en une phrase.</span>
<span class="module__meta">X séances · cours papier, chapitre Y</span>
</a>
</li>
Un module annoncé mais pas encore prêt : garder le <li> en
ajoutant la classe « module--bientot » et remplacer le <a> par
un <div class="module__lien">, sans href.
================================================================== -->
<ul class="modules">
<li class="module">
<a class="module__lien" href="module1/index.html">
<span class="module__num">Module 1</span>
<span class="module__titre">Le poste et les fichiers</span>
<span class="module__resume">La machine et ses parties, la fenêtre de Writer, enregistrer et nommer un fichier pour le retrouver.</span>
<span class="module__meta">Saisir, enregistrer, retrouver · quiz de fin de module</span>
</a>
</li>
<li class="module">
<a class="module__lien" href="module2/index.html">
<span class="module__num">Module 2</span>
<span class="module__titre">Saisir au kilomètre</span>
<span class="module__resume">La touche Entrée, la ponctuation, les accents, les raccourcis, et ce que le correcteur ne voit pas.</span>
<span class="module__meta">Textes à saisir · chronomètre de frappe · quiz de fin de module</span>
</a>
</li>
</ul>
</main>
<footer class="pied">
<div class="pied__interieur">
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
</div>
</footer>
</body>
</html>
3tq-technique-sociale/module3/index.html
+230
View File
@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 3 — 3e TQ Technique sociale</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/theme.css">
<link rel="stylesheet" href="../../assets/atelier-texte.css">
<link rel="stylesheet" href="../../assets/atelier-m3-m4.css">
</head>
<body class="classe-ts">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">3e TQ Technique sociale</a><span aria-hidden="true">/</span><strong>Module 3</strong>
</nav>
<h1>Mettre le texte en forme</h1>
<p class="entete__meta">Traitement de texte · caractères, paragraphes, encadrés</p>
</div>
</header>
<div class="wrap">
<nav class="sommaire-lat" aria-label="Sommaire">
<a class="top" href="#haut">Module 3</a>
<h2>Module 3, mettre en forme</h2>
<a href="#m3-cp">Caractère ou paragraphe</a>
<a href="#m3-atelier">Atelier de mise en forme</a>
<a href="#m3-caracteres">Les caractères</a>
<a href="#m3-paragraphes">Les paragraphes</a>
<a href="#m3-outils">Reproduire et effacer</a>
<a href="#m3-textes">Textes à saisir</a>
<a href="#m3-quiz">Teste-toi</a>
<h2>Autres modules</h2>
<a href="../index.html">Tous les modules de la classe</a>
<a href="../module2/index.html">Module 2, saisir au kilomètre</a>
<a href="../module4/index.html">Module 4, mise en page</a>
</nav>
<main class="feuille" id="haut">
<div class="regle" aria-hidden="true"></div>
<div class="inner">
<p class="chapeau">Le module 2 t'interdisait de mettre en forme. Celui-ci t'y autorise enfin. Une
seule règle tient tout le module : la mise en forme se règle par les commandes du logiciel, jamais
par des espaces ou des touches Entrée.</p>
<h2 id="m3-cp"><span class="module-tag">Module 3</span><br>Caractère ou paragraphe</h2>
<p>C'est la distinction qui commande tout le reste. Une mise en forme de <strong>caractère</strong> s'applique à ce que tu as sélectionné. Une mise en forme de <strong>paragraphe</strong> s'applique au paragraphe entier, celui où se trouve le curseur, même sans sélection.</p>
<div class="regle-cle">
<p>Le caractère se sélectionne. Le paragraphe se pointe.</p>
</div>
<p>Classe chaque réglage. Clique sur C pour caractère, sur P pour paragraphe.</p>
<div class="at-tri" id="at-tri"></div>
<p class="at-score" id="at-tri-score"></p>
<div class="actions"><button type="button" id="at-tri-reset">Recommencer</button></div>
<h2 id="m3-atelier">Atelier de mise en forme</h2>
<p>Règle les curseurs et regarde ce qui change. La pastille bleue marque un réglage de caractère, la pastille brune un réglage de paragraphe.</p>
<div class="at-atelier">
<div class="at-barre">
<div>
<label for="at-police"><span class="at-badge at-badge--c">C</span>Police</label>
<select id="at-police">
<option value="Cambria, Georgia, serif">Avec empattements</option>
<option value="Inter, 'Segoe UI', system-ui, sans-serif">Sans empattements</option>
<option value="'JetBrains Mono', Consolas, monospace">Chasse fixe</option>
</select>
</div>
<div>
<label for="at-taille"><span class="at-badge at-badge--c">C</span>Taille : <output id="at-taille-v">11</output> pt</label>
<input type="range" id="at-taille" min="8" max="20" value="11">
</div>
<div>
<label><span class="at-badge at-badge--p">P</span>Alignement</label>
<div class="at-aligns" id="at-align">
<button type="button" data-v="left" aria-pressed="true">Gauche</button>
<button type="button" data-v="center" aria-pressed="false">Centré</button>
<button type="button" data-v="right" aria-pressed="false">Droite</button>
<button type="button" data-v="justify" aria-pressed="false">Justifié</button>
</div>
</div>
<div>
<label for="at-retrait"><span class="at-badge at-badge--p">P</span>Retrait 1re ligne : <output id="at-retrait-v">0,00</output> cm</label>
<input type="range" id="at-retrait" min="0" max="3" step="0.25" value="0">
</div>
<div>
<label for="at-espace"><span class="at-badge at-badge--p">P</span>Espacement après : <output id="at-espace-v">0,0</output> cm</label>
<input type="range" id="at-espace" min="0" max="1" step="0.1" value="0">
</div>
<div>
<label for="at-interligne"><span class="at-badge at-badge--p">P</span>Interligne</label>
<select id="at-interligne">
<option value="1.5">Simple</option>
<option value="2.1">1,5 ligne</option>
<option value="2.8">Double</option>
</select>
</div>
<div>
<label><span class="at-badge at-badge--p">P</span>Encadré</label>
<label class="at-case"><input type="checkbox" id="at-bordure"> bordure et fond</label>
</div>
<div>
<label><span class="at-badge at-badge--c">C</span>Style du texte</label>
<label class="at-case"><input type="checkbox" id="at-gras"> gras</label>
<label class="at-case"><input type="checkbox" id="at-italique"> italique</label>
</div>
</div>
<div class="at-atelier__corps">
<div id="at-apercu">
<p>La maison de quartier Les Tilleuls organise des ateliers pour les enfants de six à douze ans. Les activités se déroulent dans la salle du rez-de-chaussée, accessible par la cour.</p>
<p>L'accueil se fait de treize heures à treize heures trente. Les ateliers commencent à quatorze heures et se terminent à seize heures trente.</p>
</div>
</div>
</div>
<p>Remarque en jouant : les réglages bruns agissent sur les deux paragraphes entiers, sans que tu aies rien sélectionné. C'est exactement ce qui se passe dans Writer.</p>
<h2 id="m3-caracteres">Les caractères</h2>
<table>
<tr><th>Réglage</th><th>Où</th><th>Raccourci</th></tr>
<tr><td>Police et taille</td><td>listes de la barre de formatage</td><td>aucun</td></tr>
<tr><td>Gras</td><td>bouton G</td><td><code>Ctrl+B</code></td></tr>
<tr><td>Italique</td><td>bouton I</td><td><code>Ctrl+I</code></td></tr>
<tr><td>Souligné</td><td>bouton S</td><td><code>Ctrl+U</code></td></tr>
<tr><td>Majuscules</td><td>Format, Texte</td><td>aucun</td></tr>
<tr><td>Tout au même endroit</td><td>Format, Caractère</td><td>aucun</td></tr>
</table>
<div class="regle-cle">
<p>Une police pour le texte, une pour les titres, pas plus. Texte courant entre 10 et 12 points. Le souligné date de la machine à écrire : aujourd'hui, un mot souligné ressemble à un lien internet.</p>
</div>
<figure>
<img src="../images/m3-caractere.png" alt="Boîte de dialogue Caractère"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;3tq-technique-sociale/images/m3-caractere.png&lt;/code&gt;&lt;br&gt;Boîte Format, Caractère, onglet Police : listes Police, Style et Taille.&lt;/div&gt;'">
<figcaption>Format, puis Caractère.</figcaption>
</figure>
<h2 id="m3-paragraphes">Les paragraphes</h2>
<p>Tout se règle dans Format, puis Paragraphe. Les quatre onglets utiles cette année :</p>
<table>
<tr><th>Onglet</th><th>Ce qu'on y trouve</th></tr>
<tr><td>Retraits et espacement</td><td>retraits, espacement avant et après, interligne</td></tr>
<tr><td>Alignement</td><td>gauche, centré, droite, justifié</td></tr>
<tr><td>Bordures</td><td>encadré, épaisseur, espacement intérieur</td></tr>
<tr><td>Zone</td><td>couleur de fond. Cet onglet s'appelle Arrière-plan dans les versions plus anciennes</td></tr>
</table>
<div class="regle-cle">
<p>Aucune ligne vide obtenue avec la touche Entrée, aucun alignement obtenu à la barre d'espace. L'espacement après et l'alignement font le travail, et se modifient d'un seul geste sur tout le document.</p>
</div>
<figure>
<img src="../images/m3-paragraphe.png" alt="Boîte de dialogue Paragraphe"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;3tq-technique-sociale/images/m3-paragraphe.png&lt;/code&gt;&lt;br&gt;Boîte Format, Paragraphe, onglet Retraits et espacement, champs remplis.&lt;/div&gt;'">
<figcaption>Format, puis Paragraphe.</figcaption>
</figure>
<h2 id="m3-outils">Reproduire et effacer</h2>
<table>
<tr><th>Outil</th><th>Ce qu'il fait</th><th>Où</th></tr>
<tr><td>Cloner le formatage</td><td>copie une mise en forme et l'applique ailleurs</td><td>pinceau de la barre standard</td></tr>
<tr><td>Effacer le formatage direct</td><td>ramène le texte à sa présentation de base</td><td>Format, ou <code>Ctrl+M</code></td></tr>
<tr><td>Collage sans mise en forme</td><td>colle un texte nu, sans ce qui vient du site d'origine</td><td><code>Ctrl+Maj+V</code></td></tr>
<tr><td>Rechercher et remplacer</td><td>remplace un mot dans tout le document</td><td><code>Ctrl+H</code></td></tr>
</table>
<p>Avec le pinceau : un clic simple l'active pour une seule application, un double-clic le garde actif jusqu'à ce que tu appuies sur Échap. Maintiens <code>Ctrl+Maj</code> pendant l'application pour emporter aussi la mise en forme du paragraphe.</p>
<h2 id="m3-textes">Textes à saisir</h2>
<p>Les textes des exercices, pour les avoir sous les yeux pendant que tu tapes. Ne recopie pas les retours à la ligne que tu vois à l'écran.</p>
<details><summary>Exercice 1, les ateliers du mercredi</summary>
<div class="specimen">
<p>Ateliers du mercredi après-midi</p>
<p>La maison de quartier Les Tilleuls organise des ateliers pour les enfants de six à douze ans. Les activités se déroulent dans la salle du rez-de-chaussée, accessible par la cour.</p>
<p>L'accueil se fait de treize heures à treize heures trente. Les ateliers commencent à quatorze heures et se terminent à seize heures trente. Un goûter est servi à quinze heures quinze.</p>
<p>La participation est gratuit pour les familles de la commune. Les inscriptions se prennent au 069 22 34 56 ou directement auprès des animateurs, le mercredi.</p>
<p>Nadia Bouchard, coordinatrice des activités enfance</p>
</div>
<p>Ce texte contient une faute d'accord. La trouveras-tu en le mettant en forme ?</p>
</details>
<details><summary>Exercice 3, la sortie au musée</summary>
<div class="specimen">
<p>Sortie au musée de la vie rurale</p>
<p>Le groupe des huit à dix ans se rendra au musée de la vie rurale le jeudi 12 mars. Le départ est prévu à neuf heures devant la maison de quartier et le retour vers seize heures au même endroit. Le trajet se fait en car.</p>
<p>La visite est guidée le matin. L'après-midi est consacrée à un atelier de fabrication de pain, animé par le personnel du musée. Les enfants repartent avec ce qu'ils ont préparé.</p>
<p>Important : l'autorisation parentale doit être rentrée pour le vendredi 6 mars au plus tard. Aucun enfant ne pourra participer sans ce document signé. Prévoir un pique-nique, une tenue qui ne craint rien et des chaussures fermées.</p>
</div>
</details>
<details><summary>Exercice 4, la journée type au centre de vacances</summary>
<div class="specimen">
<p>Déroulement d'une journée type au centre de vacances</p>
<p>Le matin</p>
<p>Les enfants arrivent entre huit heures et neuf heures. Le moniteur responsable du groupe fait l'appel et note les présences. La première activité commence à neuf heures trente.</p>
<p>Le midi</p>
<p>Le repas est pris en commun dans la grande salle. Chaque moniteur mange avec son groupe. Le temps de midi comprend aussi un moment calme, pendant lequel les enfants peuvent lire ou jouer à des jeux de table.</p>
<p>L'après-midi</p>
<p>Les activités reprennent à quatorze heures. Les moniteurs se répartissent les groupes selon les ateliers proposés. Le goûter est servi à seize heures et les parents arrivent à partir de seize heures trente.</p>
<p>Le centre de vacances est agréé par l'Office de la naissance et de l'enfance. L'encadrement est assuré par du personnel qualifié et le taux d'encadrement respecte la réglementation en vigueur.</p>
</div>
</details>
<h2 id="m3-quiz">Teste-toi, module 3</h2>
<div class="quiz" id="quiz3"></div>
</div>
</main>
</div>
<footer class="pied">
<div class="pied__interieur">
<p>Cours de traitement de texte, 3e année Techniques sociales et d'animation. M. Courcelle, 2026-2027.</p>
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
</div>
</footer>
<script src="../../assets/atelier-texte.js"></script>
<script src="../../assets/atelier-m3-m4.js"></script>
</body>
</html>
3tq-technique-sociale/module4/index.html
+236
View File
@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 4 — 3e TQ Technique sociale</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/theme.css">
<link rel="stylesheet" href="../../assets/atelier-texte.css">
<link rel="stylesheet" href="../../assets/atelier-m3-m4.css">
</head>
<body class="classe-ts">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">3e TQ Technique sociale</a><span aria-hidden="true">/</span><strong>Module 4</strong>
</nav>
<h1>Mise en page et impression</h1>
<p class="entete__meta">Traitement de texte · marges, sauts de page, en-tête, PDF</p>
</div>
</header>
<div class="wrap">
<nav class="sommaire-lat" aria-label="Sommaire">
<a class="top" href="#haut">Module 4</a>
<h2>Module 4, mise en page</h2>
<a href="#m4-page">La page</a>
<a href="#m4-saut">Le saut de page</a>
<a href="#m4-entete">En-tête et pied de page</a>
<a href="#m4-champs">Les champs</a>
<a href="#m4-sortir">Vérifier et imprimer</a>
<a href="#m4-textes">Textes à saisir</a>
<a href="#m4-quiz">Teste-toi</a>
<h2>Autres modules</h2>
<a href="../index.html">Tous les modules de la classe</a>
<a href="../module3/index.html">Module 3, mettre en forme</a>
</nav>
<main class="feuille" id="haut">
<div class="regle" aria-hidden="true"></div>
<div class="inner">
<p class="chapeau">Le module 3 travaillait à l'intérieur de la page. Celui-ci travaille sur la page
elle-même : son format, ses marges, l'endroit où elle se coupe, ce qui se répète en haut et en bas,
et la façon dont le document sort de l'ordinateur.</p>
<h2 id="m4-page"><span class="module-tag">Module 4</span><br>La page</h2>
<p>Trois réglages définissent une page, et ils se trouvent tous au même endroit : Format, puis Style de page.</p>
<p>Déplace les curseurs : la zone bleue est celle où ton texte peut s'écrire.</p>
<div class="at-mise">
<div>
<div class="at-page" id="at-page"><div class="at-page__zone" id="at-page-zone"></div></div>
<p class="at-page__note" id="at-page-note"></p>
</div>
<div class="at-barre">
<div>
<label>Orientation</label>
<div class="at-aligns" id="at-orient">
<button type="button" data-v="portrait" aria-pressed="true">Portrait</button>
<button type="button" data-v="paysage" aria-pressed="false">Paysage</button>
</div>
</div>
<div>
<label for="at-m-haut">Marge du haut : <output id="at-m-haut-v">2</output> cm</label>
<input type="range" id="at-m-haut" min="0.5" max="5" step="0.5" value="2">
</div>
<div>
<label for="at-m-bas">Marge du bas : <output id="at-m-bas-v">2</output> cm</label>
<input type="range" id="at-m-bas" min="0.5" max="5" step="0.5" value="2">
</div>
<div>
<label for="at-m-gauche">Marge de gauche : <output id="at-m-gauche-v">2</output> cm</label>
<input type="range" id="at-m-gauche" min="0.5" max="5" step="0.5" value="2">
</div>
<div>
<label for="at-m-droite">Marge de droite : <output id="at-m-droite-v">2</output> cm</label>
<input type="range" id="at-m-droite" min="0.5" max="5" step="0.5" value="2">
</div>
<div>
<label>Zones répétées</label>
<label class="at-case"><input type="checkbox" id="at-entete"> en-tête</label>
<label class="at-case"><input type="checkbox" id="at-pied"> pied de page</label>
</div>
</div>
</div>
<div class="regle-cle">
<p>Format A4 en Belgique, 21 sur 29,7 cm. Deux centimètres de marge conviennent à presque tout. En dessous de 1,5 cm, certaines imprimantes coupent le texte. Pour un document à perforer, 2,5 cm à gauche.</p>
</div>
<figure>
<img src="../images/m4-style-page.png" alt="Boîte de dialogue Style de page"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;3tq-technique-sociale/images/m4-style-page.png&lt;/code&gt;&lt;br&gt;Boîte Format, Style de page, onglet Page : format, orientation et les quatre marges.&lt;/div&gt;'">
<figcaption>Format, puis Style de page, onglet Page.</figcaption>
</figure>
<h2 id="m4-saut">Le saut de page</h2>
<p>Deux façons de faire commencer un titre en haut d'une page. Une seule tient la route.</p>
<p>Clique sur le bouton : une phrase s'ajoute au début du texte, comme quand tu complètes un document déjà écrit.</p>
<div class="actions">
<button type="button" id="at-flux-plus" class="plein">Ajouter une phrase au début</button>
<button type="button" id="at-flux-reset">Remettre à zéro</button>
</div>
<div class="at-duo">
<div>
<h4>Lignes vides jusqu'à la page suivante</h4>
<div class="at-flux" id="at-flux-vides"></div>
</div>
<div>
<h4>Saut de page avec <code>Ctrl+Entrée</code></h4>
<div class="at-flux" id="at-flux-saut"></div>
</div>
</div>
<p>À gauche, le titre glisse au milieu de la page 2 et il faudra supprimer des lignes vides une à une. À droite, il reste en haut de la page 2, quoi que tu ajoutes avant.</p>
<div class="regle-cle">
<p><code>Ctrl+Entrée</code> pour changer de page. Pour supprimer un saut, place le curseur juste en dessous du trait pointillé et appuie sur Retour arrière.</p>
</div>
<h2 id="m4-entete">En-tête et pied de page</h2>
<p>L'en-tête est une zone en haut de chaque page, le pied de page une zone en bas. Ce qu'on y écrit se répète automatiquement sur toutes les pages. On y met ce qui identifie le document : son titre, l'organisme, la date, le numéro de page.</p>
<p>Pour activer : Insertion, puis En-tête et pied de page, puis En-tête ou Pied de page, puis Style par défaut.</p>
<p>Dans ces zones, la touche <code>Tab</code> saute au centre, une seconde fois à droite. Les taquets y sont déjà posés : tu n'as rien à régler, et surtout rien à aligner à la barre d'espace.</p>
<div class="regle-cle">
<p>Si tu retapes le titre en haut de chaque page dans le corps du texte, tout est faux dès que le texte se décale d'une ligne.</p>
</div>
<figure>
<img src="../images/m4-entete.png" alt="Zone d'en-tête active dans Writer"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;3tq-technique-sociale/images/m4-entete.png&lt;/code&gt;&lt;br&gt;Haut de page avec la zone d\'en-tête active, séparée du corps du texte.&lt;/div&gt;'">
<figcaption>La zone d'en-tête, active.</figcaption>
</figure>
<h2 id="m4-champs">Les champs</h2>
<p>Certaines informations ne se tapent pas : le logiciel les insère et les tient à jour. On les appelle des champs. À l'écran, ils apparaissent sur un fond grisé qui ne s'imprime pas.</p>
<table>
<tr><th>Champ</th><th>Où le trouver</th></tr>
<tr><td>Numéro de page</td><td>Insertion, Numéro de page</td></tr>
<tr><td>Nombre de pages</td><td>Insertion, Champ, Nombre de pages</td></tr>
<tr><td>Date</td><td>Insertion, Champ, Date</td></tr>
<tr><td>Nom du fichier</td><td>Insertion, Champ, Nom de fichier</td></tr>
</table>
<p>Ajoute des pages au document imaginaire ci-dessous et compare les deux pieds de page.</p>
<div class="actions">
<button type="button" id="at-page-plus" class="plein">Ajouter une page</button>
<button type="button" id="at-page-reset">Remettre à 4 pages</button>
</div>
<div class="at-duo">
<div>
<h4>Numéro tapé à la main</h4>
<div class="at-pied" id="at-pied-main"></div>
</div>
<div>
<h4>Numéro inséré comme champ</h4>
<div class="at-pied" id="at-pied-champ"></div>
</div>
</div>
<p id="at-champ-note"></p>
<h2 id="m4-sortir">Vérifier et imprimer</h2>
<p>L'écran ment : il n'affiche pas la taille réelle et ne montre pas où les pages se coupent. L'aperçu, lui, montre le document tel qu'il sortira. Menu Fichier, puis Aperçu, ou <code>Ctrl+Maj+O</code>.</p>
<p>Ce qu'on regarde dans l'aperçu :</p>
<ul>
<li>une page se termine-t-elle par un titre seul, sans texte en dessous ?</li>
<li>une page commence-t-elle par une seule ligne isolée ?</li>
<li>l'en-tête et le pied figurent-ils sur toutes les pages ?</li>
<li>reste-t-il une page presque vide ?</li>
<li>les marges sont-elles régulières ?</li>
</ul>
<p>Dans la fenêtre d'impression, <code>Ctrl+P</code>, trois réglages servent souvent : choisir les pages à imprimer en tapant par exemple 2-3, imprimer plusieurs pages sur une feuille pour relire sans gâcher de papier, et choisir le nombre d'exemplaires.</p>
<div class="regle-cle">
<p>Le PDF pour envoyer, le .odt pour garder. Exporter ne remplace pas enregistrer : sans ton fichier modifiable, tu ne pourras plus rien corriger.</p>
</div>
<p>Pour exporter : Fichier, Exporter vers, Exporter au format PDF.</p>
<h2 id="m4-textes">Textes à saisir</h2>
<p>Les textes des exercices. Le document se construit d'un exercice à l'autre : tu repars à chaque fois du fichier précédent.</p>
<details><summary>Exercice 1, la fiche d'information</summary>
<div class="specimen">
<p>Fiche d'information à destination des parents</p>
<p>La crèche Les Petits Pas accueille les enfants de deux mois et demi à trois ans. Elle dispose de trente-six places réparties en trois sections selon l'âge des enfants. L'équipe se compose de puéricultrices, d'une infirmière et d'une directrice.</p>
<p>Les inscriptions se prennent à partir du quatrième mois de grossesse. Une visite des locaux est organisée avant toute inscription définitive. Elle permet de rencontrer l'équipe et de poser les questions pratiques liées à l'arrivée de l'enfant.</p>
<p>La participation financière des parents est calculée sur la base des revenus du ménage, selon le barème fixé par l'Office de la naissance et de l'enfance. Une attestation fiscale est délivrée chaque année pour les frais de garde.</p>
<p>La crèche est ouverte de sept heures à dix-huit heures trente, du lundi au vendredi. Elle est fermée les jours fériés légaux, entre Noël et Nouvel An, ainsi que trois semaines en été. Les dates de fermeture sont communiquées aux parents en début d'année.</p>
</div>
</details>
<details><summary>Exercice 2, les trois sections à ajouter</summary>
<div class="specimen">
<p>Le déroulement d'une journée</p>
<p>L'accueil du matin se fait de sept heures à neuf heures. Chaque enfant est remis à une puéricultrice de sa section, avec les informations utiles de la nuit et du petit-déjeuner. Les activités d'éveil occupent la fin de la matinée.</p>
<p>Le repas de midi est préparé sur place par une cuisinière. Les menus sont affichés à l'entrée et adaptés à l'âge des enfants. La sieste suit le repas et dure jusqu'à quinze heures pour les plus jeunes.</p>
<p>Le matériel à fournir</p>
<p>Les parents fournissent les langes, les vêtements de rechange, le doudou et la tétine si l'enfant en utilise. Tout est marqué au nom de l'enfant. Les biberons sont préparés par la crèche pour les enfants qui ne sont pas allaités.</p>
<p>Les vêtements de rechange sont vérifiés chaque semaine par l'équipe. Un message est adressé aux parents lorsque le stock est insuffisant.</p>
<p>En cas de maladie</p>
<p>Un enfant fiévreux ou contagieux ne peut pas être accueilli. Les parents sont prévenus dès l'apparition des symptômes et viennent le chercher dans les meilleurs délais.</p>
<p>Aucun médicament n'est administré sans prescription médicale écrite. Les vaccinations obligatoires doivent être à jour et le carnet de vaccination est présenté à l'inscription.</p>
</div>
</details>
<h2 id="m4-quiz">Teste-toi, module 4</h2>
<div class="quiz" id="quiz4"></div>
</div>
</main>
</div>
<footer class="pied">
<div class="pied__interieur">
<p>Cours de traitement de texte, 3e année Techniques sociales et d'animation. M. Courcelle, 2026-2027.</p>
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
</div>
</footer>
<script src="../../assets/atelier-texte.js"></script>
<script src="../../assets/atelier-m3-m4.js"></script>
</body>
</html>
assets/atelier-m3-m4.css
+80
View File
@@ -0,0 +1,80 @@
/* =====================================================================
atelier-m3-m4.css
Styles propres aux interactions des modules 3 et 4.
Additif : ne redéfinit aucune classe de theme.css ni d'atelier-texte.css.
Tous les sélecteurs sont préfixés par at- pour éviter toute collision.
Les couleurs reprennent les variables du thème quand elles existent,
avec une valeur de repli sinon.
===================================================================== */
.at-badge{
display:inline-block;width:1.15rem;height:1.15rem;line-height:1.15rem;
text-align:center;font-size:.72rem;font-weight:700;
color:var(--papier,#fff);margin-right:.4rem;vertical-align:.05rem;
}
.at-badge--c{background:var(--repere,#2A6179)}
.at-badge--p{background:#7A5B12}
/* ---------- barre de réglages ---------- */
.at-barre{
background:#F1F4F6;border:1px solid var(--trait,#CBD4DB);
padding:.8rem 1rem;
display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
gap:.7rem 1.2rem;font-size:.9rem;
}
.at-barre label{display:block;font-size:.84rem;color:var(--encre-clair,#4A5866);margin-bottom:.15rem}
.at-barre label.at-case{display:inline-block;font-size:.9rem;color:var(--encre,#16202B);margin-right:.8rem}
.at-barre select,.at-barre input[type=range]{width:100%;font:inherit;font-size:.9rem}
.at-atelier{border:1px solid var(--trait,#CBD4DB);margin:1.2rem 0}
.at-atelier .at-barre{border:0;border-bottom:1px solid var(--trait,#CBD4DB)}
.at-atelier__corps{padding:1.4rem 1.2rem;background:var(--papier,#fff)}
#at-apercu{font-family:Cambria,Georgia,serif}
.at-aligns{display:flex;gap:.3rem;flex-wrap:wrap}
.at-aligns button{padding:.25rem .5rem;font-size:.85rem}
.at-aligns button[aria-pressed="true"]{background:var(--repere,#2A6179);color:var(--papier,#fff)}
/* ---------- tri caractère / paragraphe ---------- */
.at-tri{display:grid;grid-template-columns:1fr auto auto;gap:.3rem .5rem;align-items:center;max-width:64ch;font-size:.95rem}
.at-tri__lib{padding:.25rem 0}
.at-tri button{padding:.2rem .6rem;font-size:.85rem}
.at-tri__lib.est-juste{color:var(--juste,#1E7A4C);font-weight:600}
.at-tri__lib.est-faux{color:var(--erreur,#B03A2E)}
.at-score{font-weight:600;margin-top:.6rem}
/* ---------- comparaison en deux colonnes ---------- */
.at-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.at-duo h4{margin:0 0 .4rem;font-size:.88rem;color:var(--encre-clair,#4A5866);font-weight:600}
@media(max-width:700px){.at-duo{grid-template-columns:1fr}}
/* ---------- simulation de flux de pages (module 4) ---------- */
.at-flux{
column-count:2;column-gap:1rem;column-rule:1px dashed #9AA8B2;
height:13rem;overflow:hidden;background:#FBFCFC;
border:1px solid var(--trait,#CBD4DB);padding:.8rem 1rem;
font-family:Cambria,Georgia,serif;font-size:.82rem;line-height:1.5;
}
.at-flux p{margin:0 0 .5rem}
.at-flux h5{margin:0 0 .4rem;font-size:.95rem;font-family:inherit;font-weight:700}
.at-flux h5.at-saut{break-before:column;-webkit-column-break-before:always}
/* ---------- feuille A4 réglable (module 4) ---------- */
.at-mise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.4rem;align-items:start;margin:1.2rem 0}
@media(max-width:700px){.at-mise{grid-template-columns:1fr}}
.at-page{
border:1px solid var(--encre-clair,#4A5866);background:var(--papier,#fff);
width:min(16rem,100%);aspect-ratio:210/297;margin:0 auto;position:relative;
}
.at-page--paysage{aspect-ratio:297/210;width:min(22rem,100%)}
.at-page__zone{position:absolute;background:var(--repere-clair,#E3EDF1);border:1px dashed var(--repere,#2A6179)}
.at-page__bande{
position:absolute;left:0;right:0;background:#FDF3E3;
border-top:1px solid #D08C3A;border-bottom:1px solid #D08C3A;
font-size:.6rem;text-align:center;color:#9C4221;
}
.at-page__note{text-align:center;font-size:.85rem;color:var(--encre-clair,#4A5866);margin-top:.6rem}
/* ---------- champ contre texte tapé ---------- */
.at-pied{font-family:Cambria,Georgia,serif;border:1px solid var(--trait,#CBD4DB);padding:.9rem 1rem;background:#FBFCFC}
.at-champ{background:#E4EAEE}
assets/atelier-m3-m4.js
+250
View File
@@ -0,0 +1,250 @@
/* =====================================================================
atelier-m3-m4.js
Interactions des modules 3 et 4. À charger APRÈS atelier-texte.js.
Chaque bloc ne s'exécute que si son conteneur existe dans la page,
donc le fichier peut être chargé par les deux modules indifféremment.
===================================================================== */
(function(){
"use strict";
/* Réutilise le quiz d'atelier-texte.js s'il est disponible.
Sinon, produit le même balisage, pour que la page reste utilisable. */
const poserQuiz = (typeof window.quiz === 'function') ? window.quiz : function(el, questions){
if(!el) return;
el.innerHTML = questions.map(function(q,i){
return '<div class="q" data-i="'+i+'"><p>'+(i+1)+'. '+q.q+'</p>'
+ q.r.map(function(r,j){
return '<label><input type="radio" name="'+el.id+'-'+i+'" value="'+j+'">'+r+'</label>';
}).join('')
+ '<div class="verdict"></div></div>';
}).join('');
el.addEventListener('change', function(e){
const bloc = e.target.closest('.q');
const i = +bloc.dataset.i, q = questions[i];
bloc.querySelectorAll('label').forEach(function(l,j){
l.className = (j === q.b) ? 'bon' : (l.querySelector('input').checked ? 'mauvais' : '');
});
bloc.querySelector('.verdict').textContent = (+e.target.value === q.b ? 'Exact. ' : 'Non. ') + q.e;
});
};
/* =====================================================================
MODULE 3
===================================================================== */
/* ---------- tri caractère ou paragraphe ---------- */
const triEl = document.getElementById('at-tri');
if(triEl){
const CP = [
["Mettre un mot en gras","c"],
["Centrer un titre","p"],
["Changer la police","c"],
["Justifier le texte","p"],
["Mettre en italique","c"],
["Ajouter un retrait de première ligne","p"],
["Changer la couleur du texte","c"],
["Encadrer d'une bordure","p"],
["Régler l'interligne","p"],
["Mettre en exposant","c"],
["Espacer deux paragraphes","p"],
["Changer la taille en points","c"]
];
const scoreEl = document.getElementById('at-tri-score');
let faits = {};
function rendre(){
triEl.innerHTML = CP.map(function(r,i){
const etat = faits[i];
const cls = etat === undefined ? '' : (etat ? ' est-juste' : ' est-faux');
return '<div class="at-tri__lib'+cls+'">'+r[0]+'</div>'
+ '<button type="button" data-i="'+i+'" data-v="c">C</button>'
+ '<button type="button" data-i="'+i+'" data-v="p">P</button>';
}).join('');
const n = Object.keys(faits).length;
const bons = Object.keys(faits).filter(function(k){return faits[k];}).length;
scoreEl.textContent = n
? bons+' sur '+n+' classés correctement'
+ (n === CP.length ? (bons === CP.length ? '. Tout juste.' : '. Reprends ceux en rouge.') : '')
: '';
}
triEl.addEventListener('click', function(e){
const b = e.target.closest('button'); if(!b) return;
const i = +b.dataset.i;
faits[i] = (b.dataset.v === CP[i][1]);
rendre();
});
document.getElementById('at-tri-reset').addEventListener('click', function(){ faits = {}; rendre(); });
rendre();
}
/* ---------- atelier de mise en forme ---------- */
const apercu = document.getElementById('at-apercu');
if(apercu){
const paras = Array.prototype.slice.call(apercu.querySelectorAll('p'));
const val = function(id){ return document.getElementById(id).value; };
const coche = function(id){ return document.getElementById(id).checked; };
function maj(){
const taille = val('at-taille'), retrait = val('at-retrait'), espace = val('at-espace');
document.getElementById('at-taille-v').textContent = taille;
document.getElementById('at-retrait-v').textContent = (+retrait).toFixed(2).replace('.',',');
document.getElementById('at-espace-v').textContent = (+espace).toFixed(1).replace('.',',');
const align = document.querySelector('#at-align button[aria-pressed="true"]').dataset.v;
const bord = coche('at-bordure');
apercu.style.fontFamily = val('at-police');
apercu.style.fontSize = taille + 'pt';
apercu.style.fontWeight = coche('at-gras') ? '700' : '400';
apercu.style.fontStyle = coche('at-italique') ? 'italic' : 'normal';
paras.forEach(function(p){
p.style.textAlign = align;
p.style.textIndent = retrait + 'cm';
p.style.marginBottom = espace + 'cm';
p.style.lineHeight = val('at-interligne');
p.style.border = bord ? '1px solid #B8912A' : 'none';
p.style.background = bord ? '#FEFAEC' : 'transparent';
p.style.padding = bord ? '.4rem .6rem' : '0';
});
}
['at-police','at-taille','at-retrait','at-espace','at-interligne','at-bordure','at-gras','at-italique']
.forEach(function(id){ document.getElementById(id).addEventListener('input', maj); });
document.getElementById('at-align').addEventListener('click', function(e){
const b = e.target.closest('button'); if(!b) return;
document.querySelectorAll('#at-align button').forEach(function(x){ x.setAttribute('aria-pressed','false'); });
b.setAttribute('aria-pressed','true');
maj();
});
maj();
}
/* ---------- quiz module 3 ---------- */
poserQuiz(document.getElementById('quiz3'), [
{q:"Tu poses le curseur dans un mot, sans rien sélectionner, et tu cliques sur Centrer. Que se passe-t-il&nbsp;?",
r:["Seul le mot se centre","Tout le paragraphe se centre","Rien ne se passe"],
b:1, e:"L'alignement est une mise en forme de paragraphe : elle s'applique au paragraphe entier, sans sélection."},
{q:"Comment sépares-tu deux paragraphes&nbsp;?",
r:["Par une ligne vide, avec la touche Entrée","Par un espacement après le paragraphe","Par plusieurs touches Entrée"],
b:1, e:"Le réglage d'espacement se modifie d'un seul geste sur tout le document. Une ligne vide, non."},
{q:"Quelle taille convient à un texte courant&nbsp;?",
r:["8 points","10 à 12 points","16 points"],
b:1, e:"En dessous on ne lit plus. Au-dessus, le document semble destiné aux malvoyants, ce qui est parfois exactement le but."},
{q:"À quoi sert le pinceau de la barre d'outils&nbsp;?",
r:["À colorier le texte","À reproduire une mise en forme ailleurs","À effacer le texte"],
b:1, e:"Cloner le formatage. Un clic pour une seule application, un double-clic pour en enchaîner plusieurs."},
{q:"Tu colles un texte venu d'un site et il arrive avec sa mise en forme. Le plus simple&nbsp;?",
r:["Le coller avec Ctrl+Maj+V en texte non formaté","Le retaper","Changer la police à la main"],
b:0, e:"Et si c'est déjà collé, Ctrl+M efface le formatage direct."},
{q:"Où trouve-t-on la couleur de fond d'un paragraphe&nbsp;?",
r:["Format, Caractère","Format, Paragraphe, onglet Zone","Format, Style de page"],
b:1, e:"L'onglet Zone, appelé Arrière-plan dans les versions plus anciennes. Un fond clair, sinon le texte devient illisible."}
]);
/* =====================================================================
MODULE 4
===================================================================== */
/* ---------- feuille A4 et marges ---------- */
const page = document.getElementById('at-page');
if(page){
const zone = document.getElementById('at-page-zone');
const note = document.getElementById('at-page-note');
function majPage(){
const paysage = document.querySelector('#at-orient button[aria-pressed="true"]').dataset.v === 'paysage';
page.classList.toggle('at-page--paysage', paysage);
const L = paysage ? 29.7 : 21, H = paysage ? 21 : 29.7;
const m = {};
['haut','bas','gauche','droite'].forEach(function(k){
m[k] = +document.getElementById('at-m-'+k).value;
document.getElementById('at-m-'+k+'-v').textContent = String(m[k]).replace('.',',');
});
zone.style.top = (m.haut/H*100)+'%';
zone.style.bottom = (m.bas/H*100)+'%';
zone.style.left = (m.gauche/L*100)+'%';
zone.style.right = (m.droite/L*100)+'%';
zone.innerHTML = '';
if(document.getElementById('at-entete').checked){
zone.insertAdjacentHTML('beforeend','<div class="at-page__bande" style="top:0">en-tête</div>');
}
if(document.getElementById('at-pied').checked){
zone.insertAdjacentHTML('beforeend','<div class="at-page__bande" style="bottom:0">pied de page</div>');
}
let t = 'Zone de texte : '
+ (L - m.gauche - m.droite).toFixed(1).replace('.',',') + ' cm sur '
+ (H - m.haut - m.bas).toFixed(1).replace('.',',') + ' cm.';
if(m.gauche < 1.5 || m.droite < 1.5 || m.haut < 1.5 || m.bas < 1.5){
t += ' Attention, en dessous de 1,5 cm certaines imprimantes coupent le texte.';
}
note.textContent = t;
}
['at-m-haut','at-m-bas','at-m-gauche','at-m-droite','at-entete','at-pied']
.forEach(function(id){ document.getElementById(id).addEventListener('input', majPage); });
document.getElementById('at-orient').addEventListener('click', function(e){
const b = e.target.closest('button'); if(!b) return;
document.querySelectorAll('#at-orient button').forEach(function(x){ x.setAttribute('aria-pressed','false'); });
b.setAttribute('aria-pressed','true');
majPage();
});
majPage();
}
/* ---------- lignes vides contre saut de page ---------- */
const fluxA = document.getElementById('at-flux-vides');
if(fluxA){
const fluxB = document.getElementById('at-flux-saut');
const CORPS = "La crèche Les Petits Pas accueille les enfants de deux mois et demi à trois ans. Elle dispose de trente-six places réparties en trois sections. Les inscriptions se prennent à partir du quatrième mois de grossesse. Une visite des locaux est organisée avant toute inscription.";
const SUITE = "L'accueil du matin se fait de sept heures à neuf heures. Chaque enfant est remis à une puéricultrice de sa section.";
const AJOUT = "Une réunion de parents est organisée chaque année en septembre.";
let ajouts = 0;
function rendreFlux(){
let tete = '';
for(let i = 0; i < ajouts; i++){ tete += '<p>'+AJOUT+'</p>'; }
const vides = new Array(7).join('<p>&nbsp;</p>');
fluxA.innerHTML = "<h5>Fiche d'information</h5>" + tete + '<p>'+CORPS+'</p>' + vides
+ "<h5>Le déroulement d'une journée</h5><p>"+SUITE+"</p>";
fluxB.innerHTML = "<h5>Fiche d'information</h5>" + tete + '<p>'+CORPS+'</p>'
+ "<h5 class=\"at-saut\">Le déroulement d'une journée</h5><p>"+SUITE+"</p>";
}
document.getElementById('at-flux-plus').addEventListener('click', function(){ if(ajouts < 4){ ajouts++; rendreFlux(); } });
document.getElementById('at-flux-reset').addEventListener('click', function(){ ajouts = 0; rendreFlux(); });
rendreFlux();
}
/* ---------- numéro tapé contre champ inséré ---------- */
const piedMain = document.getElementById('at-pied-main');
if(piedMain){
const piedChamp = document.getElementById('at-pied-champ');
const noteChamp = document.getElementById('at-champ-note');
let nb = 4;
function rendreChamp(){
piedMain.innerHTML = 'Document mis à jour en septembre 2026 &nbsp;&nbsp;&nbsp; Page 1 sur 4';
piedChamp.innerHTML = 'Document mis à jour en septembre 2026 &nbsp;&nbsp;&nbsp; Page '
+ '<span class="at-champ">1</span> sur <span class="at-champ">'+nb+'</span>';
noteChamp.textContent = (nb === 4)
? "Le document compte 4 pages. Les deux pieds de page disent la même chose. Ajoute une page."
: "Le document compte maintenant " + nb + " pages. À gauche, le total est faux et il faudra le corriger sur chaque page. À droite, il s'est recalculé tout seul.";
}
document.getElementById('at-page-plus').addEventListener('click', function(){ if(nb < 12){ nb++; rendreChamp(); } });
document.getElementById('at-page-reset').addEventListener('click', function(){ nb = 4; rendreChamp(); });
rendreChamp();
}
/* ---------- quiz module 4 ---------- */
poserQuiz(document.getElementById('quiz4'), [
{q:"Comment fais-tu commencer un titre en haut de la page suivante&nbsp;?",
r:["En appuyant plusieurs fois sur Entrée","Avec Ctrl+Entrée","En agrandissant les marges"],
b:1, e:"Le saut de page manuel tient, même si tu ajoutes du texte avant. Les lignes vides, non."},
{q:"Où règle-t-on les marges d'un document&nbsp;?",
r:["Format, Paragraphe","Format, Style de page","Insertion, En-tête"],
b:1, e:"La marge définit où commence la zone de texte. Le retrait, lui, éloigne un paragraphe du bord de cette zone."},
{q:"Tu tapes le numéro 1 dans le pied de page de la première page. Que voit-on page 3&nbsp;?",
r:["Le numéro 3","Le numéro 1","Rien"],
b:1, e:"Un texte tapé se répète tel quel sur toutes les pages. Il faut insérer un champ, pas un chiffre."},
{q:"À quoi sert l'aperçu avant impression&nbsp;?",
r:["À imprimer plus vite","À voir le document tel qu'il sortira de l'imprimante","À corriger l'orthographe"],
b:1, e:"On y vérifie les coupures de page, les en-têtes et l'équilibre général. Avant d'imprimer, pas après."},
{q:"Tu envoies un courrier terminé aux parents. Quel format&nbsp;?",
r:["Le PDF","Le fichier .odt","Une capture d'écran"],
b:0, e:"Le PDF est figé : le destinataire le voit comme tu l'as fait. Tu gardes ton .odt pour pouvoir le modifier."},
{q:"Dans un en-tête, comment places-tu un texte à droite&nbsp;?",
r:["Avec des espaces","Avec la touche Tab","En agrandissant la marge"],
b:1, e:"Les taquets sont déjà posés dans l'en-tête : une fois Tab pour le centre, deux fois pour la droite."}
]);
})();