Frontier-Web: Frontier-Website-Tutorial (Teil 2)

Startseite | Schockwellenreiter | Impressum

Websites bauen mit Frontier, Teil 2

Nachdem wir im ersten Teil die Grundlagen der Website-Erstellung mit Frontier kennengelernt haben, werden wir jetzt also — wie angekündigt — in Medias Res gehen und anfangen, die Website (m)eines Hundevereins zu bauen. Dazu werden wir erst einmal ein bißchen in die Startseite hineinschreiben:

part2_1 picture

Gerendert (und damit Ihr den Text auch lesen könnt) sieht das dann so aus:

part2_2 picture

Aber das ist ja alles nichts Neues. Jetzt werden wir das Ganze mal ein wenig »aufhübschen« und dabei weitere Eigenschaften des Website-Frameworks von Frontier kennenlernen.

Es ist ja alles so schön bunt hier

Als erstes werden wir die Seiten ein wenig bunter machen, die Welt und auch das WWW sind schließlich nicht nur schwarz-weiß. Wenn wir die Tabelle #prefs aufklappen (durch Doppelklick) finden wir dort unter anderem verschiedene Farbdefinitionen: »alink« für aktive Links, »bgcolor« für die Hintergrundfarbe, »link« für die Linkfarbe, »text« für die Textfarbe und »vlink« für die Farbe der bereits besuchten Links (visited Link). Die ändern wir erst einmal wie folgt:

part2_3 picture

Nach einem erneuten Rendern hat sich zumindest die Hintergrundfarbe geändert (probiert es aus), mehr noch nicht, da wir Links ja noch gar nicht gesetzt haben. #prefs ist also eine Tabelle, in der wir diverse Präferenzen für unsere Website festlegen können.

Text mit Stil

Erinnert Ihr Euch an das {pageheader(title)}-Makro im ersten Teil des Tutoriums? Es schrieb im Prinzip die <head>-Sektion inklusive des <body>-Tags Eurer HTML-Seite. Allerdings war es — da einmal hart gecodet — ziemlich unflexibel. Schöner wäre es doch, wenn man auch ein Template für die Head-Section hätte. Und Frontier hat so ein Template, die #pageHeader-Direktive. In der obersten Tabelle der Website könnt Ihr entweder ein Outline oder einen WP-Text mit diesem Namen anlegen (ich bevorzuge generell zum Anlegen von Templates Outlines, man kann dann nicht interessierende Teile so schön wegklappen) und mit dem HTML für die Head-Section füllen. Im einfachsten Fall kann das dann so aussehen:

part2_4 picture

Wir haben im Großen und Ganzen den normalen Anfang einer HTML-Seite hier festgelegt, inklusive Doctype und allem drum und dran. Es gibt lediglich zwei Makros, die erläutert werden müssen: {metaTags()} schreibt einen Meta-Tag, der Frontier Credits gibt, höflicherweise sollte man dieses Makro daher belassen. Und {bodyTag()} macht genaus das, was sein Name sagt. Es bastelt aus unseren Präferenzen den <body>-Tag zusammen.

Jetzt müssen wir nur noch in unserem Template {pageHeader(title)} ersatzlos streichen (das ist wichtig, sonst haben wir zwei HTML-Heads auf unserer Seite) und schon ist unsere neue Direktive einsatzfähig.

[Exkurs] Ein Wort noch zum »Doctype«. Ich habe mit Absicht HTML 4.01 gewählt, da einige der Standard-Makros von Frontier, die wir im Laufe des Kurses kennenlernen werden, (noch) kein XHTML produzieren. Zwar ist es für jemanden, der UserTalk kennt, in der Regel ein Leichtes, diese Makros entsprechend anzupassen, doch das geht (erst einmal) über den geplanten Umfang dieses Tutorials hinaus.

Wenn wir jetzt unsere Start-Seite erneut rendern, hat sich erst einmal nichts geändert. Wenn wir uns jedoch den Quelltext der Seite anschauen, werden wir feststellen, daß alles, was wir in die #pageHeader-Direktive geschrieben haben, auch tatsächlich mitgerendert wurde.

Die Pageheader-Direktive wurde in Frontier eingeführt, als sich mit der weiteren Entwicklung von HTML zeigte, daß immer mehr in den Kopf der Seiten eingetragen werden mußte, insbesondere ging es hier um JavaScript und Cascading Style Sheets (CSS). Als nächstes werden wir daher ein kleines Stylesheet basteln und zeigen, wie wir es mit Hilfe von Frontier erstellen und in unsere Website einbauen können.

part2_5 picture

Dazu erzeugen wir erst einmal eine Tabelle namens #styleSheets in der obersten Tabelle der Website. In dieser Tabelle legen wir eine Outline mit Namen default an. Frontier unterstützt mehrere, benamte Stylesheets, doch für den Anfang begnügen wir uns mit dem Default-Stylesheet:

Wir haben noch nicht so viele Elemente in unserem Text, aber für diese (und einige andere, die sicher noch kommen werden) können wir ja schon einmal Stilattribute festlegen:

part2_6 picture

Der erste Level des Outlines enthält die Elemente, der zweite Level die Attribute und der dritte Level die Werte der Attribute, wie etwa Fontgröße oder Schriftname. Um geschweifte Klammern oder die Simicolon am Ende brauchen wir uns nicht zu kümmern, das erledigt Frontier für uns.

[Exkurs] Manchmal jedoch sind Stylesheets komplizierter, als es die einfache Outline-Gliederung darzustellen erlaubt. Dann können wir unser CSS ganz normal als WP-Text erstellen, wie in jedem anderen Editor auch. Allerdings müssen wir uns dann auch selber um die korrekte Formatierung kümmern.

Stylesheets können ja bekanntlich auf zweierlei Art eingebunden werden. Einmal direkt in die Head-Section jeder HTML-Seite und einmal als Link auf eine externe CSS-Datei. Beide Methoden haben ihre Vor- und Nachteile: Seiten mit eingebundenen Stylesheets laden in der Regel schneller, da sie keine weitere Datei nachladen müssen, bei Seiten mit Links auf externen Stylesheets braucht man bei einer Änderung eben nur diese Datei zu ändern und nicht alle HTML-Seiten. (Zwar unterstützt ein CMS wie Frontier es natürlich, daß man nur an einer Stelle ändern muß, aber manchmal will man vielleicht von unterwegs nur schnell eine Änderung vornehmen und hat gerade keinen Zugriff auf sein CMS.)

Frontier unterstützt beide Möglichkeiten: Will man auf ein externes Stylesheet verlinken, gibt man an passender Stelle in seinem #pageHaeder (z.B. unterhalb der Meta-Tags) das Makro {linkStyleSheet()} ein, im anderen Fall das Makro {embedStyleSheet()}. Aber egal, für welche Möglichkeit wir uns entscheiden, wenn wir jetzt unsere Startseite neu rendern, sieht sie schon viel freundlicher aus.

Natürlich sind auch alternative Stylesheets möglich. Sollten wir uns z.B. entscheiden, ein eigenes Stylesheet für Netscape 4 zu schreiben, können wir das so nennen und in unserer #styleSheets-Tabelle ablegen. Es wird dann halt mit seinem Namen aufgerufen, also entweder

{linkStyleSheet("netscape4")} oder {embedStyleSheet("netscape4")}.

Ich persönlich bin allerdings nicht sehr glücklich über Browserweichen, sie sind fehleranfällig und daher eine Quelle ständigen Ärgernisses, aber es ist gut zu wissen, daß so etwas geht.

Wir wollen Bilder!

hund02 picture Eine Website ohne Bilder ist wie ein... Fisch ohne Farrad. Mindestens! Und natürlich bietet auch Frontier eine komfortable Möglichkeit, Bilder einzubinden. Ladet daher erst einmal das nebenstehende Hundebildchen runter. Um die komfortablen Möglichkeiten der Bildbehandlung zu nutzen, müssen die Bilder natürlich in Frontiers ODB eingebunden sein. Der generische Ort dafür ist die Tabelle #images in unserer Website, die zur Zeit nur den Eintrag space enthalten dürfte. Klickt in diese Tabelle, so daß der Cursor da irgendwo steht und sucht dann im Menü Web das Menüitem Load Image File.... Eine Dialogbox erscheint, die Euch auffordert, ein Bild zu laden. Sucht also das Hundebild (wenn Ihr nichts geändert habt, heißt es hund02.jpg) und ladet es in die Datenbank ein. Sie sollte jetzt so aussehen:

part2_7 picture

Und jetzt geben wir in unserer Startseite unter dem ersten Paragraph-Tag (<p>) folgendes Makro ein:

{imageRef("hund02", "Sheltie", align:"left", hspace:"8", vspace:"4")}

Wenn wir jetzt die Seite neu rendern, sehen wir den kleinen Sheltie bellen. Das {imageRef()}-Makro verlangt als ersten, einzigen und verpflichtenden Parameter den Namen des Bildes, so wie er in der Datenbank steht — also ohne File-Extension. Alle anderen Parameter sind optional, aber wenn man, wie in unserem Falle, das Bild linksbündig haben will, auch notwendig. Der zweite Parameter ist einfach der alt-Text — wenn er fehlt, bastelt Frontier einen aus dem Dateinamen zusammen; die weiteren Parameter sind benamt und werden als attributname:"attributwert" in beliebiger Reihenfolge übergeben. Parameter werden bei der Übergabe durch Kommata voneinander getrennt.

[Ein Wort noch zu den (internen) URLs] Eine von Frontiers Zielen ist es, eine Site so portabel wie möglich zu halten. Alle internen URLs, die von Frontier generiert werden, sind daher relative URLs. Aber das soll uns keine Sorgen machen, Frontier macht dies seit über acht Jahren und Frontier macht dies gut.

Und jetzt noch ein wenig Template-Bastelei

Das bisher erstellte Template ist eher minimalistisch, als der Weisheit letzter Schluß. Wir werden daher jetzt noch ein wenig daran rumbasteln, mehr um ein Gefühl für die Template-Erstellung zu bekommen als um schon ein endgültigees Layout festzulegen. Aber erst einmal brauchen wir dazu folgendes Bild:

Wenn jetzt jemand über die Qualität des Logos meckert, der möge ein besseres basteln. Ich bin EDV-Leiter, kein Graphiker...

Dieses Bild laden wir wie gewohnt runter und fügen es, wie oben beschrieben, in unsere #images-Subtable ein. Danach ändern wir unser Template wie folgt:

part2_8 picture

Noch einmal: Wenn jetzt jemand meckert und etwas vom »tabellenlosen Layout« und CSS 2.0 murmelt, der möge es besser machen. Nein, im Laufe dieses Tutorials werden wir das Template noch entsprechend umstellen, aber hier geht es einfach erst einmal darum, zu zeigen, wie so ein Template eigentlich aussehen kann.

Und bei Tabellen kann man am besten eines der Vorzüge eines Outlines zeigen. Klappt man die oberste Zeile ein, so schrumpft die ganze Tabelle auf eine einzige Zeile zusammen. Templates werden so bedeutend übersichtlicher und einfacher zu warten.

OK, die Website unseres (genauer gesagt: meines) Hundevereins nimmt langsam Gestalt an:

part2_final picture

Zwar haben wir immer noch nur erst ein Seite fertiggestellt, aber wir wissen jetzt, wie man Templates erstellt, wie man Bilder einbindet und wie man Präferenzen wie z.B. Farben in Frontier einstellt. In der nächsten Folge werden wir weitere Seiten erstellen. Dabei lernen wir dann den Linkmechanismus von Frontier kennen und wir werden uns eine Navigationsleiste basteln.

FrontierWeb.de

Weil das Web zum Schreiben ist...