Squelette koakidi v3

skl_koak_v3.zip

Elèments de base des squelettes du site.

Je traite ici, succintement, de l’aspect général des pages, l’imbrication des éléments CSS et des objets graphiques, comme base de travail des squelettes de Koakidi.com version 3. Si vous avez quelques notions d’HTML et de CSS ça devrait être simple à comprendre !

0Mieux qu’un long discours ...0
Combinées avec la lecture du fichier CSS joint, les illustrations présentées ci-après devraient être plus parlantes qu’une fastidieuse explication. Fastidieuse pour moi ... déjà !

L’ébauche graphique

La méthode faut-pas-se-fouler (on est koak2.0 ou on ne l’est pas !)

Généralement je fais une ébauche sous photoshop (ou GIMP c’est du libre) de l’interface désirée. C’est un premier visuel qui permet de coordonner les couleurs, de préparer/simuler le positionnement des éléments (graphisme et texte). Puis de les ajuster au fur et à mesure de l’élaboration des squelettes pour tenir compte des impératifs CSS ...
On aboutis à ceci :

Lors de la rédaction du fichier html de base et de la feuille de style liée, j’affecte à chaque <div> une couleur bien flashie et différente afin de bien repérer les positionnements et comportements. J’affine alors mon ébauche et peux ainsi préparer le découpage (filets rouges sur l’ébauche) et affecter enfin les background-image, etc.

Mais reprenons dans l’ordre ...

Le CSS

Ouvrez le fichier css et html fournis dans l’archive en observant l’illustration suivante. Cela devrait être plus clair, non ?

21 - <div id="conten_page">
2 - <div id="conten_fond"> .. Sur koakidi, c’est lui qui recoit la couleur de page (blanc_cassé !).
3 - <div id="conten_corps"> .. Ce div, à l’intérieur du numéro 2, fixe (padding) la zone de contenu principale ; sur l’illustration : la zone plus claire !
4 - <div id="bord_fond_g">&nbsp;</div> et <div id="bord_fond_d">&nbsp;</div> .. Bande étroite qui reçoit le mini gif de bord.
5 - <div id="conten_tete"> et <div id="conten_pied"> .. Dans lesquels on aura les angles principaux. Zones de superposition des éléments 4 et 5.
6 - <div id="conten_gg"> .. le menu.
7 - <div id="conten_dd"> .. les raccourcis.
2

N’apparaissent pas ici, les deux petits « onglets » : « haut de page » et « bas de page ». Que l’on peut former ainsi :
<a href="#bas" title="Bas de page" id="conten_dd_rh"></a>

Position des élèments graphiques

Simple non ? Je n’explique pas plus ici, vous verrez que les noms de classes et fichiers devraient êtres assez explicites !

L’archive fournie

Vous trouverez donc dans le ZIP ci-dessous :

2
Les trois illustrations proposées dans cet article.
.. plus
sk3_base.html .. le fichier de squelette type.
sk3_style.css .. la feuille de style associé.
2

Accueil
L'auteur ...
Ecrire à Hugues
Plan du site
... quelques liens !
Catalogue
:::  koakidi.com © 2002-2017 :::  Crédits  :::  spip   koak2.0  :::  ico 1037111  :::  ff  :::