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 ;)