Von Photoshop zu Dreamweaver
Nachdem man also seine Photoshop Vorlage erstellt hat, muss diese auf irgendeine Weise in Dreamweaver gepresst werden. Wo beginnt man da nun am Besten?
Ich fange immer damit an meine Photoshop-Vorlage in Bereiche aufzuteilen, die in Dreamweaver zu DIV-Containern werden.
Mit “div” leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden “/div” steht, wird als Teil des Bereichs interpretiert.
Quelle: selfhtml.org
DIV-Container geben meiner Seite eine HTML-Struktur. In der Photoshop-Vorlage mache ich zunächst farbliche Markierungen, die in der HTML-Datei einen DIV-Container darstellen sollen.
Bei der Aufteilung bestimme ich nur die grobe Struktur, welche sich über die gesamte Site erstreckt. Elemente, die sich auf einzelnen Unterseiten meines Web-Auftritts ändern, also deren Position, Auffüllung oder Abstände sich verändern, nehme ich in die Grobstruktur nicht mit auf. Für jeden in der Photshop-Vorlage markierten Bereich erstelle ich in meiner HTML-Datei einen DIV-Container. Dabei achte ich darauf die korrekte Verschachtelung zu übernehmen.
Bei der Verschachtelung sollte man nicht zu kompliziert denken. An der Metapher “Klassenraum” kann man sich die korrekte Verschachtelung aneignen. Ein Klassenraum ist für sich ein geschlossener Raum. Auf HTML übertragen ist das ein “wrapper” - ein DIV-Container, welcher alle weiteren Container umschliesst. In diesem Raum befinden sich für gewöhnlich mehrere Gegenstände, wie Tische, Stühle, Tafel, Schränke. Das könnten weitere DIV-Container sein. Ein Schrank kann z.B. Bücher enthalten. Auch Bücher können als “DIV-Container” angesehen werden, die in dem Container “Schrank” untergebracht, verschachtelt sind.
Von meiner Photoshop-Vorlage ausgehend, ergibt sich folgende HTML-Struktur. Einem jeden DIV-Container vergebe ich einen eindeutigen Namen.
1 2 3 4 5 6 7 8 9 | <div id="wrapper">
<div id="themenBild">Hier erscheint das Themenbild</div>
<div id="banner">Hier erscheint der Banner</div>
<div id="content">
<div id="contentLeft">Hier erscheinen alle Inhalte</div>
<div id="contentRight">Hier erscheint die Navigation</div>
</div>
</div>
<div id="footer">Hier erscheint der Seitenfuß</div> |
Durch den Universalattribut “id” kann ich nun jeden einzelnen Container über CSS-Steuern und auf der Seite gemäß der Photoshop-Vorlage platzieren.