Brendelsz.de - Slicen css div layout

Brendelsz.de » Tutorials » Photoshop » Slicen css div layout

Slicen + CSS div Layout

wurde 9585x gelesen

In diesem Tutorial erkläre ich Ihnen, wie man eine Homepage sliced und danach als CSS Layout anpasst.

Vorwort:
Beantworten wir erstmal die 3 wichtigsten Fragen:
1. Warum sollte man den Hintergrund mit als erstes slicen?
2. Warum sollte ich von oben anfangen und mich nach unten durch kämpfen?
3. Warum sollte ich keinen einzigen Pixel vergessen?

Beantwortung
1. Um eine bessere Übersicht zu haben, dennoch ist es auch gut, dass man keinen Pixel vergisst.
2. Es ist viel besser ein strukturierten Arbeitsablauf zuhaben, als wildumher zu slicen, dadurch könnte Pixel vergessen werden und die Arbeit ist nicht sorgfältig, dennoch ist es Ansichtssache. Jeder kann slicen wie man will und wie man es macht.
3. Ganz Einfach, das komplette Design kann manchmal nur durch 1px, nicht mehr zumutbar ist.

Schritt 1:
Nehmen Sie sich ein Design vor das sie gerne Slicen möchten. Ich nahm dazu dieses Layout was ich in diesem Tutorial hier geschrieben hatte:

Simples Layout
Jetzt werden die Fragen in die Tat umgesetzt. Mit einer Grafik möchte ich Ihnen es mal darstellen.

Benutzen Sie das Slice-Werkzeug(k) und zeichnen Sie es wie auf der Grafiknach, bzw. wenn Sie ein anderes Design benutzen, versuchen Sie es in so einem Aufbau.
Tipp:Als Anfänger würde ich erstmal dieses Design nehmen um es mal auszuprobieren.

Was wird/Was kann man noch mit den slices machen?/Infos
1-2. Werden später nicht gebraucht, werden durch die Hintergrundfarbe ersetzt.
3. Den könnte man umbenenn, wenn man mit Doppelklick drauf klickt. „header_top“
4. Umbenennen zu header
5. Umbenennen zu navi_topic
6. wird später nicht gebraucht. Wird gelöscht
7. Umbenennen zu menu_topic
8. Umbenennen zu content_topic
9. Umbenennen zu navi_bg
10. Umbenennen zu content
11. Umbenennen zu navi_footer
12. Umbenennen zu content_footer
13. Umbenennen zu footer

Schritt 2:

Nun gehen Sie auf Datei -> Für Web und Geräte speichern.
Welches Grafikformat sollte man jetzt am besten benutzen?
JPG
Vorteil: Hohe Qualität, geeignet für Portfolies/Blogs
Nachteil: Umso mehr Besucher Sie haben, umso länger würde es Dauern die Seite zu laden.
GIF
Vorteil: Schnellerer Seiten aufbau, geeignet für Communitys
Nachteile: Grafik nicht editier bar, Qualität geringer
PNG
Vorteile: Schnellerer Seiten Aufbau, geeignet für Communitys, Spielerei durch CSS(Transparentz)
Nachteile: wird von einigen Browsern nur teilweise unterstützt.

Tipp: Ich würde das nehmen was für Ihre Seite am besten passt. Ich nehme häufig PNG.

Wenn Sie eins ausgewählt haben, speichern Sie diese Website. Jetzt wurden die Bilder sowie die html Datei erstellt. Soweit so gut. Nun kommt der HTML/CSS Teil.

Schritt 3:
Gehen Sie in den Ordner wo Sie die Webseite gespeichert haben. Öffnen Sie die html Datei in einem Editor. Ich bevorzuge Dreamweaver, dies ist jedoch egal. Erstellen Sie noch eine html Datei mit dem Namen „Layout“ oder „Index“.html, der Name ist jedoch nicht relevant. Öffnen Sie Datei auch im Dreamweaver. Nun müssen Sie den „DOCTYPE“ festlegen um es zu validieren.
Was ist denn ein „DOCTYPE“?
Eine Dokumenttypdefinition (englisch Document Type Definition, DTD, auch Schema-Definition) ist ein Satz an Regeln, der benutzt wird, um Dokumente eines bestimmten Typs zu repräsentieren. Ein Dokumenttyp ist dabei eine Klasse ähnlicher Dokumente, wie beispielsweise Telefonbücher oder Inventurdatensätze. Die Dokumenttypdefinition besteht dabei aus Elementtypen, Attributen von Elementen, Entitäten und Notationen. Konkret heißt das, dass in einer DTD die Reihenfolge, die Verschachtelung der Elemente und die Art des Inhalts von Attributen festgelegt wird – kurz gesagt: die Struktur des Dokuments.
Wenn Sie mehr erfahren möchten dann schauen Sie doch hier vorbei.

Tipp: Für Anfänger würde ich „HTML 4.01 Transitional“ vorschlagen.

Danach folgt der <head> wo z.B. der <title> Der Seite drin steht. Ich gebe mal das Grundgerüst vor:

Code:
`1 2 3 4 5 6 7 8 9 10 11 12 13`	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Name Ihrer Homepage</title> <style type=“text/css“> </style> </head> <body> <!--hier könnte ihr Text stehen--> </body> </html>`

Schritt 4:
Jetzt kommt es zu dem komplizierten und spannendem Teil. Gehen Sie in Ihrem <head> Bereich in die Zeile von <style type….> …. </style>. Nun müssen wir eine „ID“ erstellen.
Hier gilt wie im Vorwort Frage 2. von oben nach unten erarbeiten.

Code:
`1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17`	`<style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:9pt; color:#000000; background:#e6e6e6; } #header_top { font-size:7pt; background:url('Bilder/index_02.png') #e6e6e6 no-repeat; margin: 0 0 0 0; text-align:right; width:701px; height:28px; } </style>`

Durch den body { .. } lege ich die Schriftart, Schriftgröße und die Farbe fest, sowie die Hintergrundfarbe.

Jetzt haben wir eine ID festgelegt. Alle IDs fangen mit einem # an. Jeder „class“ fängt mit einem Punkt(.) an. Die ID ist erst ranging und eine klasse ist 2. ranging. Sie heißt „#header_top“.
Durch background:url('Bilder/index_02.png') #e6e6e6 no-repeat; legen wir als erstes die url des Bildes fest, wo sie sich befinden, wenn der Browser das Bild nicht findet, gibt er die Hintergrundfarbe #e6e6e6 aus. Durch no-repeat wiederholt sich das Bild nicht.

Als nächstes gehen Sie in den <body>…</body> und geben die ID aus. Das machen Sie durch den <div> Tag, oder durch <h1> da es als erstes oben steht. Das machen Sie mit <h1 id="header_top">Willkommen</h1>.
Genauso machen Sie es auch mit dem Header.

Komplizierter wird mit der Navigation. Jetzt müssen Sie von der Grafik Nr. 5 benutzen.

Code:
`1 2 3 4 5 6 7 8 9 10 11 12 13 14 15`	`#navi { margin:0 0 0 0; width:701px; height:40px; list-style-position:outside; list-style-type:none; } #navi li { width:73px; height:31px; background:url('Bilder/index_08.gif') #e6e6e6 no-repeat; float:left; padding-top:9px; padding-left:27px; }`

Auf den ersten Blick, ziemlich kompliziert. Zwei mal wird #navi benutzt. Eine Navigation gibt man häufig mit <ul> und <li> Tags aus. In meinem Beispiel gibt man es mit folgendem Code aus.

Code:
`1 2 3 4 5 6 7 8 9 10 11`	`<ul id="navi"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>`

Erklärung:
Durch #navi { .. } wird der <ul> Tag formatiert, d.h. wie lang die Navi wird, wie hoch sie ist, oder ob ein „listen style objekt“ angezeigt wird. Durch #navi li { .. } gibt man die Formation des <li> Tags in dem <ul> Tag aus, z.B. Wie breit ein Link ist, welches Bild genommen wird, oder wie hoch es ist.

Nun ist die #menu_topic drann. Sie soll auf der linken Seite ausgegeben werden, deswegen müssen Sie „flow:left“ benutzen. Hier ist das Beispiel was ich benutzt habe.

Code:
`1 2 3 4 5 6 7 8 9 10`	`#menu_topic { float:left; background:url('Bilder/index_09.gif') #e6e6e6 no-repeat; padding-top:17px; padding-left:5px; width:181px; height:21px; margin:0 0 0 0; }`

Dies können Sie jetzt mit <div id="menu_topic"> Menu </div> ausgeben.

Jetzt arbeiten Sie sich durch bis zum #content und #menu_bg. Falz es ein zulangen Text im Content gibt, soll er ja nicht über den #content_footer etc. übermalen, sondern es sollte sich runterziehen.
Dies erreichen Sie durch den #wrapper und durch .clear.

Code:
`1 2 3 4 5 6 7 8 9`	`.clear { clear: both; } #wrapper { margin:0 auto; background:url('Bilder/wrapper.png') #e6e6e6 repeat; height:100%; width:701px; }`

Den #wrapper kann man unterschiedlich einsetzten. Ich habe mich dafür entschieden, dass wenn der Text des Contents zulang ist, soll sich der #menu-bg mitrunterziehen. Gucken Sie Sich die Wrapper Grafik mal genau an. *hier*
Wie man sieht ist sie nur 2px groß und 701px lang. In meinem Beispiel sind die 701px, die Länge der Homepage ohne den Hintergrund, den wir ja weggelassen haben.
Schreiben Sie genau nach dem <body>… <div id="wrapper"> und beenden Sie ihn, wenn Sie #content und #menu_bg abgeschlossen haben durch ein </div>. Danach benutzen Sie den .clear. Durch <div class="clear"></div>. Nun arbeiten Sie wie am Anfang beschrieben ist, weiter.

Abschlusswort:
Theoretisch sollten Sie jetzt fertig sein. Falz Sie doch noch Probleme haben, schreiben Sie mir eine E-Mail oder gucken auf www.brendelsz.de.
Hier können Sie die Livedemo anschauen.

Tipp für die Zukunft: Wenn Sie padding benutzen, denken Sie daran, dass der Betrag auch an width und height angepasst ist, z.B. width:100px; height:100px; und padding soll 10px sein dann wird es geändert in:

Code:
`1 2 3`	`width:80px; Height:80px; Padding:10px;`

Was bedeuten die benutzten Begriffe?
padding
margin
font-family
font-size
color
background
list-style
clear
float
min-height
text-align

Mit freundlichen Grüßen,

Alexander Brendel
www.brendelsz.de
alex@brendelsz.de

geschrieben von: brendel

Bookmarks: