Übung 2: Erstellen Sie eine Webseite in zeilenbasiertem Layout

In dieser Übung erstellen Sie eine kleine Webseite mit einem zeilenbasierten Layout und einige Inhaltselemente dafür.

In unserem Beispiel wird eine Webseite aufgebaut, die aus den folgenden Inhaltselementen besteht:

1. Zeile: Slideshow, News, Terminine
2. Zeile: Text-Box, Text-Box, Banner-Text
3. Zeile: Aufmacherliste-Karussell

Ein mögliches Layout der Übungsseite

Ein mögliches Layout der Übungsseite

Am besten geeignet für Übungszwecke ist die Vorlage "Flexible zeilenbasierte Seite", die von Redakteur/innen für neue Ordner ausgewählt werden kann.
Die Einbindung von Inhaltselementen in die "Startseiten-Ordner" (werden vom CeDiS-Support eingerichtet) und "Website-Startordner" (Hauptverzeichnisse von Websites) erfolgt nach dem gleichen Prinzip.

Webseite und Ordner für Inhaltselemente

Abb. 1 Eine Flexible zeilenbasierte Seite und einen Ordner für Inhaltselemente erstellen

Abb. 1 Eine Flexible zeilenbasierte Seite und einen Ordner für Inhaltselemente erstellen

Erstellen Sie einen neuen Ordner mit der Vorlage "Flexible zeilenbasierte Seite":
> Name: test > Vorlage: Flexible zeilenbasierte Seite

Erstellen Sie in diesem Ordner einen "Ordner für Inhaltselemente":
> Name: _inhaltselemente > Vorlage: Ordner für Inhaltselemente   (Abb. 1)

Inhaltselement: Slideshow

Abb. 2 Aufmacher einer Slideshow

Abb. 2 Aufmacher einer Slideshow

Im Ordner für Inhaltselemente erstellen Sie eine Slideshow:

> Name: slideshow > Vorlage: Slideshow

Für die Slideshow brauchen Sie passende Bilder. Sie können diese Platzhalterbilder nutzen:
Seitenverhältnis 4:3 - Bild 1, Bild 2, Bild 3
Seitenverhältnis 16:9 - Bild 4, Bild 5, Bild 6

Importieren Sie ein paar Bilder ins CMS z. B. direkt in den Ordner "slideshow":
> "Datei importieren"

Erstellen Sie nun 2-3 Aufmacher im Ordner "slideshow":
> Name: slide1 > Vorlage: Aufmacher.
Geben Sie einen Titel, einen kurzen Text, einen Link zum Thema (CMS-interner Link auf eine freigegebene Webseite) und im Feld "Bilder" einen Link auf ein Bild im CMS (Abb. 2).

Einbindung in die Webseite, Zeilenlayouts, Vorschau

Abb. 3 Ihaltselemente verlinken

Abb. 3 Ihaltselemente verlinken

Abb. 4 Das Layout einer Zeile eingeben

Abb. 4 Das Layout einer Zeile eingeben

Inhaltselemente haben keine eigene Vorschau!

Wie Ihre Slideshow aussieht, können Sie testen, nachdem Sie sie als Inhaltselement verlinkt haben. Den Link setzen Sie in Ihrem Ordner mit der Vorlage "Flexible zeilenbasierte Seite" im Feld "Inhaltselemente (diese Seite)" (Abb. 3)

Im Feld "Flexible Startseite: 1. Zeile" tragen Sie das gewünschte Layout der Zeile mit der Slideshow. Das Layout der ersten Zeile in unserem Beispiel ist 6:3:3 (eine Hälfte der Breite des Inhaltsbereichs für die Slideshow und je ein Viertel für News und Termine) (Abb. 4).

Abb. 5 Slideshow in der separaten Vorschau der Seite

Abb. 5 Slideshow in der separaten Vorschau der Seite

Öffnen Sie den Ordner mit der Vorlage "Flexible zeilenbasierte Seite" in der separaten Vorschau . Das erste Inhaltselement ist da! (Abb. 5)

Inhaltselemente: News und Termine

Abb. 6 News als Inhaltselement einbinden

Abb. 6 News als Inhaltselement einbinden

Abb. 7 News- und Termin-Boxen

Abb. 7 News- und Termin-Boxen

"News" und "Termine" sind bloß Links auf News- und Termin-Ordner im Teilbaum Ihrer Website (Abb. 6 und 7).

Inhaltselemente: Text-Boxen

Abb. 8 Eine Text-Box erstellen

Abb. 8 Eine Text-Box erstellen

Abb. 9 Eine Text-Box erstellen

Abb. 9 Eine Text-Box erstellen

Die nächsten zwei Inhaltselemente in unserem Beispiel sind Dokumente mit der Vorlage Text-Box.

> Name: textbox1 > Vorlage: Text-Box
Enthält einen Titel, einen Hauptinhalt, ein Bild und einen Link zum Thema (Abb. 8)

> Name: textbox2 > Vorlage: Text-Box
Enthält einen Titel, Links zum Thema und Download (Abb. 9)

Inhaltselement: Banner-Text

Abb. 10 Banner-Text erstellen

Abb. 10 Banner-Text erstellen

> Name: banner > Vorlage: Banner-Text
Besteht aus einem Titel und einem Link (Abb. 10)

Textbanner werden nur dann angezeigt, wenn die verlinkte Webseite oder Datei freigegeben ist.

Inhaltselement: Aufmacherliste Karussell

Abb. 11 Ein Karussell erstellen

Abb. 11 Ein Karussell erstellen

Abb. 12 Einen Aufmacher erstellen

Abb. 12 Einen Aufmacher erstellen

Für ein Karussell brauchen Sie einen Ordner mit der Vorlage "Aufmacher Karussell" und in diesem Ordner Dokumente mit der Vorlage "Aufmacher":

> Name: karussell > Vorlage: Aufmacher Karussell
Hier können Sie einstellen, wie viele Aufmacher nebeneinander angezeigt werden sollen, und ob die Reihenfolge zufällig sein soll. (Abb. 11)

> Name: aufmacher1 > Vorlage: Aufmacher
Aufmacher enthalten einen Titel, optional ein Bild und einen kurzen Text sowie mind. einen Link. (Abb. 12)

Zeilenlayouts

Abb. 13 Inhaltselemente und Zeilenlayouts

Abb. 13 Inhaltselemente und Zeilenlayouts

Nun können die restlichen Inhaltselemente in der Webseite verlinkt und Zeilenlayouts eingestellt werden (Abb. 13).

Abb. 14 Layouts in separater Vorschau prüfen

Abb. 14 Layouts in separater Vorschau prüfen

Prüfen Sie die Webseite in der separaten Vorschau (Abb. 14).

Abb. 15 Zeilenlayouts ändern

Abb. 15 Zeilenlayouts ändern

Experimentieren Sie mit der Reihenfolge der Inhaltselemente in der Linkliste "Inhaltselemente (diese Seite)". Prüfen Sie die Webseite in der separaten Vorschau . Passen Sie ggf. Zeilenlayouts an, um das Layout/die Breite einzelner Inhaltselemente zu ändern (Abb. 15)

Consulting & Support

Consulting
Vom CeDiS Consulting erhalten Sie individuelle Beratung und Unterstützung bei der Konzeption Ihrer digitalen Lehr- und Forschungsvorhaben. 
Kontakt: consulting@cedis.fu-berlin.de

Support
Der CeDiS Support beantwortet Ihre Nutzeranfragen zur Bedienung der folgenden zentralen Systeme der Freien Universität: Blackboard, CMS, FU-Wikis, FU-Blogs.
Kontakt: support@cedis.fu-berlin.de