2009-05-12 4 views
0

Was ist die Best Practice/Methodik für die Erstellung einer Webseite, die Browser-kompatibel und rein in CSS ist, außer natürlich den Inhalt. Ich merke, dass große Namen wie yahoo.com CSS ausschließlich für das Layout verwenden, was den Inhalt in Handgeräten recht gut macht. Da ich die Möglichkeit habe, die externen Websites neu zu gestalten, möchte ich diese Methode einbeziehen, aber ich weiß nicht wie. Hinweis: Ich benutze JSF, aber Standard-HTML/CSS-Beratung ist genauso willkommen.Wie in reinem css ähnlich den großen Websites zu entwerfen

Antwort

1

Ich denke, ein guter erster Schritt für Sie ist die Verwendung eines CSS-Frameworks. Das Ziel solcher Frameworks - laut Wikipedia - ist es, "einfachere, standardkonformere Gestaltung einer Webseite zu ermöglichen", was genau so klingt, wie Sie es wünschen.

Wie für welche CSS-Frameworks zu verwenden, kann ich nichts selbst empfehlen.

2

Ich wollte die gleiche .. hier sind die beiden Ich mag und zu sein scheinen die beliebtesten/unterstützt

http://www.blueprintcss.org/

http://960.gs/

+0

Ich würde auch wählen, 960.gs zu überprüfen. Es hilft beim Layout Ihrer Blöcke, ist aber kein Ersatz für das Verständnis, wie Sie Dinge mit CSS stylen können. – Kekoa

1

Ich empfehle einen CSS-Framework, um loszulegen. Sie erhalten eine großartige Grid-Struktur für Ihre Seiten (wie die großen Namen, die Profis verwenden) und beschleunigen schnell Ihre Entwicklungszeit, sobald Sie sich an ein Framework gewöhnt haben.

Weil Sie yahoo erwähnt haben, empfehle ich ihre YUI Grids CSS für Layout.

Ich bevorzuge die blueprintcss, weil es einen Stil für Standard-Browser-Stile zurückgesetzt hat, und es hat auch ein Stylesheet zum Drucken.

0

Lernen Sie so viel wie möglich über CSS. Die meiste Zeit, in der Leute mit CSS-Layouts frustriert sind, liegt es daran, dass sie nicht alle Einzelheiten verstehen.

Achten Sie auf Dinge wie die Auswahl von Selektormustern - das macht einen großen Unterschied bei der Vereinfachung Ihrer Markups.

Denken Sie daran, dass es in Ordnung ist, Tabellen für Tabellendaten zu verwenden. Das Tabellen-Tag ist aus einem bestimmten Grund da.

Eine sehr hilfreiche Ressource: http://csswizardry.com/web-design+/

3

EvanK Vorschlag mit einer CSS-Framework arbeiten ist eine großartige Idee, und ich persönlich würde Compass, die meine Meinung nach wirklich repräsentiert eine neue Art und Weise über CSS empfehlen zu denken und ist in der Regel sehr elegant. Blueprint wurde von einigen anderen Plakaten erwähnt. Compass verwendet tatsächlich Blueprint (oder ein anderes Framework Ihrer Wahl) und abstrahiert es sogar noch weiter, so dass Sie dynamisch neue Rastervorlagen generieren können. Im Wesentlichen erhalten Sie einen programmatischen Rahmen für die Arbeit mit Blueprint und SASS.

Bevor Sie jedoch in ein Framework schauen, ist es wichtig, einige Grundlagen zu verstehen. W3Schools ist ein guter Anfang, gefolgt von einigen guten Design-Blogs wie A List Apart.

In Bezug auf die Minimierung von Cross-Browser-Probleme a CSS reset ist wesentlich, das ist der Ansatz Yahoo nimmt.

1

Um nebenbei eine browserübergreifende kompatible Website zu implementieren, empfehle ich, zunächst einen standardkonformen Browser (wie Firefox) zu verwenden und erst dann die Unterstützung für weniger standardkonforme Browser (wie IE6) zu erweitern. .

Meine Erfahrung ist, dass es sehr schwierig (fast unmöglich) ist, zunächst einen nicht standardmäßigen Browser (wie IE6) zu zielen und dann die Site browserübergreifend kompatibel zu machen.

1

Es gibt wirklich keine geheime professionelle Soße, um reine CSS-Layouts zu erstellen. Es gibt viele Möglichkeiten, eine Site in CSS zu erstellen, und alles, was man braucht, ist ein solides Verständnis der Technologie.

Einige Leute haben Erfolg mit Frameworks. Ich kann nicht wirklich sagen, ob sie eine gute Idee sind oder nicht, aber ein Vorteil besteht darin, dass sie einige der düsteren Details beim Aufbau einer CSS-Site abstrahieren.

Aber Sie sollten es trotzdem lernen. Es gibt wirklich zwei Seiten, die ich jedem empfehlen, die wirklich hinsetzen will und lernen, wie CSS wirklich funktioniert:

SitePoint CSS Reference: Concepts - Wahrscheinlich die umfassendste Erklärung, wie CSS arbeitet in einem leicht zu lesen Führung

W3 CSS 2.1 Spec - Ein hartes Lesen, aber es erklärt wirklich, wie alles funktioniert