28173 sujets

CSS et mise en forme, CSS3

bonjour à tous.
travaillant depuis plusieurs années en post-production en tant que truquiste - "trucologue" serait plus juste !... -,
le design web me titillait depuis longtemps; je passe enfin à l'acte !
après une formation express de 5 jours (!) sur DW histoire de me mettre le pied à l'étrier - j'ai littéralement essoré
mon prof !! -, quelle ne fut pas ma grande surprise dès mes premières recherches de réponses sur le net en
découvrant que je devais grosso-modo tout ré-apprendre; mon prof m'avait bien prévenu de l'importance des CSS,
mais, certainement dans le souci de procéder par étapes, il m'a initié à la mise en page par... tableaux !!... - il semble
que ce soit encore la méthode de pas mal de designers, mais mes recherches personnelles me portent à trouver
l'éthique du W3C plus juste -
me voilà donc parti à l'assaut des <div>, la tête dans le cambouis !!...
un grand bravo donc pour votre site complet, agréable et qui m'a jusqu'à maintenant guidé de façon claire et efficace...

une question de confort m'étreint devant l'ouvrage:
y-a-t-il une méthode, un outil, une astuce pour mettre en place la mise en page de façon graphique (photoshop,...)
avant de la traduire en code ? je pense par exemple au positionnement des blocs; comment les placer graphiquement
et ensuite récupérer leurs coordonnées ?...
merci d'avance.
Modifié par spidflinch (09 Jun 2006 - 20:30)
Administrateur
Bonjour et bienvenue spidflinch,

je retiens de ton 1er paragraphe que tu es sur la très bonne voie Smiley smile

Pour ce qui est de ta question, je ne suis pas spécialiste mais je dirais que si l'une des méthodes de positionnement en CSS -absolue - (3ème et dernier article indispensable d'Openweb sur le positionnement) permet(trait) plutôt facilement de faire ce que tu demandes, elle a suffisamment de défauts pour ne pas être employée dans la plupart des cas (manque d'élasticité dans toutes les résolutions d'écran qui existent par exemple).
Vouloir figer un design comme cela se fait en print ou en mise en page par tableaux, au pixel près parfois, est souvent demandé mais cela pose des problèmes de compatibilité entre navigateurs (recours à de nombreux hacks), d'agrandissement des caractères (c'est le visiteur d'un site qui décide s'il est mal-voyant, presbyte à la quarantaine ou a une vue d'aigle, pas le concepteur du site), de site ridiculement petit en 1600x1200 ou rempli de scrollbars en 800x600, etc
Ce que j'ai pu lire comme conseils (mais c'est difficile à appliquer, faut parfois transiger ...), c'est de laisser un peu la bride sur le cou au design dans certaines situations. Le visiteur s'attend à ce que le site soit correctement affiché sur son navigateur dans sa configuration (agrandissement, JS ou pas, Flash ou pas, etc) càd que 2 éléments ne soient pas superposés, qu'il ne manque rien d'important, qu'il n'y ait pas un gros vide quelque part dans la page mais il n'ira pas comparer si cela s'affiche exactement pareil dans 2 navigateurs différents ...
ouf! devant la densité de ta réponse - merci ! - et après ingestion de quelques pages d'Openweb, je commence à mieux cerner la portée de ma question, et la conception d'un site... j'entrevois le jonglage de techniques et d'astuces qui permettent une mise en page riche, dynamique et compatible entre navigateurs ET utilisateurs...
mais... (!)

concrètement, je me suis attelé pour débuter à un projet assez complet de site qui contiendra des infos texte auxquelles je pourrai appliquer évidemment les-dites techniques, mais aussi beaucoup d'animations vidéo, de photos et de sons, pour lesquels je souhaiterais une interface orientée image (outre leurs titres secondaires ou autres balises ou infos "cachées")... ...avec une approche vraisemblablement plutôt "artistique", pour ne pas dire transformiste, voire bordélique !! Smiley cligne

d'où l'envie de concevoir les choses graphiquement avant de rentrer dans le code, et l'idée (à l'instar des slices de photoshop qui s'exportent en tableaux) d'une astuce pour récupérer les coordonnées des images (ou calques - oouhla, je l'ai dit !!!) composant la page, afin de les intégrer en CSS ensuite...
- non non je ne renâcle pas à manger du code; j'adore ça !!... Smiley biggrin -

tous avis et conseils sont les bienvenus...
(y-a-t-il mieux que recupérer les dimensions des cellules du tableau exporté ?!)
Modifié par spidflinch (12 Jun 2006 - 16:44)