Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 17 Webdesign
  gp 17.1 Grundgedanken zum Webdesign
    gp 17.1.1 Bildschirmauflösung und Farbtiefe
    gp 17.1.2 Die technischen Fähigkeiten der Browser
  gp 17.2 Web-Bildbearbeitung mit Fireworks MX
    gp 17.2.1 Bilder optimiert für das Web speichern
    gp 17.2.2 Das passende Dateiformat wählen
    gp 17.2.3 Den Export des Bildes vorbereiten und durchführen
    gp 17.2.4 Animierte GIFs erstellen
    gp 17.2.5 Segmente und Verhalten
  gp 17.3 Webdesign mit Macromedia Dreamweaver MX
    gp 17.3.1 Bearbeiten von HTML-Dokumenten
    gp 17.3.2 Hinzufügen verschiedener Elemente
    gp 17.3.3 Website-Funktionen
    gp 17.3.4 Layers und Verhalten
  gp 17.4 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

17.3 Webdesign mit Macromedia Dreamweaver MX  downtop

Mit Hilfe von Dreamweaver können Sie Websites visuell gestalten. Sie legen also unmittelbar das Layout an und sehen im Editor im Wesentlichen dasselbe wie ein Benutzer im Browser. Wie bereits erläutert wurde, kann man beim Webdesign dennoch nur bedingt von WYSIWYG sprechen, weil die Gegebenheiten bei den einzelnen Anwendern der Website verschieden sind. Andererseits können Sie in Dreamweaver auch recht komfortabel HTML-Code editieren.

Zusätzlich verfügt Dreamweaver über einige Funktionen, um automatisch serverseitigen Code einzufügen – vor allem für den Zugriff auf Datenbanken. Diese Funktionen automatisieren einige Programmierschritte, die im nächsten Abschnitt besprochen werden.


Galileo Computing

17.3.1 Bearbeiten von HTML-Dokumenten  downtop

Per Voreinstellung erzeugt Dreamweaver klassische HTML-4.01-Dokumente. Wenn Sie lieber XHTML-Dokumente haben möchten, müssen Sie im Datei • Neu...-Dialog die Option Dokument XHTML-kompatibel machen auswählen.


Abbildung 17.3   Das Dokumentfenster in kombinierter Code- und Entwurfsansicht

Abbildung
Hier klicken, um das Bild zu Vergrößern


Unten links im Dokumentfenster (siehe Abbildung 17.3) wird die vollständige Verschachtelungshierarchie der HTML-Tags angezeigt, in der sich die aktuelle Auswahl befindet. Jedes übergeordnete Element – bis hin zu <body> – kann angeklickt und dadurch ausgewählt werden. Das ist besonders bei verschachtelten Tabellen eine bequeme Angelegenheit.

Voreingestellte Fenstergrößen

Rechts unten können Sie mehrere voreingestellte Fenstergrößen auswählen, die bequemerweise mit korrespondierenden Angaben der Bildschirmgrößen versehen sind, für die sie sich eignen. So können Sie schnell testen, für welche Umgebungen Ihr Layout geeignet ist. Daneben wird die Dateigröße und die zu erwartende Ladezeit des Dokuments inklusive Bildern angezeigt.


Abbildung 17.4   Die Dokument-Symbolleiste von Dreamweaver

Abbildung
Hier klicken, um das Bild zu Vergrößern


Eines der wichtigsten Bedienelemente sind die drei Buttons ganz links in der in Abbildung 17.4 gezeigten Dokument-Symbolleiste (Ansicht • Symbolleisten • Dokument). Damit können Sie zwischen der Codeansicht (nur HTML-Code), der Code- und Entwurfsansicht (beide Ansichten übereinander) und der Entwurfsansicht (nur Layout) hin- und herwechseln.

Kombinierte Code-/Entwurfsansicht

Beachten Sie beim Arbeiten in der kombinierten Code- und Entwurfsansicht lediglich Folgendes: Solange im Entwurfsbereich gearbeitet wird, aktualisiert sich der HTML-Code automatisch. Arbeiten Sie dagegen oben im HTML-Code, wird das Layout nicht automatisch aktualisiert, sondern erst dann, wenn Sie in der Eigenschaften-Leiste auf Aktualisieren klicken, (F5) drücken oder das Dokument speichern.


Abbildung 17.5   Die Eigenschaften-Leiste von Dreamweaver mit den Optionen für Text

Abbildung
Hier klicken, um das Bild zu Vergrößern


Wie in Fireworks ist die Eigenschaften-Leiste auch hier kontext-sensitiv: Je nach ausgewähltem Element (etwa Text, Tabellenelemente oder Bildern) werden verschiedene Bearbeitungsmöglichkeiten angeboten. Für Text gibt es beispielsweise die folgenden Bedienelemente (siehe Abbildung 17.5):

gp  Im Menü Format wird das aktuelle Absatz- beziehungsweise Bereichsformat eingestellt: Keine bedeutet, dass der Text ohne umschließendes absatzbildendes Element in seiner Umgebung steht. Absatz ist ein gewöhnlicher HTML-Absatz, das heißt ein <p>...</p>-Bereich. Überschrift 1 bis Überschrift 6 stehen für die wichtigste bis unwichtigste HTML-Überschrift. Vorformatiert schließlich setzt die Tags <pre> und </pre> um den aktuellen Bereich herum; jedes Leerzeichen und jeder Zeilenumbruch aus dem HTML-Code werden in der Browseransicht übernommen.
    Übrigens erzeugen Sie mit Hilfe der Taste (Enter) einen neuen Absatz, während (Shift) + (Enter) einen einfachen Zeilenumbruch bewirkt, also ein <br />.
       
    In der Entwurfsansicht wird nur ein Leerzeichen angenommen, außer im Modus »Vorformatiert«. Geschützte Leerzeichen (die Entity-Referenz &nbsp;) werden mit (STRG) + (Shift) + (Leertaste) (Windows) beziehungsweise (ALT) + (Leertaste) (Mac) erzeugt.
       
gp  Das A ist ein Button, der dem Umschalten in den CSS-Formatierungsmodus (und wieder zurück) dient. Die nachfolgenden Bedienelemente werden nur im HTML-Formatierungsmodus angezeigt; CSS-Formatierungen in Dreamweaver werden weiter unten erläutert.
gp  Als Nächstes kann aus einem Popup-Menü die gewünschte Schriftart ausgewählt werden. Neben der Voreinstellung Standardschrift (keine Angabe im HTML-Code) stehen die weiter oben im HTML-Abschnitt beschriebenen Listen zur Verfügung.
gp  Im Menü Größe können Sie die HTML-Schriftgrößen einstellen. Die Voreinstellung ist Keine, das heißt, im HTML-Dokument wird kein Wert angegeben. Ansonsten können absolute Angaben (1 bis 7) oder relative Werte (Verkleinerung um -7 bis -1 beziehungsweise Vergrößerung von +1 bis +7) ausgewählt werden.
gp  Im darauf folgenden Popup-Menü kann die Schriftfarbe ausgewählt werden. Die Voreinstellung ist keine spezielle Angabe; es wird die Standard-Schriftfarbe des Dokuments verwendet, die unter Modifizieren • Seiteneigenschaften eingestellt wird. Im Popup stehen zunächst die 216 Webfarben automatisch zur Verfügung. Ein Klick auf den Farbkreis rechts oben öffnet den Systemfarbwähler, um eine beliebige RGB-Farbe einzustellen. Mit Hilfe des durchgestrichenen Felds kehren Sie zur Dokument-Standardfarbe zurück.
gp  Die Buttons B und I setzen den Text fett beziehungsweise kursiv.
gp  Die nächsten vier Buttons ermöglichen die Auswahl der Absatzausrichtung (linksbündig, zentriert, rechtsbündig oder Blocksatz).

Erweiterte Textoptionen

In der zweiten Reihe stehen einige erweiterte Einstellungen zur Verfügung – auch dann, wenn Sie oben auf Stylesheet-Formatierung umgeschaltet haben.

gp  Unter Hyperlink können Sie das aktuell markierte Element (Text oder Bild) schnell und einfach zum Link machen. Die URL für den Link können Sie auf vier verschiedene Arten einstellen:
Tippen Sie die URL in das Textfeld ein. Wählen Sie eine bereits verwendete URL aus dem Popup-Menü aus. Ziehen Sie den rechts daneben liegenden Point-and-Shoot-Knopf auf das gewünschte Dokument in der Palette Dateien. Klicken Sie auf das Ordnersymbol und wählen Sie die Datei aus dem Dialog aus.
    Alternativ können Sie einen Hyperlink übrigens mit Hilfe des Ketten-Symbols erstellen, das sich ganz links auf der Registerkarte »Allgemein« der Einfügen-Palette befindet.
       
gp  Unter Ziel wird gegebenenfalls ausgewählt, wohin der Hyperlink die verknüpfte URL laden soll. Sie können entweder den Namen eines Frames eintragen oder eines der vier HTML-Standardziele auswählen.

Listen erstellen

Die nächsten vier Buttons ermöglichen das Erstellen einfacher oder auch verschachtelter Listen und Aufzählungen:

gp  Ungeordnete Liste erzeugt eine einfache Aufzählung.
gp  Geordnete Liste erstellt dagegen eine nummerierte Liste.
gp  Text-Negativeinzug rückt die Verschachtelung von Listen um eine Ebene nach links, das heißt nach oben in der Hierarchie.
gp  Texteinzug rückt die Listenverschachtelung dagegen um eine Ebene ein.

Die Listeneingabe mit Hilfe dieser Buttons funktioniert ganz einfach; Sie können folgendermaßen vorgehen:

1. Durch einen Klick auf »Ungeordnete Liste« beziehungsweise »Geordnete Liste« wird eine Liste des entsprechenden Typs angelegt. (Enter) erzeugt jeweils einen neuen Listeneintrag, das heißt ein neues <li>-Element.
       
2. Durch »Texteinzug« erzeugen Sie eine verschachtelte Liste; »Text-Negativeinzug« kehrt wieder zur übergeordneten Liste zurück.
       
3. Ein letzter Klick auf »Text-Negativeinzug« in der äußersten Liste verlässt die Aufzählungen und stellt wieder einen normalen Absatz her.
       
4. Die Listeneigenschaften können Sie einstellen, indem Sie die Eigenschaften-Leiste durch Klick auf den kleinen Pfeil ganz rechts unten erweitern und im unteren Bereich auf Listenelement klicken. Im erscheinenden Dialog finden Sie die verschiedenen Aufzählungs-Stile sowie – bei nummerierten Listen – die Anfangsposition.
       

Galileo Computing

17.3.2 Hinzufügen verschiedener Elemente  downtop

Mit Hilfe der Palette Einfügen können Sie alle Elemente erstellen, die auf Webseiten vorkommen können, beispielsweise Tabellen, Bilder oder DHTML-Layers. Die Palette verfügt über insgesamt zwölf Registerkarten für verschiedene Kategorien von Elementen und Objekten:

gp  Allgemein enthält einige der wichtigsten Objekte wie Bilder, Tabellen oder Hyperlinks.
gp  Layout ermöglicht das Einrichten so genannter Layout-Tabellen – es handelt sich um Tabellen, in denen Zellen frei im Dokument platziert und verschoben werden können.
gp  Text enthält einige wichtige Textelemente wie Überschriften oder Listen. Der erste Button auf der Registerkarte ist der Font-Tag-Editor, der das komfortable Einstellen der einzelnen Attribute des HTML-Tags <font> ermöglicht.
gp  Tabellen bietet Buttons zum Einfügen von Tabellen und ihren Bestandteilen in der Codeansicht.
gp  Frames besitzt eine Reihe von Schaltflächen zum Einfügen von Frames.
gp  Formulare ermöglicht das Erstellen von HTML-Formularen und ihren Elementen.
gp  Vorlagen bietet verschiedene Objekte für Vorlagenseiten. Diese sind aus fixen und veränderbaren Bereichen zusammengesetzt.
gp  Zeichen erlaubt den schnellen Zugriff auf einige der wichtigsten Entity-Referenzen für Sonderzeichen, die nicht auf der Tastatur vorkommen. Beachten Sie in diesem Zusammenhang, dass Zeichen wie deutsche Umlaute, einfache Anführungszeichen oder das Währungssymbol + ohnehin automatisch konvertiert werden.
gp  Medien enthält verschiedene Buttons zum Einfügen von Plug-in-Objekten wie Flash, Director-Shockwave oder Java-Applets. Die jeweiligen Optionen entsprechen denjenigen, die bereits weiter oben für HTML erläutert wurden.
gp  Head vereint die wichtigsten Arten von Meta-Tags und anderen Elementen, die sich im Head eines HTML-Dokuments befinden können. Sie können die Objekte des Heads nachträglich in der Eigenschaften-Leiste bearbeiten, wenn Sie Ansicht • Head-Inhalt aktivieren.
gp  Skript ermöglicht das Hinzufügen von JavaScript; diese Sprache wird in Kapitel 19 ausführlich behandelt. Abgesehen von dieser offiziellen Skript-Palette fügen viele Funktionen von Dreamweaver automatisch JavaScript hinzu.
gp  Anwendung schließlich bietet Zugriff auf einige automatisierte Funktionen serverseitiger Programmiersprachen wie PHP, ASP.NET oder ColdFusion. Vor allem die Verbindung mit Datenbanken und das Erzeugen von SQL-Abfragen wird erleichtert. Die serverseitige Webprogrammierung wird in Kapitel 18 vorgestellt.

Die wichtigsten Objekte befinden sich auf der Registerkarte »Allgemein«, die in Abbildung 17.6 zu sehen ist.


Abbildung 17.6   Die Palette »Einfügen« mit ihrer wichtigsten Registerkarte »Allgemein«

Abbildung
Hier klicken, um das Bild zu Vergrößern


Im Folgenden werden die wichtigsten Objekte dieser Registerkarte der Palette beschrieben. Die ersten drei erzeugen einen Hyperlink, einen E-Mail-Hyperlink sowie einen Anker für seiteninterne Hyperlinks.

Tabellen einfügen

Mit einem Klick auf den vierten Button der Allgemein-Registerkarte in der Einfügen-Palette rufen Sie den Tabellen-Dialog auf. Hier werden zunächst die grundlegenden Eigenschaften der Tabelle festgelegt, die natürlich später wieder geändert werden können. Sie entsprechen den weiter oben ausführlich beschriebenen HTML-Attributen des <table>-Tags.

Zelleigenschaften

Nachdem Sie die Eigenschaften der Tabelle eingestellt haben, können Sie durch Klick in die jeweilige Zelle deren Inhalt bearbeiten. Die Eigenschaften-Leiste enthält dabei im oberen Bereich die üblichen Textoptionen beziehungsweise andere Einstellungen, falls anderer Inhalt bearbeitet wird. In der unteren Hälfte befinden sich dagegen die Einstellmöglichkeiten für die Attribute der Zelle, die ebenfalls ihren HTML-Entsprechungen nachempfunden sind.

Links im unteren Bereich der Eigenschaften-Leiste befinden sich unter dem Begriff Zelle zwei Buttons für das Aufteilen einer Zelle in mehrere beziehungsweise das Vereinen mehrerer Zellen zu einer. Die rowspan- beziehungsweise colspan-Attribute der entsprechenden Zellen werden automatisch eingestellt.

Wenn Sie die Eigenschaften der gesamten Tabelle bearbeiten möchten, können Sie den Rand der Tabelle mit der Maus anklicken. Durch Ziehen der Anfasser am rechten Rand, am unteren Rand und an der rechten unteren Ecke der Tabelle kann die Höhe beziehungsweise Breite der Tabelle festgelegt werden. Die Buttons in der Eigenschaften-Leiste ermöglichen anschließend die Konvertierung der Größenangaben in Pixel beziehungsweise Prozent. Das Löschen dieser Werte beziehungsweise der Klick auf die entsprechenden Buttons entfernt die festgelegten Angaben wieder.

Bilder einfügen

In der Allgemein-Registerkarte folgt auf den Button zum Einfügen von Tabellen der Button Ebene zeichnen, der zum Aufziehen von DHTML-Layers verwendet werden kann. Diese Funktion wird weiter unten näher beschrieben.

Bilder und ihre Optionen

Mit Hilfe der nächsten drei Buttons werden auf verschiedene Weise Bilder eingesetzt. Ein Klick auf den Button Bild öffnet den Dialog Bildquelle auswählen. Dort kann ein Bild aus dem lokalen Dateisystem gewählt werden. Sinnvollerweise sollte das Bild natürlich im selben Ordner liegen wie das Dokument, wahlweise kann es auch in einem Unterordner oder zumindest innerhalb der Hauptordnerhierarchie der geplanten Website liegen. Eventuell müssen Sie es in einen dieser Ordner kopieren, bevor Sie es einbetten.

Nachdem ein Bild geladen ist, können Sie im oberen Teil der Eigenschaften-Leiste seine wichtigsten Eigenschaften einstellen, zum Beispiel die Breite oder Höhe des Bildes, einen Alternativtext und so weiter. Im unteren Bereich können Sie mit Hilfe intuitiv verständlicher grafischer Werkzeuge eine Image Map anlegen, indem Sie mit den entsprechenden Werkzeugen die drei Arten von Hotspots auf dem Bild aufziehen und ihnen anschließend Hyperlink-URLs und andere Eigenschaften zuweisen.

Der nächste Button fügt einen Bildplatzhalter ein. Dieser definiert einen leeren, benannten Anzeigeplatz für ein Bild. Geeignet sind solche Platzhalter für JavaScript-Funktionen, die automatisch wechselnde Bilder an einer solchen Position anzeigen können.

Fireworks HTML

Der nächste Button, Fireworks HTML, dient zur Einbindung einer automatisch von Fireworks erzeugten HTML-Datei an einer bestimmten Stelle im Dokument, die Segmente, Rollovers und andere Funktionen definiert. HTML-Dateien, die nicht in Fireworks erstellt wurden, werden als solche erkannt und zurückgewiesen.

Der Vorteil besteht darin, dass die umgebenden HTML-Elemente der Fireworks-Seite automatisch entfernt werden. Es wird lediglich der relevante Bild- und Funktionsinhalt übernommen.

Flash einbetten

Der Button Flash dient zum Einbetten einer komprimierten .swf-Datei, also einem für das Web optimierten Flash-Film und dem Einstellen seiner Eigenschaften. Diese Eigenschaften werden in Kapitel 20 genau erläutert.

Mit Hilfe des nächsten Buttons wird ein Rollover-Bild eingefügt. Im Gegensatz zum normalen Bild müssen zwei verschiedene Bild-URLs angegeben werden. Außerdem kann über Rollover-Bild vorausladen erzwungen werden, dass das Austauschbild bereits vor der ersten Mausberührung geladen wird; dies ist dringend zu empfehlen. Im Übrigen muss ein eindeutiger Name für das Bild eingegeben werden, weil die automatisch erzeugte JavaScript-Programmierung ihn zur Identifikation des Bildes verwendet.

Navigationsleisten erstellen

Der Button Navigationsleiste baut automatisch eine Leiste aus mehreren Rollover-Bildern mit Hyperlink-Funktion auf. Sie benötigen für jeden Menüpunkt mindestens zwei Bilder (besser drei oder vier), um die vier Zustände Up-Bild (Bild wird nicht berührt), Over-Bild (Mauszeiger berührt das Bild), Down-Bild (Maustaste gedrückt) und eventuell auch noch das Over bei Down-Bild (mit bereits gedrückter Maustaste berühren) zu definieren. Der erste Menüpunkt ist beim Aufruf des Dialogs bereits eingetragen, allerdings sollten Sie seinen Namen dem Verwendungszweck anpassen. Weitere Menüpunkte werden mit Hilfe des Plus-Buttons oben links hinzugefügt, entfernt werden Punkte mit dem daneben liegenden Minus-Knopf. Rechts daneben liegen zwei Schaltflächen, um den ausgewählten Menüpunkt weiter nach vorn beziehungsweise nach hinten im Menü zu verschieben.

Unter dem Punkt Wenn angeklickt, gehe zu URL wird die URL angegeben, zu der der Link führen soll; die Auswahl unter in ermöglicht die Definition des Frames oder Fensters, in das der Link geladen werden soll.

Zu guter Letzt können Sie ganz unten unter Einfügen die grundsätzliche Aufbaurichtung der Menüleiste wählen (horizontal oder vertikal). Beachten Sie, dass diese Entscheidung endgültig ist, sie kann im Nachhinein nicht mehr geändert werden. Alle anderen Aspekte der Navigationsleiste können Sie später mittels Modifizieren • Navigationsleiste ändern.

Das nächste Element in der Allgemein-Registerkarte ist eine Trennlinie, deren Optionen bereits im HTML-Abschnitt erläutert wurden.

Der Button Datum fügt das aktuelle Datum und/oder die Uhrzeit in einem wählbaren Format ein. Die Option Beim Speichern automatisch aktualisieren sorgt dafür, dass bei jedem Speichern des Dokuments die aktuellen Werte eingetragen werden. Dies ist besonders nützlich für »Zuletzt geändert«-Angaben.

Die Schaltfläche Tabellendaten importiert eine beliebige Textdatei und formatiert ihren Inhalt als Tabelle. Die Zellen werden an einem frei wählbaren Trennzeichen unterteilt, die Zeilen orientieren sich jeweils an Zeilenumbrüchen.

Mittels Kommentar können Sie einen HTML-Kommentar einfügen.

Der letzte Button auf der Registerkarte ist die Tag-Auswahl. Sie bietet Anwendern, die mit HTML vertraut sind, die Möglichkeit, HTML-Tags anhand ihres Namens auszuwählen und einzufügen, wobei die verschiedenen Attributwerte im Dialog erfragt werden. Unter Tag-Info werden dieselben Informationen über HTML-Tags angeboten wie in der Referenz-Palette, die in Zusammenarbeit mit O'Reilly&Associates erstellt wurde.

Neben HTML sind hier auch Tags und Befehle anderer Sprachen übersichtlich angeordnet, insbesondere für serverseitige Skriptsprachen wie ASP-NET, JSP, ColdFusion und PHP.

Arbeiten in der Layoutansicht

Mit Hilfe der Registerkarte Layout in der Einfügen-Palette können Sie zwischen zwei Dokument-Ansichten umschalten, der Standardansicht und der Layoutansicht. In der Layoutansicht können mit Hilfe der beiden entsprechenden Buttons spezielle flexible Tabellen und Zellen erzeugt werden, die Layouttabellen und Layoutzellen. Nach einem Klick auf die jeweilige Schaltfläche können Sie das Element an einer beliebigen Stelle im Dokument aufziehen Die Layoutzellen sind innerhalb der Layouttabelle frei verschieb- und skalierbar. Nach dem Zurückschalten in die Standardansicht wird die Layouttabelle zu einer (manchmal ziemlich komplexen) normalen Tabelle, kann aber durch erneutes Umschalten in die Layoutansicht wieder bequem bearbeitet werden.

In der oberen Leiste der Layouttabelle steht für die einzelnen Spalten in »Optionen« ein Popup-Menü zur Verfügung: Um die Breite einer Spalte unverrückbar festzulegen, können Sie Platzhalterbild hinzufügen auswählen. Die Option Spalte automatisch strecken entfernt dagegen die feste Breitenangabe einer Spalte, sodass sich ihre Breite automatisch aus der Tabellenbreite und der Breite des Browserfensters ergibt.

Um die Eigenschaften einer bestimmten Layoutzelle oder der gesamten Layouttabelle in der Eigenschaften-Leiste zu editieren, müssen Sie sie an ihrem Rand anklicken, um sie zu markieren. Die wichtigsten Einstellungen sind die Hintergrundfarben der Tabelle und der Zellen sowie die Zellauffüllung (der Innenabstand) und der Zellraum (Außenabstand) für die Tabelle.

Formulare

HTML-Formulare werden in Dreamweaver mit Hilfe der Registerkarte Formulare in der Einfügen-Palette erstellt. Tabelle 17.1 zeigt eine kurze Übersicht aller angebotenen Formularelemente in ihrer Reihenfolge; die Optionen wurden bereits im HTML-Abschnitt genau erläutert.


Tabelle 17.1   Die Formularfunktionen in Dreamweaver

Element Erläuterungen
Formular Umschließt alle Elemente, deren Inhalt gemeinsam versandt werden soll. Dreamweaver zeichnet in der Entwurfsansicht einen gestrichelten Rahmen, um den Formularbereich zu kennzeichnen.
Textfeld In der Eigenschaften-Leiste kann zwischen Einzeilig, Mehrzeilig und Kennwort gewählt werden, um die verschiedenen Arten von Textfeldern zu erstellen.
Verstecktes Feld Automatisches Feld mit festgelegtem Namen und Wert für eigene Konfigurationsinformationen.
Textbereich Schneller Zugriff auf ein mehrzeiliges Textfeld; auch hier kann wieder auf die beiden anderen Arten von Textfeldern umgeschaltet werden.
Kontrollkästchen Erzeugt eine Checkbox; aus einer Gruppe können beliebig viele angekreuzt werden.
Optionsschalter Erstellt einen Radiobutton. Wichtig ist der gemeinsame Name für alle Buttons einer Gruppe.
Optionsgruppe Bietet die Möglichkeit, auf komfortable Weise eine Gruppe von Radiobuttons anzulegen.
Liste/Menü Mit dieser Funktion können Sie ein Select-Menü einrichten, entweder als Popup-Menü oder als mehrzeilige Liste.
Sprungmenü Richtet ein Select-Menü mit Hilfe automatisch erstellter JavaScript-Funktionen als Liste von Hyperlinks ein.
Bildfeld Ermöglicht das Einbetten eines Bildes als angepassten Absendeknopf.
Dateifeld Stellt ein Auswahlfeld für eine Datei zum Upload zur Verfügung.
Schaltfläche Gemeinsame Funktion für das Einrichten von Absendeknöpfen, Zurücksetzen-Buttons und allgemeinen Buttons. Letztere können für den Aufruf von JavaScript-Funktionen verwendet werden.
Beschriftung Erzeugt das Tag <label> ... </label>, das statt einfachem Text zum Beschriften von Radiobuttons oder Checkboxen verwendet werden kann, aber keinen besonderen Effekt hat.
Feldgruppe Erstellt das HTML-Element <fieldset> ... </fieldset>, eine beschriftete Umrandung für eine Gruppe von Formularelementen.

Näheres über die Funktionsweise und die Eigenschaften von Formularen und ihren Elementen finden Sie in Kapitel 16, HTML und XHTML.

Mit Frames arbeiten

Auf der Registerkarte Frames der Einfügen-Palette finden Sie verschiedene Buttons, um zu der existierenden Datei ein Frame hinzuzufügen. Der cyanfarbene Bereich repräsentiert dabei das aktuelle Dokument; die weißen Bereiche werden als neue Frames hinzugefügt.

Frameset-Dateien

Beachten Sie, dass beim Hinzufügen eines Frames zu einer Einzeldatei, die noch keine Frames enthält, zwei neue Dateien erzeugt werden: die Datei, die in das neue Frame hineingeladen wird, sowie die Frameset-Definitionsdatei. Aus diesem Grund stehen im Menü Datei anschließend die komfortablen neuen Funktionen Frameset speichern (unter...) beziehungsweise Frame speichern (unter...) zur Verfügung.

Das Einstellen der Frameset- und Frame-Eigenschaften ist ein wenig unübersichtlich verteilt: Wenn Sie den Rand des Framesets im Dokumentfenster anklicken, stehen in der Eigenschaften-Palette die Optionen für das Frameset zur Verfügung. Ganz rechts in der Eigenschaften-Leiste befindet sich ein Frame-Wähler. Wenn Sie darin eines der Frames anklicken, können Sie diejenigen Eigenschaften dieses Frames einstellen, die im <frameset>-Tag definiert werden, insbesondere seine Breite und Höhe.

Frame-Eigenschaften

Wenn Sie dagegen die Eigenschaften eines Frames selbst einstellen möchten, beispielsweise seinen Namen oder die Möglichkeit zur nachträglichen Größenänderung, können Sie mit gedrückter (ALT)-Taste in das entsprechende Frame klicken. Alternativ können Sie die Palette Frames zu Hilfe nehmen, die über Fenster • Andere • Frames beziehungsweise (Shift) + (F2) aufgerufen wird. Hier können Sie in die symbolische Darstellung der einzelnen Frames hineinklicken, um ihre Optionen einzustellen. Um wieder das Frameset zu bearbeiten, können Sie auch in dieser Palette auf seinen Rand klicken.


Galileo Computing

17.3.3 Website-Funktionen  downtop

Mit Hilfe der Site-Verwaltung können Sie einzelne Dokumente zu einer kompletten Website verbinden. Dreamweaver sorgt dafür, dass sie im gleichen Ordner zusammengehalten werden und ermöglicht die automatische Verbindung mit einer Online-Version der Site.

Sites definieren

Als Erstes wird mittels Site • Neue Site... eine neue Website definiert. Unter der Registerkarte Grundeinstellungen können Sie einen Schritt-für-Schritt-Assistenten verwenden, der nacheinander die folgenden Optionen erfragt:

gp  Den Namen der Website.
gp  Wird serverseitige Programmierung (ASP.NET, JSP, PHP und so weiter) verwendet? Wenn ja, welche Sprache?
gp  Sollen die Dateien der Site während der Bearbeitung auf dem lokalen Rechner, auf einem Server im lokalen Netzwerk oder auf dem Server des Providers liegen? Üblicherweise wird hier der lokale Rechner gewählt. Zusätzlich muss das Verzeichnis angegeben werden, in dem die Site gespeichert werden soll.
    Im Übrigen wird hier der lokale Ordner gewählt, in dem die Dateien der Site gespeichert werden. Falls dieser Ordner bereits Dokumente enthält, werden diese in der Site-Ansicht angezeigt.
       
gp  Wie soll die Verbindung zum entfernten Server hergestellt werden? Die häufigste Wahl, die von den meisten Providern unterstützt wird, ist FTP. Falls Sie eine Verbindung wählen, müssen Sie an dieser Stelle die genauen Zugangsdaten eingeben, die Sie von Ihrem Webhoster erfahren haben sollten.
gp  Wenn im vorigen Schritt eine Verbindung eingerichtet wurde, können Sie nun auf Wunsch das Auschecken aktivieren. Dies verhindert bei einer Website, die von mehreren Personen bearbeitet wird, dass dasselbe Dokument gleichzeitig an zwei Stellen modifiziert wird.
gp  Zum Schluss wird eine Zusammenfassung angezeigt. Wenn alles in Ordnung ist, können Sie auf Fertig klicken.

Auf der Registerkarte Erweitert können Sie dagegen alle Einstellungen in beliebiger Reihenfolge und mit erheblich mehr Optionen vornehmen.

Site-Verwaltung

Nachdem die Site definiert ist, erscheint in der Palette Site (Fenster • Site oder (F8)) ein Ordner mit dem Namen der Site, den Sie aufklappen können, um die Dateien der Site zu bearbeiten oder neu zu erstellen. Im separaten Menü Ansicht dieser Palette können Sie von Site-Dateien auf Sitemap umschalten, dazu muss zunächst eine Datei als Homepage ausgewählt werden: Klicken Sie die Datei mit der rechten Maustaste an (auf dem Mac (CTRL) + Klick) und wählen Sie Als Homepage festlegen aus.

Die Sitemap zeigt eine Baumansicht aller Link-Beziehungen der Website an. Die Wurzel dieses Baums bildet die soeben angelegte Homepage. Im Ansicht-Menü der Palette können Sie optional Seitentitel anzeigen einblenden, um statt der Dateinamen die Titel zu sehen.

In beiden Ansichten kann jede Datei per Doppelklick zum Bearbeiten geöffnet werden; ansonsten funktionieren auch Verschieben, Löschen oder Umbenennen ähnlich wie in der Dateiverwaltung des Betriebssystems.

Elemente und Bibliothek

Eine interessante Funktion übernimmt die Palette Elemente (Fenster • Elemente oder (F11)) in Dreamweaver: Sie enthält in verschiedenen Kategorien alle Objekte, die innerhalb des Site-Ordners liegen beziehungsweise bereits auf der Site verwendet wurden. Im Einzelnen handelt es sich um Bilder, um die bereits verwendeten Farben, alle externen URLs, Flash-Filme, Shockwave-Filme, Video-Filme, Skripte (verwendete JavaScript-Elemente) und Vorlagen. Von jedem angeklickten Element wird eine Vorschau gezeigt; per Drag and Drop kann es an einer bestimmten Stelle auf einer Seite verwendet werden.

Die Bibliothek

Besonders interessant ist die unterste Kategorie, die so genannte Bibliothek: Hierhin können Sie beliebige Auswahlen aus einem Dokument ziehen und mit einem Namen versehen. Diese benannten Elemente können Sie wiederum an eine beliebige Stelle in Dokumenten ziehen, um sie anzuwenden. Wenn Sie ein Bibliothekselement doppelklicken, können Sie es nachträglich bearbeiten – es ist eine separate Datei mit der Endung .lbi (für »Library Item«). Wenn Sie es speichern, werden alle Stellen aktualisiert, an denen Sie es verwendet haben.

Arbeiten mit Vorlagen

Eine Vorlage ist ein spezielles Dokument mit der Dateiendung .dwt (»Dreamweaver Template«), das eine Mischung aus festgelegten und austauschbaren Bereichen enthält. In einer Vorlage werden bearbeitbare Bereiche angelegt, in denen sich auf jeder Seite anderer Inhalt befinden kann. Werden die Inhalte der Vorlage außerhalb der bearbeitbaren Bereiche nachträglich geändert, dann werden diese auch auf den Seiten, die diese Vorlage verwenden, automatisch aktualisiert, natürlich mit Sicherheitsabfrage.

Hinter den Kulissen realisiert Dreamweaver die Verwendung der Vorlage auf den Einzelseiten durch HTML-Kommentare, die die bearbeitbaren Bereiche von den festgelegten abgrenzen. Sie können sowohl in der Entwurfs- als auch in der Codeansicht nur innerhalb der bearbeitbaren Bereiche arbeiten.

Vorlagen definieren

Eine Vorlage wird folgendermaßen definiert:

1. Sie sollten bereits eine Site definiert und ausgewählt haben – Vorlagen werden immer pro Site angelegt und in dem speziellen Ordner Templates im Site-Ordner abgespeichert.
       
2. Wählen Sie Datei • Neu…
       
    Die passende Kategorie ist Einfache Seite, als Seitentyp müssen Sie rechts HTML-Vorlage auswählen.
       
3. Erstellen Sie nun alle Inhalte, die auf jeder Seite gleich aussehen sollen, direkt auf der Vorlagen-Seite.
       
4. Auf der Registerkarte Vorlagen der Einfügen-Leiste können Sie nun verschiedene Optionen für Austauschbereiche finden. Die wichtigste ist ein einfacher Bearbeitbarer Bereich, den Sie mit Klick auf den dritten Button in der Leiste an der aktuellen Position auf der Seite einfügen. Anschließend muss ein Name für diesen Bereich festgelegt werden.
       
    Wenn Sie auf jeder Einzelseite selbst bestimmen möchten, wie die Inhalte des bearbeitbaren Bereichs formatiert werden sollen, dürfen Sie nun keinerlei Formatierung am Inhalt dieses Bereichs vornehmen. Sobald Sie ein Absatzformat wie Absatz oder Überschrift 1 und so weiter anlegen, bleiben Sie in diesem einen Absatz gefangen; bei der Verwendung von Schriftformatierung sind Sie sogar noch weiter eingeschränkt.
       
5. Zu guter Letzt können Sie nun die Vorlage speichern. Für eine Site können beliebig viele Vorlagen angelegt werden.
       

Nun können Sie eine Seite erstellen, die von einer Vorlage abhängt: Wählen Sie wieder Datei • Neu... und wechseln Sie in dem Dialog auf die Registerkarte Vorlagen. Wählen Sie hier die passende Vorlage aus und drücken Sie (OK).

Mit HTML-Stilen arbeiten

HTML-Stile sind eine angenehme Art und Weise, verschiedene HTML-Schrift- und Absatzformatierungen dauerhaft abzuspeichern und einfach anzuwenden.

Sie werden in der Palette HTML-Stile (Fenster • HTML-Stile) angelegt und verwaltet; gespeichert werden sie mit dem Programm, nicht mit der einzelnen Seite oder Site, sodass sie über beliebig viele Dokumente hinweg zur Verfügung stehen.

Um einen neuen Stil anzulegen, klicken Sie auf den Plus-Button rechts unten in der Palette, oder wählen Sie Neu... aus dem Popup-Menü rechts oben in der Palette. Es erscheint ein Dialog, in dem die folgenden Einstellungen für einen Stil vorgenommen werden können:

gp  Name: Geben Sie hier einen sinnvollen, beschreibenden Namen für den Stil ein.
gp  Anwenden auf: Hier können Sie zwischen einem Absatz- und einem Auswahl-Stil wählen; Letzterer wird auf beliebige ausgewählte Zeichen angewandt.
gp  Beim Anwenden: Wenn Sie hier Zu vorhandenem Stil hinzufügen auswählen, bleiben alle Einstellungen, die in diesem Stil nicht explizit vorgenommen werden, so, wie sie vor der Anwendung dieses Stils waren. Vorhandenen Stil löschen setzt dagegen vor der Anwendung sämtliche Einstellungen des Textes, auf den der Stil angewendet wird, auf neutral zurück: Nur, was in diesem Stil individuell eingestellt wurde, steht überhaupt als besondere Einstellung im späteren HTML-Code.
    Angenommen, Sie legen zum Beispiel einen Auswahl-Stil namens nurfett an, der als einzige konkrete Einstellung ein B (fett) definiert. Bei diesem Stil wird Vorhandenen Stil löschen angekreuzt. Der Stil auchfett erhält ebenfalls nur ein B, aber die Einstellung Zu vorhandenem Stil hinzufügen. In der Liste ist diese Besonderheit von auchfett am kleinen Pluszeichen hinter der Stilart (¶ für Absatz, a für Auswahl) zu erkennen.
       
    Wenn Sie nun den Stil nurfett auf Zeichen anwenden, verlieren diese sämtliche individuellen Einstellungen (Schriftart, -größe, -farbe und so weiter) und werden nur noch fett dargestellt, wohingegen eine Anwendung von auchfett den Text zusätzlich zu seinen sonstigen Besonderheiten fett setzt.
       
gp  Unter Schriftattribute werden Einstellungen für die Schriftart, Schriftgröße, Farbe, fett und kursiv vorgenommen sowie Andere... für weitere Zeichenattribute.
gp  Absatzattribute sind nur bei Absatzformaten aktiv und bestimmen die Optionen für die Absatzformatierung.

Sie können HTML-Stile nachträglich ändern, indem Sie Bearbeiten aus dem Popup-Menü der Palette auswählen. Beachten Sie, dass sich die Stellen, an denen der Stil angewandt wurde, dadurch nicht automatisch ändern – es wird keine dauerhafte Verknüpfung zwischen den definierten HTML-Stilen und dem Dokument erzeugt. Für eine solche Beziehung sind nur CSS-Stile geeignet.

CSS-Stile

Die Einrichtung und Verwendung von Stylesheets funktioniert in Dreamweaver recht einfach. Zuständig ist die Palette CSS-Stile, die über Fenster • CSS-Stile oder (Shift) + (F11) aufgerufen wird.

Ganz unten in dieser Palette können Sie mit dem zweiten Button von links, Neuer CSS-Stil, eine Stylesheet-Formatierung einrichten. Es erscheint ein Dialog, in dem Sie verschiedene Einstellungen vornehmen können:

gp  Als Erstes wird der Typ des Stylesheets festgelegt: Ein benutzerdefinierter Stil oder eine Klasse wird in der Liste der CSS-Palette erscheinen und kann einem Absatz oder ausgewählten Zeichen einzeln zugewiesen werden. Beachten Sie, dass der Name der Klasse mit einem Punkt beginnen muss, zum Beispiel kann er .test lauten.
    HTML-Tag neu definieren legt das grundsätzliche Aussehen für ein bestimmtes HTML-Tag fest, das Sie aus der Liste auswählen können. Spätestens hier haben Sie es auch in Dreamweaver mit den Original-HTML-Namen der Tags zu tun – um Stylesheets zu verwenden, müssen Sie also beispielsweise wissen, dass p ein Absatz oder h1 eine Hauptüberschrift ist. Die Tag-Definitionen erscheinen später nicht in der CSS-Palette, weil sie den entsprechenden Tags ohnehin automatisch zugewiesen werden.
       
    CSS-Selektor verwenden bietet schließlich den Zugriff auf die vier Zustände von Hyperlinks, die weiter oben im CSS-Abschnitt besprochen wurden.
       
gp  Unter Definieren in wird festgelegt, ob die CSS-Formate in einer externen Datei oder innerhalb der lokalen Datei gespeichert werden sollen. Wenn Sie sich das erste Mal für eine externe Datei entscheiden, müssen Sie sie im nächsten Schritt speichern. Beim nächsten CSS-Stil, den Sie anlegen, steht diese Datei dann automatisch zur Auswahl.
    Wenn Sie später eine neue Seite erstellen, können Sie auf die externe Stylesheet-Datei zugreifen, indem Sie den Button ganz links unten in der CSS-Palette, Stylesheet anfügen, auswählen. Im entsprechenden Dialog könenn Sie zwischen Verknüpfung und Import wählen. Letzterer bindet die externe CSS-Datei nicht per <link>-Tag ein, sondern übernimmt ihren Datenbestand in die Seite selbst. Das bedeutet allerdings, dass sich die CSS-Formate auf dieser Seite nicht mehr automatisch mit der externen Datei ändern.
       

Die eigentlichen Stile definieren

Nachdem Sie festgelegt haben, was für ein Stylesheet Sie definieren möchten, gelangen Sie in einen umfangreichen Dialog, in dem die einzelnen Formatierungen vorgenommen werden. Links finden Sie verschiedene Kategorien, rechts die konkreten Einstellungen. Im Großen und Ganzen sind die Optionen selbsterklärend. Beachten Sie aber bitte, dass Dreamweaver manche Einstellungen, die er anbietet, selbst nicht anzeigen kann. Beispielsweise sehen Sie erst im Browser den ausgewählten Stil von Rahmenlinien; Dreamweaver zeigt immer durchgezogene Linien an.

Wie bereits erwähnt werden Tag- und Selektor-Definitionen den Elementen automatisch zugewiesen. Um einem Absatz einen speziellen Stil zuzuweisen, klicken Sie die gewünschte Klasse einfach in der CSS-Palette an. Dasselbe gilt für markierten Text, der bei Zuweisung einer CSS-Klasse automatisch mit <span> ... </span> umschlossen wird.

Wenn Sie CSS-Definitionen ändern möchten, müssen Sie Stylesheet bearbeiten aus dem Paletten-Popup auswählen. Es öffnet sich ein Dialog, in dem Sie die internen Stylesheets oder die verknüpfte CSS-Datei zum Bearbeiten auswählen können.


Galileo Computing

17.3.4 Layers und Verhalten  toptop

Dreamweaver ist in der Lage, automatisch Dynamic HTML (eine Kombination aus JavaScript und CSS) für bestimmte grundlegende Verhaltensweisen zu schreiben. Grundlage dieser Funktionen sind vor allem die Layers (DHTML-Ebenen), die durch <div>-Tags mit einer einmaligen, eindeutigen Bezeichnung gebildet werden.

In Kapitel 19 lernen Sie, solche Skripte von Hand zu schreiben – unter anderem werden Sie bemerken, wie schwierig es ist, den unterschiedlichen Browserversionen gerecht zu werden. Glücklicherweise bemerkt ein automatisch erzeugtes Dreamweaver-Skript selbst, in welchem Browser es gerade läuft, und verhält sich entsprechend.

Einen Layer erzeugen

Klicken Sie auf den fünften Button in der Einfügen-Palette, Registerkarte Allgemein und ziehen Sie an der gewünschten Stelle im Dokument einen Rahmen auf. Diese Funktion erzeugt ein unabhängig über die CSS-Eigenschaften position, top und left positioniertes <div>-Objekt. In der Entwurfsansicht wird es in zwei separaten Teilen angezeigt: Ein kleines gelbes Anker-Element zeigt an, wo die Definition der Ebene im HTML-Code steht; ein Rahmen stellt die Ebene selbst dar. Ein Klick auf das Anker-Element oder das kleine Quadrat links oben über dem Ebenenrand ermöglicht das Einstellen der Layer-Optionen in der Eigenschaften-Leiste. An Letzterem können Sie den Layer auch ziehen, um seine Position zu ändern.

Layer-Eigenschaften

Geben Sie dort als Ebenen-ID einen eindeutigen Namen ein. Die anderen wichtigen Einstellungen sind Position, Größe, Z-Index (Stapelreihenfolge) und Sichtbarkeit (Sie können eine Ebene über »Verhalten« ein- und ausblenden).

Verhalten verwenden

Verhalten sind automatisch erstellte JavaScript-Anweisungen, die bestimmte dynamische Veränderungen durchführen. Sie werden in der gleichnamigen Palette (Fenster • Verhalten oder (Shift) + (F3)) zugewiesen.

Wenn beim Erstellen eines Verhaltens nichts ausgewählt ist, wird ein automatisch auszuführendes Body-Verhalten erstellt. Ansonsten können Sie einen Link auswählen, wodurch ein Verhalten erzeugt wird, das auf eine Mausaktion am Hyperlink (Anklicken, Darüberrollen und so weiter) reagiert. Schließlich können Sie auch noch einem Formularelement ein Verhalten zuweisen.

Mit dem Plus-Button in der Verhaltens-Palette kann ein neues Verhalten für die aktuelle Auswahl erstellt werden. Wichtige Verhalten sind zum Beispiel folgende:

gp  Ebenen ein-/ausblenden: Ein durch seinen (in der Liste auswählbaren) Namen gekennzeichneter Layer kann ein- beziehungsweise ausgeblendet werden.
gp  Ebene ziehen: Ein ausgewählter Layer kann mit gedrückter Maustaste gezogen werden.
gp  Zeitleiste: eine Aktion auf der Zeitleiste (siehe unten) starten.
gp  Gehe zu URL: durch das gewählte Ereignis zu einer bestimmten URL springen.
gp  Browserfenster öffnen: ein neues, angepasstes Fenster mit einstellbaren Eigenschaften öffnen.
gp  Text definieren: Sie können den Text eines Layers oder in der Statusleiste des Browserfensters dynamisch ändern.
gp  JavaScript aufrufen: Eine selbst definierte JavaScript-Funktion wird aufgerufen. Wie Sie solche Funktionen schreiben können, erfahren Sie in Kapitel 19, JavaScript.

Ereignisse definieren

Nach Auswahl eines Verhaltens und Einstellung seiner Eigenschaften in einem jeweils speziellen Dialog müssen Sie in der Verhaltens-Palette in der Zeile des neuen Verhaltens das Popup-Menü öffnen, um zu wählen, von welchen Ereignissen dieses Verhalten abhängen soll.

Bei Body-Verhalten stehen beispielsweise folgende Ereignisse zur Verfügung:

gp  onLoad: Die Seite wird gerade geladen.
gp  onUnload: Die Seite wird gerade verlassen.

Bei Links können Sie zum Beispiel diese Ereignisse wählen:

gp  onMouseOver: Der Mauszeiger hat soeben den Link berührt.
gp  onMouseOut: Der Mauszeiger hat den Link wieder verlassen.
gp  onClick: Die Maustaste wurde gerade gedrückt.

Für Formularelemente (vor allem Textfelder) sind etwa folgende Ereignisse abrufbar:

gp  onFocus: Das Element wurde gerade aktiviert, zum Beispiel durch (TAB) oder Mausklick.
gp  onBlur: Das Element wurde gerade verlassen, weil ein anderes aktiviert wurde.

Mit der Zeitleiste arbeiten

Die Zeitleiste bietet die Möglichkeit, eine zeitlich definierte Abfolge von Verhalten zu definieren, beispielsweise kann ein Layer animiert werden. Sie öffnen die Zeitleiste über Fenster • Andere • Zeitleisten oder (ALT) + (F9). Sie sieht fast so aus wie das Drehbuch in Director (Kapitel 10, Multimedia).

Mehrere Zeitleisten

Falls mehrere unabhängige zeitgesteuerte Verhaltensweisen auftreten sollen, müssen Sie Zeitleiste hinzufügen aus dem Optionen-Popup rechts oben in der Palette auswählen, um eine weitere Zeitleiste einzurichten – alle auf einer Zeitleiste definierten Ereignisse finden auf jeden Fall gleichzeitig statt. Links oben befindet sich ein Popup-Menü, mit dem Sie zwischen den verschiedenen einzelnen Zeitleisten wechseln können.

Mit Objekt hinzufügen aus dem Optionen-Popup wird der aktuell angeklickte Layer aus der Palette Ebenen (Fenster • Andere • Ebenen oder (F2)) in die Zeitleiste gesetzt.

Der Balken bestimmt Anfangszeitpunkt und Endzeitpunkt des Layers. Mit Schleife läuft die Zeitleiste in einer Schleife ab. Auto-Wdg. fügt ein onLoad-Verhalten zum Body hinzu, um diese Zeitleiste sofort nach dem Laden der Seite abzuspielen. Wenn Sie die Zeitleiste manuell starten möchten, müssen Sie einem entsprechenden Link das Verhalten Zeitleiste; Zeitleiste abspielen zuweisen.

Unter bps wird die Abspielgeschwindigkeit »Bilder pro Sekunde« eingestellt.

An jeder Stelle, an der sich im Balken ein runder Punkt (Keyframe oder Schlüsselbild genannt) befindet, können Sie die Position des Layers explizit einstellen. Die Zwischenpositionen entstehen durch Tweening (automatisches Berechnen der Zwischenbilder). Anfangs befinden sich automatisch am Anfang und am Ende des Balkens Schlüsselbilder; weitere lassen sich aus dem Popup über Schlüsselbild hinzufügen einrichten.

  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de