Beispielwebseite 6: Unterschied zwischen den Versionen
K (→Download) |
|||
| Zeile 6: | Zeile 6: | ||
| − | |||
== Beschreibung == | == Beschreibung == | ||
Aktuelle Version vom 6. Januar 2018, 15:22 Uhr
Beispielseite 1 | Beispielseite 2 | Beispielseite 3 | Beispielseite 4 | Beispielseite 5 | Beispielseite 6 | Beispielseite 7 | Beispielseite 8 | Beispielseite 9 | Beispielseite 10
Inhaltsverzeichnis
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 über die gesamte Breite angezeigt.
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:
| conf/ | : | enthält die Konfigurationsdatei in der Sie Einstellungen für die Webseite festlegen könnnen. |
| css/ | : | enthält die Stylesheets für die Webseite. |
| img/ | : | hier können Sie ein Bild header.jpg platzieren, welches dann im Kopfbereich der Seite angezeigt wird. |
| inc/ | : | enthält die Snippets die von der Seite für die dynamische Darstellung von Inhalten verwendet werden. |
| index.php | : | die Index Datei der Webseite, die Sie in Ihrem Browser aufrufen können. Hier werden alle anderen Dateien eingebunden und das Layout der Seite festgelegt. |
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.
Header-Bild
Sie können bei dieser Webseite ebenfalls das Bild im Kopfbereich der Webseite anpassen. Ersetzen Sie dazu einfach das Bild header.jpg im Ordner img/ durch Ihr eigenes. Dieses Bild sollte im Idealfall eine Höhe von 200 Pixeln haben und kann so breit sein, wie Sie es wünschen. Soll sich das Bild wie im Beipsiel über die gesamte Seite erstrecken, so sollte es sehr breit sein, um auch die höchste Auflösung zu unterstützen. Da von der Breite noch in etwa 400 Pixel für den Logobereich abgehen, ist eine Breite ca. 1200 Pixeln empfehlenswert. Sie können das Bild natürlich auch kleiner gestalten und den restlichen Platz mit einer passenden Hintergrundfarbe gestalten oder so belassen, was auch zu einem interessanten Effekt führen kann.
