Beispielwebseite 1: Unterschied zwischen den Versionen

Version vom 6. Juni 2011, 15:30 Uhr

Beispielseite 1 | Beispielseite 2 | Beispielseite 3 | Beispielseite 4 | Beispielseite 5 | Beispielseite 6 | Beispielseite 7 | Beispielseite 8 | Beispielseite 9 | Beispielseite 10

Überblick

Beschreibung

Diese Webseite ist im Blog-Stil aufgebaut mit einem horizontalen Menü im Kopfbereich der Webseite. Der Kopfbereich erstreckt sich über die gesamte Seite, während der Inhaltsteil zentriert darunter dargestellt wird. Weiter unten befindet sich ein kleiner Fußbereich für Copyright Informationen und weitere Hinweise.

Diese Webseite verwendet lediglich 2 Snippets um den gesamten Inhalt darzustellen und 3 weitere für die Suchmaschinenoptimierung. Sie eignet sich daher besonders gut, um sich mit DynPG vertraut zu machen, während Sie Ihren eigenen personlichen Webauftritt erstellen. Die Webseite ist insbesondere auf kleinere Präsenzen zugeschnitten, in denen Blogs, Fotos und weitere Informationen publiziert werden können. Bereits eingebaut ist ein zur der Webseite passendes zweispaltiges Layout und Design für den Blog. Der in der Demo gezeigte Inhalt ist nur ein Vorschlag wie die Webseite aussehen könnte. Wenn Sie die Webseite auf Ihrem Server einrichten, werden selbstverständlich die von Ihnen im Backend erstellten Inhalte voll dynamisch ausgelesen und angezeigt.

Hinweis: diese Webseite ist vollständig kompatibel zum Blog-Modul von DynPG, welches Sie kostenlos von der DynPG Homepage herunterladen können. Das bedeutet, Sie können in dieser Seite einen Blog betreiben, müssen dies aber nicht tun.

Download

Der Code für die Webseite kann hier heruntergeladen werden: Datei:Beispielseite1.zip

In diesem Archiv befinden sich alle Dateien für das Frontend der Webseite. Die Struktur ist wie folgt:

Einrichtung

Nachdem Sie sich die Dateien für die Webseite heruntergeladen haben, können Sie diese auf Ihrem Webserver laden. Platzieren Sie dazu alle Dateien aus dem Archiv mit Ausnahme des template/ Ordners in dem Ordner, wo Ihre Webseite erreichbar sein soll.

Es müssen nun noch einige Einstellungen konfiguriert werden, bevor die Seite richtig angezeigt wird.

Konfiguration

siehe: Konfiguration der Beispielwebseiten (Blog-Stil)

Integration eines Blogs

Wenn Sie in Ihrer Webseite einen Blog einrichten möchten, dann laden Sie sich zuerst das kostenlose Blog-Modul von der DynPG Homepage runter und installieren Sie es auf dem Server. Mehr Informationen hierzu finden Sie im Artikel Installation von Modulen.

Zweispaltiges Layout einrichten

In diesen Musterwebseiten wird per Grundeinstellung ein vom standardmäßigen dreispaltigen Layout abweichendes Layout für den Blog verwendet. Dazu wird ein Template zur Erzeugung dieses Layouts benötigt, welches Sie im Ordner template/ in den Dateien aus dem Archiv finden. Um das Template einzurichten, kopieren Sie den Ordner zweispaltig/ aus dem Ordner template/ in den Template-Ordner des DynPG Blog Plugins. Dieser Ordner befindet sich vom DynPG Hauptverzeichnis ausgehend unter /plugins/DPGblog/templates/.

Nachdem Sie den Ordner dort hinverschoben haben, wird dieses Template automatisch verwendet. Wenn Sie ein anderes Template für den Blog verwenden möchten, so ändern Sie die entsprechende Anweisung in der Konfigurationsdatei ab. Diese lautet $GLOBALS["DynPG"]->SetParam_PlugIn_Template("DPGblog", "zweispaltig");. Möchten Sie das dreispaltige Standardlayout für den Blog verwenden, so geben sie als Wert statt "zweispaltig" den String "default" an oder entfernen Sie diese Anweisung einfach komplett.

Achtung:

Wenn Sie nicht wie hier beschrieben das zweispaltige Layout einrichten und verwenden möchten, dann müssen Sie unter Umständen einige Anpassungen am Stylesheet vornehmen, um alle Elemente des Blogs richtig zu positionieren.

Den Blog anlegen

Nachdem der Blog installiert wurde, finden Sie im Backend einen neuen Menüpunkt "Blog". Hier können Sie einen neuen Blog anlegen, Einträge erstellen und einige Einstellungen vornehmen. Das Einzige, was Sie hierbei beachten müssen, ist die URL zum Blog richtig zu setzen. Geben Sie bei der Erstellung des Blogs hier bei "URL des Blogs" den Pfad zur Datei index.php an. Ein Beispiel: wenn Ihre Seite unter htttp://www.webseite.com/index.php erreichbar ist, dann geben Sie als URL htttp://www.webseite.com/ an.

Achtung:

Vergessen hier bei der URL nicht den abschließenden Slash ("/").

Blog-Artikel für das Frontend

Haben Sie das Blog-Modul installiert und einen Blog erstellt, muss nun noch ein Artikel angelegt werden, in dem sich der Platzhalter für den Blog befindet. Erstellen Sie dazu einfach einen neuen Artikel im Backend und fügen Sie im Inhaltstext den Platzhalter durch einen Klick auf den entsprechenden Button in der Toolbar des Texteditors ein. Sie müssen hier lediglich noch den entsprechenden Blog auswählen, worauf hin der Platzhalter im Textfeld erscheint. Nach einem Klick auf "Speichern" wird der Artikel erstellt. Falls Sie mehr Informationen zu diesem Schritt lesen möchten, finden Sie diese im Artikel DynPG Module einbinden.

Nachdem der Artikel erstellt wurde, sollten Sie diesen nun einer Gruppe als Gruppeninhalt zuweisen, damit er in der Webseite erreichbar ist. Sinnvollerweise sollte diese Gruppe den Namen "Blog" oder ähnliches haben.

Achtung:

Geben Sie den Namen der Gruppe, die den Blog als Gruppeninhalt besitzt als Wert der Variable $blogGroup in der Konfigurationsdatei config.php im Ordner conf/ der Webseite an.

Anpassung

Alle Beispielwebseiten verzichten weitestgehend auf Grafiken für das Layout und sind daher sehr leicht und komfortabel anpassbar. Sie eignen sich gut dazu, um mit Hilfe des Backends und der Stylesheets eine personalisierte Webpräsenz zu erstellen. Aufbauend auf diesen Musterwebseiten, welche bereits alle grundlegenden Funktionen implementieren, können Sie daher leicht komplexere und eindrucksvolle Designs erstellen. Auch durch ein individuelles Layout für die Artikel, die Sie im Backend erstellen, lassen sich z.B. durch Positionierung von Überschriften, Bildern, Tabellen und Weiterem interessante Effekte erstellen.

Die CSS Definitionen finden sie in den Dateien im Ordner css/:

• style.css: legt das Layout und Design der Seite fest
• menu_horizontal.css: bestimmt das Design des horizontalen Navigationsmenüs
• blog.css: falls Sie den Blog verwenden und anpassen möchten, finden Sie hier alle Style Definitionen dazu

CSS Übersichten

Die folgenden Übersichten können Ihnen dabei helfen, die Struktur der CSS-Dateien und der Webseite zu verstehen und nachzuvollziehen. In den Abbildungen werden die div-Tags durch Umrandungen dargestellt, mit denen Sie die Verschachtelung und ungefähre Position nachvollziehen können. Innerhalb dieser finden Sie auch den jeweiligen Klassennamen bzw. Identifier des divs.

Generelle Struktur

Der grobe Aufbau der Blog-Seite. Alle aufgeführten Namen sind CSS Identifier.

Blog-Layout

Die Struktur des Blogs, der sich innerhalb des Inhalts-divs befindet. Alle aufgeführten Namen sind Klassennamen, d.h. der Name DynPG_Blog_Article steht für das div, welches im Stylesheet blog.css durch .DynPG_Blog_Article referenziert wird.