Notice d'utilisation

Principe :

La mise en page des éléments qui composent votre page HTML se fait à partir de l'éditeur de dessin d'OpenOffice.org. Cette page de dessin est à la fois un plan de disposition permettant de déterminer les dimensions qui doivent être précisées dans la feuille de style, et c'est aussi le moyen de choisir de manière simple les styles,les couleur et les options qui feront l'objet de directives de style.

Tous les renseignements utiles à la constitution de la feuille de styles se trouveront exprimés sous forme d'un fichier XML. Pour le créer, il vous suffit d'enregistrer de votre dessin au format svg (utiliser la commande "exporter" après avoir désélectionné tous les objets de la page de dessin).

Notre service en ligne convertira ce fichier SVG en une feuille de styles css. Ce traitement consiste en fait à présenter les renseignements contenus dans le fichier svg sous une autre forme qui respecte la syntaxe des feuilles css.

Ce système ne traite pas en totalité les nombreuses fonctionnalités des feuilles css, mais il permet une mise en page facile et efficace de la plupart des documents, notamment les formulaires qui sont souvent délicats à paramétrer.

Le meilleur moyen d'aborder rapidement son fonctionnement est d'utiliser les fichiers de démonstration que nous vous proposons dans ce petit didacticiel

Pour construire une interface personnalisée, le plus simple est de transformer notre modèle de départ qui vous est fourni à titre d' exemple.sxd

Pour voir à quoi ressemble cette interface, vous devez placer dans le même répertoire le fichier "exemple.html", et la feuille de styles exemple.svg

Téléchargez à présent le fichier exemple.sxd ou exemple.sxd et ouvrez-le avec OpenOffice.org.

Vous voyez apparaître des cadres de texte qui concernent chacun un élément désigné par un [sélecteur] qui rappelle l'identifiant ou la classe utilisé dans la page HTML. Dans la feuille de dessin, TOUT OBJET EST EN FAIT UN CADRE DE TEXTE

• Le sélecteur est obligatoirement placé au bas et à gauche du cadre qui fixe les dimensions de l'élément,

• Il est placé entre crochets droits [..] , il est précédé d'un # s'il s'agit d'un identifiant (entité unique) exemple [#boitenom].

• Il est précédé de la balise (sans les <..>) à laquelle il s'applique s'il s'agit d'une classe. Exemple : [DIV.nom].

• Il est suivi d'un ou plusieurs caractères qui traduisent des options que vous pouvez choisir (l' ordre, la casse, n'ont pas d'importance).

Avant d'étudier les options en détail, nous vous proposons de faire une première fois l'opération de conversion.

• Enregistrez la maquette au format SVG. Pour cela, faites Fichier-> exporter, et choisissez « format de fichier -> SVG.

• Revenez dans cette page « servicecss.php » et utilisez le bouton de navigation (« ... » ou « Browse ») pour retrouver dans vos répertoires le fichier .svg que vous venez d'enregistrer. Cliquez alors sur OK pour terminer. Le fichier est maintenant inscrit dans la page, cliquez alors sur « convertir ». Le résultat de la conversion apparaît dans la fenêtre.

• Récupérez votre feuille de style – texte situé entre les repères de début et de fin . Selon le navigateur que vous utlisez, vous pouvez soit sélectionner la commande qui vous permet d'éditer le source HTML, soit faire tout simplement un copier-coller du texte dans votre éditeur de texte favori. Ce peut être OpenOffice.org à condition de sauver le feuille de style au format « texte ».

• Enregistrez la feuille de style ainsi obtenue sous le nom « exemple.css» dans le répertoire où vous avez enregistré le fichier « exemple.html ».

• Avec votre navigateur, appelez ce fichier et voyez la mise en page influencée par la feuille de style... Les objets sont maintenant disposés conformément à la maquette.

Afin de retravailler cette maquette, il faut en apprendre un peu plus sur les possibilités de notre outil, en particulier grâce aux différentes options.

Options :

• L -> le contenu sera aligné à gauche dans le cadre (Left)

• R -> le contenu sera aligné à droite (Right)

• C -> le contenu sera placé au centre (Center)

• T -> le contenu sera placé en haut (Top)

• M -> le contenu sera placé au milieu - sens vertical- (Middle)

• B -> le contenu sera placé en bas (Bottom)

• H -> l'objet sera invisible (Hidden) mais il gardera son emplacement

• N -> l'objet ne sera pas affiché (None)

• Fn -> la lettre f indique que le cadre (Frame) doit être visible, le chiffre qui la suit immédiatement donne le nombre de pixels qui correspond à l'épaisseur du trait.

• A --> la largeur du cadre s'adapte Automatiquement à la longueur du texte (Automatic)

• O -> style de cadre : "Outset" (zone en saillie)

• I --> style de cadre : "Inset" (zone en creux)

• V --> style de cadre "groove"(sillon en V autour de la zone)

• Pn --> "Padding" ou marge intérieure au cadre (largeur en pixels donné par le nombre n)

• Gn --> "marGin" ou marge extérieure au cadre (largeur en pixels donné par le nombre n)

• S --> L'objet est placé verticalement à la Suite du précédent (Serial)

• X --> L'objet est placé horizontalement à la Suite du précédent (en X) selon la position verticale courante

• E --> La hauteur de l'objet est variable (Extensible). S'applique en particulier aux cadres de texte.

Aspects visuels de l'objet :

Couleur de fond : c'est la couleur de remplissage du cadre de texte,

Couleur du cadre : c'est la couleur choisie pour le cadre. Pour ne pas le voir : adopter la couleur du fond. L'épaisseur du trait de cadre est définie par les options ci-dessus. Le cadre utilisé par la feuille de dessin est OBLIGATOIREMENT un trait continu de 1 pixel.

Si le cadre est enlevé (invisible par exemple)

Dans ce cas, d'une part le positionnement de l'objet sera approximatif, mais son alignement (à gauche, à droite, au centre) ne sera plus fait relativement à son cadre disparu, mais par rapport au cadre qui le contient, à défaut à la page. Cela peut servir dans certains cas.

Aspect du texte : La taille, la couleur, la fonte, la graisse, le style du texte d'un élément sont les caractéristiques du texte que l'on voit dans chaque cadre. L'alignement et l'espace par rapport au bord du cadre sont définis par les options ci-dessus.

Réglage des positions.

Les dimensions de la fenêtre du navigateur seront en fait différentes de celles de la page de dessin. Pour cette raison, un repositionnement automatique doit s'opérer. Il a été résolu de la manière suivante :

Les dimensions horizontales sont calculées en pourcentage de la largeur de la fenêtre. Comme la longueur des textes ne varie pas, il est nécessaire de prévoir des espaces suffisants de part et d'autre de chaque écriture pour éviter les télescopages lorsque la largeur de la fenêtre se réduit.

Les positions verticales sont en valeur absolue ou en valeur relative suivant que l'on utilise ou pas l'option "S". Mais En dessous d'un objet de hauteur variable, le positionnement absolu devient inapplicable.

Il est donc conseillé de travailler de la manière suivante :
La page est découpée en différentes zones de hauteur fixe ou variable. Ces zones seront délimitées par des cadres en positionnement relatif qui contiendront d'autres objets. On mettra donc l'option "S" pour un cadre de hauteur fixe, l'option "SE" pour un cadre de hauteur variable.

A l'intérieur des cadres, les objets pourront avoir un positionnement absolu (par défaut).

NOTE IMPORTANTE : Pour que le positionnement absolu des objets dans un cadre puisse être reporté correctement, le cadre doit être calé en haut et à gauche de la feuille de dessin.

Pour une utilisation simple sur une seulle feuille de dessin - comme dans notre exemple - seul le cadre supérieur comporte donc des objets positionnés de manière absolue.

les objets situés en dehors de ce cadre (avec l'option "S") se placeront à la suite des précédents, à une distances fixée par application d'une marge "Gn". Dans l'exemple, c'est ce qui est fait pour le pied de page.

Utilisation avancée

Pour éditer des pages complexes, il faut utiliser plusieurs feuilles de dessin :

• Une feuille de mise en page, sur laquelle sont tracés les différents cadres qui délimitent des zones fonctionnellement différentes : une en-tête, un formulaire, une zone de texte, un menu... Ces cadres seront à positionnement relatif (avec l'option "S" ou "SE").

• Autant de feuilles supplémentaires que de cadres, pour éditer la composition interne de chacun.

  Pour un positionnement correct, Il faut se rappeler que - quelles que soient les dimensions du cadre en question - la largeur de la page de dessin doit rester en rapport avec le format de l'écran. En fait, toutes les pages de dessin doivent avoir le même format, même pour éditer un tout petit cadre.

Chaque feuille de dessin est exportée au format SVG et convertie grâce à notre service en ligne.

On obtient le fichier css final en regroupant dans un même fichier toutes les lignes de style obtenues.

REMARQUE : pour que le traitement soit cohérent, le fichier HTML devrait logiquement être structuré de sorte que tous les éléments devant figurer dans un cadre soient compris entre les balises qui délimitent ce cadre :

<DIV id="cadrebas">

<DIV id="elementcontenu1">

...

</DIV>

<DIV id="elementcontenu2">

...

</DIV>

............

<DIV>

C'est la condition pour qu'un navigateur considère des objets comme "contenus dans le cadre".

Quand on examine de ce point de vue la structure fichier HTML de notre exemple, on voit que le "cadre" qui entoure les éléments du formulaire ne "contient" pas les éléments qui figurent à l'intérieur. Dans ce cas, c'est seulement un décor, un objet comme un autre. Mais attention à l'ordre de superposition.

    Notice sous licence CECILL