Felix Riesterer: Design buggt bei Freunden

Beitrag lesen

SELF-Forum

Design buggt bei Freunden

Felix Riesterer Homepage des Autors
+3 Informationen zu den Bewertungsregeln

Lieber Hakan | Mzuki,

ich bin 15 Jahre alt und möchte gerne später mal einen Ausbildungsberuf als Fachinformatiker - Anwendungstechnik erlernen. Deshalb möchte ich gerne meine HTML und CSS Kenntnisse verbessern und habe mich mal an eine Webseite gesetzt.

das nenne ich ein ehrenwertes Vorhaben.

Die Webseite soll eine Fanseite zum deutschsprachigen Habbo Hotel sein und deshalb habe ich schon mal mit Photoshop ein Design erstellt. Das Design mit Hilfe von HTML und CSS gecodet.

Du gehst also von einem visuellen Vorbild aus. Das ist oft der Weg, den Webdesigner beschreiten. Jetzt stellt sich nur die Frage, wie man die Dokumentstruktur sinnvoll umsetzt, deren Darstellung dann mittels CSS an die visuelle Vorlage angenähert werden soll.

Das Design fertig gecodet.

Da sehe ich eine <div>-Suppe, die keinen wirklichen Strukturwert hat. Stelle in Deinem Browser einmal die CSS-Unterstützung ab, damit er das Dokument mit dem default-Stylesheet darstellt. Wenn die Seite dann noch sinnvoll und gut benutzbar dargestellt wird, dann hat Dein HTML-Dokument eine sinnvolle Struktur.

So, wie es aber im Moment aussieht, hat es keine sinnvolle Struktur. Also beginnen wir neu:

1. (Haupt-)Inhalt
2. "stehende Elemente" (das, was auf jeder Seite zu sehen ist)
3. Navi

So bemühe zumindest ich mich, meine Webprojekte zu erstellen. Mit CSS sorge ich dann dafür, dass die Dinge an Ort und Stelle erscheinen und so aussehen, wie sie das sollen.

Mein Vorschlag für XHTML:

<body>  
    <div id="content">  
        ...  
    </div>  
    <div id="header">  
        ...  
    </div>  
    <div id="search">  
        ...  
    </div>  
    <div id="navi">  
        ...  
    </div>  
</body>

Mein Vorschlag für HTML5:

<body>  
    <section id="content">  
        ...  
    </section>  
    <header>  
        ...  
    </header>  
    <section id="search">  
        ...  
    </section>  
    <nav>  
        ...  
    </nav>  
</body>

Wenn die Struktur steht, kann man mit CSS (und relativen Maßeinheiten!) an das Layouten der "Boxen" gehen. Wenn man dabei min-width und max-width zusätzlich zu width einsetzt (mit der Höhe kann das etwas anderes sein), dann sollte das mit dem Verschieben besser werden.

Bei Webseiten solltest Du Dich gedanklich ein gutes Stück weit von Photoshop trennen, da eine Website kein Printmedium ist, sondern dynamisch auf den verschiedenen Ausgabegeräten angezeigt wird (Smartphone, Tablet, PC, TV, Spielekonsole...).

Sorge also in erster Linie dafür, dass die Seite ein Dokument hat, welches eine vernünftige Struktur enthält(!!), bevor Du Dir um visuelle Abweichungen von Deiner PS-Vorlage Gedanken machst!

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Beitrag melden
+3
Informationen zu den Bewertungsregeln