Formations web et création graphique - Débuter avec les CSS

Fermer



Connexion

Débuter avec les CSS

Montage en Div/CSS, site valide Xhtml-CSS, Tableless-CSS… Vous débutez avec le html et ne comprenez rien à tout ça… Votre cas n'est pas désespéré. Nous allons vous expliquer en quoi consiste le montage avec les feuilles de style en cascade, dites aussi CSS (cascading style sheets).

Au début était le langage HTML : une suite de texte collé à la queue leu leu et à peine formaté : gras, italique etc.

Quand il s'est agit de mettre en page on a bien été embêtés, alors on s'est tourné vers une solution de facilité : les tableaux.

En fusionnant les cellules de tableaux sans contours apparents on est parvenu à placer les choses à peu près ou on voulait dans l'écran.

Mais le code était bien lourd et surtout, quand les développeurs devaient placer du contenu servi dynamiquement, ils ne s'y retrouvaient pas toujours dans le bazar créé par les graphistes.

Pour bien comprendre voici une structure de page simple. Ici on est sous Dreamweaver mais ce serait à peu près la même chose avec Frontpage ou Kompozer.

alt

Les 4 grandes parties de la page sont les cellules d'un tableau. En voici une autre visualisation :

alt

et le résultat dans un navigateur :

css

Dès que vous mettez des éléments en forme (ici le titre) Dreamweaver fabrique automatiquement des styles :

css

Ici le style1 a été généré par Dreamweaver (fond orange, texte blanc etc)

Derrière tout ça il y a du code. En le regardant de plus près vous remarquez que dans l'en-tête se trouve défini le style1 et qu'il s'agit dun style CSS.

css

Et dans le corps de la page vous trouvez le tableau et la partie qui a été "stylée" par Dreamweaver, ici une Span

Si le titre était livré dynamiquement et que le développeur devait placer du code à cet endroit il aurait du mal à le trouver car la structure ne correspond pas à une logique de contenu mais de mise en forme.

Malgré tout ce système utilise les CSS et présente quand même des avantages:

  • Le stylage n'est pas dans la page mais dans l'en-tête ou carrément externalisé.
  • Il peut aussi être mutualisable pour un ensemble de pages

A ce stade on s'est dit qu'on devait aller plus loin et se passer carrément des tableaux.

Reprenez une page vierge. En cliquant sur la petite icône en bas de la palette des styles vous pouvez créerr un conteneur pour notre page:

css

Donnons-lui un ID (identifiant unique) que nous allons appeller #global (très important le dièse) avec des réglages sur la Boîte et le Positionnement pour bien centrer tout ça.

css

css

Avec pour résultat un beau carré au centre de notre page. Et Il n'y a aucun tableau. C'est votre premeir graphisme web Tableless (sans tableau).

css

Mais vous allez me dire : D'accord mais comment faire pour mettre l'équivalent des cellules comme l'en-tête etc?

C'est très simple : on va emboîter les élements "fils" les uns dans les autres.

Dans le Global on va mettre  Gauche, Centre et Droite et ainsi de suite… Dans Gauche on va mettre des Inter-titres, du Texte etc.

Comme les choses seront bien rangées les unes dans les autres on se approchera d'une logique de contenu ce qui facilitera ensuit des imports depuis des bases de données ou du XML. Cet emboitement est le fondement des CSS.

Faisons l'en-tête. Avec le curseur dans le #global insérez une Div (via le panneau insertion ou via le menu).

Vous pouvez alors créer un style CSS avec le bouton du bas et le définir. SI vous vous loupez ce n'est pas grave car un style peut être changé à tout moment par la suite.

css

css

css

Et voilà. Vous pourrez ensuite saisir le titre. Notez que le code est plus simple dans la page et que si vous devez placer un appel PHP ou un bout de code vous trouverez son emplacement plus vite.

Il faut être honnête, les CSS ne sont toutefois pas exemptes de problèmes notamment pour les centrages verticaux, mais c'est devenu aujourd'hui la seule méthode viable pour monter des pages correctement.

Ajoutez à cela qu'avec un code plus clair, les moteurs de recherche se retrouvent mieux dans votre fourbi. Vous aurez donc un meilleur référencement naturel avec un montage de ce type.

Pour finir votre flux de production sera accéléré et plus fluide en environnement contributif.

Si vous êtes débutants, relaxez-vous, Dreamweaver vous propose la création automatique de pages déjà formatées selon les standards Div-CSS :

css

Ici vous pouvez choisir:
  • le type de mise en page
  • l'emplacement de la feuille de style qui regroupera vos règles CSS
Il ne vous restera qu'à mettre ça à votre goût.

Elle est pas belle la vie?

Bises.