Web-Publishing – Tipps und Tricks

HTML

Ordnerverzeichnisse generieren

(msc) Eine häufige Aufgabe des Webdesigners ist es, für die Struktur der Website zu sorgen – trivial ausgedrückt könnte man auch sagen: Dateien zu verlinken. Dies gilt zumindest dort, wo kein Content Management System dynamisch Einstiegsseiten generiert und die Inhalte den Besuchern zugänglich macht.

Bei statischen Seiten ist also Handarbeit gefragt: Hat man einen Ordner, der über eine Index-Seite erschlossen werden soll, dann richtet man für jede Datei in dem Ordner einen Link ein, den man passend beschriftet. Das klingt repetitiv, in aller Regel ist das Generieren von Übersichtsseiten eine reichlich langweilige Angelegenheit.

Das nachfolgende Script erleichtert die Verlinkung von Dateien erheblich. Das Script nimmt als erstes die Pfadangabe des zu verlinkenden Ordners entgegen. Dann generiert es automatisch eine HTML-Seite, in der jede einzelne Datei des angegebenen Ordners verlinkt wird.

Das praktische an dem Script ist jedoch, dass in der Übersichtsseite nicht (wie z.B. im Freeware-Programm Dirhtml) die Dateinamen erscheinen, sondern der Titel einer jeden Seite. Das Script öffnet nämlich jede Datei, sucht nach der Angabe zwischen den \-Tags und übernimmt diese in das Verzeichnis. Natürlich lässt sich das Script auch jederzeit so anpassen, dass andere Informationen aus den verlinkten Dateien ausgelesen werden. Möchte man zum Beispiel die Überschrift 1 auf die Übersichtsseite übernehmen, dann ändert man die Variablen STStart und STEnde entsprechend ab:

STStart = "\"

STEnde = "\"

Natürlich sind auch andere Anpassungen möglich: So könnten CSS-Formatierungsinformationen eingebaut werden oder es wäre möglich, weitere Informationen (Dateigrösse etc.) in die Übersichtsliste zu integrieren oder die Liste als Tabelle aufzubauen.

Das Script läuft auf Windows und benötigt den Windows Script Host (WHS).

Der Code

Im Link auf ein PDF Seitenzahl übergeben

(msc) Beim Verlinken einer PDF-Datei kann mit dem Link auch die zu öffnende Seite und der Seitenmodus übergeben werden. Dazu definiert man in GoLive zuerst im Inspektor den Link auf die PDF-Datei. Nachdem der Webseiten-Editor weiss, dass er es mit einer PDF-Datei zu tun hat, zeigt er im Inspektor die Schaltfläche «PDF-Anker» an. Klickt man auf diese, erscheint ein Fenster zur PDF-Ankerbearbeitung, in dem die im PDF-Dokument definierten Lesezeichen ersichtlich sind und verwendet werden können. So kann man komfortabel die passende Seitenzahl auswählen. Ausserdem bestimmt man über den «Seitenmodus», in welcher Ansicht die PDF-Datei erscheinen soll – und überschreibt damit die entsprechenden Vorgaben, die allenfalls im PDF vorhanden sind. Der Modus «thumbs» zeigt die Seitenminiaturen an, mit der Einstellung «bookmarks» ist die Lesezeichen-Leiste aktiv und über «none» erscheint nur die Seite selbst, ohne Navigationsleisten.

PDF-Anker lassen sich aber auch ohne GoLive setzen, zumal die Syntax simpel ist. Die zu öffnende Seite übergibt man mit dem Parameter page, abgetrennt von einem Gatterzeichen. Der folgende Aufruf öffnet die Seite 10 aus der Datei Publisher.pdf:

Publisher.pdf#page=10

Der Pagemodus wird wie folgt angegeben:

Publisher.pdf#pagemode=thumbs

Die Vergrösserung übergibt man mit dem Parameter «view»:

Publisher.pdf#view=Fit

«Fit» bedeutet, dass das ganze Dokument gezeigt wird, d.h. die Ansicht so verkleinert wird, dass die ganze Seite ins Reader-Fenster passt. Mit «FitH» passt Reader die Seite horizontal ein und mit «FitV» vertikal.

Es gibt noch eine Reihe weiterer Parameter, die man dem Reader mit dem Link übergeben kann. Der Parameter «Zoom» erlaubt es, einen Ausschnitt der PDF-Datei anzuzeigen:

Publisher.pdf#zoom=200,20,10

Dieser Aufruf bringt den Reader dazu, das Dokument mit zweihundertprozentigem Zoom anzuzeigen. Die beiden anderen Werte legen den sichtbaren Ausschnitt fest, d.h. besagen in diesem Fall, dass Acrobat den sichtbaren Ausschnitt im Fenster bei zwanzig Pixel von links und zehn Pixel von oben beginnt.

Mit «viewrect» kann der sichtbare Ausschnitt noch auf eine zweite Weise übergeben werden: Dieser Parameter instruiert den PDF-Viewer, den angegebenen Bereich ins Fenster einzupassen, wobei dazu die vier Werte links, oben, Breite und Höhe anzugeben sind. Der folgende Hyperlink zeigt das Dokument somit beginnend 20 Pixel von links, 30 von oben und 400 Pixel in der Breite und 300 in der Höhe:

#viewrect=20,30,400,300

Hat man benannte Ziele («Named destinations») im Dokument, öffnet man die über den Parameter «namedest»:

Publisher.pdf#namedest=Prepress

Mit «scrollbar» und «toolbar» lassen sich die Bildlaufleisten und die Werkzeugpalette ein- oder ausblenden. Der folgende Aufruf zeigt das PDF ohne diese beiden Bedienungselemente:

Publisher.pdf#scrollbar=0&toolbar=0

Die Parameter lassen sich kombinieren, wobei das Ampersand benutzt wird, um die einzelnen Parameter abzutrennen. Folgender Hyperlink öffnet die Seite 3 eines Dokuments, zeigt die Lesezeichen an und zoomt auf 200 Prozent:

Publisher.pdf#pagemode=bookmarks&zoom=200,1,1&page=10

Abkürzungen und Akronyme erklären

(msc) HTML bietet zwei praktische Tags, um Abkürzungen und Akronyme (Aus den Anfangsbuchstaben mehrerer Wörter gebildetes Kurzwort) zu erklären. Der folgende Code führt zu einer Darstellung, bei der das Kürzel mit einer gepunkteten Linie unterstrichen wird. Verharrt der Mauszeiger über dem unterstrichenen Stichwort, dann erscheint die Erklärung als gelber Tooltipp im Browserfenster.

Dies ist der Code:

\SF DRS\ muss in seinen Wettersendungen Radar- und Satellitenbilder künftig mit einer Quellenangabe versehen.

Für Abkürzungen gibt es den Tag abbr (kurz für Abbreviation):

\Cisco Systems \ Inc.\ liefert eine überzeugende Bilanz fürs vierte Quartal.

Dieser Code erscheint wie folgt im Browser:

Der Internet Explorer unterstützt seltsamerweise nur den acronym-Tag. Abbr wird ignoriert. Die anderen Browser (Mozilla, Firefox, Opera) machen es korrekt. Ausserdem fehlt im Internet Explorer die gepunktete Linie unter dem erklärten Wort. Fügt man seinem CSS eine entsprechende Stildefinition hinzu, lässt sich auch Microsofts Browser dazu herab, Akronyme entsprechend auszuzeichnen:

acronym, abbr { cursor: help; border-bottom: 1pt dotted}

Natürlich kann man auch andere Formatierungen setzen, z.B. Farben.