Übung 1.4: Darstellung und Funktionsweise der Website entwerfen
Sie müssen Übung 1.3:
Die Website mit Webseiten ausfüllen abgeschlossen haben, bevor Sie mit der Gestaltung Ihrer Website beginnen können.
Um eine Einheit darzustellen sollten die Webseiten, die zu einer Website gehören, ein ähnliches grafisches Design und Layout haben. Es sollte erkennbar sein, dass die einzelnen Seiten zusammengehören, damit die Website als Einheit wahrgenommen wird. Es hat sich in der Praxis bewährt, zunächst die Gestaltung der Website zu planen und erst anschließend die einzelnen Webseiten zu erstellen. Ansonsten kann es sein, dass am Ende Ihre Website aus verschiedenen zusammenhangslosen Seiten besteht, die nicht organisiert sind und keine offensichtliche grafische Verbindung miteinander haben.
Eine Seitenschablone ist die beste Art, eine einheitliche Darstellung und Funktionsweise für Ihre Website zu erstellen. Eine Seitenschablone ist eine einzelne Datei, die Sie verwenden, um gemeinsame Elemente auf allen Seiten Ihrer Site zu steuern. Nachdem Sie die Schablone auf die Seiten angewandt haben, können Sie den Aufwand zukünftiger Änderungen am Design minimieren, indem Sie diese Änderungen nur ein einziges Mal durchführen, nämlich in der Schablone. Diese Änderung wird dann auf alle Seiten angewandt, die diese Schablone verwenden.
Die Seitenschablone enthält gemeinsame Bereiche und Inhaltsbereiche. Ein gemeinsamer Bereich ist ein Bereich, den alle Seiten, die die Schablone verwenden, gemeinsam haben. Er ist vor allem für Elemente nützlich, die auf jeder Seite gleich sind, z.B. Banner und Navigationsbereiche. Die Inhaltsbereiche hingegen unterscheiden sich für jede Seite. Nachdem die Schablone auf einzelne Seiten angewandt wurde, können Sie die Inhaltsbereiche in diesen Seiten bearbeiten, um seitenspezifische Informationen hinzuzufügen. Die Inhaltsbereiche einer Seitenschablone beinhalten dann Seitenelemente wie z.B. Text und Abbildungen, die für jede Seite unterschiedlich sind. In einer Schablone können Sie so viele Inhaltsbereiche und gemeinsame Bereiche erstellen, wie Sie möchten.
Die Verwendung einer Seitenschablone steuert die Darstellung und Funktionsweise des Site-Layouts auf ganz andere Art und Weise als dies ein Style-Sheet tut. Weitere Informationen über die Unterschiede zwischen Seitenschablonen und Style-Sheets.
Im Rahmen dieses Lernprogramms werden wir eine Seitenschablone erstellen und dabei mehrere Inhaltsbereiche und gemeinsame Bereiche definieren, so dass die gesamte Kleinanzeigensite eine einheitliche Darstellung und Funktionsweise hat. Diese Seitenschablone stellt sicher, dass jede Seite dem folgenden Aufbau entspricht:
Neue Seitenschablone erstellen
- Klicken Sie in der Sicht "Projektnavigator" mit der rechten Maustaste auf Ihren Projektnamen,
ClassifiedsTutorial.
- Wählen Sie im Popup-Menü Neu > Seitenschablonendatei aus. Der Assistent "Neue Seitenschablonendatei" wird geöffnet.
- Akzeptieren Sie den Standardordner (/ClassifiedsTutorial/WebContent).
Hier wird sich Ihre Schablonendatei nach Erstellung befinden.
- Geben Sie im Feld "Dateiname" einen Namen für Ihre Schablonendatei ein. Nennen Sie die Datei für dieses Lernprogramm template. Beachten Sie, dass der vollständige Name der Ergebnisdatei template.jtpl ist.
- Stellen Sie sicher, dass HTML als Markup-Sprache ausgewählt ist.
- Wählen Sie Schablone mit Faces-Komponenten als
Modell aus.
- Lassen Sie das Kontrollkästchen Erweiterte Optionen konfigurieren unmarkiert.
- Klicken Sie auf Fertig stellen.
Die neue Schablone wird in Page
Designer geöffnet. Beim Öffnen einer leeren Schablone werden Sie von einem Dialog darauf hingewiesen, dass Sie der Schablone mindesten einen Inhaltsbereich hinzufügen müssen. Klicken Sie auf OK,
um den Dialog zu schließen.
Elemente zur leeren Schablone hinzufügen
Nachdem nun die Schablone erstellt wurde, müssen Sie der noch leeren Schablone Elemente hinzufügen.
- Löschen Sie zunächst den Standardinhaltsbereich. Sie sehen den Standardinhaltsbereich wenn Sie auf den StandardtextInhalte hier einfügen klicken. Die unsichtbaren Rahmen um den Inhaltsbereich herum werden angezeigt.
- Eine der einfachsten Arten, die Struktur einer Seitenschablone zu bestimmen, besteht in der Verwendung einer unsichtbaren Tabelle. Auf diese Art können Sie Bereiche der Seite bestimmen, die auf unterschiedliche Art genutzt werden sollen. Außerdem können sie die Platzierung von Objekten auf der Seite bestimmen.
- Klicken Sie in der Sicht "Palette" auf den Drawer HTML-Tags, um ihn zu erweitern.
- Ziehen Sie die Komponente Tabelle von der Palette in Ihre leere Schablone. Der Assistent "Tabelle einfügen" wird geöffnet.
- Für diese Schablone benötigen Sie drei Zeilen und eine Spalte. Geben Sie 3
in das Feld Zeilen und 1 in das Feld Spalten ein.
- Klicken Sie dann auf OK. Die Tabelle wird dann auf Ihrer Schablonenseite angezeigt.
- Zunächst erscheint die Tabelle als sehr klein. Sie müssen nun die Attribute der Tabelle bearbeiten, um Größe und Struktur der Tabelle anzupassen.
- Klicken Sie in der Sicht "Attribute" auf die Registerkarte Tabelle.
- Wählen Sie im Feld Ausrichtung die Option Zentriert aus. Hierdurch wird Ihre Tabelle auf der Seite zentriert.
- Sie müssen die Tabelle insgesamt vergrößern, damit die Struktur der Schablone sich abhängig von der Größe des Bildschirms, auf dem die Seite angezeigt wird, ausdehnt. Ansonsten erscheint die Struktur Ihrer Seiten mit einer fixierten Größe, wodurch sie auf großen Bildschirmen sehr klein, bzw. auf kleinen Bildschirmen sehr groß erscheinen könnte.Geben Sie in den Felder Tabellenbreite und Tabellenhöhe den Wert 90 ein und wählen Sie das Prozentzeichen (%) aus.
- Da Sie nicht möchten, dass der Rahmen Ihrer Tabelle auf Ihren Seiten angezeigt wird, müssen Sie ausserdem noch im Feld Rahmen den Wert auf 0 Pixel einstellen. Page Designer zeigt unsichtbare Tabellenrahmen als gepunktete Linien an.
- Da Sie an den Anfang jeder Seite ein Banner mit dem Namen der Website sowie grafischen Elementen, die die Seite zusammenhalten, einfügen möchten, müssen Sie den Bereich hierfür in dieser Layout-Tabelle formatieren. Obwohl Sie wahrscheinlich ein Logo oder eine Bannergrafik für Ihre Site von einem Grafik-Designer entwickeln lassen würden, können Sie auch einfach Text als Platzhalter für das Banner in diese Schablone einfügen.
- Wählen Sie die oberste Zelle der Tabelle aus.
- Wenn diese Zelle ausgewählt ist, bestimmen Sie in der Sicht "Attribute" in der Registerkarte Zelle eine Höhe von 70 Pixeln. Wenn Sie beispielsweise eine Schablone erstellen müssten, in der ein Banner Platz finden muss, das Ihr Grafik-Designer gerade entwirft, könnten Sie die Zelle so einrichten, dass sie genau die gleiche Größe hat wie die Bannergrafik.
- Setzen Sie ausserdem auf der Registerkarte Zelle der Sicht "Attribute" die Farbe
im Pulldown-Menü auf Grau. Sollten Sie eine andere Farbe wünschen, könnten Sie das Pipetten-Tool verwenden, um eine Farbe irgendwo auf dem Bildschirm auszusuchen, oder Sie könnten den RGB-Wert (z.B. #808080 für grau) in das Feld eingeben.
- Klicken Sie irgendwo in die oberste Zeile und geben Sie Willkommen bei den Kleinanzeigen! ein
- Da der Standardtext zu klein und schwer leserlich ist, müssen Sie die Schriftart vergrößern. Markieren Sie den gesamten Ausdruck und klicken Sie auf Format
> Schriftart.
- Wählen Sie Courier als Schriftart aus, um der Site ein zeitungsähnliches Layout zu geben. Wählen Sie 6 als Größe aus und wählen Sie Weiß als Farbe aus, um einen Kontrast zum grauen Hintergrund dieser Zelle zu bilden.
- Klicken Sie dann auf OK.
- Um den Bannertext zu zentrieren, markieren Sie den Text erneut und klicken Sie auf Format
> Ausrichten > Horizontal zentriert.
- Um Benutzern die Möglichkeit zu bieten, unterschiedliche Seiten zu besuchen, benötigen Sie eine Reihe von Links unterhalb des Banners. An einer späteren Stelle werden Sie Registerkarten für die Navigation hinzufügen. Formatieren Sie zunächst die zweite Zeile lediglich so, dass Platz für die Schaltflächen bleibt.
- Wählen Sie die zweite Zelle der Tabelle aus.
- Setzen Sie diese Zelle auf die gleiche Größe wie die Bannerzelle, indem Sie eine Höhe von 70 Pixeln in der Sicht "Attribute" auf der Registerkarte Zelle eingeben.
- In der dritten Reihe soll sich Ihr Inhalt befinden. Sie müssen sicherstellen, dass der Inhalt auf das obere Ende der Zeile ausgerichtet ist.
- Wählen Sie die dritte Zelle der Tabelle aus.
- Setzen Sie auf der Registerkarte Zelle der Sicht "Attribute" die Vertikale Ausrichtung auf Oben.
Inhaltsbereich hinzufügen
Sie benötigen einen Bereich in der Schablone, in dem die Spezifikationen der einzelnen Seiten angezeigt werden können, wie z.B. die Suchergebnisse auf der Seite filtered_records oder das Formular, das auf der Seite create_record zur Erstellung einer neuen Kleinanzeige verwendet wird. Nachdem Sie nun die gemeinsame Struktur und das Farbschema für die Site definiert haben, sind Sie bereit, einen Inhaltsbereich hinzuzufügen.
- Klicken Sie in der Sicht "Palette" auf den Drawer Seitenschablone.
- Ziehen und übergeben Sie eine Komponente Inhaltsbereich in die dritte Zeile. An dieser Stelle werden nun die einzelnen Seiten spezielle Inhalte liefern. Der Assistent "Inhaltsbereich für Seitenschablone einfügen" wird geöffnet.
- Sie können den standardmäßigen Inhaltsbereichsnamen bodyarea
akzeptieren, indem Sie auf OK klicken. Im Inhaltsbereichsnamen können Sie zu Organisationszwecken für unterschiedliche Inhaltsbereiche verschiedene Namen angeben. Wenn Sie beispielsweise eine Site entwerfen, bei der jede Seite zwei Inhaltsbereiche enthält, könnten Sie den Bereich mit dem Hauptinhalt bodyarea und den Bereich mit den Suchergebnissen searcharea nennen. Dies ist auch hilfreich, wenn Sie Ihre Seitenschablone auf Seiten anwenden, die bereits bestehen, da Sie dann Bereiche der bestehenden Seiten über Markup-Tags bestimmten Inhaltsbereichen der Schablone zuordnen können. Der Inhaltsbereich wird in die Tabellenzelle eingefügt.
- Speichern Sie Ihre Änderungen an der Seitenschablone.
Ihre grundlegende Schablonenstruktur sollte folgendermaßen aussehen:
Sie haben nun eine Seitenschablone erstellt, in der mehrere gemeinsame Bereiche und Inhaltsbereiche für Ihre Website definiert sind. Sie sind nun bereit, um mit Übung 1.5: Eine Seitenschablone auf die Website anwenden zu beginnen.