Beispielwebseite 7: Unterschied zwischen den Versionen

Version vom 6. Juni 2011, 17:42 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 klassischen Stil aufgebaut und besitzt ein vertikales Navigationsmenü, welches sich links neben dem Inhaltsteil befindet. Der Kopfbereich besteht aus einem Titeltext, dem z.B. auch noch ein Logo hinzugefügt werden kann und einem Bild, welches daneben angezeigt wird. Weiter unten befindet sich der Fußbereich der Webseite, in dem z.B. weitere Links platziert werden können, sowie Kontaktinformationen, ein Link zum Impressum und ähnliches hinzugefügt werden können. Alle Bereiche der Webseite werden zentriert dargestellt.

Bereits in die Webseite integriert ist außerdem eine Sitemap für die Suchmaschinenoptimierung und bessere Übersichtlichkeit. Des Weiteren haben Sie die Möglichkeit, einen festen Text, sowie einen Assoziationstext in der Seitenleiste unter dem Navigationsmenü anzeigen zu lassen. Diese Art von Webseiten eignet sich besonders gut für größere Webseiten von Organisationen oder Firmen.

Download

Der Code für die Webseite kann hier heruntergeladen werden: Download

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

Konfiguration

siehe: Konfiguration der Beispielwebseiten

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 in dem Ordner, wo Ihre Webseite erreichbar sein soll.

Es müssen nun noch einige Einstellungen konfiguriert werden, damit die folgenden Bereiche richtig dargestellt werden.

Text im Fußbereich

Am Ende der Seite existiert bei allen Webseiten in diesem Stil ein kleiner Fußbereich, in dem Sie einen Artikel anzeigen lassen können. Hier können Sie z.B. weitere Links und offizielle Informationen einfügen, oder einfach nur einen Copyright Hinweis platzieren.

Um einen Artikel im Fußbereich anzuzeigen, erstellen Sie einfach einen neuen Artikel im Backend und weisen Sie die ID dieses Artikels der Variable $footerArticleID in der Konfigurationsdatei config.php im Ordner conf/ der Webseite zu. Sie finden die ID eines Artikels im Backend in der Artikelübersichtstabelle der entsprechenden Gruppe in der ersten Spalte.

Die Sitemap einrichten

Sie haben die Möglichkeit in Ihrer Webseite eine Sitemap anzeigen zu lassen, welche neben der Optimierung für Suchmaschinen auch die Übersichtlichkeit der Webseite erhöht. Erstellen Sie dazu im Backend eine Gruppe, welche sinnvollerweise den Namen "Sitemap" haben sollte. Geben Sie anschleißend die ID dieser Gruppe in der Konfigurationsdatei config.php im Ordner conf/ der Webseite als Wert der Variable $sitemapGroupID an. Sie finden die ID einer Gruppe in der Gruppenverwaltung des Backends in der ersten Spalte. Die Webseite zeigt daraufhin automatisch eine Sitemap an, wenn Sie auf diesen Menüpunkt klicken.

Einen Text in der Seitenleiste anzeigen

Unterhalb des Navigationsmenüs befindet sich bei einigen Webseiten ein kleiner Textbereich, in dem Sie einen kurzen Artikel anzeigen können, der zum Beispiel Links zu weiteren Artikeln oder anderen Webseiten oder wichtige Texte wie Ausschlussklauseln (sog. Disclaimer) oder weitere Informationen enthält, die ständig angezeigt werden sollen.

Die Einrichtung dieses Textes ist einfach. Erstellen Sie einfach einen neuen Artikel im Backend und weisen Sie die ID dieses Artikels der Variable $sidebarArticleID in der Konfigurationsdatei config.php im Ordner conf/ der Webseite zu. Sie finden die ID eines Artikels im Backend in der Artikelübersichtstabelle der entsprechenden Gruppe in der ersten Spalte.

Assoziation in der Seitenleiste einrichten

Einige der Webseiten besitzen Assoziationen, d.h. Textbereiche, in denen Artikel angezeigt werden, die mit einer gerade aktiven Gruppe verknüpft (assoziiert) sind. Dieser Text wird unter dem Navigationsmenü in einem kleinen Bereich angezeigt und kann zum Beispiel Links zu weiteren Artikeln oder anderen Webseiten, Bilder oder wichtige Hinweise zum gerade aktiven Bereich enthalten.

Um in der Seitenleiste einen Text anzuzeigen, erstellen Sie einen Artikel im Backend und schreiben Sie den gewünschten Text dort in den Inhaltsbereich. Anschließend müssen Sie nun lediglich noch für die entsprechende Gruppe eine Assoziationen im Backend erstellen. Geben Sie dieser den Namen sidebar und wählen Sie den entsprechenden Artikel der angezeigt werden soll aus. Soll der Artikel auch für etwäige Untergruppen angezeigt werden, wählen Sie hier die Option "Auf Untergruppen vererben" an. Nach einem Klick auf "Erstellen" wird die Assoziation nun erstellt und der Artikel sollte in der Seite erscheinen, wenn Sie auf die entsprechende Gruppe klicken.

Wiederholen Sie diesen Vorgang für alle Gruppen, für die ein Assoziationstext in der Seitenleiste angezeigt werden soll. Soll für eine oder alle Gruppen kein Assoziationstext angezeigt werden, so lassen Sie diese Schritte zur Einrichtung der Assoziationen einfach aus.

Home-Bereich

Weiterhin besitzen einige der Beispielwebseiten einen Home-Bereich, in dem Sie Artikel einer Gruppe anzeigen lassen können, welche die Option "Artikel auf Home" aktiviert haben. Geben Sie dazu einfach den entsprechenden Namen der Gruppe als Wert der Variable $homeGroupName an. Sie finden diese Variable wie alle anderen in der Konfigurationsdatei config.php im Ordner conf/ der Webseite.

Anpassung

Alle Beispielwebseiten verzichten weitestgehend auf Grafiken für das Layout und sind daher sehr leicht und komfortabel anpassbar. Sie eignen sich sehr gut dazu, um mit Hilfe des Backends un 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.css: bestimmt das Design des Navigationsmenüs
• sitemap.css: hier wird das Design der Sitemap festgelegt

CSS Übersicht

Die folgende Übersicht kann 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 Seite. Alle aufgeführten Namen sind CSS Identifier.