Springe direkt zum Inhalt

HNE Eberswalde Organisations-Menü

Springe direkt zum Inhalt
Sie sind hier: Service » IT-Servicezentrum » Anleitungen » Webserver & Cabacos » Musterseite

Musterseite für Web-CMS

Diese Musterseite soll Ihnen die Möglichkeiten von unserem Web-CMS und deren korrekte Verwendung im Sinne einer einheitlichen und flexiblen Gestaltung der Webseiten aufzeigen.

Der zweite Absatz hier, der durch ein ENTER erzeugt wurde, hat automatisch einen Abstand zum vorhergehenden Absatz.
-> Wollen Sie keinen Abstand, müssen Sie UMSCH-ENTER drücken.

Wichtige Formatierungen (Überschriftsebene 2)

Die erste Überschriftsebene ist für die Seitenüberschrift (Musterseite für Web-CMS) vorgesehen. Benutzen Sie diese Ebene nicht oder nur sehr gezielt im eigenen Text.

Als nächstes sollte immer die Überschriftsebene 2 folgen, auch wenn optisch eine andere Ebene besser passen sollte. Denken Sie daran, das die Optik durch zentrale Konfigurationsdateien bestimmt wird.

Textformatierungen (3. Ebene)

Soll auch etwas so hervorgehoben werden?
Benutzen Sie die rechts schwebende braune
Box und denken Sie daran, mit UMSCH-ENTER
einen Zeilenwechsel zu machen.

Sollen bestimmte Wörter hervorgehoben werden, gibt es 3 Möglichkeiten: einfaches Fettschreiben genügt manchmal. Noch auffälliger ist ein hervorgehobener Text

Als vierte Möglichkeit,
die ebenfalls nur gezielt
eingesetzt werden sollte,
gibt es den farblich
hinterlegten
bzw. markierten Text.

(Dies ist eine links
schwebende braune Box)

Wem das immer noch zu wenig ist, schreibt den hervorgehobenen Text in Fettschrift. Eine Unterstreichung ist nicht vorgesehen, weil sie mit Hyperlinks verwechselt werden kann.

Weniger wichtige Texte und Kleingedrucktes wird mit kleiner Schrift dargestellt. So passt sehr viel Information auf eine Seite.

 

Wichtige Passagen oder Texte können auch in einer farbig abgesetzten Textbox stehen. Die Textbox nimmt immer die volle Breite ein.
Ein ENTER fängt eine neue Box an. Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Eine Aufzählung erscheint immer etwas eingerückt:

  • erster Punkt
  • und wenn ein zweiter Punkt mal etwas länger werden sollte, so dass er nicht mehr auf eine Zeile passt, wird die folgende Zeile ebenfalls eingerückt

    Mit UMSCH-ENTER können Sie z.B. eine Leerzeile einfügen und den Aufzählungstext hier fortsetzen
  • dritter Punkt

Hier kann mittels code-Format ein Programmcode eingefügt werden:

Es ist ein paradiesmatisches Land, in dem einem
gebratene Satzteile in den Mund fliegen.

 

Eine Datumsangabe, wie der 12. März 2010, kann im Text durch ein kleines Symbol hervorgehoben werden.

Genauso ist die bei Uhrzeitangaben möglich. Ein Termin am 12. März um 12 Uhr kann im Text durch ein kleines Symbol hervorgehoben werden.

Verweise auf andere Seiten oder auf einen ausführlichen Text auf anderen Seiten werden mit einem kleinen grünen Pfeil (Verweis grün)  markiert. mehr

Daneben gibt es eine Reihe automatisch vorgenommener Formatierungen, z.B. wenn Sie eine PDF-Datei zum download anbieten, wird automatisch das Acrobat-Icon davor gesetzt: Download Handbuch. Oder bei einer Emailadresse test@hnee.de wird ein kleiner Brief dahinter angezeigt.

 

Noch mehr Boxen

Es gibt neben den braunen Boxen noch welche in einer anderen Farbe. Dies sind die grünen Boxen, die auch entweder links oder rechts schweben können. Dieses Beispiel nutzt die links schwebende Box.

Es gibt neben den braunen Boxen noch welche in einer anderen Farbe. Dies sind die grünen Boxen, die auch entweder links oder rechts schweben können. Dieses Beispiel nutzt die rechts schwebende Box.

Mehrspaltiger Text

Um den breiten Inhaltsbereich besser lesbar zu gestalten, empfielt sich der Einsatz mehrerer Textspalten. Es sollte möglichst darauf verzichtet werden, Tabellen als Hilfsmittel für das Gestalten der Spalten zu nutzen. Dafür werden eine Reihe sogenannter Snippets bereitgestellt.

Mit dem folgenden Texten soll die Verwendung der Snippets beispielhaft gezeigt werden.

Zweispaltiger Text (jede Spalte 50% breit)

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.

Dreispaltiger Text (jede Spalte 33% breit)

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht — ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und
 hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.

Das Einfügen von Bildern

Bildbox links augerichtet

Dies ist ein Beispielbild und kann ersetzt werden.
Ein Bild wird rechts von Text umflossen

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht — ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.

Einsatz von Tabellen

Eine Tabelle sollte möglichst nicht für Layout-Zwecke benutzt werden, sondern zur Darstellung von Informationen. Es sind inzwischen mehr als 9 Tabellenvarianten verfügbar:

 Variante 1
 Überschriftenzeile nein
 Überschriftenspalte  ja
 wechselfarbige Zeilen  nein

 

   Features
 Variante 2

Überschriftenzeile: ja
Überschriftenspalte: nein
wechselfarbige Zeilen: nein

Denken Sie daran, dass jede Zelle automatisch ein Leerzeichen enthält! Wenn Sie, wie unter Features, mehrere Zeilen in einer Zelle schreiben wollen, müssen Sie das Leerzeichen erst löschen (Zeilenwechsel mit UMSCH-ENTER).

 Variante 3

 ist vorhanden
 Überschriftenzeile  ja
 Überschriftenspalte  ja
 wechselfarbige Zeilen  nein

 

 Variante 4  ist vorhanden
 Überschriftenzeile  nein
 Überschriftenspalte  nein
 wechselfarbige Zeilen  nein

 

 Variante 5  
 Überschriftenzeile  nein
 Überschriftenspalte  nein
 wechselfarbige Zeilen  ja

 

 Variante 6

 ist vorhanden
 Überschriftenzeile  ja
 Überschriftenspalte  ja
 wechselfarbige Zeilen  nein

 

 

 Features
 Variante 7

Überschriftenzeile: ja
Überschriftenspalte: nein
wechselfarbige Zeilen: nein

 

 

 Features
 Variante 8

Überschriftenzeile: ja
wechselfarbige Zeilen: nein
kleinere Schrift: ja

 

 

 Features
 Variante 9

Überschriftenzeile: ja
wechselfarbige Zeilen: nein
sehr kleine Schrift: ja

 

 Variante 10

 
 Überschriftenzeile  nein
 Überschriftenspalte  nein
 wechselfarbige Zeilen  nein
 Hintergrundfarbe  nein
 Tabellenränder  nein

 

 Variante 11  
 Überschriftenzeile  nein
 Überschriftenspalte  nein
 wechselfarbige Zeilen  nein
 Hintergrundfarbe  nein
 Tabellenränder  nein

Die Breite der Spalten wird automatisch so groß gewählt, dass die gesamte Breite des Inhaltsbereiches genutzt wird (100%). 

Bildmenüs

Dies ist ein Beispielbild und kann ersetzt werden.

Studiengänge

Fünf betriebswirtschaftliche Studiengänge bieten Das ist das Snippet: Bildmenü 2x horizontal.

Dies ist ein Beispielbild und kann ersetzt werden.

Studienbewerber

Alle Informationen für Ihre Bewerbung.
Bewerbungsschluss:
15. Juli jeden Jahres

Dies ist ein Beispielbild und kann ersetzt werden.

Studentenleben

Hier kommt erklärender Text hinein. Das ist das Snippet: Bildmenü 1x horizontal.
Natürlich funktionieren auch andere Formate hier drinnen. Standardmäßig geht der Text bis zum Rand, wenn Sie nicht vorher mit UMSCH-ENTER einen Zeilenumbruch einfügen.

Schreibweise von Kontaktdaten

Die Schreibweise von Telefonnummern und Emailadresse sollte einheitlich erfolgen. Wenn Sie Emailadressen auf unserer Webseite veröffentlichen, kann es sein, dass Sie bald mehr Spams als gewöhnlich erhalten.

 Terminlisten

19.10. - 01.01.2010
 

Hier kommen Informationen zur Veranstaltung hinein. 2. Diskussionsforum umweltorientierte Unternehmensführung "EMASeasy - Umweltmanagement im Ökolandbau?"

01.01.2010
 15-17 Uhr

Hier kommen Informationen zur Veranstaltung hinein. Sommerakademie des Studiengangs Ökolandbau und Vermarktung.

Linklisten und andere Listen 

Hier steht eine Liste die als Linkliste formatiert wurde.

 

(letzte Änderung: 21.12.2011 von Andreas Bonadt)