Squelette koakidi v3

scoty portrait

Le 09/06/2006

> 12336 visites

··  1 Fichier joint  ··
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 !

Mieux qu’un long discours ...

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 ?

1 - <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.

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 :

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é.

Fichiers ...

skl_koak_v3.zip

Elèments de base des squelettes du site.

81.6 ko

2470 - 22/08/17

Vous dites .. Les Forums !
Catalogue des fichiers
Ecrire un mail à Scoty ?!
Liste des liens proposés
Fil RSS de KOAKIDI.
Rédacteurs du Site
En savoir plus sur Koakidi.com et Scoty.
... mais ça cause de tout et n’importe quoi !
des skins maisons, pour Winamp 2.xx.
Photos, peintures et autres peut-être.
Des collections d’icones de création maison !
Galeries, Skins, Icônes, et autres babioles ...
Application modifiant divers éléments graphiques de W98 / W2k / XP
Essai : Règles pour JdR ... Eh oui !
Bases et création d’un personnage.
Scoty a - peut-être - des choses à dire !
Puisqu’il vous le dit !
Personnaliser Netscape7 ou Mozilla
Ou ce que Scoty en a fait. Et ça n’engage que lui ! Scripts et autres...
Gospel camerounais, négro spiritual, négro song, gospel
Skins maisons pour le mini notificateur de mails : EzPop.
Le compteur de téléchargement pour SPIP. Installation et Fonctionnalités.
Installation & Mise-à-jour - Fonctionnalités.
Documentation en Français.
Installation & Mise-à-jour - Fonctionnalités.
Documentation en Français.
Divers plugins pour SPIP.
Activité du jour, Balises blocs, Ratelier, Icônes privé.
Plugin de gestion de Forums + Jeu de squelettes
Archives plugins. Scripts pour version de SPIP antérieur à 1.9.x
Installation, configuration, fonctionnalités ...
::: v. 5.0 · scoty ::: koakidi.com © 2002-2017 :::  Crédits  :::  spip   koak2.0  :::  ico  999235  :::