TRI-EDRE Freeway User Manual [fr]

Guide du CSS pour Freeway

Introduction

Initialement, le HTML a été conçu comme un moyen pour découper un document en fonction de son contenu. Il était
utilisé pour spécifier l’organisation d’un document, pas sa présentation. Pour la présentation, il était laissé au soin des
navigateurs de décider comment afficher les différents contenus d’une page Web, et comment définir les styles et les
positions en fonction de leur interprétation du contenu.

Inévitablement, le Web devenant de plus en plus populaire, les auteurs de pages Web ont voulu plus de contrôle sur
la présentation de leurs documents. Les deux principaux navigateurs, Netscape et Microsoft, ont commencé très tôt
à étendre les spécifications du HTML avec des balises propriétaires et des extensions concurrentes. Cette situation a
abouti à une grande confusion. Comme les auteurs désiraient pouvoir supporter le plus possible de navigateurs et utiliser
pleinement les extensions, le développement de pages Web induisait beaucoup de perte de temps et d’énergie. Les
divergences croissantes avec les prémisses originales du HTML, aggravées par la nécessité d’utiliser des tableaux HTML
complexes pour positionner correctement le contenu, rendaient la maintenance des pages Web compliquée et complexe.

C’est ainsi que sont nées les feuilles de style - Cascading Style Sheets (CSS), un moyen standardisé pour séparer le
contenu de la présentation, et pour donner aux auteurs un plus grand contrôle sur la présentation. Le CSS permet aux
auteurs, sans perturber le code source du HTML, un meilleur contrôle sur le style et sur le positionnement du contenu, en
particulier les spécifications de la position et des dimensions relativement à la fenêtre du navigateur.

• Freeway 4 et le CSS

Bien que Freeway ait offert par le passé un support du CSS, c’était essentiellement pour la partie style du CSS. Avec la
version 4, Freeway introduit un bien meilleur support du positionnement CSS - à tel point qu’un bouton est maintenant
dédié au CSS dans la barre d’outils.
Pour activer le positionnement avec les CSS, cliquez sur le bouton Mise en page CSS de la barre d’outils de Freeway :

Note : le CSS ne peut être activé si le format de la page est en HTML 3.2.

Quand ce bouton est actif, tous les blocs dessinés sont positionnés avec une mise en page CSS. Les blocs positionnés
par CSS peuvent être identifiés grâce à leur couleur de bordure et de coins différente (la couleur par défaut est le vert,
mais elle peut être modifiée dans l’onglet Apparence des Préférences).

Vous pouvez à tout moment activer ou désactiver le positionnement CSS en (dé)cochant la case Calque dans l’onglet
Réglages généraux du bloc de la palette Inspecteur :

Positionnement CSS

La différence fondamentale entre la mise en page basée sur des tableaux (Calque décoché) et la mise en page CSS
(Calque coché) est que la première est spécifiée par rapport à la page Freeway, alors que la mise en page CSS est
spécifiée par rapport à la page dans le navigateur (qui dépend de la taille de la fenêtre du navigateur).

• Positionner un bloc de taille fixe à une distance spécifiée du bord de la page du navigateur

Par défaut, Freeway spécifie la position d’un bloc par deux valeurs, la distance du haut de la page et la distance du bord

gauche de la page. Ces valeurs sont affichées dans la palette Inspecteur, et modifiables quand les boutons Gauche et
Haut sont enfoncés dans la section Dimensions de l’onglet Réglages généraux du bloc :

Vous pouvez aussi prendre comme référence les autres bords. Si vous enfoncez les boutons Droite et/ou Bas, la position
du bloc peut être spécifiée à une certaine distance des bords droit et bas de la page :

Dans cet exemple, le bloc, quand il est visualisé dans le navigateur, sera toujours positionné à 394 pixels du bord droit et
489 pixels du bas de la page du navigateur. Si le bloc n’avait pas été défini comme un calque, il aurait une position fixe
par rapport au coin en haut à gauche de la page du navigateur.

• Positionner un bloc de taille fixe par rapport à la taille de la page du navigateur

Une nouvelle fonction de Freeway 4 Pro permet de spécifier les positions par un pourcentage de la largeur ou de la
hauteur de la page du navigateur, au lieu d’indiquer des valeurs en pixels. Quand la page est affichée dans le navigateur,
le bloc est positionné relativement à la taille de la page du navigateur, ou du bloc CSS parent :

Les deux copies d’écran ci-dessus à droite montrent le repositionnement d’un bloc quand on modifie la taille de la page
du navigateur. Le coin du bloc sera toujours positionné à 50% de la largeur et 50% de la hauteur de la page.

Naturellement, les valeurs de positionnement en pourcentage peuvent être entrées dans les champs Bas et Droite.

Dimensions CSS

De la même façon que pour le positionnement, les dimensions d’un bloc peuvent être spécifiées relativement à la taille
de la page du navigateur. Les blocs ainsi définis ont leur taille qui s’agrandit ou se rétrécit quand la taille de la fenêtre du
navigateur est modifiée. Entrez les valeurs en pourcentage dans les champs Hauteur et Largeur de la palette Inspecteur :

Les copies d’écran montrent les effets obtenus dans le navigateur, lorsque la taille de la fenêtre est modifiée.

Bien entendu, il est possible de combiner ces valeurs comme vous le désirez. Par exemple, vous pouvez fixer les distances
des bords gauche et droite du bloc dont les dimensions s’adapteront pour qu’il reste toujours à 50 pixels des bords de la
page du navigateur :

Le bloc s’agrandit quand la page du navigateur est agrandie pour maintenir les 50 pixels des bords.

Note : il est possible de donner un alignement à la page. Dans ce cas, la mise en page flexible telle que décrite dans cette
section ne s’applique plus, car la page a déjà une taille fixe prédéfinie qui ne se redimensionne pas quand on modifie la
taille de la fenêtre du navigateur.

Blocs enfants

Une autre nouveauté de Freeway 4 est la possibilité de créer des blocs enfants. Vous pouvez créer deux types de blocs
enfants, absolu et imbriqué. Les blocs enfants absolus sont positionnés comme les blocs du premier niveau de votre page,
sauf que tous les réglages de position/dimension sont relatifs à leur bloc parent plutôt qu’à la page. Les blocs enfants
imbriqués sont dans le corps de texte d’un autre bloc (parent), et leur position est donc fonction du texte qui les entoure.

• Blocs enfants absolus

Pour créer un bloc enfant positionné en absolu, créez d’abord un bloc dans votre page. Ensuite, créez un nouveau bloc
entièrement contenu à l’intérieur du premier bloc (son parent). Freeway vous indique que vous êtes en train de créer un
bloc enfant d’une part en affichant une bordure autour du bloc parent, et d’autre part avec un curseur spécial (une croix
entourée d’un carré en pointillés).

Note : si vous pressez la barre ESPACE pendant la création d’un bloc enfant, Freeway sélectionne alternativement les
différents blocs parents possibles. Dans l’exemple ci-dessous, le bloc parent (qui est le plus grand, avec son liseré bleu)
pourrait aussi être le bloc plus petit contenant le bloc en cours de création :

Une fois le bloc enfant dessiné, il peut être positionné par rapport à son parent en utilisant toutes les méthodes décrites
précédemment dans Positionnement CSS et Dimensions CSS.

Il faut noter que, pour qu’un bloc enfant soit repositionné ou redimensionné, il faut que le bloc parent soit lui aussi réglé
pour se repositionner ou se redimensionner quand la taille de la fenêtre du navigateur change.

Dans l’exemple ci-dessous, le bloc parent est positionné à 50 pixels des bords gauche et droit, et le bloc enfant a son
côté gauche à 20% de la largeur du bloc parent et sa largeur à 60% de celle du parent. Dans le navigateur, le bloc parent
(en mauve) est redimensionné ainsi que le bloc enfant (en jaune) en fonction de la taille de la fenêtre du navigateur :

• Blocs enfants imbriqués

Pour créer un bloc enfant imbriqué, cliquez dans un bloc HTML comme pour y éditer du texte. Puis sélectionnez Bloc
HTML dans le menu Insertion. Un bloc HTML est inséré dans le premier bloc (vous auriez aussi pu insérer un bloc
graphique de la même manière) :

Vous ne pouvez modifier la position de tels blocs, qui est déterminée par le texte dans lequel ils se trouvent. Vous ne
pouvez spécifier que les dimensions d’un bloc enfant imbriqué, que ce soit par les poignées ou par les champs de la
palette Inspecteur, en pixels ou en pourcentage.

Il est possible de créer des blocs enfants imbriqués dont le parent est la page. Freeway fournit un mécanisme spécial pour
cela. Créez un bloc calque positionné comme indiqué ci-dessous (0 pixel de la gauche, 0 pixel du haut et 100% de largeur
et de hauteur) :

Ce bloc ne sera pas publié. Tout son contenu sera placé dans la partie “body” du fichier HTML lors de la publication.

Bloc calque HTML et débordement de texte

Quand les blocs sont réglés pour se redimensionner dans la fenêtre du navigateur, il arrive inévitablement que, parfois, le
texte contenu dans un bloc calque HTML ne tienne plus dans les dimensions de ce bloc. Le CSS offre un moyen simple
pour gérer de tels cas : le réglage Débordement. Cet attribut peut être réglé dans Freeway pour chacun des blocs calques
HTML qui contiennent du texte. Le menu correspondant à cet attribut se trouve dans l’onglet Réglages de sortie de la