G4E|TUTORIALS

Im Vorfeld gesagt: Wer lesefaul ist sollte sich überwinden. Zudem dient das Tutorial nur als Übung und Wegweisung für das Erstellen einer Website. Das bedeutet: Auf euren Rechnern könnt ihr alles draufhaben, was ihr wollt. Gebt ihr allerdings eine 1:1 (oder beinahe 1:1) Kopie im Internet als euer Design bzw. eure Page aus, müsst ihr mit unangenehmen Konsequenzen rechnen. PSD-Dateien werde ich nicht zum download anbieten.
Photoshop und Dreamweaver Grundkenntnisse setze ich voraus.

Teil 3: Zerschneiden des Designs und einbetten in html

Damit es nicht zu kompliziert wird, habe ich manche grafische Elemente weggenommen . (zum Beispiel den Login bereich und den grauen Streifen im Hintergrund - diese werden beim coden nicht berücksichtigt)

Bevor ihr mit dem Zerschneiden beginnt, blendet die Ordner / Ebenen , wo sich der Content befinden, aus. (siehe Bild ...)

Bevor man beginnt sollte man immer eine Kopie der PSD-Datei machen, mir ist es schon sehr oft passiert, dass ich Ebenen, die ich nicht gebraucht habe, gelöscht und die Datei dann noch abgespeichert habe. Somit musste ich manche Sachen noch mal erstellen. Aus dieser Erfahrung heraus, habe ich mir angewöhnt immer eine Kopie zu machen.

Bevor ihr mit dem slicen anfängt, macht euch grobe Gedanken wie ihr die Page in Tabellen aufteilen müsst. (manchmal ist es auch sinnvoll die Aufteilung auf einem Blatt zu skizzieren) Versucht sowenig Grafiken zu verwenden wie nötig.

Ihr müsst es euch so vorstellen: Die Tabellen (wenn ihr Rahmen auf 0 setzt) sind unsichbar und dienen dazu Grafiken / Text dort zu positionieren, wo ihr es haben wollt.
a) Ihr könnt mehrere Tabellen in einander verschachteln. Das heißt: Ihr könnt in eine Tabellenzelle noch eine Tabelle mit Zeilen und Spalten einfügen.
b) Ihr könnt die Breite und die Höhe der Tabelle entweder durch Pixel oder durch Prozente bestimmen.
c) Zudem könnt ihr in der Tabellezelle die Position des Inhaltes bestimmen . z.B. wenn der Inhalt sich in der oben links befinden soll, dann stellt folgendes ein (siehe Bild):

d) Ihr könnt in eine Tabelle Bilder als Hintergrund anlegen, die sich kacheln.
e) Ihr könnt über ein Hintergrund ein Bild positionieren.

Das Slicen:

Schneidet nur das was ihr braucht. (im Video sind es nur die Slice-Rechtecke die einen blauen rahmen.) Benennt die Bilder so, damit ihr später beim coden wisst welche Bilder wohin gehören. Damit ihr das Prinzip versteht, habe ich ein Bild für das zerschneiden einer Box versucht zu verdeutlichen.

In den Bereichen 2+;4;5;7+ braucht ihr nur kleine Streichen zu machen, welches ihr dann später im dreamweaver als Hintergrundbild der Tabelle einfügt. Bei den Bereichen 2+ und 7+ wird ein dünnes Bild als Tabellen Hintergrund gesetzt und darauf ein anderes Bild. Ganz wichtig ist das die Breite bei Bild 1;4;6 immer gleich ist. Zudem muss die Höhe von Bild 1;2+;3 auch gleich sein. Und so weiter...

Im Video-Tutorial habe ich alle Bilder ausgeschnitten die man für die den ganzen Design (außer dem Content) braucht. Ganz wichtig ist am Ende das ihr beim Abspeichern nur "Alle Benutzer - Slices" auswählt. Somit werden nur die Slices die einen blauen Rahmen haben, gespeichert. Wenn ihr Slices weglöschen wollt, dann geht mit der rechten Maustaste auf das Slice 4eck und wählt "Slice - löschen". Na gut genug geredet, hier könnt ihr euch das Video angucken ...

zum Video-Tutorial

Was ich gerade geslicest habe, kann man für die ganze Page (ohne Content) verwenden. (Es gehört etwas Erfahrung dazu, welcher Bilder man braucht und welche nicht)

Coden:

Der Hintergrund: Bei der abgespeckten Version, ist es nur eine Farbe: <body bgcolor="404040">

Header: In unserem Fall befinden sich ein Logo. Dafür erstellt ihr einfach eine Tabelle: setzt die Breite auf "100 %" und Zellenauffüllung, Rahmen und Zellenabstand auf "0"

Der CSS -Befehl (die elegantere Lösung ): style="padding-left:30px;" bedeutet, dass der Inhalt in der Tabellenzelle um 30px von links verschoben wird. Im unseren Fall ist es das Bild (logo.gif). So könnt ihr den Inhalt genau an die Position setzen wo ihr es wollt. Ihr könnt mehrere Befehle hintereinander einfügen z.B style="padding-left:30px; padding-top:10px; padding-bottom:10px; padding-right:20px;"

Die Boxen:

Wie ihr aus dem Videotutorial entnehmen könnt, habe ich nur die Navibox ausgeschnitten. Diese unterscheidet sich aber nur in der Länge und Höhe von der Content box. Somit müssen wir nur eine Box Slicen und Coden.

Erstellt eine Tabelle mit 3 Zeilen und 3 Spalten. Dieser Tabelle könnt ihr eine feste Pixelgröße zuweisen. Für die Navibox habe ich 230px Breite genommen. Ihr könnt aus dem Bild entnehmen, welche Bilder wohin gehören. In dem Bereich 1;3;6;8 habe ich Bilder (<img src="">) eingefügt. In dem Bereich 2;4;5;7 habe ich Tabellenhintergründe ( background="" ) eingefügt, weil diese Bereiche sich ausdehnen. Über den Hintergrund 2 und 7 habe ich zudem noch ein <img src=""> positioniert.

Der Vorteil an so einer Programmierung ist, dass der Inhalt sich beliebig ausdehnen kann; sowohl nach unten, als auch zur Seite. Zudem wird die Seite schneller geladen, da hier kleine Bilder verwendet werden. Aus diesem Grund habe ich auch beim abspeichern der Slices nur die abgespeichert, die wir für die Seite benötigt haben.

Contentbox:

Bei der Content Box müsst ihr die Navigationstabelle duplizieren und nur die Breite ändern.

Das wars auch schon. Viel Spass beim Ausprobieren.