| |
|
|
Gestalten von Seitenvorlagen
Individuelle Seiteninhalte benötigen ebenfalls ein konsistentes Erscheinungsbild
|
| Nachdem Sie die Navigation Ihrer Site und das allgemeine Erscheinungsbild festgelegt haben, ist es an der Zeit, einige komplette Seiten zu erstellen. Aber bevor Sie damit anfangen, Massen von Inhalt planlos auf die Seite zu bringen, sollten Sie ein Grundgerüst entwickeln, wie diese Seiten aussehen sollen. Beginnen Sie mit der Homepage. |
|
Entwurf der Homepage
|
| Auf Ihrer Homepage sollten die Besucher sofort erfahren, welche Inhalte in der Site geboten werden, was sie anzubieten hat und wie sie aufgebaut ist. Einen rein visuellen Eindruck bietet dabei ein Grafik-orientierter "Splash-Bildschirm" , der dem Titelblatt eines Magazins entspricht und nur Links zu den wichtigsten Bereichen der Site aufweist. Wenn Sie möchten, können Sie auf dieser Seite auf die Navigationsleiste verzichten und Links im Bereich der Grafik anlegen. Achten Sie jedoch darauf, dass das Bild nicht größer als 600 x 400 Pixel ist, damit Besucher mit 640 x 480 Bildschirmen keinen Bildlauf ausführen müssen.
|
|
Homepage mit Splash-Bildschirm und einer Imagemap
Falls Sie mehr als ein Bild brauchen, um den Zweck Ihrer Site zu erklären, oder wenn Sie möchten, dass Besucher direkt auf die Inhalte zugreifen können, sollte Ihre Homepage eher einen Einführungscharakter haben und über ein Inhaltsverzeichnis verfügen. Lassen Sie die Navigationsleiste auf der Seite und machen Sie sich keine Gedanken darüber, dass die Besucher einen Bildlauf ausführen müssen.
|
Eine
Splash-Bildschirm-Homepage eignet sich gut für einen Online-Shop, für eine Site, die sich auf die Präsentation des Firmenimages konzentriert, oder für eine Site, deren Zweck leicht zu erkennen sein soll.
|
Homepage mit Navigationsleiste, bei der Informationen im Vordergrund stehen
|
Kombinieren Sie auf der Homepage Informationen und aussagekräftige Grafiken, um die wichtigsten Links hervorzuheben und zu beschreiben.
|
Entwurf von Seitenvorlagen
|
| Damit sich Besucher daran gewöhnen, wie Informationen präsentiert werden, muss das Layout ähnlicher Seiten innerhalb der Site gleich sein. Sie erreichen dies, indem Sie für jeden Seitentyp eine Standard- Vorlage entwerfen.
Sie benötigen eine Vorlage für Abschnittsseiten und eine für jede Themenart-Artikel, Produktkatalogseiten, usw. Überlegen Sie sich für jeden Seitentyp, welche Elemente die jeweiligen Seiten gemeinsam haben. In dieser Site beispielsweise haben Seiten -wie diese, die Sie gerade lesen- eine Überschrift und einen Untertitel, ein Bild, Artikel mit Unterüberschriften, eine kurze Liste mit Links und eine Spalte mit Highlights. Ordnen Sie die Elemente einmal für die Vorlage an und verwenden Sie diese Anordnung für ähnliche Seiten.
In NetObjects Fusion können Sie bereits fertige Vorlagen für Kalender, eine FAQ-Seite und eine News-Seite verwenden. Sie müssen dann nur noch die Inhalte durch Ihre eigenen ersetzen und die anderen gewünschten Änderungen durchführen. Die neue Seite übernimmt sogar Ihren SiteStyle. Falls Sie es besonders eilig haben, stehen Ihnen einige Vorlagen für eine komplette Site zur Verfügung. Informationen hierzu entnehmen Sie der Dokumentation über Vorlagen.
Kalender, der über eine Vorlage eingefügt wurde
|
Der Entwurf eines Standardlayouts für jeden Seitentyp bringt nicht nur den Besuchern ein einheitliches Erscheinungsbild, sondern macht es Ihnen viel leichter, später weitere Seiten zu erstellen.
|
Layout-Grundlagen
|
| In NetObjects Fusion kommen Inhalte, die nur auf einer bestimmten Seite zu sehen sind (sich also nicht im Master-Rahmen befinden), in die Layout-Fläche. Dort können Sie Text um Bilder herumlaufen lassen, Informationen in Tabellen formatieren, Spalten verwenden und Objekte pixelgenau positionieren. Fangen Sie mit dem Hinzufügen von Feldern, Bildern und anderen Objekten an und ziehen Sie sie an die gewünschte Position.
|
|
Textfelder und Bilder in der Layout-Fläche
|
Text verläuft innerhalb der Breite seines Feldes und fließt nach unten. Sie können einen Text ganz frei um Bilder herum verlaufen lassen, indem Sie das Bild in das Textfeld einbetten.
|
Unterschiedliche Browser haben ihre eigenen Methoden zum Darstellen von Elementen. Sie können sich aus diesem Grund nie absolut sicher sein, wie Ihre Seiten für den jeweiligen Besucher aussehen werden. Glücklicherweise bietet NetObjects Fusion einige Möglichkeiten, um die Ergebnisse zu optimieren:
- Richten Sie die Objekte an einer gemeinsamen Linie oder an dem oberen, unteren oder seitlichen Rand des Layouts aus, indem Sie von den Anordnungswerkzeugen der Eigenschaften-Palette Gebrauch machen.
- Wählen Sie die für Ihre Besucher und
Inhalte passende HTML-Ausgabemethode aus. NetObjects generiert dann den Code, der am besten in unterschiedlichen Browsern und Layouts funktioniert.
- Wenn Ihr Layout nur aus einer Spalte besteht, bei der Text um Bilder fließt, sollten Sie in Betracht ziehen, die gesamte Layout-Fläche zu einem einzigen großen Textfeld zu machen. Dies führt zu einem ökonomischen HTML-Code, der am besten in älteren Browsern (Version 3 und früher) funktioniert.
- Damit Text frei um eine Gruppe von Objekten fließt, die genau in einer bestimmten Relation zueinander positioniert sind (wie eine Bildercollage), ordnen Sie die Objekte in einem eigenen Minilayout (dem so genannten Layout-Bereich ) an und betten dieses in das Textfeld ein.
- Verwenden Sie Tabellen, um Elemente in Zeilen und Spalten aufzureihen, z. B. für eine Produktbeschreibung oder für Beschriftungen und Felder in einem Formular. Jede Tabellenzelle ist ein eigenes Textfeld, in das Sie Text eingeben und Bilder oder andere Objekte einfügen können. Beim Publizieren werden die Zellen sehr wahrscheinlich von jedem Browser wunschgemäß dargestellt. Tabellen bewirken größere HTML-Dateien. Setzen Sie sie also nur ein, wenn es wirklich nötig ist. Details hierzu erhalten Sie in der Dokumentation zu Tabellen.
|
Es ist wichtig, die
beste Layout-Strategie und die beste HTML-Ausgabemethode für Ihre Seiten zu wählen. Details hierzu finden Sie in der Dokumentation zur Kontrolle der veröffentlichten Ausgabe.
|
Tricks bei Layouts
|
| Sie können für eine Seite mehrere Layouts erstellen und hin und her wechseln, indem Sie aus der Dropdown-Liste (ganz unten im NetObjects Fusion Fenster) das Layout auswählen, das Sie ansehen möchten. Sie müssen nur vor der Veröffentlichung festlegen, welches Layout Sie verwenden möchten.
Wozu dient das? Hier einige Gründe:
- Probieren Sie verschiedene
Seiten-Designs aus. Sie können dann zwischen den unterschiedlichen Entwürfen wechseln, um zu sehen, welcher besser aussieht.
- Erstellen Sie unterschiedliche Layouts für verschiedene Sprachen, und publizieren Sie dann für jede Sprache eine jeweils unabhängige Version Ihrer Site. Sie können sogar von der BrowserLanguageRedirect-Komponente
von Apollon Gebrauch machen, um Besucher automatisch auf die entsprechende Sprachversion umzuleiten.
- Analog hierzu können Sie Layouts anfertigen, die auf bestimmte Browser-Versionen zugeschnitten sind. Falls eine Seite z.B. eine Aktion enthält, die bei älteren Browsern nicht funktioniert, erstellen Sie ein alternatives Layout ohne dieses Element. Veröffentlichen Sie für jeden Browser-Typ eine Version Ihrer Site und verwenden Sie dabei die Browser Redirect-Komponente von Apollon, um die Besucher
entsprechend umzuleiten.
|
Details zum Arbeiten mit mehreren Layouts erhalten Sie in der Dokumentation über Layouts.
|
Bevor Sie das
Design Ihrer Website abschließen, sollten Sie sich diese
Richtlinien ansehen, die Ihnen dabei helfen, dass Ihre Site
die unterschiedlichen Browser Ihrer Besucher unterstützt und die Vorteile von Cascading Style Sheets sinnvoll eingesetzt werden.
Weiter: Unterstützen Sie die
Browser Ihrer Besucher
|
|
|
 |
 |
 |
 |
|
