Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5

Transkript

1

2 Inhaltsverzeichnis Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website Grundüberlegungen Anforderungen an eine Website Umfang einer Website Zielgruppen Prozess Prozessablauf Entscheidungskompetenzen Methoden der Konzeption und Planung Skizzen Moodboards Wireframes Was sind Wireframes? Welche Ziele haben Wireframes? Skizzen Karten/Haftetiketten Digitale Vorlagen Programme & Websites für die Erstellung von Wireframes Mockingbird Balsamiq Pencil Schlussfolgerungen 25 Kapitel 2 Hilfstools bei der Webentwicklung Web Developers Toolbar Firebug für Firefox-Browser Seitenelemente untersuchen CSS-Definitionen in Echtzeit bearbeiten Ladezeiten ermitteln und optimieren 34

3 74 K a p i t e l Beispiel für eine Kombination von horizontaler und vertikaler Navigation Eine der häufig verwendeten Navigationsanordnungen ist die horizontale Auflistung der Hauptnavigation im Kopfbereich und die Auflistung der jeweiligen Unternavigation vertikal in der linken Spalte. Nach den vorherigen Beispielen ahnen Sie sicher schon, welche Module für diese Navigation benötigt werden? Genau zwei Module für die Navigation: ein Modul für die Hauptnavigation und ein Modul für die Unternavigation. Erstellen Sie zunächst das Modul für die Hauptnavigation (Abbildung 5.16). Abbildung 5.16 Modul für die Hauptnavigation Geben Sie dem Modul einen Namen, z. B. Hauptnavigation. Für den Startlevel verwenden Sie 0 und setzen den Stoplevel auf 1 und aktivieren Sie die Option Hard Limit. Speichern und schliessen Sie das Modul. Durch diese Einstellungen (Stoplevel und Hard Limit) werden Menüpunkte größer der ersten Ebene (level 1) nicht angezeigt. Erstellen Sie nun noch das zweite Modul für die Unternavigation (Abbildung 5.17).

4 N a v i g a t i o n e n i n C o n t a o e r s t e l l e n 75 Abbildung 5.17 Modul für die Unternavigation Benennen Sie das Modul, z. B. Unternavigation linke Spalte, und geben Sie dem Startlevel den Wert 1. Damit werden nur Menüpunkte größer und gleich der Ebene 1 (level 1, level 2 etc.) angezeigt. Speichern und schliessen Sie das Modul. Erstellen Sie ein neues Seitenlayout im Backend durch Klick auf Layout Æ Themes Æ Seitenlayouts. In diesem Beispiel habe ich das Seitenlayout des Beispiels der horizontalen Navigation dupliziert und ändere hier nur die Einstellungen (Abbildung 5.18) für die Spalten in der Rubrik Spaltenkonfiguration: Wenn Sie schon mehrere Seitenlayouts erstellt haben und sich das neue Seitenlayout nur durch wenige Änderungen von einem bestehenden Seitenlayout unterscheidet, können Sie ein bestehendes Seitenlayout duplizieren und dieses unter einem neuen Namen speichern. So sparen Sie sich die restlichen Einstellungen. Denken Sie in jedem Fall daran, dieses neue Seitenlayout dann auch der/den entsprechenden Seiten in der Seitenstruktur zuzuordnen. Abbildung 5.18 Einstellungen der Spalten konfiguration im Seitenlayout Sie sehen, es wurde nun die Auswahl Linke Spalte und Hauptspalte ausgewählt. Platzieren Sie nun noch die beiden Navigationsmodule im Seitenlayout (Abbildung 5.19):

5 76 K a p i t e l 5 Abbildung 5.19 Platzierung der Navigationsmodule im Seitenlayout Das Modul Hauptnavigation wählen Sie unter Modul aus und platzieren es unter Spalte in die Kopfzeile. Das Modul Unternavigation linke Spalte unter Modul platzieren Sie unter Spalte in die Linke Spalte. Speichern und schliessen Sie nun das Seitenlayout ab. Für das Beispiel wird noch ein CSS-Dokument benötigt, welches Sie im Backend unter Layout Æ Themes Æ Stylesheets definieren. Auch hier können Sie ein bestehendes CSS-Dokument duplizieren und unter einem neuen Namen abspeichern. Binden Sie das neue CSS-Dokument nun noch im Seitenlayout (Abbildung 5.20) in der Rubrik Stylesheets ein: Abbildung 5.20 Einbinden des CSS- Dokuments Wechseln Sie in die Frontendansicht und schauen sich die Seite an. Wenn Sie den Hauptmenüpunkt Menüpunkt 4 anklicken, sehen Sie (Abbildung 5.21) folgende Darstellung: Abbildung 5.21 Frontendansicht

6 N a v i g a t i o n e n i n C o n t a o e r s t e l l e n 77 Sie sehen die Hauptnavigation im Kopfbereich (#header) und die Unternavigation in der linken Spalte (#left). Noch sieht die Navigation optisch nicht schön aus die CSS-Definitionen fehlen noch. Das kommt im folgenden Schritt. Zunächst ein Blick auf den Quellcode (Abbildung 5.22): Abbildung 5.22 Quellcodeansicht Kopfzeile #header und linke Spalte #left Die Hauptnavigation wird horizontal in der Kopfzeile angeordnet. Dafür ist dieser Abschnitt im CSS-Dokument verantwortlich (Listing 5.8): /* hauptnavigation */ #header.mod_navigation background:#666; font-family:verdana,arial,sans-serif; font-size:1.2em; position:absolute; top:89px; width:960px; #header.mod_navigation ul margin:0; padding:0; list-style-type:none; #header.mod_navigation li margin:0; padding:0; Oft ist es sinnvoll, die Module für die Navigation zu erstellen und diese entsprechend im Seitenlayout zu platzieren und dann die richtige bzw. gewünschte Funktionsweise zu testen. Erst wenn alles stimmt, erstellen Sie die CSS- Definitionen dafür. Gerne verzettelt man sich schon in Details der visuellen Erscheinung einer Navigation und muss dann feststellen, dass die grundsätzliche Funktion noch nicht stimmt. Listing 5.8 CSS-Definition für die horizontal ausgerichtete Navigation

7 78 K a p i t e l 5 Listing 5.9 CSS-Definition für die Unternavigation border-right:1px solid #CCCCCC; float:left; text-align:center; width:120px; #header.mod_navigation a, #header.mod_navigation a:link, #header.mod_navigation a:visited color:#ffffff; display:block; height:22px; padding:8px 0 0; text-decoration:none; #header.mod_navigation a:hover background:#dfab2a; #header.mod_navigation li.active, #header.mod_navigation.trail a background-color:#dfab2a; border:1px solid #CCC; height:22px; margin:0; padding:8px 0 0; Haben Sie noch die CSS-Definitionen für die horizontale oder vertikale Navigation in Erinnerung? Sie können auch nachgucken ;-). Vergleichen Sie diese mit den CSS-Definitionen im Listing 5.8, dann sehen Sie eine weitere Definition: #header.mod_navigation.trail a. Dies macht die Kennzeichnung eines übergeordneten Menüpunktes in der Hauptnavigation möglich, wenn ein Untermenüpunkt ausgewählt wurde. Dies erleichtert dem Besucher die Orientierung. Für die Unternavigation ist dann dieser Teil der CSS-Definitionen zuständig (Listing 5.9): /* unternavigation */ #left.mod_navigation font-family:verdana,arial,sans-serif; font-size:1.2em; position:absolute; top:20px; #left.mod_navigation ul list-style-type:none; margin:0; padding: px;

8 N a v i g a t i o n e n i n C o n t a o e r s t e l l e n 79 #left.mod_navigation li padding:5px 0; #left.mod_navigation a, #left.mod_navigation a:link, #left.mod_navigation a:visited color:#000000; display:block; padding:0; text-decoration:none; #left.mod_navigation a:hover color:#dfab2a; #left.mod_navigation li.active color:#dfab2a; padding:5px 0; Sind alle CSS-Definitionen erstellt, wechseln Sie in die Frontendansicht und schauen sich das Ergebnis (Abbildung 5.23) an: Abbildung 5.23 Frontendansicht Navigation Haupt- und Untermenüpunkte

9

10 6 Menüs mit Spritegrafiken erstellen

11 82 K a p i t e l 6 Neben der Ausgabe der Menüpunkte als CSS-formatierter HTML-Code lassen sich Menüpunkte auch als Grafiken einbinden. Ich zeige Ihnen in diesem Kapitel die Verwendung sogenannter Spritegrafiken für Menüs mit Grafiken. Eine Spritegrafik beinhaltet alle Menüzustände (normal, hover, active) für alle Menüpunkte in einer einzigen Grafik (Abbildung 6.1). Abbildung 6.1 Spritegrafik für fünf Menüpunkte und die Menüzustände normal und hover Zu den Vorteilen des Einsatzes von Spritegrafiken gehört das Reduzieren der Seitenaufrufe (HTTP-Requests), anstatt der Verwendung von Einzelgrafiken, da für die Zustände (normal, hover, active) des gesamten Menüs nur eine Grafik geladen wird, anstatt für jeden einzelnen Menüpunkt eine eigene Grafik. Das sogenannte Aufblitzen eines Menüpunktes wird so verhindert. Websites wie Google und Yahoo! bedienen sich zum Beispiel dieser Technik. Die Verwendung von Schriftgrafiken für die Menübezeichnungen erlaubt es Ihnen, Schriften zu nutzen, die unabhängig von Browser- und Plattformkompatibilität eingesetzt werden können. Der Einsatz von plattformübergreifenden Schriften ist sonst auf einige wenige Schriften reduziert. Nachteile sind das zusätzliche Erstellen von Grafiken, sobald neue Menüpunkte hinzukommen, sowie eine größere Datenmenge, die zu laden ist, wenn die Seite aufgerufen wird. Hier hilft dann oft die Optimierung der Grafiken hinsichtlich der Dateigrößen. Im erweiterten Beispiel erfahren Sie, wie Sie alle Menüpunkte innerhalb einer Grafik definieren und diese gezielt mit CSS-Definitionen ansprechen. 6.1 Vorarbeiten Erstellen der Menügrafiken Alle Bilder, die für die Navigation benötigt werden also alle Menüpunkte inklusive dem Hover-Zustand müssen in einem Bildbearbeitungsprogramm erstellt werden. Alle Menüpunktgrafiken sollten die gleiche Größe besitzen ebenso ist pixelgenaues Arbeiten im Bildbearbeitungsprogramm wichtig. Sinnvoll ist es auch, die Bezeichnung der Menügrafiken wie den Menüpunkt zu benennen. Beispiel: Menüpunkt Startseite Æ Menügrafik startseite.gif.

12 M e n ü s m i t S p r i t e g r a f i k e n e r s t e l l e n Ein Bild pro Menüpunkt Für die Navigation mit zwei Zuständen wird die sogenannte Spritegrafik eingesetzt. Hier werden die beiden Menüzustände innerhalb einer Grafik erstellt. Wird nun der Menüpunkt mit der Maus berührt (mouseover/rollover), verschiebt man durch die CSS-Definitionen nur die Koordinaten der Grafik, um den geänderten Menüzustand sichtbar zu machen. Der Vorteil dabei ist, dass nur eine Grafik je Menüpunkt geladen werden muss und der Rollover-Zustand sofort zur Verfügung steht. Das verhindert das Flackern durch das verzögerte Nachladen der Grafiken beim Rollover-Zustand, wenn für den Normal- und den Rollover-Zustand einzelne Grafiken geladen werden. Am einfachsten erstellt man die Grafiken nach dem immer gleichen Prinzip, d. h. die Grafiken für die unterschiedlichen Menüpunktzustände werden entweder neben- oder untereinander angeordnet. Die Grafik für den Menüpunkt Startseite sieht im Beispiel so aus (Abbildung 6.2): Die Grafik ist 150 Pixel breit und 60 Pixel hoch ( Pixel = Normal- plus Hoverzustand). Der obere Teil ist der Normalzustand, der untere Teil der Hoverzustand. Abbildung 6.2 Menügrafik startseite.gif Übersicht der Seitenstruktur Für alle Seiten innerhalb der Seitenstruktur werden entsprechende CSS-Klassen eingesetzt. Abbildung 6.3 Seitenstruktur In der Seitenstruktur vergibt man für jeden Eintrag die CSS-Klasse entsprechend der Menübezeichnung. Somit kann jedem Menüpunkt eine eigene Grafik zugewiesen werden.

13 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen