Click here to load reader

iWeb Bibel

  • View
    227

  • Download
    5

Embed Size (px)

DESCRIPTION

Anleitung zum Erstellen des eigenen iWeb-Theme.

Text of iWeb Bibel

  • iWeb-Bibel

    Die 3 groen Schritte zum eigenen iWeb-Themevon

    Dietmar Schnwandt

  • 1. Vorwort:

    DER AUTOR DIESER ANLEITUNG BERNIMMT KEINE VERANTWORTUNG FR SCHDEN AN DEN INSTALLIERTEN PROGRAMMEN. DER ANWENDER IST ALLEINE VERANTWORTLICH FR DIE NDERUNGEN UND MODIFIZIERUNGEN DER VORLAGEN AUF SEINEM MAC!

    HINWEIS : nderung bitte immer an duplizierten Themen durchfhren und zur Sicherheit immer vorher eine Sicherung der Dateien durchfhren, um bei Problemen zum Urzustand zurckkehren zu knnen!

    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 ermglicht es dem Anfnger durch viele Vorlagen schnell und einfach eine Webseite zu erstellen. Doch auch fr Fortgeschrittene bietet dieses Programm genug Flexibilitt um seine Vorstellungen zu verwirklichen und sein eigenes Design zu entwickeln. Der Workflow des Programms ist Apple like und ermglicht 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 selbsterklrend, frher oder spter zu Fragen fhrt. Seien es die Funktionen, der Umgang mit dem Programm, allgemeine Fragen zum Webdesign oder zum Internet, jeder stt irgendwann an seine Grenzen und bentigt 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 mchte, kann diese Anpassung jedoch nicht als Vorlage abspeichern. Durch ausprobieren bin ich zufllig auf einen Weg gestossen um mir mein eigenes Theme zu erstellen. Ich werde hier Schritt fr Schritt erklren 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 Schnwandt

  • 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. Nachtrge und neuste Erkenntnisse

  • 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

  • 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!

  • 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 smtliche Daten abgelegt werden. Also, alle Dateien egal ob Bilder, Filme usw. werden in diesem Container abgelegt.

    Benutzer - Library - Application Support - iWeb

    Die Domaindatei spielt fr das eigene Theme eine tragende Rolle, doch hierzu kommen wir spter.

    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.

  • 3.1. Alias erzeugen

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

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

  • 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 fr mein iWeb-Theme verschieben. Im Arbeitsordner angekommen, kann ich den Alias nach belieben umbenennen, dieses ist jedoch keine Pflicht. Wenn ich nun die genderte Themen-Datei in das iWeb-Paket kopieren mchte, brauche ich nur mit Rechtsklick die Themendatei kopieren und ebenso mit Rechtsklick auf meinen Alias einfgen. 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 weie Vorlage whlen, da diese am flexibelsten sind. Also, schwarze Vorlage fr ein dunkles Theme und die weie Vorlage fr ein helles Theme nutzen.

  • 3.3. Theme in iWeb sichtbar machen

    Nun muss ich noch dafr 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 mchte 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, fr Deutschland heit dieser "German.lproj".

  • 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:

    DisplayNameSchwarzPageDisplayNames

    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 lschen 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"!

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

    Beispiel:

    Den Code - version="1.0" - kann man ndern in - version="Eigene" oder sonstige Bezeichnungen, das wird spter 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 mssen wir die Datei speichern und das genderte 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 wrde ich auf jeden Fall durchfhren, um zu sehen, ob ich die Mglichkeit habe eine neue Seite anhand der eigenen Vorlage zu erstellen.

  • 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 fr die untersttzten Landessprachen stehen. Diese kann man jetzt auer 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" lschen oder umbenennen, genau wie mit der Datei "index.xml.gz" praktiziert. Auch hier gilt, iWeb nimmt als erstes die Dateien mit der Endung ".gz"!

  • 4.2. iWeb-Theme kreieren

    Jetzt ist die eigene Kreativitt gefordert. Zur Demonstration picke ich mir die Seite "ber mich (About me)" heraus und werde diese Stck fr Stck verndern und nach meinen Vorlieben abndern. Auch wenn iWeb eine feste Seitengrsse vorgibt, so hat jeder der mit iWeb bereits gearbeitet hat, festgestellt, dass iWeb durch die Inhalte auf einer Seite diese dynamisch in der Hhe verndert. Das heisst fr mich als Vorlagengestalter, wenn ich mit Grafiken im Kopf-, Seiten- und Fubereich arbeiten mchte, dann mssen sich diese dementsprechend anpassen knnen, also dynamisch mitarbeiten. Keine Angst, dieses hrt sich schlimmer an als es ist.

    Tipp:

    Um das Arbeiten zu erleichtern und um das sptere Einpflegen der genderten Seiten in die Webtheme-Datei so unkompliziert wie mglich 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 lschen, da die Seiten noch in meiner Original-Domaindatei vorhanden sind. Fr das verffentlichen der Seite whle ich die Option Lokaler Ordner,

    da ich nachher auf die Daten zugreifen will und die erstellten Seiten im Vorfeld betrachten mchte. Zum erstellen der Vorlagenseite whle ich nun, wie bereits angekndigt, die Seite "ber mich". Ich lasse also iWeb die Seite erstellen, die ich dann Stck fr Stck verndern mchte.

  • 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 Auflsungen fast alle jenseits von 1024 px. Das heisst fr mich als Gestalter, die Breite meiner Seite kann ruhig breiter ausfallen. In meinem Beispiel entscheide ich mich fr eine Breite von 900 px, so gewinne ich einiges an Platz fr die Gestaltung meiner Homepage. Der Abstand oben und unten steht auf 0 px, was mir persnlich nicht gefllt, und whle hier einen Abstand von 20 px.

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

    HINWEIS:

    Diese Einstellungen sind natrlich nur auf das Beispiel bezogen und knnen von jedem nach seinen Wnschen gendert werden.

  • 4.4. Seiten-Grafiken

    Nun zu den Grafiken des Kopf-, Seiten- und Fubereichs. Wenn ich mchte, 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 Hhe 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 Hhe mit 1 px und einer Breite von 900 px (Seitenbreite).

    Zum Schluss noch die Fuzeilen-Grafik, diese sollte ebenfalls mindestens die Hhe der Fuzeile haben und natrlich 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 groe Grafik mit der gewnschten 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 grere Hhe als die Fu- bzw. Kopfzeile haben. Hierzu kommen wir jedoch spter noch ausfhrlicher.

  • 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 Verfgung steht und mit dem ich am besten mit klar komme. Der einfachste Weg ist eine Bilddatei zu erstellen, die die Gre der gewnschten Seite hat. Jetzt kann ich in Ruhe mein Layout der Seite mit dem Grafikprogramm kreieren und hinterher die Grafiken fr den Kopf-, Seiten- und Fubereich in den gewnschten Gren ausschneiden und als eigene Datei abspeichern. Ebenso darf ich natrlich die 1 x 1 px Grafik fr 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 Hhe schrauben. Die meisten Grafikprogramme bieten hier viele Mglichkeiten der Komprimierung und Bildformate, welche ich frs Internet nutzen kann.

    GIF " - Fr Grafiken mit wenig Farben

    JPG " - Fr Grafiken mit einer hohen Anzahl verschiedener Farben

    PNG " - Fr Grafiken mit Transparenz

    4.5. Seiten-Grafiken richtig nutzen

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

    Kopfbereich

    Seitenbereich

    Fubereich

    Hintergrund

    (1 x 1 Pixel) Grafik

  • Wenn ich nun den Browserhintergrund und den Seitenhintergrund nach der vorher beschriebenen Weise einfge sieht unsere Seite so aus:

    Nun kommen die Kopf- und Fugrafik 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 Fubereich 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 Fubereich nach unten verlngert 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, mssen diese nun auch in den Hintergrund gebracht werden.

  • Mit einem Rechtsklick auf die Grafiken kann ich die Option Ganz nach hinten whlen, 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 groe Wirkung erzielen. Was nun noch fehlt, ist die Ausrichtung der Bild- und Textblcke der Seite. Hier positioniere ich die Dinge neu und verndere 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 darber sein, dass die Navigationsleiste schnell mein Bild zerstren

  • 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 Gre, Farbe und das Erscheinungsbild des Navigationsmens kann ich aber noch nach meinen Wnschen anpassen. Dazu komme ich spter!

    Im Seitenlayout knnen auch Dinge wie HTML-Widgets eingebunden werden, die dann spter AUCH in meiner Vorlage vorhanden sind. Es gibt Mglichkeiten ohne Ende, doch sollte man hier bercksichtigen, dass die HTML-Codes allgemein gehalten werden und nicht auf den eigenen Server zugreifen, wenn ich die Vorlage an andere weitergeben mchte. Doch das bleibt jedem selbst berlassen.

  • 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 zufllig durch ausprobieren einen Weg gefunden um eigene iWeb-Vorlagen zu erstellen. Der Trick ist so einfach wie genial. iWeb bentigt zum erstellen der Seiten die XML-Dateien als Vorlage. Wenn iWeb die erstellte Seite verffentlicht dann erstellt das Programm genau diese XML-Dateien fr jede einzelne Seite und speichert diese in der Domaindatei. Das heisst im Klartext, iWeb bentigt die Vorlagendateien nur zum ersten Erstellen der Seite, danach greift iWeb auf die XML-Dateien in der Domaindatei zurck. 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 fr unsere Webtheme-Datei bentigen. Fr jede erstellte Webseite in iWeb kommt ein Unterordner site-..... und fr 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 genderte 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.

  • 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 natrlich immer den Namen, den ich in der Vorlage ersetzen mchte. Nach dem Umbenennen entpacke ich die Datei durch einen Doppelklick und lsche die .gz Datei, da diese nicht bentigt wird. Wenn ich keine weiteren nderung an der Datei vornehmen mchte, kann ich diese kopieren und in meinem Webtheme-Paket integrieren. Jetzt fehlen aber noch die Bilddateien, die fr die neu erstellte Vorlage bentigt werden. Diese finde ich ebenfalls in der Domaindatei.

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

  • Wenn ich nun jedoch die erstellte Datei nachtrglich ndern mchte, 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 standardmig sehr klein hlt, ziehe ich das Fenster erst einmal auf eine akzeptable Gre. Das Einzige was ich in der Datei von Hand ndern muss, sind die Einstellungen der Navigationszeile. Da ich hier viele Mglichkeiten der Anpassung habe, widme ich diesem Thema eine eigene Rubrik!

    5.4. Navigationszeile anpassen

    Der magebliche Codeblock sieht in unserem Fall so aus:

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

    Wir zerpflcken die Codezeile Stck fr Stck und nehmen uns die wichtigsten Bestandteile zur Brust.

    1. Die Font-/Schriftart. Hier kann ich in die gewnschte Schriftart ndern, sollte aber bercksichtigen, dass ich am besten websicher Schriftarten whle.

    2. Die Fontgre. iWeb gibt diese mit dem Faktor 1em an. Dies ist der Zoomfaktor 1=100%. Mchte ich die Schrift verkleinern setze ich den Wert z. B. auf .8em. Den richtigen Wert wrde ich anfnglich bei der ersten Vorlage ermitteln und spter 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 gngigen 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 Grenanpassung. Hier kann ich die Hhe des Navigationsleistenfeldes einstellen. Natrlich kann das Feld nur im Zusammenspiel mit der Texthhe verkleinert werden. Hat der Text eine Hhe von 20 px, kann ich die Hhe 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), rechtsbndig (right) oder linksbndig (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 schn: Probieren geht ber studieren!

    8. Die Codezeilen fr die einzelnen Linkzustnde beginnen jeweils mit li a. Ohne Zusatz (grne Zeile) steht fr den Standard Linktext. li a:visited steht fr die bereits besuchten

  • Seiten, li a:hover steht fr den Mouseover Effekt, also wenn ich mit der Maus ber den Link gehe. li.current-page steht fr 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 einfgen muss.

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

    Hier sehen wir, die Menpunkte sind mittig zentriert und die Hhe des Navigationsfeld betrgt 45 px. Ich werde die Menleiste so anpassen, dass der Text linksbndig ausgerichtet ist und die Texthhe 2 Menzeilen ermglicht. Hierzu ndere ich die Schriftgrsse 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 Feldhhe 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, fge sie in das Webtheme ein und kopiere die Webthemedatei in das iWebpaket.

  • 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 Mglichkeiten 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 groartige Mglichkeit um mit iWeb noch flexibler zu werden. Das umndern 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 nchstes, zu mindestens werde ich versuchen ein Lsung zu finden. Weiterer kleiner Nachteil, bei den Vorlagen fr 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 wrde ich dann als kleinen Schnheitsfehler bezeichnen.

    Fr Tipps und Verbesserungen bin ich natrlich dankbar!

  • 6. Nachtrge und neuste Kenntnisse