6.1.4: Arbeiten mit Objektpaletten, Inspektoren und Farben

Bearbeiten Sie als erstes Ihre Index-Seite, danach können Sie wie oben beschrieben, neue Seiten anlegen und bearbeiten bzw. importierte Seiten weiter editieren. Vorhandene Seiten öffnen Sie mit Doppelklick im Projektfenster, andere legen Sie wie oben beschrieben unter Ablage/Neu an.

Die für Ihre Arbeit wichtigsten Paletten sind (neben der oben beschriebenen Werkzeugleiste) folgende:

• Objektpalette
• Inspektor
• Farbpalette

alle anderen benötigen Sie erst einmal nicht unbedingt (sie werden teilweise in Kursmodul 6.2 behandelt).

1. Die Objekte-Palette

Die Objektepalette besteht aus einzelnen Reitern, der wichtigste ist gleich der erste, hier sind die body-elemente (dunkelblaue 1) angeben ("allgemein"). Diese können Sie einfach in das Layout-Fenster des gerade bearbeiteten html-Dokumentes ziehen. Wir behandeln erst mal nur die Grundelemente (und halten dabei die Reihenfolge der Elemente in der Palette auch nicht ein).

Folgende Erläuterungen beziehen sich auf in obiger Abb. angegebene rote Zahlen innerhalb der Body-Elemente (in GoLivewird dieser Objektreiter als "Allgemein" bezeichnet

1. Bildplatzhalter: mit dem Inspektor (s.u.) verlinken Sie dann auf das Bild. Sie können aber auch wie oben beschrieben Bilder per Drag and Drop importieren und einbauen (weitere Möglichkeiten unten)
2. Horizontale Linie (hr-Tag), nähere Attribut-. und Werteangaben können im Inspektor gemacht werden (s.u.)
3. html-Kommentar. Diesen geben Sie dann im Inspektor ein (s.u.); er wird nur im code dargestellt und erscheint nicht auf Ihrer Seite (<!-- -->-Tag)
4. Anker. Nähere Werte-Angaben dann im Inspektor (s.u.)
5. Break. Verwende ich nie. Breaks werden auch durch shift/return (was ist das beim PC?) eingefügt. Geht viel schneller.
6. undefinierter Tag. Hier könnten Sie neue, in GoLive nicht vorhandene Tags (z.B. iframe-Tag) definieren. Tipp: derartige Tags dann als Snippet verwenden (s.u.)
7. Tabelle. Alle näheren Einstellungen dann im Inspektor (s.u.)
8. Layout-Gitter. Dies ist eine Spezialität von GoLive, die Ihnen auch ohne Stilformatvorlagen (CSS, siehe nächstes Kapitel) eine möglichst exakte Positionierung Ihrer Elemente auf einer Seite ermöglichen soll. Sie ziehen das Element auf Ihre Seite, ziehen das Gitter auf die gewünschte Größe (oder stellen dies im Inspektor, s.u.) ein und können nun Elemente (Bild, Ruler, ggf. auch Tabellen) dort draufziehen.Um Text positioniert einzugeben, müssen Sie zunächst einen Layout-Textrahmen einfügen (9) und auf die gewünschte Größe aufziehen. Dieses Layout-Gitter wird dann im html-code automatisch in eine extrem komplizierte, mehrfach verschachtelte Tabelle ohne Ränder umgerechnet.
9. Layout-Textrahmen, nur in Verwendung mit Layout-Gitter (siehe 8).

---

Weitere Reiter in der Objekt-Palette (Auswahl), vgl. Abbildung oben (dunkelblaue Zahlen)

2. Head-Objekte: wichtige Objekte sind hier insbesondere das Basis-url, hier können Sie ein baselink-Target definieren, das Schlüsselwort-Objekt, sowie das Meta-Objekt, welches Sie für weitere Meta-Tags verwenden können. Im Aktualisierungstag können Sie einstellen, nach wieviel Sekunden zu einer anderen Seite umgeleitet werden soll. Hiermit könnten Sie z.B. selbstablaufende Diaschauen gestalten oder umleiten, wenn Sie mit Ihrer Homepage umgezogen sind. Näheres dazu unter Modul Animationen.

Die Objekte der Head-Palette müssen Sie in das Kopffeld Ihrer Seite im Layout-Modus ziehen (vgl. Abbildung links). Bei geschlossenem Kopffeld klicken Sie auf das kleine Dreieck unter dem Reiter Layout (roter Kreis). Daneben übrigens das Seitenicon, welchen Sie markieren können und dann im Inspektor (s.u.) Eingaben vornehmen können. Daneben noch der Titel der Seite (der in der Browserleiste angezeigt wird, also der Inhalt des <title>-Tags, den Sie auch direkt hier ändern können. In nebenstehender Abbildung sehen Sie einen geöffneten Kopfbereich. GoLive hat hier automatisch einen Metatag für die Zeichencodierung eingesetzt, sowie auch den <title>-Tag. Sie könnten z.B. auch den Title-Tag aktivieren und im Inspektor den Namen ändern. In diesen Kopfbereich ziehen Sie also Ihre weiteren, oben z.T. beschriebenen Head-Elemente.

3. Frames-Objekte: In Reiter Frames finden Sich die Frames-Objekte (vordefinierte, teilweise verschachtelte Framesets). Sie müssen eine leere html-Seite generieren, dann vom allgemeinen Layout-Modus zum Layout-Modus Frames wechseln (obige Abb. Blauer Pfeil). Dorthinein ziehen Sie Ihre Framevorlagen. Näheres finden Sie auf der nächten Seite im Abschnitt Frames (Modul 6.1.5).

4. Objektreiter Benutzerdefiniert: Dies ist eine feine Sache. Alle von Ihnen eingerichteten bzw. erstellten Bilder, Textteile, Animationen, gefüllte oder ungefüllte Tabellen, ganze Layout Gitter oder größere Abschnitte aus html-Seiten können Sie in Ihrer html-Seite markieren und dort einfach hineinziehen. Es entsteht ein "Snippet", welchem Sie durch Doppelklick auf das Snippet einen Namen geben können. Sie können dann auf beliebigen anderen Seiten in Ihrer Gesamtsite oder auch auf weiteren Sites, die sie später erstellen, diese Snippets durch Drag and Drop einfach wieder einfügen.

Hinweis: Wenn Sie Bilder und Links mit relativen Pfaden als Snippets definieren, funktioniert die automatische Anpassung der entsprechenden Pfade innerhalb Ihrer Website ausgezeichnet. Wenn Sie jedoch ein neues Projekt anlegen und entsprechende Snippets aus einem früheren Projekt verwenden, müssen Sie die Pfade wieder anpassen.

5. Die Inspektor-Palette

Die Inspektor-Palette haben Sie indirekt schon kennengelernt. Alle näheren Angaben (d..h. Angaben der Attribute und Parameter/Werte) der aus der Objektpalette verwendeten Objekte machen Sie mit dem Inspektor. Dieser ist kontextsensitiv und ändert sich jeweils in entsprechender Weise, je nachdem was Sie im Layoutmodus markieren. Markierter Text triggert den Linkinspektor, Markiertes Bild oder Bildplatzhalter ruft den Bildinspektor auf, Tabellen den Tabelleninspektor, Layout-Raster den Layoutinspektor, Anker den Ankerinspektor Markierung des Seitenzeichens (s.o.) den Seiteninspektor usw. Feine Sache.

Eine besondere Option ist der Point and Shoot-Modus, den Sie im Linkinspektor und Bildinspektor verwenden können (vgl. Abbildung unten).

Insgesamt haben Sie zum Verlinken folgende Möglichkeiten

Wenn Sie einen Text markieren (in Abb. unten z.B. "schon kennengelernt" können Sie im Linkinspektor auf das Kettensymbol klicken, darauf wird ein Link eingerichtet. Im Pfadfenster steht zuerst nur (empty reference). Ist es ein externer Link (beginnend mit http://) tragen Sie ihn dort ein.

Bei Links innerhalb Ihres Website-Projekts haben Sie folgende Möglichkeiten:

Sie tragen den Link von Hand ein


Durch Klick auf das Ordnersymbol (roter Kreis) wählen Sie im Dialogfeld die verlinkende Datei aus
(Sie könnten danach auf das Feld :// klicken und aus dem kreierten relativen Link einen sog. absoluten internen Link machen, der sich auf Ihren root-Ordner bezieht. Ich empfehle dies nicht, da manche Webserver damit nicht klar kommen).

Empfehlenswertes Vorgehen: Point-and-shoot auf Datei im Projektordner. Dazu muss Ihr Projektfenster wenigstens zum Teil auf dem Bildschirm sichtbar sein. Klicken Sie auf das Kringelsymbol im Inspektor und ziehen mit der Maus auf die auszuwählende Datei (blauer Strich in Abb. oben). Dadurch wird wiederum ein relativer Link hergestellt:

Tipp: Sollten Sie sich in der falschen Hierarchie befinden, verweilen Sie während des "shootings" auf einem geschlossenen Ordner. Er wird sich öffnen und Sie können in der Hierarchie nach unten wühlen, bis Sie an die zu verlinkende Datei gelangen. Müssen Sie in der Hierarchie höher, zielen Sie zuerst auf das entsprechende Höherblättern-Dreieck (grüner Kreis), und wählen dann Ihre Datei aus.

Tipp: Sie können auch Anker direkt ansteuern. In einer Seite vorhandene Anker ersehen Sie im Projektfenster am kleinen grauen Dreieck vor der html-Seite (Beispiel gelber Kreis Abb. unten). Wenn Sie auf der entsprechenden Datei beim shooten kurz verweilen bzw. Sie gleich das Dreieckchen zuvor ansteuern, können Sie sofort auf den Anker zielen, es wird dann an den Link der entsprechende Ankername, getrennt vom Zeichen # angefügt.

Wenn Sie mit einem Link auf einen Anker innerhalb der gleichen Seite zielen, können Sie genauso vorgehen oder aber innerhalb der Seite durch Bewegung des Cursors am oberen bzw. unteren Bildrand während des "point&shoot" innerhalb der Seite zum Anker scrollen. Im Linkinspektor wird als Link dann nur #ankername eingetragen.

Falls Sie in einen speziellen Frame oder Fenster zielen, geben Sie im Inspektor unter Ziel den Namen des Targets an. Standard-Targets (_top, _blank etc.) können Sie aus dem Auswahlmenu direkt entnehmen.



Ebenfalls empfehlenswert: Point-and-Shoot auf geöffnete html-Datei. Sie können vom Inspektor aus mit point-and-shoot auch auf das Seitensymbol (im Kopfteil des Layout-Fensters, links neben dem Seitentitel, siehe roter Kreis in nebenstehender Abbildung) einer geöffneten html-Datei zielen und dadurch den Link einrichten.

Tipp : Wenn Sie neben der Seite, die den Link enthalten soll, auch die zu verlinkende Seite geöffnet haben, können Sie mit "point&shoot" gleich auf das kleine Seitensymbol am Top der zu verlinkenden Seite (oberhalb des Kopfbereichs) zielen. Hat die Seite Anker, können Sie auch gleich innerhalb der Seite das Ankersymbol anzielen.

Powertipp: Wenn Sie auf einen Anker verlinken wollen, dieser aber noch nicht eingerichtet ist, können Sie dennoch mit Point&Shoot eine beliebige Stelle auf einer geöffneten html-Seite ansteuern. Dort wird dann ein neuer Anker gesetzt, der gleich in den Link eingetragen wird. Sie können den Ankernamen dann mit dem Inspektor nachträglich ändern, dabei wird der gerade gebildete Link gleich wieder richtig aktualisiert.



Noch schneller: Drag and Drop von Seite zu Seite. Wenn wie oben beide html-Dateien geöffnet sind, nehmen Sie das Seitensymbol (roter Kreis in obiger Abbildung) und ziehen es auf markierten Text in der anderen html-Seite. Damit wird dieser Text zum Link, welcher auf die andere Seite zielt.

Der Einbau von Bildern in Ihre Seite funktioniert prinzipiell auf die gleiche Weise. Sie fügen ein leeres Bildobjekt aus der Objekte/Allgemein-Palette ein, markieren es, und setzen im Bildinspektor den Pfad wie oben für Links beschrieben. Sie können wiederum Point&Shoot verwenden. Im Bildinspektor gibt es übrigens auch den Unterreiter Link, bei dem Sie das eingebaute Link gleich als Linkauslöser verwenden können und z.B. wiederum mit Point&Shoot eine zu verlinkende Seite auswählen können.

Weitere, einfachere Einbaumöglichkeiten von Bildern haben Sie z.T. schon kennengelernt; wir fassen sie im Tutorial-Abschnitt Bilder (Modul 6,1,6) nochmals zusammen und ergänzen sie..

6. Verwenden von Farben - Die Farbpalette

Die Verwendung von Farben ist grundsätzlich in GoLive sehr flexibel gestaltet, sie ist aber etwas gewöhnungsbedürftig.

Auswahl einer Farbe: In der Palette Farben (die per Voreinstellung in einem Palettenfenster mit den Objekten erscheint, die Sie aber auch extra herausziehen können), können Sie eine Farbe auswählen. Sie finden eine Iconliste für verschiedene Farbpaletten bzw. Farbmodelle, die Sie auch mit Hilfe eines entsprechenden Pulldownmenus (kleiner Pfeil rechts) herausnehmen können. Verwenden Sie nach Möglichkeit nur die Palette "websichere Farben". Das sind zwar nur 216 verschiedene, aber die werden wenigstens auf allen Plattformen und allen Browsern annähernd identisch angezeigt.

Gleichzeitig sehen Sie den html-Code für die jeweiligen Farben (damit können Sie weiter üben, das RGB-Hexadezimal-Farbsystem zu verstehen, vgl. _{^{Kursmodul 1.3).}}

Durch Klick auf eine Farbe oder Auswahl aus der Palette mit der Pipette wird im großen einfarbigen Feld (Auswahlfeld) die ausgewählte Farbe angezeigt (siehe Abbildung).

Sie können nun mit der Maus die Farbe vom großen Feld einfach wegziehen und auf Folgendes legen:

• auf markierten Text
• auf das Farbfeld in einer beliebigen Inspektorart (z.B. für Tabellenfarben, Tabellenzeilenfarben, Tabellenzellenfarben, Farbfelder im Seiteninspektor, Farbfelder im Frameinspektor usw.
• auf das Textfarbfeld in der Icon-Menuleiste. Klick auf das Textfarbfeld färbt dann zuvor markierten Text mit dieser Farbe ein.

Von allen vorhandenen Farbfeldern (z.B. in den Inspektoren gelangen Sie per Doppelklick in die Farbpalette. Nur für Text ist im Inspektor eben kein Farbfeld vorgesehen, das funktioniert dann eben über die beiden oben beschriebenen Möglichkeiten.

Wiederauswahl von verwendeten Farben:

Es ist häufig der Fall, dass Sie z.B. einen Text oder einen Seitenhintergrund mit einer bestimmten Farbe versehen haben und diese Farbe später wieder verwenden wollen (vielleicht auch für eine Farbgestaltung in einem anderen Objekt, z.B. Frames-Randfarben. Sie haben hierzu mehrere Grundmöglichkeiten mit zusätzlichen Variationen, was die Sache etwas unübersichtlich macht:

• Gehen Sie in den Quellcode und sehen Sie nach, wie Ihre Farbe codiert wurde (z.B. #cc66cc). Kopieren Sie dies dann in die entsprechende Stelle für den Farbcodes des einzufärbendes Objekts. Gute Übung, um html zu lernen, aber ansonsten langwierig und nicht empfehlenswert.
  
  
• Wenn Sie die Färbung eines Textteils übernehmen wollen: markieren Sie eine eingefärbte Textstelle. Die Textfarbe erscheint oben im Textfarbenfenster der Werkzeugleiste. Klicken Sie dort hinein und die Farbe steht in der Farbpalette als ausgewählte Farbe zur Verfügung und kann auf die Farbfelder des Inspektors der einzustellenden Objekte gezogen werden.
  
  Powertipp: Sie können analog zur Einfärbung die markierte, eingefärbte Textstelle gleich ins große Auswahlfenster der Farbpalette ziehen. Hat genau den gleichen Effekt, aber Sie sparen einen Arbeitsgang.
  
  
  
• Wenn Sie die Färbung eines anderen Objektes übernehmen wollen: Rufen Sie den Inspektor auf. In den jeweiligen Inspektor-Farbfeldern erscheint die Färbung. Klick darauf übernimmt diese Farbe wieder als ausgewählte Farbe ins Farbauswahlfenster der Farbpalette.
  
  Oops: Da ist GoLive nicht konsequent: im Unterschied zum Einfärbevorgang kann man die Farbe nun nicht wieder vom Inspektorfarbfeld auf die Farbpalette mit der Maus zurückziehen, sondern man muss klicken.
  
  
• Sie können zur Auswahl einer bereits benutzten Farbe im Pulldown-Menu der Farbpalette auch die Website-Farben aufrufen. Dort erscheinen alle bislang benutzten Farben, die wieder ausgewählt werden können.
  
  Alternativ können Sie im Projektfenster auch auf den Reiter Farben klicken. Dort erscheinen ebenfalls alle verwendeten Farben; allerdings erst nach dem Speichern der Seiten und Neustart von GoLive. Wenn Sie keinen neuen Programmstart machen wollen, können Sie aber im Hauptmenu unter Website/Farben abrufen alle bislang verwendeten Farben anzeigen lassen (dieser Menu-Punkt erscheint nur, wenn Sie innerhalb des Projektfensters wirklich den Reiter Farben aufgerufen haben). Dort hilft dann allerdings kein Klick auf die Farbe, sondern hier müssen Sie die Farbe wieder ins Auswahlfeld der Farbpalette ziehen!
  
  Tipp: im Subfenster Farben des Projektfensters können Sie den von Ihnen verwendeten Farben Arbeitsnamen hinzufügen, um diese wieder leichter zu erkennen (z.B. Hintergrundfarbe Seiten, Hintergrundfarbe Tabellen, Hinweistexte usw).
  
  Tipp: machen Sie sich mit der Farbgestaltung Ihrer Texte mit den oben beschriebenen Möglichkeiten nicht zuviel Mühe. Mit Stilformatvorlagen (nächstes Kursmodul) geht dies viel eleganter, wie bereits mehrfach erwähnt.

Textformatierung

Paletten, Inspektoren, Farben

Frames