Webdesign Lernheft 41 Übungsheft: Erstellen einer kompletten Website Teil II Inhaltsverzeichnis 41.1 Einleitung... 2 41.2 Die Inhaltsseiten der Rohling... 2 41.3 Die Musterseite... 7 41.4 Vervielfältigung... 9 41.5 Zusammenfassung... 11 Copyright Laudius GmbH 01-22110-01
41.1 Einleitung Lernheft 40 startete in die Übung mit Beschreibung, Planung und der Startseite. In Lernheft 41 wenden wir uns nun der programmiertechnischen Umsetzung der Inhaltsseiten zu. So werden auch die noch offenen Fragen und technischen Raffinessen, die in Lernheft 40 angesprochen wurden, geklärt. Am Ende des Hefts werden die Seiten zu den Bereichen Firma, Produkte und Dienstleistungen fertig sein. Lernheft 41 beschreibt den anspruchsvollsten Teil der praktischen Übung, daher sollten Sie sich für die Durchführung unbedingt einige ungestörte Momente gönnen planen Sie mindestens eine Stunde ein, um eigene Gedanken und Ideen fassen und diese auch eigenständig programmiertechnisch weiterverfolgen zu können. Lernziele: Sie lernen nach Durcharbeitung dieses Lernhefts Vorgehensweisen kennen Diverse Umsetzungsmöglichkeiten kennen Häufige Fehlerquellen kennen Erklärung der Symbole Selbstlernaufgaben Hausaufgabe Zusammenfassung Hinweis bzw. Tipp Lösungen zu den Selbstlernaufgaben Notizen 41.2 Die Inhaltsseiten der Rohling Unterteilen Sie den Entwurf in die für Sie direkt ersichtlichen Hauptbereiche. Vergeben Sie gedanklich bereits die entsprechenden Bezeichnungen. Überlegen Sie sich, wie Sie die einzelnen Bereiche umsetzen wollen, z. B. die Menüzeile ist dies Ihr aufgepeppter Bereich, wird evtl. Fireworks zum Einsatz kommen. Auch der Schatten des Textbereichs könnte Ihnen kurz Kopfzerbrechen bereiten. Nachfolgend finden Sie einige Tipps, falls Sie bei einigen Problemen nicht weiterkommen. An dieser Stelle ist es besonders wichtig, sich Notizen zu machen. Beantworten Sie z. B. folgende Fragen: 2
Warum haben Sie sich für eine bestimmte Lösung entschieden? Welche weiteren Varianten sind Ihnen eingefallen? Reichen Sie diese Notizen zusammen mit der Übungsseite ein. Legen Sie sich eine Ordnerstruktur an im Hinblick darauf, dass später auch PHP zum Einsatz kommen wird, sollten Sie den Ordner innerhalb des XAMPP- Verzeichnisses anlegen. Ein guter Zeitpunkt für die Bildbearbeitung ist vor der eigentlichen Programmierung. Schneiden Sie die Bilder zu und speichern Sie sie im dafür vorgesehenen Ordner ab. Nun können Sie sich an die Programmierung machen. Die folgenden Lösungstipps basieren auf der nachfolgend dargestellten Seiteneinteilung: Einteilung der Hauptbereiche Abb. 1: Hauptbereiche der Seite Einteilung der weiteren Unterbereiche Abb. 2: Weitere Seitenbereiche, 3
Legen Sie eine neue Dreamweaver-Site an. Gestalten Sie zunächst das Seitengerüst. Vergessen Sie den umgebenden Bereich nicht die Seite sieht später mittig auf dem Bildschirm platziert besonders gut aus. Definieren Sie die einzelnen Bereiche via CSS. Umsetzungstipp 1: Eine schnell und einfach umzusetzende Möglichkeit ist es, den Kopfbereich komplett als Hintergrundgrafik einzufügen natürlich ohne Menübezeichnungen innerhalb der Grafik. Diese werden als Links eingefügt und positioniert. Doch auch mit einer Fireworks-Datei (erinnern Sie sich an Lernheft 31?) kommen Sie an dieser Stelle schnell ans Ziel. Beide Varianten basieren darauf, dass mit einer festen Breite gearbeitet wird das ist laut Projektdefinition kein Problem. Praxistipp: Scheuen Sie sich nie, auch einen einfachen und unkomplizierten Weg zu gehen. Orientieren Sie sich an den Vorgaben des Kunden so können Sie meist besonders preiswert arbeiten. Für spezielle Lösungen, die nicht abgesprochen waren, können Sie auch keine spezielle Honorierung erwarten! Umsetzungstipp 2: Die Schatten setzt man am einfachsten aus drei Grafiken zusammen: je einem oberen und unteren Schatten, die als img eingefügt werden; der seitliche Schatten wird als kleine Grafik in den Hintergrund des Inhaltsbereichs gesetzt, rechts positioniert und auf der y-achse wiederholt. Umsetzungstipp 3: Die Infobox wird wie der Contentbereich angelegt. Allerdings wird hier hinter die Überschrift die Grafik der abgerundeten Titelzeile eingefügt. Umsetzungstipp 4: Das grafische Problem mit dem Hintergrund kann gelöst werden, indem man eine zusätzliche Grafik in den Hintergrund einfügt. Abb. 3: Umsetzung des Entwurfs, 4
Hier kann man auch einen möglichen Kompromiss sehen, wie die Verteilung der Menüpunkte erfolgen kann. Die Hauptmenüpunkte habe ich eher mittig platziert. So bleiben sie auch bei einer User-bedingten größeren Schriftgröße innerhalb des vorgesehenen Bereichs. Die Fußzeilen-Menüpunkte habe ich für die Normalgröße optisch gegeneinander und den restlichen Seitenbereich ausgerichtet. Die Problematik mit dem Bildbanner wurde im oberen Screenshot noch nicht gelöst. Umsetzungstipp 5: Der Hintergrund der Fußzeile ist eine Grafik im Hintergrund. Die Jahreszahl der Fußzeile kann auch in die Hintergrundgrafik eingebunden werden. So läuft man nicht Gefahr, dass sie bei einer durch den User größer eingestellten Schrift außerhalb des vorgesehenen Bereichs geschoben wird. Umsetzungstipp 6: Die Problematik mit dem zu weit unten platzierten Bildbanner können Sie auf verschiedene Weisen lösen. Nachfolgend sollen Ihnen einige Möglichkeiten aufgezeigt werden. Versehen Sie den Textbereich mit einer internen Scrollleiste. Feste Höhe definieren und den overflow entsprechend angeben für den Internet Explorer können Sie auch die Scrollleiste in ihrem Aussehen definieren. Sehen Sie sich dazu die Auszeichnung scrollbar an. Abb. 4: Umsetzung des Entwurfs Oder integrieren Sie das Bild in der Spalte des Infokastens. Es kann unterhalb erscheinen oder innerhalb. Im Nachfolgenden sehen Sie die Möglichkeit, den Infokasten als Akkordeon zu gestalten und das Bild je nach Meldung einzubinden. Eine sehr anspruchsvolle Aufgabe versuchen Sie sich an ihr. 5
Abb. 5: Scrollbarer Text Mit dieser Variante haben Sie übrigens direkt zwei Aufgaben gelöst denn nicht nur das Bild wurde geschickt untergebracht, Sie haben mit dem Akkordeon auch eine technische Raffinesse eingebaut. Umsetzungstipp 7: Die Aufgabe der technischen Raffinessen steht noch aus. Neben dem bereits gezeigten Akkordeon als Infokasten können Sie auch mit dem Hauptmenü einige Effekte einbauen wie Maus-over-Effekte der Menüpunkte etc. Mit Lernheft 31 haben Sie die Grundzüge vermittelt bekommen. Spielen Sie ruhig damit. Das Bild könnte auch als Animation eingebaut werden. In Fireworks können Sie animierte Gifs anlegen. Ab Lernheft 50 werden Sie in die Grundzüge von Adobe Flash eingeführt über diese Software erhalten Sie nahezu unerschöpfliche Animationsmöglichkeiten. Umsetzungstipp 8: Das Newsarchiv soll ebenfalls erreichbar sein. Es ist zu überlegen, ob das Newsarchiv ständig erreichbar sein muss oder ein Link aus dem Bereich der News heraus ausreichend ist (die News sind über die Einstiegskästen der Startseite zu erreichen). Es bietet sich durchaus an, einen Link zu dem gesamten Newsbereich in die Fußzeile zu integrieren. Das Archiv ist dann nur über diese Seite zu erreichen. Doch aus Gründen der Nutzbarkeit ist diese Lösung sicherlich die sinnvollste, da die User eher Interesse an den neuen News haben und erst dann evtl. im Archiv stöbern. Abb. 6: Newslink in der Fußzeile 6
Abb. 7: Veränderte Struktur mit der neuen Einordnung des Newsbereichs und des Archivs Nachdem all diese Entscheidungen getroffen und programmiertechnisch umgesetzt worden sind, ist der Rohling fertig. Ohne Dreamweaver verwenden Sie diese HTML- Vorlage zur Vervielfältigung der Seiten. Mit Dreamweaver kommt nun das Anlegen der Musterseite hinzu. 41.3 Die Musterseite Nehmen Sie sich die Inhaltsseite als Grundlage zum Vorbild und markieren Sie die bearbeitbaren Bereiche. Überlegen Sie dabei ganz genau, welche Bereiche bearbeitbar sein sollen und wie die Art der Bearbeitung aussehen kann bzw. muss. Bedenken Sie, dass eine gute Vorlage auch flexibel sein sollte. Arbeiten Sie daher auch Bereiche ein, die im Entwurf nicht berücksichtigt wurden, aber zum Einsatz kommen könnten z. B. eine Unterüberschrift. Vorschläge zur Umsetzung: Die Überschrift als eigenen bearbeitbaren Bereich anlegen. Da Seitentext und Überschrift im Quellcode durch den Newskasten getrennt werden, ist das Trennen der beiden Bereiche grundsätzlich sinnvoll. Ein weiterer Vorteil ergibt sich, wenn Sie die auszeichnenden Tags nicht ins Template einfügen. So gibt man die Überschrift vor, es können keine Änderungen vorgenommen werden. Der Text ist ein eigenständiger Bereich. Unterüberschrift und nachfolgenden Textbereich in ein Template zusammenfassen. Die Tags mit hineinnehmen. So können die einzelnen Bereiche jederzeit kopiert werden und der Textbereich ist beliebig erweiterbar. Auf diese Weise lässt es sich auch realisieren, dass die Seite mit Überschrift und Unterüberschrift beginnt. 7
So wurde der Textbereich relativ flexibel gestaltet und lässt der späteren Seitengestaltung möglichst viel Freiraum. Ein beispielhafter Codeschnipsel: Abb. 8: Auszug aus dem Musterseiten-Quelltext Je nachdem, welche Features Sie sich für Ihre Seite ausgesucht haben, müssen Sie die verbleibenden Bereiche nun entsprechend dem obigen Umsetzungsvorschlag ebenfalls in bearbeitbare Bereiche umwandeln. Wer sich für das Akkordeon entschieden hat, wird jetzt auf eine weitere Schwierigkeit stoßen: Wie kann man den Bereich flexibel umsetzen? Stellen Sie sich zunächst folgende Frage: Wie flexibel muss dieser Bereich tatsächlich sein? Auf wie viele Bereiche und weiterführende Informationsseiten wird in der Praxis wohl tatsächlich verwiesen bzw. wie viele Verweise sind noch sinnvoll, ohne den User zu sehr zu verwirren und zu weit von der ausgehenden Seite wegzuführen? Erinnern Sie sich daran, dass die Unterseiten nicht über das Menü erreichbar sein sollen. Unter diesen Umständen begrenzen Sie als Programmierer die Möglichkeiten so läuft man nicht Gefahr, dass später zu viele Verweise angelegt werden. Schließlich ist es ja auch möglich, dass die Seiten durch Dritte betreut und gefüllt werden, die sich mit der Materie nicht so gut auskennen. Erfahrungsgemäß neigt man schnell dazu, zu viele Informationen unterbringen zu wollen, und verliert dabei die Kerninformation aus den Augen. Ebenso leider auch die User-Freundlichkeit. Diesen Punkt im Auge zu behalten, ist auf jeden Fall die Aufgabe des Webdesigners also Ihre Aufgabe. Im Beispiel würde ich die Möglichkeiten auf zwei bis drei begrenzen und die Anweisung an den Kunden weitergeben, dass die Texte kurz gehalten werden müssen. Löst man das Akkordeon in der Musterseite so wie im Beispiel, kann keine der Optionen gelöscht werden. Man sähe immer die leere Zelle. Natürlich könnte man hier Kompromisse machen z. B. die dritte Option als bearbeitbaren Bereich einfügen (doch dann kann man gleich alle Bereiche bearbeitbar machen und spart sich viel Arbeit) oder man verändert den dritten Bereich so, dass er einfacher zu füllen ist. Umsetzungstipp: Damit Link und Bild bearbeitbar sind, müssen Sie die Option Attribut editierbar machen verwenden. Im Code sieht eine Zeile beispielsweise dann so aus: Abb. 9: Editierbarer Tag im Quelltext 8
Alle bearbeitbaren Bereiche sind in den Kindseiten (auf der Vorlage basierende Seiten) über den Menüpunkt Modifizieren/Vorlageneigenschaften veränderbar bzw. einsehbar. Folgender Screenshot macht deutlich, wie wichtig eindeutige Benennungen sind, wenn man nicht den Überblick verlieren will. 41.4 Vervielfältigung Auf Basis der eben erstellten Vorlage können Sie nun die Seiten vervielfältigen. Legen Sie drei Seiten an, benennen Sie sie laut Ihrer Menüverlinkung und füllen Sie sie mit Inhalt. Beispielhaft die Produkte-Seite Abb. 10: Vervielfältigung Alle weiteren Seiten werden im Laufe von Lernheft 42 fertiggestellt. 9
Praxishinweis: Optimalerweise erhalten Sie die Texte vom Kunden. Bestehen Sie im Vorfeld darauf, dass Ihnen die Texte unformatiert überreicht werden. Die einzigen Auszeichnungen dürfen sein: Absätze Zeilenumbrüche Auszeichnungen der Überschriften in der richtigen Hierarchie mit Überschrift 1 etc. Beim Kopieren werden alle Formatierungen aus Textdateien übernommen sowie die Zeilenumbrüche und Überschriften erkannt und entsprechend ausgezeichnet wie der untere Screenshot zeigt. Die markierte Überschrift wird erkannt, entsprechend als h2 ausgezeichnet und somit auch mit dem entsprechend definierten CSS verknüpft. Abb. 11: Erkennung der kopierten Auszeichnungen Sehen Sie sich auf dem Screenshot jedoch einen Absatz an, so erkennen Sie, dass Absätze als p erkannt werden, das doppelte Umbruchzeichen nach einem Absatz jedoch als leeres p. Da müssen Sie nachbessern. Ein zweiter großer Fehler lässt sich in der Codeansicht ebenfalls schnell erkennen: Abb. 12: Übernahme von Auszeichnungen aus dem Textdokument Automatisch wird der eingefügte Text innerhalb eines HTML-Tags gesetzt. CSS- Anweisungen werden aus dem Textdokument übernommen das muss natürlich gelöscht werden. 10
Dreamweaver (und auch andere Editoren) bieten die Möglichkeit der einfachen Bearbeitung von kopierten Textpassagen aus Textdokumenten. Die erste Arbeitsvereinfachung findet sich bereits in den Voreinstellungen. Definieren Sie im Menü Bearbeiten/Voreinstellungen und hier im Punkt Kopieren/Einfügen, welche Anweisungen mitgenommen werden sollen: Abb. 13: Voreinstellungen für den Kopiervorgang aus Textdokumenten Doch selbst bei der Option Nur Text kann es vorkommen, dass noch Anweisungen aus dem Textdokument in Ihrer HTML-Datei erscheinen. Kontrollieren Sie demnach immer den Quellcode, oder speichern Sie den Text als txt-datei. In diesem Fall werden keine Stilanweisungen abgespeichert und es können somit auch keine solchen kopiert werden. Eine weitere Möglichkeit ist es, über den Texteditor zu kopieren. Öffnen Sie eine Texteditordatei und kopieren Sie den Text hier hinein, bevor Sie ihn in den HTML-Editor einfügen auch so sind alle Anweisungen getilgt. 41.5 Zusammenfassung Mit Lernheft 41 haben Sie sich in den Bereich der praktischen Umsetzung begeben. Sie haben eine Vielzahl Ideen und Tipps erhalten, um die Seite attraktiver zu gestalten. Begonnen haben wir mit dem Rohling dem Programmieren des Grundgerüsts. Daraus entstand die Dreamweaver-Musterseite auf ihr basieren später alle anderen Seiten, Änderungen der Musterseite übertragen sich demnach direkt auf alle anderen Seiten. Auf Basis der Musterseite wurden die Inhaltsseiten angelegt. So haben Sie nun am Ende des Lernhefts 41 bereits einen einfachen Webauftritt fertiggestellt. Lernheft 42 wird sich mit den ausstehenden Seiten für Kontakt und Start beschäftigen. 11