Dieses Tutorial beschreibt, wie man ganz einfach mit PHP eine Website ohne die herkömmlichen Frames erstellen, und ausserdem skinfähig machen kann, d.h. ohne großen Aufwand das Design zu ändern, ohne großartig den Inhalt anpassen zu müssen. Ausserdem beschreibe ich hier wie man die verschiedenen Layouts (skins) per Link ändern kann.
Also fangen wir an. Was brauchen wir ?
Zunächst müssen wir erstmal unser Layout fertigstellen und in html umsetzen.
Als Beispiel nehmen wir eine typische "links-oben-navigation", d.h. daß sich das Navigationsmenü auf der linken Seite befindet und weitere Grafiken, etc. oben angebracht sind.
Statt Frames benutzen wir diesmal ganz normle Tabellen.
Erstellt also eure grafiken, etc. ganz normal mit eurem Grafikeditor
und zerschneidet diese, um sie in HTML umzusetzen.
Startet euren HTML-Editor und erstellt euer Tabellen "frame"-set.
Das heist ihr erstellt eine tabelle auf der linken Seite, eine Header Tabelle und eine Haupttabelle wo später der Inhalt eingefügt (included) wird.
Natürlich könnt ihr die Tabellen auch ganz anders positionieren, die Gestaltung liegt voll und ganz bei euch.
Nun kommen wir zum etwas komplizierteren Teil:
Als erstes erstellt ihr in eurem Websiten-Hauptverzeichnis den Ordner "includes". In diesem Ordner werden später die einzelnen PHP-Dateien kopiert. In dem Ordner "includes" erstellt ihr für jedes einzelne Template einen Ordner, und gebt ihm einen Namen (z.B. für ein
blaues design "blue")
Kopiert alles was bis zum anfang der Haupttabelle steht (alles einschliesslich des "<td>" tags )
in eine txt-Datei und nennt diese um in "kopf.php".
Das selbe macht ihr mit dem Rest eures codes, nur diesmal kopiert ihr alles ab dem ENDE der Tabelle ( einschl. des </td> tags ). Fügt es in eine NEUE txt-Datei ein und nennt diese um in "fuss.php".
Die soeben erstellten Dateien kopiert ihr in den ordner "blue" den ihr zuvor erstellt habt.
Nach dem wir alle vorbereitenden Maßnahmen getroffen haben, geht es nun an den php code.
Um Dateien in eine andere Datei einzufügen benötigt man den Befehl "require" bzw. "include".
Wir erstellen als erstes eine Datei mit dem Namen main.php.
Nun schreiben wir in den html code folgendes:
PHP-Code:
<?php
include ("includes/".$skin."/kopf.php");
?>
<?php
include($go.".php");
?>
<?php
include ("includes/".$skin."/fuss.php");
?>
PHP-Code:
<?php
include ("includes/".$skin."/kopf.php");
?>
"$skin" Dies ist die Variable die wir später per Link verändern können (main.php?skin=blue)
somit wird an der Stelle wo $skin steht "blue" eingefügt...welches der Name eures Verzeichnisses ist, wo sich der "blue" skin drin befindet. ( includes/blue/kopf.inc.php ) .
PHP-Code:
<?php
include($go.".php");
?>
Nun haben wir aber eine neue variable namens "$go". Diese Variable bestimmt, welcher "Inhalt", also welche Unterseite, aufgerufen werden soll. Das "php" steht für die dateiendung der includierten Datei. Setzen wir diese Variable also auf z.B. "inhalt1" (main.php?skin=blue&go=inhalt1), so wird automatisch die Datei inhalt1.php eingfügt.
PHP-Code:
<?php
include ("includes/".$skin."/fuss.php");
?>
Wie belegen wir nun unsere links ?
Wenn wir zB. die news anzeigen wollen, und diese sich in der Datei news.php befinden, muss der Link folgendermaßen aussehen:
main.php?skin=blue&go=news
Ich habe mal schnell ein kleines Beispiel geschrieben, an dem ihr sehen könnt, daß es funktioniert.
HIER
Im zweiten Teil werde ich euch zeigen, wie ihr einen Button zum switchen der skins einbaut, ohne das sich der inhalt ändert, ausserdem wie man einen zufälligen skin auswählt.
So hier der Nachtrag zum Tutorial:
Der "change skin" link
falls ihr nur 2 verschiedene skins habt könnt ihr einfach per link zwischen den beiden hin und her switchen...
falls ihr allerdings mehrere skins verwendet empfiehlt es sich
ein formular menü zu machen...dazu komm ich auch noch ... aber hier erstmal der skin-switch-link
PHP-Code:
<?php
if ($skin=="blue") {
echo "<a href=\"main.php?skin=brown&go=$go\">change skin</a>";
}
else {
echo "<a href=\"main.php?skin=blue&go=$go\">change skin</a>";
}
?>
ps falls ihr so einen link einbaut müsst ihr natürlich eure navigationslinks ändern ! da wenn ihr das blaue template festlegt und jemand changet den skin er sobald er auf nen link klickt wieder den ursprünglichen skin bekommt...
aber dem ist abhilfe geschaffen:
eure links dürften ja jetzt folgendermaßen aussehen:
PHP-Code:
<a rel="nofollow" href="http://www.tutorials.de/main.php?skin=blue&go=inhalt2">
PHP-Code:
<a rel="nofollow" href="http://www.tutorials.de/main.php?skin=<?php echo "$skin"; ?>&go=inhalt2">
somit wird der aktuelle skin immmer "mitgeschleppt" da die variable ja im browser gesetzt wird
So und hier per Menü:
fügt das in euren <head>
<script type="text/javascript">
//<![CDATA[
window.google_analytics_uacct = "UA-1691844-1";
//]]>
</script>
</head> bereich ein:
Code :
1 2 3 4 5 6 7 8 | <SCRIPT language="JavaScript">
function linkwin(formName, popupName, target) {
var popup = document[formName].elements[popupName];
if (popup.options[popup.selectedIndex].value != "") {
window.open(popup.options[popup.selectedIndex].value, target);
popup.selectedIndex=0;
}}
</SCRIPT> |
PHP-Code:
form name="changeskin" onChange="linkwin('favs','changeskin','_self')">
<select name="skinchange">
<option selected>Choose Skin</option>
<option value="main.php?skin=blue&go=<?php echo "$go"; ?>">
Freaky Blue</option>
<option value="main.php?skin=brown&go=<?php echo "$go"; ?>">
Funky Brown</option>
</select>
</form>
Bei fragen.... PM oder EMAIL !
ICQ fragen beantworte ich grundsätzlich NICHT
Kommentar schreiben
Login
Bereiche
Kategorien
Forum - Programming
Shop @ tutorials.de
Artikel bewerten