Webdesign - Webseiten planen, gestalten - Free-Hack Library

246
HTML-Prototyp
Bei der Erstellung Ihres Prototyps halten Sie die Anzahl der -
Elemente möglichst gering. Verwenden Sie inhaltsbezogene,
semantische Tags, wo es möglich ist, und fügen Sie erst dann
nach und nach -Elemente ein, wo es nötig ist. Halten Sie
Ihren Quelltext von überflüssigem Markup so frei wie möglich.
Verwenden Sie Kommentare, um den Quelltext zu strukturieren
und ihn besser les- und wartbar zu machen.
Positionieren Sie möglichst mit relativer und absoluter Positionierung
bzw. mit Kombinationen daraus. Floats waren ursprünglich
nicht für das Seitenlayout gedacht und sind recht empfindlich
in ihrer Handhabung. Während von Floats abhängige Layouts
recht schnell „auseinanderfallen“ können, werden positionierte
Layouts problemlos auch mit übergroßen Bildern und riesigem
Text fertig. In dieser Entwicklungsphase ist es sinnvoll, absolute
und relative Positionierung zu verwenden und Floats ggf. erst
später hinzuzufügen.
7.3.3 Organisieren des Stylesheets
Wenn Ihre Cascading Stylesheets immer länger und komplexer
werden, ist es erforderlich, Ihre Stylesheets zu organisieren. Mit
gut organisierten Stylesheets können Sie effizienteres CSS schreiben
und sicherstellen, dass Ihre Dokumente auch von anderen
leicht verstanden und bearbeitet werden können. Es gibt viele
verschiedene Methoden, Stylesheets zu organisieren, von denen
hier einige vorgestellt werden. Welche Sie letztendlich verwenden,
bleibt Ihrem persönlichen Geschmack überlassen.
Sortieren nach Position
Ordnen Sie Ihre Regeln nach div-Elementen und legen Sie alle
entsprechenden untergeordneten Regeln darunter ab:
/* navigation */
#navigation {
padding: 0.15em 0 0.3em 0;
border: 1px solid #cccccc;
text-align: center;
}
#navigation ul {
display: inline;
padding: 0;
}
#navigation li {
display: inline;
padding: 0.5em 1.2em 0.5em 1em;
border-right: 1px solid #cccccc;
font-weight: bold;
font-size: 80%;
text-transform: uppercase;
}