Webseitenerstellung im Uni-Layout
Diese Seite wird ständig den Erfordernissen angepasst. Überprüfen Sie ggf. das Datum der letzten Änderung. An dieser Stelle wird auf wesentliche Änderungen seit der letzten Veröffentlichung hingewiesen.
Inhalt
- Letzte Änderungen
- Welche Techniken werden zur Darstellung des neuen Layouts angewandt?
- Wozu Cascading Style Sheets?
- Wie werden die HTML-Seiten formatiert?
- Wie verwendet man die CSS-Formatierungen?
- Kann ich die CSS-Formatierungen umgehen?
- Wie erstelle ich eine Seite im Uni-Layout?
- Vorlagen zur Webseitenerstellung
- Wie lege ich Sprachversionen einer Webseite an?
- Wie ändere ich veröffentlichte Seiten?
- Wie ändere ich bestehende Seiten ins Uni-Layout?
- Welche Probleme können auftreten?
- Wie führe ich eine HTML-Syntax-Überprüfung durch?
- Wie überprüfe ich meine CSS-Datei?
- Wie überprüfe ich eine Seite auf Barrierefreiheit?
- Wie verschlüssele ich meine E-Mail-Adresse?
- Wie erreiche meinen Webordner zur Bearbeitung?
- Welche Techniken werden zur Darstellung des neuen Layouts angewandt?
- Wozu Cascading Style Sheets?
- Wie erreiche meinen Webordner zur Bearbeitung?
Um den Benutzer bei der Erstellung einzelner HTML-Dateien mit möglichst wenig Code zur Darstellung von Logos, Fußzeile, Navigationszeile und -block zu belasten, werden sogenannte Server Side Includes (SSI) verwendet. Alle Dateien, die auf ".html" sowie ".shtml" enden (Rechte "rw-rw-r-- (664)") oder HTML-Dateien mit den Rechten "rwxrw-r-- (764)", werden vom Webserver auf bestimmte zusätzliche Befehle (SSI) hin abgesucht. Diese sorgen für die richtige Formatierung und Darstellung des Seitenkopfes sowie die automatische Einbringung des Datums der letzten Änderung.
Zur Darstellung einer Seite im Uni-Layout wird
- ein SSI-Codeblock ausgeführt
- Cascading Style Sheets (CSS) zur Formatierung eingelesen
- eine Datei zur Darstellung der Logos sowie der Navigationsleiste eingelesen
- ein weiterer SSI-Codeblock ausgeführt, der ggf. den linken Navigationsblock erstellt
- der HTML-Inhalt ausgewertet
- eine Fußzeile eingelesen
Die Hauptseiten des Fachbereichs Mathematik werden konsequent in "HTML 4.01 Transitional" geschrieben. Alle Tags werden beendet und zur Vorbereitung auf einen möglichen Umstieg nach XHTML klein geschrieben.
Nachfolgend wird die Technik im Detail beschrieben.
Die Formatierung von Webseiten wird nach aktuellen Standards nicht mehr über HTML-Tags (wie noch unter HTML 3.2) sondern über sogenannte Cascading Style Sheets (CSS) vorgenommen, die innerhalb eines Tags, der Datei oder über eine angehängte spezielle Datei definiert werden. Die HTML-Tags sollen das Webdokument nur noch strukturieren. Dies ist auch ein wesentlicher Punkt bei der Erstellung barrierefreier Webseiten. Unser Haupt-Stylesheet heißt vs_math.css. Wie man sieht, werden die Styles in einer eigenen 'Sprache' notiert. Näheres findet man z.B. unter http://www.w3.org/Style/CSS/. Wer CSS schreiben möchte, sollte sich einen Stylesheet-Editor besorgen (auf Anfrage bei wwwAdmin).
HTML verwendet Tags zur Dateistrukturierung. Für jedes Tag können Styles (Formatierungen) definiert werden, einmal für das Tag selbst und dann noch für selbstdefinierte Klassen des Tags. Das könnte z.B. so aussehen:
P, TD {
font-family : Arial, Helvetica, sans-serif;
}
Die Tags P (Paragraph) und TD (Table Data) sollen den Font 'Arial' verwenden, falls der nicht vorhanden ist 'Helvetica', falls der nicht vorhanden den generischen Font 'sans-serif'.
P.fett {
font-weight : bold;
}
Für P wird die Klasse 'fett' definiert. Wenn man das Tag in der Form <p class="fett"> verwendet wird der gesamte nachfolgende Text bis zum End-Tag </p> fett geschrieben. Man sieht, bei der Verwendung von CSS sollte man konsequent alle Tags beenden (abgesehen von den wenigen Ausnahmen: br, hr, img...).
Die bestehenden Definitionen sollten mit den gleich beschriebenen Methoden nicht überschrieben werden da sonst das Layout des Seitenkopfs zerstört wird!
Trotzdem möchte man vielleicht einige eigene Klassen definieren. Zwei Methoden bieten sich an:
- die erste Methode bietet sich an, wenn nur für eine html-Datei ein Style definiert werden soll. Hierzu schreibt man in den HEAD-Bereich der Datei einen Block:
<style type="text/css"> ... Definitionen ... </style>. Definitionen sind z.B. solche wie oben angegeben.
- Speichern in einer eigenen .css-Datei, die man z.B. im selben Verzeichnis wie die html-Datei speichern kann. Diese Methode eignet sich insbesondere für Definitionen die auch in weiteren html-Dateien verwendet werden sollen. Zum Einfügen der eigenen CSS_Datei verwende man das Link-Tag:
<link href="meine_css_datei" hreflang="de" rel="stylesheet" type="text/css">
Muster und Beschreibungen wie weiter oben beschrieben.
Grundsätzlich sollte sowohl zur Erstellung als auch zur Layoutkonvertierung von Webseiten auf die vorhandenen Vorlagen zurückgegriffen werden.
Hier nun der Quelltext einer Seite. Vergleicht man ihn mit anderen Seiten dieses Layouts kann man feststellen, dass sie an bestimmten Stellen gleich aufgebaut sind. Am Anfang der Datei werden in der aktuellen Fassung zunächst SSI-Variablen besetzt, ein Title definiert, Meta-Tags mit Content gefüllt und in Abhängigkeit einer SSI-Abfrage die eine oder andere Datei in den Quelltext eingelesen. Das sieht wie folgt aus:
01: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
02: "http://www.w3.org/TR/html4/loose.dtd">
03: <!--#config timefmt="%Y-%m-%d" errmsg="SSI-Fehler" sizefmt="abbrev" -->
04: <!--#set var="CONTRIBUTOR"
05: value="wwwmath (WL)" -->
06: <!--#set var="EMAIL"
07: value="javascript:linkTo_UnCryptMailto('nbjmup;xxxnbuiAnbui/voj.ibncvsh/ef');" -->
08: <!--#set var="LANGUAGE"
09: value="de" -->
10: <!--#set var="DOKUMENT"
11: value="template" --> <!-- Name der Datei ohne Erweiterungen -->
12: <!--#set var="GIBTS"
13: value="YES" --> <!-- YES oder NO : andere Sprachversion ? -->
14: <!--#set var="NAV"
15: value="ON" --> <!-- ON oder OFF -->
16: <html lang='<!--#echo var="LANGUAGE" -->'>
17: <head>
18: <!--#include virtual="/Includes/.head_styles.shtml" -->
19: <title> FB11 Mathematik</title>
20: <meta name='dc.title' content='Fachbereich Mathematik Universität Hamburg'>
21: <meta name='dc.subject' content='Fachbereich Mathematik Universität Hamburg'>
22: <meta name='dc.description' content='Fachbereich Mathematik Universität Hamburg'>
23: <meta name='keywords' content='Mathematik Universität Hamburg'>
24: <meta name='dc.contributor' content='<!--#echo var="CONTRIBUTOR" -->'>
25: <meta name='dc.date' content='<!--#echo var="LAST_MODIFIED" -->'>
26: <meta name='dc.identifier' content='<!--#echo var="DOCUMENT_URI" -->'>
27: <meta name='dc.language' content='<!--#echo var="LANGUAGE" -->'>
28: </head><body>
29: <!--#if expr="\"$LANGUAGE\" = \"de\"" -->
30: <!--#include virtual=".page_header.shtml" -->
31: <!--#else -->
32: <!--#include virtual=".page_header_en.shtml" -->
33: <!--#endif -->
34: <!-- ::::::::::::::::: BEGIN BODY ::::::::::::::::: -->
Der Benutzer dieser Vorlage passt zunächst die Zeilen 5,7,9,11,13,15 den Gegebenheiten an.
Die Variable CONTRIBUTOR speichert den Namen oder das Kürzel des Bearbeiters; EMAIL
die zugehörige verschlüsselte Mailadresse;
LANGUAGE die Sprache des Inhalts der Seite.
Falls der Bearbeiter Sprachversionen der Webseite erstellt, werden die Variablen DOKUMENT und GIBTS verwendet (siehe unten).
Durch Setzen von NAV auf ON resp. OFF kann der Bearbeiter das Ein- oder Ausblenden des linksseitigen
Navigators steuern.
In den Zeilen 20-27 sollen für Suchmaschinen kurze Inhaltsbeschreibungen zur Seite eingetragen werden.
Nachfolgend muss nur noch der Seiteninhalt in den Zeilen zwischen "BEGIN BODY" und "END OF BODY" eingetragen werden (die Dateirechte nicht vergessen).
Zeile 01: Festlegung des Doctypes nach w3c
Zeile 02: (zu Zeile 01:) Speicherort der Doctype-Definition im Web
Zeile 03: SSI: Datumsformat nach ISO, Fehlertext, Einheit von Dateigrößen
Zeile 04: SSI: Variable CONTRIBUTOR
Zeile 05: SSI: wird mit dem Namen/Kürzel des Bearbeiters initialisiert
Zeile 06: SSI: Variable EMAIL
Zeile 07: SSI: wird mit der verschlüsselten Email-Adresse des Bearbeiters besetzt
Zeile 08: SSI: Variable LANGUAGE (de = deutsche Sprache, en = englische Sprache)
Zeile 09: SSI: wird mit der im Dokument verwendeten Sprache initialisiert
Zeile 10: SSI: Variable DOKUMENT
Zeile 11: SSI: speichert den Hauptnamen des Dokuments (ohne Namenserweiterungen, z.B. index)
Zeile 12: SSI: Variable GIBTS (YES / NO) gibts an, ob
Zeile 13: SSI: eine Sprachversionen der Seite existiert
Zeile 14: SSI: Variable NAV ermöglicht dem Bearbeiter das Ein-/Ausblenden
Zeile 15: SSI: des linksseitigen Navigators (ON = einblenden, OFF = ausblenden)
Zeile 16: html - Beginn des eigentlichen HTML-Dokuments
Zeile 17: head - Beginn des Kopfbereichs
Zeile 18: Einlesen einer Datei mit HTML-Fortsetzung des Kopfbereichs, enthält
Stylesheet- und Meta-Informationen
Zeile 19: Titel des Dokuments, auch fuer Suchmaschinen. Dieser Text wird auch
in die Titelleiste des Browsers eingetragen.
Zeile 20: DC Dublin Core meta statements zur Bereitstellung von Dokumentinformationen
bis für Robots und Suchmaschinen. Titel des Dokuments, Kurzinhat, Inhalt,
Zeile 23: und Stichworte. Vom Benutzer einzutragen.
Zeile 24: Anbieter der Webseite, Datum der letzten Änderung,
bis Seitenadresse und
Zeile 27: Sprache werden automatisch eingefügt.
Zeile 28: end-head, begin-body
Zeile 29: SSI Auswertung der Sprachvariablen
Zeile 30: SSI wenn "de" dann Einlesen der Datei .page_header.shtml.
Zeile 31: SSI sonst
Zeile 32: SSI Einlesen der Datei .page_header_en.shtml.
Zeile 33: SSI Ende der Auswertung
Zeile 34: Kommentar: Ab hier den Webseiteninhalt eintragen
HTML-Dateien (*.htm, *.html), die mit SSI arbeiten, müssen bei uns mit den Rechten
rwxrw-r-- (764) versehen sein oder alternativ die Endung shtml führen.
In jedem Verzeichnis des Web-Servers muß die Datei .page_header.shtml
mit den Rechten rw-rw-r-- (664) existieren. Werden englischsprachige Seiten erstellt
muss (zusätzlich) die Datei .page_header_en.shtml vorhanden sein.
Diese Dateien enthalten den Aufbau der Navigationszeile (bread crumb trail, Brotkrumenpfad)
sowie die optionale Bereitstellung des Navigationsblocks des Webdokuments.
Die Webseiten enden mit folgenden Zeilen:
35: <!-- :::::::::::::::::: END OF BODY :::::::::::::::::::::::::::::: -->
36: <!--#include virtual="/Includes/.pagefooter.shtml" -->
37: </body></html>
In diesem Abschnitt wird die Fußzeile des Dokuments mit Link zum Impressum, Datum der letzten Änderung und dem Namen des Bearbeiters erstellt. Hier muss von der editierenden Person nichts mehr eingetragen werden denn die Informationen werden an diesen Block mit den zu Anfang gesetzten Variablen übertragen.
Zeile 29: Kommentar: hier endet der Webseiteninhalt
Zeile 30: Einlesen des Abschluss-Codes
Zeile 31: end-body, end-html
In der Verzeichnisstruktur des Webservers findet man in verschiedenen Verzeichnissen diverse Vorlagen zur Erstellung von Webseiten in neuem Layout. Die wichtigsten sind:
- Vorlagen für Mitarbeiterhomepages (in /home/)
- vorlage.zip Zip-Archiv mit Dateivorlagen. Alle Dateien müssen im jeweiligen Verzeichnis unter den gegebenen Namen gespeichert werden, nur template.html darf umbenannt werden.
- vorlage.tgz tgz-Archiv mit Dateivorlagen. Alle Dateien müssen im jeweiligen Verzeichnis unter den gegebenen Namen gespeichert werden, nur template.html darf umbenannt werden.
- weitere Informationen
Moderne Webbrowser können von ihren Benutzern so eingerichtet werden, dass mit bestimmter Wichtung nur Webseiten bestimmter Sprachen
angefordert und ggf. angezeigt werden.
Sprachversionen von Webseiten (z.B. /index.html, /teaching/service/erasmus/) tragen bei uns Namenserweiterungen wie html.de oder html.es, an die übliche html-Endung wird also eine Sprachkennzeichnung gehängt. Diese Kennzeichnung kann vom Server ausgewertet und anfragenden Browsern angeboten werden. Für den Fall, dass ein Benutzer KEINE Sprachpräferenz oder eine andere Sprache als angeboten eingestellt hat, sollte noch ein symbolischer Link *.html.default eingerichtet werden, der auf die gewünschte Defaultdatei zeigt. Z.B.
ln -s template.html.de template.html.default
Andernfalls kann ein Aufruf einer Webseite mit Error 406 - not acceptable abgebrochen werden obwohl eine Sprachversion der Webseite vorliegt.
Die Anzeige von Sprachversionen unserer Webseiten wird gesteuert durch
die jeweils eingestellte Browser-Sprach-Präferenz und durch Auswertung von Server-Side-Include (SSI) Anweisungen.
Zur Ausführung: Im Kopfblock der Templates finden sich die entscheidenden SSI Komponenten
<!--#set var="DOKUMENT" value="template" --> und<!--#set var="GIBTS" value="YES" -->
In den vorgefertigten Code-Blöcken für unsere Webseiten sind für die Sprachen "Deutsch" und "Englisch" kleine Flaggensymbole vorbereitet worden, die bei einem Variablenwert von "NO" der Variablen "GIBTS" grau unterlegt angezeigt werden. Stellt man hingegen den Wert dieser Variablen auf "YES" werden die Flaggen farbig und die hinterlegten Links aktiviert. Das Sprungziel dieser Links wird mit der Variablen "DOKUMENT" eingerichtet, indem der Haupt- oder Basisname der betreffenden Datei angegeben wird (z.B. "template"). Unser System sieht also vor, dass ein Angebot unterschiedlicher Sprachversionen einer Webseite sich nicht im Namen der Datei, sondern nur der Namenserweiterung für die jeweilige Sprache unterscheidet.
Ein solches System könnte z.B. aus den Dateien index.html.de, index.html.en und dem Link index.html.default bestehen. Dieser Link zeigt dann auf die in der Hauptsprache geschriebenen Datei.
WICHTIG: Die hier verwendete Technik der Server Side Includes erfordert zwingend, immer die ursprünglichen html-Dateien zu ändern. Denn nur der Originaltext enthält die zusätzlichen Codes, die vom Webserver ausgewertet werden sollen. Sieht man sich den 'Quell-Code' einer html-Datei mit einem Browser an, wird einem dort das Endergebnis der SSI-Auswertung der Webservers präsentiert! Z.B. wurde das Datum der letzen Änderung bereits als Datum in die Seite eingetragen, die Variable des Quellcodes wurde ausgewertet.
Wechseln sie in das Verzeichnis public_html. Wer weiss was er/sie tut, kann sicherlich direkt auf dem Webserver die Quellcodes ändern. Man sollte jedoch aus Sicherheitsgründen immer zunächst eine Kopie bearbeiten und testen, bevor die ursprüngliche Datei überschrieben wird.
- Öffnen einer passenden Vorlage in neuem Layout
- Öffnen der zu konvertierenden Datei in einem anderen Editor(fenster)
- ggf. Übertragen von Titel und Metainformationen, ansonsten diese Informationen neu erstellen
- Übertragen der Body-Informationen der alten Datei von der Überschrift bis zum Ende es eigentlichen Inhalts (ohne last modified etc.)
- Anpassen der Variablen in den Zeilen 05-15
- Speichern der neuen Datei unter altem Namen, ggf. mit Sprachendung (...html.de)
- ggf. Kopieren auf den Webserver
- Überprüfung des Layouts. Ggf. korrigieren
- Aufräumen des Webverzeichnisses: alte und ungenutzte Dateien entfernen
- Weder das Uni-Logo noch das Datum der letzten Änderung werden angezeigt (ohne Fehlermeldung), der Seiteninhalt selbst sieht richtig aus.
- Dieser Fehler tritt dann auf, wenn der Webserver die versteckten SSI-Informationen nicht auswertet. Mögliche Gründe hierfür sind:
- das betreffende Verzeichnis ist für SSI nicht freigegeben
- die HTML-Datei besitzt nicht die Rechte
rwxrw-r-- (764), insbesondere fehlt das Execute-Recht.
Das Uni-Logo wird nicht angezeigt, die Navigationszeile ist unvollständig, der Navigationsblock links ist leer. Aber das Datum der letzten Änderung wird angezeigt und der Seiteninhalt sieht auch richtig aus.- Dieser Fehler tritt auf, wenn die Datei
.page_header.shtml bzw. .page_header_en.shtml im Verzeichnis der editierten Datei fehlt oder nicht die richtigen Rechte besitzt (rw-rw-r-- (664)).
Der Navigationsblock links wird nicht angezeigt. Stattdessen eine Fehlermeldung "[an error occurred while...". Das Uni-Logo wird angezeigt, die Navigationszeile ist vollständig, das Datum der letzten Änderung wird angezeigt und der Seiteninhalt sieht auch richtig aus.- Dieser Fehler tritt auf, wenn die Datei
navigator.shtml bzw. navigator_en.shtml im Verzeichnis der editierten Datei fehlt.
Das World Wide Web Consortium (W3C) bietet eine Reihe von Dokumenten zu HTML, XHTML, CSS etc. an. Dort finden Sie unter anderem einen Link zu einem HTML-Syntax-Prüfer.
Für den Firefox-Browser gibts es eine Erweiterung"HTML Validator", die mit unterschiedlicher Genauigkeit Webseiten auf Fehler untersucht.
Das World Wide Web Consortium (W3C) bietet eine Reihe von Dokumenten zu HTML, XHTML, CSS etc. an.
Dort finden Sie unter anderem einen Link zu einem CSS-Prüfer.
Sobald das Dokument als fehlerfreies HTML 4.01-Dokument akzeptiert wird muss das Dokument auf Barrierefreiheit überprüft werden. Lesen sie hierzu auch die Informationen und Richtlinien des W3C. Zurzeit können folgende Prüfprogramme kostenfrei verwendet werden:
Zur Bearbeitung Ihrer Webseiten melden Sie sich bei einem der Zugangsserver unix[123].math.uni-hamburg.de an und wechseln nach public_html.
Alternativ, sofern Sie direkt auf AFS zugreifen können, wechseln Sie nach /afs/math.uni-hamburg.de/www/home/<Ihr_Webordner>/
| 
