Einleitung

Und weiter geht es auf unserer Entdeckungsreise durch den Tees X5 Store, die Beispielsite, die wir erstellt haben, um die neuen Funktionen der Version 9 von WebSite X5 zu erläutern.

Wir haben bereits gesehen, wie einem Template immer im Vollbildmodus und je nach Seite oder Bereich ein anderer Hintergrund zugewiesen werden kann [http://answers.websitex5.com/post/4455 ].

Aber es gibt noch viele weitere interessante Dinge über Templates zu sagen, bevor wir das Argument schließen. Verlieren wir also keine Zeit und beginnen wir!

Das Stichwort lautet: Individuelle Gestaltung

Nachdem wir ein Template ausgewählt oder, wie in unserem Fall, mit der Funktion Individuelles Template, ein Grafikmodel selbst erstellt haben, können wir den internen Editor nutzen, um alle gewünschten Elemente in den Header bzw. die Fußzeile unseres Templates einzufügen.

ACHTUNG: Bitte unterschätzen Sie die Wichtigkeit dieser Arbeit nicht! Das Template ist nicht nur Grafik oder ein simpler Hintergrund, der unsere Website „schmücken" soll. Natürlich ist die Ästhetik von Bedeutung, aber das Template ist auch ein wichtiger Bestandteil der Benutzeroberfläche, über die die Website-Besucher mit unserer Website interagieren. Daher sollte es nicht nur ästhetisch ansprechend, sondern auch übersichtlich, vollständig und zweckmäßig gestaltet sein.   

Unter der Berücksichtigung, dass der Header und die Fußzeile des Templates Bereiche sind, die im Gegensatz zu den Inhalten bei der Seitennavigation immer sichtbar bleiben, beginnen wir damit, einige wesentliche Elemente der Benutzeroberfläche unserer Website einzufügen.

Header: Logo und Slogan

Natürlich ist die Überschrift ein bedeutungsvolles Element, das im Header einer Website, ebenso wenig wie auf dem Einband eines Buches, fehlen darf. Handelt es sich um eine persönliche Internetseite, kann als Titel der Name des Autors angegeben werden. Bei gewerblichen Websites hingegen sollten im Header ein Logo, ein Name und, sofern verfügbar, ein Slogan enthalten sein. Wurden diese drei Elemente nicht bereits in einem Bild vereint, können wir sie auch als einzelne Bild- und Textbausteine einfügen.

Für die Website Tees X5 Store sind wir im Bereich Header innerhalb des Dialogfensters Gestaltung des Templates folgendermaßen vorgegangen:

• Mit dem Befehl Bild einfügen haben wir die Bilddatei logo.png importiert und angemessen positioniert. Um die Option Transparenz zu nutzen, haben wir eine Datei im Format .png gewählt, da dieses Format u.a. diese Option unterstützt: Auf diese Weise überlagert die Schrift perfekt den Hintergrund des Templates. Alternativ hätte die Transparenz einer bestimmten Farbe auch mit der entsprechenden Programmoption realisiert werden können.
• Mit der Funktion Text einfügen haben wir den Slogan realisiert (Your Favourite Tee Store). Für die Textfarbe haben wir das Werkzeug Pipette im Fenster Farbe genutzt, um exakt den gleichen Farbton des Logos zu erzielen. Anschließend haben wir aus den verfügbaren Effekten einen Schatten ausgewählt, um dem Schriftzug etwas Tiefe zu verleihen.

Die Positionierung des Logos neben dem Gesicht des auf dem Hintergrund des Templates abgebildeten Mädchens ist keineswegs zufällig: Unser Blick wird automatisch von Gesichtern und insbesondere von Augen angezogen. Außerdem sind wir es gewohnt, mit dem Lesen in der oberen linken Ecke der Seite (oder des Bildschirms) zu beginnen. Das heißt, die Position, die wir für das Logo und den Slogan gewählt haben, ist außerordentlich strategisch und zieht die Aufmerksamkeit der Leser an. Dies ist nur ein Beispiel dafür, wie wir den Gestaltungsprozess unserer Website durchdenken müssen: Die Wahl der Komponenten, deren Positionen und Farben sowie aller Elemente, die das endgültige Aussehen unserer Seiten bestimmen, sollte auf der Grundlage von Überlegungen wie diesen erfolgen.

Header: Suchfeld

Wenn unsere Website diverse Inhalte hat, einen Blog mit vielen interessanten Beiträgen oder einen Online-Shop mit einem umfassenden Produktkatalog aufweist, darf eine interne Suchfunktion auf keinen Fall fehlen, denn nicht alle Besucher benutzen die Navigationsmenüs, um sich auf einer Website zu bewegen.  Viele bevorzugen interne Links und ebenso viele wollen keine Zeit verlieren und direkt zu den Inhalten von Interesse gelangen und nutzen hierfür die Suchmaschine. Bei der Gestaltung sollten wir anstreben, jedem die Möglichkeit zu geben, die gewünschten Informationen auf die von ihm bevorzugte Weise zu erhalten.

Mit WebSite X5 ist das Einfügen einer internen Suchmaschine wirklich sehr einfach. Für die Website Tees X5 Store sind wir im Fenster Gestaltung des Templates | Header folgendermaßen vorgegangen:

• Zunächst wird das Suchfeld eingefügt, indem auf die gleichnamige Schaltfläche geklickt wird.
• Da wir das Suchfeld grafisch spezifisch gestalten wollten, haben wir es zuvor bereits als Teil des Bildes für das Template entworfen. Anschließend haben wir das eingefügte Suchfeld verkleinert (auf 168x21 Pixel) und so positioniert, dass es den vorbereiteten Bereich (Koordinaten 775,14) überlagert.
• Um das eingefügte Suchfeld auszublenden, muss die Option Hintergrund für das Suchfeld auf Transparent gestellt werden.
• Damit der Text im Suchfeld lesbar ist, haben wir die Textfarbe Weiß eingestellt.
• Für die transparente Schaltfläche „Suchen”, die die bereits im Hintergrundbild enthaltene Lupe überlagert, haben wir den mit der Option Button-Beschriftung eingegebenen Text durch drei Punkte ersetzt und diesen mit der Funktion Pipette für die Textfarbe des Buttons den gleichen Grauton zugewiesen, den auch das grafische Element hat, auf dem sie positioniert sind.

Um die interne Suchmaschine zu aktivieren, sind keine weiteren Schritte notwendig. Mit dem Update auf Version 9.0.4. wurde die Suchmaschine erheblich ausgebaut. Weitere Informationen hierzu finden Sie im Bereich FAQ: http://answers.websitex5.com/post/6658

Anbei noch ein kleines EXTRA: Drehendes Banner im Header des Templates

Eine sehr interessante Option, die wir für die Website Tees X5 Store nutzen konnten, ist die Erstellung eines Portfolios von Bannern, die jeweils nur auf bestimmten Seiten angezeigt werden. So konnten wir beispielsweise ein Werbebanner für Modeschmuck in die Seiten des Shops einfügen, auf denen Damenmode angeboten wird, sowie ein Werbebanner für Werkzeug in die Seiten mit den Herren-Shirts.

Öffnen Sie hierfür im Fenster Gestaltung des Templates | Header und:

• Fügen Sie eine Diashow ein, indem Sie auf die gleichnamige Schaltfläche klicken.
• Importieren Sie mit den jeweiligen Schaltflächen alle Bilder, die Sie für die Zusammenstellung der gewünschten Banner benötigen (bitte berücksichtigen Sie, dass sich ein Banner  entweder aus einem einzelnem Bild, sich aber auch aus einer kurzen Bildsequenz zusammensetzen kann) und bringen Sie diese in die richtige Reihenfolge.
• Wählen Sie die in die Diashow eingefügten Bilder einzeln aus und legen Sie im Dialogfenster Effekt folgende Einstellungen jeweils fest: Einblendeffekt und Anzeigedauer (Registerkarte Effekttyp);  eventuelles Zoomen / Verschieben (Registerkarte Zoom und Bewegung); die Seiten, auf denen das Banner angezeigt werden soll (Aktivierung des Kontrollkästchens neben dem Seitennamen auf der Map der Registerkarte Seite).
• Sofern erforderlich, kann auch eine spezifische Verknüpfung zu jedem einzelnen Bild der Diashow eingestellt werden: Hierzu das Bild auswählen, die Schaltfläche Link zuweisen anklicken und in dem eingeblendeten Dialogfenster die gewünschte Option aktivieren.

Fußzeile: Schaltflächen für Bereiche

Die Fußzeile von Websites ist ein Bereich, der heute mit besonderer Sorgfalt gestaltet wird. Erkennbar ist dies daran, dass diesem immer mehr Raum reserviert wird und  dieser immer mehr Informationen und Funktionen aufweist.

In die Fußzeile unserer Website von Tees X5 Store haben wir 4 große Schaltflächen eingefügt, die den Website-Besucher sofort auf unseren Interessebereicht aufmerksam macht  (Shop und Aktionsangeboten) sowie dessen eigenen Interessebereich widergibt (Hilfe und Facebook-Link).

Hierfür sind wir folgendermaßen vorgegangen:

• Zunächst haben wir für jede Schaltfläche zwei Bilder vorbereitet: jeweils eins für den gedrückten und den nicht gedrückten Button.
• Unter Gestaltung des Templates | Fußzeile haben wir auf die Schaltfläche Bild einfügen geklickt und die Datei shop.png von dem nicht gedrückten Button importiert.
• Mit dem weiterhin markierten Bild shop.png haben wir die Option Bild bei Mauskontakt verwendet, um das Bild shop_hover.png zu importieren: Auf diese Weise haben wir den Mouseover-Effekt für den Button eingestellt.
• Und schließlich haben wir die Schaltfläche Link zuweisen angeklickt und in dem eingeblendeten Dialogfenster die gewünschte Aktion ausgewählt (in diesem Fall Verlinkung zur Seite der Website, die den Shop enthält).
• Dann haben wir den Button positioniert und analog die anderen drei Buttons erstellt.

Fußzeile: Impressum und Datenschutzerklärung

Die Fußzeile ist ebenso die perfekte Stelle für wichtige Informationen, die auf keiner Website fehlen dürfen (da diese in bestimmten Fällen auch gesetzlich vorgeschrieben sind), wie zum Beispiel: den Namen und die Umsatzsteuer-ID des Unternehmens, das die Website betreibt, Regeln für die Nutzung der Website, Informationen über den Onlineshop, die Datenschutzerklärung und wichtige Kontaktangaben.

In der Fußzeile unserer Website Tees X5 Store haben wir außer einigen Informationen, die wir direkt in das Hintergrundbild eingefügt hatten, einfache Textlinks erstellt, sowohl zur offiziellen Internetseite von Incomedia als auch zu den verschiedenen Informationen und Regelwerken.

Die Richtlinien haben wir im spezifischen Fall als PDF-Dateien eingefügt und die entsprechenden Links mit der Aktion Datei oder URL und der Auswahl der Datei unter Lokale Datei realisiert. 

Schlussfolgerungen

Unser Template nimmt nach und nach Form an und wird immer kompletter und interessanter. Im Vergleich zur veröffentlichten Beispiel-Site (http://tees.websitex5.com ) fehlen in unserem Header noch einige Elemente: Die Buttons für die Sprachauswahl und das Login sowie der Zähler für die in den Warenkorb gelegten Artikel. Aber keine Sorge:  Wir werden auch diese Aspekte erklären, wenn wir mehrsprachige Websites, geschützte Bereiche, die Benutzerverwaltung und die Einrichtung des Onlineshops behandeln.

Bis zum nächsten Mal!

Auch dieses Mal können Sie alle hier beschriebenen Aspekte praktisch nachvollziehen, indem Sie folgendes Projekt herunterladen: http://bit.ly/utEjit

Nach dem Download der Datei .iwzip können Sie diese direkt in WebSite X5 Evolution 9 importieren: Erinnern Sie sich aber bitte daran, die Software zuvor auf Version 9.0.4 upzudaten.