Comment bien commencer en CSS ?

Bonjour à tous,

J'ai appris ce week-end en formation d'infographie que le temps
des frames, iframes et tables était revolu et qu'il fallait programmer
de preference en css, div, etc..

Seulement voilà, j'ai pris de mauvaises habitudes et je ne vois pas
comment programmer correctement et dans l'ordre une page web, quelles
syntaxes utiliser etc.

Voici le look de mon projet actuel (newsletter)
http://www.dhk.be/newsletter/newsletter12.html
J'aimerais refaire mes marques sur ce projet et voici mes questions :


Comment programmer et dans quel ordre (centrage de la page "feuille de journal" sur l'ecran)
Quelles sont les questions à se poser pour encoder tout cela au mieux, je dois
prévoir des blocs fixes de textes, et l'image de la feuille de journal de fond est
découpée en plusieurs petites pour charger plus rapidement, est-ce la meilleure methode?

J'ai vraiment besoin d'un ptit coup de pouce car meme en ayant lu certains tutoriels,
je ne vois plus trop ce que je peux et ne pas faire, et surtout avec quelles syntaxes.

Un grand merci d'avance pour votre aide à tous.

Salut et bienvenue ici !

a écrit :
J'ai appris ce week-end en formation d'infographie que le temps
des frames, iframes et tables était revolu et qu'il fallait programmer
de preference en css, div, etc..

Je vois que tu as des formations de qualité ! (puis-je la connaître ?)

Pour répondre à ta question générale, je me permets de te renvoyer vers un excellent tutoriel pour débutants, que tu as certainement dû voir en lisant le post-it dans le salon CSS intitulé Méthodologie à lire avant de poster dans ce salon.

Ce tutoriel est vraiment la base, le B A BA.
Ensuite, la référence pour apprendre à bien utiliser les CSS et les Standards est OpenWeb et plus particulièrement ce lien : http://openweb.eu.org/css/

Pour le positionnement et pour des cas concrèts, Alsacréations propose également des tutoriels.

Pour finir, si tu en veux encore plus, il existe un lien dans le menu vers des centaines de Ressources.

J'espère que cette première étape d'apprentissage ne te rebutera pas.

Note : si le coeur t'en dit, je t'invite à te présenter à la Communauté dans un post prévu pour cela.

Bonne continuation parmi nous

EDIT :

a écrit :

Seulement voilà, j'ai pris de mauvaises habitudes et je ne vois pas
comment programmer correctement et dans l'ordre une page web

Pour répondre à cette question précise, je te renvoie sur ce billet où je propose une méthode :

a écrit :
Trois étapes :

1. En général, on commence par faire une structure (HTML ou XHTML) propre, qui est fonctionnelle sans styles, scripts ni mise en page particulière. Un document web doit toujours être consultable sans mise en forme (CSS) ni scripts ou plugins. Cette étape prend en compte ce que j'ai appelé Principes Fondamentaux, ainsi que la validation (X)HTML.
2. Puis on s'attache à la mise en page générale, aux CSS, en se référant aux Standards et en testant sur les navigateurs qui respectent ces normes (Mozilla, Firefox, Opera par exemple). Le document doit passer avec succès les validateurs CSS et Accessibilité.
3. Pour finir, on adapte le tout par rapport aux "mauvais élèves" (Internet Explorer, vieux navigateurs), soit en simplifiant les CSS soit en utilisant des hacks (bidouilles)... soit en les ignorant ! (le tout est de s'adapter à son public cible). A savoir qu'il faut parfois se poser la question du choix entre le vieux navigateur et l'accessibilité aux handicaps.

Bonjour à toi et merci pour ta réponse...

En effet cette formation est vraiment de qualité mais c'est aussi une belle claque en pleine figure par rapport à toutes mes connaissances passées....sniff.

Mais bon, concretement j'ai plus de facilité à assimiler un 'nouveau language' en bidouillant un exemple concret, d'ou ma demande par rapport à mon projet web (newsletter, lien plus haut)

Peux tu, toi ou quelqu'un d'autre d'ailleurs reprendre les points importants que je dois suivre ou eviter pour bien programmer cette page, il me semble, que de pres ou de loin elle reprend un peu toutes les aspects d'un site web en general, donc si je sais deja faire ca, savoir pourquoi encoder telle ou telle syntaxe etc, je pourrais m'estimer heureux et ensuite me perfectionner avec les adresses que tu m'a gentiment transmises...

A vot' bon coeur ;o) et merci d'avance.

Autre conseil, un grand café et beaucoup de patience car ce n'est pas chose facile que de faire un site accessible, joli, valide, et tout et tout. Bon courage

humbucker a écrit :
Mais bon, concretement j'ai plus de facilité à assimiler un 'nouveau language' en bidouillant un exemple concret, d'ou ma demande par rapport à mon projet web

Mouais, d'abord faire sa page, puis apprendre à faire une page ensuite (théorie) est un point de vue que je peux comprendre mais que j'ai du mal à partager.
En mettant la charrue avant les boeufs, tu t'emmêleras automatiquement les pinceaux, tu devras revenir pour bidouiller tes premiers jets et au final tu y perdras bien plus de temps.

Ce n'est qu'un avis personnel bien sûr et chacun fait ce qu'il veut. En tout cas cette vision des choses ne m'incipe pas vraiment à participer; j'aurais l'impression de parler dans le vide :

a écrit :

- tu dois mettre ton bloc en flottant avec un clear both
- euh ouais ok, mais c'est quoi un bloc ?

(c'est un exemple volontairement exagéré)

Bref, j'espère en tout cas que les membres du forum viendront à ton secours !

Je comprends ton point de vue, moi je suis plutot du genre à lire les grandes lignes d'un mode d'emploi...lol

Avez-vous un ouvrage, rien ne remplace un bon vieux bloc de papier à me conseiller, si on ne devait en garder qu'un seul que vous avez deja lu, je veux revoir les css, le xhtml (je suppose que c'est lié) les div, etc... francais ou anglais, peu importe

Un grand merci, !

Je peux te proposer un petit tutoriel qui explique un peu la démarche de conception :
http://www.elmoustikoblog.net/tutoriels/css/mise_page/

C'est succins, mais ça devrait te donner une idée de la marche de manoeuvre à suivre

humbucker a écrit :

Avez-vous un ouvrage, rien ne remplace un bon vieux bloc de papier à me conseiller, si on ne devait en garder qu'un seul que vous avez deja lu, je veux revoir les css, le xhtml (je suppose que c'est lié) les div, etc... francais ou anglais, peu importe

En fait, chaque chapitre des tutoriels d'Alsa est téléchargeable en PDF

Sinon, tu as une liste de livres incontournables en haut du forum, et tu as dans ce lien une liste plus complète, commentée par les membres du forum :
http://forum.alsacreations.com/topic.php?fid=7&tid=6

Et si tu aimes les magazines, je te conseille ceci : http://forum.alsacreations.com/topic.php?fid=9&tid=1077

PS : au fait, je ne voulais pas t'envoyer balader, j'espère que tu ne l'as pas mal pris. Si vraiment personne ne participe à ton sujet pour te dépanner, je verrai ce que je peux faire

Non non pas du tout, je comprends vos points de vue, et vos manières de travailler.
Je programme en html depuis 6 ans peut etre plus, et je pensais me debrouiller plutot bien, je ne programme que dans le bloc-note lol, alors ce w-e quand on m'a bien fait comprendre que le css etait indispensable pour faire un site a partir de zero, ca a été dur, car je dois tout revoir, et je suis impatient, je me servais des css en fichier externe pour definir le texte voila tout, pas pour situer des elements etc...

Je re-itère ma question, un bouquin un seul, ce serait?
CSS COOKBOOK ca parait bien? un truc qui parle de tout lol..
merci, bon aprem

humbucker a écrit :

Je re-itère ma question, un bouquin un seul, ce serait?

Hum, en fait, je n'en connais pas
Tu as d'un côté les "bibles" de propriétés qui expliquent chaque propriété en détail, d'un autre côté les livres pratiques avec cas concrèts (pas encore en français malheureusement) et qui s'adressent à ceux qui ont déjà lu les bouquins de propriétés. Bref, un cercle vicieux.

@ Raphael > Ne trouves-tu pas un coté assomoir au "bible de référence" ?

Groumphy a écrit :
@ Raphael > Ne trouves-tu pas un coté assomoir au "bible de référence" ?

Exact, mais il est difficile de passer aux CSS sans connaître les propriétés CSS (qui heureusement ou malheureusement sont très nombreuses).
En tout cas, il n'existe pas de livre qui soit à la fois une méthodologie pour créer des sites en CSS et un apprentissage des bases des CSS