Seitengestaltung - Pagestyle

Basis-Gestaltung der Webseite

Syntax

<|PAGESTYLE [CENTER] [WIDTH:300] [IMGADJUST]|>

oder auch

(oder auch: <|PAGESTYLE CENTER WIDTH=300|>)

Erklärung

Es ist nicht ganz einfach, eine Seite zu erstellen, welche den Inhalt immer in der gewünschten Form darstellt, sei es linksbündig oder zentriert, sei es dass Bilder nicht über den Seitenrand hinausreichen. Ferner soll die Seite ja sowohl im Microsoft Internet Explorer, im Mozilla Firefox als auch auf dem Apple iMac korrekt dargestellt werden. WebTracker macht es einfacher, solche Seiten zu erstellen und der Befehl PAGESTYLE ist ein wichtiger Faktor. IVML macht es einfach, W3C-konforme Webseiten (World Wide Web Consortium  www.w3c.org ) zu erstellen mit einer gewissen Sicherheit, dass diese Seiten in allen Browsern korrekt dargestellt werden.

  • WIDTH Bestimmt die Breite der Seite.

  • CENTER verursacht dass der Inhalt der ganzen Seite zentriert dargestellt wird, und zwar wird dabei auf die Eigenheiten vom Microsoft Internet Explorer als auch auf MOZILLA Firefox und Netscape eingegangen. Mit dem Stylesheet kann dies zwar ebenfalls erreicht werden, aber weil der Aufbau der Webseite das Stylsheet erst in einer zweiten Phase berücksichtigt, wird das Bild kurzzeitig linksbündig gezeigt, was störend wirkt.

  • Mit IMGADJUST werden die Bilderbreiten (nur für Klassen IVImage und IVPictures3) der Seitenbreite angepasst. IMGADJUST verursacht, dass in der Webseite ein Javascript Code eingebettet wird, welcher die Bilder anpasst. Dadurch werden sie nicht mehr in originaler Grösse dargestellt, sondern in einer Grösse welche der Seitenbreite angepasst ist. Dies ist ideal für den Fall dass die Seitenbreite später verändert werden soll (einfach WIDTH ändern bei PAGESTYLE und neu publizieren). Beim Publizieren werden die Bilder automatisch auf die angegebene Grösse verkleinert so dass die Download-Zeit optimiert wird.

Um Bilder in einer Bildergalerie der Seitenbreite anzupassen, sollte die Breite in PICTURES empirisch ermittelt werden und separat angegeben werden  (z.B. PICTURES 3 COL WIDTH: 250), da die gesamte Breite durch Eigenschaften im Stylesheet (wie margin, padding, etc.) bestimmt wird. Ferner erlaubt dies, mehrere Bildergalerien untereinander in verschiedenen Breiten darzustellen.

PAGESTYLE sollte dabei am Anfang der Seite stehen, wenn er für die ganze Seite gelten soll. Diese Attribute können auch kombiniert werden, nämlich durch Trennen mittels ';'
z.B. <|PAGESTYLE WIDTH=300;IMGADJUST|>

Sobald <|PAGESTYLE|> definiert wird (/*<|PAGESTYLE|> kann auch alleine definiert werden), werden alle Einträge im Feld"Details"in einem Bereich der Klasse"IVPage" und darin in einer Tabelle "IVPageBody" abgelegt. Dieser Bereich kann formatiert werden mit der Definition .IVPage .IVPageBody {...}  im StyleSheet.

Wenn nur <|PAGESTYLE|> ohne Breitenangabe mit WIDTH angegeben wird, werden die Bilder nach dem Publizieren auf die jeweilige Seitenbreite angepasst.

Definition von PAGESTYLE
PAGESTYLE wird normalerweise am am Anfang einer Webseite definiert so dass es für die ganze Seite gilt. Es kann aber in Ausnahmefällen auch nach dem Titel und einem HTML-Befehl für den Rücksprung angegeben werden wie in folgendem Beispiel, wobei dann nur der Include-Teil 1135 zentriert wird:
<|INCLUDE 85|>
<|HTML|><A class='IVContinue' href='javascript:history.back()'><<</A><br><|/HTML|>
<|PAGESTYLE CENTER|>
<|INCLUDE 1135|>

Bilder in Tabellen
Bilder in Tabellen werden automatisch durch die Anzahl Kolonnen geteilt. Dies funktioniert aber nur, wenn ein Bild direkt in einer Tabellenzeile (TD) eingebettet ist. Wenn ein DIV (Bereich) vorangesetzt wird, kann die Anzahl Kolonnen nicht ermittelt werden.

Anpassung und Klassenname der Bilder
Der Algorithmus zur Anpassung der Bildbreite bezieht sich nur auf Bilder mit der Klasse .IVImage und .IVPictures3. Bilder anderer Klassen werden nicht angepasst

Anpassung der Grösse der Bilder
Bilder werden beim Publizieren auf automatisch auf die im WebTracker gezeigte Grösse "zugeschnitten", so dass sie die optimale Grösse haben für die entsprechende Webseite und somit die kürzeste Download-Zeit wenn sie im Web-Browser angesehen werden.

Individuelle Breite für Bilder unabhängig von der Seitenbreite (IVPageBody)
Wenn PAGESTYLE angegeben wird, wird eine Tabelle innerhalb von Body eingerichtet mit Klasse IVPageBody für obiges Beispiel wie folgt:

<DIV class ='IVPage' id='IDIVPage' style='margin-left: auto; margin-right: auto; text-align: center; display: table;'>
<TABLE width='300' class='IVPageBody'  id='IDIVPageBody' cellspacing='0' cellpadding='0'><TR><TD>

Weil Style höhere Priorität hat als der InLine Befehl width='300' kann die Seitenbreite im StyleSheet separat angegeben werden, so dass die Breite WIDTH=300 sich nur noch auf die Bildbreite bezieht. Auf diese Weise kann eine Korrektur vorgenommen werden.
<|IVSTYLE|>
.IVPage .IVPageBody {width: 800px;}
<|/IVSTYLE|>