vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 1

Die Programmumgebung von UltraDev

Anhand eines »Rundgangs« durch die Programmoberfläche von UltraDev werden Sie lernen, wie man sowohl statische wie dynamische HTML-Seiten erstellt. Es ist unerlässlich, dass Sie den Aufbau der Design-Ansicht und des Menüsystems verstehen, wenn Sie mit der Entwicklungsumgebung von UltraDev vertraut werden wollen. In diesem Kapitel werden Sie

1.1 Die Programmoberfläche von UltraDev

Dreamweaver UltraDev ist ein Programm, das aus zwei Hauptmodulen besteht - dem Modul zum Design von Webseiten (Dreamweaver) und dem Modul zur Erstellung einer Datenbankverbindung (UltraDev). Diese beiden Module sind unter einer Oberfläche vereint, funktionieren aber unabhängig voneinander. In diesem Buch werden wir uns während der ersten Woche in erster Linie damit beschäftigen, uns in die Standardfunktionen von Dreamweaver einzuarbeiten, die der Erzeugung und Bearbeitung von HTML-Code dienen. So werden Sie Webseiten erstellen, die gut aussehen und funktionieren.

Die heutige Lektion gibt Ihnen einen allgemeinen Überblick über die Dreamweaver- Oberfläche. So werden Sie die einzelnen Funktionen in den folgenden Tagen leicht wiederfinden. Was UltraDev von anderen Programmen dieser Art unterscheidet, ist, dass Sie nicht nur eine, sondern oft drei oder vier Möglichkeiten zur Auswahl haben, um eine bestimmte Aufgabe auszuführen. Und ich bin mir ziemlich sicher, dass Sie bei der Umsetzung Ihrer Webseiten Ihre eigenen Techniken entwickeln werden, von denen nichts in diesem Buch steht. Ich für meinen Teil habe die Erfahrung gemacht, dass ich durch die tägliche Arbeit mit dem Programm immer routinierter werde. Zum Beispiel entdecke ich immer wieder neue Shortcuts, die die Arbeit mit dem Programm vereinfachen.

Die Oberfläche von UltraDev ist so flexibel wie das Programm selbst - kein anderes Programm erlaubt es, die eigenen Daten in so vielen unterschiedlichen Ansichten darzustellen. In der Dokumentansicht bekommen Sie einen ersten Eindruck, wie Ihre Webseite im Browser aussehen wird. Der Eigenschafteninspektor erlaubt Ihnen, die einzelnen Attribute eines bestimmten Objekts in Ihrem Design unmittelbar zu verändern. Wer den Dingen gern auf den Grund geht, hat mit eingebautem HTML-Editor sowie dem Quick Tag Editor direkten Zugriff auf den zugrunde liegenden Code. Eine Vielzahl von weiteren Inspektoren und Paletten gibt Ihnen die Möglichkeit, Ihre Seiten um JavaScripts, Datenbankbindungen und viele weitere Features zu ergänzen.

Wenn man UltraDev das erste Mal öffnet, reagiert man beim Anblick der Oberfläche vielleicht etwas verschüchtert. Wie in Abb. 1.1 zu sehen, warten etliche Werkzeugpaletten und Dutzende von Buttons darauf, dass der Anwender sie anklickt. Ohne Handbuch kann es schon einmal passieren, dass man sich quer durch alle Werkzeugpaletten von Funktion zu Funktion klickt, nur um einen simplen Befehl auszuführen. Die Idee hinter UltraDev ist ja, die Produktion zu vereinfachen - daher ist weder effektiv noch sinnvoll, zwei Minuten sämtliche Schaltflächen durchzuprobieren, um die Funktion zu finden, die automatisch einen Link erstellt, wenn man im Grunde nur <A HREF="mylink.html">LINK</A> eintippen müsste.

Machen Sie sich also gut mit der Programmoberfläche und den Werkzeugleisten vertraut - es ist weniger nervenaufreibend, wenn Sie das jetzt tun und nicht erst ein paar Stunden bevor die Webdatenbank Ihres Kunden online gehen soll. Wenn Sie das Programm gerne selbst erforschen wollen, dann schalten Sie die Tooltipps von UltraDev ein. Wenn Sie dann den Mauszeiger über einer Schaltfläche platzieren, öffnet UltraDev ein kleines Popup-Fenster, in dem die Funktion des betreffenden Werkzeugs beschrieben wird. Nichtsdestotrotz werden Sie einige Erklärungen zur Programmoberfläche benötigen.

Abbildung 1.1:  Die Oberfläche von UltraDev ist sehr komplex.

Um uns das Leben etwas leichter zu machen, werden wir uns die verschiedenen Programmfenster und Menüs der Reihe nach vornehmen und ihre Funktionen besprechen. So werden Sie die benötigten Werkzeuge leicht wieder finden, wenn Sie darangehen, Ihren eigenen HTML-Code zu schreiben - das Thema von Tag 2, »Die WYSIWYG-Layoutwerkzeuge von UltraDev«.

1.2 Die Menüleiste

Die Menüleiste von UltraDev ist leicht zu verstehen. Die meisten Funktionen, die von den Inspektoren bzw. Werkzeugleisten angeboten werden, finden sich noch einmal unter den entsprechenden Menüpunkten. Vermutlich werden Sie weniger mit den Menüs arbeiten, sondern mehr die Inspektoren und die Dokumentansicht verwenden. Es folgt ein kleiner Überblick darüber, welche Funktionen sich unter den einzelnen Menüpunkten verbergen:

Viele Bearbeitungsfunktionen bieten ein Kontextmenü. Es öffnet sich, wenn Sie das Objekt mit der rechten Maustaste (Windows) bzw. mit gedrückter Befehl-Taste (Mac) anklicken. Oft finden Sie in diesen Menüs neben dem Befehl auch noch einen Shortcut.

1.3 Die Dokumentansicht

Wenn Sie UltraDev öffnen, ist das größte Fenster, das Sie auf Ihrem Monitor sehen, das Dokumentfenster. Hier bauen Sie Ihre Webseiten im WYSIWYG-Modus zusammen (WYSIWYG: what you see is what you get). Sie haben also eine direkte Vorschau darauf, wie Ihre Seite aussehen wird, ohne dass Sie hierzu einen Browser starten müssen. Am oberen Fensterrand sehen Sie die Werkzeugleiste, die diverse Buttons enthält, über die sich häufig gebrauchte Funktionen schnell aufrufen lassen. Wir werden zum geeigneten Zeitpunkt näher darauf eingehen. Abb. 1.2 zeigt das Dokumentfenster, in dem eine einfache Seite mit Links geöffnet ist.

Abbildung 1.2:  Bei der Erstellung von Webseiten arbeiten wir hauptsächlich im Dokumentfenster.

Um Ihrer Webseite Inhalt hinzuzufügen, können Sie entweder Text direkt in der Dokumentansicht eintippen oder einen Button in der Objektpalette anklicken, um das entsprechende Objekt unmittelbar auf der Seite zu platzieren. Der blinkende Cursor zeigt an, wo sich die Einfügemarke augenblicklich befindet. Sie können diese Einfügemarke mit den Pfeiltasten verschieben oder mit der Maus an die gewünschte Stelle klicken. Text oder jedes beliebige andere Element wird immer dort eingefügt, wo der Cursor steht.

Im Gegensatz zu modernen Textverarbeitungen wie Word oder WordPerfect, können Sie in UltraDev standardmäßig den Cursor nur innerhalb eines Bereiches positionieren, in dem sich bereits Text oder andere Elemente befinden. Sie können also nicht an den unteren Fensterrand klicken und dort mit der Texteingabe beginnen. Jedoch können Sie in der Layoutansicht, die wir morgen besprechen, einen beliebigen Eingabebereich definieren, in den Sie dann Objekte einfügen. Das ist zwar nicht ganz dasselbe, als wenn man frei in die Seite klickt und losschreibt, kommt aber der Sache schon nahe.

Objekte bearbeiten

Elemente, die Sie in der Dokumentansicht eingefügt haben, können problemlos gelöscht, ausgeschnitten, kopiert und wieder eingefügt werden - also ganz wie in Ihrer gewohnten Textverarbeitung. Um ein Objekt auszuwählen, klicken Sie es an. Um mehrere Objekte gleichzeitig auszuwählen, platzieren Sie den Cursor an den Anfang der Gruppe, die ausgewählt werden soll. Dann halten Sie die Shift-Taste gedrückt und klicken dorthin, wo die Auswahl enden soll. Werden einzelne Objekte ausgewählt, sind sie von einem dunklen Auswahlrahmen umgeben, eine Gruppe von mehreren ausgewählten Objekten liegt in einem dunklen Auswahlrechteck.

Bestimmte Objekte wie z.B. Bilder oder Tabellen werden mit Höhen- und Breitenangaben versehen und können in ihrer Größe verändert werden. Werden diese Objekte ausgewählt, unterscheidet sich ihre Anzeige etwas von der anderer Objekte - skalierbare Objekte erkennt man an den Anfassern (kleine schwarze Quadrate innerhalb des Auswahlrahmens), mit deren Hilfe man das Objekt dehnen oder stauchen kann.

Ist ein Objekt markiert, kann man es mit den Befehlen Kopieren, Ausschneiden, Einfügen und Löschen im Menü Bearbeiten verschieben, duplizieren oder entfernen. Auch per Rückschritttaste lässt sich zur Not ein ausgewähltes Objekt entfernen. Im Menü Bearbeiten finden sich noch zwei weitere Varianten der Befehle Kopieren bzw. Einfügen: HTML kopieren und HTML einfügen. Mit HTML kopieren wird nur der Text innerhalb einer Auswahl kopiert, sämtliche HTML-Tags werden entfernt. Das ist äußerst praktisch, wenn man Text von einer Webseite in ein normales Textdokument kopieren möchte. In gleicher Weise können Sie mit HTML einfügen HTML-Code, den Sie kopiert haben, als Nur-Text in UltraDev einfügen. Wenn Sie jedoch in UltraDev ein Objekt wie z.B. eine Grafik oder eine Tabelle kopieren und dann als Text einfügen, werden alle HTML-Tags mit eingefügt.

UltraDev bietet verschiedene Shortcuts, die die Auswahl von Objekten wesentlich erleichtern. Um eine Zeile innerhalb eines Textes oder ein Objekt auszuwählen, genügt es, nahe dem linken Fensterrand vor das betreffende Objekt zu klicken. Der Cursor verwandelt sich in einen Pfeil, um anzuzeigen, dass Sie sich jetzt im Zeilenauswahl-Modus befinden. Wenn Sie klicken und gleichzeitig ziehen, können Sie mehrere Zeilen auf einmal auswählen.

Darüber hinaus gibt es noch zwei weitere recht bequeme Methoden, ein Objekt innerhalb der Hierarchie von HTML-Tags auszuwählen. Links unten in der Statuszeile des Dokumentfensters sehen Sie diese Hierarchie von Tags, die das Objekt umschließen, das Sie gerade bearbeiten. In Abb. 1.1 zeigt Ihnen ein Blick auf diese Tagliste, dass einer dieser Links gerade bearbeitet wird: <BODY><TABLE><TR><TD><A>. Sie können nun direkt die Zelle auswählen, die den Link enthält, wenn Sie auf <TD> in dieser Liste klicken. Sie können Ihre Auswahl beliebig verändern: Klicken Sie auf <TR>, wählen Sie die ganze Zeile aus, mit Klick auf <TABLE> die ganze Tabelle und mit Klick auf <BODY> den ganzen HTML-Body. Das ist ein ebenso praktischer wie intuitiver Weg, um Objekte auszuwählen.

Mit den Befehlen Übergeordnetes Tag auswählen und Untergeordnetes Objekt auswählen im Menü Bearbeiten können Sie ebenfalls sehr bequem von der Auswahl abhängige bzw. ihr übergeordnete Objekte auswählen.

Screenformate

Wahrscheinlich ist Ihnen auch schon aufgefallen, dass Websites oft ohne Rücksicht auf die Bildschirmauflösung des Betrachters gestaltet werden. Die Bildschirmseiten scheinen der Länge und der Breite nach ins Endlose zu scrollen. UltraDev bietet eine einfache Möglichkeit, die Wirkung einer Webseite bei verschiedenen Auflösungen zu beurteilen. Sie müssen hierzu nur die Größe des Dokumentfensters anpassen. Die aktuelle Auflösung wird rechts unten in der Statusleiste des Fensters angezeigt. Abb. 1.1 zeigt z.B. ein Fenster mit einer Auflösung von 600 x 300 Pixel. Diese Auflösung stellt so etwas wie den kleinsten gemeinsamen Nenner für die Größe eines Browserfensters dar. Bei dieser Auflösung kann auch auf den kleinsten Monitoren die ganze Webseite ohne Scrollen betrachtet werden. Sie können verschiedene Vorschaugrößen wählen, indem Sie in das Feld mit der aktuellen Auflösung klicken und die Maustaste gedrückt lassen. Es öffnet sich ein Popup-Fenster, das Ihnen eine Liste der gebräuchlichsten Auflösungen, einschließlich WebTV, anbietet. Sie können diese Liste um weitere Formate ergänzen, wenn Sie die Voreinstellungen von UltraDev ändern. Wie das geht, lernen Sie im Laufe dieser Lektion. Haben Sie ein zusätzliches Screenformat definiert, wird dieses ebenfalls in der Statuszeile angezeigt.

WebTV nicht außen vor lassen
Sie können nie mit absoluter Gewissheit sagen, auf welcher Plattform und mit welcher Auflösung Ihr Zielpublikum Ihre Website betrachtet. Vor kurzem habe ich am Usability-Test einer Website teilgenommen, über die verschiedene hausgemachte Produkte vertrieben werden. Ein überraschend hoher Anteil der Site-Besucher (über 35 %) waren WebTV-Nutzer. Zum Glück wurde die Site mit Hinblick auf diese Benutzergruppe designt, sodass diese Gruppe sie ohne Einschränkungen genießen konnte.

Sie müssen sich dabei aber vor Augen halten, dass die gewählte Größe des Vorschaufensters nicht der tatsächlichen Auflösung entspricht, mit der die Seite dann ausgegeben wird. Es handelt sich hierbei nur um eine Möglichkeit, wie Sie die Wirkung Ihres Dokuments bei verschiedenen Auflösungen beurteilen können. Wenn Sie also eine Tabelle oder Grafik auf Ihrer Seite platzieren, die 800 Pixel breit ist, Ihr Screen aber nur auf eine Breite von 600 Pixel angelegt ist, wird diese Tabelle bzw. Grafik nicht automatisch auf die richtige Größe skaliert, damit Sie auf Ihre Seite passt. Achten Sie aber umgekehrt auch darauf, dass - wenn Sie für eine kleinere Auflösung arbeiten - auch Benutzer mit höheren Auflösungen ein ansprechendes Layout zu sehen bekommen.

Downloadzeiten und Dokumentgrößen

Neben dem Feld, das die gewählte Auflösung anzeigt, finden sich auch Hinweise bezüglich Dokumentgröße und geschätzter Downloadzeit. Die meisten Webdesigner entwerfen ihre Sites mit Blick auf ein bestimmtes Zielpublikum - Online-Zugang über Modem oder Netzwerk, Browser der vierten Generation usw. Es ist sicher nicht das Ei des Kolumbus, schöne Webseiten zu erstellen, die dann 10 Minuten brauchen, bis sie geladen sind. Als Grundlage zur Schätzung der voraussichtlichen Downloadzeit wird eine Standardverbindung über ein 28.8-Modem angenommen. Sie können in den Voreinstellungen von UltraDev aber jederzeit eine andere Übertragungsgeschwindigkeit wählen. Wie das gemacht wird, erfahren Sie am Ende dieser Lektion.

Die Dokumentansicht anpassen

Sie können das Dokumentfenster Ihren Bedürfnissen anpassen und sich so die Gestaltungsarbeit erleichtern. Im Menü Ansicht können Sie die Symbolleiste ausblenden, die am oberen Rand des Dokumentfensters angezeigt wird. Sie ist zwar nützlich, wenn man den Titel des Dokumentes ändern oder schnell auf bestimmte Funktionen zugreifen möchte, allerdings beschneidet sie den ohnehin immer viel zu knappen Platz auf dem Monitor.

Wenn Sie den HTML-Code, Ihr Design oder beides zugleich im Hauptfenster sehen möchten, können Sie über die entsprechenden Menüoptionen die gewünschte Darstellung auswählen. Zusätzlich können Sie sich noch ein Raster und/oder Lineale einblenden lassen.

Raster und Lineale

Wählen Sie im Menü Ansicht die Option Raster > Raster bearbeiten. Wie in Abb. 1.3 gezeigt, können Sie in diesem Fenster ein Raster einrichten und den Abstand der Zellen, Art und Farbe der Rasterlinien sowie die Optionen Raster zeigen und Am Raster ausrichten wählen.

Abbildung 1.3:  Mithilfe eines individuell eingerichteten Rasters können Sie sich die Gestaltung einer HTML-Seite erleichtern.

Auch Lineale sind eine wertvolle Positionierhilfe. Gehen Sie in das Menü Ansicht > Lineale > Zeigen. In diesem Untermenü können Sie auch die Maßeinheit auswählen, die die Lineale verwenden. Möchten Sie den Ursprung der Lineale versetzen, klicken Sie in die linke obere Ecke des Bildschirms und ziehen den Nullpunkt mit gedrückter Maustaste an seine neue Position. Mit der Option Ansicht > Lineale > Ursprung zurücksetzen setzen Sie den Nullpunkt wieder auf die standardmäßige Position zurück.

Tracing-Bilder

Tracing-Bilder sind ein weiteres höchst nützliches Feature, um die Dokumentansicht an Ihre gestalterischen Erfordernisse anzupassen. Mussten Sie sich bei der Realisierung einer Webseite schon einmal genau an eine vorgegebene Grafik halten, wissen Sie, wie schwer es ist, die einzelnen Bildelemente exakt so zu platzieren wie in der Originalgrafik. Hier bietet UltraDev mit der Möglichkeit, Tracing-Bilder in den Hintergrund des zu erstellenden Dokumentes zu legen, eine nützliche Arbeitserleichterung. Das Tracing-Bild liegt hinter der aktuellen Seite und kann als Blaupause verwendet werden, an der sich alle Elemente den Vorgaben des Originals entsprechend ausrichten lassen.

Um Ihrem Dokument ein Tracing-Bild hinzuzufügen, gehen Sie in das Menü Ansicht > Tracing-Bild > Laden. Es öffnet sich ein Fenster, das Sie auffordert, eine Vorlage auszuwählen. Diese Vorlage wird dann an der linken oberen Ecke Ihres HTML- Dokuments ausgerichtet. Abb. 1.4 zeigt eine Webseite mit Tracing-Bild und aktiviertem Raster.

Abbildung 1.4:  Das Tracing-Bild liegt im Hintergrund der aktuellen Webseite und dient dem Designer als Positionierhilfe.

Nun ist vielleicht die Position des Tracing-Bildes im Nullpunkt der Seite (linke obere Ecke) nicht die Stelle, wo Sie das Bild haben möchten. Um die Position des Tracing-Bildes zu verschieben, gehen Sie in das Menü Ansicht > Tracing-Bild > Position einstellen und geben Sie die exakten Koordinaten ein oder verschieben Sie das Bild mit den Pfeiltasten. Sie können ein Tracing-Bild auch an einem Objekt im HTML-Dokument ausrichten (wenn Sie z.B. ein Tracing-Bild verwenden, um eine Tabelle zu gestalten). Gehen Sie zu diesem Zweck in das Menü Ansicht > Tracing-Bild> An Auswahl ausrichten. Sie können das Tracing-Bild jederzeit an seinen Ursprung zurückversetzen mit der Option Ansicht > Tracing-Bild > Position zurücksetzen.

Nun regt sich vielleicht bei dem einen oder anderen der leise Verdacht, ob dieses Tracing- Bild nicht unter Umständen den Gestaltungsprozess eher blockiert, was natürlich nicht ausgeschlossen werden kann. Zum Glück haben die Entwickler bei Macromedia diesen Umstand bedacht und dieser Funktion einen Transparenzregler spendiert, mit dem Sie das Tracing-Bild so weit »absoften« können, dass es auf dem Monitor fast nicht mehr zu sehen ist. Setzt man die Sichtbarkeit nahe Null, dürfte das Tracing-Bild nicht mehr so dominant sein, dass es sich auf den Gestaltungsprozess störend auswirken könnte. Um die Transparenz zu regeln, gehen Sie in das Menü Modifizieren > Seiteneigenschaften. Stellen Sie den Regler für die Bildtransparenz auf einen Wert zwischen 100 % (voll sichtbar) und 0 % (unsichtbar). Um das Tracing-Bild schnell auszublenden, gehen Sie in das Menü Ansicht > Tracing-Bild > Zeigen und wählen die Option ab.

1.4 Die Werkzeugpaletten

Wenn Sie das Menü Fenster einmal durchgesehen haben, fühlten Sie sich vielleicht etwas erschlagen von den vielen Paletten, die dort aufgeführt werden. In den ersten Tagen werden wir uns auf die Objektpalette sowie den Eigenschafteninspektor konzentrieren. Mit ihrer Hilfe fügen Sie HTML-Elemente in ein Dokument ein und verändern mühelos deren Attribute, ohne auch nur eine einzige Zeile Code zu tippen.

Die HTML-Objektpalette

Die Objektpalette ist die Mutter aller Paletten. Wenn Sie UltraDev zum ersten Mal öffnen, erscheint sie in der linken oberen Ecke des Fensters. Sie werden dieses Werkzeug oft verwenden, wenn Sie HTML-Seiten gestalten. Am Kopf dieser Palette sehen Sie ein kleines Popup-Menü, das verschiedene Optionen zu Auswahl anbietet. Was sich hinter diesen Optionen verbirgt, lesen Sie in der folgenden Übersicht:

Am unteren Ende der Objektpalette werden stets zwei Schaltflächen angezeigt, gleich welche Unterpalette Sie auswählen: der Layout- und der Ansichtsmodus. Mit diesen Buttons können Sie zwischen der Standardansicht und der neuen Layoutansicht hin- und herschalten, in der sich Elemente frei auf der Seite platzieren lassen. Sie werden diese Werkzeuge morgen genauer kennen lernen. Merken Sie sich diese Schaltflächen gut, denn Sie werden sie in Zukunft ständig brauchen.

Die folgenden Seiten bieten einen - auch grafischen - Überblick über die einzelnen Unterpaletten der Objektpalette und ihrer Funktionen. Los geht's.

Die Objektpalette lässt sich in vertikaler und horizontaler Richtung beliebig in der Größe verändern. Ist die Palettenfläche zu klein, um sämtliche Schaltflächen anzuzeigen, fügt UltraDev Scrollpfeile ein, um die verdeckten Schalter zugänglich zu machen. Über die Voreinstellungen, die wir am Ende des heutigen Tages noch kennen lernen, können Sie außerdem einstellen, ob diese Palette nur Buttons bzw. nur Text anzeigt oder beides zusammen.

Die Unterpalette Zeichen

Um ein Sonderzeichen an der Einfügemarke einzusetzen, klicken Sie auf das entsprechende Zeichen in der Palette. Abb. 1.5 zeigt die Palette mit ihren Sonderzeichen.

Abbildung 1.5:  Klicken auf ein Sonderzeichen fügt es ins Dokument ein.

Wenn Sie die Return-Taste drücken ist das nicht das Gleiche, als wenn Sie einen Zeilenumbruch einfügen. Mit Return fügen Sie die Anweisung <P>&nbsp;</P> in Ihren HTML-Code ein. Das entspricht dem Raum von zwei Zeilen und die einzelnen Elemente kommen nicht direkt untereinander zu stehen. Eine andere Möglichkeit, einen Zeilenumbruch einzufügen, ist, bei gedrückter Shift-Taste die Return-Taste zu drücken. Vielleicht möchten Sie auch nur zwei Zeilenumbrüche hintereinander verwenden, um eine Zeile mit doppeltem Abstand zu erhalten. Die Tags <BR><BR> sind etwas sauberer als das <P>-Tag + »non-breaking space«.

Die Unterpalette Allgemein

Von allen Werkzeugen werden Sie diese Unterpalette der Objektpalette vermutlich am häufigsten verwenden. Sie stellt Ihnen die Grundelemente zur Verfügung, die Sie bei der Gestaltung der meisten Webseiten brauchen. Die Abb. 1.6 zeigt diesen Bereich der Palette mit ihren Funktionen.

Abbildung 1.6:  Fügen Sie Tabellen, Bilder und andere Objekte mit einem einfachen Mausklick ein.

Die Unterpalette Formulare

Formulare dienen der Kommunikation mit dem Anwender. Mehr zu diesem Thema erfahren Sie in der nächsten Woche. Die einzelnen Elemente eines Formulars ermöglichen dem Anwender die einfache Dateneingabe von vertrauten Oberflächen aus. Werfen wir nun einen Blick auf die Formularelemente, die uns UltraDev zur Verfügung stellt. Abb. 1.7 gibt Ihnen einen Überblick.

Abbildung 1.7:  In dieser Palette sind alle Elemente zusammengefasst, die Sie für Ihre Formulare benötigen.

Die Unterpalette Frames

Framesets zu definieren ist eine eher lästige Übung, der man sich selten unterzieht. Wenn ich eine neue Website produziere, die Frames verwendet, benutze ich das <FRAMESET>-Tag nur einmal, wenn ich die Site anlege. Die Frames-Palette befreit uns von der Notwendigkeit, die Syntax für Framesets ständig präsent zu haben. Die gebräuchlichsten Frameteilungen werden hier schon fix und fertig angeboten. Um welche es sich dabei handelt, sehen Sie in Abb. 1.8.

Abbildung 1.8:  Die gebräuchlichsten Framesets lassen sich mit dieser Palette schnell erstellen.

Sie können natürlich diese vordefinierten Framesets nach Ihren Erfordernissen modifizieren, sobald Sie sie in Ihr Dokument eingefügt haben, doch dürften sie in den meisten Fällen dem, was Sie brauchen, ziemlich nahe kommen.

Die Unterpalette Head

Die Funktionen, die hier angeboten werden, sind die wichtigsten Werkzeuge, um Ihre Website erfolgreich zu machen. Sie werden zwar in der Dokumentansicht nicht angezeigt, doch sind sie für alle Suchmaschinen lesbar. Wenn Sie keine Metatags im <HEAD>-Bereich definieren, kann das der Unterschied sein zwischen einer erfolgreichen Website, die von Ihren Kunden auch gefunden wird, und einer namenlosen Seite, die in den Suchmaschinen als 10.109. von 2.534.222 Seiten erscheint. Abb. 1.9 gibt einen Überblick über die verfügbaren Elemente.

Abbildung 1.9:  Unsichtbar, aber von größter  Wichtigkeit: die Head-Elemente.

Die Unterpalette Unsichtbare Elemente

Funktionen, die Sie über diese Palette in ein Dokument einfügen, werden nicht angezeigt, erfüllen aber wichtige Funktionen. Diese Palette bietet nur einige wenige Standardfunktionen, wie Sie in Abb. 1.10 sehen können.

Abbildung 1.10:  Unsichtbare Elemente werden in der  Dokumentansicht nicht angezeigt.

Die Unterpalette Live

Da UltraDev ein Autorenprogramm zur Entwicklung dynamischer Webseiten ist, werden Sie vermutlich auch sehr oft mit dynamischen Websites zu tun haben. Statt nun jedes Mal eine dynamische Seite völlig neu zu entwerfen, können Sie die vordefinierten Funktionen, wie sie in Abb. 1.11 dargestellt sind, verwenden.

Abbildung 1.11:  Mit den Live-Objekten ergänzen Sie Ihre Website um dynamische Funktionen, die mit HTML und JavaScript nicht möglich sind.

Die Unterpalette Spezial

Diese letzte Unterpalette fügt spezielle Objekte wie Java- oder ActiveX-Plug-Ins in das Dokument ein, die die Standardfunktionen des Browsers erweitern (siehe Abb. 1.12). Technisch gesehen gehören Flash und Shockwave eigentlich auch in diese Kategorie. Da es sich hierbei aber um Technologien aus eigenem Hause handelt, hat ihnen Macromedia einen etwas prominenteren Platz in der Unterpalette Allgemein zugedacht.

Abbildung 1.12:  Spezielle Objekte bereichern Websites um  Funktionen, die mit HTML und JavaScript nicht  zu erreichen sind.

Der Eigenschafteninspektor

Haben Sie ein Element in Ihre Webseite eingefügt, müssen Sie vielleicht bestimmte Attribute dieses Objekts nachträglich verändern. Statt nun für jeden Objekttyp eine eigene Palette zu programmieren, haben die Entwickler eine einzige schwebende Palette geschaffen, eben den Eigenschafteninspektor, der sozusagen alle Funktionen »unter einem Dach« vereint. Sie können jedes ausgewählte Objekt über den Eigenschafteninspektor bearbeiten, wobei sich seine Oberfläche je nach Objekttyp automatisch verändert. Abb. 1.13 zeigt, wie der Eigenschafteninspektor aussieht, wenn eine Tabelle ausgewählt wurde.

Der Eigenschafteninspektor selbst bietet verschiedene Ansichtsmodi zur Auswahl, je nachdem, wie detailliert die Informationen sein sollen, die Sie zu einem Objekt benötigen. Dem HTML-Neuling genügen vielleicht ein paar Grundinformationen. Um sich nur die wichtigsten Daten anzeigen zu lassen, falten Sie den Inspektor zusammen. Hierzu klicken Sie auf den kleinen, nach oben zeigenden Pfeil rechts unten in der Palette. Zeigt der Pfeil nach unten, ist die Palette schon zusammengefaltet. Klicken Sie darauf, schalten Sie die Palette in den Expertenmodus um (siehe Abb. 1.13). In diesem Buch werden wir diese Palette meistens in ihrem aufgeklappten Zustand verwenden.

Abbildung 1.13:  Der Eigenschafteninspektor zeigt an, welche Eigenschaften des ausgewählten Objekts verändert werden können.

Sie haben auf die einzelnen Attribute eines Objekts auch über den Listenmodus des Eigenschafteninspektors Zugriff. Um in den Listenmodus umzuschalten, klicken Sie auf das untere Icon am linken Rand der Palette. In dieser Ansicht sehen Sie eine Liste mit den Attributen des ausgewählten Objekts. Diese Attribute können Sie verändern oder löschen bzw. neue hinzufügen. Wenn UltraDev ein seltenes HTML-Attribut nicht kennt, können Sie es hier direkt definieren. Abb. 1.14 zeigt den Eigenschafteninspektor im Listenmodus.

Abbildung 1.14:  Der Eigenschafteninspektor erlaubt auch direkten Zugriff auf die Attribute eines Tags.

Auch wenn Sie sich sicher sind, dass Sie Ihren HTML-Code niemals von Hand im Listenmodus ändern werden, sollten Sie sich doch mit dieser Ansicht der Palette vertraut machen, denn die Oberfläche zum Eingeben bzw. Ändern längerer Attributlisten ist im ganzen Programm ähnlich aufgebaut.

Bereits vorhandene Elemente werden verändert, indem Sie auf das Feld klicken, in dem Sie einen Wert ändern möchten, und warten, bis die Einfügemarke erscheint. Möchten Sie einen Eintrag vollständig entfernen, wählen Sie die ganze Zeile aus und löschen sie durch Klick auf die Minus-Taste (-). Durch Klick auf die Plus-Taste (+) fügen Sie einen neuen Eintrag hinzu.

Der Eigenschafteninspektor bietet noch zwei weitere nützliche Helferlein. Das erste ist das Hilfe-Icon rechts oben in der Palette. Ein Klick darauf öffnet die Online-Hilfe und zeigt Ihnen alle relevanten Informationen zu dem Objekt an, das Sie gerade bearbeiten. Das erspart Ihnen in vielen Fällen den Griff zum dicken HTML-Handbuch.

Der Quick Tag Editor

Das zweite nützliche Helferlein ist in meinen Augen eines der nützlichsten Features in UltraDev überhaupt. Wenn Sie das Icon direkt unter dem Hilfe-Icon anklicken, öffnet sich der Quick Tag Editor. Der Quick Tag Editor ist nichts anderes als ein Popup-Fenster, das den HTML-Code des Tags anzeigt, das Sie gerade bearbeiten. Änderungen am HTML- Code können Sie direkt in dieses Fenster eingeben. Vielleicht macht diese Funktion auf den ersten Blick nicht viel her, aber wenn Sie einmal an einem ganz bestimmten Tag eine ganz bestimmte Änderung vornehmen wollen, werden Sie froh sein, wenn Sie sich nicht durch den ganzen HTML-Code scrollen oder eigens einen Editor öffnen müssen. Mit dem Quick Tag Editor können Sie sofort auf ein bestimmtes Tag zugreifen und es verändern.

Wenn Sie in der Dokumentansicht arbeiten und ein Objekt ausgewählt haben, können Sie den Quick Tag Editor über das Menü Modifizieren > Quick Tag Editor aufrufen. Das ermöglicht Ihnen den direkten Zugriff auf den HTML-Code auch ohne Eigenschafteninspektor.

Mit der Tastenkombination Strg + T (Windows) bzw. Befehl + T (Mac) können Sie den Quick Tag Editor schnell aufrufen. Und weil diese Funktion so bequem ist, sollten Sie sich diesen Shortcut einprägen.

Sonstige Paletten und Fenster

Die restlichen Paletten, die UltraDev verwendet, sind nicht minder wichtig, haben aber einen weit geringeren Funktionsumfang als die bisher besprochenen. Ihre Funktionen werden im Laufe der kommenden Lektionen an geeigneter Stelle ausführlich erklärt. Der folgende Überblick soll Ihnen einen ersten Eindruck vermitteln, welche Aufgaben diese Paletten erfüllen, die im Menü Fenster versammelt sind.

Wenn Sie alle Fenster und Paletten, die Ihnen UltraDev anbietet, auf einmal öffnen, dann kann es etwas eng zugehen auf dem Monitor. In Abb. 1.15 habe ich mir diesen Spaß einmal erlaubt.

Abbildung 1.15:  Ehe man sich versieht, ist die Arbeitsfläche zugepflastert.

Um hier Abhilfe zu schaffen, sollten Sie über das Menü Fenster alle Paletten ausblenden, die Sie nicht benötigen, oder mit der Option Fenster > Fenster ausblenden alle Paletten auf einmal verbergen. Wenn Sie Sachen lieber aufräumen als sie unter den Teppich kehren, wählen Sie die Option Fenster > Fenster anordnen. Das Programm versucht dann, die Paletten möglichst am Rand der Arbeitsfläche zu platzieren.

Eine weitere Möglichkeit, um für ein wenig Ordnung unter den Paletten zu sorgen, ist, sie aneinander anzudocken. Paletten mit Registern können Sie auch ineinander ziehen - aus zwei einzelnen Paletten wird eine einzige mit zwei Registern. Um sie wieder zu trennen, müssen Sie die Palette nur mit ihrem Register aus der anderen Palette ziehen und auf einer freien Stelle im Arbeitsbereich ablegen. Die Palette erscheint dann wieder als eigenes Fenster.

Sie können die Voreinstellungen von UltraDev auch dahingehend verändern, dass einige (oder alle) Paletten von anderen Fenstern verdeckt werden können. Normalerweise schweben die Paletten über dem Arbeitsbereich und verdecken die übrigen Fenster. Die Anpassung der Voreinstellungen ist das Thema zum Abschluss des heutigen Tages.

1.5 Direkter Zugriff auf den HTML-Code

Irgendwann kommt der Zeitpunkt, an dem Sie direkt auf den HTML-Code zugreifen müssen, weil Sie mit der WYSIWYG-Ansicht nicht mehr weiterkommen. Manchmal geht es eben schneller, wenn man ein paar Tags von Hand korrigiert, als das Objekt auszuwählen, den Eigenschafteninspektor zu öffnen und zu überlegen, welche Attribute man korrigieren muss und diese Attribute dann schlussendlich zu ändern.

Sie haben mehrere Möglichkeiten, die HTML-Ansicht aufzurufen: entweder über das Menü Fenster oder Sie klicken auf das <>-Symbol rechts unten in der Statuszeile. Haben Sie den Launcher geöffnet, können Sie die HTML-Quelle hierüber aufrufen. Der einfache und direkte Weg besteht darin, von der Entwurfs- in die Codeansicht bzw. in die Entwurfs- und Codeansicht umzuschalten, indem Sie eines der entsprechenden Icons in der Werkzeugleiste am oberen Fensterrand anklicken oder die entsprechende Option über das Menü Ansicht auswählen. Die Entwurfs- und Codeansicht sehen Sie in Abb. 1.16. Befinden Sie sich in der Code- bzw. Entwurfs- und Codeansicht, können Sie mit dem dritten Icon von links in die Standard-Dokumentansicht umschalten.

Abbildung 1.16:  In der Entwurfs- und Codeansicht könnten Sie entweder im Code-Fenster arbeiten oder in der grafischen Oberfläche.

Der integrierte HTML-Editor ist vermutlich das schwächste Glied in der Produktionsumgebung von UltraDev, dürfte aber trotzdem für die meisten Zwecke ausreichen. Der Editor ist eher rudimentär, bietet aber trotzdem ein paar ausgesprochene Profi-Features wie Syntax-Coloring oder automatische Einrückung. Im Menü Bearbeiten gibt es ein paar spezielle Optionen zur Arbeit in der Codeansicht - Code einrücken/ ausrücken, um den Code auszurichten, oder geschwungene Klammern für JavaScript- Programmierung.

Auswahlen in die verschiedenen Ansichten übernehmen

Wenn Sie ein HTML-Dokument in der Code- oder in der Entwurfsansicht bearbeiten, können Sie entweder den Code oder die Objekte selbst auswählen. Wechseln Sie zwischen den Ansichten, ist das ausgewählte Objekt auch in der anderen Ansicht ausgewählt. Wenn Sie z.B. in der Entwurfsansicht eine Tabelle anklicken, sind in der Codeansicht die zugehörigen <TABLE>...</TABLE>-Tags und alles, was dazwischen steht, ebenfalls ausgewählt. Auf sehr komplexen Seiten ist das eine große Hilfe, um einen Codeabschnitt schnell zu finden.

Wenn Sie Ihren HTML-Code verändern, wird automatisch auch die Entwurfsansicht aktualisiert und umgekehrt. Wenn die Ansichten nicht mehr zusammenstimmen, können Sie durch Klicken auf die kreisförmigen Pfeiltasten in der Werkzeugleiste das Programm zwingen, die Seite neu zu laden.

Wenn Sie den Codeinspektor verwenden, um HTML-Code zu bearbeiten, dann müssen Sie Vorsicht walten lassen. Der Codeinspektor kann in zwei verschieden Modi angezeigt werden: geöffnet und aktiv bzw. geöffnet und nicht aktiv. Wenn Sie bei geöffnetem Codeinspektor in die Entwurfsansicht klicken, ist der Codeinspektor nicht mehr aktiv. Wenn Sie an den Standardeinstellungen nichts geändert haben, liegt das HTML-Fenster noch immer im Vordergrund, ist aber nicht mehr aktiv (sein Hintergrund wird grau dargestellt). Alles, was Sie nun eingeben, geben Sie in der Entwurfsansicht ein und nicht, wie man vermuten würde, im HTML-Fenster. Sie haben vielleicht den Eindruck, im Sourcecode zu arbeiten, was aber nicht zutrifft. Wenn Sie auf Return drücken, erscheint die Eingabe <P>&nbsp;</P>, statt dass der Cursor wie erhofft einfach eine Zeile nach unten wandert.

Ich kann nur raten, entweder die Voreinstellungen so zu verändern, dass der Codeinspektor nicht über allen Fenstern schwebt, oder die Möglichkeiten zur Codeeingabe in der Entwurfsansicht zu nutzen. Es gibt eigentlich überhaupt keinen Grund, den Codeinspektor zu verwenden, wenn Sie die Entwurfs- und die Codeansicht gleichzeitig geöffnet haben.

Codeansichtsoptionen

Die einzelnen Zeilen im HTML-Code lassen sich mit Zeilennummern versehen, wenn Sie die entsprechende Option anwählen. Zeilennummern sind sehr nützlich, wenn es an die Fehlersuche im Sourcecode von dynamischen Webseiten geht. Bei der Erstellung von Standard-HTML-Seiten werden Sie diese Option vermutlich weniger benötigen.

Die Länge der Zeilen lässt sich an die Fensterbreite anpassen, wenn Sie die Option Umbruch anwählen. Zwar lässt sich der Aufbau eines HTML-Dokuments leichter nachvollziehen, wenn die Zeilen nicht umbrechen, doch müssen Sie dann des Öfteren horizontal scrollen, um das gesuchte Tag zu finden.

Im selben Menü können Sie auch Automatischer Einzug, Ungültigen HTML- Code hervorheben und Syntaxfarbcodierung wählen.

Informationen zu HTML-Tags anzeigen

Um vom Editor aus auf die umfangreiche HTML-Referenz von UltraDev zuzugreifen, genügt es, das Tag auszuwählen, zu dem sich Sie nähere Informationen anzeigen lassen möchten, und den <?>-Button in der Werkzeugleiste anzuklicken. Es öffnet sich ein Fenster, das Ihnen alle möglichen Attribute eines bestimmten Tags anzeigt. Das ist eine fantastische Möglichkeit, Ihrem HTML-Code von Hand den letzten Schliff zu geben.

Suchfunktionen

Wenn Sie im HTML-Code ein bestimmtes Tag oder eine bestimmte Textstelle suchen, werden Ihnen die eingebauten Suchen- bzw. Ersetzen-Funktionen wertvolle Dienste leisten. Die Suchen- und Ersetzen-Funktion ist vielfältig konfigurierbar und ermöglicht es, auch sehr komplexe Strukturen im HTML-Code zu finden. Um die Suchfunktion in der Codeansicht aufzurufen, klicken Sie auf das Pfeil-Icon rechts oben in der Palette. In der Dokumentansicht rufen Sie die Suchfunktionen über das Menü Bearbeiten auf. Folgende Optionen stehen zur Auswahl:

Schauen wir uns das Dialogfenster Suchen und ersetzen jetzt einmal etwas genauer an. Abb. 1.17 zeigt es im ausgeklappten Zustand.

Abbildung 1.17:  Im Dialogfenster Suchen und ersetzen können Sie eine große Anzahl von Suchkriterien definieren.

Zur Veranschaulichung habe ich eine Site nach allen <TD>-Tags durchsuchen lassen, in denen das Attribut bgcolor fehlt. Das Feld im unteren Teil des Fensters listet alle Tags, auf die die Suchkriterien zutreffen, nach Dateien geordnet auf. Dieses Feld wird normalerweise nicht angezeigt, Sie können es aber mit dem kleinen Pfeil rechts unten auf- bzw. zuklappen.

Die Suchen/Ersetzen-Funktion erlaubt viele individuelle Einstellungen. So können Sie z.B. auch nach Strukturen innerhalb des HTML-Codes suchen lassen und nicht nur nach genau vorgegebenen Wörtern oder Tags. Lernen Sie nun, wie Sie die Suchen/Ersetzen- Funktion individuell konfigurieren.

Der Suchbereich

In Popup-Menü Suchen in wählen Sie aus, welche Dateien durchsucht werden sollen. Sie können das gerade geöffnete Dokument durchsuchen lassen, die aktuelle Site, bestimmte Dokumente einer Site oder den Inhalt eines Ordners. Die Möglichkeit, in einem Arbeitsgang Hunderte von Dateien zu aktualisieren, erlaubt es, Fehler schnell und bequem zu korrigieren. Ohne diese Funktion würden sich solche Änderungen schnell zum Albtraum auswachsen. Gibt es z.B. auf Ihrer Website sehr viele Links, die auf eine externe Adresse zeigen und quer über alle Seiten verstreut sind, wären Sie eine halbe Ewigkeit beschäftigt, diese Links zu aktualisieren, wenn sich der Name der Domain ändert. Mit einer richtig definierten Suchen- und Ersetzen-Abfrage ist dieses Problem im Handumdrehen gelöst.

Suchkriterien

Als Nächstes müssen Sie einstellen, wonach überhaupt gesucht werden soll. Das geschieht mithilfe des Drop-Down-Menüs Suchen nach. Sie haben vier Optionen zur Auswahl:

Suche starten

Sobald Sie Ihre Suchabfrage definiert haben, können Sie die Suche starten, indem Sie auf die Buttons Weitersuchen oder Alle Suchen klicken. Wenn Sie ein bestimmtes Attribut nicht nur suchen, sondern auch ersetzen wollen, geben Sie den entsprechenden Wert in das Feld Ersetzen durch ein und klicken auf einen der Buttons Ersetzen bzw. Alle Ersetzen.

Die meisten Suchoptionen bietet das Feld Ersetzen durch, in das Sie Text oder bestimmte Tags eingeben können. Bei der Tag-Suche können Sie angeben, welches Attribut geändert werden soll. Auf diesem Weg können Sie z.B. problemlos die Werte von Attributen wie bgcolor, width oder height global ändern.

Suche modifizieren

Es gibt einige Einstellungen, mit denen Sie Ihr Suchergebnis wirksam beeinflussen können:

Die mächtigste Suchfunktion ist die, die die Suche nach bestimmten Strukturen, nach bestimmten Zeichenmustern erlaubt, und nicht nur nach genau vorgegebenen Zeichen. Wenn Sie z.B. ein Dokument auf alle Strings durchsuchen möchten, bei denen es sich um eine Telefonnummer handeln könnte, werden Sie mit der üblichen Methode der Textsuche nur Erfolg haben, wenn Sie jede mögliche Kombination durchprobieren. Hier führt nur die Suche über reguläre Ausdrücke zum Ziel. Nehmen wir an, die fraglichen Telefonnummern sind nach folgendem Muster aufgebaut: ###-###-#### (ein Dreierblock, nochmal ein Dreierblock und ein Viererblock). Nun definieren wir einen regulären Ausdruck, der alle möglichen Zahlenkombinationen findet: \d{3}-\d{3}-\d{4}. Das sieht komplizierter aus, als es in Wirklichkeit ist. In der nachfolgenden Übersicht werden alle zur Verfügung stehenden regulären Ausdrücke erklärt. Mithilfe dieser Ausdrücke können Sie Suchabfragen definieren, die alle Arten von Strings abfragen können.

Mithilfe regulärer Ausdrücke können Sie Suchmuster definieren, die in einem Durchgang mehrere passende Objekte auf einmal finden. Das ist weit effizienter, als für jeden speziellen Fall eine eigene Suche durchzuführen.

Wenn Sie eine komplizierte Suchabfrage definiert haben, dann werden Sie sie nicht noch einmal eintippen wollen, wenn Sie sie das nächste Mal brauchen. Sie können Ihre Abfrage speichern, indem Sie im Dialogfenster Ersetzen auf das Disketten-Icon klicken. Gespeicherte Abfragen laden Sie durch Klick auf das Ordnersymbol.

Sie können Suchabfragen in jeder Ansicht durchführen, nicht nur in der Codeansicht. Sie öffnen das Suchfenster über das Menü Bearbeiten > Ersetzen.

Bearbeiten mit externem Editor

Im Menü Bearbeiten gibt es eine letzte Schaltfläche: Bearbeiten mit externem Editor. Hiermit rufen Sie einen eingebundenen Editor auf, wenn die Fähigkeiten des eingebauten HTML-Editors nicht mehr ausreichen. Obwohl es wünschenswert ist, wenn man sämtliche Programmier- und Gestaltungsarbeit unter einer Oberfläche verrichten kann, sind die spezialisierten Funktionen eines reinen Texteditors manchmal recht nützlich. UltraDev liefert HomeSite für Windows und BBEdit Lite für Mac mit aus. In den Voreinstellungen von UltraDev können Sie die Standardeinstellungen der Editoren ändern und sogar mehrere externe Editoren einbinden.

1.6 Die Voreinstellungen von UltraDev anpassen

Unser erster Arbeitstag endet mit einer Besprechung der Voreinstellungen von UltraDev. Bevor Sie mit der Arbeit mit UltraDev so richtig loslegen, werden Sie vielleicht die eine oder andere standardmäßige Voreinstellung Ihren Erfordernissen anpassen wollen. So können Sie z.B. regeln, ob schwebende Fenster immer im Vordergrund angezeigt werden oder nicht. Bei kleineren Monitoren ist das durchaus sinnvoll, denn sonst können Ihnen die zahlreichen Paletten schnell die Sicht aufs Dokument verbauen. Gehen Sie nun in das Menü Bearbeiten > Voreinstellungen und lassen Sie uns das Voreinstellungsfenster näher unter die Lupe nehmen. Abb. 1.18 zeigt das Fenster mit den standardmäßigen Voreinstellungen.

Abbildung 1.18:  Über das Dialogfenster Voreinstellungen haben Sie Zugriff auf zahlreiche Programmoptionen.

Insgesamt werden 16 Kategorien geboten, über die Sie das Programm an Ihre Bedürfnisse anpassen können. Es folgt eine Übersicht, welche Einstellungen Sie in den einzelnen Kategorien tätigen können:

Wenn Sie gern mehr über die einzelnen Optionen in den Voreinstellungen wissen möchten, dann klicken Sie einfach auf den Hilfe-Button. Alle Optionen sind in der Online-Hilfe sehr gut dokumentiert. Klicken Sie sich in einer ruhigen Stunde einmal durch die verschieden Hilfeseiten. Sie werden so Manches entdecken, was das Leben leichter macht.

1.7 Zusammenfassung

Im Laufe des heutigen Tages sollten Sie mit der Oberfläche von UltraDev vertraut geworden sein. Wenn Sie sich noch nicht so ganz zurecht finden, erforschen Sie noch einmal die verschiedenen Fenster und Paletten. An den kommenden Tagen werden wir »richtige« Webseiten anlegen. Dann werden Sie schnell mit den einzelnen Werkzeugen vertraut werden.

Lassen Sie sich nicht einschüchtern von der Oberfläche des Programms. Es bietet eine Menge mächtiger Werkzeuge und es dauert eine gewisse Zeit, bis man sie meistert. Selbst heute noch muss ich manchmal noch alle Menüs durchsuchen, um eine bestimmte Funktion zu finden.

1.8 Fragen und Antworten

Frage:
Wir haben UltraDev bei uns im Büro auf einem Rechner installiert. Die einzelnen Optionen sehen aber ganz anderes aus als im Buch abgebildet. Woran liegt das?

Antwort:
UltraDev ist sehr flexibel, was die Erweiterung und Anpassung an den eigenen Arbeitsstil angeht. Wenn Sie mit einer Installation arbeiten, an der viele Einstellungen verändert worden sind, ist es gut möglich, dass die aktuelle Oberfläche nur noch wenig Ähnlichkeit mit der Standardkonfiguration hat. Um mit der Standardkonfiguration arbeiten zu können, müssten Sie das Programm neu installieren.

Frage:
Ich vergesse immer, wozu die einzelnen Icons der Objektpalette dienen, aber die Tooltipps nerven mich. Gibt es keine andere Möglichkeit?

Antwort:
Ändern Sie in den allgemeinen Voreinstellungen die Anzeige der Objektpalette auf Nur Text oder Symbole und Text. So sehen Sie immer, wozu ein Werkzeug dient und wählen sofort das richtige aus.

Frage:
Ich habe eine Webseite angelegt und verschiedene Elemente auf der Seite platziert, doch erhalte ich immer die Meldung, ich müsse vorher eine Site definieren. Was bedeutet das?

Antwort:
Morgen lernen wir, wie man eine Site definiert. Im Augenblick können Sie diese Meldung ignorieren und auf Abbrechen klicken.

1.9 Workshop

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

Quiz

  1. Wie können Sie Objekte in der Dokumentansicht auswählen?
  2. Die schwebenden Fenster sind sehr praktisch. Aber wenn Sie von einer Palette in die Dokumentansicht klicken, bleiben die Paletten im Vordergrund. Wie können Sie das ändern?
  3. Wie können Sie den HTML-Code eines bestimmten Tags ändern, ohne den Codeinspektor zu öffnen?

Übungen

  1. Verändern Sie die Voreinstellungen so, dass HTML-Tags in der Codeansicht farbig dargestellt werden. So behalten Sie einen besseren Überblick, wenn Sie den HTML- Code direkt bearbeiten.
  2. Binden Sie die auf Ihrem Rechner installierten Browser in die Browservorschau ein, um sich Ihre Website anzeigen zu lassen. Sie sollten sowohl den Internet Explorer wie den Netscape Navigator verwenden, um sicher zu sein, dass Ihre Website in beiden Browsern in etwa gleich aussieht.


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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