Implementation eines kompletten Hauptmenüs: Unterschied zwischen den Versionen
K |
(Artikel teilweise überarbeitet und Anpassung des Menüs in separaten Artikel verschoben) |
||
Zeile 1: | Zeile 1: | ||
[[Kategorie:Integration in eine Webseite]] | [[Kategorie:Integration in eine Webseite]] | ||
== Einleitung == | == Einleitung == | ||
− | + | Wir wollen uns nun an eine wichtige Aufgabe machen: Die Erstellung eines ''Navigationsmenüs''. Als erstes benötigen wir eine leere '''index.php''', d.h. nicht ganz leer, sie enthält natürlich das HTML-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''style.css''' mit der unser Menü optisch anpassen werden. Das Grundgerüst könnte wie folgt aussehen: | |
<code>[php,N] | <code>[php,N] | ||
<?php | <?php | ||
− | require 'cms/getcontent.php'; | + | require 'cms/getcontent.php'; //DynPG-Funktionalität einbinden |
− | $DynPG->SetParam_PathToRoot('cms/'); | + | $DynPG->SetParam_PathToRoot('cms/'); //DynPG-Pfad setzen |
?> | ?> | ||
Zeile 11: | Zeile 11: | ||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> | ||
<head> | <head> | ||
− | <title> | + | <title>Seite mit Hauptmenü</title> |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> | <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> | ||
− | <?php $DynPG->Write_CSS_JS_Header(); ?> | + | <?php $DynPG->Write_CSS_JS_Header(); ?> <!--Standard-Css von DynPG einbinden--> |
<link rel="stylesheet" type="text/css" href="style.css" /> <!--eigene style.css einbinden--> | <link rel="stylesheet" type="text/css" href="style.css" /> <!--eigene style.css einbinden--> | ||
</head> | </head> | ||
<body> | <body> | ||
− | <h1> | + | <h1>Seite mit Hauptmenü</h1> |
<table border="0"> | <table border="0"> | ||
<tr valign="top"> | <tr valign="top"> | ||
Zeile 40: | Zeile 40: | ||
</code> | </code> | ||
− | In den Spalten <tt>hauptmenue</tt> und <tt>anzeige</tt> sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden | + | In den Spalten <tt>hauptmenue</tt> und <tt>anzeige</tt> sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. |
− | + | == Erstellen des Navigationsmenüs == | |
− | + | Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, der die dynamische Navigation enthält. Der Hauptmenü-Artikel müsste nun darunter in der Liste ''"Texte / Text-Gruppen"'' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die ''ID''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der Spalte <tt>hauptmenue</tt> folgendes ein: | |
− | Der Hauptmenü-Artikel müsste nun darunter in der Liste ''"Texte / Text-Gruppen"'' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die ''ID''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der Spalte <tt>hauptmenue</tt> folgendes ein: | + | |
<code>[php,Y] | <code>[php,Y] | ||
<?php | <?php | ||
− | |||
$DynPG->SetParam_A_Anytime(true); | $DynPG->SetParam_A_Anytime(true); | ||
− | $DynPG->SetParam_A_Article( | + | $DynPG->SetParam_A_Article(ID); |
$DynPG->Write_Article(); | $DynPG->Write_Article(); | ||
?> | ?> | ||
</code> | </code> | ||
− | In der | + | In der ersten Zeile weisen wir DynPG an, dass der folgenden Artikel immer angezeigt werden soll, da es sich sich um das Navigationsmenü der webseite handelt. In der zweiten Zeile muss <tt>ID</tt> durch die ID des Artikels, der die dynamische Navigation enthält, ersetzt werden. Mit Zeile 3 wird schließlich das Menü angezeigt. |
+ | == Erstellen der Inhaltsanzeige == | ||
Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern, die man über das Menü erreichen kann. Dazu fügen wir in der Spalte <tt>anzeige</tt> folgendes ein: | Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern, die man über das Menü erreichen kann. Dazu fügen wir in der Spalte <tt>anzeige</tt> folgendes ein: | ||
<code>[php,Y] | <code>[php,Y] | ||
<?php | <?php | ||
− | //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt | + | $DynPG->SetParam_A_Anytime(false); //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt |
− | + | $DynPG->SetParam_AA_Maxview(10); //Maximal zehn Einträge in Artikellisten | |
− | $DynPG->SetParam_AA_Maxview(10); | + | |
$DynPG->Write_AllArticles(); | $DynPG->Write_AllArticles(); | ||
$DynPG->Write_Article(); | $DynPG->Write_Article(); | ||
Zeile 69: | Zeile 67: | ||
</code> | </code> | ||
− | Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang | + | Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang eine Artikelliste sein darf, bevor sie der Übersicht halber auf mehreren Seiten dargestellt werden (wobei automatisch eine Seitennavigation im unteren Bereich der Webseite angezeigt wird). |
+ | == Anpassen des Menüs mittels CSS == | ||
Für das Beispiel werden wir die style.css wie folgt erstellen: | Für das Beispiel werden wir die style.css wie folgt erstellen: | ||
Zeile 80: | Zeile 79: | ||
text-align: left; | text-align: left; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</code> | </code> | ||
− | |||
Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus: | Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus: | ||
− | [[Image:first_look.jpg | + | [[Image:first_look.jpg]] |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | Natürlich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden. |
Version vom 19. Oktober 2010, 15:20 Uhr
Inhaltsverzeichnis
Einleitung
Wir wollen uns nun an eine wichtige Aufgabe machen: Die Erstellung eines Navigationsmenüs. Als erstes benötigen wir eine leere index.php, d.h. nicht ganz leer, sie enthält natürlich das HTML-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens style.css mit der unser Menü optisch anpassen werden. Das Grundgerüst könnte wie folgt aussehen:
<?php require 'cms/getcontent.php'; //DynPG-Funktionalität einbinden $DynPG->SetParam_PathToRoot('cms/'); //DynPG-Pfad setzen ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title>Seite mit Hauptmenü</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <?php $DynPG->Write_CSS_JS_Header(); ?> <!--Standard-Css von DynPG einbinden--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--eigene style.css einbinden--> </head> <body> <h1>Seite mit Hauptmenü</h1> <table border="0"> <tr valign="top"> <th align="left" style="width:230px" id="hauptmenue"> <div style="border: 3px black solid"> <?php //hier soll das Hauptmenü hin ?> </div> </th> <th id="anzeige"> <div style="border: 3px black solid"> <?php //hier sollen die anzuzeigenden Artikel und Gruppen hin ?> </div> </th> </tr> </table> </body> </html>
In den Spalten hauptmenue und anzeige sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden.
Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, der die dynamische Navigation enthält. Der Hauptmenü-Artikel müsste nun darunter in der Liste "Texte / Text-Gruppen" angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die ID. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der Spalte hauptmenue folgendes ein:
<?php $DynPG->SetParam_A_Anytime(true); $DynPG->SetParam_A_Article(ID); $DynPG->Write_Article(); ?>
In der ersten Zeile weisen wir DynPG an, dass der folgenden Artikel immer angezeigt werden soll, da es sich sich um das Navigationsmenü der webseite handelt. In der zweiten Zeile muss ID durch die ID des Artikels, der die dynamische Navigation enthält, ersetzt werden. Mit Zeile 3 wird schließlich das Menü angezeigt.
Erstellen der Inhaltsanzeige
Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern, die man über das Menü erreichen kann. Dazu fügen wir in der Spalte anzeige folgendes ein:
<?php $DynPG->SetParam_A_Anytime(false); //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt $DynPG->SetParam_AA_Maxview(10); //Maximal zehn Einträge in Artikellisten $DynPG->Write_AllArticles(); $DynPG->Write_Article(); ?>
Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang eine Artikelliste sein darf, bevor sie der Übersicht halber auf mehreren Seiten dargestellt werden (wobei automatisch eine Seitennavigation im unteren Bereich der Webseite angezeigt wird).
Anpassen des Menüs mittels CSS
Für das Beispiel werden wir die style.css wie folgt erstellen:
/*alle Links schwarz*/ a{color: black;} #hauptmenu p{ text-align: left; }
Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus:
Natürlich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.