Première ouverture de la feuille de styles
Par Kozlika le vendredi 7 mai 2004, 21:49 - Lien permanent
J'essaierai de continuer les "étapes", mais là j'ai fait quelques aménagements et je préfère le noter tant que je m'en souviens...
Mais si quelqu'un voulait enchaîner sur l'étape 2. Premier lancement, je suis prête à faire un copier/coller de belle facture (MàJ. - finalement j'ai fini par m'y coller moi-même, voir billet "Mon premier billet")...
Ayant réussi à poster mon premier billet, donc, je me précipite bien évidemment sur mon blog pour voir ce que ça donne...
... Enfer et damnation !
(J'exagère pour vous tenir en haleine.)
La mise en page me plaît... moyennement on va dire. Je n'aime pas le fond gris avec ma page blanche au milieu, je n'aime bas le bandeau rectangulaire en haut. La disposition me convient à peu près pour le moment mais le plus urgent me semble que tout le fond soit blanc et que je puisse afficher la petite image que j'ai fait de mes petites mains dans le coin en haut à gauche.
Le truc où ça se passe, c'est le fichier style.css qui se trouve dans Dotclear -> themes. Si vous connaissez, tant mieux pour vous, passez votre chemin :-).
Petit conseil que je qualifierai de judicieux : Je m'assure d'abord que j'ai bien conservé sur mon disque dur le dossier Dotclear avant mes tentatives personnelles. Comme les données sont conservées dans la base, si je fais trop de dégâts dans la présentation je rechargerai le fichier incriminé et je reviendrai à la présentation de départ. Je le duplique donc ce fameux fichier et je le mets dans mon dossier brouillons pour pouvoir clapoter dedans tout à mon aise. (MàJ. - Conseils méthodologiques développés dans le billet "Avant d'aller plus loin")
Ce fichier peut s'ouvrir avec un traitement de texte quelconque. Je l'ouvre donc avec Textedit. Attention : pas de double-clic, ça s'ouvrirait dans le navigateur et je ne pourrais pas le modifier (je le sais, c'est ce que j'ai fait...). On y trouve d'abord tout un tas d'infos en anglais dont chaque ligne est précédée d'un astérisque. C'est que les lignes qui commencent ainsi sont des commentaires et ne risquent pas d'être prises pour du code. Ces quelques lignes, mon anglais même sommaire me permet de comprendre que c'est la licence. Ensuite il y a des trucs que je comprends et d'autres plus obscurs pour le moment.
En tout cas, on voit bien que les éléments constitutifs du blog sont décrits ; on les reconnaît au fait que le programmeur a gentiment séparé par une ligne continue les différents éléments :
body c'est tout l'espace de la fenêtre du navigateur ;
prelude c'est la série de liens tout en haut (Aller au contenu, Aller au menu et Aller à la recherche) ;
top c'est la partie bandeau ;
page c'est la partie sous le bandeau, avec :
- main pour la partie principale;
- content pour les blocs où viendront se loger les posts ;
- liste commentaires + formulaires ceux où apparaîtront les commentaires et les formulaires (étonnant, non ?) ;
- Menu la partie à droite (pour moi) où apparaît le calendrier, les liens, etc. ;
- footer le pied de page.
Bon, la suite demain paske là je suis crevée !
Commentaires
Exactement ;-)
- Pour la license, tu peux la virer si elle t'embête (du moins dans les css).
- Pour le reste, il est utile de comprendre le fonctionnement de la liaison entre la "feuille de style" (c'est à dire la CSS, Cascade Style Sheet) et la feuille qui donne les directives html au navigateur (c'est-à-dire template.php).
On remarquera que toutes les classes (body, main, content etc etc..) se retrouvent à certains endroits bien précis dans les templates. En étudiant ce fonctionnement on peut créer de nouvelles classes à volonté ;-)
Et c'est à ce moment très précis qu'on s'aperçoit que l'on commence à programmer en PHP et CSS :o)
Bon courage, çà avance bien.
Comme je recommande DotClear à des tas de bloggueurs que je connais, et que tes explications sont remarquables... je m'en vais dès que possible, placer ton blog en signet favori ;-)
Merci pour ces notes très claires.
page est l'élément externe du blogue. Il comporte en éléments internes top, suivi de prelude, main, footer, et à droite menu.
Cymago -> Je ne comprends pas ce que tu appelles "externe" ? Externe à quoi ?
Je rectifie l'alignement de footer dans mon billet pour l'aligner en sous-catégorie de page. Merci de ton aide !
c'est la boîte (page) qui contient toutes les autres.
En HTML
<div id="page">
les autres div
</div> le fin de div page
Illustration: l'entourage du blog cvie
border: 6px solid #888;
est mis dans page
hum, bien! et donc la on peut en imbriquer combien ? autant qu'on veut ?