6 Eine Website mithilfe

Transkript

1 6 Eine Website mithilfe einer Vorlage erstellen In diesem Kapitel lernen Sie, wie Sie eine Website anhand einer Vorlage erstellen. wie Sie Webseiten organisieren. wie Sie die dynamische Webvorlage einer Website verändern. wie Sie die Cascading Stylesheets einer Website bearbeiten. Das Erstellen einer Website aus einem leeren Ordner ist eine Respekt einflössende Herausforderung, es sei denn, man erstellt nur eine sehr kleine Website. Microsoft Expression Web 2 enthält eine Reihe von vorinstallierten Websitevorlagen, die Sie verwenden können, um sich das Erstellen einer Website zu vereinfachen. Diese Websitevorlagen enthalten gültiges HTML und Layouts, die zur Positionierung der Seitenelemente Cascading Stylesheets statt Tabellen verwenden. Jede Website verwendet eine dynamische Webvorlage, die das Seitenlayout und die Darstellung steuert. Was Sie nicht finden, sind proprietäre Features, uninteressante ClipArts, extrem tief verschachtelte und nicht mehr zu durchschauende Tabellenstrukturen oder andere der zahlreichen Probleme, die in Vorgängern von Expression Web 2 enthalten waren. Die vorinstallierten Vorlagen sind in drei Gruppen zusammengefasst: Organisation, Kleinunternehmen und Persönlich. Diese Aufteilung bezieht sich mehr auf die Architektur der Vorlagen (Anzahl der Seiten und Seitentitel) als auf deren Zweck. Daher sollten Sie sich unabhängig davon, welche Art von Websites Sie erstellen wollen, die verschiedenen Vorlagen zunächst einmal ansehen und dann diejenige verwenden, die Ihren ästhetischen Ansprüchen am ehesten genügt. Es ist einfacher, aus einer auf einer Vorlage basierenden Website Seiten zu entfernen oder neue hinzuzufügen, als große Änderungen an der visuellen Darstellung der Website vorzunehmen. Vorlagen wie diejenigen, die Expression Web 2 bereitstellt, sind nicht nur ein guter Weg, um mit Ihrem Website-Projekt schnell voranzukommen, sondern sie eignen sich auch gut, um durch Learning by Doing Elemente wie dynamische Webvorla- 141

2 6 Eine Website mithilfe einer Vorlage erstellen gen, Cascading Stylesheets und weitere allgemeine Möglichkeiten von Expression Web 2 kennenzulernen. In diesem Kapitel werden Sie zuerst lernen, wie Sie eine Vorlage auswählen, die für die Website, die Sie erstellen wollen, am besten geeignet ist. Anschließend werden Sie erfahren, wie Sie eine auf einer Vorlage basierende Website verändern, indem Sie deren Seiten organisieren und ihre Cascading Stylesheets-Dateien bearbeiten. WICHTIG Bevor Sie die Übungsdateien für dieses Kapitel verwenden können, müssen Sie diese zuerst von der Begleit-CD des Buches in den vorgegebenen Standardordner installieren. Weitere Informationen zu den Übungsdateien finden Sie im Abschnitt Die Begleit-CD verwenden im einleitenden Teil dieses Buches. ACHTUNG Die Abbildungen und die Schrittfolgen in diesem Buch beziehen sich auf die Benutzeroberfläche von Windows Vista. Wenn auf Ihrem Computer Windows XP ausgeführt wird und wenn beim Durchführen der beschriebenen Schrittfolgen Probleme auftreten, schauen Sie bitte im Abschnitt Informationen für Benutzer von Windows XP im einleitenden Teil dieses Buches nach. Um die Lesbarkeit der Abbildungen in diesem Buch zu verbessern, wurde Expression Web 2 so konfiguriert, dass es das aktuelle Windows-Farbschema verwendet und nicht das Standardfarbschema von Expression Web 2 (Extras/Anwendungsoptionen). Eine auf einer Vorlage basierende Website erstellen Bevor Sie eine neue Website erstellen, die auf einer der von Expression Web 2 zur Verfügung gestellten Vorlagen basiert, ist es eine gute Idee, zuerst eine Vorstellung davon zu entwickeln, wie das Ergebnis aussehen soll, sich dann die verschiedenen Vorlagen anzusehen und anschließend diejenige auszuwählen, die dem gewünschten Ergebnis am nächsten kommt. In dieser Übung werden Sie eine der bereitgestellten Vorlagen auswählen und anhand dieser Vorlage eine neue Website erstellen. ACHTEN SIE DARAUF, Expression Web 2 zu starten, bevor Sie mit der nachfolgenden Übung beginnen. Wenn Expression Web 2 eine vorher verwendete Website öffnet, klicken Sie im Menü Datei auf Website schließen. 1 Zeigen Sie im Menü Datei auf Neu und klicken Sie dann auf Website. Das Dialogfeld Neu wird angezeigt, die Registerkarte Website ist geöffnet. 2 Klicken Sie auf der linken Seite des Dialogfeldes auf Vorlagen. Im mittleren Bereich des Dialogfeldes werden die installierten Vorlagen angezeigt. 142

3 Eine Website mithilfe einer Vorlage erstellen 6 3 Klicken Sie die verschiedenen Vorlagen an, damit auf der rechten Seite des Dialogfeldes eine Beschreibung und eine Miniaturansicht der Website angezeigt wird. 4 Sehen Sie sich die verschiedenen Vorlagen an und klicken Sie dann die Vorlage Organisation 5 an. 5 Klicken Sie im Dialogfeld Neu auf die Schaltfläche Durchsuchen und wechseln Sie dann zum Ordner Dokumente\Meine Websites. Sie werden die auf einer Vorlage basierende Website in diesem Ordner erstellen. 6 Wenn das Dialogfeld Speicherort für neue Website den Inhalt des Ordners Meine Websites anzeigt, klicken Sie auf die Schaltfläche Neuer Ordner und erstellen Sie einen Ordner mit dem Namen Kap

4 6 Eine Website mithilfe einer Vorlage erstellen 7 Markieren Sie im Dialogfeld Speicherort für neue Website den neu erstellten Ordner Kap06 und klicken Sie dann auf Öffnen. Im Dialogfeld Neu wird der ausgewählte Speicherort im Feld Adresse der neuen Website angezeigt. 8 Klicken Sie auf OK. Expression Web 2 erstellt und öffnet eine neue Website, die auf der Vorlage Organisation 5 basiert. 9 Doppelklicken Sie in der Ordnerliste auf die Seite default.html, um sich genauer anzusehen, was soeben erstellt wurde. 144

5 Eine Website mithilfe einer Vorlage erstellen 6 Da die Websitevorlagen, die sich im Lieferumfang von Expression Web 2 befinden, dynamische Webvorlagen verwenden, ist nur auf dem bearbeitbaren Inhaltsbereich ein aktiver Mauszeiger zu sehen. Alle Änderungen, die Sie an der Vorlage selbst vornehmen wollen, müssen Sie durch direktes Bearbeiten der dynamischen Webvorlage vornehmen. 10 Lassen Sie die Seite in der Browservorschau darstellen, damit Sie sehen, wie die Seite einem Besucher angezeigt wird. Klicken Sie dabei auch die verschiedenen Links an, um auch die anderen Seiten der Website zu sehen. 145

6 6 Eine Website mithilfe einer Vorlage erstellen 11 Schließen Sie das Browserfenster und kehren Sie zu Expression Web 2 zurück. Nun wissen Sie, welche Seiten von der Vorlage, die Sie ausgewählt haben, erstellt werden, welche Seiten Sie löschen wollen, welche Sie behalten wollen und welche Seiten, die noch nicht vorhanden sind, ergänzt werden müssen. ACHTEN SIE DARAUF, dass die Website Kap06 für die folgende Übung geöffnet bleibt. Webseiten organisieren Nachdem Sie wie in der vorherigen Übung eine auf einer Vorlage basierende Website erstellt haben, besteht die erste Aufgabe darin, die Seiten zu organisieren. Hierzu gehört das Erstellen von Seiten, die noch nicht vorhanden sind, das Löschen von Seiten, die Sie nicht benötigen, sowie das Organisieren der Speicherorte und Eigenschaften von bestehenden Seiten. In dieser Übung werden Sie die Fotosammlung- und die Informationslinks-Ordner und die darin enthaltenen Seiten löschen, die Eigenschaften von bestehenden Seiten ändern sowie einen Ordner und eine Seite einfügen. VERWENDEN SIE die Beispielwebsite Kap06, die Sie in der vorherigen Übung erstellt haben. ÖFFNEN SIE die Beispielwebsite Kap06, falls diese noch nicht geöffnet ist. 146

7 Eine Website mithilfe einer Vorlage erstellen 6 1 Klicken Sie im oberen Bereich des Arbeitsbereichs auf Website, um zur Website- Ansicht zu wechseln. 2 Klicken Sie in der Ordnerliste den Ordner photo_gallery mit der rechten Maustaste an und klicken Sie dann im Kontextmenü auf Löschen. Klicken Sie im Meldungsfeld Löschen bestätigen auf Ja. Wiederholen Sie diesen Schritt für den Ordner information_links. 3 Doppelklicken Sie in der Ordnerliste auf den Ordner about, um dessen Inhalte anzuzeigen. In diesem Ordner befindet sich eine Datei mit dem Namen about.htm. 4 Klicken Sie mit der rechen Maustaste auf about.htm und wählen Sie im Kontextmenü den Befehl Umbenennen und benennen Sie die Datei in default.htm um. Klicken Sie im Meldungsfeld Umbenennen, in dem Sie gefragt werden, ob Sie alle verlinkten Seiten aktualisieren möchten, auf Ja. 5 Klicken Sie die umbenannte Datei default.htm mit der rechten Maustaste an und klicken Sie dann auf Eigenschaften. 6 Ändern Sie im Dialogfeld Eigenschaften von default.htm den ursprünglichen und nicht sehr aussagekräftigen Seitentitel von Über in Über Name der Website oder Über Name des Unternehmens ab. TIPP Sie können die Ergebnisse, die Suchmaschinen anzeigen, optimieren, indem Sie den Namen des Unternehmens, der Person bzw. der Organisation in den Seitentitel einfügen. Um die Suchergebnisse für bestimmte geografische Gebiete zu verbessern, ist es sinnvoll, den Namen des Unternehmens bzw. der Person, die 147

8 6 Eine Website mithilfe einer Vorlage erstellen vollständige Anschrift sowie die Telefonnummer am Ende (im Fußbereich) jeder Seite einzufügen. 7 Klicken Sie im Dialogfeld Eigenschaften von default.htm auf OK. 8 Wiederholen Sie die Schritte 3 bis 7, um die Dateien umzubenennen, die in der folgenden Tabelle aufgeführt sind. Ändern Sie dann die Seitentitel ab, damit sie zu der Website passen, die Sie erstellen, oder verwenden Sie die in der Tabelle vorgeschlagenen Titel. Ordner Datei Titel calender calendar.htm Kalender: Name der Website contact contact.htm Kontakt: Name der Website faq faq.htm Frequently Asked Questions (Häufig gestellte Fragen): Name der Website news news.htm Nachrichten: Name der Website Nun werden Sie innerhalb der Website einen weiteren Ordner und eine neue Seite erstellen. Neues Dokument 9 Klicken Sie in der Ordnerliste den Stammordner an. Klicken Sie auf der Symbolleiste auf den Pfeil der Schaltfläche Neues Dokument und dann auf Ordner. Expression Web 2 erstellt einen neuen Ordner mit dem Namen Neuer Ordner und markiert den Ordnernamen, sodass Sie ihn ändern können. 10 Geben Sie products ein und drücken Sie die ( )-Taste. Damit Inhalte angezeigt werden, wenn ein Websitebesucher den Ordner products öffnet, müssen Sie in dem Ordner eine Standardinhaltsdatei erstellen. 11 Klicken Sie in der Symbolleiste auf die Schaltfläche Neues Dokument. Expression Web 2 erstellt eine leere Webseite mit dem Namen Ohne_Titel_1.html. 12 Klicken Sie in der Symbolleiste auf die Schaltfläche Speichern. Speichern 13 Wechseln Sie im Dialogfeld Speichern unter zum Ordner products. Geben Sie in das Textfeld Dateiname default.htm ein. 148

9 Eine Website mithilfe einer Vorlage erstellen 6 14 Klicken Sie im Dialogfeld Speichern unter auf Titel ändern und geben Sie dann einen Seitentitel wie Produkte: Name der Website ein. Klicken Sie auf Speichern. Beachten Sie, dass diese Seite keine optische Verwandtschaft mit den anderen Seiten dieser Website aufweist. Dies liegt daran, dass diese Seite nicht mit einer dynamischen Webvorlage verknüpft ist. 15 Zeigen Sie im Menü Format auf Dynamische Webvorlage und klicken Sie dann auf Dynamische Webvorlage anfügen. 16 Wechseln Sie im Dialogfeld Dynamische Webvorlage anfügen zu dem Ordner mit der dynamischen Webvorlage master.dwt der Website und markieren Sie sie. 149

10 6 Eine Website mithilfe einer Vorlage erstellen 17 Klicken Sie auf Öffnen, um das Dialogfeld zu schließen und die ausgewählte dynamische Webvorlage mit der Webseite zu verknüpfen. Klicken Sie im Meldungsfeld, in dem die Aktualisierung bestätigt wird, auf Schließen. Die gerade erstellte Seite ist nun mit der richtigen Vorlage verknüpft und ihr Aussehen und Layout ist nun mit allen anderen Seiten der Website identisch. 18 Klicken Sie auf Speichern, um die Änderungen zu sichern. ACHTEN SIE DARAUF, dass die Website Kap06 für die folgende Übung geöffnet bleibt. Sie haben soeben den großen Vorteil von der Verwendung dynamischer Webvorlagen zum Steuern des Layouts von Webseiten gesehen: Es besteht keine Gefahr, dass das Aussehen der Seiten, die mit einer dynamischen Webvorlage verknüpft sind, inkonsistent ist. Außerdem ist es mit dynamischen Webvorlagen einfach, globale Elemente, wie die Navigation, zu warten, was Sie in der nächsten Übung sehen werden. Die dynamische Webvorlage einer Website ändern Alle Websitevorlagen, die Expression Web 2 zur Verfügung stellt, verwenden eine dynamische Webvorlage. Hierfür gibt es gute Gründe: Es ist fast eine zwingende Notwendigkeit, dass Webdesigner heutzutage irgendeine Form von Vorlagensystem benutzen, gleichgültig ob es sich dabei um die Masterseiten von ASP.NET handelt, 150

11 Eine Website mithilfe einer Vorlage erstellen 6 eine dynamische Webvorlage oder eine andere Art von serverseitigen Vorlagen, wie die Smarty Template Engine ( bei der es sich um ein Open-Source- Vorlagensystem für PHP-Seiten handelt. Vor dem Erscheinen von Expression Web 2 hat Software für die Bearbeitung von Websites proprietäre Designs, gemeinsame Randbereiche und verschiedene andere komplizierte Mechanismen verwendet, um das Layout und die Darstellung der Seiten innerhalb einer Website zu steuern. Die Möglichkeiten, die die dynamische Webvorlagen von Expression Web 2 bieten, können noch immer Zeit sparen, da die Vorlagen auf Ihrem lokalen Computer angewendet werden, und zwar bevor die Website veröffentlicht wird; daher werden hierfür auch keine proprietären Serverfeatures benötigt. In dieser Übung werden Sie die dynamische Webvorlage bearbeiten, um die Änderungen an der Navigation zu berücksichtigen, die Sie in den vorhergehenden Übungen vorgenommen haben. Außerdem werden Sie einen Link für die Seite Produkte ergänzen, die Sie erstellt haben, und in den Kopfzeilenbereich ein Logo einfügen. VERWENDEN SIE die Beispielwebsite Kap06, die Sie in der vorherigen Übung geändert haben. ÖFFNEN SIE die Beispielwebsite Kap06, falls diese noch nicht geöffnet ist. 1 Doppelklicken Sie in der Ordnerliste auf die Datei master.dwt, die sich im Stammordner der Website befindet, um sie zur Bearbeitung in Expression Web 2 zu öffnen. 2 Klicken Sie in der Designansicht in der Navigationsleiste an der linken Seite der Seite auf Fotosammlung. Beachten Sie, dass in der Leiste für die Direktauswahl von Tags zu erkennen ist, dass Sie sich nicht nur innerhalb eines <a>-tags befinden, sondern auch innerhalb eines <li>-listenelements, da es sich bei der Navigation für diese Vorlage um eine unsortierte Liste handelt. 151

12 6 Eine Website mithilfe einer Vorlage erstellen 3 Klicken Sie in der Leiste für die Direktauswahl von Tags auf <li>, um das <a>-tag sowie das enthaltene <li>-tag auszuwählen. Drücken Sie (Entf), um den Link zu löschen. 4 Wiederholen Sie die Schritte 2 und 3 für das Listenelement und den Link für die Seite mit dem Titel Hyperlinks. Die beiden Seiten, die Sie gelöscht haben, werden aus der Navigation entfernt. Als Nächstes werden Sie einen Link für die neue Seite Produkte einfügen. 5 Klicken Sie in der Designansicht hinter den letzten Buchstaben des Wortes Privat im Navigationsbereich der Seite und drücken Sie ( ), um so eine neue Zeile und ein neues <li>-tag zu erhalten. Tippen Sie Produkte ein, markieren Sie das eingegebene Wort, klicken Sie es mit der rechten Maustaste an und wählen Sie im Kontextmenü den Befehl Hyperlink. Wechseln Sie im Dialogfeld Hyperlink einfügen zum Ordner products und klicken Sie die Datei default.htm an. 152

13 Eine Website mithilfe einer Vorlage erstellen 6 6 Klicken Sie im Dialogfeld Hyperlink einfügen auf OK, um das Dialogfeld zu schließen und den Hyperlink einzufügen. 7 Klicken Sie im Designausschnitt im unteren Bereich der Seite vor das Verkettungszeichen ( ), das sich nach dem Eintrag Hyperlinks befindet. Erweitern Sie die Markierung nach links bis einschließlich des Verkettungszeichens, das nach dem Eintrag Kalender steht, und drücken Sie (Entf), um die Links zu den gelöschten Seiten aus der unteren Linkleiste zu entfernen. 8 Klicken Sie hinter das Verkettungszeichen nach dem Eintrag Privat, geben Sie ein Leerzeichen ein, tippen Sie Produkte, geben Sie ein weiteres Leerzeichen ein und drücken Sie (AltGr)+(<), um ein weiteres Verkettungszeichen einzufügen. 9 Markieren Sie das Wort Produkte und achten Sie darauf, keine Leerzeichen in die Auswahl einzufügen. Klicken Sie die Markierung mit der rechten Maustaste an und klicken Sie im Kontextmenü auf Hyperlink. Wechseln Sie im Dialogfeld Hyperlink einfügen zum Ordner products und klicken Sie die Datei default.htm an. 10 Klicken Sie im Dialogfeld Hyperlink einfügen auf OK, um das Dialogfeld zu schließen und den Hyperlink einzufügen. 11 Markieren Sie in der Ordnerliste den Ordner images. Zeigen Sie im Menü Datei auf Importieren und klicken Sie dann auf Datei. 153

14 6 Eine Website mithilfe einer Vorlage erstellen 12 Klicken Sie im Dialogfeld Importieren auf Datei hinzufügen. Wechseln Sie im Dialogfeld Fügt Datei zur Importliste hinzu zum Ordner Dokumente\Microsoft Press\ Expression Web 2 Training\Dateien, markieren Sie die Dateien logo.jpg und BGlogo.jpg und klicken Sie dann auf Öffnen, um diese Dateien in die Importliste einzufügen. 13 Klicken Sie auf OK, um diese Dateien in den Ordner images Ihrer Website zu importieren. 14 Klicken Sie in der Designansicht ganz am Anfang des H1-Elements, das den Text Organisation enthält. Zeigen Sie im Menü Einfügen auf Grafik und klicken Sie auf Aus Datei. 15 Wechseln Sie im Dialogfeld Bild zum Ordner images, klicken Sie die Datei logo.jpg an und klicken Sie dann auf Einfügen. Geben Sie, wenn das entsprechende Dialogfeld angezeigt wird, einen beschreibenden alternativen Text ein und klicken Sie dann auf OK, um das Dialogfeld zu schließen und das Bild einzufügen. Beachten Sie, dass sowohl die Grafik als auch das H1-Element, in dem sie enthalten ist, zentriert ausgegeben werden. 154

15 Eine Website mithilfe einer Vorlage erstellen 6 16 Klicken Sie die Grafik mit der rechten Maustaste an und klicken Sie auf Bildeigenschaften. Ändern Sie auf der Registerkarte Darstellung die Umbruchart in Links ab und klicken Sie dann auf OK, um das Dialogfeld zu schließen. Das Logo befindet sich nun links neben den Textelementen im oberen Bereich der Seite. 17 Speichern Sie die Seite. Sie werden in einem Meldungsfeld gefragt, ob Sie alle Seiten aktualisieren wollen, die an die dynamische Webvorlage angehängt sind. Klicken Sie auf Ja. 155

16 6 Eine Website mithilfe einer Vorlage erstellen 18 Öffnen Sie die Datei default.html aus dem Stammordner und lassen Sie sie in der Browservorschau anzeigen. Überprüfen Sie die Links und das Layout und vergewissern Sie sich, dass die an der dynamischen Webvorlage vorgenommenen Änderungen in den Seiten vorhanden sind, die die Vorlage verwenden. ACHTEN SIE DARAUF, dass die Website Kap06 für die folgende Übung geöffnet bleibt. Wenn Sie in dieser Übung eine reale Website erstellt hätten, würden Sie noch an anderen Elementen arbeiten und beispielsweise den Text der Überschriften ändern, möglicherweise in die Navigation Grafiken oder andere Elemente einfügen und weitere gewünschte Änderungen vornehmen. Sie sollten jedoch nun mit der Verwendung von dynamischen Webvorlagen so weit vertraut sein, dass Sie die Aufgaben, die zum Erstellen einer professionell anmutenden Website erforderlich sind, selbstständig durchführen können. 156

17 Eine Website mithilfe einer Vorlage erstellen 6 Die Cascading Stylesheets einer Website verändern Als Ergänzung zu den Arbeiten an der Darstellung der Website, die Sie in der vorherigen Übung durch Änderungen an der dynamischen Webvorlage vorgenommen haben, wollen Sie möglicherweise noch Änderungen an den Farben, dem Hintergrund oder anderen, die Darstellung beeinflussenden Elementen der Vorlage durchführen, die durch die Cascading Stylesheets der Website beeinflusst werden. In dieser Übung werden Sie den Hintergrund des oberen Banners verändern, damit dieses optisch interessanter aussieht. Sie werden das Verhalten der Links in der unteren Navigationsleiste verändern und Sie werden mit zusätzlichen Stylesheets experimentieren, die Sie im Ordner styles der Website finden und die von Expression Web 2 zur Verfügung gestellt werden. VERWENDEN SIE die Beispielwebsite Kap06, die Sie in der vorherigen Übung geändert haben. ÖFFNEN SIE die Beispielwebsite Kap06, falls diese noch nicht geöffnet ist. 1 Öffnen Sie die Datei master.dwt, die sich im Stammordner der Website befindet. Zeigen Sie im Menü Format auf CSS-Stylesheets und klicken Sie auf Stylesheetverknüpfungen verwalten. Das Dialogfeld Link zu Stylesheet wird angezeigt. Standardmäßig ist die dynamische Webvorlage der Website mit style2.css im Unterordner styles verknüpft. 2 Markieren Sie styles/style2.css und klicken Sie auf Entfernen. Klicken Sie dann auf Hinzufügen, wechseln Sie zum Ordner styles und klicken Sie die Datei styles1.css an. Klicken Sie auf OK, um das Dialogfeld zu schließen und zur Seite zurückzukehren. 157

18 6 Eine Website mithilfe einer Vorlage erstellen 3 Klicken Sie im Menü Datei auf Alle speichern. Lassen Sie die Aktualisierungen der Seiten vornehmen, die die dynamische Webvorlage verwenden, und öffnen Sie anschließend die Datei default.html aus dem Stammordner der Website. Es ist verblüffend, wie Sie das Ausstehen jeder einzelnen Seite innerhalb einer Website ändern können, ohne dazu eine einzige Zeile HTML-Code in den Seiten anpassen zu müssen. 4 Schließen Sie das Browserfenster und kehren Sie zu Expression Web 2 und der dynamischen Webvorlage zurück. Wiederholen Sie die Schritte 2 und 3, verknüpfen Sie jedoch diesmal die Datei style3.css. 158

19 Eine Website mithilfe einer Vorlage erstellen 6 5 Nachdem Sie sich angesehen haben, wie die Website mit dem Stylesheet style3.css aussieht, schließen Sie den Browser, kehren zu Expression Web 2 zurück und ändern das Stylesheet wieder auf style2.css ab, das ursprünglich verwendet wurde. TIPP Alle Vorlagen, die sich im Lieferumfang von Expression Web 2 befinden, enthalten mehrere Stylesheets. Wenn Sie eine dieser Vorlagen verwenden, sollten Sie auch die verfügbaren Stylesheets ausprobieren. Sie finden diese immer im Ordner styles. Wenn Sie sich anschauen wollen, was andere Websiteentwickler mit Stylesheets anstellen, können Sie einmal die Website besuchen. Dort finden Sie eine HTML-Seite sowie Dutzende von Benutzern zur Verfügung gestellte Stylesheets, mit denen diese HTML-Seite formatiert wird. Einige der Stylesheet-Dateien sind einfach umwerfend, aber sie verdeutlichen alle, welch unterschiedliche Effekte sich durch den Einsatz von Cascading Stylesheets bei HTML-Dateien erzielen lassen. 6 Klicken Sie in der Designansicht die Grafik des Logos an, das Sie in der vorherigen Übung eingefügt haben, und drücken Sie (Entf). Klicken Sie in der Leiste für die Direktauswahl von Tags auf <div#masthead>. 7 Klicken Sie im Aufgabenbereich Formatvorlagen verwalten den zweiten <#masthead>-eintrag mit der rechten Maustaste an und klicken Sie dann auf Formatvorlage ändern. 159

20 6 Eine Website mithilfe einer Vorlage erstellen TIPP Der erste <#masthead>-eintrag ist für das Stylesheet layout.css. Expression Web 2 verwendet Einrückungen, um zu kennzeichnen, welche Formatvorlage sich in welchem Stylesheet befindet. Der Bereich Ausgewählte Formatvorlagenvorschau kann hilfreich sein, um festzustellen, mit welcher Auswahl und in welchem Stylesheet Sie derzeit arbeiten. 8 Klicken Sie in der Liste Kategorie auf Hintergrund und ändern Sie den Wert von background-color von #fafaff in #C0C0C0 ab. Klicken Sie neben backgroundimage auf Durchsuchen, wechseln Sie zum Ordner images und doppelklicken Sie auf die Datei BGlogo.jpg. Wählen Sie in der Liste background-repeat die Option norepeat aus und in der Liste (x) background-position die Option left. 160

21 Eine Website mithilfe einer Vorlage erstellen 6 9 Klicken Sie in der Liste Kategorie auf Position. Tippen Sie in das Feld height 115 ein und klicken Sie auf OK, um die Änderungen zu speichern und das Dialogfeld zu schließen. 10 Speichern Sie die Datei master.dwt. Das Dialogfeld Eingebettete Dateien speichern wird angezeigt. 11 Übernehmen Sie die voreingestellte Aktion Überschreiben und klicken Sie auf OK, um die Datei zu speichern und das Dialogfeld zu schließen. 12 Wenn Sie in einem Meldungsfeld gefragt werden, ob Sie alle Seiten aktualisieren wollen, die an die dynamische Webvorlage angehängt sind, klicken Sie auf Ja und klicken dann im anschließend angezeigten Bestätigungsdialogfeld auf Schließen. 13 Öffnen Sie die Seite default.htm aus dem Stammordner in der Browservorschau und schauen Sie sich an, wie das obere Banner nun dargestellt wird. 161

22 6 Eine Website mithilfe einer Vorlage erstellen Beachten Sie, dass sich das Logo nun an der linken Seite befindet und mit einem Farbverlauf versehen ist, der in die Hintergrundfarbe des DIV-Elements auf der rechten Seite übergeht. Beachten Sie außerdem, dass die Headerelemente nicht nach rechts verschoben sind, wie es in der vorherigen Übung der Fall war. 14 Schließen Sie das Browserfenster und kehren Sie zu Expression Web 2 und der dynamischen Webvorlage zurück. 15 Doppelklicken Sie in der geteilten Seitenansicht auf einen der Links im unteren Bereich der dynamischen Webvorlage der Website. Beachten Sie in der Leiste für die Direktauswahl von Tags, dass sich ein <a>-tag innerhalb eines <div#footer>-tags befindet. 162

23 Eine Website mithilfe einer Vorlage erstellen 6 16 Klicken Sie im Aufgabenbereich Formatvorlagen verwalten in der unteren rechten des Arbeitsbereichs den Eintrag #footer a:hover mit der rechten Maustaste an und klicken Sie dann auf Formatvorlage ändern. 17 Klicken Sie in der Liste Kategorie des Dialogfeldes Formatvorlage ändern auf Zeichen. Beachten Sie, dass unterhalb von text-decoration das Kontrollkästchen none eingeschaltet ist. 18 Schalten Sie die Kontrollkästchen underline und overline ein. Hierdurch wird das Kontrollkästchen none automatisch ausgeschaltet. 163

24 6 Eine Website mithilfe einer Vorlage erstellen 19 Klicken Sie auf OK, um die Formatvorlage zu ändern und das Dialogfeld zu schließen. 20 Kehren Sie zur dynamischen Webvorlage zurück und klicken Sie erneut einen der Links in der Fußzeile an. Klicken Sie im Aufgabenbereich Formatvorlagen verwalten den Eintrag #footer a mit der rechten Maustaste an und klicken Sie dann auf Formatvorlage ändern, um das gleichnamige Dialogfeld zu öffnen. Unterhalb von text-decoration ist das Kontrollkästchen underline eingeschaltet. 164

25 Eine Website mithilfe einer Vorlage erstellen 6 21 Schalten Sie das Kontrollkästchen none ein, klicken Sie auf OK, um das Dialogfeld zu schließen, und speichern Sie dann die dynamische Webvorlage. Übernehmen Sie im Dialogfeld Eingebettete Dateien speichern die Voreinstellungen. Lassen Sie anschließend die angehängten Dateien aktualisieren und klicken Sie im Bestätigungsdialogfeld auf Schließen. 22 Öffnen Sie die Seite default.htm aus dem Stammordner in der Browservorschau und schauen Sie sich das Ergebnis Ihrer Arbeit an. Achten Sie auf den Roll-Over-Effekt in der unteren Navigationsleiste. 165

26 6 Eine Website mithilfe einer Vorlage erstellen Nun zeigen die Links standardmäßig keine Unterstreichung mehr an; wenn Sie mit der Maus auf einen der Links zeigen, wird er mit einem Unter- und einem Überstrich dargestellt. SCHLIESSEN SIE die Beispielwebsite Kap06 und alle geöffneten Browserfenster. Wenn Sie nicht unmittelbar mit dem folgenden Kapitel weitermachen, beenden Sie Expression Web 2. Zusammenfassung Expression Web 2 enthält eine Reihe von Websitevorlagen, die Sie zum Erstellen Ihrer eigenen Websites verwenden können. Jede Vorlage enthält mehrere Stylesheets, von denen jedes die Website mit einem deutlich anderen Aussehen versieht. In allen Websitevorlagen von Expression Web 2 werden dynamische Webvorlagen verwendet. Durch Ändern der dynamischen Webvorlage lassen sich umfassende Änderungen an allen Seiten einer Website in einem Arbeitsschritt durchführen. 166

27 Eine Website mithilfe einer Vorlage erstellen 6 Änderungen an der dynamischen Webvorlage werden automatisch auf alle Seiten angewendet, die diese Webvorlage verwenden. Änderungen am Cascading Stylesheet für eine Websitevorlage spiegeln sich in allen Seiten dieser Website wider. 167

28 Grafiken und Vorlagen importieren und verwenden Seite 174 Eine dynamische Webvorlage erstellen Seite 179 Ihre Website organisieren Seite 189 Kapitel 7 auf einen Blick