Quels sont les modèles de conception pour HTML et CSS?

Question

Je sais que c'est une question très embrassante, mais je viens de commencer avec Ruby on Rails, et j'ai encore un long chemin avec CSS et HTML. Il y a beaucoup de livres sur les modèles CSS et HTML, mais j'aimerais savoir ce qui est réellement appliqué aux pages Web réelles. Par exemple, quelle est la meilleure façon de faire une simple page Web avec un menu latéral, un logo sur le dessus, et du texte ci-dessous? Ok, ça semble stupide, mais il y a beaucoup de façons de le faire, ou pas? Alors, comment puis-je apprendre ces modèles et quels sont les vrais modèles?

apprécierait des suggestions de livres, des articles, etc.

Answer 1

vous pouvez trouver quelques bons modèles css ici:

http://www.csszengarden.com/

Answer 2

Il varie d'un développeur au développeur. Alors je vais juste vous dire ce que je fais!

Je suis en fait un modèle très commun - séparer chaque disposition du contenu!

dans le code HTML va ...

• Texte
• <div/> conteneurs avec ID à layouted

Et dans le CSS va ...

• mise en page pour ID'd et classé <div/> conteneurs de disposition
• Couleurs, images d'arrière-plan
• Fonts

Il permet de changer rapidement toute la conception de la page sans même toucher le HTML! Et cela diminue à la fois le trafic de votre serveur et le temps de chargement sur les pages client, car le fichier CSS peut être mis en cache, puisqu'il ne change pas autant que le HTML!

Le CSS Zengarden nate affiché est un très bel exemple de ce modèle. Le même HTML non modifié avec des dizaines de fichiers CSS avec des looks totalement différents!

Ce modèle permet également d'afficher le même code HTML non modifié avec des fichiers CSS sélectionnés automatiquement sur des écrans géants, sur de petits netbooks et sur des appareils mobiles. Ne peut pas être mieux si vous me demandez!

Answer 3

Actuellement, en HTML et CSS, il n'y a pas de motifs dans le sens oo.

Je trouve ce tutoriel très utile: Design and Code your first website

Le site de Nettuts a beaucoup af très bons tutoriels gratuits.

Un très bon livre pour commencer est:

Head First HTML with CSS and XHTML

Answer 4

La règle de base devrait être de faire toute la conception en CSS et HTML est juste HTML sans appel à la conception. De cette façon, comme mentionné ci-dessus, vous pouvez changer de conception rapidement.

Une bonne référence pour la façon dont cela fonctionne est le site CSS Zengarden à: http://www.csszengarden.com/

Ce site je souvent que j'ai appris les tenants et les aboutissants de la conception CSS.

Answer 5

Vous voudrez peut-être vérifier certaines bibliothèques CSS.

Je n'aime pas personnellement les utiliser parce que j'ai des façons que j'aime faire et parfois ils ne sont pas assez flexibles pour ce que je veux faire. Mais étant donné que vous débutez, ils peuvent vous aider à obtenir un résultat qui semble très rapide sans avoir à vous soucier des bogues flottants ou de l'effondrement des marges ou d'autres bizarreries CSS faciles à toucher mais difficiles à reconnaître si vous n'avez pas vu les avant.

Un exemple serait le Yahoo User Interface (YUI) Grids CSS qui vous aidera à configurer de nombreux types de configurations de réseau. Pour en savoir plus, je chercherais "css framework" ou "css library".

Une autre ressource YUI que je pense serait vraiment utile pour vous serait leur design pattern library, qui documente différentes façons d'afficher des éléments d'interface communs et vous donne les ressources pour les implémenter. Cela peut aider à rendre votre interface familière aux utilisateurs et vous empêcher de penser que vous devez repenser une zone de liste déroulante ou quelque chose du genre.