template

Index :: Javascript :: Buch-Layout

• Allgemein
• Grafischer Aufbau
• Verwendete Grafiken
• Kapiteltypen
• Seitenorganisation
• Funktionen
• Code im Hauptskript
• Code in Dokumentseiten
• Quellcode
• Demo

Allgemein

• Bei einem (aufgeschlagenen) Buch sind immer 2 Seiten sichtbar, d.h. die Anzahl einzelner Dokumentseiten muss gerade sein, damit diese jeweils paarweise angezeigt werden können. Alternativ könnte man bei ungerader Anzahl am Ende - also in den rechten Frame - auch eine Leerseite laden.
• Eventuelle Inhaltsverzeichnisse sind nach einem Umblättern nicht mehr sichtbar. Falls dies unerwünscht ist, könnte man das Hauptverzeichnis (oder auch Kapitel-Unterverzeichnisse) ausserhalb des Buches platzieren, damit diese immer im Zugriff bleiben.
  Als weitere Alternative lassen sich auch Tabs (Tab-Reiter) integrieren, die als Lesezeichen fungieren. Damit wäre z.B. die Hauptmenü-Ebene ein optischer Bestandteil des Buches.
• Aus Symmetriegründen besitzen beide Frames die gleiche Größe. Ausgehend von einer mittlerweile üblichen Mindest-Bildschirmbreite von 1024 Pixel, verbleiben einem einzelnen Frame - abzüglich design-bedingter Ränder - für die Breite etwa 400 bis 450 Pixel. Aufgrund des DIN-Formates von Buchseiten (Verhältnis von Breite zu Höhe ungefähr 1 zu 1.4) läge die Höhe eines Frames dann bei etwa 550 bis 630 Pixel.
  Einzelne Dokumentseiten sollten möglichst ohne Scrollbalken in den Frames erscheinen; deshalb ist darauf zu achten, dass die darzustellenden Inhalte in den vorgegebenen Bereich passen. Nun lässt es sich erfahrungsgemäß gerade bei längeren Texten kaum vermeiden, dass vertikale Scrollbalken eingeblendet werden müssen. Dies stellt hinsichtlich des traditionellen Buches zwar einen Stilbruch dar, aber da es der Benutzer gewohnt ist, beim Lesen im Browser vertikal zu scrollen, sind solche Situationen durchaus zu verschmerzen.
  Problematisch allerdings wären überbreite Dokumente, hervorgerufen beispielsweise durch Images mit mehr als 400 Pixel Breite: hier würden dann horizontale Scrollbalken erscheinen. Das Lesen eventueller Fließtextabschnitte, welche die gesamte Breite nutzen, wäre auf solchen Seiten drastisch erschwert. Als mögliche Lösung könnte man Textpassagen hier in einen DIV mit fester Breite (schmaler als die Framebreite) einbetten.

Grafischer Aufbau

Zellenstruktur	Mit Grafik	Optisches Ergebnis
Ecke Rand   Rand Ecke Rand Kopf Falz Kopf Rand Frame Frame Fuß Fuß Ecke Rand   Rand Ecke	Kopf Kopf Frame Frame Fuß Fuß	Titel   Text   - 2 - - 3 -

Verwendete Grafiken

buobli.jpg		Ecke oben links
buobre.jpg		Ecke oben rechts
buunli.jpg		Ecke unten links
buunre.jpg		Ecke unten rechts
buob.jpg		Rand oben (Hintergrund)
buun.jpg		Rand unten (Hintergrund)
buli.jpg		Rand links (Hintergrund)
bure.jpg		Rand rechts (Hintergrund)
buobmi.jpg		Falz oben
bumi.jpg		Falz (Hintergrund)
buunmi.jpg		Falz unten
butab.jpg		Vorlage für Tab-Reiter

Kapiteltypen

• Ein- oder zweiseitige Dokumente (z.B. Hauptseite/Index, Linkliste oder Impressum). Hier ist kein Blättern vonnöten - eventuell muss rechts eine Leer- oder Füllseite gezeigt werden.
• Drei- oder mehrseitige Dokumente (z.B. textlastige Beiträge, Blog). Hier ist ein Blättermechanismus erforderlich - in den Fußbereichen können Seitenzahlen angezeigt und auch Schaltflächen zum Vor- und Zurückblättern untergebracht werden.
• Unterverzeichnis/Album (z.B. Bildergalerie). In diesen Fällen wird auf der linken Seite eine Liste mit anklickbaren Elementen (evtl. mit Thumbnails) gezeigt; auf der rechten Seite erscheinen jeweils die Details zum gewählten Element mit Bild(ern) und/oder Text. Damit ist auch hier kein Umblättern nötig.

Seitenorganisation

• Die Datei p0.html stellt eine globale Leerseite dar.
• Die Kapitelnummer 0 steht für das Inhaltsverzeichnis.
  Somit wären p0_0.html und p0_1.html die beiden Index-Seiten.
• Die erste Seite (linker Frame) jedes Kapitels trägt die Seitennummer 0. Damit ist gewährleistet, dass die Seitennummerierung wie in einem realen Buch erfolgt: links gerade, rechts ungerade.
  Da der eigentliche Inhalt umfangreicherer Kapitel ab Seite 1 (rechter Frame) beginnt, kann Seite 0 dazu verwendet werden, ein Unterverzeichnis (wie im Falle des Albums), eine Kapiteleinführung oder auch nur ein Titelbild anzuzeigen.
• Unterkapitelnummern beginnen immer mit 1, d.h. falls sich die Bildergalerien in Kapitel 3 befinden, dann hießen die Bildseiten der ersten Serie: p3_1_1.html, p3_1_2.html, p3_1_3.html, usw.
  Die zweite Galerie bestünde aus den Dateien p3_2_1.html, p3_2_2.html, p3_2_3.html, usw.
• Jedes Unterkapitel kann seine eigene Index-Seite besitzen, z.B. p4_1_0.html als Index-Dokument für Kapitel 4, Unterkapitel 1 - und p4_2_0.html für Unterkapitel 2, usw.
  In manchen Situationen jedoch, wie etwa einer handvoll Bildergalerien, ist es oft sinnvoller, die Thumbnails/Vorschaubilder aller Serien zentral auf einer Seite zu zeigen, gerade wenn die Galerien jeweils nur wenige Bilder enthalten. Die Übersichtsseite für obige Galerien in Kapitel 3 hieße dann p3_0.html.

Funktionen

Funktionen :: Code im Hauptskript

function SetPag(i) { var s,a=arguments;
  switch (a.length) {
    case 1: s='0'; break;
    case 2: s=Kap+'_'+a[1]; break;
    case 3: s=Kap+'_'+a[1]+'_'+a[2];
  } frames['if'+i].location='p'+s+'.html';
}

function SetKap(k) {
  if (k!=Kap) {
    $('iKap'+Kap).style.visibility='visible';
    $('iKap'+(Kap=k)).style.visibility='hidden';
  } SetTit(0,KapTit[Kap]); SetPag(0,0); SetPag(1,1); }
}

function SetTit(i,t) {
  $('tdTit'+i).firstChild.data=t?t:'\xA0';
}

Funktionen :: Code in Dokumentseiten

function SetPgR() { var p=parent,a=arguments;
  if (a.length==1) p.SetPag(1,a[0]); else p.SetPag(1,a[0],a[1]);
}

function SetKap(k) { parent.SetKap(k); }

Quellcode

CSS im Header
BODY {BACKGROUND:#B67A46;COLOR:#48301C;}

Javascript im Header
function $(id) { return document.getElementById(id); }
//---- book

Weiter unten, im BODY, das Buch:


Javascript zur Initialisierung:
<SCRIPT type='text/javascript'>SetKap(0);</SCRIPT>

Index :: Javascript

template