Here is everything, there's quite a lot.. but i hope it helps you find the problem
osgood_
Index :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Astuces pour dys: les différents dys</title>
<link href="styles/responsive.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/andika:n4:default.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<header>
<h1> Astuces pour Dys </h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks" >
<li><a href="index.html" class="thispage">Page d'acceuil</a></li>
<li><a href="differentsdys.html" >Les différents Dys</a></li>
<li><a href="livresdys.html">Livres Dys, maisons d'éditions dys</a></li>
<li><a href="materieladapte.html">Matériel adapté</a></li>
<li><a href="#">revue de presse</a></li>
</ul>
</nav>
</header>
<div id="hero">
<img src="part4/gif/octopus-idle.gif" width="450" height="300" alt=""/>
<p>Astuces pour Dys vous tient informés des dernières astuces pour les Dys.</p>
</div>
<main>
<h2>La petite histoire</h2>
<p>Ce site a été créé pour la page Facebook <span style="font-size: 1em; font-style: bold; font-weight: 400;">Astuces pour Dys </span>et pour sa créatrice Françoise Chée. Vous pourrez retrouver toutes les informations nécessaires à la compréhention de votre enfant atteint de troubles Dys, ou juste assouvir votre curiosité et en apprendre plus sur les handicaps invisibles souvent méconnus ou dénigrés. </p>
<figure><img src="part4/images/logo dys.jpg" width="200" height="200" alt=""/>
<figcaption>Logo handicap DYS créé par Françoise Chée</figcaption>
</figure>
<p >Cette passion est née d'une maman d'enfant dys, qui a voulu créé une <a href="http://www.facebook.com/astucespourdys">page Facebook</a> pour partager son expérience et ses astuces avec une autre maman à la base. Puis j'ai ouvert cette page à d'autres personnes et me suis associée au groupe Dyscussions Parents Professeurs. Une merveilleuse rencontre virtuelle ... qui réunit aujourd'hui plus de 64 000 personnes, et qui continue de grandir: c'est pourquoi Facebook ne suffisait plus pour porter assistance à une telle communauté. </p>
</main>
<aside>
<h2>Le site: comment?</h2>
<p>C'est pourquoi nous sommes ici! Ce site est fait de manière bénévole par <strong>Alexandra MANSUY</strong>, élève d'ESIEE Paris, qui est toujours en apprentissage, donc le site s'améliorera ultérieurement. Pour plus de contenu,voici <a href="http://www.astucespourdys.com"> le WORDPRESS d'Astuces pour dys</a>.
</p>
<p style="font-size: 1em; color: #CD0003;">Pour commencer la navigation sur le site, cliquez sur les menus en haut de la page, et plongez dans l'univers des Dys! Amusez-vous à passer votre souris sur les images!</p>
</aside>
<footer>
<p>Si vous avez des questions concernant les Dys, contactez la page facebook Astuces pour Dys, et pour les questions concernant le site, ou si vous voulez prendre contact avec la créatrice, envoyez un mail à l'adresse : alexandram9a@gmail.com</p>
</footer>
<script>
var menulink = document.querySelector('#menulink'),
var menu = document.querySelector('#navlinks');
menulink.addEventListener('click', controlMenu);
function controlMenu() {
if(menu.className === 'displayed') {
menu.className = 'collapsed';
}
else {
menu.className = 'displayed';
}
}
window.addEventListener('resize', resize);
function resize() {
if (window.innerWidth < 700) {
menu.className = 'collapsed';
}
}
</script>
</div>
</body>
</html>
1ST PAGE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Astuces pour dys: les différents dys</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/andika:n4:default.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Astuces pour Dys</h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks">
<li><a href="index.html">Page d'acceuil</a></li>
<li><a href="differentsdys.html" class="thispage">Les différents Dys</a></li>
<li><a href="LivresDys.html">Livres Dys, maisons d'éditions Dys</a></li>
<li><a href="materieladapte.html">Matériel adapté</a></li>
<li><a href="#">revue de pressse </a></li>
</ul>
</nav>
<div id="octo">
<img src="part4/gif/octopus intro intro.gif" width="450" height="300" alt=""/>
</div>
</header>
<aside>
<h2>LES DIFFÉRENTS DYS</h2>
<p>trouverez les définitions des différents Dys ainsi que des liens vers les principales solutions pratiques adaptées.</p>
</aside>
<main>
<h2>La Dysgraphie</h2>
<h4>La Dysgraphie, c'est quoi? </h4>
<a href="https://astucespourdys.com/"><img src="part4/images/pieuvre rose.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Lien vers le Wordpress Astucespourdys, cliquez sur la pieuvre!</figcaption>
<p>La dysgraphie est un problème d’écriture dans lequel <strong>les enfants ne parviennent pas à organiser et à coordonner leur écriture</strong>, ce qui la rend difficilement compréhensible. Ce trouble concerne environ 10 % des enfants, et surtout des garçons.</p>
<h2>La Dyphasie</h2>
<img src="part4/images/dysphasie def.jpg" width="900" height="450" alt=""/>
<figure>
<figcaption>La Dysphasie, c'est quoi?</figcaption>
</figure>
<a href="https://fr.wikipedia.org/wiki/Dysphasie"><img src="part4/images/pieuvre verte clair.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Cliquez sur la pieuvre pour plus d'informations sur la dysphasie</figcaption>
<p>C’est un trouble structurel primaire (et donc durable) de l’apprentissage et du développement du langage oral. Elle se traduit par un déficit limité uniquement au domaine langagier. Il faut donc la différencier des troubles fonctionnels (retard dans le développement du langage), qui, eux, sont réversibles.<br>
Environ 2 % de la population française est touchée, en majorité les garçons.</p>
<h2>La Dysorthographie</h2>
<a href="https://fr.wikipedia.org/wiki/Dysorthographie"><img src="part4/images/pieuvre rouge.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Cliquez sur la pieuvre pour avoir plus d'informations sur la dysorthographie</figcaption>
<p>La dysorthographie se définit comme un <strong>trouble de l’acquisition de l’orthographe</strong>. Ce problème d’apprentissage se traduit à l’écrit par des difficultés :</p>
<ul>
<li>à respecter l’orthographe des mots :</li>
<li >fautes d’orthographe ;</li>
<li>découpages anarchiques des mots avec des mots collés (« unabit » pour « un habit ») </li>
<li>disparition ou transformation de certains sons (« fagile » pour « fragile ») ou syllabes (« vragile ») ;</li>
<li>ajout de lettres ou de syllabes ;</li>
<li>inversion (« fargile »).</li>
<li >à recopier un texte.</li>
<li>à conjuguer et à faire l’accord correctement dans le groupe nominal et le groupe verbal.</li>
<li>à organiser des phrases syntaxiquement correctes.</li>
</ul>
<h2 >La Dyslexie</h2>
<figure><img src="part4/images/Dyslexie def.jpg" alt="" width="1000" height="400" class="grayscale"/>
<figcaption>La Dyslexie, c'est quoi?</figcaption></figure>
<a href="https://fr.wikipedia.org/wiki/Dyslexie"><img src="part4/images/pieuvre orange.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Cliquez sur la pieuvre pour plus d'informations sur la dyslexie</figcaption>
<p>La dyslexie est une <strong>difficulté d’apprentissage de l’orthographe et de la lecture</strong>. Ce trouble concerne entre 8 et 10 % des enfants et en grande majorité des garçons (trois fois plus que les filles).</p>
<h2>La Dyspraxie</h2>
<figure><img src="part4/images/dyspraxie def.jpg" alt="" width="1000" height="400" class="grayscale"/>
<figcaption>La Dyspraxie, c'est quoi?</figcaption> </figure>
<a href="https://fr.wikipedia.org/wiki/Dyspraxie"><img src="part4/images/pieuvre verte.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Cliquez sur la pieuvre pourn plus d'informations sur la dyspraxie</figcaption>
<p>La dyspraxie et un <strong>trouble de la planification des gestes volontaires, intentionnels</strong>. Ce type de trouble du mouvement ne contrarie en rien les réflexes, car les muscles nécessaires à la réalisation des mouvements fonctionnent normalement.<strong >Bon à savoir</strong> : les grands prématurés présentent d’avantage de risques d’être dyspraxiques que d’autres.</p>
<h2>La Dyscalculie</h2>
<figure><img src="part4/images/dyscalculie def.jpg" alt="" width="1000" height="400" class="grayscale"/>
<figcaption>La Dyscalculie, c'est quoi?</figcaption></figure>
<a href="https://fr.wikipedia.org/wiki/Dyscalculie"><img src="part4/images/pieuvre bleue fonce.jpg" alt="" width="200" height="200" class="pieuvre"/></a>
<figcaption>Cliquez sur la pieuvre pour plus d'informations sur la dyscalculie</figcaption>
<p>La <strong>dyscalculie</strong> est un trouble du langage écrit et scolaire qui porte plus spécifiquement sur les chiffres et le calcul. On observe des <strong>difficultés à comprendre et à utiliser les nombres</strong> :</p>
<ul>
<li>Ce trouble dans les apprentissages numériques apparaît spécifiquement chez les enfants, et ne s’accompagne toutefois d’aucune déficience mentale.</li>
<li>Il n’a aucune origine connue, puisqu’il se retrouve chez des enfants ayant par ailleurs des résultats scolaires normaux et dont l’environnement familial et social est normal.</li>
<li>La dyscalculie concerne aussi bien les filles que les garçons. En France, on estime qu’environ 4 % des enfants sont concernés (dont 20 % de dyslexiques).</li>
</ul>
<p><strong>Bon à savoir</strong> : la dyscalculie est à distinguer de l’<strong style="color: #14388E">acalculie</strong> qui est consécutive à un traumatisme ayant entraîné une lésion cérébrale. La dyscalculie pourrait davantage être liée à un trouble de la mémoire à court terme.</p>
</main>
<script>
var menulink = document.querySelector('#menulink'),
var menu = document.querySelector('#navlinks');
menulink.addEventListener('click', controlMenu);
function controlMenu() {
if(menu.className === 'displayed') {
menu.className = 'collapsed';
}
else {
menu.className = 'displayed';
}
}
window.addEventListener('resize', resize);
function resize() {
if (window.innerWidth < 700) {
menu.className = 'collapsed';
}
}
</script>
</div>
</body>
</html>
2ND PAGE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Astuces pour dys: les différents dys</title>
<link href="styles/responsive.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/andika:n4:default.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<header>
<h1>Astuces pour Dys</h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks">
<li><a href="index.html">Page d'acceuil</a></li>
<li><a href="differentsdys.html ">Les différents Dys</a></li>
<li><a href="LivresDys.html" >Livres Dys, maisons d'éditions Dys</a></li>
<li><a href="materieladapte.html" class="thispage">Matériel adapté</a> </li>
<li><a href="#">Revue de presse </a></li>
</ul>
</nav>
<div id="octo">
<img src="part4/gif/octopus intro intro.gif" width="450" height="300" alt=""/>
</div>
</header>
<aside>
<h2>Matériel adapté: Recherche rapide</h2>
<p><strong>Pour retrouver rapidement le matériel adapté, cliquez sur ces mots clé:</strong> <a href="#stylo">Stylos</a>, <a href="#feutre">Feutres</a>, <a href="#crayon">Crayons</a>, <a href="#surligneur">Surligneurs</a>,<a href="#pinceau">Pinceaux</a>,<a href="#règle">Règles</a>, <a href="equerre">Equerres</a>,<a href="#rapporteur">Rapporteurs</a>, <a href="#grip">Grips, aides à la préhention</a>, <a href="#gomme">Gommes</a>, <a href="#taillecrayon">Taille-crayons</a>, <a href="#ciseau">Ciseaux</a>, <a href="#compas">Compas</a>,<a href="#cahier">Cahiers</a>, <a href="#classeur">Classeurs</a>, <a href="#feuilles">Feuilles</a>, <a href="#agenda">Agendas</a>, <a href="#numerique">Numérique</a> </p>
</aside>
<main>
<div id="stylo">
<h2>Stylos</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/styloencre.jpg" alt="" /> <figcaption>Stylo à encre STABILO en version droitier et gaucher.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/sansplume.jpg" alt="" /> <figcaption>Stylo à encore SANS PLUME MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/2in1.jpg" alt="" /> <figcaption>Stylo TwoInone qui permet de changer entre une plume et une bille.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/pilotrecharge.jpg" alt="" /> <figcaption> Stylos et effaceurs rechargeables PILOT.</figcaption></figure>
</div>
<div id="feutre">
<h2>Feutres</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/portefeutre.jpg" alt="" /> <figcaption>Porte feutre, peut être ouvert ou non.</figcaption></figure>
</div>
<div id="crayon">
<h2>Crayons</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/ergosoft.jpg" alt="" /> <figcaption> Crayons de couleur ergo soft.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/bickid.jpg" alt="" /> <figcaption> Bic kids, porte-mines avec recharges.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/antiseche.jpg" alt="" /> <figcaption> Porte mine antisèches avec les tables de multiplications.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/crayonfaber.jpg" alt="" /> <figcaption> Crayons à papier Faber Castell avec grips détachables.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/hbtactile.jpg" alt="" /> <figcaption> Crayons à papier HB STARDTLER avec fonction tactile.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/marques.jpg" alt="" /> <figcaption> Crayons avec marquages pour les doigts STABILO.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/portefaber.jpg" alt="" /> <figcaption> Porte mine Faber-Castell.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/set.jpg" alt="" /> <figcaption> Set école complet Faber-Castell.</figcaption></figure>
</div>
<div id="surligneur">
<h2>Surligneurs</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/surligneurfaber.jpg" alt="" /> <figcaption> Surligneur épais, avec grip Faber-Castell.</figcaption></figure>
</div>
<div id="pinceau">
<h2>Pinceaux</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/minipinceaux.jpg" alt="" /> <figcaption> Mini pinceaux à doigts FINGERMAX.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/pinceauxgrip.jpg" alt="" /> <figcaption> Pinceaux à grip Color et co.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/pinceauxfaber.jpg" alt="" /> <figcaption>Pinceaux à grip de différentes tailles et formes FABER-CASTELL.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/T.jpg" alt="" /> <figcaption>Pinceaux à bout en T et mini pinceaux pour les plus petits.</figcaption></figure>
</div>
<div id="règle">
<h2>Règles</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/4in1.jpg" alt="" /> <figcaption> Compas+ rapporteur+ équerre + règle 4 en 1 thaMographe.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/croco.jpg" alt="" /> <figcaption> Règle poignée crocodile.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/dyslexic.jpg" alt="" /> <figcaption> <a href="https://www.dyslexic.com/product/cooler-reading-ruler/">Règle aide à la lecture dylexic.com</a>.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/rouge.jpg" alt="" /> <figcaption> Règle transparente avec trait rouge au milieu pour la lecture IKEA.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/souple.jpg" alt="" /> <figcaption> Règle souple smileys MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/loupe.jpg" alt="" /> <figcaption> Loupe pour la lecture MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/regletriangle.jpg" alt="" /> <figcaption> Règle triangulaire.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/regle2en1.jpg" alt="" /> <figcaption> Règle 2 en 1.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/gaucher.jpg" alt="" /> <figcaption> Règle pour gauchers.</figcaption></figure>
</div>
<div id="equerre">
<h2>Equerres</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/equerrerapporteur.jpg" alt="" /> <figcaption> Equerres + rapporteurs 2 en 1.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/regle2en1.jpg" alt="" /> <figcaption> Règle 2 en 1.</figcaption></figure>
</div>
<div id="rapporteur">
<h2>Rapporteurs</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/equerrerapporteur.jpg" alt="" /> <figcaption> Equerres + rapporteurs 2 en 1.</figcaption></figure>
</div>
<div id="grip">
<h2>Grips, aides à la préhention</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/grip.jpg" alt="" /> <figcaption> Grip pour stylo.</figcaption></figure>
</div>
<div id="gomme">
<h2>Gommes</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/gommepapillon.jpg" alt="" /> <figcaption> Gomme papillon MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/gommecutter.jpg" alt="" /> <figcaption> Gomme “cutter”.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/doubleface.jpg" alt="" /> <figcaption> Gomme double face efface encre et efface crayon MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/toupis.jpg" alt="" /> <figcaption> Gomme toupis MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/triangle.jpg" alt="" /> <figcaption> Gomme triangulaire stick MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/fidget.jpg" alt="" /> <figcaption> Gomme fidget spinner MAPED.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/style.jpg" alt="" /> <figcaption> Gomme stylisée STABILO.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/reglegaucherdroitier.jpg" alt="" /> <figcaption> Règles souples pour gaucher et droitier LINEAL.</figcaption></figure>
</div>
<div id="taillecrayon">
<h2>Tailles-crayons</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/lapin.png" alt="" /> <figcaption> Taille crayon Lapin.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/stabilotaille.jpg" alt="" /> <figcaption> Taille crayon deux tailles droitier et gaucher STABILO.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/english.jpg" alt="" /> <figcaption> Taille crayon verbes irréguliers en anglais Englisch.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/turbotwist.jpg" alt="" /> <figcaption> Taille crayon électrique Turbo Twist.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/reservoir.jpg" alt="" /> <figcaption>Taille crayon réservoir MAPED.</figcaption></figure>
</div>
<div id="ciseau">
<h2>Ciseaux</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/ciseauxdifferent.jpg" alt="" /> <figcaption>Ciseaux avec préhention différente.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/stainless.jpg" alt="" /> <figcaption>Ciseaux MAPED stainless.</figcaption></figure>
</div>
<div id="compas">
<h2>Compas</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/bloqueur.jpg" alt="" /> <figcaption>Compas MAPED avec bloqueur.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/compasgros.jpg" alt="" /> <figcaption>Compas avec bout pour tenir plus gros.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/bloqueurmaped.png" alt="" /> <figcaption>Maped STOP SYSTEM compas avec bloqueur.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/complet.jpg" alt="" /> <figcaption>MAPED boite compas complète.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/mypen.jpg" alt="" /> <figcaption>Compas My Pen.</figcaption></figure>
</div>
<div id="cahier">
<h2>Cahiers</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/grandeslignes.jpg" alt="" /> <figcaption>Cahier avec de grandes interlignes.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/kidyboard.jpg" alt="" /> <figcaption>KIDY’ board, feuilles d’écritures et ardoises.</figcaption></figure>
</div>
<div id="classeur">
<h2>Classeurs</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/ouvrir.jpg" alt="" /> <figcaption>Classeur à ouverture facile.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/trieur.jpg" alt="" /> <figcaption>TRIEURS VIQUEL DISPONIBLES EN 3 COLORIS.</figcaption></figure>
</div>
<div id="feuilles">
<h2>Feuilles</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/translucide.jpg" alt="" /> <figcaption>Feuilles translucides pour séparer.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/facile.jpg" alt="" /> <figcaption>Pochettes transparentes faciles à utiliser.</figcaption></figure>
</div>
<div id="agenda">
<h2>Agendas</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/quovadis.jpg" alt="" /> <figcaption>Mon agenda CM1-CM2 QUO VADIS.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/collegien.jpg" alt="" /> <figcaption><a href="http://www.lacleduchemin.fr/">Tableau de bord du collégien, cle-du-chemin.</a></figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/malin.jpg" alt="" /> <figcaption>Mon agenda malin.</figcaption></figure>
</div>
<div id="numerique">
<h2>Numérique</h2>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/smartlock.jpg" alt="" /> <figcaption>Cadenas “PushKey” Master Lock.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/usb.jpg" alt="" /> <figcaption>Clé USB dictaphone amazon.fr.</figcaption></figure>
<figure><img src="part4/images/MAT ADAPTE/stylos crayons surligneur/iris.jpg" alt="" /> <figcaption>IRISPEN AIR 7.</figcaption></figure>
<h3>DÉCOUVERTE DE L’IRISPEN AIR 7 </h3>
<p> Ce stylo scanner a dépassé <strong>tout ce que je pouvais attendre.</strong></p>
<p>Manipulation facile, qui demande vraiment un minimum d’entrainement afin que l’Ocr reconnaisse bien les caractères, il est compatible sur MAC, sur PC, sur tablettes IOS et sur Android !
En bref il fonctionne<strong> partout !</strong></p>
<p> On peut scanner dans une soixantaine de langues et traduire ainsi dans une soixantaine de langues aussi.
On peut insérer ce qui est scanné dans un document word, l’insérer dans la langue d’origine ou dans la langue traduite.
Voici une <a href="https://youtu.be/UnZnS-fBj8I">vidéo</a> ( non professionnelle ) qui vous montre la manipulation de ce scanner.</p>
</div>
</main>
<script>
var menulink = document.querySelector('#menulink'),
var menu = document.querySelector('#navlinks');
menulink.addEventListener('click', controlMenu);
function controlMenu() {
if(menu.className === 'displayed') {
menu.className = 'collapsed';
}
else {
menu.className = 'displayed';
}
}
window.addEventListener('resize', resize);
function resize() {
if (window.innerWidth < 700) {
menu.className = 'collapsed';
}
}
</script>
</div>
</body>
</html>
3RD PAGE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Astuces pour dys: les différents dys</title>
<link href="styles/responsive.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/andika:n4:default.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<header>
<h1>Astuces pour Dys</h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks">
<li><a href="index.html">Page d'acceuil</a></li>
<li><a href="differentsdys.html ">Les différents Dys</a></li>
<li><a href="LivresDys.html" class="thispage">Livres Dys, maisons d'éditions Dys</a></li>
<li><a href="materieladapte.html">Matériel adapté</a> </li>
<li><a href="#">Revue de presse </a></li>
</ul>
</nav>
<div id="octo">
<img src="part4/gif/octopus intro intro.gif" width="450" height="300" alt=""/>
</div>
</header>
<aside>
<h2>Livres Dys, Maisons d'édition Dys</h2>
<p><strong>Pour retrouver rapidement les maisons d'édition, cliquez sur ces mots clé:</strong> <a href="#Magali">Les livres de Magali</a>, <a href="#Colibri">Colibri de chez Belin</a>, <a href="#Dyscool">éditions Nathan</a>,<a href="#Rageot">éditions rageot</a>,<a href="#Hatier">éditions Hatier</a>, <a href="#Auzou">Auzou</a>,<a href="#Lapoule">La Poule qui pond</a></p>
<p>Depuis un bon moment j’essaye de répertorier tous les livres et maisons d’édition dys qui existent pour faciliter la vie de lecture de nos jeunes. L’album sur la page a été créé il y a déjà 3 ans ! album sur <a href="http://www.facebook.com/astucespourdys">la page facebook</a> </p>
<p> En effet depuis quelques temps les maisons d’éditions proposent les unes après les autres des livres estampillés dys. On ne peut qu’en tant que parents, ou enseignants ou professionnels de santé que saluer cette prise de conscience. Que j’aurais été heureuse d’avoir des livres ainsi … ; lire Germinal en mini caractères n’aura pas été chose facile ( voir impossible ) </p>
<p> Je vous présente donc ainsi dans le site web ce qui est depuis longtemps présent sur la page Facebook. En effet lorsque j’ai rencontré l’auteur <a href="http://magalicollineaujanke.com/fr/" >Magali Colineau Janke </a>pour la première fois en 2015 , j’ai acheté mon premier ouvrage adapté dys. Ce fut pour mon ainé comme un <strong>déclic</strong>, et la lecture est devenu pour lui <strong>passion.</strong></p>
</aside>
<main>
<h2>Quelques exemples de livres adaptés</h2>
<div id= "Magali"><p>Le livre de <a href="http://magalicollineaujanke.com/fr/" >Magali</a> aura donc été notre 1er ouvrage dys d’une longue série que je vous présente maintenant.</p>
<figure><img src="part4/images/archimede.PNG" alt=""/><figcaption>1er tome d’une histoire passionnante</figcaption></figure>
</div>
<div id= "Colibri">
<p>Voici la collection <a href="https://www.belin-education.com/colibri#titres">Colibri chez Belin</a>, propose 4 niveaux de lecture pour des histoires de plus en plus longues ( niveau 4) qui mettent en avant un « son » qui sera en couleur. </p>
<figure><img src="part4/images/colibri.jpg" alt="" />
<figcaption>Exemple des livres disponibles avec les niveaux indiqués par les pastilles de couleur.</figcaption>
</figure>
</div>
<div id= "Dyscool">
<p>Collection<a href="http://dyscool.nathan.fr/#collection_papier" > Dyscool de chez Nathan</a> qui propose des histoires dont certaines sont étudiées en classe.</p>
<figure><img src="part4/images/nathan.jpg" alt="" /><figcaption>Exemples des livres disponibles.</figcaption></figure>
</div>
<div id= "Rageot">
<p>Les édition<a href="http://www.rageot.fr/collections/flash-fiction/"> Rageot</a> ont créé la collection Flash Fiction , qui s’adresse à des enfants plus à l’aise dans la lecture ( +/- ce2/cm2)</p>
<figure><img src="part4/images/contact.jpg" alt="" /><figcaption>Contact</figcaption></figure>
</div>
<div id= "Hatier">
<p>Les éditions <a href="https://www.recrealivres.fr/livre/11466603-le-retour-d-ulysse-adapte-helene-kerillis-hatier">Hatier</a>, ont mis l’accent sur la mythologie et proposent en plus de leur cahiers de vacances dys , des ouvrages littéraires tels que celui montré.</p>
<figure><img src="part4/images/mythologie.jpg" alt="" /><figcaption>Ma première mythologie</figcaption></figure>
<figure><img src="part4/images/cahier.jpg" alt="" class="grayscale" /><figcaption>Cahiers de révisions adaptés. tous les niveaux de primaire</figcaption></figure>
</div>
<div id= "Auzou">
<p>Des beaux livres sont aussi proposés aux enfants. Notamment <a href="http://lecture.auzou.com/delie-mes-mots/presentation-de-la-collection.html">Auzou </a>( si connu pour mon Loup adoré) qui intègre même un cache guide de lecture/retient page.</p>
<figure><img src="part4/images/loup.jpg" alt="" /><figcaption>Victor et la petite souris</figcaption></figure>
</div>
<div id= "Lapoule">
<p>Et pour continuer dans la série des beaux livres ( idées cadeaux ( chut))<a href="http://www.lapoulequipond.fr/"> La Poule qui Pond</a> propose un large éventail de livres.</p>
<figure><img src="part4/images/poule.jpg" alt="" /><figcaption>Exemple de livre proposé</figcaption></figure>
</div>
<p>Vous pourrez trouver plus de livres sur la <a href="https://www.facebook.com/astucespourdys/">page Facebook astuces pour Dys</a></p>
<p>mais voici d'autres maisons d'éditions qui proposent de beaux livres adaptés. <a href="https://www.amazon.fr/for%C3%AAt-mauperdus-adapt%C3%A9-lecteurs-dyslexiques/dp/B01DNHIXNC/ref=sr_1_6..."> les éditions Miroirs aux Troubles </a> ( pas de visuels),<a href="http://www.castelmore.fr/livre/view/l-effet-matilda--edition-dys"> les éditions Castelmore</a>, <a href="https://www.nla-creations.fr/"> NLA créations</a> une créatrice qui nous vient d'Alsace, et pour finir, Mobidys</p>
<footer>Pour retrouver tous les livres Dys et les maisons d'éditions, cliquez <a href="https://drive.google.com/file/d/1md42Y_O5a1P8j5fzHgYdWFxotOD96hzC/view?usp=sharing">ici!</a></footer>
</main>
<script>
var menulink = document.querySelector('#menulink'),
var menu = document.querySelector('#navlinks');
menulink.addEventListener('click', controlMenu);
function controlMenu() {
if(menu.className === 'displayed') {
menu.className = 'collapsed';
}
else {
menu.className = 'displayed';
}
}
window.addEventListener('resize', resize);
function resize() {
if (window.innerWidth < 700) {
menulinks.className = 'collapsed';
}
if (window.innerWidth > 700) {
menulinks.className = 'displayed';
}
}
</script>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
color: #4B4B4B;
font-family: andika;
font-style: normal;
font-weight: 400;
font-size: 1em;
background-color: #EFF5F8;
}
#wrapper {
width: 100%;
margin: 0 auto;
max-width: 1000px;
background-color: white;
}
h1 , h2{
color:#98266E;
font-style: normal;
font-weight: 400;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
}
h2 {
margin-top: 0.5em;
font-size: 2.25em;
color: #217FC6 ;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color:#003E89 ;
}
a:visited {
color: #217FC6 ;
}
a:hover, a:active, a:focus {
color: #B01619;
text-decoration: underline;
}
#menulink {
background-color: #77B1ED ;
margin: 0;
text-align: center ;
}
#menulink a {
color: white;
font-size: 0.7em;
text-transform: uppercase;
/* [disabled]display: block;
*/
font-weight: 200;
text-decoration: none;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: andika;
font-style: normal;
}
#navlinks {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
background-color: #000000;
background-color: rgba(90,176,248,0.60);
position: absolute;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navlinks.displayed{
top: 135px;
z-index: 1;
opacity: 1;
}
#navlinks.start {
display: none;
}
#navlinks.collapsed {
top: -12em;
opacity: 0;
}
#navlinks a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
color: #003E89;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
}
#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {
color: #000000 ;
}
main, aside {
margin-left: 4%;
margin-right: 4%;
}
#hero img {
max-width: 100%;
margin: 0 auto;
display: block;
}
#hero p {
color: #14388E;
font-weight: 600;
font-size: 1.5em;
text-transform: uppercase;
border-bottom-width: 3px;
border-bottom-style: solid;
padding-left: 4%;
padding-right: 4%;
padding-bottom: 20px;
margin-top: 10px;
font-family: andika;
font-style: normal;
}
figure {
width: 400px;
max-width: 92%;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
}
figure img {
max-width: 100%;
}
figcaption {
display: block;
margin-top: 0.5em;
font-size: 0.75em;
text-transform: uppercase;
}
.grayscale {
-webkit-filter: grayscale(100%);
margin: 0 auto;
filter: grayscale(100%);
}
.grayscale:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
footer {
padding-top: 20px;
padding-bottom: 20px;
background-color: #77B1ED;
color: white;
font-size: 0.8em;
text-align: center;
}
#octo img {
margin-top: 0;
margin-right: 0;
margin-left: 17em;
margin-bottom: 0;
}
@media (min-width: 700px){
#menulink {
display: none;
}
#navlinks {
max-width: 1000px;
position: static;
background-color:transparent;
}
#navlinks.collasped {
opacity: 1;
}
#navlinks a {
width: 20%;
margin-bottom: 20px;
padding-top: 15px;
padding-bottom: 20px;
float: left;
color: #003E89;
}
header {
overflow: hidden;
}
#hero p {
width: 36%;
padding-top: 20px;
padding-left: 25px;
padding-right: 25px;
position: absolute;
color: #ABDC66;
border-width: thick;
border-style: solid;
top: 55px;
left: 539px;
right: 0px;
}
#hero {
position: relative;
}
#hero img {
position: relative;
left: -250px;
top: -11px;
bottom: auto;
}
main {
width: 60%;
}
aside {
width: 28%;
margin-left: 0px;
}
main, aside {
margin-top: 30px;
margin-bottom: 30px;
float: left;
font-size: 0.875em;
}
footer {
clear: left;
}
}
@media (min-width: 900px) {
.floatright {
float: right;
margin-right: 0px;
margin-left: 10px;
}
.floatleft {
float: left;
margin-right: 10px;
}
}
1 Correct answer
24
Replies
, and it alters my style sheet aswell, and i don't really want that ;( 
AdChoices