Seitengestaltung - Pagestyle

Basis-Gestaltung der Webseite

Syntax

<|PAGESTYLE [CENTER] [WIDTH:x] [IMGADJUST][:y]|>

wobei:
x = Breite der Webseite in Pixel
y = Breite der Fotogalierie in Pixel

Beispiel
<|PAGESTYLE CENTER WIDTH:800 IMGADJUST:500|>

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. Wenn ein Wert hinter IMGADJUST angegeben wird getrennt durch einen Doppelpunkt, dann werden die Bilderbreiten auf diesen Wert, der Fotogalieriebreite, angepasst. Dies wird z.B. dann eingesetzt, wenn sich die Fotogalerie in der Breite nicht über die ganze Webseite erstreckt.

Um Bilder in einer Bildergalerie der Seitenbreite anzupassen, sollte die Breite für dem PICTURES-Markup empirisch ermittelt werden und separat angegeben werden  (z.B. PICTURES COL:3 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 unter System-Optionen definierten 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.

Die 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|>