Guide du CSS pour Freeway

Introduction
Initialement, le HTML a t conu comme un moyen pour dcouper un document en fonction de son contenu. Il tait utilis pour spcier lorganisation dun document, pas sa prsentation. Pour la prsentation, il tait laiss au soin des navigateurs de dcider comment afcher les diffrents contenus dune page Web, et comment dnir les styles et les positions en fonction de leur interprtation du contenu. Invitablement, le Web devenant de plus en plus populaire, les auteurs de pages Web ont voulu plus de contrle sur la prsentation de leurs documents. Les deux principaux navigateurs, Netscape et Microsoft, ont commenc trs tt tendre les spcications du HTML avec des balises propritaires et des extensions concurrentes. Cette situation a abouti une grande confusion. Comme les auteurs dsiraient pouvoir supporter le plus possible de navigateurs et utiliser pleinement les extensions, le dveloppement de pages Web induisait beaucoup de perte de temps et dnergie. Les divergences croissantes avec les prmisses originales du HTML, aggraves par la ncessit dutiliser des tableaux HTML complexes pour positionner correctement le contenu, rendaient la maintenance des pages Web complique et complexe. Cest ainsi que sont nes les feuilles de style - Cascading Style Sheets (CSS), un moyen standardis pour sparer le contenu de la prsentation, et pour donner aux auteurs un plus grand contrle sur la prsentation. Le CSS permet aux auteurs, sans perturber le code source du HTML, un meilleur contrle sur le style et sur le positionnement du contenu, en particulier les spcications de la position et des dimensions relativement la fentre du navigateur. Freeway 4 et le CSS Bien que Freeway ait offert par le pass un support du CSS, ctait essentiellement pour la partie style du CSS. Avec la version 4, Freeway introduit un bien meilleur support du positionnement CSS - tel point quun bouton est maintenant ddi au CSS dans la barre doutils. Pour activer le positionnement avec les CSS, cliquez sur le bouton Mise en page CSS de la barre doutils 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 dessins sont positionns avec une mise en page CSS. Les blocs positionns par CSS peuvent tre identis grce leur couleur de bordure et de coins diffrente (la couleur par dfaut est le vert, mais elle peut tre modie dans longlet Apparence des Prfrences). Vous pouvez tout moment activer ou dsactiver le positionnement CSS en (d)cochant la case Calque dans longlet Rglages gnraux du bloc de la palette Inspecteur :

Positionnement CSS
La diffrence fondamentale entre la mise en page base sur des tableaux (Calque dcoch) et la mise en page CSS (Calque coch) est que la premire est spcie par rapport la page Freeway, alors que la mise en page CSS est spcie par rapport la page dans le navigateur (qui dpend de la taille de la fentre du navigateur). Positionner un bloc de taille xe une distance spcie du bord de la page du navigateur Par dfaut, Freeway spcie la position dun bloc par deux valeurs, la distance du haut de la page et la distance du bord

gauche de la page. Ces valeurs sont afches dans la palette Inspecteur, et modiables quand les boutons Gauche et Haut sont enfoncs dans la section Dimensions de longlet Rglages gnraux du bloc :

Vous pouvez aussi prendre comme rfrence les autres bords. Si vous enfoncez les boutons Droite et/ou Bas, la position du bloc peut tre spcie 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 navait pas t dni comme un calque, il aurait une position xe par rapport au coin en haut gauche de la page du navigateur. Positionner un bloc de taille xe par rapport la taille de la page du navigateur Une nouvelle fonction de Freeway 4 Pro permet de spcier les positions par un pourcentage de la largeur ou de la hauteur de la page du navigateur, au lieu dindiquer des valeurs en pixels. Quand la page est afche dans le navigateur, le bloc est positionn relativement la taille de la page du navigateur, ou du bloc CSS parent :

Les deux copies dcran ci-dessus droite montrent le repositionnement dun bloc quand on modie 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 entres dans les champs Bas et Droite.

Dimensions CSS
De la mme faon que pour le positionnement, les dimensions dun bloc peuvent tre spcies relativement la taille de la page du navigateur. Les blocs ainsi dnis ont leur taille qui sagrandit ou se rtrcit quand la taille de la fentre du navigateur est modie. Entrez les valeurs en pourcentage dans les champs Hauteur et Largeur de la palette Inspecteur :

Les copies dcran montrent les effets obtenus dans le navigateur, lorsque la taille de la fentre est modie. Bien entendu, il est possible de combiner ces valeurs comme vous le dsirez. Par exemple, vous pouvez xer les distances des bords gauche et droite du bloc dont les dimensions sadapteront pour quil reste toujours 50 pixels des bords de la page du navigateur :

Le bloc sagrandit 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 exible telle que dcrite dans cette section ne sapplique plus, car la page a dj une taille xe prdnie qui ne se redimensionne pas quand on modie la taille de la fentre du navigateur.

Blocs enfants
Une autre nouveaut de Freeway 4 est la possibilit de crer des blocs enfants. Vous pouvez crer deux types de blocs enfants, absolu et imbriqu. Les blocs enfants absolus sont positionns comme les blocs du premier niveau de votre page, sauf que tous les rglages de position/dimension sont relatifs leur bloc parent plutt qu la page. Les blocs enfants imbriqus sont dans le corps de texte dun autre bloc (parent), et leur position est donc fonction du texte qui les entoure. Blocs enfants absolus Pour crer un bloc enfant positionn en absolu, crez dabord un bloc dans votre page. Ensuite, crez un nouveau bloc entirement contenu lintrieur du premier bloc (son parent). Freeway vous indique que vous tes en train de crer un bloc enfant dune part en afchant une bordure autour du bloc parent, et dautre part avec un curseur spcial (une croix entoure dun carr en pointills). Note : si vous pressez la barre ESPACE pendant la cration dun bloc enfant, Freeway slectionne alternativement les diffrents blocs parents possibles. Dans lexemple 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 cration :

Une fois le bloc enfant dessin, il peut tre positionn par rapport son parent en utilisant toutes les mthodes dcrites prcdemment dans Positionnement CSS et Dimensions CSS. Il faut noter que, pour quun bloc enfant soit repositionn ou redimensionn, il faut que le bloc parent soit lui aussi rgl pour se repositionner ou se redimensionner quand la taille de la fentre du navigateur change. Dans lexemple ci-dessous, le bloc parent est positionn 50 pixels des bords gauche et droit, et le bloc enfant a son ct 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 fentre du navigateur :

Blocs enfants imbriqus Pour crer un bloc enfant imbriqu, cliquez dans un bloc HTML comme pour y diter du texte. Puis slectionnez Bloc HTML dans le menu Insertion. Un bloc HTML est insr dans le premier bloc (vous auriez aussi pu insrer un bloc graphique de la mme manire) :

Vous ne pouvez modier la position de tels blocs, qui est dtermine par le texte dans lequel ils se trouvent. Vous ne pouvez spcier que les dimensions dun bloc enfant imbriqu, que ce soit par les poignes ou par les champs de la palette Inspecteur, en pixels ou en pourcentage. Il est possible de crer des blocs enfants imbriqus dont le parent est la page. Freeway fournit un mcanisme spcial pour cela. Crez 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 chier HTML lors de la publication.

Bloc calque HTML et dbordement de texte

Quand les blocs sont rgls pour se redimensionner dans la fentre du navigateur, il arrive invitablement 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 grer de tels cas : le rglage Dbordement. Cet attribut peut tre rgl dans Freeway pour chacun des blocs calques HTML qui contiennent du texte. Le menu correspondant cet attribut se trouve dans longlet Rglages de sortie de la

palette Inspecteur :

Lattribut Dbordement peut prendre 4 valeurs. Le rglage par dfaut est Visible. Le texte dborde alors en bas du bloc si celui-ci est trop petit pour son contenu :

Les autres choix de lattribut Dbordement contraignent le texte lintrieur du bloc de diffrentes manires. Masqu tronque le contenu (la partie qui dborde nest pas afche), Ascenseur afche systmatiquement un ascenseur, et Auto afche un ascenseur uniquement en cas de besoin (quand le texte dborde) :

Permettre au navigateur de dterminer les dimensions dun bloc Les rglages prcdents sont bien utiles, mais il serait judicieux que notre bloc puisse sadapter son contenu plutt que de spcier comment il doit se comporter quand le contenu dborde. Ce rsultat peut tre obtenu en laissant indni lattribut Hauteur, cest--dire en laissant ce champ vide :

Maintenant, lorsque la largeur du bloc change en fonction de la taille de la fentre du navigateur, la hauteur du bloc change pour sadapter son contenu :

Pour les blocs enfants imbriqus, il est aussi possible de spcier la largeur comme indnie en laissant le champ Largeur vide. Le bloc enfant stend alors pour remplir la largeur disponible dans le bloc parent.

Dcalages et marges avec le CSS

Les dcalages et les marges sont communment utiliss pour arer les lments de votre mise en page. Le dcalage offre un moyen dloigner le contenu dun bloc lintrieur de ses bords, alors que les marges permettent dinsrer un espace lextrieur dun bloc imbriqu, entre ce bloc et le contenu qui lentoure. Appliquer un dcalage Le dcalage peut tre appliqu tout bloc pouvant avoir un contenu. Appliquer un dcalage est simple : il suft de slectionner un bloc et de choisir une valeur dans le menu droulant Dcalage du panneau Rglages gnraux du bloc de la palette Inspecteur (vous pouvez aussi entrer directement une valeur dans le champ Dcalage). Si vous cliquez maintenant dans le bloc HTML pour entrer du texte, vous verrez apparatre un cadre intrieur indiquant le dcalage :

Loption Personnaliser... du menu Dcalage permet de spcier des dcalages diffrents pour chacun des cts du bloc. Dcalage et dimensions du bloc Les dimensions afches dans la palette Inspecteur sont affectes lorsque lon applique un dcalage au bloc. Supposons que nous ayons un bloc de 300 pixels par 300 pixels :

et que nous lui appliquions un dcalage de 20 pixels :

Les champs Largeur et Hauteur ont t automatiquement mis 260 pixels. Cela provient de la manire dont Freeway (et le CSS) calcule la taille dun bloc. Comme le dcalage est ajout la taille du bloc quand celui est publi, Freeway rduit automatiquement la taille du bloc pour tenir compte du dcalage. Le bloc complet conserve donc la mme taille que celle que vous lui aviez initialement donne. Pour que vous nayez pas besoin de calculer la taille du bloc tel quil sera publi, Freeway dispose dune section Mesures cran dans la palette Inspecteur. Elle afche la taille et la position du bloc slectionn en tenant compte du dcalage ventuel que vous lui avez appliqu. Ainsi, pour le bloc prcdent, lafchage de ces donnes indiquerait :

Ces dimensions sont les valeurs correctes quand le bloc est afch dans un navigateur. Pour information, les calculs sont : Largeur mesures cran = dcalage gauche du bloc + largeur du bloc + dcalage droite du bloc Hauteur mesures cran = dcalage en haut du bloc + hauteur du bloc + dcalage en bas du bloc Dcalage et positions du bloc De mme que le dcalage affecte les dimensions, il peut aussi affecter le positionnement des blocs enfants lintrieur dun bloc parent auquel un dcalage est appliqu. En fait, seuls les blocs enfants non-calques sont affects par le dcalage appliqu au bloc parent. Un bloc enfant calque a une position relative au cadre de son parent, indpendamment du dcalage appliqu au parent. Un bloc enfant non-calque a une position relative au cadre de son parent, mais cette position est affecte par le dcalage appliqu au parent. La position est calcule par rapport lintrieur du dcalage du bloc parent. Par exemple, imaginons que nous dessinions un bloc HTML dans lequel nous ajoutons un autre bloc HTML enfant noncalque. Si nous entrons une valeur de 20px dans le champ Dcalage du bloc parent, le bloc enfant sera dcal de 20 pixels vers la droite et 20 pixels vers le bas. Voici les deux tats, sans et avec le dcalage :

Notez que les valeurs de position du bloc enfant restent inchanges dans la palette Inspecteur, car il est positionn dans le bloc parent en tenant compte du dcalage. Vous pouvez consulter la zone Mesures cran dans la palette Inspecteur qui fournit la position du bloc enfant indpendamment du dcalage. Appliquer des marges Les marges ne peuvent tre appliques qu des blocs imbriqus. Elles sont sans effet partout ailleurs. La cration de blocs enfants imbriqus est dcrite dans la section Blocs enfants au dbut de ce document. Appliquer des marges un bloc enfant est assez semblable lapplication dun dcalage. Slectionnez le bloc enfant, slectionnez les Rglages gnraux du bloc de la palette Inspecteur et entrez une valeur dans le champ Marge (ou slectionnez une des valeurs du menu droulant). Une bordure en pointills est alors afche autour du bloc, visualisant la marge que vous avez dnie :

Comme pour le dcalage, il y a une option Personnaliser... pour spcier une marge diffrente chacun des cts.

 Marges et centrage CSS Il existe une technique CSS (centrage CSS ou CSS-Centering) pour centrer horizontalement un bloc dans son bloc parent. Cette fonctionnalit est videmment gre par Freeway. Slectionnez Personnaliser... dans le menu Marge pour afcher le dialogue Marges. Cocherz la case Centrer. Cela met une valeur spciale (Auto) dans les champs des marges Gauche et Droite. Cliquez sur OK et le bloc imbriqu sera centr horizontalement dans le bloc :

Si le bloc parent est dni pour se redimensionner lorsque la taille de la fentre du navigateur est modie, le bloc enfant restera centr dans le bloc parent.

Blocs se chevauchant
Un des grands avantages dutiliser les blocs avec calque est leur capacit se chevaucher librement sans quils interagissent entre eux. Voici une mise en page dans Freeway et le rsultat obtenu dans un navigateur :

Quand le navigateur afche des cadres, il les superpose. Le bloc de texte HTML reste ditable (slection et copie) dans le navigateur. Le rsultat est nettement plus facile et efcace que la mise en page base de tableaux de blocs non-calques. cause de la manire dont sont traits les blocs avec calques par le navigateur, ils sont toujours mis au-dessus des blocs non-calques de la page. Linterface de Freeway rete cet tat de fait et tous les blocs calques sont mis devant les blocs non-calques. Si vous modiez la case cocher Calque dun bloc, Freeway peut donc changer sa position dans la liste des blocs de la page et le bloc peut tre mis devant (ou derrire) dautres blocs. Les blocs calques et laction Rollover Laction Rollover ncessite que les blocs graphiques impliqus aient le rglage Fusionner images coch dans Freeway. Comme il a dj t observ, les blocs graphiques avec calques ne se fusionnent pas entre eux. Si vous crez un Rollover avec des blocs calques comme vous le feriez avec des blocs non-calques, il ne marchera pas. Bien entendu, il y a moyen de combiner la libert de mise en page des calques et les fonctionnalits du Rollover. La mthode la plus simple est de crer les blocs graphiques avec calques que vous dsirez utiliser dans un Rollover, de les slectionner tous les deux et de crer un bloc les contenant avec la commande Grouper du menu Bloc :

Lun des blocs tant slectionn, appliquez laction Rollover dans le sous-menu Action du menu Bloc, puis rglez les paramtres du Rollover dans la palette Actions (voir la documentation de Freeway pour de plus amples informations Tutoriel 3 dans Premiers pas avec Freeway et Crer des effets dynamiques dans Utiliser Freeway) :

Une fois votre Rollover ainsi cr, il peut aisment chevaucher dautres blocs :

Rglages Flottant et Effacer

Il est souvent utile de pouvoir habiller des blocs (particulirement des images) par du texte dans le mme ux de texte. Freeway 4 introduit le support dun attribut CSS pour obtenir cet effet - ottant (oat). Il vous permet de spcier un bloc imbriqu habill par du texte coulant sa gauche ou sa droite. Par exemple, considrez cette mise en page dans Freeway - un bloc HTML imbriqu suivi de texte :

Si nous dsirons que le texte habille le bloc par la droite (que le bloc otte gauche du texte), nous rglons la valeur Flottant sur Gauche dans les rglages gnraux de la palette Inspecteur :

et si nous prfrons que le texte lhabille par la gauche, nous rglons la valeur Flottant sur Droite :

Cet effet peut tre appliqu tout bloc enfant imbriqu, bien que la mthode varie lgrement sil sagit dun bloc HTML ou sil sagit dun bloc graphique. Pour un bloc HTML imbriqu, slectionnez soit Gauche soit Droite dans le menu droulant Flottant de la section Dimensions de la palette Inspecteur :

Pour un bloc graphique imbriqu, les valeurs Gauche/Droite se trouvent dans le menu Aligner dans la section Dimensions de la palette Inspecteur :

Sil y a plusieurs blocs imbriqus prsents, cela peut se traduire par un rsultat comme celui-ci :

Sil nest pas souhaitable que le bloc bleu tourne autour du bloc rouge, nous pouvons utiliser le rglage Effacer pour spcier que nous aimerions que le bloc bleu sot positionn aprs le bloc ottant. Ce rglage se trouve lui aussi dans la section Dimensions de la palette Inspecteur :

Slectionnez le bloc bleu et rglez le menu Effacer sur Gauche pour quil se place sous le bloc rouge :

Il y a trois valeurs possibles (autre que Sans) pour le menu Effacer. Gauche dconnecte le bloc des autres blocs imbriqus ottant gauche, Droite des blocs ottant droite et Les deux des blocs ottant gauche ou droite.

Conclusion
Le CSS est un langage trs simple, mais avec des rgles dutilisation qui peuvent tre complexes. Ce guide est destin vous donner sufsamment dinformations sur lapproche et lutilisation du CSS dans Freeway Pro pour pouvoir lutiliser dans vos mises en page, mais il na pas la prtention dtre un guide exhaustif sur le sujet. Vous trouverez dautres informations sur le CSS sur les sites Web suivants : Pour les dbutants : http://www.htmldog.com/guides/cssbeginner/ http://www.createwebmagic.com/css101/ http://www.davesite.com/webstation/css/ Pour les experts : http://www.positioniseverything.net/ http://www.quirksmode.org/ http://www.alistapart.com/ Cration de ce guide : SoftPress Traduction de ce guide par TRI-EDRE Tous droits rservs