vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 2

Die WYSIWYG- Layoutwerkzeuge von UltraDev

Nachdem wir das Thema Paletten und Fenster erledigt haben, können wir zur Sache kommen. Mit UltraDev ist es ein wahres Vergnügen, optisch ansprechende und pflegeleichte Websites zu erstellen. Die Werkzeugkiste steht bereit! In diesem Kapitel lernen Sie

2.1 Ihre erste Website

Heute werden Sie verschiedene Übungen machen, die Ihnen das Wissen vermitteln, das Sie für die Erstellung von Standard-Websites brauchen. Es gibt allerdings keinen Grund, sich sklavisch an die Vorgaben zu halten. Es handelt sich hier um reine Übungsbeispiele.

Wenn Sie eine Website erstellen, müssen Sie im ersten Schritt eine neue Site definieren, damit UltraDev weiß, wo es Ihre Dateien ablegen soll. Wenn Sie während des ersten Tages versucht haben, eine Webseite anzulegen, ist es vielleicht zu Problemen gekommen, weil das Programm Sie aufgefordert hat, eine Site zu definieren. Man kann die verschiedenen Funktionen zwar auch testen, wenn man keine Site definiert, aber das Leben wird leichter, wenn man sich doch dazu durchringt.

Für sämtliche Links, die Sie von Ihrem Dokument aus auf andere Dokumente, seien es Grafiken oder andere HTML-Seiten, setzen, sollten Sie relative Pfadangaben verwenden. Setzen Sie auf eine Abbildung in Ihrem Dokument einen absoluten Link in der Form c:\myproject\images\cutepuppy.jpg, hat das zur Folge, dass im Browser des Anwenders ein unterbrochener Link angezeigt wird, wenn er die Seite vom Server abruft. Darum müssen Sie auf die Abbildung relativ zum HTML-Dokument verlinken: images\cutepuppy .jpg. Wenn Sie nun eine Site definieren, »weiß« UltraDev automatisch, wo die einzelnen Seiten liegen und wie sie miteinander verlinkt sind. Wenn Sie nun beispielsweise eine Seite bearbeiten und in einen anderen Ordner verschieben, aktualisiert UltraDev automatisch die betreffenden Links, und die Seite funktioniert weiter fehlerfrei, obwohl die Dateien jetzt an einem anderen Ort liegen.

Alles, was mit dem Planen und Verwalten einer Website zusammenhängt, werden wir in Tag 3, »Websites planen und verwalten«, behandeln. Fürs Erste begnügen wir uns mit der Einrichtung einer simplen Website, damit wir uns endlich auf die zentralen Funktionen der UltraDev-Entwicklungsumgebung stürzen können.

Eine Site definieren

Bevor Sie loslegen können, müssen Sie also eine Website definieren. Dazu öffnen Sie das Menü Site > Neue Site. Es öffnet sich das in Abb. 2.1 gezeigte Dialogfenster.

Abbildung 2.1:  Erster Arbeitsschritt: Definition einer Site.

Hier geben Sie den Namen Ihrer Site und den lokalen Stammordner an. Den Stammordner wählen Sie, indem Sie entweder den Pfad in das entsprechende Feld eintippen oder auf das Ordnersymbol rechts davon klicken. Daraufhin öffnet sich ein Fenster, über das Sie den Stammordner auswählen.

Als Nächstes müssen Sie das Kontrollfeld Liste mit lokalen Dateien automatisch aktualisieren aktivieren. Diese Option sorgt dafür, dass die lokale Dateiliste jedes Mal aktualisiert wird, wenn Sie neue Dateien in dieses Verzeichnis kopieren. Wenn Ihre Site sehr umfangreich ist und Hunderte von Dateien enthält, kann es sein, dass das Programm langsamer wird, wenn diese Option eingeschaltet ist. Sie sollten diese Option immer aktiviert lassen, außer Ihre Website ist wirklich sehr umfangreich.

Die Angaben zur Hyperlink-Verwaltung werden vom Programm benötigt, um die Hyperlinks zwischen Dokumenten zu prüfen. Wenn Sie vorhaben, absolute Links zu verwenden, vergewissern Sie sich, dass Sie die vollständige Webadresse, unter der Ihre Site später veröffentlicht wird, in das HTTP-Adressfeld eingeben. Ohne diese Information kann UltraDev die angegebenen Links nicht auf ihre Richtigkeit hin überprüfen. Eine absolute URL ist eine URL, die die vollständige Internetadresse der Website einschließlich des Servernamens enthält. Ein Beispiel für eine absolute URL ist http:// www.poisontooth.com. Relative URLs zeigen direkt auf ein Dokument innerhalb der Website ohne die Angabe des Servernamens.

Ich achte darauf, beim Anlegen einer Website so oft wie möglich nur relative Pfadangaben zu verwenden. Absolute Pfandangaben machen es schwierig, Websites auf einen anderen Server zu legen, da hier der Hostname geändert werden muss. Relative Pfadangaben sind wesentlich pflegeleichter, da man in diesem Fall eine Website problemlos in ein anderes Verzeichnis oder auf einen anderen Server verschieben kann.

Wenn Sie das Kontrollfeld Cache aktivieren, wird ein lokaler Cache aller Hyperlinks innerhalb einer Site erstellt. Hierdurch funktionieren Hyperlinks schneller, die Siteverwaltung und die Erstellung von Sitemaps wird beschleunigt.

Wenn Sie in der Kategorie Lokale Infos sämtliche Einstellungen vorgenommen haben, wechseln Sie im Fenster Site-Definition in die Kategorie Sitemap-Layout. Geben Sie in das Feld Homepage den Dateinamen index.html ein. Wenn Sie eine Website aufrufen, wird der Server automatisch als Erstes nach einer Datei mit diesem Namen suchen. Falls Sie den Personal Web Server bzw. den IIS von Microsoft verwenden, wird als Homepage gewöhnlich eine Datei mit der Bezeichnung default.htm angenommen. Von dieser Startseite aus werden Sie Ihre Website aufbauen.

Da eine Datei namens index.html natürlich noch nicht existiert, fragt das Programm Sie, ob Sie sie jetzt erstellen wollen. Klicken Sie auf OK und die Datei wird erzeugt.

Gehen Sie nun in das Menü Fenster > Dateien der Site, um sich alle aktuell vorhandenen Dateien anzeigen zu lassen. Da Sie wahrscheinlich bis jetzt nur eine Datei erzeugt haben, wird natürlich auch nur diese angezeigt. In Abb. 2.2 sehen Sie das Fenster einer Site, die schon etwas mehr Dokumente enthält. Sollte das Fenster auf Ihrem Bildschirm nicht so aussehen wie in der Abbildung gezeigt, überprüfen Sie bitte, ob der kleine Pfeil links unten in der Statuszeile nach links zeigt. Zeigt dieser Pfeil nämlich nach rechts, dann ist das Site-Fenster ausgeklappt und zeigt neben den Dateien im lokalen Ordner auch die Dateien der entfernten Site, d.h. die Dateien, die auf dem Webserver liegen. Diese Ansicht werden wir später brauchen, wenn wir Dateien auf den Server stellen bzw. aktualisieren.

Vom Site-Fenster aus haben Sie den schnellsten Zugriff auf die Dateien einer Site. Innerhalb dieses Fensters können Sie Dateien bequem verschieben, sie durch Klick in den Spaltenkopf sortieren lassen sowie mit Doppelklick öffnen.

Wenn Sie eine Datei mit gedrückter Maustaste aus einem Ordner in einen anderen verschieben, werden automatisch alle Links in diesem Dokument aktualisiert. Die Pfadangaben sind also weiterhin korrekt. Sie werden bald feststellen, dass Sie mit dem Site- Fenster häufig arbeiten werden.

Abbildung 2.2:  Das Site-Fenster zeigt  alle Dokumente inner- halb einer Site an.

Wenn alles geklappt hat, müssten Sie also im Site-Fenster jetzt die Datei index.html sehen. Mit einem Doppelklick öffnen Sie diese Datei im Dokumentfenster und stehen in den Startlöchern, um Ihre erste Webseite zu gestalten.

2.2 Gedanken zur Gestaltung

Ich kann mir vorstellen, was jetzt in Ihrem Kopf vorgeht. Sie haben bisher geduldig alle Schritte nachvollzogen, die Seite index.html geöffnet und der Cursor blinkt auffordernd links oben im Eck. Sie brennen darauf, mit der Arbeit loszulegen. Aber bevor wir uns ans Gestalten machen, möchte ich ein paar grundsätzliche Überlegungen zum Webdesign vorausschicken.

Wie sieht meine Zielgruppe aus?

Websites zu gestalten macht zwar einen Haufen Spaß, aber man sollte nicht völlig planlos an die Sache herangehen. Bevor Sie sich an die Umsetzung machen, sollten Sie sich darüber klar sein, welchen Zweck Ihre Website verfolgt und an welches Publikum sie sich richtet. Wenn Sie z.B. Ihre Dienste als Webdesigner anbieten wollen, dann wirkt es nicht sehr überzeugend, wenn Sie einem potenziellen Auftraggeber den Text Ihrer Bewerbungsmappe online auf grauem Seitenhintergrund präsentieren. Andererseits besteht wiederum keine Notwendigkeit, eine Website, die schnell gezielte Textinformationen bieten soll, mit langsam ladenden Grafiken zu befrachten. Ideal ist wie immer der goldene Mittelweg, also ein ausgewogenes Verhältnis von Grafik zu Text. Grafiken sollten die Textinformation ergänzen und verdeutlichen. Verzichten Sie auf visuelle Effekthaschereien.

Planen Sie für den kleinsten gemeinsamen Nenner

Wenn Sie mit Ihrer Website Informationen für ein möglichst breites Publikum zur Verfügung stellen wollen, dann seien Sie sich dessen bewusst, dass Ihre Zielgruppe ganz unterschiedliche Plattformen und Browser verwenden wird, um auf diese Informationen zuzugreifen. Ich selbst komme aus einem UNIX-Umfeld, und dort ist die einzige Benutzerschnittstelle oft nur eine spartanische Kommandozeile, um Informationen von einer Site abzurufen. Mit einem textbasierten Browser wie Lynx lässt sich die gewünschte Seite ruck-zuck öffnen und durchsuchen.

HTML wurde in der Absicht geschaffen, Dokumente zwischen den unterschiedlichsten Plattformen problemlos austauschen zu können. Grafiken sind aus dem Internet heute zwar nicht mehr wegzudenken, aber viele Abbildungen ließen sich ohne Weiteres durch ein oder zwei Zeilen Text ersetzen. Wenn Sie innerhalb des <IMG>-Tags das Attribut alt setzen, definieren Sie hiermit einen Text, der angezeigt wird, solange das Bild lädt. Gerade wenn Sie Seiten anbieten, die für Blinde oder Sehbehinderte bestimmt sind, ist ein alt- Text bei Bildern unverzichtbar.

Halten Sie Ihre Website sauber

Ich spreche jetzt nicht von den Inhalten, die Sie auf Ihrer Website zu publizieren gedenken. (Wobei ich, nebenbei bemerkt, obigen Rat auch gerne auf diesen Bereich ausdehnen möchte.) Nein, es geht jetzt um den reinen HTML-Code. Zugegeben, es ist recht verführerisch, sozusagen die Motorhaube zu öffnen und selbst ein bisschen am Code herumzubasteln. Achten Sie darauf, dass der Code nach solchen Eingriffen noch den HTML-Spezifikationen entspricht. Wir alle erliegen von Zeit zu Zeit der Verlockung, den Code von Hand zu verändern und all die Tricks einzusetzen, die wir uns im Lauf der Zeit so angeeignet haben. Und wem ist das noch nicht passiert: Da wird schnell mal ein <FONT>- Tag eingefügt und das schließende Tag vergessen. Im Grunde weiß jeder, wie es richtig gehört, und trotzdem vergisst es im Eifer des Gefechts. Und wenn Sie sich einen eigenwilligen Stil bei der HTML-Codierung angewöhnt haben, kann es geschehen, dass UltraDev ab einem bestimmten Punkt die Zusammenarbeit verweigert und den Code von sich aus in einer Form umschreibt, die sich nicht mit Ihren ursprünglichen Absichten deckt. Wenn Sie wollen, dass UltraDev selbst geschriebenen Code nicht verändert, dann deaktivieren Sie diese Funktion. Wie das geht, steht in Tag 1, »Die Programmumgebung von UltraDev«.

Viele HTML-Autoren setzen den Wert von HTML-Attributen nicht in Anführungszeichen (schreiben also <IMG SRC=test.gif>). Das ist nun etwas, was mich wirklich erbost. Zwar schreibt der HTML-Standard nicht für alle Attribute Anführungszeichen zwingend vor, sehr wohl aber die XHTML-Spezifikationen. Da nun aber in der Zukunft HTML vielleicht von XML/XHTML abgelöst wird, wäre es ein Leichtes, den Code den zukünftigen Standards anzupassen, indem man sämtliche Werte von Attributen einfach in Anführungszeichen setzt.

Was ist XML/XHTML?

XML, die Extensible Markup Language, ist eine Sprache, mit der andere Auszeichnungssprachen definiert werden können. Mit XML können Sie Ihre eigenen Tags definieren und damit jeden beliebigen Datentyp auszeichnen. Diese Tags können plattformübergreifend eingesetzt werden. Wenn Sie z.B. eine Datenbank mit Autos haben, könnten Sie mit XML eine spezifische Auto-Auszeichnungssprache definieren, die die einzelnen Autos und ihre Eigenschaften beschreibt.

XHTML ist eine Neudefinition von HTML auf der Grundlage der XML-Standards. XHTML verlangt eine exakte Einhaltung der Syntaxregeln und ist weniger »schwammig« als HTML.

2.3 Allgemeine Objekte und Seitenelemente

So, jetzt geht es aber wirklich los. Bevor wir den Besucher auf unsere eigentliche Website führen, bieten wir ihm eine Willkommensseite an, damit er sich ein Bild machen kann, welche Art von Website ihn dahinter erwartet. Ich erstelle zu Anschauungszwecken jeweils eine x-beliebige Dummyseite, um Ihnen die verschiedenen Erstellungsschritte vorzuführen. Sie können die Beispielseiten einfach nachbauen oder gleich damit beginnen, Seiten zu gestalten, die bereits auf Ihr künftiges Zielpublikum ausgerichtet sind.

Wenn Sie es noch nicht getan haben, dann gehen Sie jetzt bitte in das Site-Fenster und öffnen die Datei index.html mit einem Doppelklick. Das Dokument wird daraufhin in der Dokumentansicht angezeigt.

Geben Sie einen kurzen Begrüßungstext ein. In der Dokumentansicht können Sie den Text direkt eintippen und über das Menü Text nach Ihren Vorstellungen formatieren. Wie Sie in Abb. 2.3 sehen, habe ich einen Titel und eine kurze Beschreibung der Inhalte der Site eingegeben.

Abbildung 2.3:  Unsere erste Seite ist fertig.

Drücken Sie mehrfach auf Return, um den Text ein paar Zeilen vom oberen Fensterrand weg nach unten zu verschieben. Als Textgröße wurde »4« gewählt, als Stil »fett«. Um nach dem Willkommenstext eine einzelne Leerzeile einzufügen, halten Sie die Shift-Taste gedrückt und drücken auf Return (fügt <BR> ein statt <P>). Den Text formatieren Sie auf Mittelachse, indem Sie ihn markieren und die entsprechende Option im Menü Text > Ausrichten > Zentrieren wählen.

Einen Link erstellen

Um den Weiter-Link zu erstellen, markieren Sie den Text, den Sie in einen Link verwandeln wollen, und klicken ihn mit der rechten Maustaste bzw. mit Ctrl + Klick an. Daraufhin öffnet sich ein Kontextmenü, das verschiedene Optionen zur Textbearbeitung anbietet, darunter auch die Möglichkeit, einen Link zu erstellen. Ein anderer Weg geht über das Menü Modifizieren > Link erstellen oder die Tastenkombination Strg + L (Windows) bzw. Befehl + L (Mac).

Sobald Sie diese Option ausgewählt haben, öffnet sich das in Abb. 2.4 dargestellte Fenster Datei auswählen, über das Sie den Link definieren. Sie können einen Link auf eine beliebige lokale Datei setzen. Die Datei, auf die verlinkt wird, sollte sich jedoch im Site- Ordner befinden. Falls nicht, kopiert sie UltraDev dorthin. Das ist zwar ganz praktisch, aber es besteht doch eine gewisse Gefahr, dass Sie bald eine Unzahl von Kopien derselben Datei auf Ihrem Rechner verteilt haben.

Abbildung 2.4:  Wählen Sie eine Datei oder eine URL, auf die Sie verlinken wollen.

Weil ich noch keine Seite erstellt habe, auf die ich verlinken kann, gebe ich als Dateinamen einfach mainpage.html ein. Diese Seite wird später meine eigentliche Homepage. Wenn Sie einen Link erzeugen, können Sie angeben, ob er relativ zum Startordner oder zum Dokument, von dem aus verlinkt wird, erstellt werden soll. In den meisten Fällen ist das reine Geschmackssache. Wenn Sie die Schaltfläche Parameter anklicken, können Sie dem Link noch verschiedene Attribute zuweisen.

Wenn Sie den Link eingegeben haben, klicken Sie auf den Button OK und die erforderlichen Tags werden dem HTML-Code hinzugefügt. Der Link sollte in der Dokumentansicht in blauer Schrift und unterstrichen dargestellt werden.

Den Head-Bereich bearbeiten

Da unsere erste Seite nun fertig ist und sogar schon etwas Inhalt vorzuweisen hat, wollen wir ein paar unsichtbare Attribute bearbeiten - die Tags, die sich im Head-Bereich der Datei befinden. Hier können wir den Titel der Seite ändern oder den Browser zwingen, eine andere Seite zu öffnen, wenn er sich allzu lang mit der Begrüßungsseite aufhält.

Über das Menü Ansicht > Head-Inhalt lassen wir uns die entsprechenden Elemente anzeigen. Sie werden bemerkt haben, dass sich die Dokumentansicht leicht verändert hat. Am oberen Fensterrand wird nun ein separater Bereich angezeigt, in dem sich ein paar Icons befinden. Diese Icons stehen für diejenigen Tags im Head-Bereich des Dokuments, die bereits definiert worden sind. Um sie zu bearbeiten, öffnen Sie den Eigenschafteninspektor. Abb. 2.5 zeigt das Aussehen des Eigenschafteninspektors, nachdem das Icon für das <IMG>-Tag markiert wurde.

UltraDev fügt in den Head-Bereich eines Dokumentes automatisch zwei Tags ein: zum einen das <TITLE>-Tag mit dem Attribut untitled document, zum anderen ein <META>- Tag, das nähere Angaben zum Seiteninhalt liefert. Öffnen Sie den Eigenschafteninspektor, sofern Sie das noch nicht getan haben, und klicken Sie das Icon für das <TITLE>-Tag an. Geben Sie einen für die Begrüßungsseite geeigneten Titel ein. (»Willkommen« oder etwas Ähnliches.)

Abbildung 2.5:  Ändern Sie das <IMG>-Tag und andere <MEGA>-Tags per Eigenschafteninspektor. Hierzu muss der Head-Inhalt angezeigt werden.

Mit der Einführung der Werkzeugleiste in UltraDev 4.0 können Sie das <TITLE>-Tag direkt in der Dokumentansicht bearbeiten. Um den Titel einer Seite zu ändern, müssen Sie ihn nur noch in das Feld Titel in der Werkzeugleiste eingeben. Das <TITLE>-Tag ist allerdings das einzige Head-Element, das Sie auf diese Weise bearbeiten können.

Zusätzlich wollte ich meine Seite noch um eine refresh-Anweisung ergänzen, sodass der Anwender nach einer bestimmten Zeit automatisch von der Begrüßungsseite auf meine Homepage umgeleitet wird, ohne dass er hierzu auf einen Link klicken muss. Zu diesem Zweck wählen Sie in der Unterpalette Head der Objektpalette die Option Aktualisierung einfügen. Ein anderer Weg führt über das Menü Einfügen > Head- Tags > Aktualisieren. Es öffnet sich ein Fenster, das Sie nach der URL fragt, die geladen werden soll, und wie lange der Browser warten soll, bis er die neue Seite lädt. Wenn Sie keine eigene Seite haben, auf die Sie verlinken können, können Sie auch eine externe URL laden lassen (wie z.B. http://www.poisontooth.com). Keine Bange, diese und jede andere Eigenschaft eines Objekts auf der Seite können Sie jederzeit ändern. Hierzu müssen Sie es lediglich auswählen und die entsprechenden Werte im Eigenschafteninspektor ändern.

Sie können sich auf die refresh-Anweisung nicht in allen Fällen verlassen, denn sie wird von einigen älteren Browsern nicht verstanden. Wenn Sie daher von der Begrüßungsseite keinen Link auf die Folgeseite setzen, stecken Ihre Besucher unter Umständen in einer Sackgasse und gelangen niemals auf Ihre Website. Auch für Suchmaschinen kann es schwierig werden, Ihre Seiten zu indizieren, wenn Sie nur die refresh-Anweisung verwenden, um Besucher auf Ihre Hauptseiten zu leiten.

Allgemeine Seiteneigenschaften

Wie Sie bereits wissen, können Sie den Titel Ihrer Seite verändern, indem Sie das entsprechende Icon im Head-Inhalt anwählen und den neuen Titel im Eigenschafteninspektor eingeben, oder indem Sie direkt über die Werkzeugleiste gehen. Nun gibt es aber in UltraDev noch andere Möglichkeiten, um die allgemeinen Seiteneigenschaften (Seitentitel eingeschlossen) wie Ränder, Hintergrundfarben oder die Darstellung von Links zu verändern. Über das Menü Modifizieren > Seiteneigenschaften können Sie die Grundeinstellungen für jede beliebige Seite ändern. Abb. 2.6 zeigt das geöffnete Fenster Seiteneigenschaften.

Abbildung 2.6:  Das Fenster Seiteneigenschaften erlaubt die Veränderung zahlreicher Attribute im Head- und im Body-Bereich eines HTML-Dokuments.

Wie Sie sehen, können Sie hier einige nützliche Einstellungen vornehmen:

Dieses Fenster werden Sie ziemlich oft brauchen. Seit dieses Feature in Dreamweaver eingeführt wurde, lässt mir die Frage keine Ruhe, warum man diese Funktionen in ein eigenes Fenster ausgelagert hat und nicht in den Eigenschafteninspektor integriert. Vielleicht nimmt man sich dieses Problems in einer kommenden Version von UltraDev an.

Wenn Sie alle Einstellungen für Ihre Seite vorgenommen haben, dann schließen Sie dieses Fenster mit einem Klick auf den OK-Button.

Eine Seitenvorschau anzeigen lassen

Obwohl die Entwicklungsumgebung von UltraDev schon ein ziemlich perfektes Bild von der endgültigen Seite liefert, kann es manchmal doch leichte Abweichungen zu dem geben, was Sie im Browser angezeigt bekommen. Über Menü Datei > Vorschau in Browser wählen Sie einen Browser aus, mit dem Sie sich eine Seite anzeigen lassen. Es ist eine gute Idee, sich eine Seite sowohl im Internet Explorer als auch im Netscape Navigator anzuschauen. In einigen Fällen könnte es sonst eine herbe Überraschung geben.

Das Vorschausystem von UltraDev funktioniert etwas anders als das vergleichbarer HTML- Editoren. Anstatt die aktuell bearbeitete Datei direkt im Browser anzuzeigen, erzeugt UltraDev eine temporäre HTML-Datei, wenn die Vorschaufunktion aufgerufen wird. Somit wird verhindert, dass eine Seite im Cache des Browsers gespeichert wird und beim nächsten Aufruf der Seite von dort geladen und eventuell nicht aktualisiert wird.

Unterhalb des Befehls Vorschau in Browser findet sich auch der Befehl Zielbrowser überprüfen. Diese Funktion ist nicht dazu gedacht, HTML-Code zu überprüfen. Sie dient vielmehr dazu zu testen, ob JavaScript-Code, den Sie einer Seite hinzugefügt haben, einwandfrei funktioniert. Zu diesem Feature später mehr.

Rechtschreibprüfung

Ihre erste mit UltraDev erstellte Seite ist jetzt so gut wie fertig. Doch bevor Sie Ihre Begrüßungsseite speichern und schließen, sollten Sie sich noch vergewissern, dass sich nicht irgendwelche Tippfehler in Ihren Text eingeschlichen haben. Diese Kontrolle nimmt uns die Rechtschreibprüfung von UltraDev ab. Schließlich wollen wir eventuelle Rechtschreibschwächen nicht der ganzen Welt präsentieren.

Über das Menü Text > Rechtschreibung prüfen rufen Sie den eingebauten Korrektor von UltraDev auf. Es öffnet sich das in Abb. 2.7 gezeigte Fenster, dessen Funktionen jedem verständlich sein dürften, der schon einmal mit einem Textprogramm gearbeitet hat.

Abbildung 2.7:  Mit UltraDev können Sie die Dokumente Ihrer Website auf korrekte Orthografie überprüfen lassen.

Findet die Rechtschreibprüfung ein unbekanntes Wort, können Sie es Ihrem persönlichen Wörterbuch hinzufügen, es ignorieren oder ändern. Wenn Sie eine Website erstellen, die sich mit EDV-Themen beschäftigt, werden Sie bald feststellen, dass Sie Ihrem Wörterbuch einige Einträge werden hinzufügen müssen. Man hat so den Eindruck, dass Wörterbuch- Programme der Entwicklung immer einen Schritt hinterher hinken, was die Integration der ins Endlose ausufernden EDV-Terminologie angeht.

Nachdem Ihr Dokument nun den letzten Feinschliff erhalten hat, speichern und schließen Sie es. Höchste Zeit, dass wir uns um die Homepage kümmern.

2.4 Tabellen

Die Erstellung der Begrüßungsseite dürfte Ihnen nicht schwer gefallen sein. Als Nächstes werden wir die Homepage erstellen, die sozusagen das Portal zu Ihrer Site ist und die Navigation zu anderen Seiten ermöglicht. Zu diesem Zweck werden wir ein paar fortgeschrittenere Mittel und Techniken einsetzen. Erstellen Sie über das Menü Datei > Neu ein neues Dokument. Ein völlig unbeschriebenes Arbeitsblatt öffnet sich. Unser voriges Dokument hatte ja nicht viel mehr zu bieten als ein bisschen Text und einen Link. Alles, was uns an Layout-Künsten abverlangt wurde, bestand darin, den Text so zu formatieren, dass er im Browser zentriert ausgegeben wird. Für unsere Homepage werden wir uns inhaltlich und gestalterisch wohl etwas mehr ins Zeug legen müssen.

Für die Homepage wählen wir die klassische Einteilung: Menü links, Inhalt rechts. Dieses bewährte Layout lässt sich mit mehreren Techniken realisieren (und - mein Ehrenwort - Sie werden sie alle kennen lernen). Die gängigste Methode arbeitet mit Tabellen, und genau das werden auch wir jetzt tun.

Tabellen einfügen

Tabellen waren ursprünglich dafür gedacht, Zahlenmaterial im Web in einer Art Datenblattansicht zu präsentieren. Zunächst gab es keine Möglichkeit, Tabellen zu formatieren. Das Erscheinungsbild wurde hauptsächlich vom Tabelleninhalt und vom anzeigenden Browser bestimmt. Heute dienen Tabellen in erster Linie dazu, beliebige Elemente auf der Seite in ein Layoutschema einzufügen - Bilder, Text, kurz alles, was sich in ein HTML-Dokument einbinden lässt.

Um eine Tabelle einzufügen, klicken Sie auf das Tabellen-Icon der Objektpalette oder wählen Sie Menü Einfügen > Tabelle. Es öffnet sich das in Abb. 2.8 dargestellte Fenster Tabelle Einfügen. Hier legen Sie den genauen Tabellenaufbau fest. Sie können diese Werte nachträglich ändern, indem Sie den HTML-Code direkt bearbeiten oder die Tabelle auswählen und das Menü Modifizieren > Tabelle aufrufen.

Abbildung 2.8:  Die meisten Attribute einer Tabelle  können Sie direkt bei ihrer Erstellung wählen.

Für unser Layout genügt eine Tabelle mit einer Zeile und zwei Spalten: Die linke Spalte nimmt das Menü auf, die rechte den Inhalt. Ich habe eine feste Tabellenbreite von 600 Pixel vorgegeben. Damit kann ich sicher sein, dass die Seite bei nahezu allen Auflösungen in voller Breite angezeigt wird. Bei Zellenabstand habe ich den Wert »5« eingegeben, sodass zwischen dem Menübereich und dem Inhaltsbereich genügend Abstand bleibt. Wenn Sie alle Einstellungen getroffen haben, wird durch Klick auf den OK-Button die Tabelle ins Dokument eingefügt.

Der Wert Zellenabstand regelt den Abstand (in Pixel) zwischen den einzelnen Zellen einer Tabelle. Mit Zellauffüllung bestimmten Sie den Abstand zwischen dem Inhalt der Zelle und der Zellwand.

Zellengröße verändern

Die so erzeugte Tabelle entspricht nicht ganz unseren Zwecken, da beide Spalten gleich breit sind. Für unser Vorhaben muss aber die linke Spalte deutlich schmäler sein als die rechte. Um die Größe einer Zelle zu verändern, setzen Sie den Cursor an den Rand einer Zelle. Der Cursor verwandelt sich in zwei senkrechte Linien mit zwei nach außen zeigenden Pfeilen. Mit gedrückter Maustaste können Sie nun die Breite der Zelle verändern, indem Sie die Begrenzungslinie der Zelle an die gewünschte Position verschieben. Analog können Sie auch die Höhe von Zellen verändern, was aber für unsere Zwecke momentan nicht erforderlich ist.

Wenn Sie die Größe der Zellen angepasst haben, klicken Sie in eine der Zellen und öffnen den Eigenschafteninspektor. Die obere Hälfte des Fensters dient dazu, Text zu formatieren. Wenn der Eigenschafteninspektor eingeklappt ist und nur die Minimaleinstellungen zeigt, können Sie ihn durch Klick auf das Pfeil-Icon rechts unten aufklappen und sich die erweiterten Einstellungen anzeigen lassen. In 2.9 zeigt die Eigenschaften unserer Tabelle. Anhand dieser Eigenschaften werden wir einige allgemeine Attribute kennen lernen, die uns später auch bei anderen Objekten begegnen werden. Wenn Sie wissen möchten, welche Bedeutung ein einzelnes Attribut hat, müssen Sie lediglich den Mauszeiger darüber platzieren und warten, bis sich der Tooltipp öffnet. Keine Angst, es geht gleich weiter mit dem Webdesign.

Abbildung 2.9:  Die Eigenschaften einer Tabelle eignen sich gut, um ein paar der zahlreichen Features von UltraDev vorzustellen.

Im Eigenschafteninspektor gibt es also einige allgemeine Einstellungen wie Größe, Farbe, Links und Texteigenschaften, die Sie individuell anpassen können. Schauen wir uns die einzelnen Einstellungen einmal genauer an.

Größe von Objekten

Die untere Hälfte des Fensters zeigt alle Attribute, die die Tabellenzelle betreffen. Im Feld B wie Breite können Sie die Größe der Zelle ablesen. Wenn Sie durch Verschieben nicht exakt die gewünschte Zellbreite einstellen können, geben Sie den Wert in dieses Feld ein und drücken Sie auf Enter. Sie können die Größe einer Zelle auch an das Objekt anpassen, das sie enthält. Hierzu geben Sie nach dem Zahlenwert das %-Zeichen ein und die Größe der Zelle wird genau an die relative Breite des Objekts angeglichen. In der Dokumentansicht wird die Tabelle sofort mit den richtigen Proportionen aktualisiert.

Farben zuweisen

Wenn Sie Webseiten gestalten, müssen Sie ständig Farben zuweisen. Am bequemsten geht das, wenn Sie auf das Farbfeld des Eigenschafteninspektors klicken. Es öffnet sich eine Farbpalette, aus der Sie eine von 212 websicheren Farben auswählen. Sie können die Darstellung der Farbpalette ändern, indem Sie auf den kleinen Pfeil rechts oben in der Farbpalette klicken.

Zwei weitere Optionen machen das Leben leichter, wenn Sie sich von der Palette der websicheren Farben allzu sehr eingeschränkt fühlen: die Pipette und die Systemfarbpalette.

Um die Pipette zu verwenden, klicken Sie auf das Farbfeld, und der Cursor wird zur Pipette. Die Pipette nimmt die Farbe des Objekts auf, über dem Sie sie platzieren. Somit können Sie von allem, was auf dem Monitor angezeigt wird, die Farbe aufnehmen, sogar vom Arbeitsbereich selbst. Wenn Sie zu den standardmäßigen Farbeinstellungen zurückkehren möchten, klicken Sie auf das Default-Farb-Icon rechts oben in der Farbpalette (ein durchgestrichenes Quadrat).

Ein präziserer Weg der Farbauswahl ist die Verwendung der Systemfarbpalette. Öffnen Sie wieder die Palette mit den websicheren Farben und klicken Sie auf das Icon ganz rechts oben in der rechten Ecke der Palette. Hierauf öffnet sich die spezifische Farbpalette Ihres Systems. Farben aus dieser Palette sind nicht websicher.

Websichere Farben sind ein Satz von Farben, der auf Systemen, die nur 256 Farben darstellen können, korrekt angezeigt wird. In einer 8-Bit-Umgebung ist die Verwendung dieser Farben Ihre einzige Garantie, dass die Darstellung Ihrer Grafiken annähernd dem Original entspricht.

Nun werden heutzutage Computer mit Grafikkarten mit einer Farbtiefe von 16 oder 24 Bit ausgestattet, sodass man sich wegen der Farbdarstellung eigentlich keine Gedanken mehr machen muss. Wenn Sie ausschließlich Websites für die jüngste Browsergeneration unter Verwendung der neuesten Technologien entwerfen, dann sind websichere Farben sowieso kein Thema mehr für Sie. Über kurz oder lang werden sie der digitalen Frühgeschichte angehören.

Links definieren

Wenn Sie Websites erstellen, werden Sie naturgemäß oft Dokumente untereinander verlinken. Der Eigenschafteninspektor von UltraDev bietet Ihnen hierfür drei unterschiedliche Techniken an. Die erste Möglichkeit besteht darin, per Tastatur den Namen einer Datei oder eine URL in das entsprechende Feld einzugeben. Die zweite Möglichkeit ist, auf das Ordner-Symbol neben dem Feld Hyperlink zu klicken. Es öffnet sich das Fenster Datei auswählen, in dem Sie per Mausklick die gewünschte Datei selektieren.

Die dritte Möglichkeit besteht darin, mit gedrückter Maustaste einen Link direkt auf eine Datei zu ziehen. Hierzu müssen das Dokumentfenster und die Site-Ansicht nebeneinander geöffnet sein. Neben dem Ordner-Symbol sehen Sie ein weiteres Icon, das an eine Art Fadenkreuz erinnert. Wenn Sie dieses Icon anklicken und mit gedrückter Maustaste ziehen, zeigt UltraDev ein »Gummiband« zwischen dem Icon und der aktuellen Position des Mauszeigers an. Wenn Sie nun den Mauszeiger auf eine beliebige Datei im lokalen Ordner der Site-Ansicht ziehen, wird die Auswahl im Dokumentfenster direkt mit dieser Datei verlinkt. Sie können auf diese Weise auch auf eine Datei im Windows Explorer verlinken. Diese Funktion verzahnt die Oberfläche von UltraDev mit dem Betriebssystem.

Nun ist diese »Gummiband-Methode« zwar ganz praktisch, wenn Sie Dateien innerhalb kleinerer Websites verlinken wollen. Enthält der Lokale Ordner der Site-Ansicht aber erst einmal einige Hundert Dateien, dann wird es schwierig, die gesuchte Datei anzufahren. Ich habe viel Zeit damit verbracht, den Mauszeiger in das Site-Fenster zu ziehen und zu warten, bis die Anzeige zur gesuchten Datei scrollt, nur um dann mit anzusehen, wie diese Datei übersprungen wird. Manchmal erledigt man die Dinge einfach besser auf die altmodische Art.

Wozu dient eigentlich die Option Datenquellen, die in manchen Dialogfenstern angezeigt wird?

Die Option Datenquellen verbindet ein ausgewähltes Element mit einer Datenbank, sodass es dynamisch ausgetauscht werden kann. Dieses Thema wird ausführlich in Woche 2 behandelt. Im Augenblick können Sie diese Einstellungen übergehen.

Textattribute

Der Eigenschafteninspektor zeigt an, welche Attribute dem Text zugewiesen werden, den Sie in die Tabellenzelle eingeben. Wie Text formatiert wird, hängt eigentlich nicht mit der Tabelle oder den einzelnen Zellen zusammen. Diese Einstellungen werden bei allen Elementen angezeigt, die Text aufnehmen können, seien es Tabellen, Ebenen oder die Seite als solche. Wenn Sie Text in der Dokumentansicht eingeben, können Sie ihm wie gesagt über den Eigenschafteninspektor bestimmte Attribute zuweisen bzw. diese verändern. Folgende Einstellungsmöglichkeiten stehen zu Ihrer Auswahl (von links nach rechts):

Diese Eigenschaften werden in Zukunft ständig brauchen, um Text zu bearbeiten. Das Menü Text bietet noch zusätzliche Optionen der Textformatierung an. Aber nun weiter mit unserem Projekt.

Layout von Bildern und Texten

Sie haben jetzt das nötige Wissen, um in die erstellte Tabelle Inhalt einfügen zu können. Ich habe die Breite der linken Spalte auf 150 Pixel gesetzt und der rechten Spalte etwas Farbe verpasst, indem ich dieser Zelle eine Hintergrundfarbe zugewiesen habe. Mein Plan ist es, eine Website zu gestalten, die ein paar Antiquitäten aus meiner Computersammlung zeigen soll. Zu diesem Zweck möchte ich in den Inhaltsbereich ein paar Abbildungen und beschreibenden Text einfügen.

Bilder einfügen

Lassen Sie uns als Erstes ein paar Bilder in die rechte Spalte der Tabelle einsetzen. Platzieren Sie hierzu den Cursor in der rechten Hälfte der Tabelle und klicken Sie auf das Bild-Icon in der Werkzeugpalette oder gehen Sie über das Menü Einfügen > Bild. Wählen Sie eine Abbildung aus, die im lokalen Ordner Ihrer Site liegt. Wenn Sie eine Grafik auswählen, die nicht in diesem Ordner liegt, fragt UltraDev, ob es sie dorthin kopieren soll. Sie können auch eine URL zu einer Datei eingeben, die auf einem entfernten Server liegt. Der Nachteil ist, dass UltraDev nur lokal gespeicherte Bilder anzeigen kann. Die Dokumentansicht Ihrer Seite kann dann allerdings etwas verwirrend aussehen, wenn Sie alle Abbildungen auf Ihrer Seite von entfernten Servern aufrufen.

Wenn Sie Grafiken auf einer Seite platzieren, können Sie wählen, ob der Textfluss die Position der Grafiken bestimmt, oder ob Sie Tabellen und Ebenen für ein präzises Layout von Text und Grafik verwenden. Jeder Methode hat ihre Vor- und Nachteile. Markieren Sie die eben eingefügte Grafik und lassen Sie sich ihre Attribute im Eigenschafteninspektor anzeigen.

Text und Bilder ausrichten

Der Großteil der Attribute, die Ihnen zu dieser Grafik angezeigt werden, dürfte Ihnen nun schon bekannt sein, wie z.B. die Möglichkeit, die Breite oder Höhe zu verändern oder einen Link auf eine Datei zu setzen. Wenden wir uns als Nächstes dem Popup-Menü Ausrichten zu. Hier stellen Sie ein, ob und in welcher Form Text ein Bild umfließt. Sie haben verschiedene Optionen zur Auswahl: oben, unten usw. Wichtiger für uns ist die Ausrichtung links bzw. rechts. Wählen Sie rechts, fließt der Text um den linken Bildrand. Ausrichtung links lässt den Text um den rechten Bildrand fließen. Abb. 2.10 zeigt ein Bild mit Ausrichtung rechts.

Abbildung 2.10:  Mit dem Attribut Ausrichten wählen Sie, wie Text eine Abbildung umfließt.

Text und Bild über das Attribut Ausrichten zu positionieren empfiehlt sich vor allem dann, wenn Ihre Website auf den unterschiedlichsten Browsern und Plattformen verfügbar sein soll. Wenn Sie eine exakte Positionierung des Textes erzwingen bzw. eine bestimmte Schriftart verwenden, kann es Ihnen passieren, dass Ihr Layout auf kleineren Bildschirmen »zerschossen« wird oder das System eine andere Schrift verwendet, wenn Ihre Schrift nicht vorhanden ist. Wenn Sie die Position von Bildern und Text nur über das Attribut Ausrichten steuern, regelt sich deren Verteilung automatisch nach der Größe des Browserfensters. Ist der Text zu lang, umfließt er das Bild und dehnt das Fenster (bzw. den »Container«, in dem er steht) so weit wie nötig.

Wenn Sie keine ganz exakten Layoutvorgaben einhalten müssen, sollten Sie diese Art der Positionierung verwenden. HTML wurde ja eigentlich geschaffen, um Dokumente auf den unterschiedlichsten Plattformen verfügbar zu machen. Und wenn Sie Layouts erstellen können, die diesem Grundgedanken gerecht werden, ist das eine gute Sache.

Vergessen Sie auch nicht, Grafiken so oft wie möglich mit einem <ALT>-Tag zu versehen, damit Ihre Dokumente auch für reine Textbrowser lesbar sind.

Bilder exakt positionieren

Wenn Sie allerdings strikte Layoutvorgaben (exakter Stand von Bild und Text usw.) erfüllen müssen, werden Sie zugegebenermaßen mit den <ALIGN>-Tags nicht weit kommen. Dann ist es besser, mit Tabellen zu arbeiten, um die verschiedenen Elemente auf Ihrer Seite auszurichten. Da Sie den Zellen einer Tabelle exakte Breiten in Pixel zuweisen können, haben Sie vollständige Kontrolle über Ihr Layout.

Abb. 2.11 zeigt eine 2x2-Tabelle, die ich meiner Seite hinzugefügt habe. Zwei Zellen sind mit Text gefüllt, die anderen mit Abbildungen. Obwohl dieses Layout sehr einfach ist, können Sie es nur mithilfe von Tabellen umsetzen (oder mit Ebenen, aber so weit sind wir noch nicht).

Abbildung 2.11:  Zur Umsetzung von komplexeren Layouts benötigen Sie Tabellen.

Wenn Sie die einzelnen Elemente einer Seite mit Tabellen positionieren, empfiehlt es sich, Tabellen und Zellen feste Breiten zuzuweisen, um eine vollständige Kontrolle über das Layout zu bekommen. Ferner müssen Sie die Werte für Rahmen, Zellraum und Zellauffüllung im Eigenschafteninspektor auf »0« setzen. Nur so erreichen Sie, dass der Inhalt Ihrer Tabelle dort angezeigt wird, wo er sein soll - ohne störende Spalten oder gegen einander versetzt. Achten Sie darauf, dass die addierten Breiten der einzelnen Zellen der Gesamtbreite der Tabelle entsprechen. Stimmen diese Werte nicht überein, kann es sein, dass die Tabelle im Browser falsch dargestellt wird.

Zellen verbinden und Tabellen verschachteln

Die Breiten untereinander liegender Zellen in einer HTML-Tabelle müssen in jeder Zeile gleich sein, ebenso kann eine Zeile natürlich nur eine Höhe haben. Nun könnte man vielleicht meinen, das stelle eine Einschränkung bei der Positionierung von Inhalten dar, dem ist aber nicht so. In jede Zelle können Sie eine weitere Tabelle einfügen und so den Zellraum nochmals feiner unterteilen.

Außerdem können Sie mehrere Zellen zu einer verschmelzen oder eine Zelle in mehrere aufteilen. Um Zellen zu verbinden, klicken Sie mit gedrückter Strg-Taste (Windows) bzw. Befehl-Taste (Mac) in die Zellen, die Sie verbinden möchten. (Die Zellen müssen in derselben Zeile bzw. Spalte liegen.) Über das Menü Modifizieren > Tabelle > Zellen verbinden verschmelzen Sie die ausgewählten Zellen zu einer einzigen.

Im Menü Modifizieren > Tabelle finden Sie nicht wenige Befehle, um das Layout von Tabellen zu verändern. Nachfolgend eine Übersicht, welche Auswirkungen die Anwendung dieser Operationen auf eine Zelle hat:

Die Verwendung verschachtelter Tabellen und der verschiedenen Modi der Zellteilung bzw. -verschmelzung gibt Ihnen ein sehr flexibles Gestaltungsinstrument an die Hand, das Ihnen die exakte Umsetzung auch sehr aufwändiger Layouts erlaubt.

Kompromisse bei der Layoutkontrolle

Sie haben jetzt zwei ganz unterschiedliche Layouttechniken kennen gelernt, die eine sehr locker und variabel, die andere ganz präzise. Nun möchte ich Sie mit einer Methode bekannt machen, die zwar Tabellen verwendet, aber auf eine Art und Weise, dass sie sich den unterschiedlichen Bildschirmgrößen flexibel anpassen.

Wenn Sie Tabellen bzw. Zellen feste Breiten und Höhen (in Pixel) zuweisen, haben Sie als Designer die perfekte Kontrolle über Ihr Layout. Sind die Layoutvorgaben jedoch nicht so streng, genügt es, dass Sie Tabellen bzw. Zellen relative Breiten (in Prozentwerten) zuweisen. Damit halten Sie Bild und Text in der gewünschten Anordnung zusammen, aber die Zellen können sich flexibel an die jeweilige Größe des Browserfensters anpassen. So können Sie Seitenelemente zwar nicht pixelgenau positionieren, haben aber trotzdem weit gehende Kontrolle über die Gestaltung Ihrer Seite. Die meisten Designs lassen sich sehr gut mit Tabellen relativer Breite umsetzen, außer Sie verwenden Grafiken, die Sie in mehrere Slices aufgeteilt haben, die exakt positioniert werden müssen.

Sie können sogar noch einen Schritt weitergehen und überhaupt keine Breiten oder Höhen zuweisen. Dann wird der Tabelleninhalt je nach Fenstergröße umbrochen. Wie schon gesagt, ist der Grundgedanke von HTML ja der, Dokumente auf den unterschiedlichsten Plattformen verfügbar zu machen. Dieser Anforderung werden Sie am besten gerecht, wenn Sie die Kontrolle über das Layout dem Browser des Anwenders überlassen.

Haben Sie Tabellen bzw. Zellen schon feste Werte zugewiesen, können Sie diese festen Breiten über den Befehl im Menü Modifizieren > Tabelle > Breite in Prozent konvertieren in relative Breiten umwandeln. Umgekehrt können Sie auf demselben Weg relative Breiten in Pixel konvertieren. Über den Befehl im Menü Modifizieren > Tabelle > Zellhöhen/Zellbreiten löschen können Sie sämtliche Höhen- bzw. Breitenzuweisungen rückgängig machen. Diese Befehle stehen nur dann zur Verfügung, wenn Sie die ganze Tabelle ausgewählt haben.

Bevor Sie sich daran machen, im Rahmen von größeren Projekten aufwändige Layouts mithilfe von Tabellen umzusetzen, sollten Sie zuvor ein bisschen mit Tabellen experimentieren. Tabellen sind ein höchst nützliches Gestaltungswerkzeug, haben allerdings so ihre Tücken, die man kennen sollte, um ihnen wirksam zu begegnen.

Ein Beispiel: Sie setzen Grafiken oder Teile einer zerschnittenen Grafik in eine Tabelle ein. Statt nun die Grafiken nahtlos aneinander zu fügen, sehen Sie in der Vorschau zwischen den Bildteilen einen Spalt, durch den der Hintergrund durchscheint. Wenn das der Fall ist, müssen Sie die HTML-Quelle öffnen und den Code überprüfen. Der Grund für diese fehlerhafte Anzeige kann darin liegen, dass UltraDev ohne ersichtlichen Grund zwischen den <TD>-Tags und den <IMG>-Tags einen Leerschritt eingefügt hat. Diesen Leerschritt müssen Sie dann von Hand löschen.

Der Tabellen-Layoutmodus

UltraDev 4.0 kommt mit einem neuen Layoutmodus, der die Umsetzung komplexer Layouts mit der Tabellentechnik wesentlich einfacher macht. Normalerweise würden Sie die Größe von Zellen durch Teilen oder Verbinden von Hand zu ändern, um sie an das Format von Bild oder Text anzupassen. Im Layoutmodus definieren Sie einfach die Bereiche, die Inhalt aufnehmen sollen, ohne sich über Breiten- oder Höhenangaben Gedanken machen zu müssen.

Um in den Tabellen-Layoutmodus umzuschalten, klicken Sie unten in der Objektpalette auf das rechte Icon. In diesem Modus stehen Ihnen zwei neue Werkzeuge zur Verfügung (auszuwählen unter Layout: Layoutzelle zeichnen und Layouttabelle zeichnen).

Stellen Sie sich den Tabellenmodus wie ein Skizzenblatt vor, das Sie nach Belieben frei unterteilen können. Im Tabellen-Layoutmodus klicken Sie in die Arbeitsfläche und ziehen ein leeres Eingabefeld auf. Abb. 2.12 zeigt eine leere Layouttabelle.

Abbildung 2.12:  Ziehen Sie im Tabellen-Layoutmodus ein Eingabefeld an der Stelle auf, an der Sie Inhalt einfügen möchten.

In dieser Layouttabelle können Sie Layoutzellen frei platzieren, so wie Sie vorher die Tabelle platziert haben. Diese Zelle können Sie pixelgenau an einer beliebigen Stelle der Arbeitsoberfläche positionieren. In Abb. 2.13 sehen Sie die Layouttabelle, der einige Layoutzellen hinzugefügt wurden.

Abbildung 2.13:  Durch Einfügen einer Layoutzelle in die Layouttabelle können Sie Inhalt beliebig platzieren.

Sie können diese Layoutzellen innerhalb der Layouttabelle beliebig verschieben und skalieren. Klicken Sie auf die Ecke einer Zelle und verschieben Sie sie mit gedrückter Maustaste an eine andere Position. Wenn Sie die Begrenzungslinie einer Zelle einmal anklicken, wird sie markiert und es erscheinen Anfasser, mit denen Sie die Zelle nach Bedarf vergrößern oder verkleinern können.

Dabei sollten wir nicht vergessen, dass im Tabellen-Layoutmodus tatsächlich bloß eine Tabellenstruktur erzeugt wird, die auf der Größe und Position der Zellen basiert, die wir in diesem Modus eingefügt haben. Sie können jederzeit in die normale Dokumentansicht zurückschalten, indem Sie im Feld Ansicht der Objektpalette auf die linke Schaltfläche (Standardansicht) klicken. Der Tabellen-Layoutmodus ist wirklich ein tolles Werkzeug, um Layouts exakt umsetzen, vor allem, wenn man mit Tracing-Bildern arbeitet.

2.5 Menüleisten und Buttons

Nachdem wir auf unserer Seite einen »Containerbereich« zur Aufnahme von Bild- und Textelementen definiert haben, brauchen wir noch ein Menü, um die übrigen Seiten unserer Site ansteuern zu können. Es gibt nun mehrere Möglichkeiten, eine Navigationsstruktur umzusetzen. Für welche dieser Möglichkeiten Sie sich entscheiden, ist letztlich Geschmacksache, wobei allerdings die Ladezeit der Seiten ein wichtiges Entscheidungskriterium darstellt.

Linklisten

Die häufigste Form der Navigation ist die Linkliste. Textlinks laden sehr schnell, sind leicht zu erstellen und zu pflegen. In Tag 1 haben Sie gelernt, wie Sie einen Textlink zu einem anderen Dokument erzeugen können. Die Erstellung einer Linkliste funktioniert nicht anders, allerdings können Sie das Verfahren etwas rationalisieren. Tippen Sie zunächst in der Dokumentansicht die einzelnen Menüpunkte untereinander in der Reihenfolge ein, wie sie später angezeigt werden sollen. Geben Sie einen Begriff ein und springen Sie mit Shift + Enter in die nächste Zeile. Wenn Sie nur Enter drücken, wird im HTML-Code ein <P>-Tag eingefügt und Sie erhalten eine Leerzeile zwischen den einzelnen Menüpunkten. Natürlich können Sie zur Formatierung der Linkliste auch eine Tabelle verwenden.

Wenn Ihre Menüstruktur fertig angelegt ist, wählen Sie die einzelnen Punkte der Reihe nach aus und klicken Sie sie mit der rechten Maustaste (Windows) bzw. mit gedrückter Control-Taste (Mac) an. Es erscheint ein Kontextmenü, in dem Sie den Befehl Link erstellen auswählen. Das Fenster Datei auswählen, das sich nun öffnet, dürfte Ihnen mittlerweile bekannt vorkommen.

Um Links wieder zu löschen oder sich die Datei anzusehen, auf die verlinkt wird, rufen Sie im selben Kontextmenü den Befehl Hyperlink entfernen auf bzw. den Befehl Verknüpfte Seite öffnen (sofern die verknüpfte Seite im lokalen Ordner der Site liegt). Dieselben Befehle können Sie auch über das Menü Modifizieren aufrufen.

Wann immer es geht, sollten Sie Textlinks verwenden. Wenn Sie keine Linkliste als Hauptsteuerung verwenden, dann sollten Sie zumindest im Kopf- bzw. Fußbereich der Seiten die Hauptsteuerung in verkleinerter Form nochmals als Linkliste anbieten. Anwender, die keine grafischen Browser verwenden oder sehbehindert sind, werden es Ihnen danken.

Grafiken und Imagemaps

Sie können alternativ auch Grafiken verwenden, um ein Navigationssystem innerhalb Ihrer Site einzurichten. Je einfacher diese Buttons gehalten sind, desto schneller laden sie. Mithilfe eines Grafikprogramms lassen sich problemlos separate Buttons für die einzelnen Menüpunkt erzeugen. Sie brauchen diese Buttons dann nur noch auf der Seite zu platzieren und mit den entsprechenden Dateien zu verlinken. Es dauert jedoch länger, diese einzelnen Buttons zu laden, als eine einzige Grafik, die all diese Menüpunkte enthält.

Wenn Sie Ihr Menü als eine einzige Grafik anlegen, können Sie mithilfe so genannter Imagemaps innerhalb dieser Grafik »sensitive« Bereiche definieren, die als Link auf andere Dokumente der Website dienen. Wenn Sie eine Imagemap definieren, wird im HTML- Code für diese Grafik eine Art »Landkarte« angelegt, d.h., die Grafik wird mit einem Koordinatenraster überzogen. Wenn der Anwender nun in diese Grafik klickt, werden die zugehörigen Koordinaten abgefragt und der Browser ruft die Datei ab, die mit diesen Werten verlinkt ist.

Um eine Imagemap zu erzeugen, müssen wir natürlich erst einmal eine Grafik auf unserer Seite platzieren. Imagemaps können Sie übrigens mit jeder beliebigen Grafik definieren. Abb. 2.14 zeigt die Menüleiste, die ich auf meiner Seite eingesetzt habe. Es handelt sich um eine einzige Grafik, die die einzelnen Menüpunkte enthält. Diese einzelnen Menüpunkte möchte ich als Link definieren, um die (noch zu erstellenden) Unterseiten meiner Website anzusteuern.

Abbildung 2.14:  Grafiken lassen sich problemlos für  Navigationszwecke verwenden.

Wenn Sie die Grafik eingefügt haben, müssen Sie den Eigenschafteninspektor aufrufen. In der unteren Hälfte der Palette sehen Sie einige interessante Werkzeuge, die nur angezeigt werden, wenn Sie Grafiken editieren. Abb. 2.15 zeigt, wie die Palette aussieht, wenn eine Grafik ausgewählt wurde. Uns geht es im Moment speziell um die Funktionen, die links unten in der Palette angeboten werden.

Abbildung 2.15:  Die Werkzeuge zur Erzeugung von  Imagemaps finden Sie links unten im Eigenschafteninspektor.

Hier sind die Werkzeuge versammelt, die wir zur Erzeugung von Imagemaps benötigen. In das Feld Map geben Sie den Namen ein, den Ihre Imagemap erhalten soll. Sie können jeder Grafik auf einer Seite eine eigene Imagemap zuweisen, doch müssen diese Maps eindeutig benannt werden, d.h., Sie können einen Namen nur einmal vergeben. Wenn Sie keinen Namen vergeben, erledigt dies das Programm für Sie. Unter dem Eingabefeld für den Namen finden Sie von links nach rechts vier Werkzeuge: das Auswahlwerkzeug sowie die Werkzeuge zur Erstellung von rechteckigen, ovalen und mehreckigen Hotspots. Diese Werkzeuge funktionieren ähnlich wie die Zeichenwerkzeuge eines Grafikprogramms.

Wählen Sie nun eines dieser drei Werkzeuge, klicken in die ausgewählte Grafik und ziehen die entsprechende Form auf. Die so erzeugte Form ist ein so genannter Hotspot, d.h. der Bereich, dem der Link zu einem anderen Dokument zugewiesen wird. Es macht nichts, wenn die Form nicht gleich auf Anhieb sitzt, Sie können sie später immer noch korrigieren. Wie Sie sich denken können, eignet sich das Rechteckwerkzeug am besten für rechteckige Hotspots, das Ovalwerkzeug für ovale und das Polygonwerkzeug für unregelmäßige Hotspots. Der fertige Hotspot wird in blau-grüner Tönung angezeigt.

Haben Sie einen Hotspot gesetzt, können Sie seine Form noch genauer anpassen. Hierzu klicken Sie auf das Pfeilwerkzeug und markieren den Hotspot, den Sie bearbeiten wollen. Über die Kontrollpunkte der Kontur können Sie das Objekt skalieren. Über die Pfeiltasten können Sie die Auswahl pixelweise verschieben und somit exakt positionieren.

Zum Schluss müssen Sie den Hotspot noch mit der Datei verlinken, die geöffnet werden soll, wenn man darauf klickt. Hierzu wählen Sie mit dem Pfeilwerkzeug aus und markieren den betreffenden Hotspot. Der Eigenschafteninspektor zeigt daraufhin sämtliche Attribute dieses Hotspots. Nun setzen Sie einen Link und geben nötigenfalls ein Ziel an - genauso wie bei jedem anderen Link, den Sie erstellen. Zusätzlich können Sie noch ein <alt>-Tag setzen, was sich auch empfiehlt, um die Site auch für Anwender mit reinen Textbrowsern navigierbar zu machen. Wenn Sie sehr viele Hotspots gesetzt haben, können Sie sie über Menü Ansicht > Visuelle Hilfsmittel > Imagemaps ausblenden, denn über kurz oder lang wirken die vielen bunten Flecken störend.

Menüs mit Rollover-Bildern

Imagemaps sind eine wunderbare Sache, doch beherrschen sie ein wichtiges Feature nicht, das heute im Internet allgegenwärtig ist: dem Anwender Feed-back geben. Wenn man auf einen Textlink klickt, wird dessen Farbe verändert. Manche Browser verändern auch die Farbe eines Links, wenn der Anwender den Mauszeiger darüber bewegt. Imagemaps dagegen sind statische Bilder, die sich nicht mit der Mausposition ändern.

Nur die halbe Wahrheit ...

Es stimmt zwar, dass sich Imagemaps nicht automatisch ändern, wenn der Anwender die Maus darüber bewegt, doch kann man per JavaScript das aktuelle Bild austauschen oder über dem Bild eine Ebene mit Informationen einblenden lassen und so dem Anwender Feed-back geben. Doch hieße das mit Kanonen auf Spatzen schießen, denn der gleiche Effekt lässt sich mit anderen Mitteln weit einfacher erreichen.

HTML sieht keine Möglichkeit vor, Grafiken in Abhängigkeit von Aktionen des Anwenders zu verändern. In diese Lücke springt JavaScript. Mit JavaScript lassen sich Funktionen programmieren, die mit HTML nicht möglich sind, wie eben das Austauschen von Grafiken. Diese Programme werden in den HTML-Code einer Seite eingebaut. Gerade für Rollover-Menüs mit dem Wechsel zwischen ein- bzw. ausgeschalteten und aktivierten Buttons bietet sich der Einsatz von Javascript an.

Im Folgenden zu reinen Anschauungszwecken der JavaScript-Code, den UltraDev für einen solchen Rollover-Effekt erzeugt:

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Ich glaube nicht, dass ich auf großen Widerspruch stoße, wenn ich behaupte, dass es wenig Spaß macht, obigen Code jedes Mal wieder abzutippen, wenn man Bilder per Rollover austauschen will. Erst recht nicht, wenn es sich um mehrere Bilder pro Seite handelt. Zum Glück erstellt UltraDev die nötigen Skripte von allein. Das Einzige, was Sie selbst machen müssen, ist die Erstellung der erforderlichen Buttons für die verschiedenen Rollover- Zustände. Meistens verwendet man zwei Grafiken, eine für den aktiven und eine für den passiven Zustand. Das Einzige, worauf Sie bei der Erstellung von Buttons achten müssen, ist, dass die Buttons gleich groß sein müssen. Wenn einer der Buttons auch nur um ein Pixel größer ist, haben Sie keinen sauberen Rollover-Effekt, und die Buttons springen. Das sieht man öfter als man meint, vor allem, wenn die Sites von Leuten gemacht werden, die keine Erfahrung im Umgang mit Grafiksoftware haben. Der einfachste Weg zu professionellen Buttons ist die Verwendung von Grafikprogrammen wie Fireworks von Macromedia. Abb. 2.16 zeigt einen ON- bzw. OFF-Button.

Abbildung 2.16:  Buttons müssen gleich groß sein und in beiden Schaltzuständen gleich aussehen.

Wenn Sie die nötigen Grafiken erstellt haben, ist die Erzeugung eines Rollover-Links nur noch ein Kinderspiel. Hierzu klicken Sie in der Objektpalette entweder auf das Icon Rollover-Bild einfügen oder Sie wählen Menü einfügen Interaktive Bilder > Rollover-Bild. Es öffnet sich das Fenster Rollover-Bild einfügen (siehe Abb. 2.17). Wählen Sie die Grafiken für den On- bzw. Off-Zustand aus sowie die URL, die angefordert werden soll, wenn der Link angeklickt wird.

Abbildung 2.17:  Geben Sie in diesem Fenster die Grafiken für den On- und Off-Zustand ein sowie die URL, auf die verlinkt wird.

In diesem Fenster gibt es ferner ein Kontrollfeld Rollover-Bild vorausladen, das in der Defaulteinstellung angewählt ist. Diese Option bedarf der Erklärung.

Da Sie ja für jeden Rollover-Effekt mindestens zwei Grafiken brauchen, dauert es natürlich auch doppelt solange, bis alle Bilder einer Seite geladen sind. Wenn eine Seite sehr viele Rollover-Bilder verwendet, kann sich die Wartezeit entsprechend aufsummieren. Nun gibt es zwei Optionen, wie man diese Rollover-Bilder laden lassen kann: alle auf einmal oder dann, wenn sie benötigt werden. Wenn alle Grafiken zusammen mit der Seite geladen werden, liegen die Bilder schon im Cache bereit, wenn die Seite zum ersten Mal aufgerufen wird.

Die andere Option, die Bilder erst im Bedarfsfall nachzuladen, bewirkt zwar, dass die Seite selbst schneller geladen wird. Die Rollover-Bilder werden nämlich erst in dem Moment vom Server geholt, da sie durch eine Benutzeraktion angefordert werden. Es werden zuerst also nur die Bilder für den Off-Zustand geladen. Erst dann, wenn der Anwender die Maus über einen Button bewegt, werden die ON-Buttons nachgeladen. Das hört sich im ersten Augenblick ganz vernünftig an, ist aber nicht unproblematisch. Wenn man nur die Buttons lädt, die für den passiven Zustand gebraucht werden, könnte das zur Folge haben, dass Rollover-Effekte nicht zuverlässig angezeigt werden. Hat der Anwender einen langsamen Zugang, könnte es unter Umständen einige Sekunden dauern, bis die On-Buttons geladen sind - womit Rollover-Menüs ihren Sinn verloren haben.

Wenn Sie Bilder nicht generell vorausladen lassen wollen, sollten Sie diese Option nur bei solchen Bildern abwählen, die aller Voraussicht nach nur selten benötigt werden. Der einzig sichere Weg, funktionierende Rollover-Menüs anzubieten, ist jedoch, alle Bilder vorausladen zu lassen.

Der JavaScript-Code zum Vorausladen von Bildern wird direkt in das <BODY>-Tag des Dokumentes geschrieben. Wenn Sie einzelne Bilder nicht vorausladen lassen wollen, können Sie dieses Tag direkt editieren:

<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('/buttons/button01_off.gif,button01_on.gif, button02_off.gif, button02_on.gif,navigate.gif')">

Sie können auch über die Palette Verhalten bestimmen, welche Bilder vorausgeladen werden und welche nicht. Wie das geht, lernen Sie in Tag 4, »Websites in Bewegung - clientseitige Verhaltensweisen«.

Wenn Sie Rollover-Buttons auf Ihrer Seite verwenden, dann vermutlich mehr als nur einen, denn gewöhnlich werden Sie ja eine komplette Menüstruktur aufbauen. Nun könnten Sie dieses Menü zwar mit Tabellen und der Funktion Rollover-Bild einfügen erzeugen, wogegen auch nichts einzuwenden ist. Weit bequemer geht es aber mit dem Befehl Navigationsleiste von UltraDev. Hier sind alle Optionen in einem Fenster vereint, um horizontale oder vertikale Menüs zu erzeugen.

Navigationsleisten mit Rollover

Die Funktion Rollover-Bild einfügen, die Sie gerade kennen gelernt haben, lässt sich gut mit Tabellen kombinieren, um eine Navigationsleiste zu erzeugen - schneller geht es wie gesagt mit dem Befehl Navigationsleiste, der diese Arbeitsschritte zusammenfasst. Die in Abb. 2.18 gezeigte Dialogbox rufen Sie über die Schaltfläche Navigationsleiste einfügen der Objektpalette oder über das Menü einfügen > Interaktive Bilder > Navigationsleiste auf.

Abbildung 2.18:  Navigationsleiste gefällig? Über dieses Fenster  können Sie komfortable Rollover-Menüs erzeugen.

Um ein neues Rollover-Bild hinzuzufügen, klicken Sie auf das Plussymbol (+), um es wieder zu entfernen, auf das Minussymbol (-). Die Reihenfolge der Buttons verändern Sie mit den Auf- und Ab-Pfeilen.

Wenn Sie einen Button hinzufügen, können Sie ihm einen Namen zuweisen, um ihn eindeutig zu identifizieren (Feld Elementname). Außerdem können Sie verschiedene Schaltzustände definieren, was mit dem Befehl Rollover-Bild einfügen nicht möglich ist.

Die übrigen Optionen sind mehr oder weniger selbsterklärend: Die URL, die aufgerufen werden soll, wenn der betreffende Button angeklickt wird; ob die Bilder vorausgeladen werden sollen oder nicht; ob die Navigationsleiste horizontal oder vertikal eingefügt werden soll; ob Tabellen verwendet werden sollen (Standardeinstellung) oder nicht. Die Verwendung von Tabellen bietet die größte Gestaltungsfreiheit beim Layout des Menüs.

Probleme mit JavaScript

Die Werkzeuge, die UltraDev zur Erzeugung von JavaScript-Elementen anbietet, sind erstklassig. Der erzeuge Code ist verglichen mit dem anderer Editoren sehr sauber und funktioniert zuverlässig. Das einzige Problem besteht darin, dass UltraDev konzipiert wurde, um HTML-Elemente mithilfe des Eigenschafteninspektors in der WYSIWYG- Ansicht zu bearbeiten.

JavaScript-Code wird in das HTML-Dokument eingefügt und kann mit der Palette Verhalten (siehe Tag 4) bearbeitet werden. Leider funktioniert das nicht so leicht wie mit dem Eigenschafteninspektor. Sie können sich im Eigenschafteninspektor die Attribute eines Rollover-Bildes oder der Tabelle, die eine Navigationsleiste enthält, anzeigen lassen. Sie können diese Werte auch bearbeiten, aber Sie haben keine Zugriffsmöglichkeit auf den dahinter liegenden JavaScript-Code.

Betrachten Sie das aber nicht als Mangel von UltraDev, sondern als Folge der Konzeption des Programms. Wie Sie später noch sehen werden, können Sie den Funktionsumfang von UltraDev durch Hinzufügen neuer Verhaltensweisen erweitern. Diese Erweiterungen werden in die Oberfläche des Programms integriert, erlauben aber nur das Einfügen von HTML- oder anderen Tags sowie JavaScript-Code in das Dokument. Es gibt jedoch keine Funktion, die es ermöglicht, diese HTML-Tags oder den JavaScript-Code als Objekt über den Eigenschafteninspektor anzuzeigen. Aber lassen Sie sich deswegen keine grauen Haare wachsen. Die Bequemlichkeit, die diese vordefinierten JavaScript-Funktionen bieten, wiegen bei weiten die Einschränkung auf, sich diesen Code nicht als mit einem Element verbundenes Objekt anzeigen lassen zu können.

2.6 Ebenen

Wenn Sie bis hierher mitgearbeitet haben, sollten Sie Layouts problemlos mit der Tabellentechnik umsetzen und die erstellten Seiten mit einer Menüsteuerung verbinden können. Nun sind Tabellen zwar eine gute Möglichkeit, konsistente Layouts zu erstellen, leider sind sie aber etwas umständlich in der Handhabung. Bei komplizierteren Layouts erzeugt das Programm eine sehr komplexe Tabellenstruktur, die von Hand nur noch sehr schwer zu editieren ist. Sich durch mehrfach verschachtelte Tabellen zu arbeiten wird schnell zum Albtraum. Um die mit der Tabellentechnik verbundenen Schwierigkeiten zu umgehen, führte Netscape zur exakten Positionierung von Elementen die Layer-Technik ein. Das <LAYER>-Tag ist eine Art schwebender »Container«, der HTML-Elemente aufnehmen und frei auf der Seite positioniert werden kann.

An und für sich eine gute Idee, nur war Netscape damit leider etwas zu weit vorgeprescht. Das <LAYER>-Tag entsprach nicht den HTML-Spezifikationen und nur der Netscape- Browser konnte es darstellen. Von einer Website eine Version für den Netscape Navigator und eine weitere Version für den Rest der Welt zu erstellen, erwies sich als wenig praktikabel, und so konnte sich das <LAYER>-Tag nie so richtig durchsetzen.

Zum Glück wurden die HTML-Spezifikationen um Tags ergänzt, die in Verbindung mit Stylesheets eine ähnliche Funktionalität bieten wie das <LAYER>-Tag. Somit können Webdesigner nun mit größerer Sicherheit als zuvor plattform- bzw. Browser-kompatible Webseiten entwickeln.

Um nun keine übertriebenen Hoffnungen aufkommen zu lassen, soll ein Nachteil der Layer-Technik nicht verschwiegen werden: Nur Browser der neueren Generation können Sie korrekt darstellen. In älteren Browsern wird sich die Darstellung kaum mit dem decken, was Sie beabsichtigt hatten. Wenn Sie sich allerdings für den Einsatz von Layern entscheiden, werden Sie mit dieser Entscheidung nur die wenigsten Anwender vor den Kopf stoßen. Laut den Abrufstatistiken mehrerer Websites, in die ich Einblick habe, verwenden weniger als 2 % der Besucher eine ältere Browser-Version als 4.0.

Exaktes Positionieren mit Ebenen

Wissen Sie noch, wie Sie zu Anfang dieser Lektion Elemente mit Tabellen und der Zuweisung von festen Höhen und Breiten positioniert haben? Ziemlich umständlich, finden Sie nicht? Mit Ebenen erreichen Sie dasselbe Ziel weitaus schneller und viel unproblematischer. Bitte blättern Sie zurück und sehen Sie sich Abb. 2.11 noch einmal an. Hier haben wir eine Tabelle mit zwei Spalten verwendet, wobei eine der Spalten eine weitere 2x2-Tabelle enthielt, in die wir Bild und Text eingesetzt haben.

Was wäre nun, wenn Sie die eine Abbildung etwas breiter machen wollten, sodass sie etwas über den Rand der Zelle hinausragt, die Breite der unteren Zelle aber unverändert lassen wollen? Mit Tabellen und den Mitteln von HTML könnten Sie über dieser Aufgabe etwas ins Grübeln kommen, da Sie die Zellen entweder teilen oder weitere Tabellen einfügen müssten.

Mit Ebenen ist das Ganze jedoch kein Problem. Sehen Sie sich bitte einmal Abb. 2.19 an. Wie Sie sehen, deckt sich die Darstellung kaum mit dem, was mit einem normalen Tabellenlayout möglich wäre. Die Bilder liegen nicht bündig am Tabellenrand, und auch der Textfluss folgt nicht einem erkennbaren Muster von Zeilen oder Spalten. Und wenn man näher hinsieht, merkt man, dass sich die Abbildungen auf der Seite überlappen. Hier wurde nicht mit speziell bearbeiteten Grafiken oder sonstigen Tricks gearbeitet - diese Seite ist nur ein Beispiel dafür, welche Gestaltungsfreiheit und Flexibilität mit Ebenen möglich wird.

Abbildung 2.19:  Ebenen ermöglichen die Umsetzung von komplexen Layouts mit geringem Aufwand.

Um eine Ebene auf einer Seite einzufügen, klicken Sie auf das Icon Ebene zeichnen in der Objektpalette. Klicken Sie dann in die Arbeitsfläche und ziehen ein Rechteck in der gewünschten Größe auf. Die Größe eines Layers können Sie nachträglich jederzeit verändern.

Ebenen auswählen

Wenn Sie eine Ebene einfügen, werden in der Dokumentansicht zwei Dinge angezeigt: die rechteckige Begrenzung, die den Inhalt der Ebene aufnimmt, sowie ein Icon, das die Ebene als solche symbolisiert. Um Inhalt in eine Ebene einzusetzen, klicken Sie in den Ebenenrahmen, und tippen Sie Text ein oder setzen andere Elemente mithilfe der Objektpalette ein. Links oben am Ebenenrahmen befindet sich ein kleines Quadrat. Dieser Anfasser dient dazu, die Ebene selbst (nicht deren Inhalt) auszuwählen. Die ausgewählte Ebene können Sie skalieren und mit den Pfeiltasten bzw. mit gedrückter Maustaste beliebig verschieben.

Sie können eine Ebene auch durch Klick auf das gelbe Ebenen-Icon auswählen. Das ist eine sehr nützliche Funktion, um Ebenen zu markieren, denn da sich Ebenen überlappen und auch unsichtbar sein können, wäre es anderes mitunter recht schwierig, die richtige Ebene auf Anhieb wieder zu finden.

Ebenen und Tracing-Bild gehören zusammen!

Wenn Sie bisher auf einen triftigen Grund gewartet haben, Tracing-Bilder zu verwenden, dann hat mit der Einführung von Ebenen das Warten nun ein Ende. Definieren Sie für jedes Element Ihrer Vorlage eine eigene Ebene und platzieren Sie sie über dem Tracing-Bild. Mit den Pfeiltasten können Sie die einzelnen Ebenen genau positionieren und eine pixelgenaue Kopie Ihrer Vorlage schaffen.

Natürlich können Sie auch Tabellen verwenden, um Objekte an einem Tracing-Bild auszurichten, aber Sie können nicht einfach einzelne Zellen frei verschieben. Im Tabellen-Layoutmodus sind Sie durch die Größe der übergeordneten Tabelle gebunden.

Eigenschaften

Wenn Sie eine Ebene auf Ihrer Seite eingefügt haben, öffnen Sie den Eigenschafteninspektor, um sich ihre Eigenschaften anzeigen zu lassen. Abb. 2.20 zeigt die Palette mit den Werten meiner Navigationsebene.

Abbildung 2.20:  Ebenen besitzen Attribute, die sie mit keinem anderen HTML-Objekt  teilen.

Ebenen besitzen gewisse Attribute, die kein anderes Objekt aufweist:

Mit den restlichen Optionen sollten Sie mittlerweile keine Schwierigkeiten mehr haben.

Die Ebenenpalette

Da man Ebenen sehr häufig braucht, haben ihnen die Entwickler bei Macromedia eine eigene Werkzeugpalette spendiert. Um deren Funktionen näher kennen zu lernen, fügen Sie noch einige weitere Ebenen in das Dokument ein. Wenn Sie beim Einfügen der Ebene auf die Strg-Taste (Win) oder Befehl-Taste (Mac) drücken, können Sie sogar verschachtelte Ebenen erzeugen. Öffnen Sie nun mit Menü Fenster > Ebenen die Ebenenpalette (Abb. 2.21). Mit dieser Palette können Sie unter anderem den Z-Index aller erstellten Ebenen verändern.

Abbildung 2.21:  Die Ebenenpalette gibt Ihnen einen schnellen Überblick über alle Ebenen innerhalb eines Dokuments.

Wenn Sie auf das Augensymbol in der zugehörigen Spalte klicken, können Sie Ebenen ein- bzw. ausblenden (offenes bzw. geschlossenes Auge). Um den Namen einer Ebene und ihren Z-Index zu ändern, klicken Sie das betreffende Feld an und Sie können es editieren. Wenn Sie verschachtelte Ebenen erzeugt haben, werden diese eingerückt als hierarchische Liste angezeigt. Sie können verschachtelte Ebenen von der übergeordneten Eltern-Ebene lösen, indem Sie sie innerhalb der Ebenenpalette verschieben.

Über dem Ebenenfeld gibt es ein Kontrollfeld Überlappungen verhindern. Wenn Sie diese Option aktivieren, können Sie neu erstellte Ebenen nicht mehr über bereits vorhandenen platzieren. Über Menü Modifizieren > Anordnen > Ebenenüberlappungen verhindern erreichen Sie denselben Zweck. Wozu dient nun diese Funktion?

Ebenen in Tabellen verwandeln und umgekehrt

Wenn Sie einerseits nicht auf den Komfort verzichten möchten, den Ihnen die Verwendung von Ebenen in der Gestaltungsarbeit gibt, Ihnen andererseits aber auch die Cross-Browser-Kompatibilität Ihrer Seiten am Herzen liegt, bietet UltraDev ein Feature, das die Lösung für dieses Dilemma darstellt: Sie können nämlich Ebenen in Tabellen umwandeln und umgekehrt. Sie setzen also Ihren Entwurf unter Verwendung von Ebenen um, die Ihnen die freie Positionierung aller Elemente auf der Seite gestatten, und bevor Sie die Seiten publizieren, wandeln Sie sie in Tabellen um. Das einzige Hindernis besteht darin, dass das Programm sich überlappende Ebenen nicht in Tabellen verwandeln kann - daher das Kontrollfeld, von dem im vorigen Abschnitt die Rede war. Sie können diese Funktion ausprobieren, indem Sie sie über das Menü Modifizieren > Konvertieren > Ebenen in Tabellen konvertieren aufrufen. Es öffnet sich das in Abb. 2.22 gezeigte Dialogfenster.

Nach meiner Erfahrung ist es das Beste, die eingestellten Defaultwerte zu verwenden. Wenn es Ihnen nicht so sehr auf die exakte Positionierung der Zellen in der erzeugten Tabelle ankommt, können Sie statt der Option Höchste Genauigkeit auch die Option Kleinstes verwenden. Wenn Sie Tabellen mit höchster Genauigkeit erstellen lassen, erzeugt UltraDev so viele Zellen wie nötig, um den Inhalt der Ebenen möglichst genau zu positionieren. Mit der Option Kleinstes werden Inhalte in die nächstliegende Zelle eingefügt, wenn sie innerhalb einer gewissen Zone liegen (Defaulteinstellung 4 Pixel). So werden kleinere Bereiche so weit wie möglich in einer Zelle zusammengefasst und die erzeugte Tabellenstruktur ist weniger kompliziert. Nachfolgend eine Übersicht über die weiteren Einstellungsmöglichkeiten:

Umgekehrt können Sie auch Seiten, die Sie mithilfe eines Tabellenlayouts erstellt haben, von UltraDev in Ebenen konvertieren lassen. Rufen Sie hierzu den entsprechenden Befehl über Menü Modifizieren > Konvertieren > Tabellen in Ebenen konvertieren auf. Sie werden feststellen, dass die Ergebnisse dieser Konvertierung nicht hundertprozentig exakt ausfallen. Die Grenzen dieser Funktion zeigen sich, wenn man zwischen Tabellen und Ebenen hin- und herkonvertiert. Wenn Sie z.B. bei der Konversion von Ebenen in Tabellen die Option Durchsichtige GIFs verwenden aktiviert haben und nun die Tabelle wieder in Ebenen umwandeln lassen, wird nun jedes dieser GIFs in einer eigenen Ebene abgelegt. Aber auch mit diesen Einschränkungen handelt es sich trotz allem um eine höchst nützliche Funktion, die die Umsetzung von Layouts für ältere Browser erleichtert.

Mittels Frames Elemente mehrfach verwenden

Bisher haben wir um Seiten miteinander zu verlinken keine andere Möglichkeit kennen gelernt, als jede Seite mit einer eigenen Menüleiste zu versehen. Dem Anwender eine einheitliche Menüsteuerung anzubieten ist eine der wichtigsten Gestaltungsregeln für die Erstellung einer Website. Konfrontieren wir den Anwender ständig mit einer anderen Oberfläche, wird ihn das irritieren und kaum längere Zeit auf unserer Seite halten. Wenn Sie mit Rollover-Menüs arbeiten, kann es einige Zeit dauern, bis die nächste Seite geladen ist. Selbst wenn die Buttons für unser Rollover-Menü im Cache abgelegt werden, bleibt die Ladezeit ein kritischer Punkt.

Die Definition eines Framesets ist eine Möglichkeit, wie wir diesem Problem begegnen können. Ein Frameset besteht aus zwei oder mehreren Frames, die jeweils ein selbstständiges HTML-Dokument enthalten. Wir können also ein Framefenster für die Menüsteuerung definieren und ein weiteres für den Inhalt. Ein Vorteil der Frametechnik ist, dass wir die Inhalte der einzelnen Frames unabhängig voneinander austauschen können, also in den Inhaltsframe eine neue Datei laden können, während der Menüframe unverändert bleibt. Ein weiterer Vorteil ist, dass man die einzelnen Framefenster separat scrollen kann. Wenn Sie also in den Inhaltsframe Ihrer Seite ein längeres Dokument laden, bleibt das Menü an seinem festen Platz, sodass der Anwender jederzeit Zugriff auf die übrigen Seiten hat, während er das Dokument durchsucht.

Sicher ist Ihnen schon das Eingabefeld Ziel aufgefallen, wenn Sie einen Link gesetzt haben. Dieses Feld kommt jetzt bei der Erstellung von Framesets ins Spiel. Jeder Frame innerhalb eines Framesets hat einen eindeutigen Namen. Wenn Sie ein Dokument in einen bestimmten Frame laden lassen wollen, geben Sie bei der Definition des Links im Feld Ziel den Namen dieses Frames an. Soll das Dokument in den gleichen Frame geladen werden, erübrigt sich die Angabe eines Ziels.

Framesets erstellen

Die Definition von Framesets ist nicht gerade die stärkste Seite an UltraDev - wenn Sie mit dieser Funktion Probleme haben, sollten Sie die Schuld nicht bei sich suchen. Die Frame-Werkzeuge sind leider nicht so intuitiv zu bedienen, wie man das gerne hätte. Um ein Frameset zu erstellen, müssen Sie zuerst ein neues Dokument öffnen. Als Nächstes brauchen Sie die Unterpalette Frames der Objektpalette. Wählen Sie die Schaltfläche Linken Frame einfügen. Hiermit teilen wir auf der linken Seite des Fensters einen Bereich, der unser Menü aufnehmen soll.

Wenn Sie ein Frameset eingefügt haben, sehen Sie, dass die Design-Ansicht ähnlich wie eine Tabelle in verschiedene Bereiche aufgeteilt ist. Wenn Sie in einen dieser Bereiche klicken, um ihn zu bearbeiten, können Sie das HTML-Dokument, das in diesen Frame geladen wird, unmittelbar bearbeiten. Im Unterschied also zu Tabellen bearbeiten Sie nicht einzelne Zellen, sondern ein ganzes HTML-Dokument. Bevor wir uns aber ans Editieren machen, sollten wir das Frameset nach unseren Vorstellungen einrichten. Wählen Sie hierzu den Frame-Rahmen in der Dokumentansicht per Mausklick aus; die Frame-Rahmen müssen eingeschaltet sein (Menü Ansicht > Visuelle Hilfsmittel > Frame-Rahmen). Wenn Sie den Mauszeiger auf den Frame-Rahmen setzen, verändert sich der Cursor zu einem Skalierwerkzeug. Ziehen Sie nun die Begrenzungslinie mit gedrückter Maustaste an die gewünschte Position. Wählen Sie nun durch Klicken auf den äußeren Rahmen das Frameset selbst aus und öffnen Sie den Eigenschafteninspektor. Abb. 2.23 zeigt die Eigenschaften eines Frame-Rahmens mit Menüsteuerung im linken Frame, wie wir ihn eingerichtet haben.

Abbildung 2.23:  Wählen Sie das  Frameset aus, um die Eigenschaften der einzelnen Frames festzusetzen.

Im Eigenschafteninspektor können Sie die Größe der einzelnen Frames nun direkt editieren. Am rechten Rand der Palette sehen Sie ein grafisches Schema der aktuellen Frameteilung. Durch Anklicken der jeweiligen Fläche wählen Sie den entsprechenden Frame aus. Folgende Eigenschaften können Sie verändern:

Nachdem Sie diese Einstellungen vorgenommen haben, können Sie die Frames mit Inhalt füllen. Ich richte mein Frameset so ein, dass der linke Frame die Datei navigation.html aufnimmt und der rechte die Datei content.html. (Achtung! Diese Dateien müssen bereits vorhanden sein, bevor Sie sie in das Frameset einbinden.) Das geht am leichtesten mit der Frames-Palette, die Sie über Menü Fenster > Frames öffnen (siehe Abb. 2.24). Über diese Palette können Sie nun die Eigenschaften der einzelnen Frames editieren, während wir zuvor die Eigenschaften des Framesets bearbeitet haben. Die Namen der einzelnen Frames werden in der Frames-Palette angezeigt.

Abbildung 2.24:  Frames mit der Frames-Palette zur Bearbeitung auswählen

Die Frames-Palette

Um einzelne Frames mit der Frames-Palette zu bearbeiten, muss der Eigenschafteninspektor ebenfalls geöffnet sein. Wählen Sie nun einen Frame in der Frames-Palette zur Bearbeitung aus und beachten Sie, wie sich die Oberfläche des Eigenschafteninspektors verändert. Es werden ganz spezifische Möglichkeiten der Editierung angeboten:

Wenn Sie alle Einstellungen vorgenommen haben, speichern Sie Ihr Frameset mit Menü Datei > Frameset speichern. In Abb. 2.25 sehen Sie das von mir erstellte Frameset. Wie Sie sehen, bleibt die Menüsteuerung im linken Frame fest stehen, während sich der rechte Frame scrollen lässt.

Abbildung 2.25:  Mit Framesets können Sie auf einer Seite statische Bereiche, wie z.B. ein Menü, definieren, die nicht mit dem anderen Teil der Seite gescrollt werden.

NoFrames-Inhalt bearbeiten

Innerhalb des HTML-Codes, mit dem ein Frameset definiert wird, gibt es einen Bereich, der dann angezeigt wird, wenn der Browser die Darstellung von Frames nicht beherrscht. In diesem Bereich können Sie eine »framelose« Variante der Seite ablegen oder den Anwender höflich auffordern, sich einen neueren Browser zu besorgen, wenn er die Seite sehen möchte. Über das Menü Modifizieren > Frameset > NoFrames-Inhalt bearbeiten können Sie diese Bereich aufrufen und bearbeiten.

Komplexe Framesets

Bei der Erstellung von Framesets sind Sie nicht an die vordefinierten Schemata der Objektpalette gebunden. Ähnlich wie Tabellen können Sie auch Frames ineinander verschachteln, um einen Frame weiter zu unterteilen. Sie können Frames auch über das Menü Modifizieren > Frameset beliebig teilen. Das hat den Vorteil, dass Sie neue Frames innerhalb des aktuellen Framesets definieren und nicht Frameset in Frameset schachteln - was einen unschönen Spagetti-Code zur Folge hätte.

Es gibt eigentlich nur einen vertretbaren Grund, mehrere Framesets ineinander zu verschachteln. Wie die Dinge im Moment liegen, können Links nur auf einen einzigen Frame innerhalb eines Framesets oder auf das Frameset selbst zeigen. Möchten Sie innerhalb eines Framesets nun mehrere Frames auf einmal austauschen, müssen Sie diese Frames in einem einzigen Frameset zusammenfassen und den Link auf dieses Frameset setzen.

Das Für und Wider von Frames

Momentan wird die Frage, ob man zur Gestaltung von Websites Frames verwenden soll, wieder stärker diskutiert. Ich habe erst kürzlich am Redesign mehrerer ursprünglich Frame-basierter Websites mitgearbeitet, die nun ohne Frames funktionieren.

Das Problem mit Frames ist, dass sie bei bestimmten Aktionen manchmal für Verwirrung beim Anwender sorgen können. Angenommen, Sie rufen eine Site auf, die Frames verwendet. In einem der Frames finden Sie Inhalt, der Sie interessiert und den Sie daher Ihren Lesezeichen hinzufügen möchten. Je nach Browser wird nun entweder das ganze Frameset den Bookmarks hinzugefügt (worin nun nicht unbedingt die gewünschte Seite enthalten sein muss) oder nur die der ausgewählte Frame innerhalb des Framesets. Für Neulinge im Internet kann das manchmal ebenso verwirrend wie frustrierend sein.

Ein anderes Problem ergibt sich bei dynamischen Anwendungen. Wenn zwischen Anwendungen, die Inhalt für die einzelnen Frames erzeugen, Variablen übergeben werden müssen, können diese einzelnen Anwendungen sozusagen »aus dem Takt geraten«. Anstatt nur eine Seite zu generieren, muss die Anwendung mehrere Seiten in mehreren Frames aktualisieren. Das führt dazu, dass bestimmte Funktionen einer Anwendung auf mehrere Unterprogramme verteilt werden müssen, von denen jedes nur für seinen Frame zuständig ist.

Wie Sie sich auch entscheiden, bei jeder Entscheidung gibt es ein Für und Wider. Frames sind ein Gestaltungsmittel von HTML wie Ebenen oder Tabellen mit ihren spezifischen Vor- und Nachteilen. Wählen Sie einfach das, was für Ihre Zwecke am besten passt.

2.7 Formulare

Ein HTML-Element, mit dem wir uns heute noch gar nicht beschäftigt haben, sind Formulare. Formulare werden gebraucht, um Daten an den Server zur Bearbeitung zu übergeben. Das Hauptthema dieses Buches ist ja die Erstellung serverseitiger dynamischer Anwendungen mit UltraDev, darum werden uns dem Thema »Formulare« ausführlich in Tag 11, »Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren«, widmen, wenn wir Daten in Online-Datenbanken speichern.

2.8 Zielbrowser prüfen

Nicht jeder Entwickler hat sämtliche Browser auf seinem System installiert, um den Code seiner Seiten auf alle möglichen Fehler hin zu überprüfen. In diesem Fall können Sie sich mit der Funktion im Menü Datei > Zielbrowser überprüfen behelfen.

Dieser Befehl öffnet ein Dialogfenster, in dem Sie konfigurieren, für welche Browser Sie Ihr Dokument überprüfen lassen wollen. Wählen Sie die entsprechenden Browser aus und klicken Sie auf die Schaltfläche Überprüfen.

UltraDev ist nun ein paar Augenblicke mit der Analyse des Codes beschäftigt und gibt dann einen präzisen Bericht aus mit Angaben zu eventuellen Fehlern und Kompatibilitätsproblemen zwischen Browsern. Abb. 2.26 zeigt die Analyse einer Seite, die für 4.0-Browser optimiert wurde.

Abbildung 2.26:  Die Analyse offenbart alle Schwachstellen einer Seite.

Wenn Sie es darauf anlegen, können Sie über den Befehl im Menü Datei > Konvertieren > 3.0 Browser-kompatibel den Code Ihrer Seite so konvertieren lassen, dass er von älteren Browsern angezeigt werden kann. Das Programm tut zwar sein Bestes, um hierbei möglichst schonend vorzugehen, aber sehr wahrscheinlich ist das Ergebnis nicht in allen Punkten so, wie Sie sich das vorgestellt haben.

2.9 Berichte erstellen

Um sich einen schnellen statistischen Überblick über die gesamte Site oder ein einzelnes Dokument zu verschaffen, rufen Sie den Befehl im Menü Site > Berichte auf. Wie in Abb. 2.27 zu sehen, können Sie sich zu mehreren Themen Informationen ausgeben lassen, die die Funktionalität und die Geschwindigkeit Ihrer Site wesentlich verbessern können:

Sie können auch bearbeiterspezifische Berichte erstellen oder sich eventuell vorhandene Design Notes ausgeben lassen. Mehr über verteilte Entwicklungsumgebungen erfahren Sie in Tag 3, »Websites planen und verwalten«.

Abbildung 2.28:  Berichte helfen bei der Fehlersuche und der Optimierung einer Website.

Wenn Sie einen Bericht erstellen lassen, wählen Sie, in welchem Umfang Dokumente geprüft werden sollen (ganze Seite, einzelnes Dokument usw.), und markieren Sie die Kontrollfelder der gewünschten Berichte. Einige Berichte erlauben die Definition zusätzlicher Prüfkriterien, die Sie unter der Schaltfläche Berichtseinstellungen finden. Um die Berichtsfunktion zu starten, klicken Sie auf die Schaltfläche Ausführen. Abb. 2.28 zeigt das Ergebnis eines solchen Kontrolldurchgangs.

2.10 Zusammenfassung

Heute haben Sie die meisten Werkzeuge kennen gelernt, die Sie zur Erstellung umfangreicher Websites benötigen. Tabellen, Frames, Ebenen und der Eigenschafteninspektor sollten Ihnen jetzt keine Rätsel mehr aufgeben. Zwar brauchen wir diese Werkzeuge nicht unmittelbar zur Entwicklung dynamischer Websites, doch gehören sie zum Inventar von UltraDev, das die Erstellung und Pflege einer Website in all ihren Aspekten ermöglicht - angefangen bei der logischen Struktur bis zur grafischen Gestaltung.

2.11 Fragen und Antworten

Frage:
Wenn ich für meine Website Suchbegriffe definiere, bedeutet das, dass meine Site dann in den Suchmaschinen angezeigt wird?

Antwort:
Suchbegriffe in den <META>-Tags werden nur verwendet, wenn Ihre Site indiziert wurde. Dazu müssen Sie sie erst bei den Suchmaschinen anmelden. Gehen Sie auf die Anmeldeseite und geben Sie die URL ein, damit Ihre Site katalogisiert werden kann.

Frage:
Ich verwende Tabellen, um Bilder auf meiner Seite zu platzieren, aber irgendwie funktioniert das nicht richtig. Zwischen den Bildteilen ist immer ein Zwischenraum. Woran liegt das?

Antwort:
Vergewissern Sie sich, dass Sie keine Leerzeichen in die Zellen der Tabelle eingefügt haben und dass die Zellen insgesamt nicht breiter sind als die Tabelle selbst. Tabellen sind nicht unproblematisch. Schon kleine Fehleingaben können bewirken, dass die Tabelle auseinander getrieben wird oder andere Darstellungsfehler aufweist.

Frage:
Ich habe eine Seite mit Ebenen gestaltet, aber in der Browservorschau bekomme ich nichts angezeigt.

Antwort:
Der Einsatz von Ebenen ist nur in Verbindung mit Cascading Style Sheets und 4.0-Browsern oder höher möglich. Vielleicht brauchen Sie ein Upgrade.

Frage:
Ich habe ein Frameset angelegt, doch ich möchte auch einen Link auf eine Seite ohne Frames anbieten. Wie geht das?

Antwort:
Geben Sie als Ziel Ihres Links »_top« an. Die Seite wird dann an »über« dem Frameset im Hauptfenster des Browsers geladen.

2.12 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 sich die Tags im <HEAD>-Bereich anzeigen lassen und bearbeiten?
  2. Wo können Sie definieren, in welcher Farbe Links dargestellt werden?
  3. Wie kann ich Elemente mithilfe einer Tabelle so positionieren, dass sie nahtlos aneinander gefügt werden?
  4. Ich habe eine Seite mit Ebenen erstellt, doch nun soll sie auch auf 3.0-Browsern korrekt dargestellt werden. Geht das überhaupt?
  5. Ich möchte keine Ebenen verwenden. Kann ich auch mit Tabellen pixelgenau positionieren, ohne dass ich mühselig an den Zellenbreiten herumfummeln muss?

Übungen

  1. Positionieren Sie die Elemente Ihrer Seite mit Tabellen. Die Versuchung ist zwar groß, derartige Aufgaben mithilfe von Ebenen zu erledigen, doch es schadet nach wie vor nicht, wenn Sie wissen, wie man mit Tabellen arbeitet.
  2. Erstellen Sie mehrere Rollover-Bilder und eine Navigationsleiste. Wenn Sie noch keine Erfahrung mit der Erstellung der nötigen Buttons für den aktiven und passiven Zustand haben, ist die Aufgabe schwerer, als es im ersten Moment scheint.
  3. Üben Sie sich in der Verwendung von Framesets. Wenn Sie schon statische Websites ohne Frames erstellt haben, strukturieren Sie sie mit Framesets um. Wenn Sie planen, in der Zukunft Frame-basierte Websites zu erstellen, sollten Sie sich mit den Frame- Werkzeugen von UltraDev gut vertraut machen.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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