Erste Schritte mit Expression Web, XHTML und CSS

67

Grun

dlag

en

Kapitel 4

Erste Schritte mit Expression Web, XHTML und CSS

In diesem Kapitel:

Die Website 68

Erstellen der Website 68

Wichtige Elemente und Bearbeitungsfunktionen 73

XHTML 115

CSS 126

CSS in der Entwurfsansicht 128

Visuelle Unterstützungen 130

Zusammenfassung 131

http://www.edv-buchversand.de/mspress-edvbv/product.asp?cnt=product&id=ms-5405&lng=0

Kapitel 4 Erste Schritte mit Expression Web, XHTML und CSS

68

Sie mussten bisher einige Kapitel graue Theorie erdulden. Dies wird sich nun ändern, denn Sie wer-den in den folgenden Abschnitten erfahren, wie Sie mit Hilfe der Expression Web-Vorlagen und Assistenten Ihre erste eigene Website erstellen. Die Website wird einige wesentliche Internet-Ele-mente enthalten.

Komplexe Objekte, zum Beispiel Formularfelder oder ActiveX-Steuerelemente, werden jedoch erst in den folgenden Kapiteln beschrieben. Die nächsten Seiten dienen primär dem Ziel, den Umgang mit Expression Web zu erlernen und mit der Benutzeroberfläche der Software vertraut zu werden. Darüber hinaus erhalten Sie einen ersten Einblick in die Technologien, die jeder modernen Website zu Grunde liegen: XHTML und CSS.

Die WebsiteBevor Sie mit dem Entwurf und der Erstellung Ihrer ersten Website beginnen, sollen Sie zunächst erfahren, woraus eine Website besteht. Eine Website besteht in der Regel aus mehreren XHTML-Dokumenten, die sich auf einem Webserver (im Internet oder Intranet) befinden. Diesen Doku-menten sind URLs, also eindeutige Internetadressen zugewiesen. Wenn Sie eine dieser Adressen in das Adressfeld eines Browsers eingeben, ermittelt der Browser den Server, auf dem das entspre-chende Dokument vorhanden ist, stellt eine Verbindung zu dem Server her, liest das Dokument ein und stellt es im Ansichtsbereich als so genannte Webseite dar.

Doch auch die Inhalte, die auf den einzelnen Seiten angezeigt werden, sind ein Bestandteil einer Website. Dabei handelt es sich zum Beispiel um Bilder, Videos und Audiodateien. Und auch Konfi-gurations- und Skriptdateien mit Programmcode sowie Datenbankdateien können Teil einer Web-site sein. Eine Website besteht somit aus allen Dateien, die notwendig sind, um die einzelnen Seiten der Site anzuzeigen und mit den Besuchern zu interagieren.

Die Hauptseite einer Website wird als Homepage bezeichnet. Die Homepage ist der Ausgangspunkt einer Website. Diese Seite wird standardmäßig angezeigt, wenn ein Benutzer die Basisadresse der Website eingibt. Normalerweise enthält die Homepage einen Überblick über die Inhalte, die den Besucher auf den folgenden Seiten erwarten, sowie Hyperlinks zu diesen Seiten.

Ein Hyperlink ist ein besonders gekennzeichneter Text oder eine Grafik, der oder die sich auf einer Webseite befindet und mit der Adresse einer anderen Webseite verknüpft ist. Klickt der Anwender einen Hyperlink an, wird die Seite aufgerufen und angezeigt, deren Adresse mit dem Hyperlink verknüpft ist.

Erstellen der WebsiteBevor Sie eine Website erstellen, sollten Sie darüber nachdenken, welche Inhalte Sie präsentieren möchten und in welcher Form dies geschehen soll. Die Planung einer Website wird in Kapitel 20 beschrieben. Zur Erkundung der Benutzeroberfläche von Expression Web ist dieser Schritt jedoch nicht notwendig, weshalb an dieser Stelle auf eine entsprechende Erläuterung verzichtet wird.

HINWEIS


Erstellen der Website

69

Grun

dlag

en

Eine persönliche SiteWir werden mit Hilfe einer Expression Web-Vorlage eine Website generieren. Die Website soll per-sönliche Informationen enthalten. Sie wird aus den folgenden sechs Seiten bestehen:

� Die Homepage begrüßt den Besucher der Website und beschreibt kurz, was den Besucher der Site erwartet. Sie kann darüber hinaus Hyperlinks enthalten, die zu anderen Websites oder -sei-ten führen. Bisweilen wird die Homepage auch dazu verwendet, allgemeine Informationen bereitzustellen. Dazu zählen zum Beispiel Wetterdaten oder interessante Kurznachrichten.

� Auf der Seite Über mich soll der Besucher über den Anbieter der Website, also über Sie infor-miert werden. Sie könnten dort zum Beispiel private und berufliche Daten zu Ihrer Person ver-öffentlichen.

� Auf einer weiteren Seite veröffentlichen Sie Ihren Lebenslauf. Sie geben dort Informationen zu Ihrem beruflichen Werdegang, Ihrer Ausbildung, Weiterbildungsmaßnahmen usw. an.

� Auf der Webseite Fotosammlung können Sie eigene eingescannte oder von einer Digitalkamera stammende Fotos präsentieren und mit einem erläuternden Text versehen.

� Ihre bevorzugten Internet-Seiten können Sie auf der Webseite Hyperlinks auflisten.

� Die Seite Kontakt soll den Besuchern die Möglichkeit geben, Ihnen Nachrichten zukommen zu lassen. Dazu zählen zum Beispiel Probleme und Vorschläge, die Ihre Website betreffen, und natürlich auch Glückwünsche für das gelungene Design.

In der Regel würden Sie nun beginnen, die benötigten Seiten zu entwerfen. Dies ist jedoch nicht notwendig, da Expression Web über einige Assistenten und Vorlagen verfügt, die bestimmte Web-site-Kategorien automatisch generieren. Eine dieser Vorlagen ist die persönliche Website, eine Web-site, die aus den sechs zuvor beschriebenen Seiten besteht.

Neue Website mit Expression Web erstellenTeilen Sie Expression Web mit, dass Sie eine neue Website generieren möchten. Dazu muss eine neue Website mit Expression Web erzeugt werden.

Starten Sie Expression Web zunächst, um eine neue Website mit dem Programm zu erstellen. Gehen Sie dazu wie folgt vor:

1. Öffnen Sie das Startmenü und wählen Sie dort den Eintrag Alle Programme aus.

2. Wählen Sie im anschließend angezeigten Menü den Eintrag Microsoft Expression und dann Microsoft Expression Web, wie in Abbildung 4.1 dargestellt.

Achten Sie darauf, dass die Abbildung das Startmenü von Windows Vista zeigt und der Inhalt Ihres Startmenüs von dem der Abbildung abweichen kann. Die Menüeinträge zum Starten von Expression Web tragen jedoch auch bei Ihnen dieselben Namen.



70

Abbildg. 4.1 So starten Sie Expression Web

Nach dem Start des Programms öffnet Expression Web automatisch eine leere einzelne Seite. Sie werden jedoch die bereits erwähnte Vorlage für ein persönliches Web verwenden, um Ihre erste Website zu erstellen. Schließen Sie deshalb zunächst die leere Seite, indem Sie aus dem Menü Dateiden Eintrag Schließen auswählen.

Auswahl einer WebvorlageSie können nun die Vorlage auswählen, anhand derer die neue Website generiert werden soll. Gehen Sie die folgenden Schritte durch, um eine neue Website unter Verwendung einer Vorlage zu erstel-len:

1. Öffnen Sie das Menü Datei und klicken Sie rechts neben dem Eintrag Neu auf den nach rechts weisenden Pfeil.

2. Wählen Sie im anschließend angezeigten Untermenü den Eintrag Website.

Im Anschluss daran wird das Dialogfeld Neu geöffnet, mit dessen Hilfe Sie den Typ der Website festlegen, die Sie erstellen möchten. Das Dialogfeld ist in zwei Registerkarten unterteilt: Seiteund Website. Nach Ihrer Auswahl im Menü Datei ist automatisch die Registerkarte Website geöff-net.

Diese Registerkarte enthält zwei Listenfelder. Das erste Listenfeld auf der linken Seite führt die beiden Website-Kategorien Allgemein und Vorlagen auf. Die Kategorie Allgemein ist standard-mäßig geöffnet. Die Vorlagen, die dieser Kategorie zugeordnet sind, finden Sie im zweiten


Erstellen der Website

71

Grun

dlag

en

Listenfeld auf der rechten Seite. Es sind die Vorlagen Standardwebsite und Leere Website sowie ein Assistent, mit dem Sie Websites importieren können (das Importieren von Websites ist in Kapitel 18 beschrieben).

Wenn Sie sich für eine Standardwebsite entscheiden, generiert Expression Web eine Website mit einer einzelnen leeren Webseite. Dies bedeutet, dass an dem von Ihnen ausgewählten Ziel (z. B. die Festplatte Ihres Computers, ein Netzwerklaufwerk oder eine Internetadresse) ein Ordner erstellt wird, in dem Expression Web eine leere Webseite namens default.htm (der Standardname für die Homepage einer Website) ablegt. Der Name des Ordners entspricht dem Namen, den Sie im Dialogfeld Neu für die Website angeben. Er nimmt alle Dateien und Unterordner auf, aus denen Ihre Website bestehen wird.

Wenn Sie sich für eine leere Website entscheiden, generiert Expression Web am Ziel lediglich einen Ordner mit dem von Ihnen angegebenen Namen für die Website. Eine einzelne leere Webseite wird nicht erzeugt.

Wir möchten eine persönliche Site erstellen und dazu eine Vorlage benutzen, die uns den größ-ten Teil der Arbeit abnimmt und bereits alle notwendigen Layout-Elemente enthält. Sie finden solche Vorlagen in der gleichnamigen Kategorie.

3. Klicken Sie deshalb im Dialogfeld Neu und dort im linken Listenfeld der Registerkarte Websiteauf die Kategorie Vorlagen.

Im Listenfeld rechts daneben werden daraufhin alle Vorlagen angezeigt, die dieser Kategorie untergeordnet sind. Sie finden dort Vorlagen für Kleinunternehmen, Organisationen und Pri-vatpersonen. Für jede dieser Gruppen gibt es mehrere Vorlagen mit verschiedenen Layouts. Wir werden für unsere persönliche Website die Vorlage Persönlich 1 benutzen.

4. Blättern Sie im zweiten Listenfeld nach unten, bis die Vorlage Persönlich 1 angezeigt wird. Mar-kieren Sie diese Vorlage mit einem Mausklick.

Sobald Sie die Vorlage ausgewählt haben, wird rechts im Dialogfeld unter Beschreibung ein kur-zer Text angezeigt, der Aufschluss über den Zweck der Vorlage gibt. Darunter ist ein Vorschau-bild zu sehen, das Ihnen zeigt, wie eine mit dieser Vorlage erstellte Website aussehen wird.

Abgesehen von der Vorlage Persönlich 1 gibt es noch weitere Vorlagen, die Sie nutzen können, um Websites zu erzeugen:

� Die verbleibenden sechs Vorlagen für persönliche Websites weisen dieselbe Struktur wie die erste Vorlage auf, verwenden aber ein anderes Design, also andere Bilder und Farben.

� Mit den Vorlagen Organisation 1 bis Organisation 6 können Sie eine Website für Organisatio-nen oder Vereine erstellen, denen Sie angehören. Eine solche Site besteht aus acht Seiten, die dazu dienen, die Organisation oder den Verein vorzustellen und Nachrichten, Hyperlinks, Fragen und eine Fotosammlung zu veröffentlichen. Es gibt außerdem eine Kalenderseite und eine Seite mit Kontaktinformationen.

� An kleine und mittelständische Unternehmen wurde ebenfalls gedacht. Die Vorlagen Klein-unternehmen 1 bis Kleinunternehmen 6 generieren Sites, die das jeweilige Unternehmen vor-stellen. Insgesamt sieben Seiten informieren über das Unternehmen, dessen Produkte und Dienste und aktuelle Nachrichten. Es gibt eine Kalender- und Kontaktseite und viele Bilder, zu denen auch das Firmenlogo zählt.

Nachdem Sie die gewünschte Vorlage ausgewählt haben, geben Sie an, wo die Website erstellt werden soll. Wie bereits erwähnt wurde, können Sie eine festplattenbasierte oder webserverba-sierte Website erstellen. Im ersten Fall wird die Website lokal auf der Festplatte Ihres Computers

HINWEIS



72

abgelegt. Im zweiten Fall erzeugen Sie die Site direkt auf dem Webserver. Dies ist jedoch nicht empfehlenswert, wenn es sich um einen öffentlichen Webserver handelt, da dann jeder Internet-Benutzer die Entwicklung der Site mitverfolgen kann (sofern Sie sie nicht mit einem Benutzer-namen und Kennwort gesichert haben).

5. Geben Sie unter Adresse der neuen Website den Pfad zum gewünschten Ziel ein, wo Sie die Web-site speichern möchten, und bestätigen Sie mit OK.

Handelt es sich um die lokale Festplatte, können Sie auch auf Durchsuchen klicken, um das Ziel im folgenden Dialogfeld auszuwählen. Vergessen Sie nicht, einen Namen für den Ordner anzu-geben, in dem die Website-Dateien gespeichert werden sollen. Möchten Sie die Website z. B. auf Laufwerk C: in einem bereits vorhandenen Ordner namens Websites speichern, könnten Sie als Pfad beispielsweise C:\Websites\MeineErsteWebsite verwenden. MeineErsteWebsite ist dann der Name des Ordners, in dem die Website-Dateien abgelegt werden. Expression Web generiert die-sen Ordner automatisch für Sie.

Möchten Sie den Ordner direkt auf Ihrem Webserver anlegen, müssen Sie die Adresse des Web-servers angeben. Dies geschieht mit Hilfe eines URL. Lautet der Pfad zu Ihrem Webserver z. B. http://MeinServer, könnten Sie http://MeinServer/MeineErsteWebsite als Pfad angeben. Expres-sion Web würde dann auf dem Webserver einen Ordner namens MeineErsteWebsite anlegen, in dem alle Website-Dateien gespeichert würden.

Beachten Sie, dass Sie den Benutzernamen und das Kennwort eingeben müssen, die Sie für den Zugriff auf Ihren Webserver benötigen, damit Expression Web die neue Website dort erzeugen kann. Expression Web fordert Sie automatisch zur Eingabe dieser Daten auf, wenn Sie einen URL als Ziel angeben.

Die neue Website in der OrdneransichtDie neue Website wird nun von Expression Web erstellt. Dieser Vorgang kann einige Zeit beanspru-chen. Wie Sie an Abbildung 4.2 erkennen können, zeigt Expression Web eine neue Website immer zuerst in der Ordneransicht an. Dazu fügt Expression Web dem Arbeitsbereich eine Registerkarte namens Website hinzu, die alle Ordner und Dateien auflistet, aus denen die Site besteht.

Dass die Ordneransicht aktiviert ist, erkennen Sie auch an der Ansichtenleiste im unteren Bereich, mit deren Hilfe Sie schnell zu einer der Ansichten Ordner, Remotewebsite, Berichte und Hyperlinks wechseln können. Der Name Ordner ist dort andersfarbig unterlegt, was darauf hinweist, dass diese Ansicht gerade aktiv ist.

Sie interessiert jedoch noch nicht die Ordneransicht. Sie möchten erfahren, wie die Seiten der neuen Website aussehen. Wenn Sie einen Blick auf die Ordneransicht werfen, werden Sie feststellen, dass der für die neue Website erstellte Ordner neben einigen Unterordnern nur eine Webseite enthält. Da der Dateiname einer gewöhnlichen Webseite immer auf .htm oder .html endet, kann es sich bei die-ser Webseite somit nur um default.htm handeln. (Alle anderen Webseiten befinden sich in den ver-schiedenen Unterordnern.) Diese Seite möchten Sie nun zur Ansicht öffnen.

WICHTIG

HINWEIS


Wichtige Elemente und Bearbeitungsfunktionen

73

Grun

dlag

en

Abbildg. 4.2 Das neue Web in der Ordneransicht


In den folgenden Abschnitten werfen Sie einen Blick auf die verschiedenen Seiten einer mit Expres-sion Web erzeugten Site und lernen auf diese Weise die dort verwendeten Elemente kennen. Sie wer-den die Seiten außerdem ein wenig überarbeiten.

Webseiten öffnenUm mit Expression Web eine Webseite der aktuellen Site zur Ansicht zu öffnen, stehen Ihnen meh-rere Möglichkeiten zur Verfügung. Sie können die Seite über die Ordnerliste, die Ordneransicht oder über das Menü Datei öffnen.

Webseiten über die Ordnerliste öffnenUm eine Webseite über die Ordnerliste zu öffnen, gehen Sie wie folgt vor:

1. Achten Sie darauf, dass die Ordnerliste aktiviert ist. Wenn Sie nicht aktiviert ist, wählen Sie im Menü Aufgabenbereiche den Befehl Ordnerliste.



74

Der Aufgabenbereich Ordnerliste wird in der Regel auf der linken Seite des Expression Web-Fensters in Form eines Hierarchie-Listenfeldes angezeigt.

2. Wenn die Website Unterordner verwendet und die anzuzeigende Seite in einem der Unterordner gespeichert ist, öffnen Sie diesen zunächst, indem Sie auf den Knoten (das Pluszeichen) vor dem Ordnernamen klicken.

3. Führen Sie zuletzt einen Doppelklick auf der Webseite aus, die im Arbeitsbereich angezeigt wer-den soll.

Webseiten über die Ordneransicht öffnen

Um eine Webseite über die Ordneransicht zu öffnen, gehen Sie wie folgt vor:

1. Achten Sie darauf, dass die Ordneransicht aktiviert ist. Wenn Sie nicht aktiviert ist, wählen Sie im Menü Website den Befehl Ordner.

2. Wenn die Website Unterordner verwendet und die anzuzeigende Seite in einem der Unterordner gespeichert ist, öffnen Sie diesen zunächst, indem Sie einen Doppelklick darauf ausführen.

3. Führen Sie zuletzt einen Doppelklick auf der Webseite aus, die im Arbeitsbereich angezeigt wer-den soll.

Webseiten über das Menü Datei öffnen

Jede Seite des aktuellen Webs kann über das Expression Web-Menü Datei geöffnet werden. Gehen Sie dazu wie folgt vor:

1. Wählen Sie im Menü Datei den Befehl Öffnen.

Anschließend wird ein Dialogfeld mit einem großen Listenfeld auf der rechten Seite angezeigt, das alle Dateien und Ordner aufführt, aus denen Ihr Web besteht, wie in Abbildung 4.3 darge-stellt.

Abbildg. 4.3 Wählen Sie die anzuzeigende Webseite aus



75

Grun

dlag

en

2. Öffnen Sie den Ordner, in dem sich die anzuzeigende Webseite befindet, mit einem Doppelklick. Sie müssen möglicherweise im Listenfeld nach unten blättern, um den gewünschten Ordner zu finden. Ist die Seite im Hauptordner der Site enthalten, müssen Sie keinen untergeordneten Ordner öffnen.

3. Markieren Sie die Webseite, die Sie öffnen möchten, und klicken Sie anschließend auf die Schalt-fläche Öffnen. Eine andere Möglichkeit besteht darin, einen Doppelklick auf dem Symbol der Seite auszuführen. Sie müssen möglicherweise im Listenfeld nach unten blättern, um die gewünschte Seite zu finden.

Die SeitenansichtÖffnen Sie die Seite default.htm auf die soeben beschriebene Weise. Die Seite wird daraufhin in der Seitenansicht von Expression Web angezeigt, wie in Abbildung 4.4 dargestellt.

Die Abbildung zeigt übrigens aus Gründen der Übersichtlichkeit ein Expression Web-Fenster, des-sen Aufgabenbereiche (Toolbox, Tageigenschaften usw.) ausgeblendet wurden. Sie blenden Aufga-benbereiche mit Hilfe des Menüs Aufgabenbereiche ein und aus.

Abbildg. 4.4 Die Homepage-Vorlage



76

default.htm ist die Webseite, die zuerst angezeigt wird, wenn ein Internet-Benut-zer die Adresse der Website in das Adressfeld seines Browsers eingibt. Wenn Ihre Website bei-spielsweise unter der Adresse http://www.MeineWebsite.de gespeichert ist und ein Benutzer diese Adresse eingibt, sieht der Webserver im Ordner dieser Site nach, ob es dort eine Datei namens default.htm gibt. In diesem Fall sendet er die Datei an den Browser zurück, der die Seite dann anzeigt.

Die Seite einer Website, die nach der Eingabe der Website-Adresse in das Adressfeld des Brow-sers zuerst angezeigt wird, wird allgemein als Homepage bezeichnet. Weitere zulässige Dateina-men für die Homepage sind default.html, index.htm und index.html.

Denken Sie daran, dass es sich hierbei um eine Vorlage handelt. Das Layout der Seite bedarf zwar keiner weiteren Überarbeitung, doch der Text muss geändert werden.

Lorem Ipsum

Erschrecken Sie bitte nicht, wenn Sie einen Blick auf den Vorlagentext werfen. Sie wurden nicht in der Zeit zurückgeschleudert und befinden sich nun im römischen Reich. Der lateinische Text wurde von den Expression Web-Entwicklern mit Bedacht als Vorlagentext ausgewählt.

Dabei handelt es sich um einen so genannten Lorem-Ipsum-Text. Dies ist ein Blindtext ohne Bedeu-tung, der lediglich als Platzhalter für Ihren künftigen Text dient. Lorem-Ipsum-Texte werden in der Regel aus einem Cicero-Werk (De finibus bonorum et malorum; Über das höchste Gut und das größte Übel) generiert und absichtlich verfremdet, damit der Betrachter nicht durch den Inhalt abgelenkt wird.

Oft beginnt der Text mit den Worten Lorem Ipsum, wobei Lorem kein lateinisches Wort ist. Der Grund für diese Art der Kennzeichnung besteht darin, dass die heutige Druckaufbereitungs-Soft-ware automatisch feststellt, wenn sich im Text die Worte »Lorem Ipsum« befinden. In diesem Fall wird eine entsprechende Warnung ausgegeben, die darüber informiert, dass noch Blindtext in der Publikation vorhanden ist.

Die Elemente der HomepageBevor Sie beginnen, den Vorlagentext der Homepage Ihren Vorstellungen entsprechend zu verän-dern, sollen Sie zunächst erfahren, aus welchen Elementen die Webseite besteht.

� Die Homepage beginnt mit einem so genannten Banner.

Ein Banner ist ein Bild oder ein Schriftzug, das bzw. der in der Regel am oberen Rand jeder Seite eines Webs angezeigt wird. Banner können aus Text und anderen Gestaltungselementen beste-hen. Das Banner der Homepage-Vorlage besteht aus dem Text Websitename und einem etwas kleineren Text darunter (Beschreibung der Website).

� Unter dem Banner und in der Fußzeile der Seite befinden sich Navigationsbereiche mit Hyper-links zu den verbleibenden Seiten der Site.

Sie sind horizontal angeordnet und enthalten Verknüpfungen zu den Seiten Privat, Über mich, Lebenslauf, Fotosammlung, Hyperlinks und Kontakt.

Sie fragen sich nun vielleicht, weshalb ein zweiter Navigationsbereich auf der Seite angeordnet wurde. Der Grund hierfür besteht darin, dass einige Besucher die Seite nach unten blättern wer-

HINWEIS



77

Grun

dlag

en

den, um den gesamten Text der Homepage zu lesen (sofern Sie dort einen längeren Text einge-ben). Der Bereich befindet sich am Ende der Seite, damit diese Besucher nicht zurückblättern müssen, um einen Hyperlink aktivieren zu können, der zu einer der anderen Seiten des Webs führt.

� Unter dem oberen Navigationsbereich ist der Homepage-Text angeordnet.

Er ist in zwei Bereiche unterteilt. Links befindet sich ein großes Textfeld mit einer entsprechend großen Überschrift. Dieses Feld kann viel Text aufnehmen. Dort vermitteln Sie den Besuchern in der Regel einen ersten Einblick, der Aufschluss darüber gibt, worum es sich bei dieser Website handelt und was auf den restlichen Seiten zu finden ist. Der Text rechts auf der Homepage ist etwas kürzer und weist eine kleinere Überschrift auf. Dort könnten Sie Informationen veröffent-lichen, die nicht direkt etwas mit Ihrer Website zu tun haben, wie zum Beispiel einen Spruch des Tages oder die aktuelle Temperatur an Ihrem Wohnort.

� Der gesamte äußere linke Bereich der Seite ist für ein Bild reserviert, das der Verzierung der Homepage dient.

Sie können den Text der Homepage durch einen persönlichen Text ersetzen, der angezeigt werden soll, wenn später ein Internet/Intranet-Anwender Ihre Website besucht.

ObjektkennzeichnungenAbhängig davon, welche visuellen Unterstützungen Sie im Menü Ansicht aktiviert haben, werden die Objekte einer Webseite (Bilder, Textabsätze usw.), die Sie mit der Maus anklicken, auf eine bestimmte Art und Weise gekennzeichnet. Standardmäßig wird das ausgewählte Objekt mit einem Rahmen kenntlich gemacht, an dem ein kleines Infofeld angeordnet wird, das die Objektbezeich-nung aufführt.

Beachten Sie, dass sich einige Objekte in so genannten bearbeitbaren Bereichen befinden können. Bearbeitbare Bereiche sind die Bereiche einer Masterseite (siehe nächster Abschnitt), die von Ihnen verändert werden können, wenn Sie in der Entwurfsansicht an einer Webseite arbeiten, die eine Masterseite einbindet. Befindet sich also ein Objekt in einem bearbeitbaren Bereich, werden sowohl der bearbeitbare Bereich als auch das Objekt durch einen Rahmen kenntlich gemacht, an dem dann zwei Infofelder erscheinen. Das erste Infofeld nennt den Namen des Bereichs, und das zweite Info-feld führt die Bezeichnung des Objekts auf, das sich in diesem Bereich befindet und das mit einem Mausklick markiert wurde.

Arbeiten mit TextIhr erster Schritt bei der Arbeit mit einer Expression Web-Vorlage besteht darin, den von der Vor-lage vorgegebenen Platzhaltertext durch eigene Informationen zu ersetzen. Die Textsteuerung gleicht der einer gewöhnlichen Textverarbeitung, wie zum Beispiel Microsoft Word. Die Einfüge-marke wird mit den Pfeiltasten bewegt. Das Markieren einzelner Textpassagen geschieht mit der (ª)-Taste und den Pfeiltasten oder mit Hilfe der Maus.

Beachten Sie bitte, dass Sie nicht alle Textpassagen bearbeiten können. Wenn Sie beispielsweise den Mauszeiger auf das Banner der Homepage bewegen, nimmt er die Gestalt eines Verbotszeichens an. Dies geschieht auch, wenn Sie ihn auf das einzige Bild der Homepage und auf den unteren Navigationsbereich bewegen.

WICHTIG



78

Der Grund hierfür besteht darin, dass diese aus einer Vorlage erzeugte Website eine so genannte Masterseite verwendet. Masterseiten (engl. Masterpage) definieren die Elemente, die auf jeder Webseite erscheinen sollen, die die Masterseite einbindet.

Wenn Sie somit beispielsweise möchten, dass ein bestimmtes Banner und darunter ein Naviga-tionsbereich auf jeder Seite Ihrer Site erscheinen, erstellen Sie eine Masterseite mit diesem Ban-ner und Navigationsbereich. Diese Masterseite kann dann in jede Seite Ihres Webs eingebunden werden, sodass Sie das Banner und den Bereich nicht jedes Mal neu erstellen müssen. Außerdem müssen Sie Änderungen nur an der Masterseite vornehmen, wenn Sie das Banner oder den Bereich überarbeiten möchten. Die Änderungen werden dann automatisch auf jeder Seite ange-zeigt, die die Masterseite einbindet.

Auf einer Seite, die eine Masterseite einbindet, können Sie aber nur die Elemente bearbeiten, die nicht Bestandteil der Masterseite sind. Wenn Sie die Elemente der Masterseite bearbeiten möch-ten, müssen Sie diese Seite in der Entwurfsansicht von Expression Web öffnen. Masterseiten wer-den später in diesem Kapitel näher erläutert.

Text markieren

Das Markieren von Text ist besonders wichtig für die Arbeit mit Expression Web. Sie markieren Text, um Expression Web mitzuteilen, was mit dem markierten Text geschehen soll. Sie können markierten Text beispielsweise löschen, formatieren (zuweisen von Gestaltungsmerkmalen wie zum Beispiel Fett- oder Kursivschrift) und an eine andere Stelle kopieren. Die folgende Tabelle verrät, wie Sie die verschiedenen Textpassagen markieren können.

Tabelle 4.1 Text markieren

Zu markierende Passage Vorgehensweise

Absatz Bewegen Sie die Einfügemarke vor das erste Wort des Absatzes. Drücken und halten Sie die Tastenkombination (ª)+(Strg) und betätigen Sie die Taste (¼). Lassen Sie danach alle Tasten wieder los.Um einen Absatz mit der Maus zu markieren, bewegen Sie den Mauszeiger vor das erste Wort des Absatzes, sodass dieser die Form eines nach rechts oben weisenden Pfeils annimmt, und führen einen Doppelklick aus. (Befindet sich der Text in einer Tabelle oder einem anderen Container (z. B. div-Element), ist diese Art der Markierung nur dann möglich, wenn zwischen Text und Containerrand genug Abstand vorhanden ist, um den Mauszeiger dort zu positionieren.)

Eine Zeile markieren Bewegen Sie die Einfügemarke vor das erste Wort der Zeile. Halten Sie die (ª)-Taste gedrückt und betätigen Sie die Taste (Ende). Geben Sie danach beide Tasten wieder frei.Um eine Zeile mit der Maus zu markieren, bewegen Sie den Mauszeiger vor das erste Wort der Zeile, sodass dieser die Form eines nach rechts oben weisenden Pfeils annimmt, und führen einen einfachen Klick aus. (Befindet sich der Text in einer Tabelle oder einem anderen Container (z. B. div-Element), ist diese Art der Markierung nur dann möglich, wenn zwischen Text und Containerrand genug Abstand vorhanden ist, um den Mauszeiger dort zu positionieren.)

Ein einzelnes Wort markieren Bewegen Sie die Einfügemarke vor das Wort. Drücken und halten Sie die Tastenkombination (Strg)+(ª) und betätigen Sie die Taste (Æ). Lassen Sie danach alle Tasten wieder los.Um ein Wort mit der Maus zu markieren, bewegen Sie den Mauszeiger vor das Wort und führen einen Doppelklick aus.



79

Grun

dlag

en

Formatieren von TextWenn Sie Text markiert haben, können Sie Expression Web mitteilen, was mit diesem markierten Text geschehen soll. Sie können Text nicht nur löschen, sondern auch mit bestimmten Gestaltungs-merkmalen auszeichnen. Dieser Vorgang wird als Formatierung bezeichnet.

Das Formatieren des Textes von Webseiten ist mit verschiedenen Problemen verbunden. Sie können beispielsweise nicht wissen, welche Schriftarten die Besucher Ihrer Website installiert haben. Es könnte somit geschehen, dass Sie für den Text Ihrer Webseiten die Schriftart Engravers verwenden, aber einige Ihrer Besucher nicht über diese Schriftart verfügen. Darüber hinaus ist es möglich, dass Schriftarten zwar dieselben Namen besitzen, aber dennoch unterschiedliche Erscheinungsbilder aufweisen, weil sie von verschiedenen Anbietern stammen oder auf verschiedenen Plattformen ver-wendet werden.

Das ursprüngliche HTML versuchte, derartige Probleme mit der Schriftart zu vermeiden, indem es erst gar keine Einstellungsmöglichkeiten für Schriftarten anbot. Stattdessen war es möglich, Text-

Mehrere Wörter markieren Bewegen Sie die Einfügemarke vor das erste Wort. Drücken und halten Sie die Tastenkombination (Strg)+(ª) und betätigen Sie wiederholt die Taste (Æ), bis alle gewünschten Wörter markiert sind. Lassen Sie danach alle Tasten wieder los.Um mehrere Wörter mit der Maus zu markieren, bewegen Sie den Mauszeiger vor das erste Wort, klicken und halten die linke Maustaste und ziehen die Maus über die restlichen Wörter. Lassen Sie die Maustaste anschließend wieder los. Achten Sie darauf, den Mauszeiger nicht aus der aktuellen Textzeile zu bewegen, da Sie andernfalls die gesamte Zeile markieren.

Tabelle 4.1 Text markieren (Fortsetzung)

Zu markierende Passage Vorgehensweise

PROFITIPPBeachten Sie die folgenden fünf Empfehlungen, wenn Sie auf Ihren Webseiten Text formatieren möchten:

� Benutzen Sie Schriftarten, die von den meisten Betriebssystemen standardmäßig unterstützt werden. Wenn die Besucher Ihrer Webseiten nicht über die von Ihnen verwendeten Schriftar-ten verfügen, werden diese durch eine Standardschriftart ersetzt, was das gesamte Erschei-nungsbild beeinträchtigen kann.

� Seien Sie zurückhaltend. Greifen Sie auf einige wenige sorgfältig ausgewählte Schriftarten und -größen zurück. Würfeln Sie nicht viele verschiedene Schriften und Größen durcheinan-der, da es andernfalls schwierig wird, Ihre Seiten zu lesen.

� Achten Sie auf Kontrast. Wählen Sie eine Textfarbe, die sich deutlich vom Hintergrund abhebt (aber nicht zu deutlich, damit die Augen nicht schmerzen).

� Benutzen Sie nicht zu kleine Schriftarten. Kleine Schriftarten sind etwas für Verträge. Wenn Text nicht wichtig genug ist, um in einer großen Schrift dargestellt zu werden, verzichten Sie lieber darauf.

� Benutzen Sie nicht zu große Schriftarten. Verschwenden Sie keinen Platz für riesige Schriften, die den Lesefluss verlangsamen und den Besucher zwingen, intensiv durch die Seiten zu blät-tern.



80

blöcke gemäß ihrer strukturellen Verwendung im Dokument zu kennzeichnen, zum Beispiel als Zitat, Definition, Code usw. Die Browser der Besucher bestimmten dann, in welcher Schriftart diese Textblöcke angezeigt wurden.

Neuere HTML-Versionen unterstützen die Auswahl von Schriftarten. Doch nur weil Expression Web es Ihnen ermöglicht, Ihrem Text Schriftarten wie Engravers, Estrangelo oder Edwardian Script zuzuweisen, bedeutet dies nicht, dass Ihre Webbesucher ebenfalls über diese Schriftarten verfügen. Wenn ein Besucher eine von Ihnen verwendete Schriftart nicht besitzt, wird diese in der Regel durch die Standardschriftart des Browsers ersetzt, was das lange durchdachte Erscheinungsbild Ihrer Webseiten schnell zunichte machen kann.

Formatieren von Text mit dem Dialogfeld SchriftartUm Expression Web mitzuteilen, welche Formatierungen Sie für einen markierten Text vorgesehen haben, öffnen Sie das Menü Format und wählen dort den Eintrag Schriftart aus. Alternativ dazu können Sie den Mauszeiger auf das markierte Wort bewegen, mit einem Klick auf die rechte Maus-taste das Kontextmenü der Markierung öffnen und dort den Eintrag Zeichen auswählen.

Im Anschluss daran wird das in Abbildung 4.5 dargestellte Dialogfeld Zeichen geöffnet. Mit Hilfe dieses Dialogfeldes formatieren Sie den markierten Text. Es besteht aus zwei Registerkarten, deren Formatierungsoptionen nachfolgend beschrieben sind.

Abbildg. 4.5 Teilen Sie Expression Web in diesem Dialogfeld mit, wie der markierte Text dargestellt werden soll

Die Registerkarte Schriftart

Auf der Registerkarte Schriftart nehmen Sie die folgenden Einstellungen vor:

� Schriftart: Mit Hilfe dieses Listenfeldes wählen Sie die Schriftart aus, in der der Text angezeigt werden soll.



81

Grun

dlag

en

� Schriftschnitt: Stellt den Text abhängig von Ihrer Auswahl in Fett- und/oder Kursivschrift dar.

� Schriftgrad: In diesem Listenfeld wählen Sie eine Schriftgröße aus.

Beachten Sie, dass in dem Listenfeld die Größe mit Hilfe von Namen angegeben ist, z. B. xx-small für besonders klein, x-small für sehr klein, small für klein usw. Dabei handelt es sich um so genannte Attribute des CSS-Standards, der später in diesem Kapitel näher erläutert wird. Momentan genügt es, wenn Sie wissen, dass Sie mit Hilfe dieses Listenfeldes die Größe des mar-kierten Textes verändern können.

Die eher vertraute Größenangabe in der Einheit Punkt, die Sie in Klammern hinter den Zahlen finden, soll Ihnen helfen, eine bessere Vorstellung von der Schriftgröße zu bekommen, obwohl sie lediglich ein ungefähres Richtmaß ist, da die tatsächliche Schriftgröße abhängig von den ver-wendeten Browsern und Betriebssystemen der Benutzer variieren kann.

Sie können die Schriftgröße auch über dem Listenfeld direkt eingeben. In der obi-gen Abbildung 4.5 ist beispielsweise die Größe 0,75em vermerkt, wobei Em die Einheit für eine typografische Maßeinheit namens Geviert ist, die noch aus der Zeit des Bleisatzes stammt. Heute ist damit eine relative Größe gemeint. 1 Em entspricht der für eine Webseite verwendeten Stan-dardschriftgröße. 0,75 Em sind somit drei Viertel dieser Größe.

Sie müssen diese Einheit aber nicht verwenden. Sie können auch, wie von einer Textverarbeitung gewohnt, die Einheit Punkt verwenden, die mit pt abgekürzt wird (z. B. 12pt), obwohl dies für die Erstellung von Webseiten nicht empfehlenswert ist, weil es auf verschiedenen Systemen zu unterschiedlichen Ergebnissen führen kann.

Mit der relativen Einheit Em sind Sie jedoch auf der sicheren Seite, denn selbst wenn die Standardschriftgröße auf einem anderen als Ihrem System größer oder kleiner ange-zeigt wird, bleibt das Größenverhältnis immer konstant, weil Sie die Größe relativ zur Standard-größe angeben und nicht eine feste Punktzahl festlegen.

� Farbe: Aus diesem Listenfeld können Sie die gewünschte Farbe des Textes auswählen. Zusätzlich zu den sechzehn Standardfarben bietet das Listenfeld eine Auswahl der vom aktuellen Doku-ment verwendeten Farben an.

� Unterstrichen: Stellt den markierten Text unterstrichen dar oder aktiviert die Unterstreichung, wenn kein Text markiert ist. Wenn Sie bereits unterstrichenen Text markieren oder zuvor die Unterstreichung aktiviert haben, können Sie das Kontrollkästchen deaktivieren, um diese Art der Formatierung aufzuheben.

� Durchgestrichen: Stellt den Text durchgestrichen dar bzw. hebt diese Art der Formatierung wie-der auf.

� Überstrichen: Stellt den Text überstrichen dar bzw. hebt diese Art der Formatierung wieder auf. Wird nur von Browsern angezeigt, die CSS unterstützen. Weitere Informationen zu CSS finden Sie später in diesem Kapitel.

� Blinkend: Zeigt den Text blinkend an. Browser, die blinkenden Text nicht darstellen können, ignorieren diese Einstellung.

� Hochgestellt: Verringert die Größe des Textes und verschiebt dessen Grundlinie nach oben, wie bei der 4 in 24.

HINWEIS

WICHTIG



82

� Tiefgestellt: Verringert die Größe des Textes und verschiebt dessen Grundlinie nach unten, wie bei der 2 in H2O.

� Kapitälchen: Ersetzt alle Kleinbuchstaben des Textes durch Großbuchstaben mit einer kleineren Schriftgröße. Wird nur von Browsern angezeigt, die CSS unterstützen. Weitere Informationen zu CSS finden Sie später in diesem Kapitel.

� Großbuchstaben: Ersetzt alle Buchstaben des Textes durch Großbuchstaben. Wird nur von Brow-sern angezeigt, die CSS unterstützen. Weitere Informationen zu CSS finden Sie später in diesem Kapitel.

� Initialen groß: Verwendet für den ersten Buchstaben jedes Wortes einen Großbuchstaben, auch wenn das Wort mit einem Kleinbuchstaben beginnt. Wird nur von Browsern angezeigt, die CSS unterstützen. Weitere Informationen zu CSS finden Sie später in diesem Kapitel.

� Ausgeblendet: Unterdrückt die Anzeige des markierten Textes. Wird nur von Browsern angezeigt, die CSS unterstützen. Weitere Informationen zu CSS finden Sie später in diesem Kapitel.

� Fett: Hebt den Text hervor. Die meisten Browser verwenden für diese Formatierung Fettschrift.

� Betonung: Hebt den Text hervor. Die meisten Browser verwenden für diese Formatierung Kur-sivschrift.

� Beispiel: Verwendet eine nichtproportionale Schriftart für den Text, in der Regel ist dies die Schriftart Courier.

� Definition: Weist auf eine Definition hin, für die gewöhnlich eine Kursivschrift verwendet wird.

� Zitat: Weist auf ein Zitat hin, für das gewöhnlich eine Kursivschrift verwendet wird.

� Variabel: Weist auf einen Variabelnamen hin, für den gewöhnlich eine Kursivschrift verwendet wird.

� Tastatur: Wird in der Regel für die Darstellung von Tastatureingaben verwendet, die der Besu-cher der Webseite vornehmen soll, wie zum Beispiel: Drücken Sie die (Entf)-Taste. Dazu wird meistens eine nichtproportionale Schrift wie Courier benutzt.

� Code: Wird für die Darstellung von Programmcode auf einer Webseite benutzt. Dabei handelt es sich meistens um eine nichtproportionale Schrift wie Courier.

Denken Sie sorgfältig darüber nach, ob Sie im Dialogfeld Zeichen unter Effekte das Kontrollkästchen Unterstrichen aktivieren, um einen markierten Text unterstrichen darstellen zu lassen. Diese Formatierung könnte bei den Besuchern Ihrer Website zu Verwirrungen führen, da in der Regel lediglich Text-Hyperlinks unterstrichen dargestellt werden. Die Besucher könnten also dazu verleitet werden, den unterstrichenen Text anzuklicken. Diese Aktion würde jedoch nicht wie erwartet zu einer anderen Webseite führen.

Die Registerkarte Zeichenabstand

Auf der Registerkarte Zeichenabstand nehmen Sie die folgenden Einstellungen vor:

� Abstand: Wählen Sie Normal, wenn zwischen den einzelnen Zeichen der Standardabstand ver-wendet werden soll, Erweitert, wenn Sie den Abstand zwischen den Zeichen vergrößern möch-ten, und Verengt, um den Abstand zu verkleinern. Diese Formatierung wird nur von Browsern angezeigt, die CSS unterstützen. Alle anderen Browser ignorieren die hier vorgenommene Ein-stellung.

WICHTIG



83

Grun

dlag

en

� um: Geben Sie hier den Wert in der Einheit Punkt ein, um den der Abstand vergrößert bzw. ver-kleinert werden soll.

� Position: Diese Einstellung legt die vertikale Position des Textes fest. Mögliche Optionen sind Basislinie, Tiefgestellt, Hochgestellt, Oben, Textoberkante, Mitte, Unten und Textunterkante.

Um die Auswirkungen der von Ihnen auf dieser Registerkarte vorgenommenen Einstellungen zu sehen, werfen Sie einen Blick auf den Vorschaubereich unten im Dialogfeld.

Formatieren von Text über die Symbolleiste

Eine weitere Möglichkeit, Textformatierungen vorzunehmen, bietet die Symbolleiste von Expression Web. Sie befindet sich standardmäßig unter der Menüleiste, kann aber an eine andere Stelle verscho-ben werden. Die meisten der auf der Symbolleiste angeordneten Elemente dienen dem Formatieren von Text, Aufzählungen und Nummerierungen sowie Einzügen.

Wenn die Symbolleiste nicht angezeigt wird, wählen Sie im Menü Ansicht den Befehl Symbolleisten und anschließend Allgemein oder Format.

Die folgende Tabelle beschreibt die Schaltflächen der Symbolleiste, die Sie zur Zeichenformatierung verwenden können.

HINWEIS

Tabelle 4.2 Zeichenformatierung über die Symbolleiste Format

Symbol Name Beschreibung

Schriftart Mit Hilfe dieses Listenfeldes wählen Sie die Schriftart aus, in der der Text angezeigt werden soll

Schriftgrad In diesem Listenfeld wählen Sie eine von zehn möglichen Schriftgrößen aus

Fett Stellt den Text fett dar

Kursiv Stellt den Text kursiv dar

Unterstrichen Unterstreicht den Text

Schriftart vergrößern Wählt die jeweils nächst größere Schriftgröße

Schriftart verkleinern Wählt die jeweils nächst kleinere Schriftgröße

Hervorheben Mit Hilfe dieses Listenfeldes legen Sie die Hintergrundfarbe des Textes fest

Schriftfarbe Aus diesem Listenfeld können Sie die gewünschte Farbe des Textes auswählen



84

Absätze formatierenIm vorherigen Abschnitt haben Sie erfahren, wie Sie einzelne markierte Textpassagen formatieren bzw. Formatierungen aktivieren und deaktivieren können. Mit einzelnen markierten Textpassagen sind markierte Wörter, Teile von Wörtern, Sätze oder Zeilen gemeint. Expression Web bietet jedoch ebenfalls Formatierungsoptionen an, die Sie auf ganze Absätze anwenden können. Diese Formatie-rungen beziehen sich immer auf den Absatz, in dem sich die Einfügemarke befindet bzw. auf die von Ihnen markierten Absätze.

Expression Web unterstützt die in Abbildung 4.6 dargestellten Standardabsatzformate sowie einige Aufzählungs- und Nummerierungsformate, die später in diesem Kapitel beschrieben werden. Den-ken Sie daran, dass es sich hierbei um Absatz- und nicht um Textformate handelt. Sie können sie somit immer nur vollständigen Absätzen zuweisen, aber nicht einzelnen Textpassagen innerhalb dieser Absätze.

Beachten Sie, dass sich viele dieser Absatzformatierungen auf den Inhalt eines Absatzes beziehen. Dabei muss es sich nicht notwendigerweise um Text handeln. Wenn Sie bei-spielsweise einen Absatz rechtsbündig ausrichten, geschieht dies unabhängig davon, ob dieser Absatz Text oder zum Beispiel ein Bild enthält.

Abbildg. 4.6 Expression Web unterstützt diese Absatzstandardformate

WICHTIG



85

Grun

dlag

en

XHTML wurde entwickelt, um die Struktur eines Dokuments und nicht das Erschei-nungsbild der im Dokument enthaltenen Elemente zu definieren. Jeder Browser kann diese Ele-mente deshalb auf eine andere Art und Weise anzeigen.

Um dem aktuellen Absatz oder den markierten Absätzen eines der in Abbildung 4.6 dargestellten Absatzformate zuzuweisen, benutzen Sie das Listenfeld Formatvorlage, das sich links in der Symbol-leiste Format und in der Symbolleiste Allgemein rechts neben den ersten vier Symbolen befindet.

ÜberschriftenMit den Absatzformaten Überschrift 1 bis 6 können Sie in Ihren Webseiten Überschriften unter-schiedlicher Größe erzeugen, wobei Überschrift 1 die größte und Überschrift 6 die kleinste Schrift-art verwendet. Wenn Sie jedoch auf einer Seite alle sechs Überschriften benutzen, ist dies in der Regel ein Zeichen dafür, dass die Seite zu lang ist und in mehrere Seiten unterteilt werden sollte.

Die sechs Überschriften dienen mehr der Auswahl einer für Ihre Webseiten geeig-neten Schriftgröße. Wenn Sie beispielsweise mit einer kleineren Schriftart arbeiten, sollten Sie für die größte Überschrift nicht die Formatvorlage Überschrift 1 einsetzen. Stattdessen könnten Sie mit Überschrift 2 oder 3 beginnen.

TextkörperSie können einen Absatz nicht nur als Überschrift formatieren. Expression Web bietet Ihnen weitere Formate für den Text eines Absatzes an, die ebenfalls in Abbildung 4.6 zu sehen sind.

Die folgenden Standardformatierungen für den Absatztext stehen Ihnen zur Verfügung:

� Absatz: Benutzen Sie diese Formatvorlage für gewöhnlichen Text. Ein Absatz, dem diese Format-vorlage zugewiesen wird, erhält keine besonderen Gestaltungsmerkmale. Der Text wird in der Standardschriftart und nicht eingerückt dargestellt.

� Vorformatiert: Der Text in einem Absatz, dem diese Formatvorlage zugewiesen wurde, weist drei besondere Eigenschaften auf. Er wird in einer nicht proportionalen Schriftart dargestellt, behält mehrere aufeinander folgende Leerzeichen bei und wird innerhalb des Browserfensters nicht umbrochen.

� Definierter Begriff und Definition: Diese beiden Formatvorlagen werden in der Regel zusammen verwendet, um einen Begriff zu definieren. Dabei setzen Sie den zu definierenden Begriff in die obere Zeile, weisen ihm die Formatvorlage Definierter Begriff zu und formatieren den Absatz darunter mit der Formatvorlage Definition. Dort fügen Sie dann die eigentliche Definition ein, die rechts eingerückt dargestellt wird.

� Adresse: Diese Formatvorlage wird für Absätze verwendet, die Webadressen enthalten (zum Bei-spiel www.microsoft.com/germany). Sie wird oft für Hyperlinks benutzt und meist in kursiver Schrift dargestellt.

� Sortierte Liste: Diese Formatvorlage wird für Absätze verwendet, die als nummerierte Aufzäh-lung angezeigt werden sollen.

� Unsortierte Liste: Stellt Absätze als Aufzählung mit einem vorangestellten Aufzählungszeichen dar.

HINWEIS

TIPP



86

� Blockquote: Rückt Absätze weiter nach rechts ein, um sie von den umgebenden Absätzen abzu-heben. Diese Art der Formatierung wird oft für Zitate verwendet.

Es gibt zwei Tastenkombinationen, die Sie benutzen können, um zwei Absatzfor-matvorlagen zuzuweisen:

� (Strg)+(ª)+(N) weist dem aktuellen Absatz oder den markierten Absätzen die Formatvor-lage Absatz zu.

� (Strg)+(ª)+(L) formatiert den aktuellen Absatz oder die markierten Absätze als Aufzäh-lung. Aufzählungen werden später in diesem Kapitel beschrieben.

Ausrichtungen und Einrückungen

Die Abbildung 4.6 zeigt nicht nur die Standardformatvorlagen für Absätze, sondern auch eingerück-ten und ausgerichteten Text. In der Symbolleiste Format finden Sie die in der folgenden Tabelle auf-geführten Schaltflächen zum Ausrichten und Einrücken von Absätzen innerhalb der jeweiligen Con-tainer.

Ein Container ist ein Objekt, das den Raum begrenzt, in dem ein anderes Objekt dargestellt werden kann. Der Standardcontainer, der auch gleichzeitig der gebräuchlichste Con-tainer ist, ist das Fenster des Browsers. Doch auch Tabellenzellen, Frames und andere Objekte können Container sein.

TIPP

HINWEIS

Tabelle 4.3 Schaltflächen der Symbolleiste Format zum Ausrichten, Einrücken und Umranden von Absätzen

Symbol Name Beschreibung

Linksbündig Richtet den Inhalt des Absatzes am linken Rand des Containers aus

Zentriert Richtet den Inhalt des Absatzes zentriert im Container aus

Rechtsbündig Richtet den Inhalt des Absatzes am rechten Rand des Containers aus

Blocksatz Richtet den Inhalt des Absatzes innerhalb des Containers im Blocksatz aus, also so, dass die Ränder des Absatzes mit den Rändern des Containers abschließen

Einzugsposition verringern Verringert die Einrückung des Absatzes

Einzugsposition vergrößern Vergrößert die Einrückung des Absatzes

Rahmen Versieht den Absatz oder die Tabellenzelle, der bzw. die die Einfügemarke enthält, mit einem Rahmen. Wenn Sie neben dem Symbol auf den nach unten weisenden Pfeil klicken, wird darunter ein Dropdown-Listenfeld geöffnet. Sie wählen dort die Linien aus, die an dem Absatz oder der Tabellenzelle angeordnet werden sollen. Sie können Rahmen ebenfalls an vollständigen Tabellen oder Bildern anordnen. Diese müssen zuvor markiert werden.



87

Grun

dlag

en

Die folgenden Tastenkombinationen dienen ebenfalls der Ausrichtung von Text:

� (Strg)+(R) richtet den Absatz rechtsbündig aus.

� (Strg)+(L) richtet den Absatz linksbündig aus.

� (Strg)+(E) richtet den Absatz zentriert aus.

Das Dialogfeld Absatz

Zusätzlich zur Symbolleiste Format bietet Ihnen Expression Web das Dialogfeld Absatz an, mit dem Sie detailliertere Einstellungen zur Absatzformatierung vornehmen können. Sie öffnen das in Abbil-dung 4.7 dargestellte Dialogfeld Absatz, indem Sie im Menü Format den Befehl Absatz wählen.

Abbildg. 4.7 Absätze mit dem Dialogfeld Absatz formatieren

Das Dialogfeld bietet Ihnen die folgenden Einstellungsmöglichkeiten an:

� Ausrichtung

� Standard: Jede Zeile des Absatzes wird am Standardrand des Containers ausgerichtet. Dies ist in der Regel der linke Rand.

� Links: Jede Zeile wird am linken Containerrand ausgerichtet.

� Rechts: Jede Zeile wird am rechten Containerrand ausgerichtet.

� Zentriert: Jede Zeile wird zentriert im Container ausgerichtet.

� Blocksatz: Jede Zeile wird innerhalb des Containers im Blocksatz ausgerichtet, also so, dass die Ränder des Absatzes mit den Rändern des Containers abschließen.

� Einzug

� Links: Legt den Abstand zwischen dem linken Containerrand und der linken Absatzbegren-zung fest. Der Abstand wird in der Einheit Pixel angegeben.

TIPP



88

� Rechts: Legt den Abstand zwischen dem rechten Containerrand und der rechten Absatzbe-grenzung fest. Der Abstand wird in der Einheit Pixel angegeben.

� Erste Zeile einziehen: Legt den Einzug der ersten Zeile fest. Dies ist der Abstand zwischen dem linken Containerrand und der ersten Zeile des Absatzes, der in der Einheit Pixel angege-ben wird.

� Abstand

� Vor: Bestimmt die Größe des Leerraums über einem Absatz. Die Größenangabe erfolgt in der Einheit Pixel. Wenn Sie die Größe des Leerraums über einem Absatz auf 0 setzen und zwischen diesem und dem vorherigen Absatz dennoch ein Leerraum zu sehen ist, liegt dies wahrscheinlich daran, dass Sie einen Leerraum unter dem vorherigen Absatz eingerichtet haben (siehe nächste Einstellung).

� Nach: Bestimmt die Größe des Leerraums unter einem Absatz. Die Größenangabe erfolgt in der Einheit Pixel. Wenn Sie die Größe des Leerraums unter einem Absatz auf 0 setzen und zwischen diesem und dem nächsten Absatz dennoch ein Leerraum zu sehen ist, liegt dies wahrscheinlich daran, dass Sie einen Leerraum über dem nächsten Absatz eingerichtet haben (siehe vorherige Einstellung).

� Wort: Mit dieser Einstellung bestimmen Sie den Abstand zwischen den einzelnen Wörtern eines Absatzes. Der Wert kann auch negativ sein, in diesem Fall wird der Abstand entspre-chend verringert. Die Größenangabe erfolgt in der Einheit Pixel.

Beachten Sie bitte, dass Expression Web einen veränderten Wortabstand im Ent-wurfsmodus möglicherweise nicht anzeigt. Sie müssen die Seite erst speichern und im Vorschau-modus anzeigen lassen, um die Einstellung überprüfen zu können.

� Zeilenabstand: Mit dieser Einstellung bestimmen Sie den Abstand zwischen den einzelnen Zeilen eines Absatzes.

Die verschiedenen SeitenansichtenIn der Seitenansicht befinden sich drei Registerkarten im unteren Abschnitt des Arbeitsbereichs. Diese sind mit Entwurf, Teilen und Code bezeichnet. Jede Registerkarte stellt die aktuelle Webseite in einer bestimmten Weise dar.

Die Entwurfsansicht

Wenn Sie in Expression Web eine Seite einer Website zur Bearbeitung öffnen, indem Sie in der Ordner-liste oder Ordneransicht einen Doppelklick auf dem Namen der Seite ausführen, wird diese in der Ent-wurfsansicht angezeigt. Diese Ansicht ermöglicht die Bearbeitung der aktuellen Webseite. In dieser Ansicht ordnen Sie neue Objekte und Texte auf der Seite an oder verändern bzw. entfernen diese.

Die Vorschau

Abhängig davon, welche visuellen Unterstützungen Sie im Menü Ansicht aktiviert haben, kann die Entwurfsansicht Elemente anzeigen, die später im Browser nicht zu sehen sind. Gemeint sind bei-spielsweise Hilfslinien, die die Begrenzungen von unsichtbaren Containern (z.B. Tabellen ohne Rah-men) kenntlich machen.

WICHTIG



89

Grun

dlag

en

Wenn Sie somit eine realistische Vorschau der gerade von Ihnen bearbeiteten Webseite sehen möch-ten, ist die Entwurfsansicht nicht unbedingt hierfür geeignet. Expression Web bietet Ihnen jedoch die Möglichkeit, die Seite schnell und problemlos im Browser zu betrachten. Wählen Sie dazu im Menü Datei den Befehl Browservorschau und im anschließend angezeigten Menü die gewünschte Browsergröße aus.

Alternativ zur Menüauswahl können Sie auch die Taste (F12) drücken, um die Browservorschau zu starten. Die Seite wird dann wie in Abbildung 4.8 dargestellt angezeigt. Beachten Sie bitte, dass sich Ihr persönlicher Homepage-Text von dem in der Abbildung verwendeten Text sicherlich unterschei-den wird.

Abbildg. 4.8 Die veränderte Homepage in der Vorschauansicht

PROFITIPPExpression Web bietet Ihnen verschiedene Fenstergrößen für die Browservorschau an, weil nicht alle künftigen Besucher Ihrer Website dieselbe Auflösung verwenden werden. Auf diese Weise können Sie überprüfen, wie Ihre Website bei verschiedenen Bildschirmgrößen angezeigt wird.

Denken Sie immer daran, dass Benutzer, die mit geringen Auflösungen arbeiten, in breiten Webseiten seitlich blättern müssen, um diese lesen zu können. Die meisten Menschen empfinden dies als sehr störend und besuchen deshalb solche Seiten kein zweites Mal.

Wenn Sie somit mit Ihren Webinhalten eine breite Masse erreichen möchten, sollten Sie darauf achten, eine gewisse Seitenbreite nicht zu überschreiten. Es gibt zwar kaum Benutzer, die noch mit einer Auflösung von 640 × 480 Pixel arbeiten, aber das Format 800 × 600 Pixel ist immer noch sehr verbreitet. Die meisten Benutzer arbeiten jedoch mittlerweile mit mindestens 1.024 ×768 Pixel, und viele Websites werden erst ab dieser Größe so angezeigt, dass ein seitliches Blättern nicht notwendig ist.



90

Die Codeansicht

Die Codeansicht zeigt den Code an, aus dem Ihre Webseite besteht. Wie bereits in einem der vorhe-rigen Kapitel erwähnt wurde, ist eine Webseite ein Konglomerat aus verschiedenen Bestandteilen: XHTML-Tags, CSS-Elemente, Programmcode und Textinhalte. Am Ende dieses Kapitels werfen wir einen ersten Blick darauf.

Ließen Sie eine Ihnen bekannte Webseite von einem gewöhnlichen Texteditor anzeigen, wären Sie wahrscheinlich überrascht, weil Sie sie nicht wiedererkennen würden. Denn ein Texteditor zeigt den gesamten Inhalt der Seite an, also auch die XHTML-Tags und den Programmcode. Ein Texteditor kann außerdem keine Elemente wie Bilder, Hyperlinks usw. anzeigen, auf die die XHTML-Tags und der Programmcode der Webseite verweisen. Der Grund hierfür besteht darin, dass der Editor im Gegensatz zu einem Browser die in der Seite enthaltenen XHTML-Tags, CSS-Elemente und den Programmcode nicht interpretiert.

Sie können mit Expression Web eine Webseite so anzeigen lassen, wie sie von einem Texteditor ange-zeigt würde, indem Sie unter dem Arbeitsbereich auf den Registerreiter Code klicken. Doch weshalb sollten Sie dies tun? Schließlich arbeiten Sie mit Expression Web, um Webseiten visuell so zu gestal-ten, wie sie später den Besuchern präsentiert werden sollen. Sie ordnen Bilder, Hyperlinks und alle anderen Elemente direkt auf der Seite an, und zwar so als würden Sie beispielsweise Bilder auf eine Seite eines Fotoalbums kleben.

In der Codeansicht haben Sie die Möglichkeit, den Code der Seite, also die XHTML-Tags, die CSS-Elemente und den Programmcode zu verändern und zu ergänzen. Wenn Sie Websites mit einem überschaubaren Maß an Interaktion und dynamischen Inhalten erstellen, benötigen Sie diese Ansicht in der Regel nicht. Wenn Sie jedoch komplexe Aufgaben lösen möchten, die viel Programm-code erfordern, können Sie dies nur in der Codeansicht tun.

Die Codeansicht weist eine Besonderheit auf. Wenn Sie mit Masterseiten arbeiten und den Code einer Webseite, die eine Masterseite einbindet, anzeigen lassen, sehen Sie auch den Code der Masterseite, der farbig hinterlegt ist. Der Code der Masterseite wird mit einer anderen Farbe gekennzeichnet, damit Sie zwischen ihm und dem normalen Seitencode unter-scheiden können.

Geteilte Ansicht

In der geteilten Ansicht, die Sie unten im Arbeitsbereich mit einem Klick auf den Registerreiter Tei-len aktivieren, wird in einer Hälfte des Arbeitsbereichs die Entwurfsansicht und in der anderen die Codeansicht angezeigt. Auf diese Weise können Sie Änderungen am Code einer Webseite vorneh-men und die Auswirkungen dieser Änderungen auf das Erscheinungsbild der Seite sofort sehen.

Wenn Sie mit der geteilten Ansicht arbeiten und in der Hälfte der Entwurfsansicht die Einfügemarke im Text der Webseite platzieren oder ein Element der Webseite markieren, wird automatisch der Abschnitt im Code der Seite markiert, der für die Darstellung dieses Textes bzw. Elements verantwortlich ist.

Direktauswahl von Tags

Wenn Sie in der Ansicht Entwurf, Code oder Teilen arbeiten, befindet sich über dem Arbeitsbereich von Expression Web die Symbolleiste Direktauswahl von Tags. Wenn Sie die Einfügemarke an einer beliebigen Stelle einer Seite platzieren oder ein Element der Seite mit einem Mausklick markieren,

HINWEIS

HINWEIS



91

Grun

dlag

en

zeigt die Direktauswahl von Tags das zu Grunde liegende HTML-Tag für diesen Bereich bzw. für das markierte Element an. Setzten Sie die Einfügemarke z. B. in eine Tabellenzelle, würde die Direktaus-wahl von Tags das Tag anzeigen, das für die Definition von Tabellenzellen verwendet wird: <td>.

Sie können in der Direktauswahl von Tags den Mauszeiger auf ein Tag setzen, um mit Hilfe des anschließend angezeigten nach unten weisenden Pfeils ein Menü zu diesem Tag zu öffnen, das ver-schiedene Optionen für dessen Bearbeitung anbietet. Eine detaillierte Erläuterung der Direktaus-wahl von Tags finden Sie in Kapitel 14, das die Skriptprogrammierung mit dem Skript-Editor von Microsoft beschreibt.

Die Elemente der Über mich-SeiteÖffnen Sie nun die Webseite Über mich. Diese ist ähnlich aufgebaut wie die Homepage, verfügt aber zusätzlich zu den beiden bereits bekannten Textbereichen über ein Bild, das den Verfasser (also Sie) zeigen soll.

Löschen von ObjektenNachdem Sie den Text der Seite Über mich bearbeitet und formatiert haben, bleibt eine letzte Auf-gabe: Das Platzhalterbild muss noch aus der Seite entfernt werden, da Sie dort später wahrscheinlich ein eigenes Bild einfügen möchten.

Um ein Objekt zu löschen, müssen Sie es zunächst markieren, damit Expression Web weiß, welches Objekt von der Seite entfernt werden soll. Klicken Sie dazu mit der linken Maustaste auf das eben genannte Bild. Die Grafik wird daraufhin markiert dargestellt, wie in Abbildung 4.9 dargestellt.

Abbildg. 4.9 Die drei Ziehpunkte, die sich rechts und unten am Bild befinden, sind ein Zeichen dafür, dass das Bild markiert ist

Löschen Sie das Objekt durch Drücken der (Entf)-Taste oder indem Sie den Menübefehl Bearbei-ten/Löschen aufrufen. Falls dieser Eintrag nicht angezeigt wird, klicken Sie am Ende des Menüs auf den nach unten weisenden Doppelpfeil.



92

Ebenen löschen

Nachdem Sie das Bild gelöscht haben, werden Sie feststellen, dass ein kleiner rechteckiger Bereich übrig geblieben ist, in dem die Einfügemarke blinkt. Wenn Sie den Mauszeiger auf das Infofeld bewegen, das den Namen dieses Bereichs anzeigt (div#image), erkennen Sie diesen noch deutlicher, weil dann drei Ziehpunkte daran angeordnet werden, wie in Abbildung 4.10 dargestellt.

Abbildg. 4.10 Das Bild wurde zwar gelöscht, aber nicht der Container, in dem es sich befand

Bei diesem rechteckigen Bereich handelt es sich um einen so genannten Container, der auch als Ebene bezeichnet wird. Dies ist ein Bereich, in dem Elemente, wie zum Beispiel Bilder, Texte und alle anderen Objekte, die Ihnen XHTML zur Verfügung stellt, angeordnet werden können.

Doch wozu benötigt man solche Ebenen? Nun, im Gegensatz zu gewöhnlichen XHTML-Elementen, können Ebenen an jeder beliebigen Stelle der Webseite angeordnet und animiert werden, was sie für Webdesigner sehr interessant macht. Wenn Sie beispielsweise ein Bild auf einer Webseite anordnen, können Sie nicht festlegen, dass es absolut positioniert werden soll, z.B. 100 Pixel vom oberen Rand entfernt und 250 Pixel vom linken Seitenrand entfernt. Wenn Sie das Bild jedoch in einer Ebene anordnen, ist dies möglich, weil Ebenen absolute Positionierungen erlauben.

In unserem Fall wurde das Bild innerhalb einer Ebene angeordnet. Sie haben zwar das Bild gelöscht, aber nicht die Ebene, in der es sich befand. Um auch diese zu löschen, bewegen Sie den Mauszeiger auf das Infofeld, das den Namen der Ebene anzeigt (div#image) und klicken einmal mit der linken Maustaste. Die Ebene ist nun markiert, und Sie können sie mit einem Druck auf die (Entf)-Taste löschen. Weitere Informationen zu Ebenen finden Sie am Ende dieses Kapitels, wenn die Technolo-gien XHTML und CSS beschrieben werden.

Vergessen Sie nicht, Ihre Änderungen regelmäßig zu speichern, damit ein unvor-hergesehenes Ereignis, wie zum Beispiel ein Stromausfall, Ihre Arbeit nicht zunichte macht.

WICHTIG



93

Grun

dlag

en

Die Elemente der Hyperlinks-SeiteÖffnen Sie nun die Webseite Hyperlinks. Dort sind einige Elemente angeordnet, die Sie bereits ken-nen. Dazu zählen die Elemente der Masterseite, also das Banner und der Navigationsbereich unter dem Banner und am Seitenende sowie das Bild auf der linken Seite. Außerdem finden Sie auf der rechten Seite das bereits bekannte kleine Textfeld.

Listen

Unter dem oberen Navigationsbereich befindet sich eine Liste mit Hyperlinks und erklärenden Tex-ten zu den Hyperlinks. Was Hyperlinks sind, haben Sie bereits zu Beginn dieses Kapitels im Abschnitt »Die Website« erfahren. Text-Hyperlinks werden standardmäßig in blauer Schrift und unterstrichen dargestellt. Bevor wir uns jedoch näher mit diesen Elementen beschäftigen, werfen wir zunächst einen Blick auf die Listen.

Eine Liste erkennen Sie an Absätzen, denen ein Aufzählungszeichen oder ein Nummerierungszei-chen vorangestellt ist. Der Name dieses Elements deutet darauf hin, dass eine Liste bestimmte Inhalte gegliedert in Listenform aufführt.

Expression Web unterstützt drei Arten von Aufzählungs- und Nummerierungslisten:

� Grafische Aufzählung: Expression Web verwendet als Aufzählungszeichen ein von Ihnen ausge-wähltes Bild.

� Einfache Aufzählungen: Den Listeneinträgen werden die Standardaufzählungszeichen des Browsers vorangestellt.

� Nummerierungen: Die Listeneinträge werden sequenziell nummeriert.

Listen erstellen Um einen Absatz in eine Aufzählung oder Nummerierung umzuwandeln, klicken Sie in der Symbol-

leiste Format oder Allgemein auf die Schaltfläche Aufzählungszeichen bzw. Nummerierung. Wenn Sie detaillierte Einstellungen zur Aufzählung bzw. Nummerierung vornehmen möchten, wählen Sie im Menü Format den Befehl Nummerierung und Aufzählungszeichen.

Es ist nicht möglich, über die Symbolleiste Format eine grafische Aufzählung zu erstellen. Wählen Sie dazu im Menü Format den Befehl Nummerierung und Aufzählungszeichenund öffnen Sie die Registerkarte Grafische Aufzählungszeichen. Die genaue Vorgehensweise ist später in diesem Kapitel im Abschnitt »Die Registerkarte Grafische Aufzählungszeichen« beschrieben.

Sie können nicht nur bereits vorhandene Absätze in Listen umwandeln, sondern auch Listen von Grund auf neu erstellen. Gehen Sie dazu wie folgt vor:

1. Setzen Sie die Einfügemarke dorthin, wo die Liste beginnen soll. (Öffnen Sie gegebenenfalls zuerst eine neue Webseite, indem Sie in der Symbolleiste Allgemein auf die Schaltfläche Neues Dokument klicken.)

2. Klicken Sie in der Symbolleiste Format auf die Schaltfläche Aufzählungszeichen oder Nummerie-rung, oder wählen Sie im Menü Format den Befehl Nummerierung und Aufzählungszeichen, um sich im folgenden Dialogfeld für einen Stil zu entscheiden. Sie verlassen das Dialogfeld mit einem Klick auf die Schaltfläche OK.

HINWEIS



94

3. Geben Sie den Text für den aktuellen Listeneintrag ein und drücken Sie die (¢)-Taste, um den nächsten Listeneintrag einzufügen.

4. Um die Liste zu beenden und zur normalen Absatzformatierung zurückzukehren, drücken Sie zweimal die (¢)-Taste.

Das Dialogfeld Nummerierung und Aufzählungen

Wenn Sie mit dem Dialogfeld Nummerierung und Aufzählungen arbeiten, können Sie detaillierte Einstellungen zu Ihren Listen vornehmen. Die folgenden Abschnitte beschreiben die Optionen, die Ihnen dieses Dialogfeld zur Verfügung stellt.

Die Registerkarte Einfache Aufzählungszeichen

Sie benutzen die in Abbildung 4.11 dargestellte Registerkarte Einfache Aufzählungszeichen, wenn Sie eine Liste erstellen möchten, deren Einträge ein Standardaufzählungszeichen erhalten sollen. Beach-ten Sie, dass es sich bei diesen Aufzählungszeichen um Textsymbole und nicht um Grafiken handelt.

Abbildg. 4.11 Wählen Sie hier das gewünschte Aufzählungszeichen aus

Wählen Sie das gewünschte Aufzählungszeichen mit einem Klick auf das entsprechende Vorschau-bild aus.

Die Registerkarte Nummerierung

Sie benutzen die in Abbildung 4.12 dargestellte Registerkarte Nummerierung, wenn Sie eine Liste erstellen möchten, deren Einträge sequenziell nummeriert werden sollen.

Wählen Sie die gewünschte Art der Nummerierung mit einem Klick auf das entsprechende Vor-schaubild aus. Mit Hilfe des Feldes unter Beginnen bei geben Sie an, mit welcher Zahl oder mit wel-chem Buchstaben die Nummerierung beginnen soll.



95

Grun

dlag

en

Abbildg. 4.12 Die Registerkarte Nummerierung

Die Registerkarte Grafische Aufzählungszeichen

Sie benutzen die in Abbildung 4.13 dargestellte Registerkarte Grafische Aufzählungszeichen, wenn Sie eine Liste erstellen möchten, deren Einträge ein grafisches Aufzählungszeichen erhalten sollen. Im Gegensatz zu einfachen Aufzählungszeichen, die mit Textsymbolen arbeiten, werden hier echte Bil-der als Aufzählungszeichen verwendet.

Abbildg. 4.13 Verwenden Sie diese Registerkarte, wenn Sie ein Bild als Aufzählungszeichen verwenden möchten



96

Wenn Sie mit CSS-Formatvorlagen arbeiten (siehe Kapitel 4 und 8), können Sie das Kontrollkäst-chen vor Aktuelle CSS-Formatvorlage verwenden aktivieren, um das in dieser Formatvorlage defi-nierte Bild als Aufzählungszeichen zu verwenden.

Haben Sie ein eigenes Bild kreiert, das Sie als Aufzählungszeichen verwenden möchten, aktivieren Sie die Option Bild angeben und geben darunter den Pfad zu diesem Bild ein. Sie können auch auf die Schaltfläche Durchsuchen klicken, um das Bild mit Hilfe eines Dialogfeldes auszuwählen.

Beachten Sie, dass sich das gewünschte Bild in Ihrem Web befinden sollte, damit es bei der Veröffentlichung des Webs zusammen mit allen anderen Webdateien zum Webserver übertragen wird. Wie Sie Dateien in ein Web importieren, erfahren Sie später in diesem Kapitel im Abschnitt »Bilder importieren«.

Unterlisten erstellen

Die Abbildung 4.14 zeigt einige Beispiele für so genannte Unterlisten. Dies sind Listen, die einge-rückt in anderen Listen enthalten sind.

Abbildg. 4.14 Beispiele für Unterlisten

Um eine Unterliste zu erstellen, gehen Sie wie folgt vor:

1. Setzen Sie die Einfügemarke in den ersten Absatz der Liste, der den Anfang der eingerückten Unterliste bilden soll.

2. Klicken Sie in der Symbolleiste Format oder Allgemein auf die nebenstehend abgebildete Schalt-fläche Einzugsposition vergrößern. Auf diese Weise erzeugen Sie einen Unterlisteneintrag.

3. Um ein beliebiges Listenelement wieder in einen normalen Absatz umzuwandeln, setzen Sie die Einfügemarke in diesen Absatz und klicken in der Symbolleiste Format oder Allgemein auf die nebenstehend abgebildete Schaltfläche Einzugsposition verringern.

Eingezogener Text innerhalb von Listen

Möchten Sie unter einem Aufzählungspunkt einen erklärenden Text einfügen, setzen Sie die Einfü-gemarke an das Ende des Aufzählungspunktes und drücken die Tastenkombination (ª)+(¢). Dies führt dazu, dass kein neuer Absatz, sondern lediglich ein Zeilenumbruch eingefügt wird. Die Einfü-gemarke erscheint dann an der Position, an der auch der Text des vorherigen Aufzählungspunktes beginnt, aber eine Zeile tiefer als dieser.

WICHTIG



97

Grun

dlag

en

Masterseite bearbeitenSie haben bereits zwei Seiten der aus der Vorlage Persönlich 1 generierten Website bearbeitet. Die auf diesen beiden Seiten angezeigten Elemente der Masterseite wurden jedoch noch nicht verändert. Es sind immer noch Platzhaltertexte vorhanden. Dies werden Sie nun ändern. Öffnen Sie deshalb die Masterseite in der Entwurfsansicht. Eine Masterseite wird genauso wie eine gewöhnliche Webseite geöffnet. Die Masterseite unserer aktuellen Vorlage heißt master.dwt.

Beachten Sie, dass Sie alle Elemente der Masterseite bearbeiten können, wenn sich diese in der Ent-wurfsansicht befindet. Die Bearbeitung ist nur dann nicht möglich, wenn Sie eine andere Seite öff-nen, die die Masterseite einbindet. In diesem Fall können Sie nur die Elemente der geöffneten Seite, aber nicht die Elemente der eingebundenen Masterseite bearbeiten. Um die Masterseite verändern zu können, müssen Sie diese in der Entwurfsansicht öffnen.

Nachdem Sie die Masterseite geöffnet haben, ändern Sie die beiden Platzhaltertexte des Banners, die Websitename und Beschreibung der Website lauten. Geben Sie dort einen aussagekräftigen Titel und Untertitel für Ihre Website ein, und vergessen Sie nicht, in der Symbolleiste Allgemein oder Standardauf die Schaltfläche Speichern zu klicken, um Ihre Änderungen dauerhaft zu sichern.

Im Anschluss daran wird ein Dialogfeld angezeigt, das Ihnen verrät, wie viele Webseiten die Master-seite einbinden. Mit Hilfe dieses Dialogfeldes geben Sie an, ob diese Webseiten aktualisiert werden sollen, ob also die Änderungen, die Sie an der Masterseite vorgenommen haben, in den einbinden-den Webseiten widergespiegelt werden sollen. Da Sie aus diesem Grund die Masterseite verändert haben, klicken Sie bitte auf die Schaltfläche Ja.

Sobald Sie die Masterseite bearbeitet haben, können Sie überprüfen, ob die anderen Seiten, die die Masterseite einbinden, die Änderungen anzeigen. Öffnen Sie dazu beispielsweise die Seite default.htm in der Entwurfsansicht. Die Seite präsentiert sich daraufhin wie in Abbildung 4.15 dar-gestellt. Beachten Sie bitte, dass sich Ihre Seite von der Abbildung unterscheiden wird, da Sie wahr-scheinlich andere Texte verwenden.

Abbildg. 4.15 Die an der Masterseite vorgenommenen Änderungen werden auf den einbindenden Seiten widergespiegelt



98

Neue Seiten zur Website hinzufügenSie können einer Website, die mit Expression Web aus einer Vorlage generiert wurde, natürlich auch neue Webseiten hinzufügen. Fügen Sie beispielsweise der aus der Vorlage Persönlich 1 generierten Website eine neue Seite namens Interessen hinzu, auf der Sie eine Liste mit persönlichen Hobbys, Projekten und Interessen sowie einige Bilder zu diesen Themen anordnen werden. Gehen Sie dazu wie folgt vor:

1. Rufen Sie den Menübefehl Datei/Neu auf.

Im folgenden Dialogfeld wählen Sie den Typ der zu erstellenden Seite aus. Sie finden hier zwei Listenfelder. Das erste Listenfeld auf der linken Seite führt verschiedene Kategorien auf. Nach Auswahl der gewünschten Kategorie werden im zweiten Listenfeld auf der rechten Seite die Dateitypen angezeigt, die der ausgewählten Kategorie untergeordnet sind.

2. Um eine gewöhnliche Webseite zu erstellen, markieren Sie im ersten Listenfeld die Kategorie All-gemein und im zweiten Listenfeld den Typ HTML.

Wenn Ihre Site eine Masterseite verwendet, können Sie festlegen, dass die neue Webseite die Masterseite einbinden soll. Klicken Sie dazu unten im zweiten Listenfeld auf den Eintrag Aus Masterseite erstellen. Nach einem Klick auf OK wird dann ein weiteres Dialogfeld angezeigt, mit dessen Hilfe Sie die gewünschte Masterseite auswählen.

3. Unsere neue Seite soll auf der Masterseite basieren, die von der Vorlage Persönlich 1 generiert wurde. Markieren Sie deshalb unten im zweiten Listenfeld den Eintrag Aus Masterseite erstellen.

4. Klicken Sie auf OK.

Da Sie angegeben haben, dass die neue Seite auf einer Masterseite basieren soll, wird nun ein weiteres Dialogfeld geöffnet, in dem Sie die zu verwendende Masterseite festlegen.

Wenn die Masterseite in der Konfigurationsdatei web.config angegeben ist, können Sie die Option Standardmasterseite verwenden (aus 'web.config') aktivieren. (Die Konfigurationsdatei web.config enthält in so genannten ASP.NET-Websites die Konfigurationseinstellungen für die jeweilige Site.)

5. Da wir mit einer gewöhnlichen Website arbeiten, achten Sie bitte darauf, dass das Optionsfeld vor Spezifische Masterseite aktiviert ist. Klicken Sie anschließend auf Durchsuchen, um die Mas-terseite anzugeben, deren Elemente auf der neuen Webseite angezeigt werden sollen.

Das folgende Dialogfeld zeigt alle Ordner an, die sich im Hauptverzeichnis der Website befin-den. Es zeigt auch alle Dateien an, deren Dateiname auf .master endet. Dies sind Masterseiten, die in ASP.NET-Websites (siehe Kapitel 7) eingesetzt werden. Wir arbeiten jedoch mit einer gewöhnlichen Website. Und in einer gewöhnlichen Website erhält eine Masterseite die Datei-endung .dwt.

6. Leider zeigt das Dialogfeld Dateien, deren Name auf .dwt endet, nicht an, sodass Sie den Namen manuell eingeben müssen. Er lautet master.dwt.

7. Klicken Sie nach der Eingabe des Namens auf Öffnen und anschließend auf OK.

Das letzte Dialogfeld informiert Sie darüber, dass eine Datei aktualisiert wurde. Dies bedeutet, dass die Elemente der Masterseite in die neu erzeugte Webseite übernommen wurden.

8. Klicken Sie auf Schließen, um das Dialogfeld zu schließen.

Die neue Webseite wird daraufhin – wie in Abbildung 4.16 dargestellt – mit den Elementen der Mas-terseite angezeigt, und Sie können in den bearbeitbaren Bereichen die gewünschten Änderungen vornehmen.



99

Grun

dlag

en

Abbildg. 4.16 Die neue Webseite basiert auf der Masterseite des Webs

Die Interessen-SeiteDie neue Seite wird den Titel Interessen erhalten. Ersetzen Sie den Text Schlagzeile 2 durch diesen Titel und schreiben Sie einen kurzen einleitenden Text, der die Besucher darüber informiert, dass auf dieser Seite eine Liste mit persönlichen Hobbys, Projekten und Interessen zu finden ist.

Schreiben Sie außerdem, wie im Abschnitt »Listen erstellen« beschrieben, eine Liste, in der Sie Ihre Hobbys, Projekte und Interessen aufführen. Sie benötigen diese Liste gleich, weil Sie sie mit einigen Bildern erweitern werden.

Bilder einfügenBilder sind ein wesentlicher Bestandteil von Webseiten. Sie werden im Web kaum eine Webseite fin-den, die keine Bilder enthält. Expression Web bietet Funktionen an, die Ihnen dabei helfen, nach bereits vorhandenen Bildern zu suchen und neue Bilder zu scannen oder von einer Digitalkamera einzulesen. Darüber hinaus kann Expression Web die Bilder, die Sie auf einer Webseite anordnen, auf vielfältige Art und Weise modifizieren.

Die folgenden Abschnitte verraten Ihnen, wie Sie Websites und Webseiten Bilder hinzufügen. Wei-tergehende Bearbeitungsfunktionen werden in den folgenden Kapiteln dieses Buches erörtert.

Bilder importieren

Die zu Beginn dieses Kapitels aus der Vorlage Persönlich 1 erstellte Website enthält einen Ordner mit der Bezeichnung images. In diesem Ordner sind alle Bilder gespeichert, die auf den Seiten Ihres Webs angezeigt werden. Gegenwärtig sind in dem Ordner einige Beispielbilder enthalten, die Sie

WICHTIG



100

später durch Ihre eigenen ersetzen. In diesen Ordner werden Sie außerdem das Bild aufnehmen, das eines Ihrer Hobbys zeigt.

Dazu muss die entsprechende Datei in Ihr Web importiert werden. Der Grund hierfür besteht darin, dass eine Expression Web-Website eine eigenständige Einheit bildet, die unabhängig von allen ande-ren Elementen Ihres Systems, wie zum Beispiel Festplatten, Ordnern und Dateien, verwaltet wird.

Geeignete Grafikformate

Bevor Sie eine Grafik in ein Web importieren, sollten Sie darauf achten, dass diese im GIF- oder JPEG-Format vorliegt. Diese Grafikformate wurden so konzipiert, dass sie nur wenig Speicherplatz erfordern. Die Dateigröße solcher Bilder ist dementsprechend gering, wodurch die Übertragungs-zeit über das Internet oder Intranet nur wenig Zeit beansprucht.

Führen Sie die folgenden Schritte durch, um ein Bild in das Expression Web-Web zu importieren:

1. Öffnen Sie das Menü Datei und wählen Sie dort den Befehl Importieren und anschließend Dateiaus. Ihrer Auswahl entsprechend wird das in Abbildung 4.17 dargestellte Dialogfeld geöffnet.

Abbildg. 4.17 Mit Hilfe dieses Dialogfeldes importieren Sie die gewünschte Datei

2. Klicken Sie hier auf die Schaltfläche Datei hinzufügen, um der aktuellen Website eine Grafikdatei hinzuzufügen.

Im Anschluss daran wird ein weiteres Dialogfeld geöffnet, in dem Sie die zu importierende Datei auswählen.

3. Wählen Sie mit Hilfe des oberen Listenfeldes den Ort aus, an dem die Datei gespeichert ist.

4. Öffnen Sie anschließend in dem großen Listenfeld auf der rechten Seite des Dialogfeldes die Ordner, die zu der gewünschten Datei führen.

5. Markieren Sie die Datei mit einem Mausklick und klicken Sie auf die Schaltfläche Öffnen.

Nach Ihrer Auswahl wird die Datei in dem Listenfeld des Dialogfeldes Importieren aufgeführt. Über-nehmen Sie die Datei mit einem Klick auf die Schaltfläche OK in Ihr Web.



101

Grun

dlag

en

Sollten Sie über keine eigene Datei verfügen, verwenden Sie das Bild, welches in den Beispielda-teien zu diesem Buch im Ordner \Buch\Kap04 zu finden ist.

Die Ordneransicht von Expression WebDie Datei befindet sich daraufhin in dem Hauptverzeichnis Ihres Webs. Von dort soll sie in den Ord-ner images kopiert werden. Um diesen Vorgang ausführen zu können, wechseln Sie bitte zur Ordneransicht. Wählen Sie dazu im Menü Website den Eintrag Ordner aus.

Die Ordneransicht von Expression Web zeigt eine vollständige Liste aller Dateien und Ordner einer Website an. Sie ist zweigeteilt. Die Ordneransicht ergänzt in der Regel die Ordnerliste, die Sie über das Menü Aufgabenbereiche aktivieren, sofern sie nicht bereits angezeigt wird.

Die Ordnerliste ist ein Hierarchielistenfeld, in dem alle Ordner und Dateien Ihres Webs hierarchisch aufgeführt sind. Die oberste Gliederungsstufe des Hierarchielistenfeldes repräsentiert das Hauptver-zeichnis der Website, die Sie gerade mit Expression Web bearbeiten. Sie beginnt mit der Zeichen-folge http://, sofern Sie Ihre Website auf einem Webserver abgelegt haben. Andernfalls ist dort der Pfad zum Website-Ordner aufgeführt. Auf der zweiten Hierarchieebene sind die Ordner aufgeführt, die sich in diesem Verzeichnis befinden.

Um die Datei motorrad.jpg aus dem Hauptverzeichnis in den Ordner images zu verschieben, gehen Sie wie folgt vor:

1. Markieren Sie in der Ordnerliste das Hauptverzeichnis, indem Sie den Mauszeiger darauf bewe-gen und einmal klicken.

Im Anschluss daran werden in der Ordneransicht, die im Arbeitsbereich von Expression Web angezeigt wird, alle Dateien und Ordner aufgeführt, die sich in dem zuvor markierten Hauptver-zeichnis befinden. Dort finden Sie ebenfalls die von Ihnen importierte Grafikdatei.

2. Ziehen Sie die Datei motorrad.jpg per Drag & Drop in die Ordnerliste auf den Ordner images. Bewegen Sie den Mauszeiger dazu auf den Dateinamen der Grafikdatei und klicken und halten Sie die linke Maustaste. Sie halten die Datei nun gewissermaßen fest.

3. Lassen Sie die Maustaste los, um die Datei in dem Ordner abzulegen.

Einfügen von GrafikenDas Bild befindet sich nun am richtigen Ort. Wechseln Sie wieder zur Seitenansicht der Seite Interes-sen, indem Sie im Menü Ansicht den Eintrag Seite auswählen oder in der Dokumentregisterkarten-leiste auf die Registerkarte der Interessenseite klicken.

Setzen Sie die Einfügemarke an das Ende eines Listenabsatzes und drücken Sie die (¢)-Taste, um einen neuen leeren Aufzählungsabsatz einzufügen. Die Seite sollte sich nun ähnlich wie in Abbil-dung 4.18 dargestellt präsentieren.

In der Abbildung befindet sich der leere Aufzählungsabsatz hinter dem Listenpunkt, der als Hobby unter anderem »Reisen mit dem Motorrad« aufführt. In dem leeren Aufzählungsabsatz darunter soll deshalb das Motorradbild eingefügt werden. Beachten Sie, dass Bilder immer an der Position der Einfügemarke eingefügt werden. Die Einfügemarke sollte sich somit in diesem Absatz befinden.



102

Abbildg. 4.18 Eine Liste mit einem leeren Aufzählungsabsatz, in dem die Einfügemarke blinkt

Um das Bild einzufügen, befolgen Sie diese Schritte:

1. Öffnen Sie das Menü Einfügen und wählen Sie dort den Eintrag Grafik aus. Klicken Sie im Unter-menü auf Aus Datei.

Im Anschluss daran wird das in Abbildung 4.19 dargestellte Dialogfeld Bild geöffnet. Hier wäh-len Sie das einzufügende Bild aus.

Abbildg. 4.19 Das gewünschte Bild befindet sich im Ordner images



103

Grun

dlag

en

In dem großen Listenfeld des Dialogfeldes sind alle Ordner Ihres Webs aufgeführt. Dazu zählt ebenfalls der Ordner images, in dem sich das von Ihnen importierte Bild befindet.

2. Öffnen Sie den Ordner images mit einem Doppelklick darauf. Nachdem dies geschehen ist, wer-den alle Dateien in dem Listenfeld angezeigt, die in dem Ordner enthalten sind.

3. Markieren Sie das zuvor importierte Bild mit einem Mausklick darauf.

4. Klicken Sie auf Einfügen, um es an der Position der Einfügemarke auf der Webseite Interesseneinzufügen.

Im Anschluss daran wird ein Dialogfeld geöffnet, das den Namen Eigenschaften für alternative Darstellungsweisen trägt. Sie können hier einen Text eingeben, der angezeigt werden soll, wenn die künftigen Besucher die Anzeige von Bildern im Browser (aus Geschwindigkeitsgründen) deaktiviert haben. Sie können hier außerdem für sehbehinderte Menschen eine längere Beschreibung eingeben, die diese sich vom Computer vorlesen lassen können.

5. Klicken Sie auf OK, nachdem Sie die gewünschten Eingaben vorgenommen haben.

Nachdem das Bild eingefügt wurde, präsentiert es sich in der Entwurfsansicht, wie in Abbildung 4.20 dargestellt.

Abbildg. 4.20 In der Entwurfsansicht wird das Bild nicht in der gewünschten Weise am Aufzählungszeichen angeordnet



104

Wie Sie erkennen, schließt der untere Rand des Bildes mit dem Aufzählungszeichen ab. Dies ist jedoch nicht korrekt, da eine Aufzählung gemäß der DIN-Norm in Höhe des Aufzählungszeichens beginnen sollte.

BildeigenschaftenUm die Anordnung des Bildes am Aufzählungszeichen zu ändern, wählen Sie das Bild zunächst mit einem Mausklick darauf aus. Betätigen Sie anschließend die Tastenkombination (Alt)+(¢) oder klicken Sie mit der rechten Maustaste und wählen Sie im daraufhin geöffneten Kontextmenü den Eintrag Bildeigenschaften aus. Alternativ hierzu können Sie aus dem Menü Format den Befehl Eigen-schaften auswählen. Im Anschluss daran wird ein Dialogfeld geöffnet, in dem Sie verschiedene Ein-stellungen zum Bild vornehmen können.

Das Dialogfeld besteht aus den beiden Registerkarten Allgemein und Darstellung. Auf der Register-karte Allgemein können Einstellungen zum URL sowie zur Qualität und Darstellungsweise des Bil-des vorgenommen werden. Das Bild kann hier außerdem in eine GIF-, PNG- oder JPEG-Datei kon-vertiert werden. Die Dateigröße solcher Bilder ist äußerst gering, sodass die Übertragungszeit über das Internet oder Intranet nur wenig Zeit beansprucht.

Die Registerkarte Allgemein bietet darüber hinaus die Möglichkeit, dem Bild einen Hyperlink zuzu-weisen. Klickt der Besucher später das Bild an, wird die Webseite aufgerufen, die mit dem Hyperlink verknüpft ist.

Öffnen Sie die Registerkarte Darstellung, die in Abbildung 4.21 dargestellt ist. Sie enthält Optionen zum Ausrichten und Umranden des Bildes. Des Weiteren kann hier der horizontale und vertikale Abstand des Bildes zu dem Text oder Bild bestimmt werden, der bzw. das sich in nächster Nähe zum markierten Objekt befindet. Schließlich ändern Sie auf dieser Seite die Größe des Bildes.

Abbildg. 4.21 Auf der Registerkarte Darstellung können Sie die Größe einer Grafik verändern



105

Grun

dlag

en

In dem Listenfeld neben Ausrichtung wählen Sie aus, wie das Bild im Absatz angeordnet werden soll. Wählen Sie dort den Eintrag Textoberkante, sodass das Aufzählungszeichen am oberen Bildrand angezeigt wird.

Ändern der Grafikgröße

Die Grafik wird relativ zu dem auf der Seite verwendeten Text sehr groß dargestellt. Sie werden die Grafik deshalb verkleinern. Dies geschieht ebenfalls mit Hilfe des Dialogfeldes Bildeigenschaften, das noch auf Ihrem Bildschirm zu sehen sein sollte.

Die folgende Anleitung verrät Ihnen, wie Sie die Größe verändern:

1. Aktivieren Sie im Gruppenfeld Schriftgrad das Kontrollkästchen Größe angeben, sofern es nicht bereits aktiviert ist.

Achten Sie darauf, dass auch das Kontrollkästchen Seitenverhältnis beibehalten aktiviert ist. Diese Option gewährleistet, dass das Verhältnis von Breite und Höhe bestehen bleibt. Auf diese Weise werden verzerrte Bilder vermieden, da eine Änderung der Breite immer eine entsprechende Änderung der Höhe (und umgekehrt) zur Folge hat.

2. Aktivieren Sie die beiden Optionsfelder mit der Bezeichnung in Prozent, die sich unter den Ein-gabefeldern Breite und Höhe befinden.

3. Geben Sie nun den gewünschten Prozentwert in die beiden Eingabefelder ein, zum Beispiel den Wert 50, um dem Bild die Hälfte der Originalgröße zuzuweisen. Sie können natürlich ebenfalls die Optionsfelder in Pixel aktivieren und die gewünschte Größe in Bildpunkten angeben.

4. Übernehmen Sie Ihre Einstellungen in jedem Fall mit einem Klick auf die Schaltfläche OK.

Anordnen des Textes unter dem BildDas Bild wird jetzt verkleinert auf Ihrem Bildschirm dargestellt. Darunter sollen ausführliche Infor-mationen eingegeben werden, die das Bild beschreiben. Setzen Sie dazu die Einfügemarke hinter das Bild. Wenn das Bild noch markiert ist, was Sie rechts und unten am Bild an den drei Ziehpunkten erkennen, müssen Sie lediglich die Taste (Æ) drücken. Sie können ebenfalls den Mauszeiger rechts neben das Bild bewegen und einmal auf die linke Maustaste klicken.

Drücken Sie nicht die (¢)-Taste, um einen neuen Absatz für Ihren weiteren Text einzufügen. Diese Vorgehensweise würde einen neuen Listenabsatz mit Aufzählungszeichen generieren. Betätigen Sie stattdessen die Tastenkombination (ª)+(¢). Auf diese Weise erzeugen Sie lediglich einen manuel-len Zeilenwechsel innerhalb des aktuellen Absatzes.

Nachdem sich die Einfügemarke unter dem Bild befindet, können Sie den Text eingeben, der weitere Informationen zum Bild preisgibt. Wechseln Sie anschließend zur Browservorschau (Taste (F12)), und blättern Sie gegebenenfalls zum zweiten Listenabsatz. Das Erscheinungsbild Ihrer Seite sollte daraufhin dem in Abbildung 4.22 dargestellten gleichen.



106

Abbildg. 4.22 In der Vorschauansicht werden das verkleinerte Bild und der Text korrekt angezeigt

Achten Sie bitte darauf, Ihre Änderungen in regelmäßigen Intervallen zu speichern. Ein plötzlicher Stromausfall könnte die Arbeit mehrerer Stunden zunichte machen.

Einfügen eines zusätzlichen ListenabsatzesNachdem Sie die Webseite gespeichert haben, können Sie einen letzten Listenabsatz hinzufügen. Dieser soll die Besucher darüber informieren, dass nun einige Hyperlinks folgen, die über Ihre Hob-bys, Projekte und Interessen informieren. Die Hyperlinks selbst sollen Unterpunkte des letzten Lis-tenabsatzes, also weiter rechts als dieser eingerückt sein.

Um der Liste einen weiteren Absatz mit Aufzählungszeichen hinzuzufügen, setzen Sie die Einfüge-marke an das Ende des letzten Absatzes. Betätigen Sie dort die (¢)-Taste. Weitere Schritte sind nicht erforderlich. Der neue Absatz wird auf der Webseite angezeigt. Ihm voran steht ein Aufzäh-lungszeichen.



107

Grun

dlag

en

Verändern der Gliederungsebene eines ListenabsatzesErklären Sie in diesem neuen Absatz mit einem kurzen Text, dass nun einige Hyperlinks folgen, die Ihre Hobbys, Interessen und Projekte betreffen. Beenden Sie den Text mit einem Druck auf die (¢)-Taste, woraufhin ein neuer Listenabsatz mit einem Aufzählungszeichen erzeugt wird.

Die Hyperlinks sollen jedoch nicht auf der gleichen Gliederungsebene angeordnet werden, auf denen sich die übrigen Listenabsätze befinden. Schließlich bilden die Hyperlinks mehrere Unter-punkte des letzten Listenabsatzes. Demgemäß müssen die Hyperlinks ein wenig nach rechts einge-rückt dargestellt werden.

Wie bereits im Abschnitt »Unterlisten erstellen« weiter vorne in diesem Kapitel beschrieben wurde, ändern Sie die Gliederungsebene eines Listenabsatzes mit der nebenstehend abgebildeten Schaltflä-che Einzugsposition vergrößern, die sich auf der Format- und der Allgemein-Symbolleiste befindet.

Wenn Sie diese Schaltfläche anklicken, wird der Absatz weiter nach rechts eingerückt und er erhält ein anderes Aufzählungszeichen, um zusätzlich zu verdeutlichen, dass es sich hierbei um einen Unterpunkt des vorherigen Listenabsatzes handelt. Auf dieser Gliederungsebene werden Sie die Hyperlinks einfügen.

Einfügen von HyperlinksUm einen Hyperlink an der Position der Einfügemarke einzufügen, gehen Sie wie folgt vor:

1. Öffnen Sie das Menü Einfügen und wählen Sie dort den Eintrag Hyperlink aus.

Daraufhin wird das in Abbildung 4.23 dargestellte Dialogfeld Hyperlink einfügen angezeigt.

Abbildg. 4.23 Geben Sie neben Adresse die Adresse der Webseite ein, die mit dem neuen Hyperlink verknüpft werden soll

2. Geben Sie in dem Eingabefeld neben Adresse die Adresse der ersten Webseite an, die mit dem einzufügenden Hyperlink verknüpft werden soll.

3. Bestätigen Sie anschließend über die Schaltfläche OK.



108

Der angegebene URL wird daraufhin in der Entwurfsansicht an der Position der Einfügemarke eingefügt.

Eine weitere Möglichkeit, einen Hyperlink einzufügen, besteht darin, die Internet-adresse direkt auf der Webseite einzugeben. Expression Web erkennt automatisch, ob es sich bei Ihrer Eingabe um gewöhnlichen Text oder eine Webadresse handelt.

Das Dialogfeld Hyperlink einfügen wird in der Regel dazu verwendet, anstelle der Webadresse einen anderen Text anzeigen zu lassen, den der Besucher der Seite anklicken kann, um zu der entsprechenden Seite zu gelangen. Geben Sie dazu einfach im Dialogfeld neben Text anzeigen als den gewünschten Text ein. Würden Sie beispielsweise neben Adresse die Webadresse www.microsoft.com und neben Text anzeigen als den Text Der größte Software-Hersteller der Welt eingeben, würde nicht www.microsoft.com auf Ihrer Seite erscheinen, sondern Der größte Software-Hersteller der Welt. Ein Klick auf diesen Text würde jedoch zur Seite www.micro-soft.com führen.

Hyperlink mit Text versehen

Sie können nun hinter den Hyperlink einige Worte schreiben, die erklären, welche Seite nach einem Klick auf den Hyperlink aufgerufen wird. Eine Alternative hierzu hätte darin bestanden, zunächst den Text einzugeben und anschließend den Hyperlink einzufügen.

Schließen Sie Ihre Eingabe mit einem Druck auf die (¢)-Taste ab. Expression Web erzeugt darauf-hin einen neuen Listenabsatz, der sich auf der gleichen Gliederungsebene wie der letzte Listenabsatz befindet. Fügen Sie hier den nächsten Hyperlink ein und wiederholen Sie die eben beschriebenen Schritte für alle weiteren Hyperlinks, die auf der Webseite aufgeführt werden sollen.

Abbildg. 4.24 Die Webseite listet in der Browservorschau drei Hyperlinks auf

HINWEIS



109

Grun

dlag

en

Wechseln Sie bitte zur Browservorschau, nachdem Sie alle erforderlichen Hyperlinks und Listenab-sätze eingefügt und die Seite gespeichert haben. Dort wird die Webseite Interessen in der endgültigen Form angezeigt. Wechseln Sie anschließend wieder zur Entwurfsansicht.

Die Webseite FotosammlungDie nächste Seite unserer Vorlage Persönliche Website, die Sie bearbeiten können, trägt den Titel Fotosammlung. Öffnen Sie diese Seite, die sich im Ordner photo_gallery befindet und den Namen photo_gallery.htm trägt. Hier können Sie einige private Fotos veröffentlichen.

Die Fotosammlung

Auf dieser Seite befinden sich die beiden bereits bekannten bearbeitbaren Bereiche. Ersetzen Sie in dem größeren der beiden Bereiche den Titel durch einen eigenen Titel und ändern Sie den einleiten-den Text Ihren Vorstellungen entsprechend.

Bilder einfügenWie Sie vorgehen müssen, um ein Bild einzufügen, haben Sie bereits im Abschnitt »Einfügen von Grafiken« weiter vorne in diesem Kapitel erfahren. Diesmal müssen Sie jedoch den Absätzen, in denen Sie die Bilder anordnen möchten, kein Aufzählungszeichen voranstellen. Sie können die Bil-der somit direkt einfügen.

Eine alternative Vorgehensweise zum Anordnen von Bildern auf einer Webseite ist nachfolgend erläutert:

1. Importieren Sie die gewünschten Bilder zunächst in Ihr Web. Die dazu notwendige Vorgehens-weise wurde bereits im Abschnitt »Bilder importieren« weiter vorne in diesem Kapitel beschrie-ben.

PROFITIPPWie Sie an der Webseite erkennen, werden Text-Hyperlinks immer unterstrichen dargestellt. Sie können dies jedoch ändern. Wechseln Sie dazu zur Codeansicht, indem Sie unter dem Arbeitsbe-reich auf den Registerreiter Code klicken. Bewegen Sie die Einfügemarke vor das erste Zeichen der Zeile </head>, (nicht <head>) und drücken Sie die (¢)-Taste, um eine leere Zeile in den XHTML-Code einzufügen. Bewegen Sie die Einfügemarke anschließend in diese Zeile und geben Sie den folgenden Code ein:

<STYLE type="text/css"> a { text-decoration: none; } </STYLE>

Wenn Sie die Seite nun speichern und zur Vorschauansicht wechseln, werden die Hyperlinks nicht mehr unterstrichen dargestellt. Um einen einzelnen Hyperlink ohne Unterstreichung dar-stellen zu lassen, markieren Sie diesen in der Entwurfsansicht und wählen im Menü Format den Befehl Schriftart. Deaktivieren Sie im anschließend angezeigten Dialogfeld das Kontrollkästchen vor Unterstrichen.



110

Wenn Sie über keine eigenen Bilder verfügen, können Sie die Bilder classmates.jpg und sabine.jpg verwenden, welche in den Beispieldateien zu diesem Buch im Ordner \Buch\Kap04 zu finden sind.

Wenn Sie vor dem Importieren von Bildern in Ihr Web den Ordner images in der Ordnerliste von Expression Web markieren, müssen Sie die Bilder später nicht vom Hauptver-zeichnis in diesen Ordner kopieren. Sie werden dann direkt darin abgelegt.

2. Achten Sie darauf, dass die Ordnerliste angezeigt wird. Sollte die Liste nicht angezeigt werden, rufen Sie den Menübefehl Aufgabenbereiche/Ordnerliste auf.

3. Klicken Sie in der Ordnerliste auf den Knoten (das Pluszeichen) vor images, um auf der Hierar-chieebene darunter die Dateien anzeigen zu lassen, die sich in diesem Ordner befinden.

4. Bewegen Sie den Mauszeiger auf den Dateinamen des Bildes, das Sie auf der Webseite anordnen möchten, und klicken und halten Sie die linke Maustaste. Sie »halten« das Bild jetzt »fest«.

5. Ziehen Sie das Bild aus der Ordnerliste zu der Position in der Webseite, an der es erscheinen soll, wie in Abbildung 4.25 dargestellt. Wenn sich der Mauszeiger in der Nähe eines möglichen Abla-geortes befindet, wird dieser durch einen kleinen grauen senkrechten Strich gekennzeichnet. Beachten Sie, dass Sie das Bild nicht an jedem beliebigen Ort ablegen können, sondern nur dort, wo auch die Einfügemarke positioniert werden kann. Eine absolute Positionierung von Bildern ist nur dann möglich, wenn diese sich in einem Ebenencontainer befinden. (Weitere Informatio-nen zu Ebenen finden Sie in Kapitel 16 und 22.)

Abbildg. 4.25 Ziehen Sie das Bild an die gewünschte Position und lassen die linke Maustaste wieder los

6. Lassen Sie die linke Maustaste wieder los, um das Bild an der gewünschten Position anzuordnen.

TIPP



111

Grun

dlag

en

Im Anschluss daran wird das bereits bekannte Dialogfeld Eigenschaften für alternative Darstel-lungsweisen geöffnet. Wenn Sie zuvor das Kontrollkästchen Diese Aufforderung beim Einfügen von Bildern anzeigen deaktiviert haben, erscheint das Dialogfeld nicht mehr.

7. Falls das Dialogfeld Eigenschaften für alternative Darstellungsweisen angezeigt wird, nehmen Sie die gewünschten Einstellungen vor, und klicken auf die Schaltfläche OK.

Bildgröße mit der Maus ändernDas Bild wird möglicherweise zu groß angezeigt, wie in Abbildung 4.26 dargestellt. Wie Sie die Größe eines Bildes mit Hilfe des Dialogfeldes Bildeigenschaften verändern, wurde bereits im Abschnitt »Ändern der Grafikgröße« weiter vorne in diesem Kapitel beschrieben. Sie können die Größe jedoch auch mit Hilfe der Maus ändern.

Markieren Sie dazu das Bild mit einem Mausklick und bewegen Sie den Mauszeiger anschließend auf einen der drei Ziehpunkte, die rechts und unten am Bild angeordnet werden. In der Abbildung wurde der Mauszeiger auf den Ziehpunkt in der unteren rechten Ecke bewegt. Sobald sich die Gestalt des Mauszeigers ändert, können Sie die linke Maustaste gedrückt halten und das Bild auf die gewünschte Größe ziehen.

Wenn Sie das Seitenverhältnis beibehalten möchten, während Sie die Größe eines Bildes mit Hilfe der Maus ändern, drücken und halten Sie währenddessen einfach die (ª)-Taste gedrückt.

Abbildg. 4.26 Dieses Bild ist ein wenig zu groß

TIPP



112

Achten Sie darauf, unter jedem Bild einen kurzen erläuternden Text einzufügen. Setzen Sie die Ein-fügemarke dazu hinter das Bild und drücken Sie die Tastenkombination (ª)+(¢).

Nachdem Sie einige Bilder und Beschreibungen eingefügt haben, aktivieren Sie die Browservor-schau, indem Sie die Taste (F12) drücken. Ihre Webseite sollte nun der in Abbildung 4.27 dargestell-ten Seite gleichen.

Abbildg. 4.27 Ein Teil der Seite Fotosammlung in der Browservorschau

Die Webseite HyperlinksDie Webseite Hyperlinks, die sich im Ordner links befindet und links.htm heißt, bietet nichts Neues mehr. Sie können den einleitenden Text und die vorgegebenen Hyperlinks durch einen eigenen Text und die Adressen der von Ihnen bevorzugten Webseiten ersetzen.



113

Grun

dlag

en

Hyperlinktitel definieren

Eine Besonderheit soll jedoch an dieser Stelle erwähnt werden. Wenn Sie einen Hyperlink einfügen, müssen Sie diesen nicht mit einem erklärenden Text einleiten oder abschließen. Sie können den Hyperlink selbst als Titel aufführen, der Aufschluss darüber gibt, welche Website nach einem Klick auf den Hyperlink aufgerufen wird.

Dazu überschreiben Sie die Adresse des Hyperlinks einfach, nachdem Sie diesen auf der Webseite angeordnet haben. Die Adresse wird lediglich als Platzhalter verwendet, der von Ihnen durch einen anderen Text ersetzt werden kann. Eine andere bereits beschriebene Möglichkeit besteht darin, im Dialogfeld Hyperlink einfügen neben Text anzeigen als den Text einzugeben, der anstelle des URL angezeigt werden soll.

Sie können sich natürlich davon überzeugen, dass der Hyperlink nach einem Überschreiben der Hyperlinkadresse immer noch auf die zuvor angegebene Website verweist. Markieren Sie den Hyperlink dazu mit einem Doppelklick und öffnen Sie dessen Kontextmenü, indem Sie die rechte Maustaste betätigen. Wählen Sie aus dem Menü den Eintrag Hyperlinkeigenschaften aus. Im anschließend angezeigten Dialogfeld ist nun neben Adresse die Adresse der Seite angegeben, die nach einem Klick auf den Hyperlink aufgerufen wird. Sie sollten die Seite Hyperlinks speichern, nachdem Sie alle Änderungen vorgenommen haben.

Abbildg. 4.28 Sie können die Adresse eines Hyperlinks durch einen Titel oder beschreibenden Text ersetzen



114

Die Webseite KontaktDie letzte Webseite mit dem Titel Kontakt finden Sie im Ordner contact. Sie heißt contact.htm und enthält Platzhalter für die Anschrift, Kontaktinformationen, wie z.B. Telefonnummern und die E-Mail-Adresse, eine Anfahrtsbeschreibung sowie ein Bild, das durch eine Anfahrtsskizze ersetzt werden kann.

Das einzige neue Element auf dieser Seite ist der zur E-Mail-Adresse führende Link. Hyperlinks, die zu E-Mail-Adressen führen, sind in Kapitel 10 ausführlich erläutert.

Andere Browser für die Vorschau verwendenSie wissen bereits, dass Sie das Menü Datei öffnen und darin den Eintrag Browservorschau auswäh-len müssen, um die Seite von dem Browser darstellen zu lassen, der auf Ihrem System installiert ist. Es wird standardmäßig der Internet Explorer zur Anzeige der Vorschau verwendet. Haben Sie zusätzlich einen anderen Browser installiert, der nicht in der Liste aufgeführt ist, den Sie aber für die Vorschau verwenden möchten, wählen Sie den Befehl Browserliste bearbeiten. Mit dem in Abbildung 4.29 dargestellten Dialogfeld wählen Sie die Browser aus, die zur Darstellung Ihrer Website verwen-det werden sollen.

Abbildg. 4.29 Wählen Sie den Browser aus, der Ihre Website darstellen soll

Nicht aufgelistete Browser hinzufügen

Das Listenfeld unter Browser führt alle Internet-Browser auf, die auf Ihrem System installiert sind. Wurde ein Browser nicht automatisch erkannt, können Sie diesen mit einem Klick auf die Schaltflä-che Hinzufügen in das Listenfeld aufnehmen.

Wenn Sie auf diese Schaltfläche klicken, wird ein weiteres Dialogfeld angezeigt, mit dessen Hilfe Sie angeben, wo sich die Programmdatei des Browsers befindet und wie diese heißt. Die Programmda-tei des Internet Explorers heißt beispielsweise iexplore.exe und befindet sich auf dem Laufwerk, auf dem auch Windows installiert wurde. Sie ist im Ordner Programme und im Unterordner Internet Explorer enthalten. Der Browser Firefox wird ebenfalls im Ordner Programme, aber im Unterordner Mozilla Firefox installiert. Die Programmdatei heißt firefox.exe.

Nachdem Sie den gewünschten Browser ausgewählt haben, bestimmen Sie unter Zusätzliche Fenster-größen, welche Auflösungen zur Anzeige einer Site angeboten werden sollen. Auf diese Weise können


XHTML

115

Grun

dlag

en

Sie jede Auflösung daraufhin überprüfen, ob Ihre Seite Ihren Vorstellungen entsprechend angezeigt wird. Klicken Sie auf OK, um Ihre Einstellungen zu übernehmen. Wenn Sie nun das nächste Mal das Menü Datei öffnen und den Eintrag Browservorschau auswählen, wird der neue Browser mit den von Ihnen gewählten Auflösungen im zugehörigen Untermenü als Auswahlmöglichkeit angezeigt.

Website schließenWenn Sie die Arbeit an einer Website beenden möchten, um beispielsweise eine andere Website zu öff-nen, müssen Sie die alte Site zunächst schließen. Wählen Sie dazu im Menü Datei den Befehl Website schließen. Wenn Sie Änderungen an der Site vorgenommen haben, die noch nicht gespeichert wurden, erhalten Sie eine entsprechende Mitteilung, sodass Sie das Speichern nachholen können.

XHTMLDieses Kapitel hat gezeigt, das Expression Web ein nützliches Werkzeug ist, das es Ihnen ermöglicht, Webseiten auf einfache Art und Weise zu erstellen und zu bearbeiten.

Doch was genau ist eigentlich eine Webseite? Sie haben nun schon oft gelesen, dass es sich dabei um eine Datei handelt, die XHTML-Code enthält. Aber vielleicht erhalten Sie eine genauere Vorstellung von einer Webseite, wenn Sie Expression Web und auch andere Programme zur Bearbeitung von Webseiten für einen Moment vergessen. Stellen Sie sich vor, es gäbe diese Programme nicht.

Wie müssten Sie in diesem Fall vorgehen, um eine Webseite zu erstellen? Nun, Sie müssten mit einem Programm arbeiten, das es Ihnen ermöglicht, Textdateien zu erstellen. Starten Sie beispiels-weise den Windows-Editor und geben Sie den folgenden Text ein:

Achten Sie beim Speichern dieser Textdatei darauf, dass Sie als Dateityp nicht Textdateien, sondern Alle Dateien auswählen und als Dateiendung .htm verwenden. Starten Sie anschließend den Win-dows-Explorer und öffnen Sie den Ordner, in dem Sie diese .htm-Datei gespeichert haben. Führen Sie einen Doppelklick auf dem Symbol der Datei aus.

Eine gewöhnliche Textdatei würde nun im Windows-Editor geöffnet. In unserem Fall wird jedoch der Internet Explorer gestartet und Sie sehen ein ähnliches Bild wie in Abbildung 4.30.

<html> <head> <title>Meine Webseite</title> </head> <body> <h1><i>Willkommen auf meiner Webseite<i/></h1> </body></html>



116

Abbildg. 4.30 Warum wird der Internet Explorer gestartet und die Textdatei so angezeigt?

Verarbeitung von XHTML-DateienWas ist hier passiert? Wieso wird nach einem Doppelklick auf die Datei der Internet Explorer gestar-tet und die Textdatei auf diese Weise angezeigt? Vielleicht haben Sie es schon erraten. Die Endung .htm kennzeichnet eine Datei, die HTML- bzw. XHTML-Code enthält, also eine Webseite. Eine sol-che Datei wird standardmäßig von einem Browser wie dem Internet Explorer verarbeitet. Somit kann es sich bei den seltsamen Zeichenfolgen, die Sie mit Hilfe des Editors eingegeben haben, nur um HTML- oder XHTML-Code handeln.

Doch wie genau verarbeitet der Browser HTML- oder XHTML-Dateien? Indem er sie liest. Wenn ein Browser eine solche Datei zur Verarbeitung erhält, liest er sie genauso, wie Sie sie lesen würden. Allerdings liest der Browser die Datei nicht nur, sondern interpretiert auch ihren Inhalt. Lassen Sie uns dies am Beispiel der zuvor erstellten HTML-Datei nachvollziehen.

TagsDas erste Zeichen, das der Browser liest, ist eine geöffnete spitze Klammer. Dieses Zeichen hat eine besondere Bedeutung für den Browser. Es weist ihn daraufhin, dass nun der Name eines so genann-ten Tags (Täk gesprochen) folgt. In unserem Fall handelt es sich um das Tag html. Die geschlossene spitze Klammer kennzeichnet das Ende des Tags.

Ein Tag ist ein in der Sprache HTML oder XHTML verfasster Hinweis oder Befehl, der sich an den Browser richtet. Das <html>-Tag kennzeichnet innerhalb einer Datei den Beginn eines Abschnitts, der aus HTML-Code (also weiteren Tags) und Texten besteht, die das Erscheinungsbild einer Web-seite definieren.

Einleitende und abschließende Tags

Wenn es ein Tag gibt, das den Anfang eines Abschnitts kennzeichnet, muss es auch ein Tag geben, das das Ende kennzeichnet. Und tatsächlich: Wenn Sie einen Blick auf die letzte Zeile der Datei wer-fen, finden Sie dort das Tag </html>.

Dies ist eine der wichtigsten Regeln, die Sie berücksichtigen müssen, wenn Sie mit einer Sprache wie HTML oder XHTML arbeiten. Wenn es ein einleitendes Tag gibt, muss es auch ein abschließendes


XHTML

117

Grun

dlag

en

Tag geben. Es gibt nur sehr wenige Tags, die diesem Muster nicht folgen und ohne abschließendes Tag auskommen.

Kopf und KörperInnerhalb der Tags <html> und </html> befinden sich also alle HTML-Tags und Texte, die die Web-seite definieren. Nachdem der Browser das erste Tag gelesen hat und nun darauf vorbereitet ist, wei-tere HTML-Tags zu lesen, trifft er auf das Tag <head>.

Auch dieses Tag leitet einen Abschnitt ein: den so genannten Kopfbereich (engl. header). Dieser Bereich nimmt Informationen über das aktuelle Dokument auf, wie zum Beispiel dessen Titel, der in der Titelleiste des Browsers angezeigt wird, Schlüsselwörter, die die Suche nach dem Dokument mit Hilfe von Suchmaschinen wie Google ermöglichen sollen, und alle anderen Daten, die nicht Teil des Dokumentinhalts sind.

In unserem Fall enthält der Kopfbereich nur eine Zeile:

Das Tag <title> definiert den Titel des Dokuments. Der Text, der zwischen dem Tag <title> und dem Tag </title> steht, erscheint somit in der Titelleiste des Browsers. Wenn Sie noch einmal einen Blick auf Abbildung 4.30 werfen, werden Sie dies bestätigen können.

Der nächste Bereich des Dokuments wird mit dem Tag <body> eingeleitet. Er definiert die Inhalte, die auf der Webseite angezeigt werden sollen. Dies geschieht größtenteils mit Hilfe anderer Tags, wie das Beispiel zeigt. Das Tag <h1> gibt dem Browser beispielsweise zu verstehen, dass der dem Tag fol-gende Text als Überschrift der ersten Ebene dargestellt werden soll, während das Tag <i> den Brow-ser anweist, den Text kursiv auszugeben.

Und genau dies tat der Browser, als er unsere »Textdatei« las und interpretierte. Er ordnete in der Titelleiste den Titel Meine Webseite an und generierte eine Seite mit dem Text Willkommen auf mei-ner Webseite, der als Überschrift der ersten Ebene und in kursiver Schrift angezeigt wurde.

Der von Expression Web generierte XHTML-CodeDieses Beispiel verdeutlicht, welche Vorteile es hat, mit Expression Web zu arbeiten. Sie müssen kei-nen HTML- oder XHTML-Code schreiben, sondern können die Benutzeroberfläche des Pro-gramms nutzen, um die gewünschten Elemente auf der Webseite anzuordnen und zu formatieren. Expression Web erzeugt dann aus Ihren Gestaltungsvorgaben den entsprechenden XHTML-Code. Und genau diesen von Expression Web generierten Code werden wir jetzt genauer unter die Lupe nehmen.

Sollten Sie Expression Web bereits geschlossen haben, starten Sie das Programm. Legen Sie keine neue Website an. Schließen Sie gegebenenfalls eine bereits geöffnete Site. Klicken Sie in der Symbol-leiste Allgemein oder Standard auf die Schaltfläche Neues Dokument. Klicken Sie nicht auf den nach unten weisenden Pfeil, der rechts an der Schaltfläche angeordnet ist. Expression Web erzeugt darauf-hin eine neue leere Webseite.

Aktivieren Sie die Codeansicht, indem Sie unten im Arbeitsbereich in der Ansichtenleiste auf die Registerkarte Code klicken. Lassen Sie uns einen Blick auf den von Expression Web generierten Code werfen:

<title>Meine Webseite</title>



118

DOCTYPE-Deklarationen und Dokumenttypdefinitionen

Die erste Zeile, die im vorherigen Listing aus Platzgründen über zwei Zeilen verteilt ist, enthält eine so genannte DOCTYPE-Deklaration oder Dokumenttyp-Deklaration. Diese Zeile sieht sehr kompli-ziert aus, hat aber nur eine Aufgabe. Sie legt fest, welche Dokumenttypdefinition (DTD) verwendet werden soll.

Wie Sie bereits wissen, basiert die Sprache XHTML auf der Sprache XML. Und Dokumente, die in auf XML basierenden Sprachen geschrieben sind, können so genannte Dokumenttypdefinitionen verwenden. Dabei handelt es sich um eine Art Regelsammlung, die vorgibt, welche Elemente in wel-cher Form in einem solchen Dokument genutzt werden dürfen.

Die Dokumenttypdefinition für XHTML-Dokumente definiert beispielsweise ein Element namens <h1>, das Sie bereits zuvor im Abschnitt »Kopf und Körper« kennen gelernt haben. Mit diesem Ele-ment bzw. Tag wird eine Überschrift der ersten Ebene eingeleitet. Und natürlich definiert die XHTML-Dokumenttypdefinition auch das Tag <i>, das Sie im selben Abschnitt kennen gelernt haben und mit dessen Hilfe Sie Text kursiv darstellen lassen können.

Beachten Sie jedoch, dass eine Dokumenttypdefinition ausschließlich vorgibt, welche Elemente in welcher Form in einem Dokument, das diese Dokumenttypdefinition befolgt, erscheinen dürfen. Sie legt nicht fest, was geschehen soll, wenn der Browser beispielsweise das Element <h1> liest. Dies ist allein die Entscheidung des Browsers. Die meisten Browser stellen den Text, der diesem Tag folgt, in größerer Schrift dar. Das ist aber nicht das Verdienst der Dokumenttypdefinition. Sie bestimmt lediglich, dass ein XHTML-Dokument ein Element namens h1 enthalten darf. Was der Browser letztendlich mit diesem Element anstellt, wenn er es in einem XHTML-Dokument liest, ist seine Sache.

Mit Hilfe von DTDs wird erreicht, dass jeder, der ein auf XML basierendes Dokument erstellt, das wiederum eine Dokumenttypdefinition als Basis verwendet, an die Regeln gebunden ist, die in der DTD definiert sind. Wenn in der Dokumenttypdefinition beispielsweise kein Element namens RiesigerText definiert ist, darf in dem Dokument, das die DTD befolgt, auch kein <RiesigerText>-Tag erscheinen. Geschieht dies dennoch, wird das Dokument als ungültig erachtet.

DTDs erzwingen somit die Einhaltung von Standards bei der Erstellung von Dokumenten, die auf XML basieren. Dies gewährleistet die maschinelle Auswertung solcher Dokumente. Eine Maschine – wie zum Beispiel ein Computer – kann immer nur gemäß den Vorgaben des Programmierers arbei-ten. Sie kann nur mit dem umgehen, was der Programmierer ihr vorgegeben hat. Hat der Program-mierer der Maschine beispielsweise mitgeteilt, was geschehen soll, wenn sie das Element <h1> liest, erledigt sie diese Aufgabe mit Bravour. Liest sie jedoch ein Element, auf das sie der Programmierer nicht vorbereitet hat (z.B. RiesigerText), treten Fehler auf, weil sie mit dieser Situation nicht umge-hen kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ohne_Titel_1</title></head><body></body></html>


XHTML

119

Grun

dlag

en

DTDs bilden somit Schnittstellen zwischen Menschen und Computern, weil diese festlegen, mit welchen Elementen und mit welcher Struktur ein Computer umgehen kann. Wenn der Mensch diese Struktur befolgt, ist es dem Computer möglich, mit den Dokumenten zu arbeiten, die er vom Menschen erhält.

Die XHTML-Dokumenttypdefinition ist eine Schnittstelle zwischen den Menschen, die XHTML-Dokumente (also Webseiten) erstellen, und den Browsern, die diese Dokumente lesen und auswer-ten, um das entsprechende Ergebnis auf dem Bildschirm anzuzeigen.

Ohne Expression Web müssten Sie diese Dokumenttypdefinition lesen, damit Sie XHTML-Doku-mente nach dem dort definierten Schema erstellen könnten. Expression Web kennt diese DTD jedoch in- und auswendig, sodass Sie lediglich mit Hilfe der Benutzeroberfläche dieses Programms das gewünschte Erscheinungsbild festlegen, und Expression Web daraus den entsprechenden DTD-konformen XHTML-Code generiert.

Lassen Sie uns nach dieser langen Erklärung zur ersten Zeile des von Expression Web generierten Codes zurückkehren:

Mit DOCTYPE wird also die DTD definiert, nach deren Regeln das vorliegende XHTML-Dokument erstellt wurde. Sie können diese DTD übrigens lesen, wenn Sie daran interessiert sind. Der Link am Ende der Zeile führt Sie zu dieser Definition.

Der öffentliche Bezeichner

Abgesehen von diesem Link enthält die DOCTYPE-Deklaration zwei weitere Informationen: html und PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN". Letztere ist der so genannte öffentliche Bezeich-ner, der mit dem Schlüsselwort PUBLIC eingeleitet wird. Er stellt Informationen bereit, die vom Browser benötigt werden, wenn sich die benötigte DTD nicht auf dem Computer befindet, auf dem der Browser ausgeführt wird. Und dies ist bei der XHTML-Dokumenttypdefinition der Fall. Dieses Regelwerk befindet sich nicht auf Ihrem Computer, sondern im Internet.

Die Angaben zu einem öffentlichen Bezeichner bestehen aus drei Abschnitten:

� die Information zur veröffentlichenden Person oder Institution (in unserem Beispiel ist dies das World Wide Web-Konsortium W3C)

� die Bezeichnung der DTD, beginnend mit dem Schlüsselwort DTD, gefolgt vom DTD-Namen und einer Versionsangabe

� die Angabe zur Sprache, in der die Namen der DTD-Elemente definiert sind. DE steht für deutsch, EN für englisch usw.

Hinter dem öffentlichen Bezeichner kann noch – wie im obigen Beispiel gezeigt – die Internet-Adresse mit dem tatsächlichen Speicherort der DTD folgen.

Das Wurzelelement

Direkt hinter dem Schlüsselwort DOCTYPE befindet sich das so genannte Wurzelelement, das angibt, welches Element die Rangfolge der XHTML-Elemente anführt. XHTML-Dokumente sind hierar-chisch strukturiert. Es gibt ein übergeordnetes Element (das Wurzelelement) und auf der nächsten Hierarchieebene zwei untergeordnete Elemente (head und body), die wiederum weitere untergeord-nete Elemente enthalten können (z.B. h1 und i).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



120

Bei XHTML-Dokumenten trägt das Wurzelelement in der Regel den Namen html, und wenn Sie einen Blick auf den Seitencode werfen, werden Sie dies bestätigen können. Zwischen dem Element <html> und </html> befinden sich alle untergeordneten Elemente.

Das html-Element

Die zweite Zeile des Codes, der von Expression Web für die neue Webseite generiert wurde, ist nach-folgend noch einmal aufgeführt:

Namespaces

Das Wurzelelement html steht hier nicht alleine, sondern enthält eine Information für den Browser. Mit xmlns wird ein so genannter Namespace definiert. Um zu verstehen, was ein Namespace ist, müssen wir noch einmal zum Thema Dokumenttypdefinition zurückkehren.

Wie bereits zuvor im Abschnitt »DOCTYPE-Deklarationen und Dokumenttypdefinitionen« beschrieben wurde, beginnt eine moderne XHTML-Webseite mit einer DOCTYPE-Deklaration, die festlegt, welche DTD dem Dokument zu Grunde liegt.

Es ist möglich, mehrere DTDs für ein XML-Dokument zu verwenden. Ein Beispiel hierfür ist das XML-Dokument eines Unternehmens, das Bücher und Bilder verkauft. Das Dokument führt alle Bücher und Bilder des Unternehmens mit Hilfe von Tags auf, deren Struktur in zwei verschiedenen DTDs definiert ist: eine DTD, die alle Bücherelemente definiert, und eine DTD, die alle Elemente für die Beschreibung von Bildern festlegt.

Nun ist jedoch in beiden DTDs ein Element namens titel definiert, da sowohl Bücher als auch Bil-der Titel haben. Wenn somit irgendwo im XML-Dokument das Element titel verwendet wird, kann ein Programm, das das Dokument auswertet, nicht wissen, ob eine Buch- oder Bildbeschrei-bung folgt.

Um solche Namenskonflikte zu vermeiden, ermöglicht XML den Einsatz so genannter Namespaces. Dies bedeutet, dass ein Elementname (z.B. titel) nicht direkt, sondern mit einem Präfix, gefolgt von einem Doppelpunkt eingegeben wird (z.B. buecher:titel bzw. bilder:titel). Auf diese Weise werden Verwechslungen vermieden.

Die Zeile

definiert einen Standard-Namespace ohne Präfix. Dies bedeutet, dass alle Elemente der XHTML-DTD, die dem Wurzelelement html untergeordnet sind und denen kein Präfix vorangestellt ist, auto-matisch zu diesem Namespace gehören.

Der Namespace selbst ist in diesem Fall ein URL (Uniform Resource Locator, einheitlicher Bezeich-ner für Ressourcen), also eine eindeutige Zeichenfolge. Lassen Sie sich von der Internetadresse nicht verwirren. Ein Namespace ist lediglich ein Name, und zwar ein eindeutiger Name. Sie können ihn sich wie eine Art Kategorienname vorstellen. Er definiert lediglich eine »Kategorie« oder »Gruppe«, der Elementnamen zugeordnet werden können (zum Beispiel das titel-Element der Kategorie buecher bzw. das titel-Element der Kategorie bilder). Da Internetadressen immer eindeutige Zei-

<html xmlns="http://www.w3.org/1999/xhtml">

<html xmlns="http://www.w3.org/1999/xhtml">


XHTML

121

Grun

dlag

en

chenfolgen sind (www.microsoft.com gibt es z.B. nur einmal im Internet), werden sie gerne als Namespace-Namen verwendet.

Namespaces und Präfixe

Wollten Sie einen Namespace in Verbindung mit einem Präfix definieren, müssten Sie die folgende Syntax verwenden:

Betrachten Sie dazu das folgende Beispiel:

Hier werden zwei Namespaces namens Buecher und Bilder deklariert, die jeweils über die Präfixe buund bi angesprochen werden. Um nun den Titel eines Buches und eines Bildes zu definieren, könn-ten Sie wie folgt vorgehen:

Der KopfbereichNach der DOCTYPE-Deklaration und dem einleitenden html-Element folgt der Kopfbereich der Web-seite, der durch das einleitende Tag <head> und das abschließende Tag </head> gekennzeichnet ist.

Webseitentitel

Ein Element, das innerhalb dieses Bereichs definiert wird, kennen Sie bereits: das title-Element. Sie verwenden es, um den Text festzulegen, der in der Titelleiste des Browsers angezeigt werden soll.

Metadaten

Der Kopfbereich enthält jedoch ein weiteres Tag, das den Namen meta trägt:

Mit Hilfe dieses Elements können Sie so genannte Metadaten angeben. Metadaten sind Informatio-nen über andere Daten. Metadaten zu einem Kennwort sind beispielsweise die Länge des Kennworts und Informationen darüber, ob das Kennwort Zahlen oder Sonderzeichen enthält.

In unserem Fall hält das meta-Tag Informationen zum Webseiteinhalt bereit, die vom Browser benö-tigt werden. Es informiert beispielsweise darüber, woraus die Webseite besteht (aus HTML-Code und Text). Beachten Sie, dass hier der Oberbegriff HTML verwendet wird. Dass es sich dabei um XHTML-Code handelt, wurde bereits mit der DOCTYPE-Deklaration angegeben.

Das meta-Tag gibt außerdem Aufschluss über die im Dokument verwendete Zeichenkodierung (utf-8). Zeichenkodierung meint das Darstellen eines Schriftzeichens, also eines Buchstabens, einer Ziffer oder eines Symbols, mittels eines Zahlencodes. Jedem Zahlencode ist dabei ein Zeichen zuge-wiesen (z.B. 65 für den Buchstaben A). Dies ist für die Arbeit mit einem Computer unerlässlich, weil ein Computer intern nur mit Zahlen (1 oder 0) arbeiten kann.

<html xmlns:praefix="Namespacename">

xmlns:bu="Buecher" xmlns:bi="Bilder"

<bu:titel>Expression Web - Das Handbuch</bu:titel><bi:titel>Mona Lisa</bi:titel>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



122

Im Laufe der mittlerweile langen Geschichte der elektronischen Datenverarbeitung wurden viele verschiedene Zeichenkodierungen entwickelt. UTF-8 ist der Name einer dieser Kodierungen. Sie wird in der Regel für westliche Webseiten verwendet.

Es gibt unzählige meta-Tags, die Sie im Kopfbereich verwenden können. Diese werden eingesetzt, um zum Beispiel eine kurze Beschreibung der Webseite anzugeben, Stichwörter für Suchmaschinen zu definieren, den Namen des Autors der Webseite anzugeben usw.

Eine ausführliche Beschreibung der verfügbaren Metadaten finden Sie unter der Adresse http://de.selfhtml.org/html/kopfdaten/meta.htm.

Der KörperDer letzte von Expression Web für die Webseite generierte Bereich ist der Körper, der durch die Tags <body> und </body> gekennzeichnet ist. Er definiert den Inhalt der Seite, wie zum Beispiel Bilder, Texte und Bedienelemente (Schaltflächen, Eingabefelder usw.). Da Sie noch keine Elemente auf der Webseite angeordnet haben, befinden sich auch noch keine entsprechenden Tags innerhalb dieses Bereichs. Sie werden dies nun ändern.

Vom Entwurf zum CodeNachdem Sie den XHTML-Code einer leeren Webseite kennen gelernt haben, werden Sie nun der Seite mit Hilfe von Expression Web verschiedene, in diesem Kapitel bereits besprochene Elemente (Texte, Bilder usw.) hinzufügen und anschließend überprüfen, welchen Code das Programm daraus generiert.

Wechseln Sie also wieder zur Entwurfsansicht und geben Sie in die leere Webseite den folgenden Text ein:

Ein einfacher Text

Wechseln Sie anschließend zur Codeansicht, um zu sehen, was Expression Web aus Ihrer Eingabe gemacht hat. Der XHTML-Code hat sich kaum verändert. Lediglich innerhalb des body-Bereichs ist eine neue Zeile zu finden:

Wie Sie sehen können, wurde Ihr Text zwischen den Tags <p> und </p> angeordnet. Der Buchstabe psteht in diesem Fall für das englische Wort paragraph, was übersetzt Absatz bedeutet. Das Tag <p> lei-tet somit einen Textabsatz ein.

Das <p>-Tag ist nicht unbedingt erforderlich. Sie können einen Text auch ohne dieses Tag einfügen, solange er sich nicht außerhalb des body-Bereichs oder innerhalb anderer Tags befindet, zum Beispiel im Tag <img>, mit dem ein Bild definiert wird, das auf der Webseite angezeigt werden soll. Das Tag darf nur solche Informationen aufführen, die dem Browser mittei-len, welches Bild auf der Webseite angezeigt werden soll, wie das folgende Beispiel zeigt:

HINWEIS

<p>Ein einfacher Text</p>

HINWEIS

<img src="c:\Familienfoto.jpg" />


XHTML

123

Grun

dlag

en

Würden Sie innerhalb der spitzen Klammern einen Text einfügen, würde dieser nicht auf der Webseite erscheinen, weil der Browser davon ausgeht, dass der Text der näheren Spezifikation des Bildes dient. Einige Browser könnten sogar eine Fehlermeldung anzeigen.

Glücklicherweise müssen Sie sich jedoch nicht darum kümmern, wo im Code der Text hingehört. Sie geben den Text einfach im Entwurfsmodus von Expression Web an der gewünschten Stelle ein und Expression Web sorgt dafür, dass er innerhalb des XHTML-Codes an der richtigen Stelle erscheint.

AttributeFast alle XHTML-Tags können mit so genannten Attributen ausgestattet werden. Diese ermöglichen es Ihnen, ein Tag näher zu spezifizieren. Kehren wir dazu noch einmal zur Codeansicht und zum soeben eingegebenen Text zurück. Verändern Sie ihn wie folgt:

Wenn Sie jetzt zur Entwurfsansicht zurückkehren, präsentiert sich Ihnen der Text wie in Abbildung 4.31 dargestellt.

Abbildg. 4.31 Das hinzugefügte Attribut sorgt für eine zentrierte Ausrichtung des Textes

Der Text ist nun nicht mehr am linken Seitenrand, sondern zentriert ausgerichtet. Sie haben dies mit Hilfe des Attributs align erreicht, das Sie im <p>-Tag verwendet haben. Oder in der Fachsprache ausgedrückt: Sie haben dem Tag <p> das Attribut align übergeben, dem Sie wiederum den Wert center zugewiesen haben. Auf diese Weise haben Sie dem Browser mitgeteilt, dass der Text im Absatz (<p>) ausgerichtet werden soll (align), und zwar zentriert (center).

Beachten Sie, dass einige Tags mehrere Attribute unterstützen. Diese werden dann durch Leerzeichen voneinander getrennt angegeben, wenn Sie sie benötigen:

<p align="center">Ein einfacher Text</p>

HINWEIS

<TagName Attribut1=Attributwert Attribut2=Attributwert ... >



124

Der Aufgabenbereich Tageigenschaften

Sie müssen übrigens nicht jedes Mal zur Codeansicht wechseln, wenn Sie einem Tag ein Attribut hinzufügen möchten. Sie können auch in der Entwurfsansicht Tag-Attribute setzen. Teilweise haben Sie dies auch schon getan, als Sie die verschiedenen Bedienelemente von Expression Web benutzten, um Texte zu formatieren.

Diese Bedienelemente sind jedoch sehr spezifisch und ändern immer nur wenige Attribute eines Tags. Wenn Sie alle Attribute eines in der Entwurfsansicht von Expression Web markierten Elements anzeigen lassen möchten, werfen Sie einfach einen Blick auf den Aufgabenbereich Tageigenschaften, der in der Regel oben links im Expression Web-Fenster zu sehen ist.

Der Aufgabenbereich Tageigenschaften ermöglicht es Ihnen, den Elementen ihrer Webseite (Texte, Grafiken usw.) die Attribute zuzuweisen, die für das jeweilige Element zur Verfügung stehen. Sollte der Aufgabenbereich nicht angezeigt werden, wählen Sie im Menü Aufgabenbereiche den Befehl Tag-eigenschaften.

Die Aufgabenbereiche Tageigenschaften und CSS-Eigenschaften teilen sich einen Fensterbereich (in der Regel oben links im Expression Web-Fenster). Sie aktivieren den jeweiligen Aufgabenbereich, indem Sie unter der Titelleiste des Bereichs auf die jeweilige Registerkarte kli-cken.

Die Abbildung 4.33 zeigt, wie der (etwas vergrößerte) Aufgabenbereich Tageigenschaften aufgebaut ist, wenn sich die Einfügemarke in dem Beispieltext befindet, der im vorherigen Abschnitt bespro-chen wurde (der zentrierte Text »Ein einfacher Text«).

Abbildg. 4.32 Der Aufgabenbereich Tageigenschaften

WICHTIG


XHTML

125

Grun

dlag

en

Im oberen Bereich sind alle Attribute aufgeführt, die auf das Element, das auf der Seite markiert ist, angewendet werden können. In unserem Beispiel ist dies natürlich der zentrierte Text, den Sie mar-kiert haben oder in den Sie die Einfügemarke gesetzt haben.

Unter Attribute befindet sich das Attribut align, dem Sie in der Codeansicht den Wert center zuge-wiesen haben. Wie Sie sehen, geht dies aus der Liste hervor, da der Eigenschaftsname (der Attribut-name) in Fettschrift sowie einer anderen Farbe aufgeführt ist. Rechts neben dem Eigenschaftsnamen ist außerdem der Eigenschaftswert zu sehen.

Wollten Sie den Wert ändern, könnten Sie in das Feld klicken, in dem der Wert aufgeführt ist. Sie könnten ihn überschreiben oder auf den nach unten weisenden Pfeil klicken, der sich rechts im Feld befindet, um einen anderen möglichen Wert auszuwählen.

Tageigenschaften ändernAuf diese Weise können Sie alle Attribute (Eigenschaften) ändern, die vom Aufgabenbereich für das markierte Element vorgegeben werden. Beachten Sie, dass in diesem Fall der XHTML-Code des betroffenen Tags verändert wird.

Wenn Sie beispielsweise im Aufgabenbereich Tageigenschaften das Attribut dir (legt die Leserichtung für einen Text fest; z.B. ltr für links nach rechts oder rtl für rechts nach links) ändern, indem Sie in das Feld neben dem Eigenschaftsnamen und dann auf den nach unten weisenden Pfeil klicken, um im folgenden Listenfeld die gewünschte Leserichtung auszuwählen, ändert Expression Web den XHTML-Code des markierten Element-Tags. Es fügt dem Tag das entsprechende Attribut hinzu, wie der folgende Codeausschnitt zeigt:

Das Ändern der Leserrichtung hat nur dann Einfluss auf das Erscheinungsbild des Textes, wenn das align-Attribut nicht gesetzt ist. Überprüfen Sie dies, indem Sie den Wert des align-Attributs löschen und das dir-Attribut z.B. auf rtl setzen. In diesem Fall wird der Text rechtsbündig ausgerichtet.

Das Attribut dient aber auch informativen Zwecken. Es gibt beispielsweise Programme für sehbe-hinderte Menschen, die den Inhalt von Webseiten vorlesen. Solche Programme können mit Hilfe dieses Attributs die erforderliche Leserichtung ermitteln und entsprechend agieren.

Der Aufgabenbereich Tageigenschaften führt nicht nur die Attribute von Tags auf, sondern auch so genannte Ereignisse. Ereignisse werden ausführlich in Kapitel 14 beschrieben.

Veraltete AttributeWenn Sie noch einmal zur Codeansicht zurückkehren, werden Sie feststellen, dass das Attribut, das Sie zuvor dem Tag <p> hinzugefügt haben, rot unterschlängelt ist. Den Grund hierfür erfahren Sie, wenn Sie den Mauszeiger auf das Attribut bewegen und einen Moment warten. Danach erscheint am Tag ein Infofeld, das Sie darüber informiert, dass das align-Attribut inzwischen als veraltet ange-sehen wird und neuere Konstrukte empfehlenswert sind. Welche Konstrukte dies sind, erfahren Sie im nächsten Abschnitt.

<p align="center" dir="rtl">Ein einfacher Text</p>

HINWEIS



126

CSSLöschen Sie bitte das Attribut, das Sie dem Tag <p> hinzugefügt haben, und kehren Sie zur Entwurfs-ansicht zurück. Dort sollte der Text nun wieder gemäß dem Standard ausgerichtet erscheinen, also linksbündig am linken Seitenrand.

Setzen Sie die Einfügemarke in die Textzeile und klicken Sie in der Symbolleiste Allgemein oder For-mat auf die Schaltfläche Zentriert oder drücken Sie die Tastenkombination (Strg)+(E). Der Text ist nun wieder zentriert ausgerichtet. Da Expression Web zuvor Ihre Vorgehensweise als veraltet kriti-siert hat, müsste sich Ihnen jetzt ein anderes Bild präsentieren, wenn Sie zur Codeansicht wechseln. Und tatsächlich verwendet das Tag <p> nun ein anderes Attribut:

Hier kommt nicht mehr das Attribut align zum Einsatz, sondern das Attribut class. Wenn Sie auf-merksam waren, haben Sie festgestellt, dass dies nicht die einzige Änderung im Code war. Ein Blick in den Kopfbereich verrät, dass sich dort ebenfalls einiges getan hat. Vor dem abschließenden Tag </head> befinden sich einige neue Zeilen:

Das geübte XHTML-Auge erkennt sofort, dass es sich hier um einen Bereich handelt, der mit dem Tag <style> eingeleitet und mit dem Tag </style> abgeschlossen wird.

Innerhalb dieses Bereichs finden Sie jedoch keine weiteren Tags, wie Sie es vielleicht erwartet hätten. Schließlich haben Sie schon mehrere Bereiche kennen gelernt, wie zum Beispiel <html></html>, <head></head> und <body></body>, die ebenfalls XHTML-Tags enthalten können.

Doch worum handelt es sich bei diesen seltsamen Zeilen, die so fremd anmutende Zeichen wie geschweifte Klammern und Semikola verwenden? Lediglich die Zeile

vermittelt ein vages Gefühl von Vertrautheit. Sie ähnelt irgendwie dem Attribut, das Sie zuvor dem Tag <p> manuell hinzugefügt hatten.

Ich werde Sie nicht länger auf die Folter spannen. Schließlich haben Sie zum ersten Mal mit CSS gearbeitet. CSS ist die Abkürzung für Cascading Style Sheets, was wörtlich übersetzt soviel wie stu-fenförmig aufgebaute Stilblätter bedeuten würde. Dies ist ein Name, der nicht sonderlich auf-schlussreich ist. Eine bessere sinngemäße Übersetzung könnte vielleicht vererbbare Stilvorlagen lau-ten.

<p class="style1">Ein einfacher Text</p>

<style type="text/css">.style1 { text-align: center;}</style>

text-align: center;


CSS

127

Grun

dlag

en

StileCSS ist im Wesentlichen eine Sprache, genauso wie XML, HTML oder XHTML eine Sprache ist. Allerdings wird CSS nicht wie XHTML verwendet, um den Inhalt einer Webseite (Texte, Bilder usw.) zu definieren. Es ist eine Sprache, die in einige andere Sprachen eingebettet werden kann, um Stile zu beschreiben und anzuwenden.

Doch was ist ein Stil? Wenn Sie schon einmal mit einer Textverarbeitung wie Microsoft Word gear-beitet haben, kennen Sie Formatvorlagen. Formatvorlagen fassen mehrere Gestaltungsmerkmale unter einem Namen zusammen.

Stile sind mit Formatvorlagen vergleichbar. Auch sie fassen in der Regel mehrere Gestaltungsmerk-male unter einem Namen zusammen. Dies ist sinnvoll, wenn Sie z.B. verschiedenen Texten in einem Dokument wiederholt dieselben Auszeichnungen zuweisen müssen.

Stellen Sie sich beispielsweise vor, dass sich auf Ihrer Webseite viele Textpassagen befinden, die sowohl in Fettschrift, in Kursivschrift und unterstrichen dargestellt werden müssen. Ohne CSS-Stile müssten Sie jede betroffene Textpassage markieren und ihr nacheinander die gewünschten Aus-zeichnungen zuweisen.

Stilvorlagen

Mit CSS ist es jedoch möglich, die Gestaltungsmerkmale Fettschrift, Kursivschrift und Unterstri-chen in einer Stilvorlage zusammenzufassen. Diese kann dann jedem beliebigen Text zugewiesen werden, sodass er die in der Vorlage definierten Merkmale aufweist.

Und genau dies geschieht im Code unserer Webseite. Mit der Zeile

teilt Expression Web dem Browser zunächst mit, dass nun die Definition einer CSS-Stilvorlage folgt:

Der Name der Vorlage wird von Expression Web vorgegeben: .style1. Beachten Sie den Punkt vor dem Namen. Er gibt an, dass hier eine CSS-Klasse definiert wird. Eine CSS-Klasse ist eine Stilvorlage mit besonderen Fähigkeiten, die Sie in den Kapiteln 4 und 8 kennen lernen werden. Der Punkt ist ein CSS-Sprachelement, ein Hinweis, der in unserer Sprache übersetzt wie folgt lauten könnte: »Achtung! Jetzt folgt die Definition einer CSS-Klasse.«

Die Gestaltungsmerkmale, die in der Klasse zusammengefasst werden sollen, müssen zwischen einer geöffneten und einer geschlossenen geschweiften Klammer stehen. In unserem Fall handelt es sich nur um ein Gestaltungsmerkmal: eine zentrierte Textausrichtung.

Zunächst wird der Name des Gestaltungsmerkmals angegeben, der in der CSS-Sprache text-align(Textausrichtung) lautet. Dann folgen ein Doppelpunkt und schließlich der Wert, der dem Gestal-tungsmerkmal zugewiesen werden soll. In unserem Fall ist dies der Wert center (zentriert). Jede Aus-zeichnungsdefinition wird mit einem Semikolon abgeschlossen. Wie Sie sehen können, ist es nicht schwierig, Auszeichnungen mit CSS zu definieren. Sie müssen sich lediglich die Reihenfolge merken: Name des Gestaltungsmerkmals, Doppelpunkt, Wert des Gestaltungsmerkmals, Semikolon.

<style type="text/css">

.style1 { text-align: center;}



128

CSS-Klassen zuweisenSobald die Klasse definiert ist, kann sie jedem Element zugewiesen werden, das auf der Webseite angeordnet ist und die in der Klasse definierten Gestaltungsmerkmale unterstützt. In unserem Code geschieht dies in der folgenden Zeile:

Die Zuweisung erfolgt innerhalb des Tags, auf den die in der Klasse definierten Gestaltungsmerk-male angewendet werden sollen. Dazu wird das Attribut class verwendet, mit dessen Hilfe die gewünschte CSS-Klasse angegeben wird. Der Name der Klasse wird als Attributwert übergeben. Dies ist natürlich der von Expression Web vorgegebenen Name (style1).

Wenn nun später der Browser auf diese Zeile stößt, überprüft er, ob es eine Klasse namens style1gibt. Sobald er festgestellt hat, dass eine solche Klasse existiert, sieht er nach, welche Gestaltungs-merkmale in ihr definiert sind und wendet diese auf den Text an, der sich innerhalb der beiden Tags <p> und </p> befindet. Er stellt den Text also zentriert dar.

Kompliziert aber besserSie fragen sich nun vielleicht, weshalb XHTML-Attribute mittlerweile als veraltet gelten und statt-dessen der Einsatz von CSS empfohlen wird. Schließlich ist die Arbeit mit CSS ungleich komplizier-ter. Der Grund hierfür besteht darin, dass CSS viel mehr Möglichkeiten bietet, als einfache XHTML-Attribute.

Sie können beispielsweise nicht nur CSS-Klassen definieren. Sie können auch mit nur wenigen Zei-len CSS-Code das generelle Erscheinungsbild von XHTML-Tags verändern, sodass jedes Mal, wenn Sie diese Tags in einer Webseite verwenden, automatisch das neue Erscheinungsbild verwendet wird. Welche Möglichkeiten Ihnen CSS bietet, erfahren Sie in den Kapiteln 4 und 8.

CSS in der EntwurfsansichtWenn Sie in der Entwurfsansicht von Expression Web arbeiten, gibt es, abgesehen von den Bedien-elementen, mit denen Sie bisher gearbeitet haben (Symbolleisten, Dialogfelder usw.), ein weiteres Hilfsmittel, mit dessen Hilfe Sie den Stil Ihrer Webinhalte bearbeiten können.

Der Aufgabenbereich CSS-Eigenschaften

Der Aufgabenbereich CSS-Eigenschaften ermöglicht es Ihnen, den Elementen Ihrer Webseite (Texte, Grafiken usw.) die CSS-Gestaltungsmerkmale zuzuweisen, die für das jeweilige Element zur Verfü-gung stehen. Sollte der Aufgabenbereich nicht angezeigt werden, wählen Sie im Menü Aufgabenbe-reiche den Befehl CSS-Eigenschaften.

Die Aufgabenbereiche CSS-Eigenschaften und Tageigenschaften teilen sich einen Fensterbereich (in der Regel oben links im Expression Web-Fenster). Sie aktivieren den jeweiligen Aufgabenbereich, indem Sie unter der Titelleiste des Bereichs auf die jeweilige Registerkarte klicken.

<p class="style1">Ein einfacher Text</p>

WICHTIG


CSS in der Entwurfsansicht

129

Grun

dlag

en

Die Abbildung 4.33 zeigt, wie der (etwas vergrößerte) Aufgabenbereich CSS-Eigenschaften aufgebaut ist, wenn sich die Einfügemarke in dem Beispieltext befindet, der in den vorherigen Abschnitten besprochen wurde.

Abbildg. 4.33 Der Aufgabenbereich CSS-Eigenschaften

Im oberen Bereich sind zunächst die Stilvorlagen aufgeführt, die auf das Element angewendet wer-den, das auf der Seite markiert ist. In unserem Beispiel ist dies natürlich der zentrierte Text, den Sie markiert haben oder in den Sie die Einfügemarke gesetzt haben.

Auf das <p>-Element, in dem dieser Text angeordnet ist, wird nur eine Stilvorlage angewendet: die CSS-Klasse style1. Demgemäß ist auch nur diese Klasse im oberen Bereich aufgelistet. In der rech-ten Spalte erkennen Sie, worauf die Vorlage angewendet wird. Die Zeichenfolge <p.style1> gibt zu verstehen, dass es sich dabei um ein <p>-Tag handelt. Die CSS-Klasse style1 wird somit auf ein <p>-Tag angewendet.

Welche Gestaltungsmerkmale dabei zum Einsatz kommen, erfahren Sie, wenn Sie einen Blick auf den unteren Aufgabenbereich werfen. Dort sind alle für das <p>-Tag verfügbaren CSS-Gestaltungs-merkmale aufgeführt und in Kategorien unterteilt.

In der Kategorie Block befindet sich die CSS-Eigenschaft text-align, der Expression Web in der Klasse style1 den Wert center zugewiesen hat. Wie Sie sehen, geht dies aus der Liste hervor, da der Eigenschaftsname in Fettschrift sowie einer anderen Farbe aufgeführt ist. Rechts neben dem Eigen-schaftsnamen ist außerdem der Eigenschaftswert zu sehen.

Wollten Sie den Wert ändern, könnten Sie in das Feld klicken, in dem der Wert aufgeführt ist. Sie könnten ihn überschreiben oder auf den nach unten weisenden Pfeil klicken, der sich rechts im Feld befindet, um einen anderen möglichen Wert auszuwählen.



130

CSS-Eigenschaften ändern

Auf diese Weise können Sie alle Gestaltungsmerkmale ändern, die vom Aufgabenbereich für das markierte Element vorgegeben werden. Beachten Sie, dass in diesem Fall die CSS-Klassendefinition im XHTML-Code verändert wird.

Wenn Sie beispielsweise im Aufgabenbereich CSS-Eigenschaften in der Kategorie Zeichen die CSS-Eigenschaft color ändern, indem Sie in das Feld neben dem Eigenschaftsnamen und dann auf den nach unten weisenden Pfeil klicken, um im folgenden Listenfeld die gewünschte Farbe auszuwählen, ändert Expression Web die Definition der Klasse style1. In der Codeansicht können Sie feststellen, dass die Definition nun wie folgt lautet:

Ein Text, dem diese CSS-Klasse zugewiesen wird, erscheint jetzt nicht nur zentriert, sondern auch in der Farbe Rot (bzw. in der von Ihnen gewählten Farbe).

Beachten Sie, dass die letzten Abschnitte lediglich einen ersten Einblick in die Sprache CSS gewährt haben. Weitere und ausführliche Informationen zu diesem Thema finden Sie in den Kapiteln 4 und 8.

Visuelle UnterstützungenSie wissen nun, was XHTML-Tags sind und wie Sie mit CSS das Erscheinungsbild des Webseitenin-halts verändern. Wenn Sie im Menü Ansicht den Eintrag Visuelle Unterstützung auswählen, wird ein Untermenü geöffnet, mit dessen Hilfe Sie festlegen, welche unterstützenden Informationen in der Entwurfsansicht angezeigt werden sollen, wenn Sie an einer Webseite arbeiten.

Wenn Sie in diesem Menü den Eintrag Blockmarkierung aktivieren (ein aktivierter Eintrag ist an dem voranstehenden, farbig unterlegten Symbol zu erkennen) und darauf achten, dass die Anzeige der unterstützenden Informationen aktiviert ist (das Symbol vor dem Eintrag Anzeigen muss farbig unterlegt sein), werden in der Entwurfsansicht die von Ihnen hinzugefügten Elemente (Texte, Grafi-ken usw.) auf eine bestimmte Art und Weise gekennzeichnet.

Wenn Sie die Einfügemarke beispielsweise in den Absatz setzen, der in den letzten Abschnitten als Beispiel diente und mit Hilfe von CSS zentriert und farblich verändert wurde, besteht die visuelle Unterstützung – die Blockmarkierung – darin, dass ein gepunkteter Rahmen um den Bereich herum angeordnet wird, der für das entsprechende <p>-Tag reserviert ist. Oben an diesem Rahmen wird außerdem ein kleines graues Infofeld angezeigt, das sowohl den Namen des Tags als auch den Namen des CSS-Stils anzeigt, die auf dieses Tag angewendet wird. Die Abbildung 4.34 zeigt dies.

.style1 { text-align: center; color: #FF0000;}

HINWEIS


Zusammenfassung

131

Grun

dlag

en

Abbildg. 4.34 Mit Blockmarkierungen behalten Sie die Übersicht über Tags und CSS-Stile

Beachten Sie bitte, dass es sich hierbei lediglich um eine visuelle Unterstützung handelt, die dazu beitragen soll, dass Sie auf einen Blick sehen, wo im Dokument welche XHTML-Tags eingesetzt und welche CSS-Stile darauf angewendet werden. Wenn die Webseite später von einem Browser angezeigt wird, erscheinen diese visuellen Unterstützungen natürlich nicht.

Im Verlauf dieses Buches werden Sie noch weitere visuelle Unterstützungen kennen lernen, die Ihnen bei der Arbeit mit Expression Web helfen.

ZusammenfassungDieses Kapitel hat anhand einer Websitevorlage die wichtigsten Bearbeitungsfunktionen und Bedien-elemente der Benutzeroberfläche von Expression Web beschrieben. Darüber hinaus haben Sie einen ersten Blick auf den XHTML- und CSS-Code einer Webseite geworfen. Sie haben erfahren,

� wie Sie ein neues Web (eine Website) mit Hilfe einer Webvorlage erstellen (siehe Seite 68).

� wie Sie Text und Absätze formatieren. Dazu benutzen Sie die Symbolleiste Format und die Dia-logfelder Zeichen und Absatz, die Sie über das Menü Format aufrufen (Seite 77 ff.).

� wie Sie die verschiedenen Seitenansichten aktivieren, um die aktuelle Seite im Entwurfsmodus, im Vorschaumodus oder in der Code-Ansicht anzeigen zu lassen (siehe Seite 88 ff.).

� wie Sie Aufzählungen und Nummerierungen erstellen, um den Inhalt Ihrer Webseite zu glie-dern. Sie können außerdem reduzierbare Listen generieren, die von den Besuchern Ihrer Site mit einem Mausklick ein- und ausgeblendet werden können (ab Seite 93).

� wie Sie Bilder in Ihr Web importieren und auf Ihren Webseiten anordnen (Seite 99 ff.).

� wie Sie Hyperlinks einfügen, die zu anderen Seiten Ihres Webs führen können (Seite 107 ff.).

� wie Sie eine Vorschau Ihrer Website mit einem Browser anzeigen lassen, der nicht in der Brow-serliste aufgeführt ist (Seite 88).

� woraus eine Webseite eigentlich besteht: aus XHTML- und CSS-Code (Seite 115).

� was XHTML-Tags und -Attribute sind (Seite 116 ff.).

� dass viele XHTML-Attribute mittlerweile als veraltet gelten und stattdessen CSS-Stile verwendet werden (Seite 123 ff.).

� wie Sie mit visuellen Unterstützungen nicht die Übersicht verlieren (Seite 130).

HINWEIS



Documents

Erste Schritte mit Expression Web, XHTML und CSS