vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 5

Wieder verwertbare Elemente und Erweiterungsmodule

In den ersten vier Tagen haben Sie so ziemlich alles über den Umgang und die Verwendung der Werkzeugpaletten von UltraDev gelernt und wissen nun, wie Sie damit komplette Websites realisieren können. Auf der nächsten Stufe lernen Sie nun, wie Sie diese Werkzeuge so selten wie möglich benutzen. Damit meine ich natürlich nicht, dass Sie UltraDev jetzt wieder deinstallieren sollen - nein, es geht mir darum, Ihnen zu zeigen, wie Sie das Instrumentarium von UltraDev so effektiv wie möglich einsetzen. Macromedia hat das Programm mit einigen höchst nützlichen Funktionen ausgestattet, die die weit gehende »Wiederverwertung« einmal geschriebenen HTML-Codes ermöglichen. Sie können den Funktionsumfang des Programms durch Einbindung zusätzlicher Verhaltensweisen erweitern und sogar die Oberfläche von UltraDev selbst verändern, indem Sie z.B. neue Befehle in ein Menü integrieren oder die Menüstruktur verändern. Ein Blick auf die Themen des heutigen Tages:

5.1 HTML-Code wieder verwenden

Wenn Sie schon an größeren Websites gearbeitet haben, haben Sie vermutlich auch per Ausschneiden und Einfügen Elemente zwischen den einzelnen Seiten hin- und herkopiert, um eine einheitliche Gestaltungslinie einzuhalten. Es gibt viele Möglichkeiten, Websites möglichst ökonomisch und effektiv anzulegen, hierzu gehören sicher auch Frames oder Server-Side-Includes. Aber was ist, wenn sich der Einsatz dieser Techniken verbietet, weil der Webserver Server-Side-Includes nicht unterstützt oder Frames für eine spezielle Anwendung nicht sinnvoll sind?

UltraDev verfügt über Funktionen, die den Erstellungsaufwand von Websites deutlich minimieren können und trotzdem zu allen Serverplattformen kompatibel sind. Welche Werkzeuge sind das nun, wie funktionieren sie, wie muss ich meine Site planen, um dieses Instrumentarium sinnvoll einsetzen zu können? Mit ein bisschen Vorausplanung werden Sie in Zukunft Sites erstellen, die mit weit weniger Aufwand als bisher zu pflegen und aktualisieren sind - zu Ihrem eigenen Wohle und dem eventueller Nachbearbeiter.

Einheitliche Formatierung mit Stylesheets

Werfen Sie einmal einen Blick in Ihren HTML-Code. Wenn Sie Text wie üblich mit HTML-Formaten auszeichnen, dann wimmelt es in der Code-Ansicht nur so von <FONT>- Tags und zugehörigen Attributen wie face, size usw. Verwendet man Text in Tabellen, dann wird das definieren von <FONT>-Tags für jede einzelne Zelle schnell zur Strafarbeit, abgesehen davon wird auch die Datei schnell aufgebläht. Zudem ist die Einhaltung einheitlicher Textformatierungen über viele Seiten sehr aufwändig und fehleranfällig.

Die Formatierung von Text und die Zuweisung von Stilattributen lässt sich zum größten Teil bequem über Cascading Style Sheets (CSS) erledigen. Stylesheets werden von Browsern der 4. Generation (und höher) verstanden und sind so etwas wie eine Formatvorlage. Z.B. könnten Sie über Stylesheets die Darstellung von Text innerhalb des <TD>-Tags neu definieren und dem Browser so mitteilen, dass er diesen Text in 10 Punkt Arial darstellen soll. Sie können auch ganz neue Stile definieren und diese den verschiedenen Objekten innerhalb Ihres HTML-Dokuments zuweisen, sei es von Hand oder über die entsprechenden Inspektoren von UltraDev.

CSS können für das jeweilige Dokument erstellt werden, oder - was weit sinnvoller ist - in einer externen Datei gespeichert und mit den einzelnen HTML-Dateien innerhalb der Site verlinkt werden. Müssen Sie nun Änderungen an der Textformatierung durchführen, z.B. Times durch Arial ersetzen, müssen Sie nur noch eine Datei, das Stylesheet bearbeiten, und Ihre Änderungen werden sofort in allen Dateien durchgeführt.

Darüber hinaus wird es mit Stylesheets möglich, Websites zu gestalten, die auf den unterschiedlichen Plattformen konsistent dargestellt werden. Gestalten Sie eine Website auf dem Mac und schauen Sie sich diese Website dann auf einem PC an - gut möglich, dass das Ergebnis nicht ganz Ihre Absichten widerspiegelt. Gestalten Sie dieselbe Site auf dem PC und öffnen Sie sie dann auf einem Mac - dasselbe in Grün. Abb. 5.1 zeigt, wie eine häufig besuchte Website auf dem Mac aussieht.

Abbildung 5.1:  Der Mac stellt Schriften mit 72 dpi dar.

Abb. 5.2 zeigt dieselbe Site auf einem PC. Beachten Sie die unterschiedliche Menge an Information, die bei gleicher Monitorgröße angezeigt wird.

Abbildung 5.2:  Windows verwendet Fonts mit 96 dpi.

Das größte Problem bei der Entwicklung plattformübergreifender Websites ist die unterschiedliche Auflösung von 96 dpi auf Windowssystemen und von 72 dpi bei Macs. Das hat zur Folge, dass dieselbe Seite auf einem PC wesentlich größer dargestellt wird als auf einem Mac.

Über diese Unterschiede in der Auflösung muss ich mich immer wieder wundern. Nach wie vor hängen an den meisten Windows-Rechnern 15"- oder 17"-Monitore - etwas unterdimensioniert für eine Auflösung von 96 dpi. Bei gleicher Monitorgröße ist vom Inhalt einer Webseite auf einem Mac weit mehr zu sehen als auf PCs.

Durch die Verwendung von CSS lässt sich das Problem der unterschiedlichen Auflösungen umgehen, indem man Fonts nicht eine Größe in Punkt, sondern eine exakte Höhe in Pixel zuweist. Damit lässt sich auf allen Plattformen eine weitgehend identische Darstellung erreichen.

Wenn Sie auf den Einsatz von CSS verzichten wollen, weil sie von der anvisierten Browserplattform nicht unterstützt werden, können Sie an ihrer Stelle HTML-Stile verwenden, um Text in Ihren Dokumenten einheitlich zu formatieren, doch arbeiten HTML- Stile mit den üblichen <FONT>-Tags.

Wiederkehrende Elemente

In allen Websites gibt es wiederkehrende Elemente, die über viele Seiten hinweg immer wieder auftauchen: Kopf- und Fußzeilen oder Menüs. Meistens werden diese Elemente auf jeder Seite frisch in HTML codiert. Bei kleineren Sites mag das noch praktikabel sein, doch wenn eine Website erst einmal mehrere Hundert Seiten zählt, wächst sich die Pflege und Aktualisierung solcher Elemente schnell zu einer Sisyphosarbeit aus.

Zur Veranschaulichung ein Beispiel aus meiner eigenen Praxis. Ich betreue eine Website mit Veranstaltungshinweisen, die ständig aktualisiert werden. Auf dieser Site gibt es auch ein Archiv, in dem die Covergrafik des einmal jährlich erscheinenden Prospektes veröffentlicht wird. Jede Jahresgrafik bekommt eine eigene Seite und wird mit den Seiten verlinkt, die die vorhergehenden Jahresgrafiken enthalten. Wenn also eine neue Seite hinzukommt, müssen alle bereits vorhandenen mit der neuen Seite verlinkt werden. Angenommen, die Site enthält bereits 20 solcher Archivseiten, müsste ich 20 einzelne Seiten bearbeiten, nur um einen einzigen Link hinzuzufügen.

Solche Aktionen lassen sich mit den Bibliotheksfunktionen von UltraDev erheblich rationalisieren. Bibliotheken sind Sammlungen von HTML-Elementen, die beliebig oft auf verschiedenen Seiten verwendet werden können. Wenn Sie ein Element der Bibliothek hinzugefügt haben, können Sie es in jede beliebige Seite einschließen, müssen es aber an einer Stelle bearbeiten.

Wenn Sie den Einsatz serverseitiger Dienste wie der erwähnten Server-Side-Includes planen, um eine ähnliche Funktionalität wie durch die Verwendung von Bibliothekselementen zu erreichen, müssen Sie zuerst mit dem zuständigen Webmaster abklären, welche Features vom Server überhaupt unterstützt werden, bevor Sie sich an die Umsetzung machen. Wenn Sie keine Informationen über den künftigen Produktionsserver haben, sollten Sie ausschließlich das Bibliothekssystem von UltraDev einsetzen.

Wenn Ihr Webserver Server-Side-Includes (SSI) versteht, sind sie das Mittel der Wahl, um mehrfach verwendbare Komponenten zu erzeugen. Durch SSI werden Dateien kleiner, da diese Komponenten in eigenen HTML-Dokumenten abgelegt werden und erst bei der Übertragung vom Server in das Dokument eingeschlossen werden. Bibliotheken gestatten dieselbe Flexibilität, nur wird der HTML-Code eines Bibliothekselements automatisch in den Code der jeweiligen Dokumente eingefügt. Dadurch werden die Dateien zwar größer, aber Sie sind nicht von der Serverplattform und deren Technologie abhängig.

Wenn Sie Strukturplan und Navigationsschema Ihrer Website erstellen, überprüfen Sie, ob und welche Elemente auf den einzelnen Seiten wiederkehren und ob diese gegebenenfalls aktualisiert werden müssen. Solche Elemente empfehlen sich zur Aufnahme in das Bibliothekssystem.

Vorlagen

Vorlagen sind nicht ganz das Gleiche wie Bibliotheken, sind aber ebenfalls eine Möglichkeit, erstellten HTML-Code wieder zu verwenden. Vorlagen sind, wie der Name schon sagt, Vorlagen oder Musterseiten für eine Website. Angenommen, Sie haben für eine Website ein Musterlayout für eine Produktseite entwickelt, die nun, mit verschiedenen Produkten gefüllt, immer wieder verwendet werden soll. Der gewitzte Webmaster wird nun nicht jedes Mal die ganze Seite komplett neu erstellen wollen, wenn ein neues Produkt dazukommt. Nehmen wir zum Beispiel eine Immobiliensite. Das Layout für die einzelnen Immobilien steht zwar, aber eigentlich wäre es Ihnen am liebsten, wenn nun die Makler die Daten ihrer neuen Objekte selbst einstellen würden. Darum erstellen Sie eine Vorlage, damit die einzelnen Mitarbeiter Inhalte ins Netz stellen können, ohne sich um den HTML-Code kümmern zu müssen.

In Vorlagen lassen sich die wichtigen Teile der Seite wie z.B. Menüs gegen versehentliche oder mutwillige Veränderungen schützen, indem man sie für die Bearbeitung sperrt, während die Inhaltsbereiche frei editierbar bleiben. Mit Vorlagen lässt sich die mit der Aktualisierung und Pflege einer Website anfallende Belastung effizient auf mehrere Mitarbeiter verteilen. In Verbindung mit CSS erlauben Vorlagen das Maximum an Kontrolle über den Inhalt und seine Darstellung.

5.2 HTML-Stile

Wenn Sie Schriftstile erzeugen möchten, die auch mit nicht CSS-fähigen Browsern funktionieren, können Sie HTML-Stile mit den standardmäßigen Fontattributen verwenden. Die erzeugten Stile finden Sie unter Text > HTML-Stile. In diesem Menü finden Sie einige bereits vordefinierte Stile, die Sie sofort einsetzen können. Markieren Sie den Text, den Sie formatieren möchten, und weisen Sie ihm den gewünschten Stil aus dem Menü zu.

Um einen neuen Stil zu erzeugen, wählen Sie Text > HTML-Stile > Neuer Stil, woraufhin sich das in Abb. 5.3 gezeigte Dialogfenster öffnet.

Abbildung 5.3:  HTML-Stile funktionieren in allen Browsern.

Bevor Sie den neuen Stil verwenden können, müssen Sie ein paar Attribute einstellen:

Wenn Sie alle Einstellungen vorgenommen haben, schließen das Fenster mit Klick auf OK, und der Stil steht zur Verfügung.

Es gibt noch einen anderen Weg, HTML-Stile zu erzeugen. Formatieren Sie zunächst den Text im Dokument wie gewünscht. Nun markieren Sie den formatierten Text und rufen die Option Neuer Stil auf. Die Attribute des formatierten Textes werden im Dialogfenster angezeigt, sodass Sie dem Stil nur noch einen Namen zuweisen und ihn dann abspeichern müssen.

Auf HTML-Stile haben Sie außer über das Menü Text auch über die Palette HTML- Stile Zugriff. Sie öffnen sie über Fenster > HTML-Stile. Eine Abbildung dieser Palette sehen Sie in Abb. 5.4. Am Buchstaben- bzw. Absatzsymbol erkennen Sie, ob es sich um einen Auswahl- oder einen Absatzstil handelt.

Abbildung 5.4:  Mit der Palette HTML-Stile lassen sich Stile schnell erzeugen, zuweisen, löschen und bearbeiten.

Sie können HTML-Stile einem Text auf zwei Arten zuweisen. Standardmäßig ist das Kontrollfeld Anwenden links unten in der Palette aktiviert. Wenn Sie in der Dokumentansicht Text markieren und dann einen Stil aus der Liste auswählen, indem Sie darauf klicken, wird er automatisch auf die Auswahl angewendet. Deaktivieren Sie das Kontrollfeld, wird der Button Anwenden aktiv. Um dann einer Auswahl einen Stil zuzuweisen, müssen Sie auf diesen Button klicken.

Am rechten unteren Rand der Palette gibt es zwei weitere Schaltflächen, die manchmal recht nützlich sind. Durch Klicken auf das Papier-Icon können Sie einen neuen Stil erzeugen, klicken auf den Abfalleimer löscht den in der Liste markierten Stil. Durch Doppelklick auf einen Stil in der Liste können Sie ihn editieren, doch Vorsicht: Ist das Kontrollfeld Anwenden aktiviert, weisen Sie unter Umständen den Stil - statt ihn zu editieren - einem Textabschnitt zu. Um das zu verhindern, deaktivieren Sie das Kontrollfeld.

HTML-Stile stehen nur innerhalb der Site, in der sie erstellt wurden, zur Verfügung. Möchten Sie Ihre selbst definierten HTML-Stile auch in anderen Sites verwenden, müssen Sie die Datei styles.xml aus dem Ordner Library in den gleichen Ordner der anderen Site kopieren.

Die Stilformate werden im HTML-Dokument unabhängig von der Datei styles.xml angezeigt.

5.3 Cascading Style Sheets

Cascading Style Sheets oder CSS sind eine prima Sache, die das Leben des Webdesigners um vieles leichter machen können. Im Gegensatz zu HTML-Stilen ermöglichen CSS eine weit bessere Kontrolle über die Elemente einer Seite und Sie können damit Attribute eines Objekts verändern, die über HTML nicht zugänglich sind.

Stylesheets sind sehr komplex, und sie von Hand zu editieren ist nicht so spaßig. Es ist nicht so schwierig, ihre Syntax zu verstehen, wohl aber, sämtliche möglichen Attribute und Einstellungen im Kopf zu behalten. Nachstehend eines kleines Beispiel, das die Formatierung von <TD>-Tags und <TH>-Tags verändert:

<style type="text/css">
<!--
td { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #0000CC}
th { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #660000}
-->
</style>

Mit diesem Stylesheet wird der Font für <TD>-Tags auf »Arial, Helvetica, sans serif« gesetzt sowie eine Schriftgröße und -farbe definiert. Das <TH>-Tag bekommt ebenfalls dieselbe Fontgruppe zugewiesen, nur wurde eine andere Farbe und eine höhere Schriftgröße gewählt. Jedes HTML-Dokument, das mit diesem Stylesheet verlinkt wird bzw. in das dieses Stylesheet eingefügt wird, erbt diese Eigenschaften.

Mit UltraDev wird die Erstellung von CSS bzw. die Neudefinition von Tags zum Kinderspiel - nur ein paar Einträge auswählen, klick, fertig!

Stylesheets verwenden

Die Palette CSS-Stile hat große Ähnlichkeit mit der Palette HTML-Stile. Sie können CSS-Stile zwar auch über Text > CSS-Stile definieren, doch bietet die Palette CSS- Stile bequemere Möglichkeiten der Einstellung, darum arbeiten wir gleich mit der Palette. Wenn Sie sie noch nicht geöffnet haben, tun Sie das bitte jetzt über Fenster > CSS-Stile (siehe Abb. 5.5).

Abbildung 5.5:  CSS-Stile lassen sich einem einzelnen Dokument sowie einer ganzen Website zuweisen.

Im Gegensatz zu den HTML-Stilen gibt es in der CSS-Palette keine vordefinierten Stile. Haben Sie bereits ein Stylesheet erstellt, können Sie es sofort mit Ihrem Dokument verknüpfen. Klicken Sie hierzu rechts unten im Fenster auf das äußerste linke Icon. Es öffnet sich ein Dialogfenster, das Sie auffordert, das Stylesheet auszuwählen.

Um ein neues Stylesheet zu erzeugen, klicken Sie auf das Icon Neuer Stil rechts unten in der Palette (ein Blatt Papier mit einem Pluszeichen). Alternativ können Sie auch den entsprechenden Befehl über das Palettenmenü aufrufen (auf den schwarzen Pfeil rechts oben klicken). Daraufhin öffnet sich das in Abb. 5.6 gezeigte Dialogfenster Neuer Stil.

Abbildung 5.6:  Wählen Sie den gewünschten Stil und klicken Sie auf OK.

Folgende drei Stiltypen stehen zu Ihrer Auswahl:

Die mächtigste Funktion in diesem Zusammenhang ist sicher die, benutzerdefinierte Stile erstellen zu können. Ohne dass Sie irgendetwas am HTML-Code verändern, bekommt Ihr Dokument plötzlich einen völlig neuen Look verpasst.

Sie können Stylesheets an zwei Orten ablegen - einmal in einer externen Datei, zum anderen im aktuellen Dokument selbst. Möchten Sie das Stylesheet als externe Datei speichern, können Sie im Dialogfenster Neuer Stil unter Definieren in die Option Neue Stylesheet-Datei wählen. Haben Sie bereits ein Stylesheet mit Ihrem Dokument verknüpft, können Sie auch dieses aus dem Popup-Menü wählen, anstatt ein neues zu erzeugen.

Wollen Sie das Stylesheet nur für das aktuelle Dokument erzeugen, wählen Sie die Option Nur dieses Dokument.

Einen Stil erzeugen

Für unseren ersten Stil definieren wir das Tag <B> neu. Wählen Sie HTML-Tag neu definieren, und wählen Sie aus dem Popup-Menü Tag das Tag B. Klicken Sie dann auf OK.

  1. Im Listenfeld Kategorie können Sie zwischen acht Kategorien von Attributen wählen, die Sie einem Stil zuweisen können. Die am meisten gebräuchliche Kategorie ist Typ. Hier legen Sie sämtliche Schriftattribute fest. Sollte diese Kategorie nicht ausgewählt sein, dann machen Sie das bitte jetzt. Die zugehörige Eingabemaske ist in Abb. 5.7 zu sehen.

    Abbildung 5.7:  Im Fenster Stildefinition setzen Sie sämtliche Attribute für den Font.

  2. Wählen Sie als Schriftgruppe »Arial, Helvetica, sans-serif«, als Schriftgröße stellen Sie 72 Pixel ein, als Stärke wählen Sie »fett«. Sie müssen sich natürlich nicht an diese Werte halten, sondern können sämtliche zur Verfügung stehenden Einstellungen ganz nach Geschmack treffen. Die Qual der Wahl liegt bei Ihnen. Da so viele Optionen zur Auswahl stehen, folgt im Anschluss an diese Einführung eine kurze CSS-Referenz.
  3. Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie auf OK.
  4. Bevor Sie Ihren Stil anwenden, öffnen Sie das Fenster noch einmal, doch diesmal erzeugen Sie einen benutzerdefinierten Stil.
  5. Das Procedere ist das gleiche, nur dass Sie diesmal anstelle der Option HTML-Tag neu definieren die Option Benutzerdefinierten Stil erstellen auswählen. Nennen Sie ihn .heading und weisen Sie ihm die entsprechenden Attribute zu, wie Sie das beim vorigen Stil getan haben. Ich habe als Größe 128 Pixel genommen und als Stil »oblique«.
  6. Haben Sie alle Attribute gesetzt, klicken Sie auf OK.

Öffnen Sie nun die Codeansicht ihres Dokuments. Wenn bei der Stildefinition nichts schief gegangen ist, finden Sie im Head-Bereich des Codes die folgenden Style- Anweisungen:

<style type="text/css">
<!--
.heading { font-family: Arial, Helvetica, sans-serif; font-size: 128pt; font-style: oblique}
b { font-family: Arial, Helvetica, sans-serif; font-size: 72pt; font-weight: bold}
-->
</style>

Öffnen Sie jetzt die CSS-Stile-Palette, um sich alle verfügbaren Stile anzeigen zu lassen. Wie Sie sehen, ist nur »heading« aufgelistet. Das liegt daran, dass nur benutzerdefinierte Stile aufgeführt werden. Stile, die auf neu definierten HTML-Tags basieren, werden automatisch zugewiesen und müssen daher nicht angezeigt werden.

Stile zuweisen

Stile, die auf HTML-Tags beruhen, brauchen Sie wie gesagt nicht zuzuweisen, da sie automatisch angewendet werden, sobald dieses Tag im HTML-Code erscheint. Probieren Sie das einmal mit dem HTML-Tag aus, das Sie neu definiert haben. Wenn Sie wie im obigen Beispiel das <b>-Tag umdefiniert haben, geben Sie etwas Text ein und formatieren ihn fett (Menü Text > Stil > Fett).

Wie Sie sehen, verhält sich fett formatierter Text auf einmal völlig anders als gewohnt. Fett formatierter Text wird in dem Dokument, in dem Sie das Stylesheet definiert haben, nun mit den Attributen angezeigt, die Sie diesem Tag zugewiesen haben.

Wollen Sie Text einen benutzerdefinierten Stil zuweisen, benutzen Sie hierzu entweder die CSS-Palette oder das Menü Text > CSS-Stile. Markieren Sie den Text und klicken Sie auf den gewünschten Stil in der CSS-Palette oder wählen Sie ihn über das Menü aus. Ist das Kontrollfeld Anwenden in der CSS-Palette deaktiviert, müssen Sie auf den Stil doppelklicken, bevor er angewählt wird. Um zugewiesene Stile wieder zu löschen, markieren Sie den Text und wählen in der CSS-Palette die Option Keine.

Genaue Kontrolle darüber, auf welche Abschnitte ein Stil angewendet wird, erhalten Sie, wenn Sie im Feld Anwenden auf das Popup-Menü öffnen und das Tag auswählen, dem die Stildefinition zugewiesen wurde.

Falls ein selbst definierter Stil in der Dokumentansicht nicht richtig angezeigt wird, könnte es daran liegen, dass UltraDev dieses Stilattribut nicht unterstützt. Überprüfen Sie in einem solchen Fall, ob der betreffende Stil im Dialogfenster Stildefinition mit einem * gekennzeichnet ist. In diesem Fall müssten Sie das Dokument in der Browservorschau öffnen, damit Sie sehen, ob dieses Stilattribut korrekt gerendert wird.

Bearbeitung und Links zu externen Stylesheets

Stylesheets innerhalb eines einzelnen Dokuments zu verwenden ist zwar nicht verkehrt, zieht aber nicht den optimalen Nutzen aus dieser Technik. Statt für jedes Dokument Stilanweisungen zu schreiben, erzeugen Sie ein zentrales Stylesheet, auf das alle Dateien verlinken. Das ist die effektivste Methode, einen einheitliche Gestaltungslinie innerhalb einer Site einzuhalten. Am einfachsten verknüpfen Sie - wie bereits erwähnt - eine Datei und ein Stylesheet mit dem Button Stylesheet anfügen rechts unten in der CSS- Palette. Damit haben Sie aber nicht die volle Kontrolle über das Stylesheet - verwenden Sie besser das Icon Stylesheet bearbeiten (es stellt Papier und Bleistift dar), um mit dem Dokument verlinkte Stile zu bearbeiten.

Um ein externes Stylesheet zu erzeugen, klicken Sie auf dieses Icon, oder wählen Sie Text > CCS-Stile > Stylesheet bearbeiten. Es öffnet sich das in Abb. 5.8 gezeigte Dialogfenster Stylesheet bearbeiten.

Abbildung 5.8:  Stylesheets bearbeiten und einbinden mit der  Dialogbox Stylesheet bearbeiten

In diesem Dialogfenster können Sie Stile neu erstellen oder duplizieren, bearbeiten oder entfernen. Was uns in diesem Zusammenhang am meisten interessiert, ist der Button Verknüpfen. Bitte klicken Sie jetzt diese Schaltfläche an, um das Dialogfenster Entferntes Stylesheet hinzufügen zu öffnen (siehe Abb. 5.9). Geben Sie dort in das Feld Datei /URL die Adresse des Dokuments ein, auf das verlinkt werden soll, und wählen Sie unter der Option Hinzufügen als, ob das Stylesheet in das aktuelle Dokument importiert oder damit verknüpft werden soll.

Abbildung 5.9:  Mit existierendem Stylesheet verknüpfen oder neues Stylesheet erzeugen

Wenn Sie bereits ein Stylesheet erstellt haben, geben Sie bitte den Pfad in das Feld Datei /URL ein. Wenn nicht, dann vergeben Sie einen neuen Dateinamen wie z.B. meinStil.css und klicken auf OK. Daraufhin wird ein neues Stylesheet ohne Inhalt erzeugt.

Jetzt sehen Sie wieder das Dialogfenster Stylesheet bearbeiten. Im Listenfeld wird das verlinkte Stylesheet angezeigt. Um es zu bearbeiten, markieren Sie es und klicken auf Bearbeiten. Es öffnet sich eine leere Kopie des Dialogfensters Stylesheet bearbeiten, in der Titelleiste wird jedoch der Name des Stylesheets angezeigt. Um nun die gewünschten Stile zu definieren, klicken Sie in diesem Fenster auf Neu. Alle Stile, die Sie auf diesem Weg definieren, werden nun zwar in dem externen Stylesheet abgelegt, stehen aber im aktuellen Dokument ohne Einschränkung zur Verfügung. Bei der Erstellung der Folgeseiten brauchen Sie nur noch auf dieses Stylesheet zu verlinken, und sämtliche Stile stehen Ihnen zur Verfügung.

In den bisherigen Versionen verfügt UltraDev nicht über die Fähigkeit, Stile zwischen einzelnen Stylesheets auszutauschen oder zwei Stilvorlagen zusammenzuführen. Hierzu müssen Sie einen Texteditor öffnen und die Stildefinitionen per Ausschneiden und Einfügen übertragen.

CSS-Referenz

Das Dialogfenster Stildefinition und die schriftspezifischen Einstellmöglichkeiten haben Sie ja schon kennen gelernt. Die meisten dieser Optionen sind selbsterklärend, doch ein paar bedürfen der Erläuterung. Darüber hinaus sind nicht alle Einstellungen in allen Fällen gültig oder sinnvoll. Wenn Sie z.B. die Positionierungseigenschaften einer Ebene definieren, sind Fontattribute nicht sonderlich hilfreich.

Die folgenden Tabellen geben einen Überblick über die verschiedenen Einstellungsmöglichkeiten in den acht Kategorien des Fensters Stildefinition sowie über deren Wirkungsweise.

Die Eingabemaske Typ haben Sie ja schon benutzt, um die Stilattribute von Text zu definieren. In Tabelle 5.1 gehen wir auf die einzelnen Attribute noch einmal näher ein.

Attribute

Beschreibung

Schrift

Font bzw. Fontgruppe, die einem Objekt zugewiesen wird.

Größe

Festlegung der Schriftgröße. Die Verwendung der Maßeinheit »Pixel« ermöglicht bessere Cross-Browser-Kompatibilität.

Stärke

Definiert, wie mager bzw. fett ein Font dargestellt wird.

Stil

Der Schriftschnitt: gerade oder kursiv.

Variante

Kleinbuchstaben werden als Kapitälchen ausgegeben.

Zeilenhöhe

Regelt den Durchschuss im Text, indem Werte für den Zeilenabstand gesetzt werden.

Groß-/Kleinschreibung

Text wird nur in Groß- bzw. Kleinbuchstaben ausgegeben bzw. der erste Buchstabe eines Wortes ist groß.

Auszeichnung

Weitere Textstile, die mit HTML nicht möglich sind, wie z.B. Durchgestrichen.

Farbe

Textfarbe zuweisen.

Tabelle 5.1: Typ-Atribute

In der Eingabemaske Hintergrund definieren Sie Hintergrundfarbe oder Hintergrundbilder von Objekten wie z.B. Tabellen oder Ebenen. Tabelle 5.2 erläutert die verschiedenen Optionen.

Attribute

Beschreibung

Hintergrundfarbe

Definiert die Hintergrundfarbe eines Objekts.

Hintergrundbild

Zeigt ein Objekt mit einem Hintergrundbild an.

Wiederholen

Definiert, ob und wie ein Hintergrundbild wiederholt wird (horizontal, vertikal, in beiden Richtungen).

Anlage

Je nach Einstellung wird das Hintergrundbild mit der Seite gescrollt oder bleibt im Hintergrund fest stehen.

Horizontale Position

Gibt die horizontale Position des Hintergrundbildes in Bezug zum Element an.

Vertikale Position

Gibt die vertikale Position des Hintergrundbildes in Bezug zum Element an.

Tabelle 5.2: Hintergrund-Attribute  

In der Eingabemaske Block regeln Sie Textausrichtung und Abstände von ganzen Textblöcken wie z.B. Absätzen. Tabelle 5.3 erläutert die verschiedenen Optionen.

Attribute

Beschreibung

Wortabstand

Regelt den Abstand zwischen den einzelnen Wörtern. Negative Werte verschieben die Wortgrenzen ineinander.

Zeichenabstand

Regelt den Abstand zwischen den Buchstaben. Negative Werte rücken die Buchstaben näher aneinander.

Vertikale Ausrichtung

Gibt die vertikale Ausrichtung in Relation zum übergeordneten Element an.

Textausrichtung

Gibt an, wie der Text innerhalb des Elements ausgerichtet ist (mittig, links, rechts).

Texteinzug

Gibt an, ob und wie weit die erste Zeile einen Textblocks eingezogen wird.

Leerraum

Legt fest, wie Leerraum behandelt wird. Während bei der normalen Ausgabe von HTML-formatiertem Text mehrere Leerzeichen zu einem zusammen gefasst werden, erhält Pre sämtliche Leerzeichen. Die Option Kein Umbruch bricht Text nur dann um, wenn im Text ein <br>-Tag steht.

Tabelle 5.3: Block-Attribute

Die Eingabemaske Box regelt die Position eines Objektes auf der Seite sowie die Randabstände. Tabelle 5.4 gibt über die verschiedenen Optionen näher Auskunft.

Attribute

Beschreibung

Breite

Weist dem Objekt eine Breite zu.

Höhe

Weist dem Objekt eine Höhe zu.

Schwebend

Das Objekt wird an den linken oder rechten Rand verschoben und von den übrigen Elementen umflossen.

Frei

Legt die Seite des Objekts fest, die nicht umflossen werden darf. Diese Seite bleibt frei.

Auffüllen

Definiert den Abstand zwischen dem Inhalt und dem Rahmen eines Objekts.

Rand

Definiert den Abständen zwischen Objekten.

Tabelle 5.4: Feld-Attribute  

In der Eingabemaske Rahmen definieren Sie den Randstil und die Farbe von Tabellenrahmen. Tabelle 5.5 erläutert die verschiedenen Optionen.

Attribute

Beschreibung

Breite

Randstärke von Tabellen oder Ebenen.

Farbe

Farbe, in der ein Rahmen dargestellt wird.

Stil

Randstil des Rahmens (gestrichelt, durchgehend usw.)

Tabelle 5.5: Rahmen-Attribute

Die Eingabemaske Liste definiert die Darstellung von geordneten und ungeordneten Listen. Tabelle 5.6 erläutert die verschiedenen Optionen.

Attribute

Beschreibung

Typ

Art der Aufzählungspunkte (Zahl, Kreis usw.)

Aufzählungsbild

Ersetzt die zeichenbasierten Aufzählungspunkte durch anwenderdefinierte Grafiken.

Position

Regelt den Umbruch innerhalb von Listeneinträgen.

Tabelle 5.6: Listen-Attribute

Die Eingabemaske Positionierung regelt die Positionierung von Ebenen und deren sichtbare Bereiche. Tabelle 5.7 erläutert die verschiedenen Optionen.

Attribute

Beschreibung

Typ

Art der Positionierung einer Ebene. Relativ platziert die Ebene in eine relative Position zum übergeordneten Objekt. Absolut definiert eine Position zum linken oberen Seitenrand. Statisch hält die Ebene an einer festen Position innerhalb des Textflusses.

Z-Index

Gibt die Position der Ebene innerhalb eines Stapels von Ebenen an.

Sichtbarkeit

Definiert, ob die Ebene ursprünglich sichtbar ist oder nicht.

Überlauf

Stellt ein, wie mit Inhalt umgegangen wird, der größer ist als die Ebene (sichtbar, unsichtbar, scrollen).

Plazierung

Position und Größe der Ebene.

Abschneiden

Definiert, welche Bereiche der Ebene sichtbar sein sollen und welche nicht.

Tabelle 5.7: Positionierungs-Attribute  

Die Eingabemaske Erweiterungen enthält Stile und Effekte, die nicht in allen Browsern zur Verfügung stehen, wie z.B. bestimmte Filtereffekte oder Cursorstile. Tabelle 5.8 beschreibt die verschiedenen Optionen näher.

Attribute

Beschreibung

Seitenumbruch

Erzwingt einen Seitenumbruch, wenn die Seite gedruckt wird.

Cursor

Verändert den Cursorstil, wenn der Cursor auf ein Objekt gesetzt wird. Funktioniert nur im Internet Explorer.

Filter

Ebenfalls ein Feature, das nur vom Internet Explorer unterstützt wird. Bringt Photoshop-ähnliche Effekte auf eine Website. Diese Funktionen werden wohl nicht zum Standardinventar von HTML gehören.

Tabelle 5.8: Erweiterungen-Attribute

UltraDev bietet wie zu HTML auch zu Cascading Style Sheets umfangreiche Informationen in der Hilfe-Funktion. Rufen Sie für detaillierte Angaben einfach das Hilfe-Menü auf.

Ein letzte Bemerkung zu Stylesheets

Wenn Sie nun mit CSS arbeiten, lassen Sie sich nicht von den Wogen der Begeisterung davon reißen. CSS sind ein fantastisches Werkzeug, aber leider verhalten sie sich nicht immer so, wie wir uns das vorstellen. Es gibt Unterschiede in der Darstellung zwischen Netscape Navigator und Internet Explorer und sogar bei den gleichen Browsern auf unterschiedlichen Plattformen.

Ich habe gute Erfahrungen mit CSS gemacht und finde sie höchst nützlich, um innerhalb einer Website ein einheitliches Schriftbild und größtmögliche Cross-Browser- Kompatibilität zu erreichen. Doch dürfen Sie nicht davon ausgehen, dass die Browserdarstellung sich hundertprozentig mit der Designansicht von UltraDev deckt. Kontrollieren Sie die Seiten immer wieder in der Browservorschau und verwenden Sie nicht nur einen speziellen Browser für Ihre Testläufe.

5.4 Bibliotheken

Bibliotheken sind im Grunde eine Sammlung von häufig verwendeten »HTML-Code- Schnipseln«. Diese Schnipsel werden an einer Stelle gespeichert und lassen sich nach Bedarf beliebig auf anderen Seiten verwenden. Gutes Beispiel für solche wieder verwertbaren Elemente sind Navigationsleisten. Haben Sie sich einmal die Mühe gemacht, ein Menü zu erstellen, werden Sie es vermutlich wieder verwenden wollen. Darum möchte ich Ihnen als Nächstes zeigen, wie Sie ein fertig erstelltes Menü als Bibliothekselement ablegen.

Fertige HTML-Elemente in Bibliotheken ablegen

Am bequemsten erstellen Sie Bibliothekselemente, wenn Sie das Objekt, das Sie der Bibliothek hinzufügen möchten, in der Dokumentansicht erstellen. Nehmen wir als Beispiel die schlichte Navigationsleiste aus Abb. 5.10, die mithilfe von Imagemaps erstellt wurde.

Wenn Sie Objekte in Tabellen oder Ebenen erstellen, werden die Objekte gewissermaßen gruppiert und können bei der Anzeige im Browser nicht auseinander gerissen werden.

Um die Navigationsleiste unserem Bibliotheksbestand einzuverleiben, markieren Sie die Ebene, die das Menü enthält und gehen Sie dann auf Modifizieren > Bibliothek > Objekt in Bibliothek einfügen.

Abbildung 5.10:  Mit UltraDev Objekte in die Bibliothek aufnehmen

Die Elementepalette: Bibliotheken

Das Objekt sollte nun im Register Bibliothek der Palette Assets stehen. Sie öffnen die Palette Elemente über Fenster > Elemente. Klicken Sie auf das Buch-Icon, um sich alle Bibliothekselemente anzeigen zu lassen. Wie in Abb. 5.11 zu sehen, ist die Menüleiste jetzt zum Bibliothekselement geworden.

Abbildung 5.11:  Unter dem Register Bibliothek  werden alle Objekte angezeigt, die Sie Ihrer Sammlung von HTML-Elementen hinzugefügt haben.

Über die Palette Elemente haben Sie schnellen Zugriff auf alle gespeicherten Objekte. Das im Listenfeld aktuell markierte Objekt wird im oberen Feld der Palette angezeigt. Normalerweise ist die Palette ziemlich klein, wenn sie geöffnet wird, unter Umständen müssen Sie sie etwas aufziehen, um das obere Feld sehen zu können. Sie können Bibliothekselemente schnell der aktuellen Seite hinzufügen, wenn Sie auf den Button Einfügen links unten in der Palette klicken.

Bibliothekselemente neu erstellen

Sie können Bibliothekselemente natürlich auch von der Pike auf erstellen. Hierzu müssen Sie in die Dokumentansicht gehen und das Bibliotheksregister der Palette Elemente öffnen. Klicken Sie rechts unten in der Palette auf das Icon Neu (Blatt Papier mit einem Pluszeichen). Nun wird im Listenfeld der Bibliothekselemente ein leerer Eintrag angezeigt. UltraDev gibt Ihnen daraufhin im oberen Feld Hinweise auf die erforderlichen weiteren Schritte, wie in Abb. 5.12 zu sehen.

Abbildung 5.12:  Bibliothekselemente von  der Pike auf erstellen

Das Icon Bearbeiten, von dem die Programmmeldung spricht, ist ein kleines Icon rechts unten in der Palette Elemente, das ein Blatt Papier und einen Stift zeigt. Mit diesem Icon können Sie jederzeit Bibliothekselemente öffnen und editieren. Schließen Sie das Dokument, das das Bibliothekselement enthält, werden Sie aufgefordert, Ihre Änderungen zu speichern. Die Aktualisierungen werden dann sofort in allen Seiten angezeigt, die das Element verwenden.

Weitere Bibliotheksfunktionen

Um Bibliothekselemente neu zu benennen, doppelklicken Sie auf seinen Namen im Listenfeld und geben dann den gewünschten Namen ein. Sie können auch das Palettenmenü öffnen (auf den Pfeil rechts oben in der Palette klicken) und den Befehl Umbenennen aufrufen.

Der Befehl Aktuelle Seite aktualisieren aktualisiert das geöffnete Dokument, so dass alle neu durchgeführten Änderungen an Bibliothekselementen angezeigt werden. Normalerweise werden Sie aber nicht einzelne Dokumente aktualisieren, sondern die ganze Site. Wählen Sie hierzu den Befehl Site aktualisieren.

Mit diesem Befehl öffnen Sie das in Abb. 5.13 gezeigte Dialogfenster. Hier stellen Sie ein, ob UltraDev die ganze Site überprüfen oder nur nach solchen Seiten suchen soll, die ein bestimmtes Bibliothekselement enthalten, um sie dann zu aktualisieren. Es wird ein Bericht über sämtliche Aktualisierungen angelegt, sodass Sie volle Kontrolle über alle Änderungen haben.

Abbildung 5.13:  Sämtliche Dokumente einer Website in einem Durchgang auf den neuesten Stand bringen

Um ein Bibliothekselement zu entfernen, klicken Sie auf den kleinen Abfalleimer rechts unten in der Palette. Der Befehl Löschen im Palettenmenü erfüllt denselben Zweck. Die Bibliothekselemente einer Site finden Sie im Ordner Library im Fenster Lokaler Ordner. Bibliothekselemente erkennen Sie an der Endung .lbi. Trotz dieser Extension handelt es sich um ganz normale HTML-Dateien, die Sie in UltraDev oder jedem anderen Editor öffnen und bearbeiten können.

5.5 Vorlagen

Bei der Arbeit mit UltraDev sind Sie sicher auch schon über den Begriff »Vorlagen« gestolpert. Vorlagen sind eine spezielle Art von Dokument, die sich etwas anders verhalten als die gewöhnlichen HTML-Files einer Site. Vorlagen ermöglichen es, Seiten mit einem festen, nicht veränderbaren Layout zu erstellen, in die aber beliebiger Inhalt eingestellt werden kann.

Somit ist sichergestellt, dass am Layout einer Seite nichts verändert werden kann, wenn diese Dokumente von den unterschiedlichsten Bearbeitern geöffnet, verändert und wieder abgespeichert werden. Macht ein »normales« HTML-Dokument die Runde durch die Firma, so widerfahren ihm im Laufe der Zeit die wunderlichsten Veränderungen - Tabellenbreiten ändern sich scheinbar in Abhängigkeit von der Raumtemperatur, Links führen plötzlich ins Nichts - und niemand kann sich auch nur im Entferntesten vorstellen, woran das liegen könnte. Speichern Sie solche Dokumente als Vorlagen, ist dem ein Riegel vorgeschoben. Erstellen Sie solche Seiten auf Basis von Vorlagen, können Sie Ihre Seiten beruhigt an die verschiedenen Bearbeiter weitergeben, da nun das Layout der Seite selbst gegen Veränderungen aller Art geschützt ist. Dieses Vorgehen ist vor allem bei Sites, die von mehreren Bearbeitern betreut werden, ein absolutes Muss.

Man könnte sich Vorlagen auch als die Umkehrung der Bibliotheksfunktion vorstellen. Statt einzelne HTML-Schnipsel zu speichern, die dann in das jeweilige Dokumente eingefügt werden, wird bei Vorlagen ein komplettes HTML-Dokument gespeichert, in das man dann diverse HTML-Schnipsel einsetzt. Die Bibliothekspalette und die Vorlagenpalette sehen sich daher auch ziemlich ähnlich.

Bestehende HTML-Dokumente als Vorlage speichern

Da eine Vorlage letztlich nichts anderes ist als das fertige Layout einer Webseite, empfiehlt es sich, Vorlagen auf Basis schon vorhandener Seiten zu erstellen. Entwerfen und realisieren Sie wie gewohnt Ihre Seite in UltraDev, ohne sich schon im Vorfeld den Kopf zu zerbrechen, welche Seitenbereiche editierbar sein sollen und welche nicht. Nehmen wir als Beispiel den in Abb. 5.14 gezeigten Screen, ein schlichtes dreispaltiges Tabellenlayout. Die linke Spalte nimmt das Menü auf, die beiden anderen Spalten den Inhalt. Nun wollen wir das Menü in der linken Spalte vor unbefugten Zugriffen schützen und nur die beiden anderen Spalten zur Bearbeitung freigeben, sodass Bild und Text ausgetauscht werden können.

Mit dem Befehl Datei > Als Vorlage speichern machen Sie aus einem normalen Dokument eine Vorlage. Das Dialogfenster Als Vorlage speichern unterscheidet sich etwas vom normalen Speichern unter-Dialog. Vorlagen werden innerhalb der Website in einem eigenen Ordner Templates abgespeichert und sind an der Endung .dwt erkenntlich. Wie Abb. 5.15 zeigt, können Sie in diesem Dialogfenster wählen, in welche Site diese Vorlage gespeichert werden soll und welchen Namen sie erhalten soll. Ist die Vorlage gespeichert, können Sie die editierbaren Bereiche definieren.

Sie müssen ein Dokument nicht als Vorlage speichern, bevor Sie die editierbaren Bereiche definieren. Das ist nur eine Sicherheitsmaßnahme, um die Originaldatei vor ungewollten Änderungen zu schützen.

Standardmäßig ist das gesamte Dokument für die Bearbeitung gesperrt. Sie müssen nun festlegen, welche Bereiche editierbar sein sollen. Markieren Sie einen editierbaren Bereich und gehen Sie in Menü Modifizieren > Vorlagen > Neuer bearbeitbarer Bereich. Es öffnet sich in Dialogfenster, in das Sie einen Namen für diesen editierbaren Bereich eingeben. So können Sie die einzelnen Bereiche voneinander unterscheiden, wenn Sie Inhalt in die Vorlage importieren. Möchten Sie die Editierbarkeit eines Bereiches wieder aufheben, gehen Sie in Menü Modifizieren > Vorlagen > Bearbeitbaren Bereich entfernen. Wählen Sie im geöffneten Dialogfenster den Bereich aus und löschen Sie ihn. Der Bereich ist somit wieder gesperrt.

Abbildung 5.14:  Fertige Seiten lassen sich im Handumdrehen in Vorlagen verwandeln.

Abbildung 5.15:  Vorlagen werden in eine Site gespeichert.

Editierbare Bereiche werden blaugrau markiert, um anzuzeigen, dass sie nicht gesperrt sind. Wenn Sie eine Vorlage öffnen, um eine neue Webseite zu erstellen, werden gesperrte Bereiche durch eine gelbe Markierung angezeigt, während bearbeitbare Bereiche nicht markiert sind.

Wenn diese Tönungen nicht ganz Ihren Geschmack treffen, können Sie die Markierungsfarben in den Voreinstellungen verändern.

Wenn Sie alle editierbaren Bereiche definiert haben, speichern Sie die Vorlage mit allen Änderungen und schließen das Vorlagenfenster.

Die Elementepalette: Vorlagen

Sie können Ihre Vorlagen mit der Elementepalette (öffnen über Fenster > Elemente) überprüfen, indem Sie auf das Vorlagen-Icon klicken (direkt über dem Bibliothek-Icon). Wenn Ihnen die Vorlagenpalette ganz so vorkommt wie die Bibliothekspalette, dann ist da was Wahres dran.

Wenn Sie eine Vorlage per Klick auswählen, wird sie in der oberen Hälfte der Palette angezeigt. Die unter den Icons liegenden Befehle sowie die Befehle im Palettenmenü sind identisch mit denen der Bibliothekspalette.

Vorlagen neu erstellen

Sie können Vorlagen ohne Weiteres mithilfe der Vorlagenpalette von einem leeren Dokument, sozusagen von Null aus erstellen, doch ist das meiner Meinung nach nicht so effektiv, als wenn Sie eine fertige Seite als Vorlage speichern. Klicken Sie hierzu auf das Icon Neue Vorlage, worauf im Listenfeld eine neue Vorlage angezeigt wird. Durch Doppelklick auf diesen Eintrag bzw. Klick auf das Icon Bearbeiten öffnen Sie die neue Vorlage, um sie zu editieren. Mit diesen Funktionen sollten Sie ja schon von der Arbeit mit der Bibliothekspalette her vertraut sein.

Das leere Dokument im Vorlagenfenster unterscheidet sich äußerlich nicht von einer normalen Datei in der Dokumentansicht, nur stehen Ihnen im Vorlagenfenster ein paar weitere Funktionen zur Verfügung. Gestalten Sie die Vorlage zunächst wie jedes normale Dokument. Wenn Sie nun einen Bereich als bearbeitbar definieren möchten, gehen Sie in Menü Modifizieren > Vorlagen > Neuer bearbeitbarer Bereich und vergeben einen Namen für diesen Bereich. Dieser Name wird dann an der entsprechenden Stelle wie ein Etikett angezeigt. Den Text unter dieser Marke können Sie überschreiben. Beachten Sie, dass alles, was Sie in ein solches Feld eingeben, mit derselben Farbe wie editierbare Bereiche markiert wird. Sie können diese Markierung aufheben, wenn Sie den Bereich im Untermenü Vorlagen anhand seines Namens abwählen.

Ob Sie nun erst die komplette Seite erstellen und dann die editierbaren Bereiche bestimmen oder Zug um Zug arbeiten, einen Teil fertig stellen und dann editieren, liegt ganz bei Ihnen, doch sollten Sie gut vorausplanen. Wenn Sie zuerst die ganze Site erstellen und dann nachträglich versuchen, Sie an Ihre Vorlage anzupassen, dürfen Sie sich auf Überstunden einstellen. Eine klug geplante Website erspart Ihnen langfristig viel überflüssige Arbeit.

Hast du mal 'ne Vorlage?

Die Vorlage ist fertig, aber was tun wir nun damit? Am leichtesten lassen sich Vorlagen zum Einsatz bringen, wenn Sie über Datei > Neu von Vorlage ein Dokument gleich auf Basis einer Vorlage erstellen. Ein Dialogfenster zeigt Ihnen daraufhin alle zur Verfügung stehenden Vorlagen an, die Sie als Grundlage Ihrer neuen Seite verwenden können. Und wie wir es von einer Vorlage erwarten dürfen, können nur die editierbaren Bereiche überschrieben werden. Andere Bearbeiter können nun Inhalte in die Seite einstellen, ohne befürchten zu müssen, an der Datei oder am Layout etwas zu zerstören.

Eine andere Art mit Vorlagen zu arbeiten ist, ein Dokument mit einer Vorlage zu verbinden. Die Vorlage wird mit dem Dokument verknüpft und der Inhalt in eines der editierbaren Felder eingefügt. Verwenden Sie hierzu den Button Anwenden in der Vorlagenpalette.

Ähnlich wie Bibliothekselemente können Sie auch Vorlagen bearbeiten und aktualisieren und über Modifizieren > Vorlagen > Seiten aktualisieren auf alle Seiten anwenden, die auf dieser Vorlage basieren. Somit lassen sich eventuelle Layoutänderungen an Seiten, die dieselbe Formatvorlage verwenden, durch Anpassung einer einzigen Datei auf schnellstem Wege bewerkstelligen. Wenn das keine gute Nachricht ist!

Damit Bibliotheken und Vorlagen optimal eingesetzt werden können, ist es wichtig, dass sämtliche Mitarbeiter, die eine Site betreuen, deren Funktionsweise wirklich verstehen, bevor sie damit arbeiten. Verwendet man eine Vorlage wie ein gewöhnliches HTML-Dokument, ist es nicht mehr möglich, Dokumente zentral zu aktualisieren oder Inhalte zu kontrollieren.

Wenn Sie größere Veränderungen an einer Vorlagen-basierten Seite vornehmen möchten, ohne die Vorlage dabei zu zerstören, können Sie über Modifizieren > Vorlagen > Von Vorlage lösen das Dokument von seiner Vorlage trennen. Sie unterliegen dann nicht mehr den Einschränkungen der Vorlage, die Inhalte der Seite bleiben aber erhalten.

Wenn Sie eine Seite von ihrer Vorlage lösen, werden eventuelle Aktualisierungen an dieser Vorlage nicht mehr auf diese Seite übertragen.

5.6 Der Elemente-Manager

Wie Sie bei der Arbeit mit Vorlagen und Bibliotheken schon gesehen haben, enthält die Palette Elemente sämtliche Objekte die innerhalb einer Website zur Verfügung stehen. Wir haben uns vordringlich mit Vorlagen und Bibliotheken beschäftigt, weil das die komplexesten Themen sind. Doch stehen über den Elemente-Manager auch noch andere Objekte zu Verfügung. Öffnen Sie bitte die Palette Elemente. Am linken Palettenrand sehen Sie neun Icons. Jedes Icon steht für eine bestimmte Ressource, die Sie damit aufrufen können. Es handelt sich um die folgenden Objekte, von oben nach unten:

Wenn Sie einen bestimmten Objekttyp ausgewählt haben, können Sie die enthaltenen Elemente über diese Palette editieren oder einer Seite hinzufügen, wie wir das bei den Bibliothekselementen und Vorlagen schon gemacht haben. Sie können auch ausgewählte Objekte in eine andere Site kopieren. Öffnen Sie hierzu mit dem kleinen Pfeil rechts das Palettenmenü. So können Sie Elemente zwischen einzelnen Sites austauschen, ohne irgendwelche Dateien von Hand hin- und herkopieren zu müssen.

Verschiedene Ansichtsmodi im Elemente-Manager

Im Elemente-Manager haben Sie zwei Ansichtsmodi zur Auswahl: ganze Site und Favoriten. Standardmäßig werden alle Objekte einer Site angezeigt - auch solche, die eher im Weg sind. Um die Liste etwas kürzer zu halten und den Überblick zu bewahren, können Sie ein Element auswählen und es über das Palettenmenü oder durch Klick auf das Favoriten-Icon (ein Band mit einem Pluszeichen) der Favoritenliste hinzufügen. Sie können natürlich jederzeit zwischen den Ansichten umschalten, indem Sie das jeweilige Optionsfeld oben in der Palette anklicken.

5.7 UltraDev erweitern

UltraDev ist extrem ausbaufähig. Darauf einzugehen würde den Rahmen dieses Buches bei weitem sprengen, denn die Erweiterung von UltraDev wäre noch einmal Stoff für zwei oder drei Wochen. Das ganze Menüsystem ist editierbar, selbst geschriebene JavaScript- Verhaltensweisen lassen sich nahtlos in die Entwicklungsumgebung von UltraDev integrieren.

Nehmen wir zum Beispiel das Menü Befehle. Hier wurden schon einige externe Befehle integriert, wie z.B. HTML optimieren und Word-HTML optimieren. Diese Funktionen sind nicht Teil des genuinen Programmcodes, sondern liegen als Erweiterungsmodul vor.

Wenn Sie kein Programmierer sind und Ihre JavaScript-Verhaltensweisen nicht selbst schreiben wollen, stehen Ihnen zwei Wege offen, wie Sie UltraDev um zusätzliche Funktionen erweitern können: die Installation von vordefinierten Verhaltensweisen von Drittanbietern und die Speicherung von mehreren Arbeitsschritten in einem Makro.

Makros aufzeichnen

Die einfachste Art, UltraDev um selbst erstellte Funktionen zu erweitern, ist die Aufzeichnung von Bearbeitungsschritten als Makro, das sich immer wieder verwenden lässt. Leider können Sie während der Aufzeichnung Objekte nicht mit der Maus auswählen, sodass Sie im Wesentlichen auf Tastatureingaben und das Einfügen von Objekten beschränkt sind. Wenn Sie ein Makro aufzeichnen wollen, gehen Sie wie folgt vor:

  1. Führen Sie die Bearbeitungsschritte aus, die Sie aufzeichnen möchten: Text eingeben, Objekt einfügen usw.
  2. Öffnen Sie die Palette Verlauf und markieren Sie die Schritte, die Sie als Makro (von UltraDev als »Befehl« bezeichnet) speichern wollen.
  3. Wenn Sie die Befehlsfolge vor dem Speichern erst noch einmal abspielen wollen, um zu überprüfen, ob sie sich wie gewünscht verhält, klicken Sie auf den Button Wiedergabe oder wählen im Palettenmenü den Befehl Schritte wiederholen.
  4. Sind Sie mit dem Ergebnis zufrieden, können Sie es durch Klick auf das Disketten- Icon oder mit dem Befehl Als Befehl speichern im Palettenmenü speichern.
  5. Vergeben Sie einen Namen für Ihren neuen Befehl.
  6. Wenn Sie jetzt das Menü Befehle öffnen, sehen Sie, dass nun Ihr Makro dort aufgelistet wird.

Abb. 5.16 zeigt die Verlaufspalette, nachdem ein paar einfache Aktionen durchgeführt wurden. Diese Bearbeitungsschritte können nun als Befehl gespeichert werden.

Wenn Sie sehr oft Textbausteine oder Tabellen in ein Dokument einfügen müssen, können Sie solche wiederkehrenden Arbeitsschritte als Makro ablegen und müssen dann im Bedarfsfall nur noch das Makro abspielen.

Möchten Sie ein Makro löschen oder umbenennen, wählen Sie Befehle > Befehlsliste bearbeiten. Es öffnet sich das in Abb. 5.17 gezeigte Dialogfenster. Klicken Sie auf den entsprechenden Befehl im Listenfeld, um ihn neu zu benennen. Mit Klick auf die Schaltfläche Löschen wird das Makro gelöscht.

Abbildung 5.16:  Markieren Sie die Bearbeitungsschritte, die Sie als Befehl speichern möchten.

Abbildung 5.17:  Befehle löschen und umbenennen

Sie haben aber auch die Möglichkeit, eine Folge von Bearbeitungsschritten aufzuzeichnen und beliebig oft zu verwenden, ohne sie als Makro abzulegen, indem Sie sie als temporären Befehl speichern.

Temporäre Befehle aufzeichnen

Mit der Erstellung von temporären Befehlen zeichnen Sie eine Folge von Bearbeitungsschritten während einer UltraDev-Sitzung auf, die beliebig oft wiedergegeben werden kann, aber mit Beendigung dieser Sitzung wieder gelöscht wird. Um einen temporären Befehl zu erstellen, wählen Sie Befehle > Aufzeichnung starten. Sie arbeiten wie gewohnt mit dem Programm, während es Ihre Aktionen aufzeichnet. Auch hier gilt leider die Einschränkung, dass Sie während der Aufzeichnung keine Objekte mit der Maus auswählen können. Um die Aufzeichnung zu beenden, wählen Sie Befehle > Aufzeichnung stoppen.

Sobald ein temporärer Befehl gespeichert wurde, steht das Kommando Befehle > Aufgezeichneten Befehl abspielen zur Verfügung und Sie können die aufgezeichnete Sequenz beliebig oft wiedergeben.

Erweiterungsmodule für UltraDev herunterladen

Bevor Sie sich nun durch die Hilfe-Funktion von UltraDev pflügen und sich das Hirn darüber zermartern, wie Sie Ihre eigenen Erweiterungen schreiben, sollten Sie erst einmal auf der Website von Macromedia vorbeischauen und auskundschaften, was dort an fertigen Modulen bereits erhältlich ist. Über Befehle > Mehr Befehle kommen Sie direkt auf die Website von Macromedia. (Dazu müssen Sie natürlich online sein.) Ein Blick auf Abb. 5.18 dürfte keinen Zweifel aufkommen lassen, dass sich dort so manche nützliche Erweiterung finden lässt.

Abbildung 5.18:  Auf der Website von Macromedia finden Sie ein reiches Angebot an Erweiterungsmodulen.

Mit den folgenden vier Schritten installieren Sie ein Erweiterungsmodul (von Macromedia als »Package« bezeichnet):

  1. Klicken Sie auf das Modul, das Sie herunterladen möchten.
  2. Klicken Sie auf der Seite, die sich nun geöffnet hat, auf das Download-Icon für Ihr Betriebssystem (Mac oder Windows).
  3. Öffnen Sie den Ordner, in den das Erweiterungsmodul gespeichert wurde.
  4. Doppelklicken Sie auf das Modul.

Nachdem Sie doppelt auf das Modul geklickt haben, öffnet sich der Extension Manager (siehe Abb. 5.19) und installiert das Modul. Abschließend wird eine Meldung über die erfolgreiche Installation sowie den Funktionsumfang des Moduls angezeigt.

Abbildung 5.19:  Der Extension Manager verwaltet alle installierten Erweiterungsmodule.

Um ein Modul wieder zu entfernen, wählen Sie im Extension Manager den Befehl File > Remove Extension.

Es steht ein Unzahl an neuen Features zur Verfügung, um die Sie UltraDev erweitern können. Sie müssen nur auf der Website von Macromedia vorbeischauen und sich die passenden Module herunterladen. Bevor Sie also den Schluss ziehen, dass es doch etwas gibt, was UltraDev nicht kann, sollten Sie sich erst einmal alle erhältlichen Erweiterungen vornehmen. Diese Module gibt es übrigens umsonst!

Sie können UltraDev nicht nur durch diverse Module erweitern, sondern auch die Oberfläche nach Ihren Vorstellungen umgestalten. Im Anhang B, »Anpassen der UltraDev-Umgebung«, finden Sie die nötigen Informationen, wie Sie die Programmoberfläche so umstrukturieren, dass Sie damit Ihren persönlichen Workflow verbessern.

5.8 Zusammenfassung

Zu einer effizienten Entwicklung von Websites gehört auch die intelligente Wiederverwertung bereits erstellter Funktionen und Inhalte. Zu diesem Zweck hält UltraDev ein paar sehr nützliche Werkzeuge bereit.

Cascading Stylesheets sorgen für ein einheitliches Schriftbild innerhalb einer Site und garantieren eine weitgehend identische Darstellung über Browser- und Betriebssystemgrenzen hinweg. Darüber hinaus können Sie den Aufwand mit CSS- Dateien wesentlich kleiner halten als mit der üblichen HTML-Formatierung von Text. Entwickeln Sie für Browser, die keine CSS unterstützen, können Sie auf HTML-Stile ausweichen.

Vorlagen und Bibliotheken sind Features von UltraDev, die die Wiederverwendung bereits erstellter Elemente ermöglichen. Bibliotheken speichern häufig verwendete »HTML- Schnipsel«, die sich in jedes beliebige Dokument einfügen lassen, sodass bei Änderungen nur eine Datei aktualisiert werden muss. Vorlagen sorgen für ein einheitliches Erscheinungsbild aller Seiten, die auf dieser Vorlage basieren. Und auch hier muss im Falle einer Aktualisierung nur eine einzige Datei geändert werden.

Und schließlich ist UltraDev erweiterbar - durch Installation von Modulen, die Sie aus dem Internet herunterladen können oder durch Aufzeichnung eigener Makros. Ein paar Klicks und das Programm ist um neue, leistungsfähige Funktionen erweitert, die in der Standardinstallation fehlen.

5.9 Fragen und Antworten

Frage:
Soll ich ein zentrales Stylesheet verwenden oder die Stilinformationen in jedem Dokument gesondert speichern?

Antwort:
Das kommt ganz auf Ihre Anforderungen an. Ein zentrales Stylesheet empfiehlt sich vor allem für komplexe Websites. Wenn sich jedoch die Seiten im Layout stark unterscheiden, müssen Sie vielleicht das Stylesheet ständig anpassen, um sämtliche Stilvarianten abzudecken. In diesem Fall würde es sich empfehlen, bei Seiten, die im Layout abweichen, die Stildefinitionen direkt ins Dokument zu schreiben.

Frage:
Kann ich spezielle Effekte, wie z.B. Filter verwenden, auch wenn sie vom Netscape Navigator nicht unterstützt werden?

Antwort:
Ja, aber ich würde ein solches Vorgehen nicht empfehlen. Die Grundidee des Internet ist, eine offene Plattform zu sein, über die Dokumente unabhängig von Betriebsystemen oder Browsern ausgetauscht werden können. Websites nur für einen speziellen Browser zu entwickeln ist ziemlich kurzsichtig.

Frage:
Welche Elemente speichert man besten in einer Bibliothek?

Antwort:
Vor allem natürlich Menüs und Navigationsleisten, doch auch kleinere Elemente, die sich öfter ändern, wie z.B. Linklisten, E-Mail-Adressen oder regelmäßig wechselnde Grafiken. Wenn Sie bei Aktualisierungen nicht jedes Mal die ganze Site durchpflügen wollen, sollten Sie solche Objekte in Bibliotheken ablegen.

Frage:
Sind Vorlagen völlig sicher gegen Veränderungen?

Antwort:
Ganz und gar nicht. Sie können eine auf Vorlagen basierende Website nicht für verschiedene Bearbeiter zugänglich machen und die Dateien hundertprozentig gegen Veränderungen schützen, seien sie nun absichtlich oder nicht. Sie sollten daher sämtliche Mitarbeiter im effektiven Umgang mit UltraDev schulen, damit sie Sinn und Zweck solcher Vorlagen verstehen und dementsprechend damit umgehen.

5.10 Workshop

Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie im Anhang A, »Quiz-Antworten«.

Quiz

  1. Welches ist der Hauptverwendungszweck von CSS?
  2. Funktionieren sämtliche CSS-Attribute in sämtlichen Browsern und auf allen Plattformen?
  3. Wozu dient die Bibliothek?
  4. Wie machen Sie aus einem normalen HTML-Dokument eine Vorlage?
  5. Wie installieren Sie Erweiterungsmodule?

Übungen

  1. Öffnen Sie eine bereits bestehende Website und ersetzen Sie HTML-Formatierungen durch Stylesheets.
  2. Trainieren Sie die Verwendung von Bibliotheken und Vorlagen. Erzeugen Sie Vorlagen von bestehenden Webseiten und fügen Sie neuen Inhalte ein.
  3. Gehen Sie auf die Website von Macromedia und installieren Sie neue Erweiterungsmodule für UltraDev. Machen Sie sich mit dem Extension Manager vertraut und wie man damit Erweiterungen installiert.


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH