Dynamische Website inkl. Slicen

Hi Leute!

Ich möchte euch heute einmal zeigen wie ihr eure Homepage dynamisch gestaltet. Viele fragen sie "Wie werden die Design in die Länge gezogen?". Wenn ihr nun wissen wollt wie man es "in die Länge zieht" sprich dynamisch macht, dann folgt einfach den Anweisungen im Tutorial.

Also fangen wir mal an:

Vorraussetzung dazu ist ein fertiges Design. Ich hab bei mir einfach mal im GFX Ordner gekramt und hier ein einfaches Design ausgewählt. Dies ist nun mein Design:



Zuerst wählt ihr euer Slice-Werkzeug in der Werkzeugleiste aus. ( Hotkey K )
Dann unterteilt ihr das Design in die horizontalen Teile. Ich hab hier 3 Teile: Header, Content, Footer.



Als nächstes werden die horizontalen bei den beiden Testlinks erstellt wie das nächste Bild zeigt:



Soweit so gut, denn nun kommen die vertikalen Slices dran. Zieht jeweils um die Testlinks vertikale Slices wie ich es gemacht habe. Der Header ist nun fertig gesliced.



Nun fehlen nur noch die vertikalen Slices im Content. Also nun die letzten Slices ziehen und damit ist der Photoshop Part abgeschlossen. Hier noch ein Bild wie es aussehen sollte.




Als nächstes wechselt ihr zu ImageReady. Entweder unten auf den Button oder die Tastenkombination: Strg-Umschalt + M. In Image Ready wird euch dann das fertige Design mit den slices angezeigt. Hier müsst ihr nun lediglich auf:

Datei --> Optimierte Version speichern unter ... --> Speichern

Photoshop und Image Ready könnt ihr nun eigentlich wieder schließen. Wir brauchen es nicht mehr. Wenn ihr nun in den Ordner schaut wo ihr eure Datei gespeichert hat, dann seht ihr eine HTML-Datei ( bei mir tutorial.html ) und einen Ordner "Bilder" in denen die einzelnen Images abgespeichert wurden.

Bei mir beinhaltet die HTML-Datei folgenden Code:


<HTML>
<HEAD>
<TITLE>150</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (150.psd) -->
<TABLE WIDTH=1003 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_01.gif" WIDTH=1003 HEIGHT=180 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_02.gif" WIDTH=269 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_03.gif" WIDTH=144 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_04.gif" WIDTH=143 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_05.gif" WIDTH=148 HEIGHT=14 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_06.gif" WIDTH=299 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_07.gif" WIDTH=1003 HEIGHT=48 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/tutorial_08.gif" WIDTH=214 HEIGHT=445 ALT=""></TD>
<TD COLSPAN=5>
<IMG SRC="Bilder/tutorial_09.gif" WIDTH=577 HEIGHT=445 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_10.gif" WIDTH=212 HEIGHT=445 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_11.gif" WIDTH=1003 HEIGHT=513 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=214 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=55 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=144 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=143 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=87 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=212 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>


Diesen Quellcode müsst ihr nun an einige Stellen verändern. Zuerst will ich aus dem Design ein Dynamisches Design machen. Ich betrachte also ausschließlich die drei Einzelteile die im Content sind:

<TR>
<TD>
<IMG SRC="Bilder/tutorial_08.gif" WIDTH=214 HEIGHT=445 ALT=""></TD>
<TD COLSPAN=5>
<IMG SRC="Bilder/tutorial_09.gif" WIDTH=577 HEIGHT=445 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_10.gif" WIDTH=212 HEIGHT=445 ALT=""></TD>
</TR>


Nun müssen wir diese Teile dynamisch machen, d.h. sie wiederholen sich eigentlich immer wieder wenn der Inhalt der Seite zu lang ist für ein Image. Die Images werden nun zum Background der Zelle ( TD ). Ihre Länge und Breite muss auch mit angegeben werden. Das ALT="" kann wegfallen. Also kommen wir nun zu dem neuen Quellcode:

<TR>
<TD background="Bilder/tutorial_08.gif" WIDTH=214 HEIGHT=445>
</TD>
<TD COLSPAN=5 background="Bilder/tutorial_09.gif" WIDTH=577 HEIGHT=445>
</TD>
<TD background="Bilder/tutorial_10.gif" WIDTH=212 HEIGHT=445>
</TD>
</TR>


Damit ist das Design nun dynamisch und passt sich dem Inhalt der Seite an. In meinem Fall ist es jedoch auch sinnvoll das Image "tutorial_09.gif" ganz zu entfernen und der Zelle einfach die bgcolor="#FFFFFF" --> weiß geben. Das spart ein bischen Ladezeit, bei schnellen Servern kann man es aber auch so lassen wie es ist.

Nun kommt der Include dran, da unser Inhalt ja auch genau in die Zelle in der Mitte soll. Das ist der Code dafür:

<?php
if(!isset($_GET['open']))
{
include("home.php");
}
else
{
include($_GET['open']);
}
?>


Zur Erläuterung: Damit dieser PHP Code auch funktioniert müsst ihr die Datei Endung nun verändern von HTML auf PHP. Bei mir ist das von tutorial.html auf tutorial.php
Der Include am Anfang ist bei mir immer die home.php und der Befehl lautet "open"

Alle Seiten die nun included werden müssen folgendermaßen heißen:

tutorial.php?open=seite.php

Anstatt dem open könnt ihr auch "module" schreiben oder "get" oder "teewurst". Das ist im Endeffekt eigentlich egal.

Da wir nun wissen wie der Include geht können wir uns den Links wenden die wir ja auch am Anfang gesliced haben. Dabei betrachten wir wiedermal nur den folgenden Teil unseres Komplett-Codes:

<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_02.gif" WIDTH=269 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_03.gif" WIDTH=144 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_04.gif" WIDTH=143 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/tutorial_05.gif" WIDTH=148 HEIGHT=14 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_06.gif" WIDTH=299 HEIGHT=14 ALT=""></TD>
</TR>


Die Links sind die Images "tutorial_03.gif" und "tutorial_05.gif". Diese wollen wir nun mit einem Include verlinken. Um die Images müssen wir nun einfach einen Verlinkungs-Tag setzen und ihn in Includen.

<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_02.gif" WIDTH=269 HEIGHT=14 ALT=""></TD>
<TD>
<a href="tutorial.php?open=testlink1.php"><IMG SRC="Bilder/tutorial_03.gif" WIDTH=144 HEIGHT=14 ALT=""></a></TD>
<TD>
<IMG SRC="Bilder/tutorial_04.gif" WIDTH=143 HEIGHT=14 ALT=""></TD>
<TD>
<a href="tutorial.php?open=testlink2.php"><IMG SRC="Bilder/tutorial_05.gif" WIDTH=148 HEIGHT=14 ALT=""></a></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_06.gif" WIDTH=299 HEIGHT=14 ALT=""></TD>
</TR>


So, damit sind nun eigentlich am Ende. Design ist gesliced, dynamisch und wir haben 2 Links per Include eingebunden. Hier ist nun mein Kompletter Code am Ende des Tutorials:

<HTML>
<HEAD>
<TITLE>150</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (150.psd) -->
<TABLE WIDTH=1003 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_01.gif" WIDTH=1003 HEIGHT=180 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_02.gif" WIDTH=269 HEIGHT=14 ALT=""></TD>
<TD>
<a href="tutorial.php?open=testlink1.php"><IMG SRC="Bilder/tutorial_03.gif" WIDTH=144 HEIGHT=14 ALT=""></a></TD>
<TD>
<IMG SRC="Bilder/tutorial_04.gif" WIDTH=143 HEIGHT=14 ALT=""></TD>
<TD>
<a href="tutorial.php?open=testlink2.php"><IMG SRC="Bilder/tutorial_05.gif" WIDTH=148 HEIGHT=14 ALT=""></a></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/tutorial_06.gif" WIDTH=299 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_07.gif" WIDTH=1003 HEIGHT=48 ALT=""></TD>
</TR>
<TR>
<TD background="Bilder/tutorial_08.gif" WIDTH=214 HEIGHT=445>
</TD>
<TD COLSPAN=5 background="Bilder/tutorial_09.gif" WIDTH=577 HEIGHT=445>
<?php
if(!isset($_GET['open']))
{
include("home.php");
}
else
{
include($_GET['open']);
}
?>
</TD>
<TD background="Bilder/tutorial_10.gif" WIDTH=212 HEIGHT=445>
</TD>
</TR>
<TR>
<TD COLSPAN=7>
<IMG SRC="Bilder/tutorial_11.gif" WIDTH=1003 HEIGHT=513 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=214 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=55 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=144 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=143 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=87 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=212 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>


Ihr könnt nun noch im Code viel ändern. Man kann der Seite einen Titel geben, die lästigen ImageReady Tags entfernen, den Background dem Design von der Farbe her anpassen, Scripts in den Head schreiben oder einfach nur die Tabelle ganz anders ausrichten.

Da ich nun ziemlich viel geschrieben habe will ich kleine Rechtschreibfehler oder ähnliches entschuldigen, ich hoffe aber trotzdem das ich euch etwas vermitteln konnte. Bei Fragen dazu stehe ich natürlich gerne hier im Forum oder auch im ICQ bereit.

Viel Spaß damit wünscht euch reaLfoX

visit me @ www.kai9r.de

P.S: In den Bildern stehen manchmal unten Namen wie CorsaFace oder Easterdom. Das war zufall da sie gerade im ICQ ihren Status verändert haben und ich in derselben Sekunde den Screenshot gemacht hab, naja shit happens ;)

Kommentare

-xXx-
-xXx- am Samstag, 18. Juni 2005 um 11:50

jo find ich gut!

reaLfoX
reaLfoX am Samstag, 18. Juni 2005 um 15:05

hab gerade gesehen das bei dem endresultat noch ein fehler ist. die image links werden mit einem rahmen umzogen. ich werd das im tut nochmal überarbeiten die tage.

Markus René Einicher
Markus René Einicher am Samstag, 18. Juni 2005 um 19:52

Ach ja, habs ihm doch gerade selbst erst erklärt, jetzt schreibt er schon Tutorien drüber ... sie werden ja so schnell erwachsen^^

Pharmazo
Pharmazo am Samstag, 18. Juni 2005 um 21:36

lol^^jo ist gut danke ;)

reaLfoX
reaLfoX am Sonntag, 19. Juni 2005 um 00:05

hey Easterdom, du hast mir die methode mit Frontpage erklärt. Das mit Photoshop/ImageReady ist aber nicht von dir, trotzdem danke :)

Markus René Einicher
Markus René Einicher am Sonntag, 19. Juni 2005 um 17:53

So oder oder so, bedankt hast dich nie, bist einfach off gegangen und hast nie wieder ein Wort gesagt und deswegen mag ich dich auch nicht mehr.

Außerdem hab ich dir das Prinzip an sich erklärt, wie man das rausschneidet und dann in die Tabelle bringt, das musst nicht unbedingt mit Frontpage machen, ich machs auch nur mit dem Editor.

reaLfoX
reaLfoX am Sonntag, 19. Juni 2005 um 18:32

natürlich hab ich mich bedankt *tzz*

Markus René Einicher
Markus René Einicher am Mittwoch, 22. Juni 2005 um 11:15

Also bei mir nicht.

PS: Ich find diesen blauen metallähnlichen Efekt gut, machstn Tut davon? Ich mein den Effekt, nicht den Rahmen.

reaLfoX
reaLfoX am Donnerstag, 23. Juni 2005 um 19:26

Uff.. ich glaub ich hab C4D zuletzt vor nem Jahr geöffnet lol^^

wird schwer das Material wiederzufinden :P

Fr34kman
Fr34kman am Sonntag, 26. Juni 2005 um 12:43

tjoa muss mal kurz meinen senf dazugeben,.. soweit ist es in ordnung nur wird man so nie nen "perfektes" html hinkriegen weil es den Befeheln "background=img.gif" für den <td> tag eigentlich nicht gibt! es funktioniert zwar aber ist halt nicht richtig!
besser wäre style="background-image:url(img.gif)"
MfG

reaLfoX
reaLfoX am Montag, 27. Juni 2005 um 15:32

hauptsache es funktioniert. über das html kann man sich auch streiten. ich check zum beispiel immer noch nicht wofür der spacer bei image ready gut sein soll. aber naja, es funzt und das ist die hauptsache :)

Pharmazo
Pharmazo am Mittwoch, 24. August 2005 um 13:54

ein wunder das es grade hängt bei den aufhängungen xDDDDDDD

Dbzman
Dbzman am Mittwoch, 26. Oktober 2005 um 13:30

Die Bilder gehen nicht mehr.

KleinesA
KleinesA am Mittwoch, 8. Februar 2006 um 16:02

Schade die Bilder gehen nicht. :-(

CanOne
CanOne am Mittwoch, 22. Februar 2006 um 22:18

wär cool wenn die bilder wieder reingemacht werden könnten
sonst isses nämlich sehr gut aber dann wärs auch noch anschaulich ;)