6.1.9: "Globale" Aktualisierungen und Site-Verwaltung

Für größere Webprojekte werden Sie viele Bereiche Ihrer Seiten immer wieder benötigen. Schön wäre es, wenn man da bei "globalen", d.h. website-weiten Änderungen nicht alles immer wieder austauschen müssen. Die html-Struktur, aber v.a. GoLive bieten dazu Hilfen. Etliches davon kennen wir ja schon:

Website-weite Aktualisierung von Bildern

Auch wenn Sie ein Bild (z.B. ein Logo) noch so oft in Ihrer Website verwenden, braucht (und soll) es nur einmal vorhanden sein. Ist das Bild zu ändern (z.B. gegen ein neues Logo auszutauschen), ändern sich automatisch die Bilder auf allen Seiten, in denen dieses Bild verwendet (d.h. eingebettet wurde), sofern nur der Bildname gleichbleibt.

Die Sache hat allerdings einen wesentlichen Schönheitsfehler: Ändern Sie die Größe Ihrer Bilddatei, so werden die Größeneinstellungen für Ihr Bild nicht automatisch angepasst. Sie müssen also alle Seiten, in denen Ihr Bild vorkommt, öffnen und mit dem Inspektor von Hand die Größen ändern. Dies machen Sie am besten so: Stellen Sie die Größeneinheiten von Pixel auf Bild und dann wieder zurück auf Pixel, dann werden automatisch die richtigen Größen in Pixeln eingetragen.

Tipp: haben Sie ein Bild sehr häufig verwendet, können Sie auch den Quellcode durch eine globale Suchen/Ersetzen-Funktion austauschen lassen (siehe unten). Passen Sie aber auf, dass Sie Ihre Bildpfade dabei nicht versehentlich ändern.

Die automatische Aktualisierungsmöglichkeit von Bildern via Smart-Photoshop bzw. Smart-Illustrator-Objekten haben wir ja bereits früher (Modul 6.1.6) kennengelernt.

Austausch von definierten Wörtern, Sätzen, ganzen Abschnitten in Layout oder Quellcode durch globale Suchen/Ersetzen-Option

Diese Option finden Sie im Menu Bearbeiten unter Suchen. Im Suchfenster (Abb. unten) können Sie viele Optionen einstellen, die wichtigsten sind rot markiert. Besonders interessant ist die Option "Suche in Dateien" mit der Suche im Quellcode-Modus (natürlich ist auch der Layout-Modus möglich). Wenn Sie die ganze Website durchforsten wollen, klicken Sie hier auf "Website hinzu". Wenn Sie ohne Dialog alles ersetzen wollen, gibt's hier auch eine Option. Ansonsten klicken Sie auf "Suchen" und werden dann bei jedemTreffer gefragt, ob Sie den Ersatz vornehmen wollen.

Im abgebildeten Beispiel soll ein häufig in der Website verwendeter absoluter Link ("Referenz, externer URL) nachträglich mit einem Target versehen werden. Sie können aber auch die Größe einer Abbildung oder den Namen einer geänderten, nun aber anderslautenden Abbildung ändern lassen (oder Sie haben eine Abbildung vom jpg ins gif-Format geändert und müssen die Endung austauschen, usw).

Automatische Link- und Pfadanpassung bei Neubenennung und Umlegen von Dateien und Anlage neuer Ordner

Diese mächtige Funktion haben wir bereits eingangs vom Prinzip her kennengelernt. Sie können innerhalb des Projektfensters beliebig viele neue Ordner und Unterordner anlegen und Dateien hin- und herverschieben und umordnen. Dabei werden alle vorhandenen relativen Links und relativen Pfade (z.B. von eingebetteten Bildern) angepasst. Sie können auch Dateien umbenennen und alle relativen LInks und Pfade werden wiederum entsprechend aktualisiert.
Bitte nie vergessen: dies funktioniert nur innerhalb des Projektfensters! Wenn Sie im html-Rootordner umlegen und umbenennen, wird hinterher nur Kuddelmuddel existieren, da die Links und Pfade dann natürlich nicht automatisch angepasst werden.

Absolute Links website-weit ändern

Nehmen wir einmal an, Sie haben in Ihrer Website von vielen Seiten aus auf ein anderes Webangebot verlinkt. Nun zieht dieses Angebot um und erhält eine neue Webadresse. Sie können in GoLive alle Links auf dieses Angebot mit einem Schlag ändern.

Aktivieren Sie dazu im Projektfenster den Reiter Extern (siehe Abb. unten, roter Kreis). Alle verwendeten absoluten Links ("Referenzen") werden angezeigt. Aktualisieren Sie diese im Menu Website indem Sie "verwendete Referenzen abrufen" sowie "nicht verwendete Referenzen entfernen".

Im unten stehender Abbildung finden Sie ein Beispiel aus der Kurswebsite. Jeder externe Link hat einen Namen bekommen, den Sie übrigens auch ändern können, er dient v.a. zu Ihrer Übersicht. Durch Markierung eines URL und Auswahl von "Referenz ändern" im Menu Website (oder viel einfacher durch Doppelklick auf einen URL) können Sie den absoluten Link ändern, welcher dann in der gesamten Website aktualisiert wird.

Snippet-Verwaltung

Snippets haben wir bereits bei den Paletten kennengelernt. Sie erinnern sich, durch Markierung von Teilen einer html-Seite (im Layout-Modus) und ziehen in die Objektepalette Benutzerdefiniert wurde dort ein Snippet abgelegt, welches Sie dann als Objekt immer wieder in andere html-Seiten ziehen und dort verwenden konnten (also eine Art Zwischenablage, welche als Objekt abgespeichert wurde und immer wieder eingesetzt werden kann) (näheres zur Snippet-Palette war in Modul 6.1.4 zu finden, ggf. bitte nachlesen). In der Online-Hilfe von GoLive werden die Snippets auch als "benutzerdefinierte Auszüge" bezeichnet.

Snippets auf der entsprechenden Objektpalette Benutzerdefiniert bleiben dauerhaft im GoLive-Programm, bis Sie sie ggf. wieder von Hand löschen. Hierdurch gibt es zwei mögliche Probleme:

• Wenn Sie viel mit Snippets arbeiten, wird diese GoLive-weite Snippet-Objektpalette bald sehr voll und unübersichtlich werden;
• wenn Ihr gesamtes GoLive-Projekt an einem anderen Rechner weiterbearbeitet wird (Sie nehmen es z.B. auf einer Zip-Diskette mit nach Hause, wo Sie ebenfalls einen Rechner mit GoLive haben, oder schicken es einem Kollegen zur weiteren Bearbeitung), sind dort die Objektpaletten-Snippets nicht verfügbar.

Es ist also sinnvoll, snippets einer Website zuzuordnen. Das ist ganz einfach:

• Aktivieren Sie im Projektfenster den Reiter Benutzerdefiniert.
• Markieren Sie einen für ein Snippet vorgesehenen Abschnitt Ihrer html-Seite und ziehen ihn direkt in das Projektfenster Benutzerdefiniert
• Alternativ können Sie auch Snippets, die Sie in der Objektpalette Benutzerdefiniert angelegt haben, von dort in das Projektfenster Benutzerdefiniert ziehen.

Freundlicherweise werden ja auch Links und Bildpfade, die sich in Snippets befinden, bei Einfügung aktualisiert (falls sich die Seiten, in denen Snippets eingefügt werden, in unterschiedlichen Hierarchien befinden).

Tipp: Snippets sind von der Objektpalette in der Regel einfacher zu verwenden als vom Projektfenster Benutzerdefiniert. In der Objektpalette finden Sie einen Reiter Website-Extras, bei dem Sie im Pulldown-Menu benutzerdefiniert auswählen können. Damit erscheinen alle Ihre im Website-Fenster Extras abgelegten Snippets auch in dieser Objektpalette. Snippets, die ich für verschiedenste Websites verwende (bestimmte Vorlagen für Tabellen, horizontale Linien usw.) belasse ich dauerhaft in der Snippet-Objektpalette (der Reiter mit dem Bleistiftsymbol).

Wichtiger Hinweis: Nur im Projektfenster abgelegte Snippets können Sie bearbeiten, d.h. ändern (durch Doppelklick). Änderungen wirken sich jedoch nicht rückwirkend auf alle bereits in den Seiten wiedereingefügten Kopien des Snippets aus, sondern erst ab der nächsten Einfügung. "Rückwirkende" Änderungen können wir jedoch durch die Verwendung sog. Komponenten erreichen (nächster Abschnitt).

GoLive-Komponenten: Vereinfachung für website-weit häufig verwendete und immer wieder zu aktualisierende html-Abschnitte.

Nehmen Sie an, Sie fügen auf verschiedenen Seiten Ihrer Website Abschnitte ein, die identisch sein sollen. Hierfür können Sie sich das Leben mit Snippets, wie oben beschrieben erleichtern. Nehmen wir aber auch an, dass Sie ziemlich sicher wissen, dass Sie diese Abschnitte in einiger Zeit bestimmt wieder aktualisieren müssen. Das könnten z.B. Inhaltsverzeichnisse, Copyright-Erläuterungen, Tabellen oder auch Titelbanner mit Logos oder Werbebanner sein. Gleichzeitige und identische Änderungsmöglichkeiten all dieser Bereiche wären doch wunderbar.

Dafür gibt es in GoLive sog. Komponenten. Das funktioniert so:

1. Klicken Sie im Projektfenster auf den weißen Doppelpfeil am Fensterrand ganz rechts unten (falls Sie nachgucken müssen, es war die rote 3 der im Kap. Projektfenster (Modul 6.1.2) gezeigten Abbildung). Dadurch wird das Projektfenster zweigeteilt und Sie das Projektfenster Extras (sowie den Website-Papierkorb und noch anderes).
   Durch Klick auf das gleiche Doppelpfeilsymbol wird die Zweiteilung des Projektfensters übrigens wieder aufgehoben.
   
   Das entsprechene Projektfenster Extras unserer Kurswebsite zum Zeitpunkt 8.12.01 finden Sie nachstehend als Beispiel. Dort sind 6 html-Dateien als Komponenten zu sehen.
   
   
   
   
   
2. Erstellen Sie eine extra html-Seite, die Ihre an verschiedenen Stellen einzufügende Komponente darstellen soll. Speichern Sie diese in den Ordner Komponenten (der in Ihrem Website-Ordner im Ordner Website Data liegt, sehen Sie bei Bedarf im Kapitel Projekteröffnung (Modul 6.1.1) nach). Sie können diese Datei als normale html-Datei oder (besser) im Komponentenformat abspeichern (dazu gibt es im Speichern als Fenster eine entsprechende Option).
   
   Tipp: wenn Sie bereits eine html-Seite erstellt haben, aus der Sie eine wiederzuverwendende Komponente ausgliedern wollen, duplizieren Sie diese Seite, geben Ihr einen anderen Namen (z.B. kompobanner.html) und löschen alle für die Komponente nichtbenötigten Teile. Speichern Sie nochmals und ziehen die Datei vom Projektfenster Dateien ins Projektfenster Extras. Löschen Sie dann aus der Original-Datei den Anteil, den Sie als Komponente ausgelagert haben und fügen Sie die Komponente, wie unter 3 beschrieben, wieder ein. Hier kann es allerdings ein kleines Problem (s. unten: "Vorsicht") geben.
   
   
   
3. Öffnen Sie im Projektfenster Dateien eine html-Datei, in die eine Komponente eingefügt werden soll. Gehen Sie in die Objektpalette und wählen den Reiter Smart (der grüne Reiter, i.d.R. zweiter von links). Suchen Sie dort das Objekt Komponente (i.d.R. drittes von links) und ziehen es in Ihre html-Seite, an die Stelle, an der die Komponente eingefügt werden soll. Verlinken Sie dann im Inspektor mit point&shoot auf die entsprechende Komponenten-html-Datei im Projektfenster Extras. Dadurch wird diese Datei eingefügt. Evtl. unnötiger Source-Code (z.B. der Header einer als html-Datei abgespeicherten Komponente wird von GoLive automatisch rausgeworfen).
   
   Alternativ (und schneller) können Sie auch den Objektpalettenreiter Website-Extras auswählen. Wählen Sie dort im Pulldownmenu Komponenten und Sie finden alle von Ihnen angelegten Website-Komponenten als Objekte, die Sie einfach in Ihre geöffneten html-Dateien ziehen können.
   
   
4. Fügen Sie die Komponenten auf diese Weise beliebig oft in anderen html-Seiten Ihrer Website ein. Liegen sie in anderen Ordnern oder Unterordnern, werden relative Pfade und Links automatisch angepasst.
   
   Vorsicht: Ein kleiner benutzergenerierter Bug kann auftreten, wenn man die Komponente durch Kopie einer vorhandenen html-Seite erstellt hat, auf der sich ein Link auf einen Anker innerhalb dieser Seite befindet. Dieser seiteninterne Link wird dann bei Einfügung der Komponenten an verschiedenen Stellen in der Website nicht angepasst. Dies sollte allerdings ein eher seltener Fall sein (bei mir ist er allerdings vorgekommen) und die Debugging-Option von GoLive (siehe nächstes Kapitel) spürt den evtl. Fehler rasch auf.
   
   
   
5. Wenn Sie Ihre Komponente später ändern, werden alle Stellen, an denen die Komponente eingefügt wurde, ebenfalls aktualisiert. Klasse.
   
   

Wichtig: Sie müssen Ihre Komponenten nicht auf den Webserver mit hochladen. Die Komponente wurde komplett in die html-Seite kopiert (und nicht etwa nur verknüpft bzw. als ServerSideInclude definiert - dazu kommen wir in einem späteren Modul). Allerdings wurde ein spezieller GoLive-Tag mit eingefügt, der vom Webbrowser ignoriert wird, der aber bei einer späteren Wiederbearbeitung der Seite in GoLive die Verbindung zur Komponente wieder aufnimmt und synchronisiert, wenn die Komponente inzwischen aktualisiert wurde).

Vorlagen

GoLIve kennt auch Vorlagen. Sie können eine html-Seite als Vorlage (mit entsprechender Auswahl im Speichern unter... Dialogfenster) in den Ordner Vorlagen Ihres Ordners Vorlagen im Ordner Website-Data speichern. Diese Vorlagen erscheinen dann wie die Komponenten ebenfalls im Projektfenster Extras. Wenn Sie eine derartige Vorlage durch Doppelklick öffnen, erscheint eine neue html-Seite mit dem Titel "ohne Titel", die Sie ändern können und unter neuem Namen speichern können. Dies ist analog zu Vorlagen in Textverarbeitungsprogrammen oder Layoutprogrammen. Beachten Sie dabei folgendes:

• Vorlagen unterscheiden sich von Snippets (benutzerdefinierten Auszügen), dass aus Vorlagen komplett neue html-Seiten generiert werden. Snippets stellen nur Ergänzungen von html-Seiten dar.
  
  
• Vorlagen unterscheiden sich von Komponenten dadurch, dass Änderungen in der Vorlage keine Änderungen in den mit Vorlagen erstellten Seiten verursachen. Sie sind diesbezüglich Snippets vergleichbar. Änderungen in Komponenten aktualisieren jeweils die in anderen html Seiten entsprechend eingefügten Bereiche auch nachträglich.
  
  
• Komponenten und Snippets sind sich insofern ähnlich, als dadurch nur Teile in vorhandene html-Seiten eingefügt werden. Sie unterscheiden sich dadurch, dass eine Änderung der Komponentenvorlage Aktualisierungen in den mit der jeweiligen Komponente versehenen html-Seiten bewirkt, während Änderungen in Snippet-Vorlagen keine entsprechenden Aktualisierungen verursachen.

Merke: in Vorlagen können auch Komponenten und Snippets eingebaut werden. In Komponenten können auch Snippets eingebaut werden, Snippets können jedoch keine Komponenten beinhalten. Alles klar?

html-Import

Aktualisierung, Site-Verwaltung

Debugging