Die wichtigsten Elemente in Kürze

Die wichtigsten IVML Elemente in Kürze

IVML erlaubt das Formatieren von Text und Einfügen von Bildern. Aus IVML wird beim Publizieren HTML generiert. IVML generiert auch automatische Klassennamen, womit StyleSheets leicht ausgewechselt werden können, da dieselben Elemente immer die gleiche Klasse haben. Ferner werden IVML-Elemente immer korrekt in HTML übersetzt, wodurch die publizieren Webseiten nachher auch immer W3C-Konform sind.

Die Darstellung von IVML-Elementen ist abhängig vom StyleSheet. Durch Auswahl eines anderen StyleSheets kann die Darstellung völlig verändert werden.

Hier sind einige Beispiele mit dem für diese Webseiten zugrunde liegenden StyleSheet. Zuerst ist jeweils der Syntax gezeigt, anschliessend die Auswirkung. Testen Sie diese Beispiele selbst mit Ihrem StyleSheet indem Sie einfach den Syntax kopieren!

<|H1|>Titel

Titel


<|H1|>Dies ist ein Titel mit Grösse 1

Dies ist ein Titel mit Grösse 1


<|H2|>Dies ist ein Titel mit Grösse 2

Dies ist ein Titel mit Grösse 2


<|H3|>Dies ist ein Titel mit Grösse 3

Dies ist ein Titel mit Grösse 3


<|H4|>Dies ist ein Titel mit Grösse 4

Dies ist ein Titel mit Grösse 4


Einfache Liste (Aufzählungszeichen)

<|BULLETS|>
Dieser Text
wird mit
Bullets dargestellt
<|/BULLETS|>

  • Dieser Text
  • wird mit
  • Bullets dargestellt

Nummerierte Liste

<|STEPS|>
Und dieser
Text als
nummerierte Liste
<|/STEPS|>

  1. Und dieser
  2. Text als
  3. nummerierte Liste

Hyperlink

<|LINK http://www.ivwebtracker.ch|>Das ist ein Link auf die Homepage von IntuVision WebTracker<|/LINK|>

<|LINK self 1415#ref001|>Das ist ein interner Link auf die Referenz 001 in der Webseite mit ID 1415<|/LINK|>

Tabellen

<|TABLE 3 COL CONTEM WITH HEADING|>
Erste Spalte
Zweite Spalte
Dritte Spalte

Dies ist eine Tabelle mit 3 Spalten
im Format: CONTEM (ähnlich Word-Formatierung)
die erste Zeile ist ein Header

Leere Zeilen im Text
werden ignoriert.
will man trotzdem ein leeres Feld haben

dann macht man dies so:
|-
also mit einem: |- (Zeilenumbruch)

<|c|>
Dies
ist eine
zusammengehörende Zelle
auch wenn der Text auf mehreren Zeilen
geschrieben ist
<|/c|>
|-
|-
<|/TABLE|>

Erste Spalte Zweite Spalte Dritte Spalte
Dies ist eine Tabelle mit 3 Spalten im Format: CONTEM (ähnlich Word-Formatierung) die erste Zeile ist ein Header
Leere Zeilen im Text werden ignoriert. will man trotzdem ein leeres Feld haben
dann macht man dies so:
also mit einem: |- (Zeilenumbruch)
Dies
ist eine
zusammengehörende Zelle
auch wenn der Text auf mehreren Zeilen
geschrieben ist



Die Spalten können auch mittels Tabulator-Zeichen getrennt werden. Dies erlaubt z.B. das Kopieren von Daten aus Microsoft Excel (Anzahl Spalten muss korrekt angegeben werden).

Titel und Text

<|IVSTYLE|>
.IVTitleandtext {
background: #B6B374;
}
.IVTitleandtext .IVttCol1 {
vertical-align: top;
text-align: right;
font-weight: bold;
width: 50px;
}
<|/IVSTYLE|>
<|TITLEANDTEXT|>
Titel 1
Dies ist ein TITLEANDTEXT. Das Aussehen hängt vom Style ab, mit obiger Style-Definition wird der erste Text fett gedruckt und ist rechtsbündig, dann kommt ein kleines leeres Feld für den Abstand zwischen Titel und Text, und die nächste Zeile als Text usw. der Style kann wie gezeigt direkt in einen Webseitenteil eingefügt werden, oder aber im StyleSheet untergebracht werden, wenn er für alle Webseiten identisch sein soll. Sie können denselben Effekt auch mit einer normalen 2-spaltigen Tabelle erzeugen. Der unterschiedliche Klassenname erlaubt aber unterschiedliche Formatierungen.

Titel 2
Leere Zeilen werden übrigens wie bei TABLE wieder ignoriert.
<|/TITLEANDTEXT|>

Titel 1 Dies ist ein TITLEANDTEXT. Das Aussehen hängt vom Style ab, mit obiger Style-Definition wird der erste Text fett gedruckt und ist rechtsbündig, dann kommt ein kleines leeres Feld für den Abstand zwischen Titel und Text, und die nächste Zeile als Text usw. der Style kann wie gezeigt direkt in einen Webseitenteil eingefügt werden, oder aber im StyleSheet untergebracht werden, wenn er für alle Webseiten identisch sein soll. Sie können denselben Effekt auch mit einer normalen 2-spaltigen Tabelle erzeugen. Der unterschiedliche Klassenname erlaubt aber unterschiedliche Formatierungen.
Titel 2 Leere Zeilen werden übrigens wie bei TABLE wieder ignoriert.

Farbiger Block

<|PAD COLOR LBL|>
Dies ist eine Textbox mit hellblauem Hintergrund. Der Hintergrund kann auch Hellgrau sein, die Farbe wird dann mit"LGR"anstelle von"LBL"angeschrieben.
<|/PAD|>

Dies ist eine Textbox mit hellblauem Hintergrund. Der Hintergrund kann auch Hellgrau sein, die Farbe wird dann mit"LGR"anstelle von"LBL"angeschrieben.

Horizontale Linie

<|--------------------------------|>
Dies erzeugt eine rote Linie quer über die Webseite. Mindestens 3 Bindestriche (-) müssen vorhanden sein.


Derselbe Effekt kann erzeugt werden mittels eines HTML-Makros:
<|HTML|><hr style='color:red'><|/HTML|>


Seitenumbruch

<|P|>
Wenn man diese Webseite ausdruckt, dann kommt diese Zeile hier auf eine neue Seite

Bilder

Mit ||"$ivp/MeinBild.JPG" wird ein Bild eingefügt:



Einfach || vor den Pfad für die Bilddatei setzen und das ganze in Anführungs/Schlusszeichen setzen - damit können auch Bilder angegeben werden, welche Leerzeichen im Namen haben.

$ivp (wobei ivp = IntuVision Path) ist eine relative Pfadangabe und bedeutet, dass die Bilder in demjenigen Bildverzeichnis abgelegt sind, welches zu diesem WebInfo ID gehört. Mit dieser Angabe sind die Pfadangaben transportabel und können kopiert werden von einem Eintrag zum anderen sofern die Bilder ebenfalls kopiert werden.

Das Bildverzeichnis kann geöffnet werden durch Doppelklicken auf die ID-Nummer (im gezeigten Beispiel auf die Zahl 534), oder via Menü "Dokumente"



$ivp/1 bedeutet, dass die Bilder im Unterverzeichnis \1 zum Bildverzeichnis abgelegt sind.

Bilder-Galerie

Mittels PICTURES können auch automatisch alle Bilder eines Verzeichnises (hier Unterverzeichnis 1 von dem der Webseite zugehörigen Dokumentenverzeichnis) eingefügt werden. Dies erlaubt, mehrere Gruppen von Bildern auf einer Webseite zu publizieren.

<|PICTURES 3 COL WIDTH:420 $ivp/1|>

Wenn man in der Webseite auf ein Bild klickt, dann wird ein Bild in höherer Qualität gezeigt.

Wird für die Seitengestaltung <|PAGESTYLE IMGADJUST|>  definiert, dann werden die Bilder automatisch angepasst. Wenn keine Breite (WIDTH) angegeben wird, dann passen sie sich der Breite der Webseite an. Die Bilder werden beim Publizieren automatisch in zwei Versionen publiziert, als grösseres Bild und als Thumbnail, wobei das Thumbnail auf die in der Webseite dargestellte Grösse optimiert ist. Die Bildgrösse vom vergrösserten Bild wird einmalig eingestellt für den WebTracker unter System Optionen -> Fotogalerlie im Hauptformular.

Vordefinierte Symbole

Vorgegebene Elemente erleichtern das Erstellen von technischen Dokumenten, welche normalerweise mit speziellen Hinweisen versehen werden müssen. Es handelt sich dabei um einen Text mit einem vorgegebenen Icon. Die Icons können ausgewechselt werden und auf Ihre Bedürfnisse zugeschnitten werden.

Beispiel:

<|NOTE|>
Das ist eine Notiz
<|/NOTE|>

Das ist eine Notiz