 harrydico.net |
 |
 dictionnaires de l'univers francophone de Harry Potter Atelier du site |
|
harrydico.net |
|
dictionnaires de l'univers francophone de Harry Potter Atelier du site |
|
| * le dictionnaire pour tous et le répertoire. * le dico français-anglais. * les dicos des noms propres et des noms communs. |
 |
 |
 . |
Pour ces deux derniers types j'ai doublé toutes les pages d'une version sans cadre pour contourner une limitations de Netscape : une page dans un cadre y est forcément entourrée d'un espace (qui ruine ma mise en page !), de plus je les ai dotés d'une fonction boucle qui est une sorte de caroussel, une page appelant la suivante et ainsi de suite... | ||
| Les fonctionalités des tableaux html sont utilisées pour créer un cadre représentant la couverture du dictionnaire, les couleurs sont celles du Robert pour tous et les dimensions s'en rapprochent. Des cases sont utilisées pour la navigation (9 cases à gauche et 9 à droite). Elles sont tantôt occupées par des images d'onglets avec des liens hypertextes et les lettres correspondantes, tantôt de la couleur du fond. Le dico pour tous est visible ici.
| ||
 |
 |
 |
Le potter pour tous comprend 80 définitions simples de noms propres et communs répartis sur huit pages introduites par deux pages d'accueil soit une douzaine de pages au total. | ||
| Le répertoire est une adaptation du Potter pour tous, demandée par un ami pour ranger ses favoris dans ses pages perso de manière à en disposer partout. Le principe est donc le même avec neuf onglets et une simplification (5 colonnes au lieu de 9 : bord gauche, navigation, image, navigation et bord droit). Le répertoire est visible ici et téléchargeable (125ko) ici.
| ||
 |
 |
|
| Le dico français-anglais utlise lui aussi un tableau, plus exactement trois tableaux imbriqués, cela est en effet plus simple pour deux raisons : * chaque partie du résultat est construite indépendement du reste (enfin presque) * l'utilisation de PHP permet d'inclure dans la page des fichiers de texte ainsi un fichier contient l'entête, un autre l'ouverture du premier tableau, un autre l'ouverture du second etc..(voir le code PHP ci-dessous) Le potter et collins utilise un tableau centré qui contient un tableau pour la navigation, qui contient un tableau pour la liste des mots à traduire ! chaque tableau tient compte de la taille du tableau inclus (considéré comme une case) mais il ignore sa constitution (le nombre de lignes et de colonnes est indifférent).
| ||
<?php // parties figées include ("head.txt"); c'est l'en-tête HTML obligatoire include ("cadre1.txt"); c'est la couverture bleue et jaune include ("cadre2.txt"); c'est la navigation gauche et droite ?> <TABLE WIDTH="530" c'est le début du tableau de liste de noms
de même la fin du fichier PHP appèle les fichiers textes de fermeture
<?php // parties figées include ("navigation.txt"); fermeture de la navigation include ("fin.txt"); fermeture de la couverture et de la page ?> La maintenance est facilitée : la mise au point des parties communes se fait dans un seul fichier, une fois sur le serveur PHP l'appel de ces pages produit le code HTML espéré, dès lors il est facile de l'enregistrer au format HTML simple pour un usage courant. |
 |
 |
 |
Le code PHP pour traduire les mots est des plus simples aussi :
<?php
<A HREF="collinsA.php?anglais=1">Hannah</A> |
| Les dicos des noms propres et des noms communs utilisent des FRAMES c'est à dire des cadres, ces sont des pages qui ne contiennent rien d'autre que d'autres pages, on les rencontre souvent pour découper une page web en deux (avec une liste de liens à gauche ou un bandeau en haut de la page). Voyons la construction et le code de la page progressivement : J'ai découpé la page en trois colonnes : un fond noir étoilé (black.htm) à gauche (n°1) et à droite (n°3) servent à centrer mon dictionnaire horizontalement. | |||
| <FRAMESET COLS="*,575,*"> |  |
||
| <FRAME NAME="tresgauche" SRC="black.htm"> | |||
| <FRAME le reste est détaillé plus bas;> | |||
| <FRAME NAME="tresdroite" SRC="black.htm"></FRAMESET> | |||
| J'ai découpé le reste en cinq rangées (texte orange) : le même fond noir étoilé en haut (n°2a) et en bas (n°2e) servent à centrer le dictionnaire verticalement. Le décor haut (n°2b) et le décor bas (n°2d) entourent les pages. On voit ce découpage sur l'image ci-contre | |||
| <FRAMESET COLS="*,575,*"> | |||
| <FRAME NAME="tresgauche" SRC="black.htm"> | |||
| <FRAMESET ROWS="*,25,420,20,*"> | |||
| <FRAME NAME="treshaut" SRC="black.htm"> | |||
| <FRAME NAME="decorshaut" SRC="decorshaut.htm"> | |||
| <FRAME le reste... ;> | |||
| <FRAME NAME="decorsbas" SRC="decorsbas.htm"> | |||
| <FRAME NAME="tresbas" SRC="black.htm"></FRAMESET> | |||
| <FRAME NAME="tresdroite" SRC="black.htm"></FRAMESET> | |||
| J'ai découpé le reste en cinq colonnes (texte en jaune) le décor gauche (n°1), la page de gauche(n°2), la reliure (n°3), la page de droite (n°4) et le décor droit (n°5). | |||||
| <FRAMESET COLS="*,575,*"> |  |
||||
| <FRAME NAME="tresgauche" SRC="black.htm"> | |||||
| <FRAMESET ROWS="*,25,420,20,*"> | |||||
| <FRAME NAME="treshaut" SRC="black.htm"> | |||||
| <FRAME NAME="decorshaut" SRC="decorshaut.htm"> | |||||
| <FRAMESET COLS="20,250,20,260,25"> | |||||
| <FRAME NAME="gauche" SRC="gauche.htm"> | |||||
| <FRAME le reste un peu plus bas...> | |||||
| <FRAME NAME="reliure" SRC="reliure.htm"> | |||||
| <FRAME NAME="image" SRC="aide.htm"> | |||||
| <FRAME NAME="droite" SRC="droite.htm"></FRAMESET> | |||||
| <FRAME NAME="decorsbas" SRC="decorsbas.htm"> | |||||
| <FRAME NAME="tresbas" SRC="black.htm"></FRAMESET> | |||||
| <FRAME NAME="tresdroite" SRC="black.htm"></FRAMESET> | |||||
| Enfin j'ai découpé le reste en trois rangées (texte en blanc) : l'accès par initiales (n°2a), la liste déroulante des noms (n°2b) et la navigation (n°2c). | |||||
| <FRAMESET COLS="*,575,*"> | |
||||
| <FRAME NAME="tresgauche" SRC="black.htm"> | |||||
| <FRAMESET ROWS="*,25,420,20,*"> | |||||
| <FRAME NAME="treshaut" SRC="black.htm"> | |||||
| <FRAME NAME="decorshaut" SRC="decorshaut.htm"> | |||||
| <FRAMESET COLS="20,250,20,260,25"> | |||||
| <FRAME NAME="gauche" SRC="gauche.htm"> | |||||
| <FRAMESET ROWS="38,360,22"> | |||||
| <FRAME NAME="haut" SRC="haut.htm"> | |||||
| <FRAME NAME="liste" SRC="liste.htm"> | |||||
| <FRAME NAME="bas" SRC="bas.htm"></FRAMESET> | |||||
| <FRAME NAME="reliure" SRC="reliure.htm"> | |||||
| <FRAME NAME="image" SRC="aide.htm"> | |||||
| <FRAME NAME="droite" SRC="droite.htm"></FRAMESET> | |||||
| <FRAME NAME="decorsbas" SRC="decorsbas.htm"> | |||||
| <FRAME NAME="tresbas" SRC="black.htm"></FRAMESET> | |||||
| <FRAME NAME="tresdroite" SRC="black.htm"></FRAMESET> | |||||
| Le code est presque complet il ne manque que frameborder=no framespacing=0 pour éviter les bordures et noresize pour contrer la présence d'ascenseurs (sauf sur n°2b). | |||||
