Übung 1.4: Darstellung und Funktionsweise der Website entwerfen

Zeigen

Sie müssen Übung 1.3: Die Website mit Webseiten füllen abgeschlossen haben, bevor Sie mit der Gestaltung der 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. Andernfalls besteht die Gefahr, dass sich die Website am Ende aus mehreren zusammenhangslosen Webseiten zusammensetzt, die nicht organisiert sind und keine klar erkennbare grafische Beziehung zueinander aufweisen.

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 Bilder, die für jede Seite unterschiedlich sind. In einer Schablone können Sie so viele Inhaltsbereiche und gemeinsame Bereiche erstellen, wie Sie möchten.

Eine Seitenschablone steuert die Darstellung und Funktionsweise des Site-Layouts auf ganz andere Art und Weise als eine Formatvorlage. Weitere Informationen über den Unterschied zwischen Seitenschablonen und Formatvorlagen.

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:

Grundlegendes Site-Layout

Neue Seitenschablone erstellen

  1. Klicken Sie in der Sicht 'Projekt-Explorer' mit der rechten Maustaste auf Ihren Projektnamen, ClassifiedsTutorial.
  2. Wählen Sie im Popup-Menü Neu > Seitenschablonendatei aus. Der Assistent "Neue Seitenschablonendatei" wird geöffnet.
  3. Akzeptieren Sie den Standardordner (/ClassifiedsTutorial/WebContent). Hier wird sich Ihre Schablonendatei nach Erstellung befinden.
  4. 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.
  5. Stellen Sie sicher, dass HTML als Markup-Sprache ausgewählt ist.
  6. Wählen Sie Schablone mit JSP als Modell aus.
  7. Lassen Sie das Kontrollkästchen Erweiterte Optionen konfigurieren unmarkiert.
  8. 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 mindestens einen Inhaltsbereich hinzufügen müssen. Klicken Sie auf OK, um das Dialogfenster 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.
  1. Löschen Sie zunächst den Text Hier Inhalt einfügen.
  2. 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.
    1. Klicken Sie in der Sicht "Palette" auf den Drawer HTML-Tags, um ihn zu erweitern.
    2. Ziehen Sie die Komponente Tabelle von der Palette in die leere Schablone. Daraufhin wird der Dialog 'Tabelle einfügen' geöffnet.
    3. 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.
    4. Klicken Sie dann auf OK. Die Tabelle wird dann auf Ihrer Schablonenseite angezeigt.
  3. 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.
    1. Klicken Sie mit der rechten Maustaste auf die Tabelle und wählen Sie Eigenschaften aus, um die Sicht 'Eigenschaften' zu öffnen.
    2. Klicken Sie in der Sicht 'Eigenschaften' auf die Registerkarte Tabelle.
    3. Wählen Sie im Feld Ausrichtung die Option Zentriert aus. Hierdurch wird Ihre Tabelle auf der Seite zentriert.
    4. 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 Feldern Tabellenbreite und Tabellenhöhe den Wert 90 ein und wählen Sie das Prozentzeichen (%) aus.
    5. 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.
  4. 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. Da Sie für Ihre Site wahrscheinlich ein Logo oder eine Bannergrafik von einem Grafikdesigner entwickeln lassen, können Sie in dieser Schablone beliebigen Text als Platzhalter für das Banner einfügen.
    1. Wählen Sie die oberste Zelle der Tabelle aus.
    2. Wenn diese Zelle ausgewählt ist, geben Sie eine Höhe von 70 Pixel in der Registerkarte TD der Sicht 'Eigenschaften' an. 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.
    3. Setzen Sie in der Sicht 'Eigenschaften' auf der Registerkarte TD außerdem 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.
    4. Klicken Sie irgendwo in die oberste Zeile und geben Sie Willkommen bei den Kleinanzeigen! ein
    5. 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.
    6. 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.
    7. Klicken Sie dann auf OK.
    8. Um den Bannertext zu zentrieren, markieren Sie den Text erneut und klicken Sie auf Format > Ausrichten > Horizontal zentriert.
  5. 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.
    1. Wählen Sie die zweite Zelle der Tabelle aus.
    2. Setzen Sie diese Zelle auf die gleiche Größe wie die Bannerzelle, indem Sie eine Höhe von 70 Pixeln in der Sicht 'Eigenschaften' auf der Registerkarte TD eingeben.
  6. In der dritten Reihe soll sich Ihr Inhalt befinden. Sie müssen sicherstellen, dass der Inhalt auf das obere Ende der Zeile ausgerichtet ist.
    1. Wählen Sie die dritte Zelle der Tabelle aus.
    2. Wählen Sie in der Sicht 'Eigenschaften' auf der Registerkarte TD die Option Oben als Vertikale Ausrichtung aus.

Inhaltsbereich hinzufügen

Die Schablone muss einen Bereich aufweisen, in dem die Besonderheiten der einzelnen Seiten angezeigt werden können, wie z. B. die Suchergebnisse der Seite filtered_records oder das Formular zum Eingeben eines neuen Eintrags auf der Seite new_record. Nachdem Sie nun die gemeinsame Struktur und das Farbschema für die Site definiert haben, sind Sie bereit, einen Inhaltsbereich hinzuzufügen.
  1. Klicken Sie in der Sicht "Palette" auf den Drawer Seitenschablone.
  2. Ziehen 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.
  3. 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.
  4. Speichern Sie Ihre Änderungen an der Seitenschablone.

Ihre grundlegende Schablonenstruktur sollte nun folgendermaßen aussehen:

Grundlegende Seitenschablone.

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.

Nutzungsbedingungen | Feedback

(C) Copyright IBM Corporation 2000, 2004. Alle Rechte vorbehalten.