Download - iWeb Bibel

Transcript
Page 1: iWeb Bibel

iWeb-Bibel

Die 3 großen Schritte zum eigenen iWeb-Theme

von

Dietmar Schönwandt

Page 2: iWeb Bibel

1. Vorwort:

DER AUTOR DIESER ANLEITUNG ÜBERNIMMT KEINE VERANTWORTUNG FÜR SCHÄDEN AN DEN INSTALLIERTEN PROGRAMMEN. DER ANWENDER IST ALLEINE VERANTWORTLICH FÜR DIE ÄNDERUNGEN UND MODIFIZIERUNGEN DER VORLAGEN AUF SEINEM MAC!

HINWEIS : Änderung bitte immer an duplizierten Themen durchführen und zur Sicherheit immer vorher eine Sicherung der Dateien durchführen, um bei Problemen zum Urzustand zurückkehren zu können!

iWeb ist ein Programm der Fa. Apple, welches mit jedem neuen Mac mitgeliefert wird und bereits auf diesem installiert ist. Ebenso ist iWeb ein fester Bestandteil der Apple iLife Suite und wird mit jeder Aktualisierung erweitert und verbessert. Diese Anleitung basiert auf der aktuellen Version 3.x und wird bei neuen Versionen dementsprechend erweitert. iWeb ermöglicht es dem Anfänger durch viele Vorlagen schnell und einfach eine Webseite zu erstellen. Doch auch für Fortgeschrittene bietet dieses Programm genug Flexibilität um seine Vorstellungen zu verwirklichen und sein eigenes Design zu entwickeln. Der Workflow des Programms ist Apple like und ermöglicht schnelles und effizientes Arbeit.

Durch meine eigene Erfahrung im Umgang mit dem Programm und der Mitarbeit als Moderator im iWeb-Forum [http://www.iweb-forum.de], habe ich mit der Zeit einiges über das Programm erfahren und gelernt. Gerade die Arbeit im Forum habt mir gezeigt, dass jedes Programm, sei es auch noch so einfach und selbsterklärend, früher oder später zu Fragen führt. Seien es die Funktionen, der Umgang mit dem Programm, allgemeine Fragen zum Webdesign oder zum Internet, jeder stößt irgendwann an seine Grenzen und benötigt Hilfe.

Ein schlauer Mann hat mal gesagt: „Man muss nicht alles wissen, man muss nur wissen wo es steht!“

iWeb ist ein tolles Programm und bietet eine Vielzahl an Vorlagen um Webseiten zu erstellen. Ich kann die vorhandenen iWeb Themen zwar so anpassen wie ich es möchte, kann diese Anpassung jedoch nicht als Vorlage abspeichern. Durch ausprobieren bin ich zufällig auf einen Weg gestossen um mir mein eigenes Theme zu erstellen. Ich werde hier Schritt für Schritt erklären wie sich jeder sein eigenes Theme erstellen kann, etwas Kenntnis im Umgang mit dem Mac und dessen Programmen vorausgesetzt.

Sollte in dieser Anleitung etwas fehlen oder nicht korrekt wiedergegeben worden sein, bitte ich um kurze Info, denn „Nobody is perfect“.

In dem Sinne,

viel Spaß mit der Anleitung!

Dietmar Schönwandt

Page 3: iWeb Bibel

Inhaltsverzeichnis:

1. Vorwort

2. Speicherorte

2.1. Speicherort Vorlagendatei 2.2. Speicherort Vorschaudateien 2.3. Speicherort Domaindatei

3. Schritt 1 - Vorbereitungen

3.1. Alias erzeugen 3.2. iWeb-Theme kopieren 3.3. Theme in iWeb sichtbar machen

4. Schritt 2 - Themengestaltung

4.1. Grundlagen 4.2. iWeb-Theme kreieren 4.3. Seiteneinstellungen 4.4. Seiten-Grafiken 4.5. Seiten-Grafiken richtig nutzen

5. Schritt 3 - Umwandeln der iWeb-Seite in eine Vorlage

5.1. Grundlagen 5.2. Speicherort 5.3. Vorlagen XML-Datei ändern 5.4. Navigationszeile anpassen 5.5. Wichtiges zum Schluss

6. Nachträge und neuste Erkenntnisse

Page 4: iWeb Bibel

2. Speicherorte

iWeb erstellt seine Seiten anhand von Vorlagen. Diese Vorlagen sind im innersten von iWeb abgelegt, auf die man jedoch vollen Zugriff hat. Somit auch auf alle Dateien, aus denen die Vorlagen bestehen. Hier nun der erste Punkt, wie komme ich an die Vorlagen? - Als erstes wechsle ich in den Programmordner, wo meine iWeb-Programmdatei liegt. Dann lasse ich mir mit einem Rechtsklick den Paketinhalt anzeigen!

2.1. Speicherort Vorlagendatei:

Benutzer - Programme - iWeb - Contents - Recourses - Themes

Page 5: iWeb Bibel

Die Vorlagen  haben die Endung ".webtheme" und zu jedem Theme gibt es noch einen Ordner mit Vorschaubildern, die in iWeb bei der Vorlagenauswahl angezeigt werden.

2.2. Speicherort Vorschaudateien:

Benutzer - Programme - iWeb - Contents - Recourses - thumbnails

Wenn das Theme z. B. "Black.webtheme" heisst, dann ist der Name des Ordners mit den Vorschaubildern "Black". Da die Namen der Vorlagen auf englisch sind, erleichtern die Vorschaubilder die Suche nach der richtigen Vorlage. Wenn diese gefunden ist, Vorlage kopieren und zum bearbeiten erst einmal in einem Arbeitsordner speichern.

Vorsicht - nichts im oder aus dem iWeb-Paket verschieben sondern nur kopieren!

Page 6: iWeb Bibel

2.3. Speicherort Domaindatei:

Wenn ich eine Seite mit iWeb gestaltet habe, dann wird diese in der Domaindatei abgespeichert. Die Domaindatei ist meine Arbeitsdatei die iWeb automatisch beim ersten Start des Programms anlegt. Bei der Datei handelt es sich ebenfalls um eine Containerdatei, in der sämtliche Daten abgelegt werden. Also, alle Dateien egal ob Bilder, Filme usw. werden in diesem Container abgelegt.

Benutzer - Library - Application Support - iWeb

Die Domaindatei spielt für das eigene Theme eine tragende Rolle, doch hierzu kommen wir später.

3. Schritt 1 - Vorbereitungen

Wie bereits beschrieben sollte man sich einen Arbeitsordner erstellen, in dem man das eigene Theme zum bearbeiten ablegt. Wie dieser Ordner heisst und wo ich diesen anlege, bleibt jedem selbst überlassen.

Page 7: iWeb Bibel

3.1. Alias erzeugen

Beim Erstellen des eigenen iWeb-Theme muss ich die Themen-Datei häufig in das iWeb-Paket kopieren. Um diesen Schritt zu vereinfachen habe ich die Möglichkeit einen Alias zu erzeugen. Mit diesem kann ich auf das iWeb-Paket zugreifen, als ob dieses ein Ordner auf meinem Mac wäre. Hierzu lasse ich mir den Paketinhalt von iWeb anzeigen.

Dann gehe ich zum Ordner Themes, wähle diesen mit einem Rechtsklick aus und wähle dann im Kontextmenü die Option Alias erzeugen.

Page 8: iWeb Bibel

Danach erscheint folgendes in meinem Finderfenster:

Der Alias ist die EINZIGE Datei, die aus dem iWeb-Paket verschoben wird. Den Alias kann ich nun zum weiteren Bearbeiten in den Arbeitsordner für mein iWeb-Theme verschieben. Im Arbeitsordner angekommen, kann ich den Alias nach belieben umbenennen, dieses ist jedoch keine Pflicht. Wenn ich nun die geänderte Themen-Datei in das iWeb-Paket kopieren möchte, brauche ich nur mit Rechtsklick die Themendatei kopieren und ebenso mit Rechtsklick auf meinen Alias einfügen. Schon wird die Themendatei in das iWeb-Paket kopiert.

3.2. iWeb-Theme kopieren

Da wir unsere eigene Themendatei erstellen wollen, nehmen wir uns eine bereits vorhandene Vorlage und kopieren diese in unseren Arbeitsordner.

Meine Empfehlung, entweder die schwarze oder die weiße Vorlage wählen, da diese am flexibelsten sind. Also, schwarze Vorlage für ein dunkles Theme und die weiße Vorlage für ein helles Theme nutzen.

Page 9: iWeb Bibel

3.3. Theme in iWeb sichtbar machen

Nun muss ich noch dafür sorgen, dass iWeb das Theme auch erkennt und meine alte Vorlage nicht überschrieben wird. Dem kopierten Webtheme kann ich einen beliebigen Namen geben z. B. "xyz.webtheme". Wenn ich Vorschaubilder des Themes in iWeb haben möchte brauche ich ebenfalls einen Ordner mit Bildern im Verzeichnis "thumbnail". Hier kann ich den Ordner des Originals duplizieren und dann wie mein Theme umbenennen "xyz".

Jetzt sind noch 2 kleine Änderungen notwendig, damit iWeb das neue Theme auch richtig anzeigt. Hierzu lasse ich mir den Paketinhalt des Themes anzeigen

Im Paket des Webtheme befinden sich die einzelnen Landes-Ordner, für Deutschland heißt dieser "German.lproj".

Page 10: iWeb Bibel

In diesem Ordner befinden sich die zwei Dateien "DisplayNames.plist" und "index.xml.gz". Als erstes öffnen wir die Datei "DisplayNames.plist" mit dem Texteditor

Hier finden wir folgende Code-Zeilen:

<dict><key>DisplayName</key><string>Schwarz</string><key>PageDisplayNames</key><dict>

Der rote Text ist der Theme-Titel, den iWeb anzeigt. Diesen dementsprechend in euren Themen-Namen ändern und die Datei speichern.

Als zweites ist nun die Datei "index.xml.gz" zu ändern. Hierbei handelt es sich um eine gepackte Zip-Datei, die ich als erstes durch einen Doppelklick entpacke. Nun habe ich zwei Dateien, die Original "index.xml.gz" und die entpackte "index.xml". Die Datei "index.xml.gz" kann ich entweder löschen oder umbenennen. Wenn ich auf Nummer sicher gehen will, benenne ich die Datei in "index.xml.gz.old" um, dann habe ich immer noch ein Sicherheitskopie. Die Dateiendung ".gz" darf auf keinen Fall stehen bleiben, den iWeb nimmt als erstes immer die Datei mit der Endung ".gz"!

Page 11: iWeb Bibel

Die Datei "index.xml.gz" mit dem Texteditor öffnen und wir finden folgenden Code:

Beispiel: <bl:theme bl:version="1.0" sf:name="theme">

Den Code - version="1.0" - kann man ändern in - version="Eigene" oder sonstige Bezeichnungen, das wird später in der Themen-Auswahl im Dropdown-Menü angezeigt und so kann ich mir beispielsweise nur die eigenen Themen anzeigen lassen. Ist jedoch kein Muss! Nach der vorgenommenen Änderung müssen wir die Datei speichern und das geänderte Theme erst einmal in das iWeb-Paket kopieren. Nach dem Neustart von iWeb schauen wir nach, ob das eigene Theme in der Auswahl erscheint. Diesen Schritt würde ich auf jeden Fall durchführen, um zu sehen, ob ich die Möglichkeit habe eine neue Seite anhand der eigenen Vorlage zu erstellen.

Page 12: iWeb Bibel

4.1. Grundlagen

Nun geht es ans Eingemachte! - Wie bereits zuvor, lasse ich mir mit einem Rechtsklick den Paketinhalt der Vorlage anzeigen.

Es werden viele Ordner mit der Endung „.lproj“ sichtbar, die für die unterstützten Landessprachen stehen. Diese kann man jetzt außer Acht lassen. Wichtig ist der Ordner "Shared". In diesem Ordner befinden sich alle Bild- und Videodateien, sowie die acht Seitenvorlagen - About Me.xml.gz, Blank.xml.gz, Blog.xml.gz, Movie.xml.gz, My Albums.xml.gz, Photos.xml.gz, Podcast.xml.gz und Welcome.xml.gz. Wie bereits zuvor, entpacke ich die Dateien durch einen Doppelklick. Nun muss ich noch die Dateien mit der Endung ".gz" löschen oder umbenennen, genau wie mit der Datei "index.xml.gz" praktiziert. Auch hier gilt, iWeb nimmt als erstes die Dateien mit der Endung ".gz"!

Page 13: iWeb Bibel

4.2. iWeb-Theme kreieren

Jetzt ist die eigene Kreativität gefordert. Zur Demonstration picke ich mir die Seite "Über mich (About me)" heraus und werde diese Stück für Stück verändern und nach meinen Vorlieben abändern. Auch wenn iWeb eine feste Seitengrösse vorgibt, so hat jeder der mit iWeb bereits gearbeitet hat, festgestellt, dass iWeb durch die Inhalte auf einer Seite diese dynamisch in der Höhe verändert. Das heisst für mich als Vorlagengestalter, wenn ich mit Grafiken im Kopf-, Seiten- und Fußbereich arbeiten möchte, dann müssen sich diese dementsprechend anpassen können, also dynamisch mitarbeiten. Keine Angst, dieses hört sich schlimmer an als es ist.

Tipp:

Um das Arbeiten zu erleichtern und um das spätere Einpflegen der geänderten Seiten in die Webtheme-Datei so unkompliziert wie möglich zu handhaben, sollte man als erstes die Domaindatei duplizieren.

Das Duplikat umbenennen und über ein Doppelklick, bei geschlossenem iWeb, die Datei zum bearbeiten in iWeb laden. Wenn ich in der Domaindatei bereits Webseiten befinden, dann kann ich diese löschen, da die Seiten noch in meiner Original-Domaindatei vorhanden sind. Für das veröffentlichen der Seite wähle ich die Option “Lokaler Ordner“,

da ich nachher auf die Daten zugreifen will und die erstellten Seiten im Vorfeld betrachten möchte. Zum erstellen der Vorlagenseite wähle ich nun, wie bereits angekündigt, die Seite "Über mich". Ich lasse also iWeb die Seite erstellen, die ich dann Stück für Stück verändern möchte.

Page 14: iWeb Bibel

4.3. Seiteneinstellungen

Betrachten wir uns zuerst einmal die Standardeinstellungen der Seite. Hier sehen wir eine Breite von 700 px. Wenn man sich die heutigen Monitore anschaut, so ist eine solche Breite eigentlich veraltet und nicht mehr zeitgemäß.

Wie die Statistik von meinem Blog zeigt, liegen die Auflösungen fast alle jenseits von 1024 px. Das heisst für mich als Gestalter, die Breite meiner Seite kann ruhig breiter ausfallen. In meinem Beispiel entscheide ich mich für eine Breite von 900 px, so gewinne ich einiges an Platz für die Gestaltung meiner Homepage. Der Abstand oben und unten steht auf 0 px, was mir persönlich nicht gefällt, und wähle hier einen Abstand von 20 px.

Da ich mit Grafiken in der Kopf-, Seiten- und Fußzeile arbeiten möchte, stelle ich die Kopf- und die Fußzeile auf eine Höhe von 150 px. Die Höhe des Inhalts (Seitenbereich) lasse ich so stehen. Zu der Höhe der Kopfzeile kommt noch die Höhe der Navigationsleiste hinzu (in unserem Fall 45 px), deshalb habe ich die Höhe der Kopfzeile auf 105 px reduziert, wodurch ich auf einen Gesamtwert von 150 px komme.

HINWEIS:

Diese Einstellungen sind natürlich nur auf das Beispiel bezogen und können von jedem nach seinen Wünschen geändert werden.

Page 15: iWeb Bibel

4.4. Seiten-Grafiken

Nun zu den Grafiken des Kopf-, Seiten- und Fußbereichs. Wenn ich möchte, dass die Seite eine geschlossene Einheit darstellt, dann brauch ich 3 Grafiken. Die erste Grafik ist die Kopfzeilen-Grafik. Da die Kopfzeile inklusive der Navigation eine Höhe von 150 px hat, sollte die Grafik ebenfalls mindestens 150 px hoch sein und eine Breite von 900 px (Seitenbreite) haben. Wenn die Seiten-Grafik mit der Kopfzeilen-Grafik einen einheitlich Übergang bilden soll, so muss die Seitengrafik nahtlos an dieser andocken, zumindest sollte es so ausehen. Der Trick ist, die Seitengrafik wird als Hintergrund-Grafik, gekachelt eingepflegt.

Hierdurch ist der Hintergrund der Seite immer gleich, egal wie hoch die Seite auch wird. Je nach Layout empfehle ich hier eine Grafik von einer Höhe mit 1 px und einer Breite von 900 px (Seitenbreite).

Zum Schluss noch die Fußzeilen-Grafik, diese sollte ebenfalls mindestens die Höhe der Fußzeile haben und natürlich die Seitenbreite. Also 150 px hoch und 900 px breit.

Tipp:

Um eventuelle Farbunterschiede mit den Browser-Hintergrund zu vermeiden, empfehle ich eine 1 x 1 px große Grafik mit der gewünschten Hintergrundfarbe. Diese muss dann ebenfalls gekachelt eingebunden werden und schon sieht meine Seite, egal in welchem Browser, von den Farben her gleich aus.

HINWEIS:

Es ist kein Problem, wenn die Bilder eine größere Höhe als die Fuß- bzw. Kopfzeile haben. Hierzu kommen wir jedoch später noch ausführlicher.

Page 16: iWeb Bibel

Jetzt kommt sicherlich die Frage auf: „Wie erstelle ich die Grafiken?“

Meine Empfehlung lautet:

Am besten mit einem Grafikprogramm wie Photoshop, Gimp (kostenlos) oder dem Programm, was mir zur Verfügung steht und mit dem ich am besten mit klar komme. Der einfachste Weg ist eine Bilddatei zu erstellen, die die Größe der gewünschten Seite hat. Jetzt kann ich in Ruhe mein Layout der Seite mit dem Grafikprogramm kreieren und hinterher die Grafiken für den Kopf-, Seiten- und Fußbereich in den gewünschten Größen ausschneiden und als eigene Datei abspeichern. Ebenso darf ich natürlich die 1 x 1 px Grafik für den Hintergrund nicht vergessen, damit ich auch 100% sicher bin die richtige Farbe zu haben.

Wichtig ist auf jeden Fall, dass die Grafiken nicht zu groß sind und die Ladezeit in die Höhe schrauben. Die meisten Grafikprogramme bieten hier viele Möglichkeiten der Komprimierung und Bildformate, welche ich fürs Internet nutzen kann.

GIF " - Für Grafiken mit wenig Farben

JPG " - Für Grafiken mit einer hohen Anzahl verschiedener Farben

PNG " - Für Grafiken mit Transparenz

4.5. Seiten-Grafiken richtig nutzen

Ich habe für unser Beispiel ein paar Grafiken vorbereitet, um das zuvor beschriebene in die Tat umzusetzen. Es gibt 4 Grafiken:

Kopfbereich

Seitenbereich

Fußbereich

Hintergrund

(1 x 1 Pixel) Grafik

Page 17: iWeb Bibel

Wenn ich nun den Browserhintergrund und den Seitenhintergrund nach der vorher beschriebenen Weise einfüge sieht unsere Seite so aus:

Nun kommen die Kopf- und Fußgrafik zum Einsatz. Hierbei muss man darauf achten, dass die Bilder im entsprechenden Bereich einrasten. Das erkennt man daran, dass der Bereich (Umrandung) blau markiert ist.

Dadurch, dass die Grafik im Fußbereich eingerastet ist, wir diese nun automatisch nach unten geschoben, wenn die Seite dynamisch angepasst wird. Da die Kopf-Grafik im oberen Bereich der Seite untergebracht ist, ist diese durch die Anpassung nicht betroffen, da nur der Seiten- und Fußbereich nach unten verlängert wird.

Wenn die Bilder in den Bereichen eingerastet sind, kommt nun noch ein wichtiger Punkt, den man nicht vergessen sollte. Da die Bilder als Hintergrundbilder dienen sollen, müssen diese nun auch in den Hintergrund gebracht werden.

Page 18: iWeb Bibel

Mit einem Rechtsklick auf die Grafiken kann ich die Option „Ganz nach hinten“ wählen, wodurch das Bild in die unterste Ebene verschoben wird und alle anderen Dinge wie Navigationsleiste usw. nicht durch die Grafiken überlagert werden.

Wie wir sehen, kann man mit kleinen Mitteln eine große Wirkung erzielen. Was nun noch fehlt, ist die Ausrichtung der Bild- und Textblöcke der Seite. Hier positioniere ich die Dinge neu und verändere das eine oder andere nach meinem Geschmack. Wichtig ist vor allem die Breite der Navigationsleiste auf die aktuelle Seitenbreite anzupassen, da diese nie breit genug sein kann. Ich sollte mir im klaren darüber sein, dass die Navigationsleiste schnell mein Bild zerstören

Page 19: iWeb Bibel

kann. Wenn ich hier durch die Anzahl der Seiten eine 2. Zeile im Navigationsmenü erhalte. Dann verschiebt sich alles nach unten und mein Layout ist im Eimer. Die Größe, Farbe und das Erscheinungsbild des Navigationsmenüs kann ich aber noch nach meinen Wünschen anpassen. Dazu komme ich später!

Im Seitenlayout können auch Dinge wie HTML-Widgets eingebunden werden, die dann später AUCH in meiner Vorlage vorhanden sind. Es gibt Möglichkeiten ohne Ende, doch sollte man hier berücksichtigen, dass die HTML-Codes allgemein gehalten werden und nicht auf den eigenen Server zugreifen, wenn ich die Vorlage an andere weitergeben möchte. Doch das bleibt jedem selbst überlassen.

Page 20: iWeb Bibel

5. Schritt 3 - Umwandeln der iWeb-Seite in eine Vorlage

5.1. Grundlagen

Nun kommt der grosse AHA-Moment!

Wie schon zu Anfangs geschrieben, habe ich zufällig durch ausprobieren einen Weg gefunden um eigene iWeb-Vorlagen zu erstellen. Der Trick ist so einfach wie genial. iWeb benötigt zum erstellen der Seiten die XML-Dateien als Vorlage. Wenn iWeb die erstellte Seite veröffentlicht dann erstellt das Programm genau diese XML-Dateien für jede einzelne Seite und speichert diese in der Domaindatei. Das heisst im Klartext, iWeb benötigt die Vorlagendateien nur zum ersten Erstellen der Seite, danach greift iWeb auf die XML-Dateien in der Domaindatei zurück. Also nehme ich die von iWeb erstellte Vorlage, benenne diese um und kopiere die Datei in meine Webtheme-Datei.

5.2. Speicherort

Um nun an die Datei zu kommen, lasse ich mir den Paketinhalt der Domaindatei anzeigen.

iWeb erstellt in der Domaindatei einen Ordner „domain-.....“, innerhalb dieses Ordners einen Unterordner „site-.....“ und hier wiederum einen Unterordner „site-page-.....“. In diesem Verzeichnis befindet sich nun die XML-Datei, welche wir für unsere Webtheme-Datei benötigen. Für jede erstellte Webseite in iWeb kommt ein Unterordner „site-.....“ und für jede Seite innerhalb der Webseite ein neuer Unterordner „site-page-.....“ hinzu. Um hier nicht den Überblick zu verlieren sollte man immer nur eine Seite in iWeb bearbeiten, damit man die aktuell geänderte Seite nicht in tausenden anderer Seiten suchen muss. Ich erstelle nun eine Kopie dieser XML-Datei, welche übrigens wieder als „.gz“ gepackt ist, und lege diese in meinem Arbeitsordner ab.

Page 21: iWeb Bibel

5.3. Vorlagen XML-Datei ändern

Als erstes benenne ich die Seite in den richtigen Namen um.

In unserem Fall wird aus „site-page-........xml.gz“ - „About me.xml.gz“.

Hier nehme ich natürlich immer den Namen, den ich in der Vorlage ersetzen möchte. Nach dem Umbenennen entpacke ich die Datei durch einen Doppelklick und lösche die „.gz“ Datei, da diese nicht benötigt wird. Wenn ich keine weiteren Änderung an der Datei vornehmen möchte, kann ich diese kopieren und in meinem Webtheme-Paket integrieren. Jetzt fehlen aber noch die Bilddateien, die für die neu erstellte Vorlage benötigt werden. Diese finde ich ebenfalls in der Domaindatei.

Am besten kopiert man alle alle Bilddateien aus der Datei und fügt diese in das Webthemepaket ein. iWeb hat die Angewohnheit Bilder als Kopien des Originals abzulegen und zu verwenden.

Page 22: iWeb Bibel

Wenn ich nun jedoch die erstellte Datei nachträglich ändern möchte, öffne ich diese mit dem Texteditor und nehme die Änderungen an der XML-Datei vor. Nicht erschrecken, denn die Datei ist vollgespickt mit XML-Code. Da Textedit das Textfenster standardmäßig sehr klein hält, ziehe ich das Fenster erst einmal auf eine akzeptable Größe. Das Einzige was ich in der Datei von Hand ändern muss, sind die Einstellungen der Navigationszeile. Da ich hier viele Möglichkeiten der Anpassung habe, widme ich diesem Thema eine eigene Rubrik!

5.4. Navigationszeile anpassen

Der maßgebliche Codeblock sieht in unserem Fall so aus:

<bl:navbar-css><bl:string sfa:string=".navbar {&#10;&#9;font-family: Arial, sans-serif;&#10;&#9;font-size: 1em;&#10;&#9;color: #A1A1A1;&#10;&#9;margin: 9px 0px 6px 0px;&#10;&#9;line-height: 30px;&#10;}&#10;&#10;.navbar-bg {&#10;&#9;text-align: center;&#10;}&#10;&#10;.navbar-bg ul {&#10;&#9;list-style: none;&#10;&#9;margin: 0px;&#10;&#9;padding: 0px;&#10;}&#10;&#10;&#10;li {&#10;&#9;list-style-type: none;&#10;&#9;display: inline;&#10;&#9;padding: 0px 10px 0px 10px;&#10;}&#10;&#10;&#10;li a {&#10;&#9;text-decoration: none;&#10;&#9;color: #A1A1A1;&#10;}&#10;&#10;li a:visited {&#10;&#9;text-decoration: none;&#10;&#9;color: #A1A1A1;&#10;}&#10;&#10;&#10;li a:hover&#10;{&#10;&#9;text-decoration: none;&#10; &#9;color: #eee;&#10;}&#10;&#10;&#10;li.current-page a&#10;{&#10;&#9;text-decoration: none;&#10;&#9; color: #fff;&#10;&#9;font-weight: bold;&#10;&#10;}"/></bl:navbar-css>

Jetzt werden einigen sagen: „Oh mein Gott!“ - Nein, Didi reicht :-)!

Wir zerpflücken die Codezeile Stück für Stück und nehmen uns die wichtigsten Bestandteile zur Brust.

1. Die Font-/Schriftart. Hier kann ich in die gewünschte Schriftart ändern, sollte aber berücksichtigen, dass ich am besten websicher Schriftarten wähle.

2. Die Fontgröße. iWeb gibt diese mit dem Faktor „1em“ an. Dies ist der Zoomfaktor 1=100%. Möchte ich die Schrift verkleinern setze ich den Wert z. B. auf „ .8em“. Den richtigen Wert würde ich anfänglich bei der ersten Vorlage ermitteln und später weiter verwenden.

3. Die Schriftfarbe. Die erste Farbangabe ist die Standardfarbe der Navigationsleiste. iWeb gibt diese im 6-stelligen Hex-Code an, welchen ich mir in allen gängigen Bildbearbeitungs-programmen anzeigen lassen kann.

4. Die Abstandsanpassung. Hier kann ich iWeb sagen, welchen Abstand der Text voneinander haben soll (Pixelangabe „margin“ ober- und unterhalb vom Text sowie „padding“ vor und hinter dem Text).

5. Die Größenanpassung. Hier kann ich die Höhe des Navigationsleistenfeldes einstellen. Natürlich kann das Feld nur im Zusammenspiel mit der Texthöhe verkleinert werden. Hat der Text eine Höhe von 20 px, kann ich die Höhe des Feldes nicht auf 15 px stellen, das funktioniert nicht.

6. Die Textausrichtung. Hier kann ich iWeb angeben ob die Ausrichtung der Navigationsleiste mittig (center), rechtsbündig (right) oder linksbündig (left) sein soll.

7. Die Textdekoration. Unterstrichen (underline) und ein Strich über dem Text (overline). Hier gibt es sicherlich noch andere Arten, doch ob diese mit iWeb funktionieren, kann ich nicht beantworten. Aber wie heisst es doch so schön: “Probieren geht über studieren!“

8. Die Codezeilen für die einzelnen Linkzustände beginnen jeweils mit „li a“. Ohne Zusatz (grüne Zeile) steht für den Standard Linktext. „li a:visited“ steht für die bereits besuchten

Page 23: iWeb Bibel

Seiten, „li a:hover“ steht für den Mouseover Effekt, also wenn ich mit der Maus über den Link gehe. „li.current-page“ steht für die gerade aufgerufenen Seite. Warum der Code von den anderen Zeilen differiert kann ich nicht sagen, wird aber seinen Grund haben.

Tipp:

Wenn ich meinen Navigationszeilen-Code angepasst habe, kopiere ich mir diesen in eine Textdatei, damit ich bei den anderen Vorlagen den Code nur kopieren und einfügen muss.

Betrachten wir uns noch einmal die Vorlage vor der Anpassung der Navigation.

Hier sehen wir, die Menüpunkte sind mittig zentriert und die Höhe des Navigationsfeld beträgt 45 px. Ich werde die Menüleiste so anpassen, dass der Text linksbündig ausgerichtet ist und die Texthöhe 2 Menüzeilen ermöglicht. Hierzu ändere ich die Schriftgrösse font-size: 1em in font-size: .8em und den oberen und unteren Abstand margin: 9px 0px 6px 0px setze ich auf margin: 1px 0px 1px 0px. Den Platz zwischen dem Text ändere ich von padding: 0px 10px 0px 10px auf padding: 0px 5px 0px 5px. Nun fehlt noch die Feldhöhe welche ich von line-height: 30px auf line-height: 20px reduzieren und die Text-Ausrichtung setze ich von text-align: center auf text-align: left. Nach der Anpassung speichere ich die Datei, füge sie in das Webtheme ein und kopiere die Webthemedatei in das iWebpaket.

Page 24: iWeb Bibel

Nach der Anpassung erstelle ich eine neue Seite mit meiner Vorlage und sehe auf Anhieb die Änderungen:

Dieses Beispiel ist sicherlich überzogen, doch zeigt es auf Anhieb die Möglichkeiten der Anpassung.

5.5. Wichtiges zum Schluss

Die hier angewandte Technik zum erstellen von eigenen iWeb-Themen ist nicht perfekt, sie ist aber auf jeden Fall eine großartige Möglichkeit um mit iWeb noch flexibler zu werden. Das umändern der Vorlage funktioniert mit einfachen Seiten. Bei gestaffelten Seiten wie die Blog-, Podcast- oder Album-Vorlage wird dieses glaube ich nicht funktionieren, da die Seiten unterteilt bzw. gestaffelt sind. Hier habe ich eine Hauptseite mit Unterseiten was letztendlich mehrere Seiten ergeben. Diese Dinge kommen als nächstes, zu mindestens werde ich versuchen ein Lösung zu finden. Weiterer kleiner Nachteil, bei den Vorlagen für Foto- und Film-Seiten werden nach dem Ändern die Vorschaubilder der Dateien in den Platzhaltern nicht mehr angezeigt, der Platzhalter und die Funktionen funktionieren aber. Diese würde ich dann als kleinen Schönheitsfehler bezeichnen.

Für Tipps und Verbesserungen bin ich natürlich dankbar!

Page 25: iWeb Bibel

6. Nachträge und neuste Kenntnisse