This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich. Die Informationen in diesem Buch werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
Der Eröffnungsbildschirm HTML-Editor und Webmanager Webseite oder Web? Verzeichnispfad oder lokaler Server Die FrontPage-Servererweiterungen
12 15 22 26 33
Webdesign mit dem FrontPage-Editor
37
Das ABC der Textverarbeitung Zeilenumbruch und Silbentrennung Text formatieren Formatvorlagen und Cascading Stylesheets Designs, Seitenübergänge und Seiteneigenschaften Webseiten testen Listen und Aufzählungen Tabellen Hyperlinks Farben und grafische Elemente Effizientes Arbeiten mit dem Editor FrontPage-Komponenten (die WebBots)
37 43 46 53 68 77 78 91 114 146 161 178
Von der Webseite zum Web Webs anlegen und bearbeiten Webs planen Navigationsstrukturen für Webs Frames Webs verwalten
191 191 205 214 232 252
Inhaltsverzeichnis
4
Grafiken im Webdesign Die wichtigsten Bildformate Bilddateigröße versus Bildqualität Animationen GIF-Animationen
5
Die eigene Internet-Präsenz Ein fiktives Beispiel für eine private Homepage Eine typische Homepage Die Vorlage »Persönliches Web« Eine ausgefallenere Homepage Firmen-Webs Web veröffentlichen Web bekannt machen
A
Anhang FrontPage konfigurieren PWS und IIS Kleine HTML-Referenz JavaScript Glossar Literaturhinweise und Internet-Adressen
Stichwortverzeichnis
6
269 269 272 277 279
283 284 287 290 298 303 303 312
313 313 318 322 348 361 365
367
Vorwort Es gibt viele Gründe, Webseiten zu erstellen. Für die einen ist es eine Profession, für die anderen ein Hobby. Die einen tragen die Verantwortung für den Internetauftritt ihrer Firma, die anderen nur für die eigene persönliche Homepage. Manche wollen mit ihren Webseiten Geld verdienen, wieder andere bereichern das World Wide Web aus Enthusiasmus um Webseiten, auf denen man online spielen oder sich über die aktuelle Musikszene informieren kann. Webseiten findet man aber nicht nur im Internet, es gibt sie auch als »Schwarzes Brett« in firmeneigenen Intranets, als Desktop-Hintergrund auf Windows-PCs oder als Anhängsel von EMails. Zu welchem Zweck auch immer Sie Webseiten (oder allgemeiner ausgedrückt HTML-Dokumente) erstellen, Webdesign sollte stets ein kreativer Prozess sein, der – bei aller Mühe – Spaß und Freude über das fertige Produkt bringen sollte. Programme wie FrontPage helfen Ihnen, sich auf den kreativen Teil der Weberstellung zu konzentrieren. Anfänger befreit FrontPage von der Einarbeitung in Technologien wie HTML, CSS, CGI etc. (obwohl es nicht schadet, sich nach und nach mit diesen Technologien vertraut zu machen), fortgeschrittene und professionelle Webdesigner profitieren davon, dass FrontPage viele Standardaufgaben (vom Anlegen einer Tabelle bis zur Wartung eines bestehenden Webs) automatisiert und vereinfacht. So einfach und anwenderfreundlich FrontPage letzten Endes in der Handhabung ist, so komplex ist es aber auch. Um FrontPage effizient nutzen zu können, muss man sich daher erst einmal mit dem Programm und seinen vielfältigen Möglichkeiten vertraut machen. Dieses Buch soll Ihnen die Einarbeitung in FrontPage und die Erstellung von Webseiten erleichtern. Es ist für Leser gedacht, die zum ersten Mal mit FrontPage arbeiten oder die überhaupt mithilfe von FrontPage ihre ersten Webseiten und Webs erstellen wollen.
왘
Das Buch beginnt mit einer allgemeinen Einführung in FrontPage, die Ihnen einen ersten Überblick über das Programm geben und Sie mit einigen FrontPage-spezifischen Besonderheiten (Zusammenarbeit mit lokalen Webservern, Komponenten, FrontPage-Servererweiterungen) bekannt machen soll.
왘
Danach konzentrieren wir uns erst einmal ganz auf den integrierten Editor und das Design einzelner Webseiten.
왘
Im dritten Kapitel wagen wir den Sprung von der einzelnen Webseite zum kompletten Web und schauen uns an, welche zusätzlichen Design-Aufgaben mit der Erstellung von Webs verbunden sind und welche spezielle Unterstützung uns FrontPage für die Einrichtung und Verwaltung von Webs bietet.
왘
Im vierten Kapitel beschäftigen wir uns ein wenig ausführlicher mit dem Einsatz von Grafiken im Webdesign.
왘
Den Schlusspunkt bildet die Erstellung und Veröffentlichung einer eigenen Homepage (in Form einer einzelnen Webseite oder eines Webs).
Viel Spaß beim Lesen dieses Buches und bei der Arbeit mit FrontPage Dirk Louis, [email protected] Saarbrücken, den 12. April 2001
8
Kapitel 1 FrontPage – Ein Programm stellt sich vor Dass FrontPage ein Programm zur Erstellung von Webseiten ist, dürfte ein offenes Geheimnis sein. Wie aber ein Programm zur Erstellung von Webseiten auszusehen hat, darüber dürfte weniger Einigkeit bestehen. Im einfachsten Fall wird man wohl einen mehr oder weniger komfortablen Editor erwarten, in den man den Text der Webseite wie in einem ganz normalen Editor (Wordpad, Microsoft Word etc.) eingibt und beim Abspeichern als Ergebnis automatisch eine korrekt formatierte Webseite im HTML-Format erhält, die man sogleich ins Internet stellen oder als Hintergrund für das eigene Windows-Desktop verwenden kann. Ist FrontPage ein solcher HTMLEditor? Ja und nein! FrontPage ist zweifelsohne ein äußerst komfortabler Editor zum Aufsetzen von Webseiten, aber es ist noch viel mehr. Mit FrontPage können Sie neben einzelnen Webseiten auch ganze Webs (Sammlungen zusammengehöriger Webseiten, einschließlich Hilfsdateien wie Bilder, Sounds, Skripte etc.) aufbauen, organisieren, verwalten und warten. Entsprechend komplex sind die von FrontPage angebotenen Funktionen und Möglichkeiten. Damit Sie nicht die Orientierung verlieren, möchte ich Ihnen im Folgenden einen ersten Überblick über das Programm geben und Sie mit einigen FrontPage-spezifischen Besonderheiten (Zusammenarbeit mit lokalen Webservern, Komponenten, FrontPage-Servererweiterungen) bekannt machen. Auch die Gliederung des Buchs, das wie im Vorwort beschrieben von der Erstellung einzelner Webseiten über die Planung, Realisierung und Wartung ganzer Webs bis hin zur Erstellung einer eigenen Homepage fortschreitet, wird Ihnen die Einarbeitung in FrontPage erleichtern. Begriffsvereinbarungen Um terminologischen Missverständnissen vorzubeugen, möchte ich kurz einige Begriffe einführen und ihren Gebrauch in diesem Buch erläutern.
Fachwort
HTML-Dokument Im HTML-Format vorliegendes Dokument, das die Extension .htm oder .html trägt. HTML ist eine Spezifikation zur Beschreibung von elektronischen Dokumenten. HTML definiert zu diesem Zweck eine Reihe von Befehlen, die so genannten Tags, mit denen der Aufbau und die Formatierung der Dokumente beschrieben werden können. HTML-kundige Programme, wie zum Beispiel Webbrowser, entnehmen diesen Tags, wie der Dokumenteninhalt aufgebaut und formatiert werden soll. HTML-Dokumente können allein oder als Teil eines Webs existieren. Im letzteren Fall spricht man auch von einer Webseite.
Fachwort
Webseite In HTML formatiertes Dokument, das Teil eines Webs ist. Da es für die Bearbeitung eines HTML-Dokuments unerheblich ist, ob es Teil eines Webs ist oder nicht, spricht FrontPage allgemein von »Seiten«. Eine »Seite« im Sinne von FrontPage kann also sowohl ein allein stehendes HTML-Dokument sein als auch ein HTML-Dokument, das Teil eines Webs ist (oder später als Teil eines Webs abgespeichert wird). In Anlehnung an diese Terminologie wird der Begriff der »Webseite« in diesem Buch neben seiner eigentlichen Bedeutung auch als Oberbegriff für alle HTML-Dokumente verwendet. Terminologisch mag dies nicht ganz korrekt sein, doch für die Beschreibung der FrontPage-Software ist es definitiv einfacher, allgemein von der Webseitenerstellung zu sprechen.
Fachwort
Web Verbund zusammengehöriger Webseiten und Hilfsdateien (Bilder, Klänge, Skriptdateien etc.), die in einem gemeinsamen Verzeichnis auf der Festplatte oder auf einem Webserver abgespeichert sind. (Auch als Website bezeichnet.)
10
Fachwort
Kapitel 1: FrontPage – Ein Programm stellt sich vor
Homepage Im allgemeinen Sprachgebrauch wird der Begriff der Homepage dazu verwendet, einen privaten Webauftritt oder die Hauptseite eines solchen Webs zu bezeichnen. Technisch gesehen ist die Homepage die Eintrittseite eines Webs, d.h., die Webseite, die vom Webserver zurückgeliefert wird, wenn ein Websurfer den URL des Webs ansteuert, ohne dabei eine zu ladende HTML-Seite anzugeben.
Querverweis
Fachwort
Um eine bestimmte Seite eines Webs als Homepage festzulegen, muss man sie unter einem für den Webserver spezifischen Namen speichern; die meisten Webserver verwenden index.htm, index.html oder default.htm, default.html als Homepage-Namen.
Design Ganz allgemein der Entwurf und die künstlerische Ausgestaltung einer Webseite oder eines ganzen Webs. FrontPage verwendet den Begriff aber auch zur Bezeichnung seiner »Themes«. Dabei handelt es sich um Formatierungsvorlagen, durch deren Zuweisung man mit einem Befehl nahezu das komplette Design einer Webseite verändern kann (Hintergrundgestaltung, Schrift, Farben, das Erscheinungsbild vieler Webelemente wie Aufzählungssymbole, Schaltflächen etc.). An Stellen im Buch, wo sich aus dem Kontext nicht eindeutig schließen lässt, welches »Design« gemeint ist, werden diese Designs explizit als FrontPage-Designs bezeichnet.
Weitere Begriffsdefinitionen finden Sie im Glossar.
11
Der Eröffnungsbildschirm
Der Eröffnungsbildschirm Wenn Sie FrontPage aufrufen, beispielsweise über das Startmenü (START/ PROGRAMME/MICROSOFT FRONTPAGE), erscheint kurz darauf der Eröffnungsbildschirm von FrontPage, der ungefähr wie in Bild 1.1 aussieht.
Bild 1.1: Der Eröffnungsbildschirm von FrontPage FrontPage hat bereits standardmäßig unter dem vorläufigen Namen Seite1.htm eine neue Webseite für uns angelegt, so dass wir im Grunde direkt mit der Webseitenerstellung beginnen könnten (siehe Kasten weiter unten). Wir gedulden uns aber noch und machen uns erst etwas intensiver mit der FrontPage-Oberfläche vertraut.
Webseiten öffnen und schließen Der mittlere Bereich, in dem die Webseite Seite1.html angezeigt wird, ist der integrierte FrontPage-Editor. Wenn Sie die gerade im Editor angezeigte Webseite schließen wollen, klicken Sie einfach auf den Schließen-Schalter am rechten Rand des Editors oder rufen den Menübefehl DATEI/SCHLIESSEN auf.
12
Kapitel 1: FrontPage – Ein Programm stellt sich vor Um selbst eine neue Webseite anzulegen, klicken Sie im Aufgabenbereich am rechten Rand des FrontPage-Fensters auf den Eintrag LEERE SEITE oder nutzen eine der SEITENVORLAGEN.
Hinweis
Um eine bereits bestehende Webseite zu öffnen, klicken Sie im Aufgabenbereich auf den Eintrag SEITE WÄHLEN oder rufen den Befehl DATEI/ÖFFNEN auf. Falls Sie die Webseite kürzlich erst in FrontPage bearbeitet haben, können Sie sie vermutlich auch über das Untermenü DATEI/ZULETZT GEÖFFNETE DATEIEN AUSWÄHLEN beziehungsweise den Abschnitt SEITE ÖFFNEN in den Aufgabenbereich laden. Wenn der Aufgabenbereich auf Ihrem Bildschirm nicht angezeigt wird oder die falschen Befehle enthält, rufen Sie vorab den Befehl DATEI/NEU/SEITE ODER WEB auf.
Der Aufgabenbereich Der Aufgabenbereich ist eine Neuerung, die es erst seit FrontPage 2001 gibt und deren vornehmliche Aufgabe es ist, die Bedienung von FrontPage ein wenig einfacher und effizienter zu machen. Zu diesem Zweck kann man im Aufgabenbereich verschiedene Zusammenstellungen häufig benötigter Befehle anzeigen lassen, beispielsweise die Befehle zum Anlegen und Öffnen von Webseiten und Webs oder – für Office-Anwender – die OfficeZwischenablage.
Bild 1.2: Eine Seite des Aufgabenbereichs auswählen 13
Der Eröffnungsbildschirm Um eine bestimmte Seite des Aufgabenbereichs auszuwählen, gibt es zwei Möglichkeiten: Sie rufen den entsprechenden Menübefehl auf. Wenn Sie beispielsweise den Befehl DATEI/NEU/SEITE ODER WEB aufrufen, wird die Seite NEUE SEITE ODER NEUES WEB eingeblendet.
왘
Der Aufgabenbereich wird bereits angezeigt (Befehl ANSICHT/ AUFGABENBEREICH) und Sie klicken auf den Pfeil rechts neben dem Titel des Aufgabenbereichfensters, um eine Seite auszuwählen, oder Sie klicken auf die Pfeile links neben dem Titel, um die Liste der zuletzt angezeigten Seiten durchzugehen.
Querverweis
왘
Im Kapitel 2 »Effizientes Arbeiten mit dem Editor« erfahren Sie mehr zu den Seiten ZWISCHENABLAGE und SUCHEN.
Die Ansichten 1
Bild 1.3: Die Ansichtenleiste1 Die Erstellung und Betreuung von Webseiten und Webs hat verschiedene Facetten. In welcher Weise man dabei ein Web oder eine Webseite betrachtet oder bearbeitet, wird durch die Wahl der zugehörigen Ansicht festgelegt. Die Ansichtenleiste wird am linken Rand des FrontPage-Fensters eingeblendet. Über den Befehl ANSICHT/ANSICHTENLEISTE können Sie die Leiste ein- und ausblenden. Die wichtigste Ansicht ist die Ansicht SEITE. In dieser Ansicht bearbeiten Sie Ihre Webseiten. Wenn Sie eine neue Seite anlegen, eine bestehende Seite 1.
Die Ansichtenleiste wird in FrontPage immer vertikal angezeigt. Die horizontale Anordnung der Symbole in Bild 1.3 wurde durch Nachbearbeitung in einem Grafikprogramm erreicht.
14
Kapitel 1: FrontPage – Ein Programm stellt sich vor öffnen oder eine Seite über das FENSTER-Menü auswählen, wechselt FrontPage automatisch zur Ansicht SEITE und Sie können die Seite im Editor bearbeiten. Ansonsten können Sie jederzeit in die SEITE-Ansicht wechseln, indem Sie einfach auf das zugehörige Symbol in der Ansichtenleiste klicken. Die restlichen Ansichten dienen alle der Erstellung und Wartung ganzer Webs und werden in Kapitel 3 besprochen.
HTML-Editor und Webmanager Wie schon mehrfach zwischen den Zeilen angeklungen ist, teilt sich die Arbeit des Webdesigners in zwei größere Aufgabenkomplexe: die Erstellung der Webseiten sowie die Bündelung und Verwaltung dieser Seiten in Webs1. Früher bestand FrontPage aus zwei Programmen, die genau diesen Aufgabenkomplexen gewidmet waren: dem FrontPage-Editor zur Bearbeitung der Webseiten und dem FrontPage-Explorer zum Anlegen und Warten der Webs. Heute gibt es nur noch eine FrontPage-Oberfläche, in der die Funktionalität von Editor und Explorer integriert sind – was mehr als sinnvoll ist, denn schließlich werden Webseiten meistens in Webs organisiert und Verwaltung des Webs und Bearbeitung der Webseiten des Webs gehen Hand in Hand. Geblieben ist von der ursprünglichen Auftrennung in Editor und Explorer die Aufteilung in Ansichten. Die Ansicht SEITE entspricht dem FrontPage-Editor, die restlichen Ansichten stellen die Funktionalität des ehemaligen FrontPage-Explorers zur Verfügung.
Der FrontPage-Editor Um zum Editor zu wechseln, klicken Sie in der Ansichtenleiste auf das Symbol SEITE. Sie können ihn auch über das Menü ANSICHT auswählen, oder automatisch anzeigen lassen, indem Sie eine Webseite laden (siehe oben). Grundsätzlich gleicht der FrontPage-Editor natürlich stark seinem älteren Bruder, Microsoft Word. Wer also im Umgang mit Word (oder auch anderen professionellen Windows-kompatiblen Textverarbeitungssystemen) einigermaßen versiert ist, wird sich schnell an die Arbeit mit dem FrontPage-Editor gewöhnen. 1. Man kann allerdings auch einzelne Webseiten bearbeiten, ohne diese in einem Web zu verwalten.
15
HTML-Editor und Webmanager
Bild 1.4: Der FrontPage-Editor Es gibt allerdings eine Reihe von Besonderheiten zu beachten, die mit dem speziellen Dateiformat zu tun haben, für das der FrontPage-Editor ausgelegt ist. HTML Wenn Sie mit einem Texteditor ein Dokument bearbeiten, laden Sie die Datei des Dokuments in den Editor, tippen einen Text ein und speichern den Text wieder in der Datei. In der Datei ist dann der gesamte Text des Dokuments, Buchstabe für Buchstabe, gespeichert (wobei die einzelnen Buchstaben binär codiert werden). Wie ist es aber möglich, dass man einzelne Textpassagen unterschiedlich formatieren kann? Betrachten Sie beispielsweise den folgenden Textauszug: Die Kiefer in der chinesischen Malerei
In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den drei Freunden im Winter – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. 16
Kapitel 1: FrontPage – Ein Programm stellt sich vor In diesem Beispiel ist die erste Zeile als Überschrift mit Fettdruck formatiert. Des Weiteren wurde im Fließtext der Begriff der »drei Freunde im Winter« durch Kursivschrift hervorgehoben. Damit ein Texteditor derartige Formatierungen unterstützen kann, muss er einen entsprechenden Satz von Formatbefehlen kennen, die diese Formatierungen definieren. Diese Formatbefehle können spezielle Zeichenfolgen sein, beispielsweise für eine Überschrift der dritten Ebene,
für einen Absatz oder <em> für Kursivschrift. Der Editor fügt diese Formatbefehle nach Ihren Angaben in den Text ein und speichert diese zusammen mit dem Text ab: Die Kiefer in der chinesischen Malerei
In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu <em>den drei Freunden im Winter – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume.
Beim Laden der Datei wandelt der Editor die Formatbefehle automatisch in die gewünschte Formatierung um, so dass Sie die zugrunde liegenden Formatbefehle üblicherweise nicht zu Gesicht bekommen. Wer beispielsweise gewohnt ist, seine Texte mit Microsoft Word oder Word Perfect aufzusetzen, formatiert seine Texte einfach, indem er Textpassagen auswählt und diesen per Mausklick auf bestimmte Symbole oder durch Auswahl in entsprechenden Listenfeldern die gewünschten Zeichen- und Absatzformate oder Formatvorlagen zuweist. Erst wenn der Anwender versucht, eine Word Perfect-Datei in Microsoft Word zu laden, aber nicht den passenden Konvertierungsfilter installiert hat, der die Word Perfect-Formatbefehle in die von Word verwendeten Formatbefehle umwandelt, wird ihm schmerzlich bewusst, dass heute praktisch jedes Textverarbeitungsprogramm seinen eigenen Satz von Formatbefehlen definiert. Wozu dieser Ausflug in die Interna der Textverarbeitung? Auch der FrontPage-Editor hat sein eigenes Format mit eigenen Formatbefehlen – die so genannten HTML-Tags.
17
HTML-Editor und Webmanager HTML steht für Hypertext Markup Language, eine Metasprache zur Erstellung von elektronischen Dokumenten, die Hyperlinks verwenden können. Webseiten werden daher in HTML aufgesetzt, und ob Sie von einer Webseite, einem Webdokument oder einem HTML-Dokument sprechen, ist im Grunde nur eine Frage der Betonung (je nachdem, ob Sie mehr auf die Verwendung oder die Formatsprache des Dokuments abzielen). HTML erlaubt allerdings nicht nur die Einrichtung von Hyperlinks (siehe Kapitel 2 »Hyperlinks«), sondern dient auch der Formatierung des Textes. HTML ist allerdings kein gewöhnliches Editorformat wie die Formate von Microsoft Word oder Word Perfect, denn
왘
HTML ist eine standardisierte Sprache und nicht an eine spezielle Software oder einen Software-Hersteller gebunden. Stattdessen ist es Aufgabe der Editor- und Browser-Hersteller, ihre Software an den HTML-Standard anzupassen.
왘
Der HTML-Befehlssatz ist recht klein und leicht zu handhaben (ganz im Gegensatz beispielsweise zum Word- oder TEX-Format).
왘
Die HTML-Tags dienen im Grunde weniger der Formatierung als vielmehr der Beschreibung der Seite und ihres Inhalts. Die im obigem Beispiel verwendeten Tags ,
und <em> sind beispielsweise keine wirklichen Formatierungsanweisungen, die festlegen, ob der eingeschlossene Text groß und fett oder kursiv darzustellen ist. Vielmehr beschreiben diese Tags den Aufbau des Dokuments: ist eine Überschrift,
ein eigener Absatz und <em> eine wichtige Textpassage. Dass wir beim Betrachten der Webseite in einem Browser (oder auch der Normal-Ansicht von FrontPage) eine formatierte Webseite mit großer, fetter Überschrift und kursiver Textpassage sehen, liegt daran, dass das der Browser die Tag-Beschreibungen nutzt, um das Dokument formatiert anzuzeigen. Für das Design von Webseiten bedeutet dies, dass ein und dieselbe Webseite in verschiedenen Webbrowsern durchaus unterschiedlich angezeigt werden kann – ein wichtiger Punkt, den man bei der Erstellung von Webseiten stets im Hinterkopf haben sollte! (Wer dezidierter als mit den HTML-Tags festlegen möchte, wie seine Webseiten in den Browsern anzuzeigen sind, kann dies mithilfe von CSS-Stylesheets, siehe Kapitel 2 »Formatvorlagen und Cascading Stylesheets«).
18
Kapitel 1: FrontPage – Ein Programm stellt sich vor Die drei Ansichten des FrontPage-Editors Das Auffälligste am FrontPage-Editor – was ihn von anderen Editoren wie Notepad oder Word unterscheidet – sind die drei Ansichten, unter denen man die zu bearbeitende Webseite betrachten kann und die über die Register am unteren Rand des Editors ausgewählt werden können. Sofern Sie den Ausführungen aus dem obigen Abschnitt gefolgt sind, dürften Sie keine Schwierigkeiten haben, auf den Sinn und Zweck der verschiedenen Ansichten zu schließen.
Ansicht
Bedeutung
NORMAL
In dieser Ansicht bearbeiten Sie Ihre Webseiten wie gewöhnliche Textdokumente.
HTML
Diese Ansicht zeigt den HTML-Code, den der Editor für Ihre Webseite erzeugt hat. Sie können diese Ansicht nutzen, um den HTML-Code direkt zu bearbeiten.
Tabelle 1.1: Ansichten des FrontPage-Editors 19
HTML-Editor und Webmanager
Ansicht
Bedeutung
VOR-
In obigem Abschnitt wurde bereits erwähnt, dass die HTMLFormatierungen eher Empfehlungen als strenge Formatierungsbefehle darstellen. In der Vorschau können Sie prüfen, wie Ihr Webdokument im Internet Explorer (bzw. dem von Ihnen installierten Browser) dargestellt wird. Ändern Sie auch mal die Größe des Editorfensters, um zu testen, wie der Browser reagiert.
SCHAU
Tabelle 1.1: Ansichten des FrontPage-Editors (Forts.) Um es noch einmal ganz deutlich zu sagen: alle drei Ansichten beruhen auf ein und demselben Text – dem HTML-Code. Die unterschiedlichen Ansichten kommen dadurch zustande, dass dieser Code je nach Ansicht unterschiedlich umgesetzt wird (oder 1:1 angezeigt wird, wie in der HTMLAnsicht). Wenn Sie die Webseite speichern, wird der HTML-Code im Textformat abgespeichert, d.h., Sie können das Dokument mit einem beliebigen Editor (beispielsweise Word) laden und weiterbearbeiten. Mehrere Seiten gleichzeitig bearbeiten Sie können mehrere Seiten gleichzeitig zur Bearbeitung in den Editor laden. Die zuletzt aktivierte Datei wird dann im Editorfenster angezeigt. Jede in den Editor geladene Datei ist mit einem Register im oberen Rahmen des Editors verbunden, über die Sie die Datei auswählen und aktivieren können.
20
Kapitel 1: FrontPage – Ein Programm stellt sich vor
Bild 1.5: Mehrere Seiten im Editor
Der FrontPage-Webmanager
Hinweis
Die Funktionalität des FrontPage-Managers ist auf die restlichen FrontPageAnsichten verteilt und dient der Bearbeitung und Organisation von Webs.
Zur Erinnerung: Ein Web ist ein Verbund beliebig vieler zusammengehöriger Webseiten und Hilfsdateien wie Bilder, Klänge, Skripte etc.
Wenn Sie mit FrontPage ein neues Web anlegen, richtet FrontPage für dieses Web auf Ihrer Festplatte ein eigenes Verzeichnis mit verschiedenen Unterverzeichnissen ein, auf die Sie die Dateien des Webs verteilen können. So bleiben die Dateien zusammen, können leicht gefunden und zur Bearbeitung geöffnet werden, können zusammen auf einen Internet-Webserver hochgeladen werden. Die verschiedenen FrontPage-Ansichten helfen Ihnen aber nicht nur bei der Organisation, sondern auch bei der Planung, Erstellung und Wartung Ihrer Webs. Wir werden darauf in Kapitel 3, wenn wir uns mit der Erstellung von Webs aus mehreren Webseiten beschäftigen, noch in angemessener Ausführlichkeit eingehen.
21
Webseite oder Web?
Webseite oder Web? Dass man mit FrontPage sowohl einzelne, unabhängige Webseiten als auch ganze Webs bearbeiten kann, wurde schon mehrfach erwähnt. Womit aber soll man nun anfangen, wenn man eine Homepage fürs World Wide Web oder eine Webseite zur Veröffentlichung auf dem firmeneigenen Webserver erstellen möchte? Was genau ist überhaupt ein Web im Vergleich zu einer Webseite? Kurz gesagt, versteht man unter einer Webseite ein Textdokument, das im HTML-Format vorliegt und in einer Datei mit der Extension .htm oder .html gespeichert wird. Zu so einer Webseite können durchaus weitere Dateien gehören, beispielsweise in die Webseite eingebettete Bilder oder Sounds. Gehören mehrere solcher Webseiten logisch und inhaltlich zusammen, spricht man von einem Web. Vielleicht planen Sie ja gerade an Ihrem ersten Internetauftritt und haben dabei festgestellt, dass Sie über recht viel Material verfügen: einen Begrüßungstext, eine Fotogalerie, einen Lebenslauf, eine Auflistung Ihrer Hobbys. Statt all dies untereinander in eine Webseite zu packen, entschließen Sie sich, die Informationen auf eine Startseite und drei untergeordnete, über Hyperlinks erreichbare Webseiten für die Fotogalerie, den Lebenslauf und die Hobbys zu verteilen. Voilà, ein Web. Es gibt noch weitere Möglichkeiten, den Begriff Web zu definieren, beispielsweise: »Alle Webseiten und Dateien, die in einem gemeinsamen Verzeichnis (gegebenenfalls mit Unterverzeichnissen) auf einem Webserver verwaltet werden und über eine gemeinsame Startseite erreichbar sind.« Richtig griffig ist allerdings keine dieser Definitionen, denn ein Web kann auch nur aus einer einzigen Webseite bestehen und es kann zur Not durchaus auch über mehrere, voneinander unabhängige Verzeichnisse verteilt sein. Trotzdem ist die Vorstellung von einem Web als einem Verbund aus logisch und inhaltlich zusammengehöriger Dateien (unabhängig davon, ob dies nur eine oder mehrere Dateien sind), die zusammen abgespeichert, verwaltet und veröffentlicht werden, nicht falsch und zweifelsohne recht eingängig.
Mit einem Web starten! Nachdem die Terminologie nun geklärt wäre, greifen wir die eingangs gestellte Frage noch einmal auf. Sollten Sie neu aufzusetzende Webseiten als einzelne Webseiten oder als Web verwalten?
22
Kapitel 1: FrontPage – Ein Programm stellt sich vor Im Allgemeinen werden Sie mit einem Web starten, denn:
왘
Wenn Sie ein neues Web einrichten, stellt Ihnen FrontPage hierzu verschiedene Vorlagen und Assistenten zur Verfügung, die auch gleich die ersten Webseiten für Sie anlegen.
왘
Die einzelnen Seiten eines Webs können in den Ansichten SEITE und ORDNER mühelos per Doppelklick mit der Maus zur Bearbeitung in den Editor geladen werden.
왘
Selbst wenn Sie kein größeres Web planen, sondern nur eine einzelne HTML-Seite aufsetzen wollen, ist es ganz praktisch, für diese Seite ein Web anlegen zu lassen. Zum einem übernimmt FrontPage dann die Organisation der Dateien auf Ihrer Festplatte (bedenken Sie, dass zu einer Webseite ja neben der HTML-Datei auch Bilddateien und andere Multimedia-Dateien gehören können), zum anderen stehen bestimmte FrontPage-Features wie zum Beispiel die HYPERLINKS-Ansicht oder die Komponente zur Einrichtung eines Seitenbanners nur für Webs zur Verfügung.
왘
Der Einstieg über ein Web fördert bei Anfängern das weborientierte Denken.
Mit einzelnen Webseiten werden Sie arbeiten, wenn die Seiten in Webs organisiert sind, die von einem anderen Webtool verwaltet werden, Sie aber aus irgendeinem Grund zur Bearbeitung der Seiten FrontPage bevorzugen, oder wenn die Seiten überhaupt nicht für die Einbindung in ein Web bestimmt sind, sondern beispielsweise als E-Mail verschickt oder als Hintergrundseite für Ihr Win98-Desktop verwendet werden sollen. Beispielwebs einrichten Um die im nächsten Kapitel beschriebenen Techniken nachzuvollziehen, genügt es in den meisten Fällen, wenn Sie einzelne Webseiten anlegen (Befehl LEERE SEITE auf der Seite NEUE SEITE ODER NEUES WEB des Aufgabenbereichs oder Klick auf das Symbol NEUE NORMALE SEITE ERSTELLEN). Wenn Sie möchten, können Sie Ihre Testseiten aber auch in einem großen Web oder mehreren einzelnen Webs verwalten. Dazu müssen Sie lediglich wissen, wie man neue Webs anlegt, Webseiten in Webs aufnimmt, Webseiten aus Webs in den Editor lädt, Webs schließt, speichert und bei Bedarf später wieder öffnet.
23
Webseite oder Web? Webs anlegen
Bild 1.6: Neues Web anlegen Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag LEERES WEB. Wählen Sie in dem erscheinenden Dialogfeld die Vorlage STANDARDWEB aus und geben Sie als Adresse den Verzeichnispfad (in Bild 1.7 C:\MeineWebs\) und den Namen (DemoWeb1) des Webs an. FrontPage legt dann unter dem angegebenen Verzeichnispfad ein Unterverzeichnis mit dem Namen des Webs an und speichert darin die Dateien des Webs. Webseiten aus Webs in den Editor laden Wenn Sie die Webvorlage STANDARDWEB gewählt haben, hat FrontPage in dem Web bereits eine erste Webseite für Sie angelegt. Standardmäßig heißt diese Datei index.htm. (Wenn Sie das Web auf einem Webserver anlegen, siehe nächstes Unterkapitel, kann die Datei auch default.htm oder noch anders heißen. Dies hängt vom verwendeten Webserver ab.)
24
Kapitel 1: FrontPage – Ein Programm stellt sich vor Um diese Datei zur Bearbeitung in den Editor zu laden, wechseln Sie zur Ordneransicht. Im Inhaltsverzeichnis sollten Sie nun den Eintrag für die Datei sehen. Doppelklicken Sie auf den Dateinamen. Webseiten in Web aufnehmen Um dem Web eine neue Webseite hinzuzufügen, legen Sie einfach eine neue Webseite an (Symbol NEUE NORMALE SEITE ERSTELLEN oder Befehl LEERE SEITE im Aufgabenbereich) und speichern diese im Verzeichnis des Webs. In der Ordneransicht können Sie kontrollieren, ob die Webseite dem Web wirklich hinzugefügt wurde.
Webs speichern, schließen, wieder öffnen Um alle Seiten eines Webs zu speichern, rufen Sie den Befehl DATEI/ALLES SPEICHERN auf. Um ein Web zu schließen, verwenden Sie den Befehl DATEI/WEB SCHLIESSEN.
Um ein Web wieder zu öffnen, wählen Sie das Web im Untermenü DATEI/ZULETZT GEÖFFNETE WEBS aus oder
왘
rufen den Befehl DATEI/WEB ÖFFNEN auf und durchforsten die Verzeichnisstruktur nach dem Namen/Verzeichnis des Webs.
Achtung
왘
Webs, die nicht mit FrontPage angelegt werden, werden von FrontPage auch nicht als solche erkannt. Sie können die Webseiten dann entweder einzeln bearbeiten (Befehl DATEI/ÖFFNEN statt DATEI/WEB ÖFFNEN) oder das Verzeichnis öffnen und von FrontPage in ein FrontPage-Web umorganisieren lassen – letzteres ist allerdings nicht unbedingt zu empfehlen, wenn das Web weiterhin auch noch mit einem anderen Programm bearbeitet wird. (Es ist allerdings möglich FrontPage-Webs in normale Webverzeichnisse zurückzuverwandeln, siehe Kapitel 3, Abschnitt »Webs in FrontPage-Webs umwandeln«.)
25
Verzeichnispfad oder lokaler Server
Querverweis
Bild 1.7: Bestehendes Web wieder öffnen
Das Öffnen, Anlegen, Ausbauen und Verwalten von Webs wird ausführlich in Kapitel 3 beschrieben.
Verzeichnispfad oder lokaler Server Nachdem Sie Ihre Webseiten oder Webs bearbeitet haben, speichern Sie sie auf Ihrer Festplatte. Wo und unter welchem Namen die Dateien gespeichert werden, wird von FrontPage an entsprechender Stelle abgefragt.
왘
Für einzelne Webseiten werden Name und übergeordnetes Verzeichnis beim ersten Abspeichern abgefragt.
왘
Für Webs werden Name und übergeordnetes Verzeichnis beim Anlegen des Webs abgefragt.
Sie könnten beispielsweise auf Ihrer Festplatte ein Verzeichnis C:\Eigene Webs anlegen und unter diesem Ihre Webseiten und Webs abspeichern.
26
Kapitel 1: FrontPage – Ein Programm stellt sich vor Eine andere interessante Option ist, die Webseiten oder Webs unter dem Dokumentenverzeichnis eines lokalen Webservers abzuspeichern. Das Speichern auf einem lokalen Webserver ist zwar nicht unbedingt nötigt, hat aber den Vorteil, dass das Web unter realistischen Bedingungen getestet werden kann. Zudem funktionieren bestimmte fortgeschrittene Designtechniken überhaupt nur, wenn die Webseiten von einem Webserver abgerufen werden (beispielsweise Datenbankverknüpfungen oder CGI-gestützte Formulare).
Hinweis
An sich ist die Einrichtung eines lokalen Webservers gar nicht so schwierig. Kompliziert wird sie erst durch die ominösen FrontPage-Servererweiterungen, die ich Ihnen weiter unten kurz vorstellen möchte. Der folgende Abschnitt beschreibt die Installation eines einfachen, lokalen Webservers, der nicht mit den FrontPage-Servererweiterungen zusammen arbeitet. Er richtet sich an Leser, die noch nie mit einem lokalen Webserver gearbeitet haben und einen leichten Einstieg suchen.
Ich möchte noch einmal betonen, dass die Einrichtung eines lokalen Webservers keine Voraussetzung für die Arbeit mit FrontPage ist. Sie können diesen und den folgenden Abschnitt also auch ruhig überspringen und in Kapitel 2 weiter lesen.
Vorbereitung für die Installation eines lokalen Webservers Um einen lokalen Webserver auf Ihrem Rechner betreiben zu können, muss der Rechner als Netzwerk-Client eingerichtet und das Netzwerkprotokoll TCP/IP installiert sein. Kontrollieren Sie also zuerst, ob dies auf Ihrem PC der Fall ist. 1. Doppelklicken Sie in der Systemsteuerung (Aufruf über START/EINSTELLUNGEN) auf das Symbol NETZWERK. Wenn Sie im Listenfeld auf der Seite KONFIGURATION den Eintrag CLIENT FÜR MICROSOFT-NETZWERKE und einen Eintrag für TCP/IP sehen (siehe Bild 1.9), brauchen Sie nichts weiter zu tun. Falls nicht müssen Sie dies nachholen. 2. Wenn der Rechner noch nicht als CLIENT FÜR MICROSOFT-NETZWERKE eingerichtet ist, klicken Sie auf den Schalter HINZUFÜGEN, wählen Sie die Option PROTOKOLL und im nachfolgenden Dialog NETWORK CLIENT
27
Verzeichnispfad oder lokaler Server AUSWÄHLEN die Kombination MICROSOFT/CLIENT FÜR MICROSOFTNETZWERKE aus. Das TCP/IP-Protokoll wird dabei meist mit eingerichtet.
Wenn der Rechner bereits als CLIENT FÜR MICROSOFT-NETZWERKE eingerichtet ist und nur das TCP/IP-Protokoll fehlt, klicken Sie auf den Schalter HINZUFÜGEN, wählen Sie die Option PROTOKOLL und im nachfolgenden Dialog NETZWERKPROTOKOLL AUSWÄHLEN die Kombination MICROSOFT/TCP/IP aus.
Bild 1.8: Dieser Rechner ist bereits korrekt eingerichtet.
Lokalen Webserver einrichten Als Webserver verwenden wir hier den OmniHTTPd-Server von Omnicron. Der OmniHTTPd-Server ist ein absolut vollwertiger Webserver mit Unterstützung für Perl, SSI und PHP. Gegenüber dem Microsoft-Webservern, Personal Web Server (PWS) und Internet Information Server (IIS), 28
Kapitel 1: FrontPage – Ein Programm stellt sich vor
Querverweis
besticht er durch seine einfache Installation und Konfigurierbarkeit. Zudem arbeitet er nicht mit den FrontPage-Servererweiterungen zusammen, was von Vorteil sein kann, wenn der eigentliche Zielserver die FrontPageServererweiterungen ebenfalls nicht unterstützt. PWS und IIS sind im Anhang beschrieben.
Den OmniHTTPd-Webserver von Omnicron kann man über die Website http://www.omnicron.ab.ca beziehen. Neben der Vollversion, die man käuflich erwerben kann, gibt es immer auch eine aktuelle kostenlose Version, die man für den privaten Gebrauch herunterladen kann. Diese besitzt zwar ein Verfallsdatum, kann aber vor dieser Frist durch eine neuere, kostenfreie Version ersetzt werden.
Bild 1.9: Website zum Herunterladen des OmniHTTPd-Webservers
29
Verzeichnispfad oder lokaler Server Nachdem Sie die exe-Datei des OmniHTTPd-Webservers auf Ihre Festplatte heruntergeladen haben, brauchen Sie diese nur doppelt anzuklicken, um den Installationsvorgang zu starten. Folgen Sie den Anweisungen in den Dialogfeldern und richten Sie den Server so ein, dass er beim Booten automatisch geladen wird.
Achtung
Läuft der Server, erscheint in der Windows-Taskleiste ein entsprechendes Symbol für den Server. Läuft der Server nicht, kann er über seine Programmgruppe (Aufruf über START/PROGRAMME) gestartet werden. Sie können keine zwei Webserver gleichzeitig ausführen, wenn diese den gleichen Port (für Webseiten üblicherweise 80) überwachen. Wenn Sie also den OmniHTTPd-Server verwenden wollen, achten Sie darauf, dass Sie nicht bereits zuvor schon einmal den PWS oder IIS installiert haben und dieser ebenfalls automatisch beim Booten gestartet wird.
Server starten und konfigurieren Wenn der Server nicht bereits automatisch beim Booten des Betriebssystems gestartet wird, können Sie ihn jederzeit über die bei der Installation eingerichtete Omnicron-Programmgruppe manuell starten. Um den Webserver anzuhalten, weiter auszuführen oder zu schließen, brauchen Sie nur mit der rechten Maustaste auf das Symbol des Webservers in der Taskleiste zu klicken und den entsprechenden Befehl aufzurufen. Zur Konfiguration des Webservers rufen Sie das Dialogfenster CONFIGURATION auf. Klicken Sie dazu mit der rechten Maustaste auf das Symbol des Webservers in der Taskleiste und rufen Sie den Befehl PROPERTIES auf oder wählen Sie den Befehl OMNIHTTPDADMINISTRATION in der OmniHttpdProgrammgruppe auf. Grundsätzlich ist der Webserver aber von Anfang an so eingerichtet, dass Sie die Konfiguration nicht ändern müssen.
Webs auf dem lokalen Webserver anlegen Bei der Installation wird für den lokalen Webserver ein eigenes Verzeichnis angelegt. Dieses Dokumenten- oder Basisverzeichnis ist das übergeordnete Verzeichnis, unter dem alle auf dem Webserver veröffentlichten Webseiten und Webs abgespeichert werden müssen. Das Dokumentenverzeichnis des 30
Kapitel 1: FrontPage – Ein Programm stellt sich vor OmniHTTPd-Webservers ist das Unterverzeichnis htDocs. Sofern Sie OmniHTTPd also in das Verzeichnis C:\httpd installiert haben, lautet der vollständige Pfad zum Dokumentenverzeichnis C:\httpd\HtDocs. Um den Server zu testen, sollten Sie jetzt mit FrontPage ein neues Web auf dem Server (das heißt unter dem Dokumentenverzeichnis des Servers) anlegen.
Bild 1.10: Web auf lokalem Webserver anlegen 1. Wählen Sie im Aufgabenbereich die Seite NEUE SEITE ODER NEUES WEB auf, klicken Sie auf den Eintrag STANDARD WEB und wählen Sie im erscheinenden Dialog die Webvorlage STANDARDWEB aus. 2. Geben Sie als Adresse für das Web c:\httpd\htDocs\meinWeb ein. c:\httpd\ htDocs ist dabei das Dokumentenverzeichnis des lokalen Webservers. (Wenn Sie den Omnicron-Server in ein anderes Verzeichnis installiert haben, müssen Sie die Pfadangabe entsprechend abändern.) meinWeb ist der Name des neuen Webs und gleichzeitig das Unterverzeichnis, das von FrontPage für das Web angelegt wird. 3. Klicken Sie auf OK.
31
Verzeichnispfad oder lokaler Server 4. Klicken Sie in der Ansichtenleiste auf das Symbol ORDNER, um sich den Verzeichnisbaum des neu angelegten Webs anzeigen zu lassen. Doppelklicken Sie im Inhaltsfenster auf die Webseite index.htm. 5. Tippen Sie einen kleinen Text ein und speichern Sie die Webseite.
Auf Webs unter dem lokalen Webserver zugreifen Jetzt wollen wir die Webseite index.htm des Webs vom Webserver anfordern. 1. Öffnen Sie Ihren Browser. 2. Geben Sie im Adressfeld des Browsers den Namen des Webservers und den Pfad zu der gewünschten Webseite an. Lokale Webserver erhalten standardmäßig den Namen localhost zugewiesen. Beginnen Sie die Adresse also mit http://localhost/. Den Verzeichnispfad, der zu der Webseite führt, geben Sie relativ zum Dokumentenverzeichnis des Webservers an, in unserem Fall wäre dies also nur noch das Webverzeichnis meinWeb/. Zum guten Schluss wird noch die Datei selbst angeben: http://localhost/meinWeb/index.htm 3. Schicken Sie die Eingabe ab, damit der Browser die Datei vom Webserver anfordert.
Bild 1.11: Webseite, die vom lokalen Webserver geladen wurde 32
Kapitel 1: FrontPage – Ein Programm stellt sich vor
Die FrontPage-Servererweiterungen Microsoft wirbt damit, dass sich mit FrontPage professionelles Webdesign ganz ohne Programmierkenntnisse realisieren lässt. Nun, so ganz stimmt das natürlich nicht – das muss man bei aller Liebe und Begeisterung für FrontPage schon zugeben. Für jeden engagierten Webdesigner kommt früher oder später der Punkt, an dem er erkennen muss, dass er ohne Einarbeitung in HTML, CSS, JavaScript, CGI, Flash etc. nicht mehr weiter kommt beziehungsweise die eine oder andere Design-Idee nicht verwirklichen kann.1 Ganz falsch ist es aber auch nicht. Erstens ist professionelles Webdesign nicht vom Einsatz technischer Spielereien und Raffinessen abhängig. Zweitens stellt FrontPage für viele Effekte und typische Webelemente, wie Laufschriften, Hoverschaltflächen, Suchformulare etc., individuell konfigurierbare Standardlösungen zur Verfügung, die man ohne Programmierung nutzen kann. Einige dieser Elemente, beispielsweise die Webkomponenten Zugriffszähler und Websuche, beruhen auf den so genannten FrontPage-Servererweiterungen.
Was sind die FrontPage-Servererweiterungen? Die FrontPage-Servererweiterungen bestehen aus einem Satz von Dienstprogrammen (abgerundet durch Verwaltungstools und Dokumentationen), die auf dem Webserver installiert werden müssen, auf dem die FrontPageWebs abgespeichert oder veröffentlicht werden. Sind die Servererweiterungen auf einem Webserver installiert, können Sie
왘
Ihre Webs direkt auf dem Server speichern und auf dem Server bearbeiten. Im letzten Abschnitt haben Sie bereits gesehen, wie man ein Web auf einem lokalen Server ablegen und dort bearbeiten kann. Wir haben dabei die Tatsache genutzt, dass sich der Server zusammen mit FrontPage auf einem Rechner befindet und wir direkt auf das Dokumentenverzeichnis des Servers zugreifen können. Mit den FrontPage-
1.
Diesbezüglich kann ich Ihnen das Buch »Dynamic Webpublishing in 21 Tagen« empfehlen, das leicht verständlich, fundiert und gründlich in alle aktuellen Webtechnologien einführt (erschienen im Markt+Technik Verlag, ISBN: 3-82726003-5).
33
Die FrontPage-Servererweiterungen Servererweiterungen funktioniert dies auch, wenn der Server auf einem anderen Rechner (beispielsweise dem Intranet-Rechner Ihrer Firma oder dem Internet-Rechner Ihres Internet Providers) installiert ist. Als Adresse des neu anzulegenden (oder zu öffnenden) Webs geben Sie dann statt eines Verzeichnispfades einen URL an, der mit dem Namen des Servers beginnt, beispielsweise http://servername/ meinWeb.
왘
Ihre lokalen Webs bequem und einfach auf einen Internet-Server hochladen. Wenn Sie Webs direkt auf einem Internet- oder Intranet-Server bearbeiten, hat dies den Nachteil, dass die von Ihnen vorgenommenen Änderungen direkt für die Besucher Ihres Webs sichtbar werden. Im Falle eines Internet-Servers entstehen zusätzliche Kosten für das Aufrechthalten der Internet-Verbindung. Aus diesen Gründen, geht man meist so vor, das man die Webs auf der lokalen Festplatte anlegt und nach Fertigstellung auf den Internet- oder Intranet-Webserver hochlädt. Sind auf dem Webserver die FrontPage-Servererweiterungen installiert, gestaltet sich das Hochladen des Webs mithilfe des Befehls DATEI/WEB VERÖFFENTLICHEN mehr als einfach. Ansonsten greift man besser zu einem passenden FTP-Programm (siehe Kapitel 5 »Web veröffentlichen«).
왘
Zusätzliche Optionen zur Verwaltung der Webs nutzen (beispielsweise vom Webserver unterstützte Möglichkeiten zur Einrichtung von Zugriffsrechten).
왘
Die oben erwähnten Webelemente (Zugriffszähler, Websuche, Diskussionforen) nutzen. Das Problem bei diesen Elementen ist, dass zu ihrer Realisierung Hilfsprogramme benötigt werden, die auf dem Webserver ausgeführt werden müssen. Diese Programme sind in den Servererweiterungen enthalten und wenn die Servererweiterungen auf dem Webserver installiert sind, funktionieren die Elemente wie gewünscht. (Sie können die Webkomponente Zugriffszähler auch in Ihre Webseiten aufnehmen, wenn der Webserver, auf dem Sie Ihr Web veröffentlichen, die Servererweiterungen nicht unterstützt, doch werden die Besucher Ihrer Webseiten dann keinen Zugriffszähler zu sehen bekommen.)
34
Hinweis
Kapitel 1: FrontPage – Ein Programm stellt sich vor
Wenn Sie als lokalen Webserver den Personal Web Server (PWS) oder den Internet Information Server (IIS) verwenden, können Sie auf diesen die FrontPage-Servererweiterungen installieren (mit dem OmniHttpd-Server arbeiten die Servererweiterungen leider nicht zusammen). Wenn Sie den lokalen Webserver vor der Installation von FrontPage installieren, werden die Servererweiterungen von FrontPage automatisch für den Webserver eingerichtet. Ansonsten müssen Sie das Setup-Programm für die Servererweiterungen – das Sie auf Ihrer Office/FrontPage-CD finden oder von den FrontPage-Seiten der Microsoft-Website herunterladen können – extra nachinstallieren.
Wer braucht die FrontPage-Servererweiterungen? Die FrontPage-Servererweiterungen bieten etliche Annehmlichkeiten und fortgeschrittene Optionen, aber sie sind nicht unverzichtbar. Als Einsteiger auf dem Gebiet des Webdesigns werden Sie vor allem an den unterstützten Webelementen und dem vereinfachten Hochladeprozess interessiert sein. Da Sie aber vermutlich keinen eigenen Webserver betreiben, sondern Ihre Webs auf dem Webserver Ihrer Firma oder Ihres Internet Providers veröffentlichen wollen, liegt die Entscheidung für oder wider die Servererweiterungen nicht bei Ihnen. Erkundigen Sie sich daher bei Ihrem Webserver-Administrator, ob die FrontPage-Servererweiterungen auf dem Webserver installiert sind. Wenn ja, um so besser; wenn nein, ist dies auch kein Beinbruch. Das Hochladen mit einem ordentlichen FTP-Programm ist nicht so schwierig (siehe Kapitel 5.6.2) und auf die FrontPage-Komponenten für Websuche, Diskussionsforum und Zugriffszähler kann man sicherlich auch verzichten (für Zugriffszähler bieten die meisten Webserver-Betreiber übrigens auch eigene Implementierungen an, die man nutzen kann).
35
Kapitel 2 Webdesign mit dem FrontPage-Editor Das ABC der Textverarbeitung Auch auf die Gefahr hin, dass ich mit den folgenden Erklärungen Eulen nach Athen trage und einen Großteil der Leser langweile, möchte ich es dennoch nicht versäumen, die wichtigsten allgemeinen Grundlagen in wenigen Worten schnell zusammenzufassen – nur um sicherzugehen, dass bestimmte Grundkenntnisse bei allen Lesern gegeben sind. Die nachfolgenden Abschnitte und Unterkapitel sind dann wieder interessanter und speziell der Textbearbeitung mit dem FrontPage-Editor gewidmet.
Text eingeben
Bild 2.1: Einfügemarke und Textcursor Fast schäme ich mich für diesen Absatz, doch ich weiß aus eigener Erfahrung, dass gerade die vermeintlich »einfachsten« Dinge für den Anfänger oftmals die größten Hürden darstellen.
Das ABC der Textverarbeitung Ich wage daher anzumerken, dass die Zeichen, die Sie über die Tastatur eintippen, immer vor der Position im Text eingefügt werden, die durch die Einfügemarke (der dicke senkrechte Balken) gekennzeichnet ist. Durch einfachen Klick mit der linken Maustaste können Sie die Einfügemarke an eine beliebige Stelle im Text setzen (die Position der Maus wird durch das Textcursor-Symbol – ein dünnes, senkrechtes I-förmiges Symbol – angezeigt).
Text markieren Mit der (æ___)-Taste können Sie einzelne Zeichen vor der Einfügemarke löschen. Um schnell größere Textpassagen zu löschen, markiert man zuerst den zu löschenden Text. Dies geschieht einfach, indem man mit der linken Maustaste auf den Anfang der zu löschenden Textstelle klickt, den Textcursor dann bei gedrückt gehaltener Maustaste zum Ende der zu löschenden Textstelle bewegt und dort die Maustaste wieder loslässt. Die Textstelle wird dann schwarz hinterlegt, um anzuzeigen, dass sie markiert wurde. Die markierte Textstelle können Sie dann als ganzes Löschen. Durch Aufruf des Befehls BEARBEITEN/LÖSCHEN oder 왘 durch Drücken der (Entf)-Taste.
왘
Verschieben. Indem Sie nochmals mit der linken Maustaste in den markierten Text klicken und mit gedrückter Maustaste die Textpassage an eine neue Stelle verschieben.
왘
In die Zwischenablage kopieren. Durch Aufruf des Befehls BEARBEITEN/KOPIEREN oder durch Drücken der Tastenkombination (Strg)+(C).
Wenn Sie in ein Wort doppelklicken, wird das ganze Wort automatisch markiert. Wenn Sie danach die Maus bei gedrückter Maustaste weiterbewegen, wird der Text wortweise markiert. Wenn Sie mit dem Mauscursor in den linken Rand vor einer Textzeile klicken, wird die ganze Textzeile markiert.
Arbeitsschritte rückgängig machen Wenn Sie sich bei der Arbeit im FrontPage-Editor einmal vertan haben oder einen schweren Fehler begangen haben, muss dies noch kein wirkliches Unglück sein, denn mit dem Befehl BEARBEITEN/RÜCKGÄNGIG können Sie die letzten 30 Arbeitsschritte zurücknehmen. 38
Kapitel 2: Webdesign mit dem FrontPage-Editor
Hinweis
Gerade komplexere Arbeitsschritte wie das Zuweisen einer neuen Formatvorlage, das ungewollte Einfügen eines größeren Textes aus der Zwischenablage oder einen globalen Ersetzen-Befehl sollten Sie nie von Hand rückgängig machen. Rufen Sie stattdessen den Befehl BEARBEITEN/RÜCKGÄNGIG auf. Beachten Sie, dass Texteingaben als ein Schritt behandelt werden. Für den Befehl BEARBEITEN/RÜCKGÄNGIG ist eine Texteingabe erst dann abgeschlossen, wenn Sie die (¢)-Taste drücken, um einen neuen Absatz zu beginnen oder eine Aktion mit der Maus durchführen.
Die Zwischenablage nutzen Die Zwischenablage ist ein von Windows verwalteter Zwischenspeicher, über den Daten ausgetauscht werden können. Um beispielsweise eine Textpassage zu kopieren, gehen Sie folgendermaßen vor: 1. Markieren Sie die zu kopierende Textstelle. 2. Rufen Sie den Befehl BEARBEITEN/KOPIEREN ((Strg)+(C)) auf. Der markierte Text wird daraufhin – unsichtbar für Sie – in die Zwischenablage gespeichert. Wenn Sie die Textpassage nicht kopieren, sondern verschieben wollen, müssen Sie den Befehl BEARBEITEN/AUSSCHNEIDEN ((Strg)+(X)) aufrufen. 3. Setzen Sie die Einfügemarke an die Position, vor der der Inhalt der Zwischenablage eingefügt werden soll. 4. Rufen Sie den Befehl BEARBEITEN/EINFÜGEN ((Strg)+(V)) auf. Der Inhalt der Zwischenablage wird vor der Einfügemarke eingefügt. Die Zwischenablage kann immer nur ein Objekt mehr oder weniger beliebigen Formats enthalten und ist global unter Windows gültig. Im einzelnen heißt dies,
왘
dass die Zwischenablage beim Einfügen nicht geleert wird. Der Inhalt der Zwischenablage bleibt also erhalten und kann beliebig oft aus der Zwischenablage eingefügt werden.
39
Das ABC der Textverarbeitung
왘
dass in der Zwischenablage immer nur ein Objekt gespeichert werden kann. Wenn Sie also mithilfe eines der Befehle BEARBEITEN/ KOPIEREN oder BEARBEITEN/AUSSCHNEIDEN einen Text in die Zwischenablage speichern, wird der alte Inhalt der Zwischenablage automatisch gelöscht.
왘
dass die Zwischenablage mehrere Formate unterstützt. Sie können in der Zwischenablage also nicht nur Texte, sondern auch Grafiken und andere Objekte speichern.
왘
dass die Zwischenablage unter Windows global ist. Es gibt also für alle unter Windows laufenden Anwendungen nur eine gemeinsame Zwischenablage. Dies hat Vorteile und Nachteile.
Nachteil: Angenommen Sie sind gerade dabei, eine Website für den »Verein zur Förderung endemisch auftretender Atavismen« zu erstellen. Da Sie wissen, dass der Name des Vereins mehrere Male auf der Website genannt wird, tippen Sie ihn einmal ein und kopieren ihn dann in die Zwischenablage. Danach brauchen Sie dort bei Bedarf nur die Tastenkombination (Strg)+(V) zu drücken, um den Vereinsnamen an der aktuellen Position in den Text einzufügen. Wenn Sie jetzt aber in ein Grafikprogramm wechseln und dort beispielsweise einen Bildausschnitt in die Zwischenablage kopieren, wird der Vereinsname durch den Bildausschnitt ersetzt. Zurück im FrontPage-Editor würden Sie dann beim nächsten Drücken von (Strg)+(V) den Bildausschnitt statt des Vereinsnamens einfügen. Vorteil: Der Nachteil ist aber auch ein Vorteil, denn er ermöglicht Ihnen Objekte zwischen verschiedenen Anwendungen auszutauschen. So können Sie beispielsweise auch Textpassagen aus Word-Dokumenten von Word aus in die Zwischenablage kopieren und dann im FrontPage-Editor über den Befehl BEARBEITEN/EINFÜGEN in die aktuelle Webseite aufnehmen (Beachten Sie, dass dazu eine Konvertierung vom Word-Format zu HTML erforderlich ist. Dabei können je nach Word-Version mehr oder weniger viel Formatierungen verloren gehen.)
40
Querverweis
Kapitel 2: Webdesign mit dem FrontPage-Editor
Zusätzlich zur globalen Windows-Zwischenablage steht für Office-Anwendungen mittlerweile auch eine Mehrfach-Zwischenablage zur Verfügung, in der bis zu 24 verschiedene Einträge abgelegt werden können. Mehr dazu in Kapitel 2 »Effizientes Arbeiten mit dem Editor«).
Sonderzeichen verwenden Je nach Tastatur und Tastaturbelegung (die unter Windows eingestellt wird), gibt es mehr oder weniger viele Sonderzeichen, die nicht über die Tastatur eingegeben werden können. Um trotzdem nicht auf diese Zeichen verzichten zu müssen, können Sie die wichtigsten Zeichen über den Befehl EINFÜGEN/SYMBOL einfügen. In dem erscheinenden Dialogfeld brauchen Sie nur auf das gewünschte Zeichen und dann auf den Schalter EINFÜGEN zu klicken (oder auf das Zeichen doppelzuklicken). Das ausgewählte Zeichen wird dann wie üblich vor der aktuellen Einfügemarke eingefügt.
Die Schriftarten Welches Zeichen im Editor erscheint, wenn Sie auf eine Taste Ihrer Tastatur tippen, hängt von der auf Ihrem System eingerichteten Tastaturbelegung ab. Wie dieses Zeichen im Editor dargestellt wird, hängt von der verwendeten Schriftart ab.
Hinweis
Eine Schriftart (engl. Font) ist eine Zusammenstellung von Buchstaben und Zeichen, die ein einheitliches Erscheinungsbild aufweisen. Zu diesem Erscheinungsbild gehören unter anderem das Schriftbild (Times New Roman, Courier, Arial etc.), der Schriftschnitt (normal, fett, kursiv) und die Schriftgröße (meist in Punkten angegeben). Hinter einer Schriftart steht eine Zeichentabelle, in der für jedes Zeichen, das in der Schriftart dargestellt werden kann, das Erscheinungsbild des Zeichens abgespeichert ist. Unter Windows nimmt man es mit der Terminologie nicht so ganz genau, sodass man als Font oder Schriftart das bezeichnet, was eigentlich das Schriftbild ist.
41
Das ABC der Textverarbeitung Ihr FrontPage-Editor stellt Ihnen alle Schriftarten zur Verfügung, die auf Ihrem System installiert sind. Dazu gehören beispielsweise:
왘
die mit Windows ausgelieferten Fonts (Arial, Courier und Times New Roman)
왘
die mit FrontPage ausgelieferten Fonts (Arial Black, Comic Sans MS, Impact, Trebuchet und Verdana)
왘
andere Software-Fonts (beispielsweise Fonts, die von Microsoft Word installiert wurden)
왘 왘
von Ihnen installierte Drucker-Fonts von Ihnen installierte PostScript-Fonts
Diese Schriftarten sind auf Ihrem System verfügbar und können im FrontPage-Editor zur Formatierung Ihrer Webseiten benutzt werden. Ob es jedoch sinnvoll ist, aus diesem oftmals allzu reichen Fundus zu schöpfen, ist eine andere Frage – der wir im Abschnitt zur Textformatierung nachgehen werden.
Zeichen- und Absatzformatierung Die Formatierung von Texten erfolgt im FrontPage-Editor auf zwei verschiedenen Ebenen:
왘 왘
auf der Ebene ganzer Absätze. auf der Ebene einzelner Zeichen und Textpassagen
Ein Absatz ist ein Textblock, der mit einer Absatzmarke (¶) abgeschlossen wurde. Die Absatzmarke geben Sie ein, indem Sie die (¢)-Taste drücken. Dies ist nicht mit einem einfachen Zeilenumbruch zu verwechseln! Zwar gehört zum Abschluss eines Absatzes immer auch ein Zeilenumbruch, doch im Gegensatz zum einfachen Zeilenumbruch, den Sie über den Befehl EINFÜGEN/MANUELLER UMBRUCH eingegeben können, legt die Absatzmarke noch fest, dass der ganze zugehörige Textblock einheitlich formatiert wird. Um einen Absatz zu formatieren, genügt es, die Einfügemarke irgendwo in den Absatz zu positionieren. Danach können Sie dem Absatz eine Formatvorlage zuweisen (über das Listenfeld FORMATVORLAGE oder den Befehl FORMAT/ABSATZ) sowie Einzug (linker und rechter Rand) und Ausrichtung (linksbündig, zentriert) des Absatzes festlegen, wobei die Ausrichtung auch
42
Kapitel 2: Webdesign mit dem FrontPage-Editor über die entsprechenden Symbole in der FORMAT-Symbolleiste zugewiesen werden kann. Innerhalb eines Absatzes kann also immer nur eine Absatzformatvorlage, eine Ausrichtung und ein Einzug verwendet werden. Alle Zeichen innerhalb eines Absatzes können noch einmal für sich formatiert werden – und zwar über den Befehl FORMAT/ZEICHEN beziehungsweise die entsprechenden Schaltflächen in der FORMAT-Symbolleiste. Auf diese Weise können Sie einzelnen Zeichen und Textpassagen spezielle Formate sowie individuelle Schriftarten, Schriftschnitte, Schriftgrößen, Darstellungen und Farben zuweisen.
Drucken Den Inhalt der gerade in Bearbeitung befindlichen Webseite können Sie selbstverständlich auch ausdrucken, und zwar sowohl als normales Textdokument wie auch als HTML-Code. Sie brauchen dazu lediglich auf die Schaltfläche mit dem Druckersymbol zu klicken oder den Befehl DATEI/ DRUCKEN aufzurufen. Zur Normal-Ansicht gibt es auch eine Druckvorschau, die Sie über den Befehl DATEI/SEITENANSICHT aufrufen. Aus der Seitenansicht heraus können Sie den Druck direkt über die Schaltfläche DRUCKEN starten. Wenn Sie die Seitenansicht ohne Drucken verlassen wollen, klicken Sie auf die Schaltfläche SCHLIESSEN (zu finden am Ende der Schalterleiste der Seitenansicht).
Zeilenumbruch und Silbentrennung Den Zeilenumbruch regeln die Browser. Grundsätzlich brauchen Sie sich beim Eintippen Ihrer Texte um den Zeilenumbruch keine große Gedanken zu machen. Fließtext wird vom FrontPage-Editor – und später von den Browsern – automatisch umgebrochen und zwar je nach verwendeter Absatzformatierung linksbündig, zentriert oder rechtsbündig.
Ausrichtung Um einem Absatz eine andere Ausrichtung zuzuweisen, markieren Sie den Absatz (wozu es schon genügt, die Einfügemarke in den Absatz zu positionieren), rufen dann über den Befehl FORMAT/ABSATZ das Dialogfeld ABSATZ auf und wählen die gewünschte Ausrichtung im Feld AUSRICHTUNG – oder Sie klicken einfach auf eine der entsprechenden Schaltflächen in der FORMAT-Symbolleiste. 43
Zeilenumbruch und Silbentrennung
Ausrichtung
Symbol
Beispiel
Linksbündig
Dies ist ein linksbündig ausgerichteter Absatz. Sie erkennen dies daran, dass der Text am linken Rand einheitlich anfängt, während er am rechten Rand »flattert«.
Zentriert
Dies ist ein zentrierter Absatz. Sie erkennen dies daran, dass der Text am linken Rand und am rechten Rand »flattert« und die einzelnen Zeilen des Absatzes zentriert sind.
Rechtsbündig
Dies ist ein rechtsbündig ausgerichteter Absatz. Sie erkennen dies daran, dass der Text am rechten Rand einheitlich anfängt, während er am linken Rand »flattert«.
Blocksatz
Der Absatz wird links und rechts bündig ausgerichtet.
Tabelle 2.1: Absatzausrichtung
Umbruch im Browser In konventionellen Texteditoren wie Microsoft Word oder Word Perfect legen Sie für Ihr Dokument eine Seitengröße fest und können sich dann darauf verlassen, dass Ihr Editor Fließtext, dessen Zeilen über die Seitenbreite hinausgeht, automatisch umbricht. Zur Unterstützung dieses automatisches Umbruchs können Sie noch selbst festlegen, wie größere Worte getrennt werden sollen – dann drucken Sie das Dokument aus. Webdokumente sind allerdings weniger zum Ausdrucken als vielmehr zum Anschauen innerhalb eines Browsers gedacht. Es gibt daher keine Seite und keine Seitengröße, sondern nur die Anzeigefläche eines Browsers und die Größe des Browser-Fensters. Damit nun aber der Leser eines Webdokuments nicht laufend mit der horizontalen Bildlaufleiste von Anfang einer Zeile zu deren Ende und wieder zurück scrollen muss, brechen Webbrowser den anzuzeigenden Text automatisch nach Maßgabe ihres Anzeigebereiches um.
44
Kapitel 2: Webdesign mit dem FrontPage-Editor Für Sie als Web-Autor bedeutet dies,
왘
dass Sie sich keine Gedanken über verschiedene Bildschirmauflösungen zu machen brauchen,
왘
dass Sie keine Wörter trennen sollten, denn Wörter, die Sie in bester Absicht für eine bestimmte Fensterbreite des Browser getrennt haben, rücken bei Vergrößerung oder Verkleinerung des BrowserFensters nahezu unzweifelhaft in die Textmitte, und
왘
dass Sie mit Endlosbandwurmzusammensetzungen vorsichtig sein sollten, da diese nicht vom Browser getrennt und umgebrochen werden (ganz abgesehen von der zumeist fragwürdigen Diktion).
Eigene Zeilenumbrüche Wenn Sie selbst einen Zeilenumbruch forcieren wollen, haben Sie dazu mehrere Möglichkeiten:
왘
Wenn mit dem Zeilenumbruch ein neuer Absatz beginnen soll, drücken Sie einfach die (¢)-Taste. (Entspricht dem HTML-Tag
.) Sie definieren damit einen visuellen wie funktionellen Absatz: die einzelnen Absätze werden im Browser durch größere Zwischenräume gekennzeichnet und können unterschiedliche Absatzformate zugeteilt bekommen (siehe oben).
왘
Wenn Sie die Zeilenumbrüche innerhalb eines Absatzes lieber selbst festlegen wollen, statt diese vom Browser vornehmen zu lassen, weisen Sie dem Absatz die Formatvorlage FORMATIERT zu (der automatische Zeilenumbruch durch den Browser wird dann unterbunden).
왘
Wenn Sie nur einen Zeilenumbruch einfügen wollen, ohne einen neuen Absatz zu definieren, rufen Sie den Befehl EINFÜGEN/ MANUELLER UMBRUCH auf. (Entspricht dem HTML-Tag .)
Im letzteren Falle erscheint das Dialogfeld UMBRUCH, indem Sie festlegen können, wieweit die Zeile im Falle randständiger Bilder nach unten verschoben werden soll.
45
Text formatieren
Zeilenumbruch
Beschreibung
Normaler Zeilenumbruch
Keine Besonderheiten, auch nicht wenn ein Bild an den linken oder rechten Rand gerückt wurde (BILDEIGENSCHAFTEN, Seite ERSCHEINUNGSBILD, Feld AUSRICHTUNG: LINKS oder RECHTS). Entspricht dem Drücken der Tasten (ª) + (¢).
Linken Rand freihalten
Wenn sich ein Bild am linken Rand befindet, wird die Zeile nach unten verschoben, bis der linke Rand frei ist.
Rechten Rand freihalten
Wenn sich ein Bild am rechten Rand befindet, wird die Zeile nach unten verschoben, bis der rechte Rand frei ist.
Beide Ränder freihalten
Wenn sich an einem Rand oder an beiden Rändern ein Bild befindet, wird die Zeile nach unten verschoben, bis beide Ränder frei sind.
Tabelle 2.2: Zeilenumbruch und Bilder
Text formatieren In den seltensten Fällen werden Sie sich damit begnügen, Ihren Text einfach in den Editor einzutippen und danach abzuspeichern. Stattdessen werden Sie Ihren Text zuerst noch in ansprechender und sinnvoller Weise formatieren wollen – beispielsweise indem Sie Überschriften durch größere Schriftarten kennzeichnen, wichtige Begriffe durch Fettdruck aus dem Fließtext herausheben, längere Zitate einrücken etc. Die Mittel hierzu finden Sie in der FORMAT-Symbolleiste (kann über das Menü ANSICHT ein- und ausgeblendet werden), sowie in den Menübefehlen FORMAT/ZEICHEN und FORMAT/ABSATZ. Der Einsatz dieser Mittel entspricht dabei weitgehend der Art und Weise, in der Sie Ihre Text in Microsoft Word formatieren. Doch Vorsicht! Zwar entsprechen sich die Bedienelemente der beiden Editoren, aber aus der Gleichheit der Methodik darf man nicht auf vergleichbare Ergebnisse schließen. Tatsächlich unterliegt die Formatierung von Webseiten ganz eigenen Gesetzen, und wer seine Webseiten allzu unbedacht formatiert, läuft schnell Gefahr gegen diese Gesetze zu verstoßen.
46
Kapitel 2: Webdesign mit dem FrontPage-Editor
Gestaltung eines Beispieltextes Bevor ich Sie jedoch zu sehr mit theoretischen Details quäle, möchte ich Ihnen erst einmal anhand eines einführenden Beispiels zeigen, wie einfach die Formatierung im FrontPage-Editor im Grunde ist. Betrachten Sie dazu den Text aus Bild 2.2.
Bild 2.2: Zu formatierender Text In fünf Schritten lässt sich dieser Text in ansprechender Weise formatieren: 1. Überschrift festlegen. Markieren Sie die erste Zeile und weisen Sie ihr über das Popup-Listenfeld FORMATVORLAGE aus der FORMAT-Symbolleiste die Formatvorlage ÜBERSCHRIFT 2 zu. 2. Schrift verkleinern. Markieren Sie die zweite Zeile und wählen Sie dann im Listenfeld SCHRIFTGRAD eine Schriftgröße von 10 Punkten zu.
47
Text formatieren 3. Zitat-Format zuweisen. Markieren Sie den ersten großen Absatz und rufen Sie den Befehl FORauf. Setzen Sie im erscheinenden Dialogfeld ZEICHEN im Bereich EFFEKTE die Option ZITAT. MAT/ZEICHEN
4. Absatz einziehen. Lassen Sie den Absatz markiert und klicken Sie in der FORMAT-Symbolleiste auf die Schaltfläche EINZUG VERGRÖSSERN. 5. Text hervorheben. Markieren Sie im letzten Abschnitt den Titel des Buches und klicken Sie dann in der FORMAT-Symbolleiste auf die Schaltfläche für Kursivschrift.
Bild 2.3: Der formatierte Text Wie Sie bereits aus Kapitel 1 wissen, müssen die von Ihnen vorgenommenen Formatierungen in HTML-codierter Form in der Webseite abgespeichert werden. Den Effekt dieser Format-Befehle sehen Sie in der Normal- oder Vorschau-Ansicht, die HTML-Befehle in der HTML-Ansicht.
48
Kapitel 2: Webdesign mit dem FrontPage-Editor
Umsetzung der Formatierung im Browser Dies ist eine der Besonderheiten des HTML-Codes: Die gewünschte Formatierung wird nur grob vorgegeben, die genaue Umsetzung bleibt den verschiedenen Browsern überlassen. Welche Schriftgröße ein bestimmter Browser zur Darstellung einer Überschrift 2. Ebene verwendet, bleibt also dem Browser überlassen (ebenso wie Schriftart und Schriftschnitt). Der Grund für dieses Verfahren liegt einfach darin, dass Webseiten plattformübergreifend angezeigt werden. Indem man ein nur kleines unspezifisches Repertoire an plattformunabhängigen Formatbefehlen vorgibt und die Umsetzung dieser Formatbefehle den plattformabhängigen Browsern überlässt, erreicht man eine Darstellungsqualität, die weit besser ist als ein etwaiger kleinster gemeinsamer Nenner. Der Nachteil dieses Verfahrens ist, dass es die Gestaltungsmöglichkeiten der Web-Autoren stark einschränkt. Aus diesem Grunde wurden mittlerweile die so genannten Cascading Stylesheets (CSS) und das HTML-Tag <style> eingeführt, die es dem Autor erlauben, detaillierte Angaben zur Formatierung zu machen. Damit diese Formatierungen auch beim Besucher Ihrer Website ankommen, ist allerdings Voraussetzung, dass dessen Browser ebenfalls CSS unterstützt (mehr zu den Cascading Stylesheets erfahren Sie im nachfolgenden Abschnitt »Formatvorlagen und Cascading Stylesheets«).
Schriftarten Um einer Textpassage eine bestimmte Schrift zuzuweisen, brauchen Sie nur den entsprechenden Text zu markieren und den Menübefehl FORMAT/ ZEICHEN aufzurufen. Alle wichtigen Schrifteigenschaften können Sie dann über die Seite SCHRIFT des Dialogfelds ZEICHEN einstellen:
왘
Die Schriftart. Alle Schriftarten, die auf Ihrem System verfügbar sind, werden in diesem Listenfeld aufgeführt und können ausgewählt werden.
왘
Den Schriftschnitt, der bestimmt, ob Ihr Text normal, fett oder kursiv angezeigt wird.
왘
Die Schriftgröße, die für HTML in Größen von 1 bis 7 festgelegt wird (neben den HTML-Größen steht in Klammern die zugehörige Punktgröße).
왘
Die Farbe (siehe auch Abschnitt 2 »Farben und grafische Elemente«).
49
Text formatieren
왘
Besondere Effekte: Hierzu gehören Unterstrich, Höherstellung, Großbuchstaben etc. sowie die traditionellen HTML-Zeichenformate (siehe Abschnitt »Zeichenformate«).
Bild 2.4: Das Dialogfeld Zeichen Auf der Registerseite ZEICHENABSTAND können Sie noch die Laufweite der Zeichen festlegen – also ob die Buchstaben dichter zusammenstehen oder eher auseinandergerückt werden sollen. Auch Höher- und Tieferstellung können hier noch einmal eingestellt werden – allerdings diesmal inklusive Maßangabe. Die Standardschriftarten Wenn Sie im FrontPage-Editor eine neue Seite anlegen und mit dem Eintippen Ihres Textes beginnen, weist der Editor Ihren Absätzen als Vorgabe das Absatzformat STANDARD und die STANDARDSCHRIFTART zu.
50
Kapitel 2: Webdesign mit dem FrontPage-Editor Was verbirgt sich hinter diesen beiden Angaben? Das Absatzformat STANDARD definiert einen Absatz ohne besondere Formatierung. Dem Browser wird dadurch vor allem mitgeteilt, dass er den zum Absatz gehörenden Textblock automatisch umbricht und dass er den Absatz mit einem Zeilenumbruch und einem größeren Abstand zum nächsten Absatz abschließt. Die Standardschriftart gibt es in zwei Ausführungen:
왘 왘
als Proportionalschrift und als Schrift mit fester Zeichenbreite.
Bild 2.5: Die Standardschrift des Editors einstellen
51
Text formatieren Wenn Sie sich darüber informieren wollen, welche Standardschriftarten Ihr FrontPage-Editor verwendet, rufen Sie den Befehl EXTRAS/SEITENOPTIONEN auf und gehen zur Seite STANDARDSCHRIFTART. Für die meisten HTML-Formate wird die Proportional-Standardschrift verwendet. Für bestimmte Formate (beispielsweise die Zeichenformate BEISPIEL und CODE) aber auch für die Anzeige des HTML-Codes in der HTML-Ansicht des FrontPage-Editors wird die Standardschrift mit fester Breite verwendet. Welche Schriftarten soll man verwenden? Bevor Sie aus dem vollen Fundus der auf Ihrem System installierten Schriftarten schöpfen, sollten Sie sich ein paar Gedanken darüber machen, wie viel von Ihrem Schriftenreichtum beim Besucher Ihrer Websites ankommt. Grundsätzlich sollten Sie die Standardschriftarten verwenden. Die Verantwortung für die Auswahl und Darstellung der entsprechenden Schriften liegt dann bei den jeweiligen Browsern. Wenn Sie spezielle Schriftarten verwenden wollen, sollten Sie sich überlegen, inwieweit Sie davon ausgehen können, dass Ihre Leser über die gleichen Schriftarten verfügen. Denn Grundvoraussetzung dafür, dass der Leser Ihrer Webseiten die gleichen Schriftarten im Browser sieht, die Sie bei Erstellung Ihrer Webseiten benutzt haben, ist, dass der Leser die gleichen Schriftarten auf seinem System installiert hat (ganz abgesehen davon, dass auch der verwendete Browser in der Lage sein muss, unterschiedliche Schriftarten zu unterstützen). Ist dies nicht der Fall, wählt der Browser eine Ersatzschriftart, die der gewünschten Schrift zwar möglichst nahe kommen sollte, die aber durchaus auch einmal den positiven Eindruck von einer Webseite zunichte machen kann. Welche Schriften können Sie beim Leser erwarten? Wenn Sie davon ausgehen, dass die meisten Leser Ihrer Webseiten Windows 95 oder Windows NT als Betriebssystem nutzen, können Sie die Schriftarten verwenden, die zusammen mit Windows installiert werden:
왘 왘 왘
52
Arial Courier New Times Roman
Kapitel 2: Webdesign mit dem FrontPage-Editor Wenn Sie davon ausgehen, dass die meisten Leser Ihrer Webseiten den Internet Explorer nutzen, können Sie die Schriftarten verwenden, die zusammen mit diesem installiert werden:
왘 왘 왘 왘 왘 왘
Arial Black Comic Sans MS Georgia Impact Trebuchet Verdana
Auch bei den mit Microsoft Word installierten Schriftarten können Sie davon ausgehen, dass sie auf Windows-PCs weit verbreitet sind.
Formatvorlagen und Cascading Stylesheets Die grundlegende Vorgehensweise zum Formatieren eines Textes wurde Ihnen bereits vorgestellt. In diesem Abschnitt werden dagegen die einzelnen zur Verfügung stehenden Formate vorgestellt und beschrieben, und wir werfen einen ersten Blick auf die Definition eigener Formate.
Die Formatvorlagen Die vom FrontPage-Editor unterstützten Formatvorlagen wählen Sie über das Listenfeld FORMATVORLAGE der FORMAT-Symbolleiste aus. Doch was versteht man in FrontPage eigentlich unter einer Formatvorlage? Wo kommen die Formatvorlagen her, die in dem Listenfeld FORMATVORLAGE aufgeführt sind? Kann man eigene Formatvorlagen definieren? Um diese Fragen beantworten zu können, sollte man ein wenig von HTML, von Word und von den Cascading Stylesheets verstehen. Aus Kapitel 1 wissen Sie bereits, dass alle Formatierungen von Webseiten auf HTML-Tags zurückgehen. Einige HTML-Tags dienen dazu, bestimmte Objekte wie Linien oder Applets einzubinden (, ), andere Tags dienen der Absatzformatierung (,
), wieder andere der Zeichenformatierung (, ).
53
Formatvorlagen und Cascading Stylesheets
Bild 2.6: Die Formatvorlagen In einfachen HTML-Editoren würden Sie Ihre Webseiten formatieren, indem Sie diese Tags direkt in Ihren Text einfügen (vergleiche HTMLAnsicht). In FrontPage formatieren Sie, ganz wie in Word, über Dialoge und Symbolleisten. Wie man in Word formatiert, wissen Sie sicherlich:
왘
Um einen Absatz zu formatieren, klicken Sie mit der Maus irgendwo in den Absatz, dann wählen Sie im FORMATVORLAGEN-Listenfeld eine Formatvorlage aus. Wenn Sie wollen, können Sie danach noch den Befehl FORMAT/ABSATZ aufrufen und in dem gleichnamigen Dialogfeld die Absatzformatierung weiter anpassen (Ausrichtung, Zeilenabstände etc.).
왘
Um einzelne Zeichen zu formatieren, markieren Sie die zu formatierenden Zeichen, und rufen zur Formatierung das Dialogfeld ZEICHEN (Befehl Format/ZEICHEN) auf oder klicken auf die entsprechenden Schaltflächen in der FORMAT-Symbolleiste.
Damit Sie in gleicher Weise in FrontPage formatieren können, nimmt FrontPage die verschiedenen HTML-Tags und filtert sie nach Absatz- und Zeichenformaten. Die Absatzformate werden in das FORMATVORLAGENListenfeld, die Zeichenformate in das ZEICHEN-Dialogfeld übernommen.
54
h1
br
h1 p li
li
cite p
va r
Kapitel 2: Webdesign mit dem FrontPage-Editor
let app
citevar
Hinweis
Bild 2.7: Aufteilung der HTML-Tags
Ausdrücklich sei auch noch einmal darauf hingewiesen, dass die von HTML vorgegebenen Formate keine absolut festgelegten Formatierungen definieren. Meist sind es relative Formatbefehle, die sich auf die vom Browser verwendete Standardschrift beziehen (beispielsweise wird für Überschriften die Schriftgröße im Vergleich zur Schriftgröße der Standardschrift heraufgesetzt) und die zudem noch von Browser zu Browser unterschiedlich umgesetzt werden können.
In Word kann man aber auch eigene Formatvorlagen definieren. Wie sieht dies in FrontPage aus? Nun FrontPage kann natürlich nur solche Formatierungen erlauben, die auch von HTML unterstützt werden. Was also sicherlich nicht geht, ist dass FrontPage für vom Anwender eingerichtete Formatvorlagen neue HTML-
55
Formatvorlagen und Cascading Stylesheets Tags definiert – die würde dann ja kein Browser verstehen. Glücklicherweise kennt HTML aber ein eigenes Verfahren zur Definition benutzerdefinierter Formate: die so genannten Stylesheets. Dank dieser Stylesheets können Sie auch in FrontPage eigene Formatvorlagen definieren. Wie dies geht, werden Sie gleich erfahren. Zuvor schauen wir uns aber noch die verschiedenen vordefinierten Absatz- und Zeichenformate an. Absatzformatvorlagen Wenn Sie eine Absatzformatvorlage zuweisen, wirkt sich diese immer auf den ganzen Absatz aus. (Es genügt daher, vor Zuweisung der Absatzformatvorlage die Einfügemarke irgendwo in den Absatz zu setzen – eine Markierung des Absatzes ist nicht erforderlich.) Jedem Absatz kann immer nur eine Absatzformatvorlage zugewiesen werden, was jedoch nicht ausschließt, dass Sie im Absatz mehrere Zeichenformate verwenden.
Absatzformat
HTMLTag
Beispiel
Adresse
Dies ist eine Adresse
Formatiert
<pre>
Bei Verwendung dieses Absatzformats können Sie Ihre Zeilenumbrüche (mit (ª)+(¢)) selbst festlegen und innerhalb des Textes Tabulatoren verwenden.
Normal
Dies ist der Standard
Überschrift1
Überschrift2
Überschrift3
Tabelle 2.3: Absatzformate
56
Kapitel 2: Webdesign mit dem FrontPage-Editor
Absatzformat
HTMLTag
Überschrift4
Überschrift5
Überschrift6
Beispiel
Tabelle 2.3: Absatzformate (Forts.)
Listenformat
HTMLTag
Aufzählung
Definierter Begriff
Definition
Menüliste
<menu>
Nummerierung
Verzeichnisliste
Beispiel
Tabelle 2.4: Listenabsatzformate
57
Formatvorlagen und Cascading Stylesheets Absatzformate anpassen
Bild 2.8: Absatz nachformatieren Sie können eine Absatzformatierung auf folgende Weisen weiter anpassen:
왘
Durch Festlegen einer Ausrichtung: STANDARD, LINKS, ZENTRIERT, RECHTS, BLOCKSATZ.
왘 왘
Durch Festlegen eines Einzugs.1
1.
Durch Festlegen der Abstände2: Abstand zu dem vorangehenden und dem nachfolgenden Absatz, Abstand zwischen Wörtern, Abstand zwischen den Zeilen des Absatzes.
Die Standardeinheit für die meisten Angaben sind Pixel. Sie können aber auch andere Einheiten verwenden: cm, in, % oder eben px. 2. Die Abstände werden erst in der Vorschau des Editors sichtbar (nicht im Dialogfeld oder der Normalansicht des Editors).
58
Kapitel 2: Webdesign mit dem FrontPage-Editor All diese Formatierungen nehmen Sie im Dialogfeld ABSATZ vor, das Sie über den Menübefehl FORMAT/ABSATZ oder aus dem Kontextmenü aufrufen. Voraussetzung ist natürlich, dass die Einfügemarke in dem Absatz steht, auf den sich die Formatierungen beziehen sollen. Zeichenformate
Bild 2.9: Das Dialogfeld Zeichen Zeichenformate werden immer dem gerade markierten Text zugewiesen und können im Prinzip beliebig kombiniert werden. Die wichtigsten traditionellen HTML-Zeichenformate werden über die Seite SCHRIFT, Bereich EFFEKTE des Dialogfelds ZEICHEN zugewiesen (siehe Bild 2.9). Sie sollen vor allem die webweite einheitliche Formatierung bestimmter Textelemente gewährleisten.
59
Formatvorlagen und Cascading Stylesheets
Zeichenformat
HTMLTag
Fett
Kursiv
Unterstrichen
Durchgestrichen
<strike>
Blinkend
Hochgestellt
<sup>
Tiefgestellt
<sub>
Betont
<strong>
Hervorgehoben
<em>
Beispiel
<samp>
Definition
Zitat
Beispiel
Tabelle 2.5: HTML-Zeichenformate
60
Kapitel 2: Webdesign mit dem FrontPage-Editor
Zeichenformat
HTMLTag
Variable
Tastatur
Code
Beispiel
Tabelle 2.5: HTML-Zeichenformate (Forts.) Darüber hinaus können Sie im Dialog ZEICHEN:
왘
Die Schriftart ändern. (Beachten Sie dabei die Anmerkungen aus Abschnitt 2 »Text formatieren« zur Auswahl eigener Schriften).
왘 왘 왘
Schriftschnitt und Schriftgröße festlegen.
왘
Den Text pixelweise höher- oder tieferstellen auf der Seite ZEICHENABSTAND).
Einem Text eine Vordergrundfarbe zuweisen. Die Laufweite des Textes (sprich den Abstand zwischen den Buchstaben) festlegen (auf der Seite ZEICHENABSTAND).
Zeichenformate entfernen Da Zeichenformate beliebig kombiniert werden können, passiert es schnell, dass eine Textstelle drei oder vier Zeichenformate zugewiesen bekommt. Im folgenden Fließtext wurde beispielsweise ein Begriff durch Kursivschrift, Vergrößerung, Unterstreichung und Auswahl der Schriftart Arial hervorgehoben: Auch die Hervorhebung einzelner Textpassagen und Begriffe kann man übertreiben. Nachdem der Autor dieser Zeile feststellte, dass dies doch wohl ein wenig zuviel des Guten war, beschloss er, sich mit Kursivschrift zu begnügen. Das Problem war nun allerdings, alle unerwünschten Zeichenformate wieder aufzuheben. Am sichersten verwendet man dazu den Befehl BEARBEITEN/
61
Formatvorlagen und Cascading Stylesheets RÜCKGÄNGIG. Wurden jedoch seit der ungeliebten Formatierung bereits andere Bearbeitungen am Text vorgenommen, müsste man diese ebenfalls rückgängig machen (falls die Formatierung überhaupt noch in der Liste der 30 letzten Arbeitsschritte enthalten ist). Der Ausweg hieraus ist einfach, das Standard-Zeichenformat des zugehörigen Absatzes wiederherzustellen. Dazu markiert man einfach die entsprechende Textstelle und ruft den Befehl FORMAT/FORMATIERUNG ENTFERNEN auf. Danach kann der Text wieder kursiv formatiert werden. Auch die Hervorhebung einzelner Textpassagen und Begriffe kann man übertreiben.
Eigene Formatvorlagen mit Cascading Stylesheets Das Prinzip der HTML-Tags erlaubt die plattformunabhängige Formatierung von Webseiten. Gleichzeitig begrenzt es aber die Gestaltungsfreiheit des Web-Autors. Schon relativ früh wurde daher die Idee der Web-Formatvorlagen, der so genannten Stylesheets, geboren. Doch die Akzeptanz dieser Stylesheets war anfangs recht dürftig (besonders auf Windows-Seite), denn nur wenige Browser unterstützten Stylesheets. Stylesheets zu definieren, die die Leser dann aber nicht sehen können, weil ihre Browser sie nicht unterstützen, ist für Web-Autoren uninteressant. Stylesheets werden mittlerweile von allen wichtigen Browsern unterstützt
Hinweis
Mittlerweile gibt es Stylesheet-fähige Browser und Editoren nicht mehr nur für UNIX, sondern auch für die Windows-Plattform: beispielsweise Netscape Navigator ab Version 4.0, Microsoft Internet Explorer ab Version 4. In Browsern, die keine Stylesheet-Unterstützung kennen, werden Stylesheets und Stilinformationen meist einfach ignoriert.
Inline-Stile und Stylesheets Stylesheets gibt es in zwei Varianten. Für beide Varianten gilt:
왘
62
Ein Stylesheet ist eine Zusammenstellung von Formatierungsbefehlen.
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
Stylesheets werden HTML-Tags zugewiesen und beziehen sich dann auf den Abschnitt der Webseite, der von dem HTML-Tag eingeschlossen wird.
Unterschiede gibt es darin, wie die beiden Varianten von Stylesheets definiert und den HTML-Tags zugewiesen werden. Inline-Stile Im einfachsten Fall nutzt man das HTML-Attribut style, um die Stilinformationen direkt für ein spezielles HTML-Tag zu definieren. FrontPage nutzt diese Methode beispielsweise für die verschiedenen Effekte im Dialogfeld ZEICHEN, für die es keine entsprechenden HTML-Tags gibt. Was machen Sie, wenn Sie ein einzelnes Wort oder eine kurze Textstelle in Kapitälchen formatieren? 1. Zuerst markieren Sie die Textstelle. 2. Dann rufen Sie den Befehl FORMAT/ZEICHEN auf und aktivieren im Dialogfeld ZEICHEN die Option KAPITÄLCHEN.
Bild 2.10: Zeichenformat Kapitälchen Was macht FrontPage daraus? 1. Da Formatierungen nur an HTML-Tags zugewiesen werden können, legt FrontPage zuerst ein spezielles formatneutrales Tag um die zu formatierende Textpassage. Dieses HTML-Tag heißt <span>. 2. Diesem <span>-Tag kann dann über das style-Attribut eine Stildefinition zugewiesen werden. Da in diesem Fall die Stilinformation direkt im Text vorgenommen wird, spricht man von Inline-Stilen. <span style="font-variant: small-caps">Demo-Text
63
Formatvorlagen und Cascading Stylesheets
Hinweis
Bild 2.11: Inline-Stildefinition
Wenn Sie sich darüber informieren wollen, welche Stileigenschaften neben font-variant in Stylesheets verwendet werden können und welche Werte diese Eigenschaften annehmen können, laden Sie sich die Referenz aus dem Internet herunter: http:// www.w3.org/TR/REC-CSS1.
»Echte« Stylesheets Den größten Nutzen bringen die Stylesheets aber, wenn Sie außerhalb des Fließtextes, und zwar im Header-Teil des Webdokuments definiert werden. ... <style>
Global definierte Stylesheets haben den Vorteil, dass man sie nur einmal aufsetzen muss und danach jederzeit im -Teil des Dokuments zur Formatierung heranziehen kann. Doch wie genau funktioniert dies? Eine Möglichkeit ist, bei der Definition des Stylesheets das HTML-Tag anzugeben, auf das sich die Stildefinitionen beziehen sollen: h2
64
{ font-size: 16pt }
Kapitel 2: Webdesign mit dem FrontPage-Editor In diesem Fall wird für alle -Überschriften im Dokument automatisch eine Schriftgröße von 16 Punkten verwendet (es sei denn, für ein bestimmtes -Tag wurde ein Inline-Stil mit einer anderen Schriftgröße definiert). Eine andere Möglichkeit ist, das Stylesheet mit einem Namen zu verbinden, wobei der Name mit einem Punkt beginnen muss: .einzug { margin-left: 10%; margin-right: 10%}
Im -Teil des Dokuments kann man dann das Stylesheet über das classAttribut an einzelne HTML-Tags zuweisen, beispielsweise:
Hier kommt der eingezogene Text
Eigene Formatvorlagen Die Idee, Stilinformationen zusammenzufassen und global zu definieren, kommt dem Konzept der Word-Formatvorlagen schon sehr nahe. Tatsächlich bedeutet das englische Wort »Stylesheet« letztlich nichts anderes als »Formatvorlage«. Trotzdem werden wir in diesem Buch weiterhin zwischen Stylesheets und Formatvorlagen unterscheiden.
왘
Von Stylesheets reden wir, wenn wir Stildefinitionen nach dem CSSStandard meinen.
왘
Als Formatvorlagen bezeichnen wir nur die Absatzformate, die unter FrontPage definiert sind und die über das Listenfeld FORMATVORLAGE zugewiesen werden können.
Die in FrontPage vordefinierten Formatvorlagen gehen, wie Sie bereits wissen, nicht auf Stylesheets, sondern auf HTML-Tags zurück. Die Definition eigener Formatvorlagen ist allerdings nur mit Stylesheets möglich. Wenn Sie den Befehl FORMAT/FORMATVORLAGE aufrufen gelangen Sie in das gleichnamige Dialogfeld, in dem Sie eigene Formatvorlagen definieren können. Bei Aufruf des Dialogfeldes wird zuerst eine Liste der HTML-Tags angezeigt. Selbstverständlich können Sie HTML-Tags weder löschen noch neue Tags hinzufügen. Was Sie aber tun können, ist ein HTML-Tag auszuwählen und die Formatierung für das Tag ändern. FrontPage legt dann einfach ein Stylesheet mit Ihren Formatierungen an und verbindet das Stylesheet mit dem HTML-Tag. Die von Ihnen vorgesehenen Formatierungen gelten dann automatisch für alle Vorkommen des HTML-Tags im -Teil des Dokuments (siehe oben). 65
Formatvorlagen und Cascading Stylesheets
Bild 2.12: Eigene Formatvorlagen definieren 1. Wählen Sie das HTML-Tag, für das Sie abweichende oder zusätzliche Formatierungen vorgeben wollen. 2. Klicken Sie auf den Schalter ÄNDERN. 3. Klicken Sie im Dialogfeld FORMATVORLAGE BEARBEITEN auf den Schalter FORMAT und wählen Sie über die angebotenen Befehle (und untergeordneten Dialoge) die Formatierungen aus, die für das HTML-Tag fortan gelten sollen. Die zweite Möglichkeit ist, im Dialogfeld FORMATVORLAGE den Schalter NEU zu drücken. Sie gelangen dann in das Dialogfeld NEUE FORMATVORLAGE, das dem Dialogfeld FORMATVORLAGE BEARBEITEN sehr ähnlich ist. Allerdings können, ja müssen Sie hier einen Namen für die neue Formatvorlage eingeben. Dann legen Sie die Stileigenschaften fest (Schalter FORMAT). FrontPage legt wiederum ein Stylesheet mit Ihren Formatierungen an, verbindet dieses aber nicht mit einem HTML-Tag, sondern mit dem von Ihnen eingegebenen Bezeichner.
66
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.13: Format eines HTML-Tags anpassen
Bild 2.14: Neue Formatvorlagen definieren
67
Designs, Seitenübergänge und Seiteneigenschaften
Hinweis
Gleichzeitig wird die Formatvorlage in das Listenfeld FORMATVORLAGE aufgenommen und kann folglich wie die vordefinierten Formatvorlagen dort ausgewählt und zur Absatzformatierung herangezogen werden. FrontPage bezieht die Formatvorlagen aus dem Listenfeld FORMATVORLAGE immer auf ganze Absätze – nie auf markierte Textpassagen. Das der Formatvorlage zugrunde liegende Stylesheet kann aber sehr wohl auch zur Zeichenformatierung verwendet werden (beispielsweise auf dem Weg über das <span>-Tag). Dazu müssen Sie aber den HTML-Code direkt bearbeiten – jedenfalls konnte ich keinen anderen Weg entdecken.
Designs, Seitenübergänge und Seiteneigenschaften Bisher hatten wir nur mit Text und einzelnen Textelementen zu tun. Sie können im FrontPage-Editor aber auch Einstellungen vornehmen, die das ganze Webdokument (also die in den Editor geladene Seite Ihres Webs) betreffen. Hierzu gehören beispielsweise:
왘 왘 왘
die Auswahl eines Seiten-Designs (FORMAT/DESIGN) die Einrichtung von Seitenübergängen (FORMAT/SEITENÜBERGANG) die Festlegung der Seiteneigenschaften (DATEI/EIGENSCHAFTEN oder FORMAT/HINTERGRUND)
Designs Um Ihren Webseiten mit wenig Aufwand ein professionelles Aussehen zu verleihen, stellt Ihnen Microsoft FrontPage eine ganze Reihe von interessanten, vordefinierten Designs zur Verfügung. Ein Design, genauer gesagt ein FrontPage-Design, ist dabei nichts anderes als eine Sammlung von Layoutanweisungen an den Browser – beispielsweise Gestaltung des Hintergrunds und der Navigationsleisten, für Listenelemente zu verwendende Symbole etc. Designs werden aber nicht nur zum Aufpeppen einzelner Webseiten genutzt. Designs sind auch ein wichtiges Mittel, um einer ganzen Website ein einheitliches Aussehen zu verleihen.
68
Kapitel 2: Webdesign mit dem FrontPage-Editor Designs zuweisen Um Ihrem Web oder einzelnen Seiten Ihres Webs ein Design zuzuweisen, rufen Sie einfach den Befehl FORMAT/DESIGN auf.
Bild 2.15: Design auswählen Wenn Sie in dem Listenfeld auf der linken Seite des Dialogfelds ein Design auswählen, wird im rechten Teil des Dialogfelds angezeigt, wie die verschiedenen Elemente Ihrer Webdokumente in diesem Design aussehen werden. Links oben wählen Sie, ob das Design für alle Seiten des Webs oder nur für die aktuelle Webseite gelten soll. Links unten können Sie sich noch für kleinere Variationen und ein Hintergrundbild entscheiden. Besonders interessant ist der Schalter ÄNDERN, denn auf dem Weg über diesen Schalter können Sie eigene Design erstellen.
69
Designs, Seitenübergänge und Seiteneigenschaften
Bild 2.16: Webseite mit Design
Seitenübergänge
Achtung
Um das Erscheinen Ihrer Webseiten ein wenig dramatischer zu gestalten, können Sie Seitenübergänge definieren. Dies sind Effekte oder Animationen, die beim Aufrufen oder Verlassen einer Seite ausgeführt werden – beispielsweise das langsame Einblenden oder Ausblenden einer Seite.
Seitenübergänge werden nur im Internet Explorer angezeigt.
Seitenübergang einrichten 왘 Um einen Seitenübergang festzulegen, rufen Sie den Befehl FORMAT/SEITENÜBERGANG auf.
왘
Wählen Sie dann das EREIGNIS, für das der Seitenübergang aktiviert werden soll.
왘
Geben Sie eine DAUER für den Seitenübergang vor (aus Rücksicht auf Ihre Leser sollte der Übergang nicht allzu lange dauern).
왘
Schließlich wählen Sie die Art des gewünschten Übergangseffekts.
In der Vorschau können Sie dann den Seitenübergang testen. Voraussetzung ist allerdings, dass die Seite Teil eines wirklichen Webs ist und Sie für die Vorschau einen Browser verwenden, der dynamisches HTML unterstützt. Gleiches gilt natürlich auch für die Besucher Ihrer Website.
70
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.17: Seitenübergang durch schließende Spirale
Seiteneigenschaften Einstellungen, die die ganze Webseite betreffen, werden über das Dialogfeld SEITENEIGENSCHAFTEN vorgenommen, welches Sie über den Befehl DATEI/EIGENSCHAFTEN aufrufen. Die Registerseite Allgemein Zu den allgemeinen Optionen der Seiteneigenschaften gehören der Titel der Seite, eine optionale Basisadresse für relative URLs sowie ein Hintergrundklang.
왘
TITEL. Dieser Titel wird zum Beispiel im Banner, in den Schaltflächen der Navigationsleisten und der Navigationsansicht verwendet.
왘
BASISADRESSE. Wenn Sie auf der Seite relative URLs verwenden, werden diese um die hier angegebene Basisadresse zu absoluten URLs erweitert (standardmäßig beziehen sich relative URLs auf das aktuelle Webverzeichnis).
71
Designs, Seitenübergänge und Seiteneigenschaften
Bild 2.18: Die Seite Allgemein
왘
STANDARDZIELFRAME. Wenn Sie Frames auf Ihrer Seite benutzen (siehe Kapitel 3.4), können Sie hier festlegen, in welchem Frame die Zielseiten der Hyperlinks der Seite standardmäßig angezeigt werden sollen.
왘
HINTERGRUNDSOUND. In diesem Feld können Sie eine Klangdatei spezifizieren, die automatisch abgespielt wird, wenn die Seite in einen Browser angezeigt wird. Zudem können Sie angeben, wie oft die Datei hintereinander abzuspielen ist. (Diese Option beruht auf einem HTML-Tag, das nur vom Internet Explorer unterstützt wird. Wenn Sie in den Kompatibilitätseinstellungen der Seite (Befehl EXTRAS/SEITENOPTIONEN) auch andere Browser ausgewählt haben, ist diese Option deaktiviert.)
왘
SKRIPTE FÜR ENTWURFSZEIT-STEUERELEMENTE. In diesem Bereich können Sie festlegen, mit welcher Skriptsprache Sie Entwurfszeit-Steuerelemente erstellen wollen (in Verbindung mit Microsoft Visual InterDev).
72
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
FORMATVORLAGE. Hier können Sie einen Inline-Stil für das Tag festlegen – sprich Formatierungen, die für die ganze Seite gelten, soweit für die einzelnen Elemente der Seite keine eigenen, abweichenden Formatierungen vorgesehen sind.
Die Registerseite Hintergrund
Bild 2.19: Die Seite Hintergrund
Achtung
Hier legen Sie Hintergrundbild und Farben der Seite fest. Dabei haben Sie die Möglichkeit, die Einstellungen für Hintergrund und Farben selbst vorzunehmen oder – im unteren Bereich der Dialogseite – die Einstellungen von einer bereits vorhandenen Webseite, deren relativen URL Sie angeben, zu übernehmen. Diese Dialogseite ist nicht verfügbar, wenn Sie ein Design für die Seite ausgewählt haben.
73
Designs, Seitenübergänge und Seiteneigenschaften Wenn Sie die Einstellungen selbst vornehmen wollen, stehen Ihnen folgende Optionen zur Verfügung:
왘
HINTERGRUNDBILD. Um ein Hintergrundbild einzublenden, aktivieren Sie die gleichnamige Option und klicken Sie dann auf die Schaltfläche DURCHSUCHEN, um die Bilddatei des gewünschten Hintergrundbilds auszuwählen. Da das ausgewählte Bild in den wenigsten Fällen groß genug sein wird, um den gesamten Hintergrund des Browser auszufüllen, füllt der Browser den Hintergrund durch Kachelung mit dem Bild aus. In Kapitel 2.10.3, »Seitenhintergrund«, werden wir noch einmal näher auf die Verwendung von Hintergrundbildern einzugehen haben.
왘
WASSERZEICHEN. Normalerweise wird das Hintergrundbild beim Scrollen der Webseite mit bewegt. Der Besucher hat beim Scrollen also den Eindruck, dass Hintergrundbild und Vordergrundtext fixiert sind und zusammen bewegt sind. Wenn Sie stattdessen möchten, dass beim Scrollen der Text über das Hintergrundmuster bewegt wird, aktivieren Sie zusätzlich zur Option HINTERGRUNDBILD noch die Option WASSERZEICHEN.
왘
HYPERLINK-ROLLOVEREFFEKTE AKTIVIEREN. Wenn Sie möchten, dass sich die Zeichenformatierung Ihrer Hyperlinks ändert, wenn der Besucher Ihrer Website mit der Maus über einen Link fährt, setzen Sie diese Option und legen Sie auf dem Weg über den Schalter ROLLOVERFORMAT die gewünschte Umformatierung fest (beispielsweise einen höheren Schriftgrad oder eine besondere Farbe).
왘
FARBEN. Schließlich können Sie noch die Farben für die wichtigsten Elemente festlegen: die HINTERGRUNDFARBE, die TEXTFARBE sowie die Markierungsfarben für noch nicht besuchte, bereits besuchte und aktive HYPERLINKS.
Die Registerseite Seitenränder Auf dieser Seite können Sie einen oberen und einen unteren Rand für die aktuelle Seite einrichten. Die Breite der Ränder wird in Pixeln angegeben.
74
Hinweis
Kapitel 2: Webdesign mit dem FrontPage-Editor
Wenn Sie Gemeinsame Randbereiche bzw. Navigationsleisten für den oberen bzw. linken Rand verwenden, liegen die hier eingestellten Ränder noch über bzw. links der Navigationsleisten.
Bild 2.20: Die Seite Seitenränder Die Registerseite Benutzerdefiniert Auf dieser Seite können Sie Name/Wert-Paare definieren, die mit dem HTML-Tag <meta> in den -Bereich der Seite aufgenommen werden. Diese Metainformationen untergliedern sich in zwei Kategorien: Systemvariablen (werden über die Argumente http-equiv und content abgespeichert) und Benutzervariablen (werden über die Argumente name und content abgespeichert).
75
Designs, Seitenübergänge und Seiteneigenschaften
Bild 2.21: Die Seite Benutzerdefiniert Der Zweck dieser Name/Wert-Paare besteht darin, innerhalb des Webdokuments Informationen abzuspeichern, die vor allem für die Webseiten verarbeitenden Programme interessant sind. Beispielsweise können Sie
왘
über die Systemvariable Content-Type den Dateityp des Dokuments angeben (text/html für HTML-Dokumente). Diese Information wird beispielsweise vom Browser ausgewertet
왘
über die Systemvariable Keywords Schlüsselwörter definieren, die von Suchmaschinen zur Indizierung Ihrer Seite ausgewertet werden.
왘
Name/Wert-Paare für verborgene Felder zur Unterstützung von Formulareingaben einrichten
왘
Parameter zur Übergabe an Java-Applets definieren
Zur Einrichtung eines Name/Wert-Paares klicken Sie einfach auf die Schaltfläche HINZUFÜGEN und geben Sie Namen und Wert in dem erscheinenden Dialogfeld ein.
76
Kapitel 2: Webdesign mit dem FrontPage-Editor Die Registerseite Sprache
Bild 2.22: Die Seite Sprache Auf dieser Seite können Sie festlegen, nach welchen Spezifikationen der HTML-Code Ihrer Seite gespeichert beziehungsweise geladen werden soll.
Webseiten testen Nachdem Sie Ihre Webseite fertig aufgesetzt haben, sollten Sie sie gründlich testen. Dabei sollten Sie sich nicht mit der Vorschau-Ansicht des Editors zufrieden geben, denn diese zeigt nur die Darstellung in einem Browser – im Internet werden aber eine Vielzahl von Browsern und Browser-Versionen verwendet, und Sie sollten sich bemühen, möglichst vielen Browsern gerecht zu werden. Wenn Sie die Möglichkeit haben, sollten Sie daher als Web-Autor die gängigsten Browser auf Ihrem System installiert haben (wenn möglich sowohl in den neuesten als auch in älteren Versionen). Über den Befehl DATEI/
77
Listen und Aufzählungen BROWSERVORSCHAU können Sie Ihre aktuelle Webseite dann auf bequeme Weise zum Testen in die verschiedenen Browser laden. Sie brauchen dazu nur den Browser im gleichnamigen Listenfeld auszuwählen und auf den Schalter VORSCHAU zu drücken. Um einen neu installierten Browser in die Auswahl des Listenfelds BROWSER aufzunehmen, klicken Sie auf den Schalter HINZUFÜGEN. Im erscheinenden Dialogfeld geben Sie den Namen ein, unter dem der Browser aufgeführt werden soll, und suchen nach der EXE-Datei des Browsers.
Listen und Aufzählungen Übersichtlichkeit ist eines der großen Leitmotive beim Webdesign. Eines der einfachsten und wirksamsten Mittel, um Informationen in übersichtlicher Form zu präsentieren, sind Listen. Wenn Sie allerdings bisher zu wissen glaubten, was eine Liste ist, steht Ihnen nun eine Überraschung bevor: HTML kennt gleich fünf verschiedene Arten von Listen!
Liste
Beschreibung und Verwendung
Aufzählung
Die einzelnen Listenelemente werden eingerückt und mit einem vorangehenden Listensymbol gekennzeichnet. Zur Präsentation gleichrangiger Daten und Informationen.
Nummerierung
Die einzelnen Listenelemente werden eingerückt und mit Ziffern (oder alternativ mit den Buchstaben des Alphabets) durchnummeriert. Zur Präsentation von Daten und Informationen, die durch die Nummerierung in eine bestimmte Abfolge oder Rangfolge gesetzt werden.
Definition
Definitionen bestehen aus zwei Teilen: dem zu definierenden Begriff und der nachfolgenden, eingerückten Definition.
Menüliste
Ähnlich wie Aufzählungen, sollten aber nicht eingesetzt werden, wenn einzelne Listenelemente aus mehrzeiligem Text bestehen. Im Grunde veraltetes Format.
Tabelle 2.6: HTML-Listentypen
78
Kapitel 2: Webdesign mit dem FrontPage-Editor
Liste
Beschreibung und Verwendung
Verzeichnisliste
Ähnlich wie Aufzählungen, sollten aber nur zur Auflistung kurzer Stichworte und einzelner Begriffe verwendet werden. Im Grunde veraltetes Format.
Tabelle 2.6: HTML-Listentypen (Forts.)
Listen erstellen Grundsätzlich gibt es zwei Wege, eine Liste zu erstellen:
왘
Entweder Sie setzen zuerst die verschiedenen Listenelemente auf (wobei die einzelnen Listenelemente durch Absatzmarken ((¢)Taste) getrennt werden), markieren danach die Liste und formatieren sie
왘
oder Sie weisen gleich dem ersten Listenelement das gewünschte Format zu und bauen dann die Liste Element für Element auf. Das Drücken der (¢)-Taste wird dann nicht mit dem Anlegen einer neuen Liste, sondern mit dem Anlegen eines neuen Listenelements quittiert. Wenn Sie die Liste beenden wollen, drücken Sie zweimal hintereinander die (¢)-Taste oder drücken am Listenende die Tastenkombination (Strg)+(¢).
Ungeordnete Listen (Aufzählungen) Aufzählungen werden verwendet, wenn es darum geht, ungeordnete Informationen, bei denen die Reihenfolge der Präsentation keine oder nur eine untergeordnete Rolle spielt, in übersichtlicher Form anzuzeigen. Einzelne Elemente der Liste können dabei ebenso gut aus einem einzigen Stichwort wie aus mehrzeiligen Absätzen (ja sogar aus mehreren Absätzen) bestehen. Aufzählungen können Sie beispielsweise verwenden,
왘
um Ihre Web-Angebote in übersichtlicher Form vorzustellen (genauere Informationen könnten dann beispielsweise über Hyperlinks erreicht werden),
왘
um in einer öffentlichen Stellungnahme Ihre Argumente effektiv anzuführen,
왘
um Hyperlinks zu weiteren interessanten Websites aufzulisten,
79
Listen und Aufzählungen
왘 왘 왘
um Literaturquellen anzugeben, um wie hier Beispiele zu geben etc.
Bild 2.23: Aufzählung Aufzählungen erstellen 1. Tippen Sie den Text für das erste Element der Liste ein (ohne danach einen Zeilenumbruch einzugeben). 2. Formatieren Sie das Element als Aufzählung. Wählen Sie dazu im Listenfeld FORMATVORLAGE der Format-Symbolleiste die Formatvorlage AUFZÄHLUNG aus (oder klicken Sie direkt in der Format-Symbolleiste auf das Symbol AUFZÄHLUNGSZEICHEN oder rufen Sie den Befehl FORMAT/NUMMERIERUNG UND AUFZÄHLUNGEN auf). 3. Legen Sie weitere Listenelemente an. Drücken Sie dazu am Ende des Listenelements die (¢)-Taste. 4. Beenden Sie die Aufzählung. Drücken Sie dazu am Ende des Textes des letzten Listenelements zweimal die (¢)-Taste.
80
Hinweis
Kapitel 2: Webdesign mit dem FrontPage-Editor
Wenn Sie das Listensymbol zur Kennzeichnung der einzelnen Aufzählungselemente ändern wollen, setzen Sie die Einfügemarke in die Liste und rufen Sie den Befehl FORMAT/NUMMERIERUNG UND AUFZÄHLUNGEN auf (siehe Abschnitt »Listensymbole ändern«).
Geordnete Listen (Nummerierungen) Nummerierungen werden verwendet, wenn es darum geht, geordnete Informationen zu präsentieren, die in einer bestimmten Abfolge, Rangfolge oder Wertung stehen. Einzelne Elemente der Liste können dabei ebenso gut aus einem einzigen Stichwort wie aus mehrzeiligen Absätzen (ja sogar aus mehreren Absätzen) bestehen. Nummerierungen können Sie beispielsweise verwenden,
왘
um die Website Ihrer Buchhandlung mit einer Bestsellerliste auszustatten,
왘 왘
um Kochrezepte zu beschreiben,
왘 왘
um Inhaltsverzeichnisse zu erstellen
um eine Liste der zehn interessantesten Filme oder der zehn am meisten gehassten Persönlichkeiten aufzustellen, etc.
Nummerierungen erstellen 1. Tippen Sie den Text für das erste Element der Liste ein (ohne danach einen Zeilenumbruch einzugeben). 2. Formatieren Sie das Element als Nummerierung. Wählen Sie dazu im Listenfeld FORMATVORLAGE der Format-Symbolleiste die Formatvorlage NUMMERIERUNG aus (oder klicken Sie direkt in der Format-Symbolleiste auf das Symbol NUMMERIERUNG oder rufen Sie den Befehl FORMAT/ NUMMERIERUNG UND AUFZÄHLUNGEN auf). 3. Legen Sie weitere Listenelemente an. Drücken Sie dazu am Ende des Textes des vorangehenden Listenelements die (¢)-Taste. 4. Beenden Sie die Aufzählung. Drücken Sie dazu am Ende des Textes des letzten Listenelements zweimal die (¢)-Taste.
81
Listen und Aufzählungen
Hinweis
Bild 2.24: Nummerierung
Wenn Sie das Listensymbol zur Kennzeichnung der einzelnen Nummerierungselemente ändern wollen, setzen Sie die Einfügemarke in die Liste und rufen Sie den Befehl FORMAT/NUMMERIERUNG UND AUFZÄHLUNGEN auf (siehe Abschnitt »Listensymbole ändern«).
Kapitel 2: Webdesign mit dem FrontPage-Editor Hierarchische Nummerierungen, wie Sie beispielsweise in Inhaltsverzeichnissen verwendet werden, können mit der automatischen Nummerierung nicht realisiert werden. Was Sie machen können, ist den verschiedenen Ebenen unterschiedliche Zeichen zuzuweisen, beispielsweise der ersten Ebene Arabische Ziffern, der zweiten Ebene römische Ziffern, der dritten Ebene kleine Buchstaben: 1. Nummerierungen I Allgemeines II Erstellen a Hierarchische Nummerierungen In den meisten Fällen dürfte dies aber nur eine Verlegenheitslösung sein. In solchen Fällen bleibt nur die Liste und die Nummerierung von Hand zu Fuß aufzubauen (siehe auch weiter unten den Abschnitt »Hierarchische Listen«).
Definitionen Definitionen bestehen aus zwei Teilen:
왘
dem zu definierenden Begriff, dem die Formatvorlage DEFINIERTER BEGRIFF zugewiesen wird und
왘
der nachfolgenden Definition des Begriffes, dem die Formatvorlage DEFINITION zugewiesen wird.
Definitionen verwenden keine Listensymbole. Stattdessen steht der zu definierende Begriff linksbündig im Text und die nachfolgende Definition wird eingerückt. Definitionen können Sie beispielsweise verwenden,
왘 왘 왘 왘
um Begriffe zu definieren, um Glossare anzulegen, um die Ansprechpartner Ihrer Firma vorzustellen etc.
83
Listen und Aufzählungen
Bild 2.25: Definition Definitionen erstellen 1. Tippen Sie den Text für das erste Element der Liste ein (ohne danach einen Zeilenumbruch einzugeben). 2. Formatieren Sie das Element als DEFINIERTER BEGRIFF. Wählen Sie dazu im Listenfeld FORMATVORLAGE der Format-Symbolleiste die Formatvorlage DEFINIERTER BEGRIFF aus. 3. Geben Sie die Definition ein. Drücken Sie einfach die (¢)-Taste. Der FrontPage-Editor fügt einen Zeilenumbruch ein und weist der neuen Zeile automatisch die Formatvorlage DEFINITION zu. 4. Legen Sie weitere Listenelemente an. Drücken Sie dazu am Ende des Textes der vorangehenden Definition die (¢)-Taste. Der FrontPage-Editor formatiert die nächste Zeile daraufhin automatisch wieder als DEFINIERTER BEGRIFF.
84
Kapitel 2: Webdesign mit dem FrontPage-Editor 5. Beenden Sie die Definition. Drücken Sie dazu am Ende des Textes der letzten Definition zweimal die (¢)-Taste.
Menülisten
Achtung
Menülisten werden traditionell für Aufzählungen verwendet, bei denen die einzelnen Elemente aus kurzen, einzeiligen Texten bestehen. Menülisten sind seit dem HTML-3-Standard nicht mehr vorgesehen und werden von den meisten Browsern nicht mehr unterstützt (üblicherweise werden Menülisten in diesen Browsern wie Aufzählungen dargestellt).
Verzeichnislisten
Achtung
Verzeichnislisten werden traditionell für Aufzählungen verwendet, bei denen die einzelnen Elemente aus kurzen Stichworten bestehen. Verzeichnislisten sind seit dem HTML-3-Standard nicht mehr vorgesehen und werden von den meisten Browsern nicht mehr unterstützt (üblicherweise werden Verzeichnislisten in diesen Browsern wie Aufzählungen dargestellt).
Listen weiter bearbeiten Die Grundlagen der Erstellung von Listen sind Ihnen jetzt bekannt. Über kurz oder lang werden Sie sich damit aber nicht mehr begnügen wollen. Dann will der Lehrling den Meister übertrumpfen und überlegt sich, wie er
왘 왘 왘
Umbrüche in Listenelementen einsetzen kann Eigene Listensymbole definieren kann Hierarchische und dynamische Listen anlegen kann
Die folgenden Abschnitte sollen Ihnen helfen, Ihre Listen professionell zu gestalten (aber denken Sie daran: Manchmal ist weniger mehr).
85
Listen und Aufzählungen Listenelemente hinzufügen Um über einem Listenelement ein neues Listenelement einzufügen, setzen Sie die Einfügemarke an den Anfang des vorangehenden Listenelements (hinter das Listensymbol) und drücken die (¢)-Taste. Um unter einem Listenelement ein neues Listenelement einzufügen, setzen Sie die Einfügemarke an das Ende des vorangehenden Listenelements und drücken die (¢)-Taste. (Folgt auf das Listenelement ein Listenelement einer weiter eingerückte Ebene, müssen Sie danach noch die (æ___)-Taste drücken.) Listenelemente löschen Markieren Sie die Zeile des zu löschenden Listenelements und drücken Sie die (Entf)-Taste. Absatzformat zuweisen Listenformate können zusätzlich zu Absatzformaten zugewiesen werden. Umgekehrt folgt daraus, dass Sie den einzelnen Listenelementen (die technisch gesehen Absätze darstellen) eigene Absatzformate zuweisen können. Meist werden Sie allerdings Zeichenformate zur Formatierung der Listenelemente verwenden (zumal die Darstellung von Absatzformaten in Listen von den verschiedenen Browsern ganz unterschiedlich gehandhabt wird). Listenformat ändern Markieren Sie die Liste (oder setzen Sie einfach die Einfügemarke in ein Element der Liste) und weisen Sie der Liste über das Listenfeld FORMATVORLAGE der Format-Symbolleiste ein anderes Listenformat zu. Beachten Sie dabei, dass in hierarchischen Listen jede Ebene eine eigene Liste darstellt, die für sich formatiert werden muss. Um eine Liste in einen normalen Standardtext zurückzuverwandeln, müssen Sie entweder den Listenelementen einzeln das Format NORMAL zuweisen oder Sie setzen die Einfügemarke in die Liste und rufen den Befehl FORMAT/NUMMERIERUNG UND AUFZÄHLUNGEN auf. Dort wählen Sie dann auf der Seite ANDERE die Option NORMAL aus.
86
Kapitel 2: Webdesign mit dem FrontPage-Editor Zeilenumbruch in Listenelementen Wenn Sie innerhalb eines Listeneintrags einen Zeilenumbruch eingeben möchten (so dass die neue Zeile kein Listensymbol erhält!), drücken Sie (ª)+(¢). Listensymbole ändern Um die Symbole einer Liste zu ändern, markieren Sie die Liste (oder setzen Sie einfach die Einfügemarke in ein Element der Liste) und rufen Sie den Befehl FORMAT/NUMMERIERUNG UND AUFZÄHLUNGEN auf. Standardsymbole Je nachdem, ob es sich um eine Nummerierung oder eine Aufzählung handelt, wählen Sie auf einer der Seiten NUMMERIERUNG oder EINFACHE AUFZÄHLUNG eines der Standard-Listensymbole auf (klicken Sie dazu einfach in das entsprechende Feld und drücken Sie OK). Symbole des Designs verwenden Wechseln Sie im Dialogfeld NUMMERIERUNG UND AUFZÄHLUNGEN zur Seite GRAFISCHE AUFZÄHLUNGSZEICHEN und aktivieren Sie die Option BILDER DES AKTUELLEN DESIGNS VERWENDEN. Ein passendes Design können Sie zuvor oder danach über den Befehl FORMAT/ DESIGN zuweisen (siehe Abschnitt 2.5). Ist kein Design eingerichtet, wird ein passendes Standardsymbol verwendet. Eigene Symbole Wechseln Sie im Dialogfeld LISTENEIGENSCHAFTEN zur Seite GRAFISCHE AUFZÄHLUNGSZEICHEN und aktivieren Sie die Option BILD ANGEBEN. Über den Schalter DURCHSUCHEN können Sie die Bilddatei laden. Ich habe beispielsweise für die Liste aus Bild 2.26 eine ClipArt-Grafik verwendet. Da die ClipArt-Grafik als Aufzählungssymbol etwas groß ist, habe ich sie in ein Grafikprogramm geladen, das GIFs verarbeiten kann, und dort auf die halbe Größe reduziert. Dann habe ich eine neue leere Grafik angelegt, die um 10 Pixel breiter ist als die verkleinerte ClipArt-Grafik. Diese zusätzlichen 10 Pixel sollen als Abstandshalter zum Listentext dienen. Schließlich habe ich die ClipArt-Grafik über die Zwischenablage linksbündig in die leere Grafik kopiert. Zum Schluss habe ich die Grafik wieder im GIF-Format gespeichert und über den Befehl NUMMERIERUNG UND AUFZÄHLUNGEN als Aufzählungssymbol ausgewählt.
87
Listen und Aufzählungen
Hinweis
Bild 2.26: Eigene Listensymbole
88
Beim Speichern der Webseite werden Sie gefragt, wo die Grafik abgespeichert werden soll. Sie können die Grafik getrost in dem Verzeichnis Ihres Webs oder im Unterverzeichnis images speichern, ohne danach im Dialogfeld LISTENEIGENSCHAFTEN den Pfad zu der Grafik neu angeben zu müssen.
Kapitel 2: Webdesign mit dem FrontPage-Editor Listen zentrieren Wenn Sie Listen mit grafischen Listensymbolen über das Absatzformat zentrieren (Befehl ZEICHEN/ABSATZ), ist das Ergebnis meist, dass die Listenelemente auf der Seite zentriert werden, die Listensymbole aber linksbündig stehen bleiben. In solchen Fällen empfiehlt es sich die Liste in eine Tabelle mit einer einzigen Zelle zu kapseln, die Breite der Zelle in Pixel anzugeben und die Tabelle zu zentrieren. Zusätzlich kann der Zelleninhalt zentriert werden. Hierarchische Listen Durch Einrücken (Schaltflächen EINZUG VERGRÖSSERN, EINZUG VERKLEIder Format-Symbolleiste) können Sie Listen verschiedener Ebenen definieren. NERN
Um bestimmte Elemente einer Liste als Elemente einer niedrigeren Ebene zu definieren, markieren Sie einfach die Elemente und drücken zwei Mal die Schaltfläche EINZUG VERGRÖSSERN.
Hinweis
Um unter einem Listenelement ein Element niedrigerer Ebene einzurichten, setzen Sie die Einfügemarke auf das Ende des Eintrags und drücken Sie die (¢)-Taste. Danach drücken Sie ein- oder zweimal die Schaltfläche EINZUG VERGRÖSSERN.
Ob Sie die Schaltfläche EINZUG VERGRÖSSERN zur Definition einer neuen, tieferen Ebene ein- oder zweimal drücken müssen, hängt davon ab, in welchem Format Sie sich nach Drücken der (¢)-Taste befinden. Üblicherweise ist dies das Listenformat des darüber gelegenen Eintrags und Sie müssen die Schaltfläche EINZUG VERGRÖSSERN zweimal drücken. Folgt unter dem übergeordneten Listenelement aber bereits eine weiter eingerückte Ebene (oder gibt es zu dem Listenelement noch keinen Text), erhält die neue Zeile kein Listenformat und Sie brauchen die Schaltfläche EINZUG VERGRÖSSERN nur einmal zu drücken.
89
Listen und Aufzählungen
Dynamische Listen
Bild 2.27: Dynamische Liste Dynamische Listen sind hierarchische Listen, in denen der Leser die einzelnen Ebenen der Liste per Mausklick auf die Listensymbole ein- und ausblenden kann. Um eine Liste als dynamische Liste zu formatieren, weisen Sie ihr über das Dialogfeld NUMMERIERUNG UND AUFZÄHLUNGEN die Eigenschaft REDUZIERBARE GLIEDERUNG AKTIVIEREN zu.
Achtung
Wenn Sie möchten, können Sie für die oberste Ebene zusätzlich die Option ANFANGS REDUZIERT aktivieren – mit dem Effekt, das anfangs nur die oberste Ebene der Liste angezeigt wird. Vielleicht sollten Sie den Leser dann aber darauf aufmerksam machen, dass er durch einen Klick auf ein Listenelement untergeordnete Ebenen anzeigen lassen kann.
90
FrontPage verwendet zur Realisierung der dynamischen Liste JavaScript-Code, der lediglich im Internet Explorer korrekt ausgeführt wird. Websurfer, die einen anderen Browser verwenden, sehen stets die vollständige Liste. Dies ist an sich nicht weiter schlimm, Sie sollten bei Verwendung einer dynamischen Liste aber unbedingt kontrollieren, wie die Webseite in anderen Browser aussieht.
Kapitel 2: Webdesign mit dem FrontPage-Editor
Tabellen Was eine Tabelle ist, braucht man niemandem zu erklären. Jeder kennt sie, jeder schätzt sie, jeder hat schon eigene Tabellen erstellt – wenn vielleicht auch nicht gerade mit FrontPage. Und damit wären wir schon beim Thema dieses Abschnitts. Hier sollen Sie lernen, wie Sie Tabellen im FrontPageEditor erstellen, wie Sie Tabellen konfigurieren und weiterbearbeiten und wozu man Tabellen bei der Erstellung von Webseiten nutzen kann.
Kurze Begriffsdefinition Was eine Tabelle ist, braucht man niemandem zu erklären. Trotzdem möchte ich die wichtigsten Grundlagen kurz durchgehen – nur um sicherzustellen, dass wir über die gleiche Sache reden und die gleiche Terminologie verwenden. Werfen Sie dazu einen Blick auf Bild 2.28, in der Sie eine kleine FrontPageTabelle sehen, die aber über alle wichtigen Elemente verfügt, die eine große Tabelle ausmachen.
Bild 2.28: Aufbau einer Tabelle
91
Tabellen Elemente einer Tabelle Zeilen und Spalten. Zeilen verlaufen horizontal, Spalten vertikal. 왘 Die gewünschte Anzahl der Zeilen und Spalten Ihrer Tabelle legen Sie gleich beim Anlegen der Tabelle fest (beispielsweise im Dialogfeld TABELLE EINFÜGEN). Später können Sie mit den Befehlen im Menü TABELLE jederzeit noch Zeilen oder Spalten hinzufügen oder löschen. Meist repräsentiert eine Zeile ein Objekt (in der Tabelle in Bild 2.28 beispielsweise ein Bundesland), während die Spalten bestimmte Eigenschaften des Objekts beschreiben. Will man sich über ein Objekt informieren, liest man die Zeile des Objekts von links nach rechts. Will man die Objekte bezüglich einer Eigenschaft vergleichen (beispielsweise nach der Einwohnerzahl), liest man die entsprechende Spalte von oben nach unten. In anderen Fällen gibt es nur zwei Eigenschaften zur Charakterisierung der Objekte und die möglichen Werte dieser Eigenschaften werden in der ersten Spalte und der ersten Zeile aufgeführt. In solchen Fällen schaut man, wo sich Zeilen und Spalte für zwei Werte kreuzen und entnimmt der gefundenen Zelle die gesuchte Information.
왘
Überschriften. Die erste Spalte und die erste Zeile werden häufig als Zeilen- und Spaltenüberschriften verwendet.
왘
Zellen. Die einzelnen Felder einer Tabelle bezeichnet man auch als Zellen. In ihnen steht die eigentliche Information, wobei die Zellen der obersten Zeile meist als Überschrift für die Spalten verwendet werden.
왘
Rahmen. Zur besseren visuellen Trennung der Zellen einer Tabelle wird die Tabelle mit einem Rahmengitter versehen. Wenn Sie keinen Rahmen wünschen, setzen Sie die Rahmenstärke einfach auf 0.
왘
Beschriftung. Wenn Sie der Tabelle eine Überschrift zuteilen wollen, rufen Sie den Befehl TABELLE/ EINFÜGEN/BESCHRIFTUNG auf.
Tabellen anlegen Um eine Tabelle anzulegen, stehen Ihnen drei Möglichkeiten zur Verfügung. Suchen Sie sich einfach aus, welche Ihnen am angenehmsten ist.
92
Kapitel 2: Webdesign mit dem FrontPage-Editor Tabellen über die Symbolleiste einrichten Dieser Weg geht am schnellsten, weil er für die meisten Einstellungen zum Layout der Tabelle Standardwerte übernimmt. Lediglich die Spalten- und Zeilenzahl wird von Ihnen vorgegeben. 1. Setzen Sie die Einfügemarke in die Textzeile, in der die Tabelle beginnen soll. 2. Klicken Sie in der Standard-Symbolleiste mit der linken Maustaste auf die Schaltfläche TABELLE EINFÜGEN und legen Sie mit gedrückter Maus im erscheinenden Raster die Größe der Tabelle fest. Wenn Sie die Maustaste loslassen, wird die Tabelle angelegt.
Bild 2.29: Tabelle über die Symbolleiste einfügen Wenn Ihnen die Standardeinstellungen nicht zusagen, können Sie diese jederzeit über den Befehl TABELLE/TABELLENEIGENSCHAFTEN/TABELLE anpassen. Tabellen per Dialogfeld einrichten Die Einrichtung der Tabelle über das Dialogfeld TABELLE EINFÜGEN dauert nur unwesentlich länger als die Verwendung der Symbolleisten-Schaltfläche. Dafür haben Sie gleich beim Erzeugen der Tabelle die Gelegenheit, das Erscheinungsbild der Tabelle nach Ihren Wünschen anzupassen. 1. Setzen Sie die Einfügemarke in die Textzeile, in der die Tabelle beginnen soll. 2. Rufen Sie den Befehl TABELLE/EINFÜGEN/TABELLE auf. Neben der Festlegung der Zeilen- und Spaltenanzahl stehen Ihnen hier folgende Optionen zur Verfügung, die in Abschnitt 2.8.4 noch näher besprochen werden.
93
Tabellen
왘 AUSRICHTUNG. Zur Positionierung der Tabelle auf der Seite. 왘 RAHMENSTÄRKE. Legt die verwendete Rahmenbreite fest (dies betrifft im Wesentlichen nur den Rahmen nicht das Innengitter)
왘 TEXTABSTAND. Abstand zwischen den Zelleninnenkanten und dem Zelleninhalt.
왘 ZEILENABSTAND. Abstand zwischen den Zellen der Tabelle. 왘 BREITE. Breite der Tabelle in Pixeln oder in Prozent der Seitenbreite. 왘 FORMATVORLAGE. Zur Festlegung von Stileigenschaften nach der CSS-Spezifikation (siehe Kapitel 2 »Formatvorlagen und Cascading Stylesheets«).
Hinweis
Bild 2.30: Tabelle anlegen
Wenn Sie beim Anlegen einer neuen Tabelle die Breite im Dialogfeld TABELLE EINFÜGEN einstellen, wird diese Einstellung für später beibehalten.
Tabellen zeichnen Das Zeichnen dauert für gewöhnlich am längsten. Dafür macht es aber mehr Spaß und zur Einrichtung ausgefallener Tabellen mit ungewöhnlicher Zellenaufteilung dürfte es den konventionellen Methoden sogar überlegen sein. 94
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.31: Tabelle zeichnen 1. Wenn Sie die Tabelle in einen vorhandenen Text einfügen wollen, schaffen Sie erst einmal Platz für die Tabelle, indem Sie an der betreffenden Stelle Leerzeilen einfügen. Ansonsten scrollen Sie die Anzeige, so dass Sie Platz haben, um die Tabelle aufzuziehen. Setzen Sie die Einfügemarke in diesen Bereich. 2. Rufen Sie den Befehl TABELLE/TABELLE ZEICHNEN auf. Sie wechseln daraufhin direkt in den Zeichenmodus, und der FrontPage-Editor blendet die Tabellen-Symbolleiste ein, in der Schaltflächen für die wichtigsten Befehle zur Bearbeitung von Tabellen enthalten sind. Die Schaltfläche TABELLE ZEICHNEN ist gedrückt und der Mauszeiger hat die Form eines Zeichenstiftes. 3. Klicken Sie mit der linken Maustaste auf die ungefähre Position der oberen, linken Ecke und ziehen Sie den äußeren Rahmen der Tabelle mit gedrückter Maustaste auf.
95
Tabellen 4. Den oberen und den rechten Rand können Sie später noch mit der Maus aufnehmen (wenn der Mauszeiger die Gestalt eines Doppelpfeils annimmt) und verschieben.
5. Fügen Sie jetzt Zeilen ein. Ziehen Sie mit dem Stift einfach horizontale Linien in den Rahmen ein. Die Höhe des Mausklicks bestimmt die anfängliche Höhe der Linie, die Sie im Übrigen nicht exakt von Rand zu Rand ziehen brauchen. (Probieren Sie es einfach mal aus, Sie werden schnell damit klar kommen!) Später kann die Höhe der Linie mit der Maus noch genauer eingestellt werden. Sollen mehrere Zeilen die gleiche Höhe haben, verlassen Sie den Zeichenmodus ((Esc)-Taste), markieren Sie die betreffenden Zeilen (um nicht direkt untereinander liegende Zeilen gemeinsam zu markieren, halten Sie die (ª)-Taste gedrückt) und klicken Sie auf die Schaltfläche ZEILEN GLEICHMÄSSIG VERTEILEN.
6. Fügen Sie jetzt Spalten ein. Ziehen Sie mit dem Stift einfach vertikale Linien in den Rahmen ein. Die Linien brauchen im Übrigen nicht ganz durchzugehen, Sie können auch Zeilen aussparen. Später kann die Position der Linie mit der Maus noch genauer eingestellt werden. Sollen mehrere Spalten die gleiche Breite haben, verlassen Sie den Zeichenmodus ((Esc)-Taste), markieren Sie die betreffenden Spalten (um nicht direkt nebeneinander liegende Spalten gemeinsam zu markieren, halten Sie die (ª)-Taste gedrückt) und klicken Sie auf die Schaltfläche SPALTEN GLEICHMÄSSIG VERTEILEN. 7. Verlassen Sie den Zeichenmodus, indem Sie auf die Schaltfläche TABELLE ZEICHNEN klicken oder die (Esc)-Taste drücken.
96
Kapitel 2: Webdesign mit dem FrontPage-Editor
Tabellen bearbeiten Tabellen können in vielfältiger Weise bearbeitet werden. Die entsprechenden Befehle finden Sie in dem Menü TABELLE sowie in der gleichnamigen Symbolleiste (Aufruf über das Menü ANSICHT). In diesem Abschnitt werden wir uns den Befehlen widmen, mit denen Sie bestehende Tabellen durch Hinzufügen und Löschen von Zeilen, Spalten und Zellen anpassen und gestalten können. Elemente markieren Bevor Sie einzelne Tabellenelemente bearbeiten können, müssen Sie diese erst einmal markieren. Voraussetzung ist, dass Sie sich nicht im Zeichenmodus befinden (Mauszeiger in Bleistiftform). Beenden Sie gegebenenfalls den Zeichenmodus, indem Sie auf die Schaltfläche TABELLE ZEICHNEN klicken oder die (Esc)-Taste drücken. Zelle markieren Setzen Sie die Einfügemarke in die Zelle und rufen Sie den Befehl TABELLE/ MARKIEREN/ZELLE auf. Den Inhalt einer Tabelle markieren Sie wie gewohnt durch Ziehen und/oder Doppelklicken mit der Maus. Zeile oder Spalte markieren Setzen Sie die Einfügemarke in eine beliebige Zelle der zu markierenden Zeile oder Spalte und rufen Sie einen der Befehle TABELLE/MARKIEREN/ZEILE oder TABELLE/MARKIEREN/SPALTE auf. Um eine Zeile oder Spalte mit der Maus zu markieren, bewegen Sie den Mauszeiger auf den linken Rand der Zeile beziehungsweise den oberen Rand der Spalte, bis der Mauszeiger die Form eines Pfeils annimmt. Klicken Sie dann mit der linken Maustaste auf den Rand. Ganze Tabelle markieren Setzen Sie die Einfügemarke in eine beliebige Zelle der Tabelle und rufen Sie den Befehl TABELLE/MARKIEREN/TABELLE auf.
97
Tabellen Mehrere Elemente gleichzeitig markieren Klicken Sie mit der Maus in eine der zu markierenden Zellen und ziehen Sie die Maus mit gedrückter Taste über die weiteren zu markierenden Zellen. Obige Methode funktioniert wie das Aufziehen eines rechteckigen Rahmens um die zu markierenden Zellen. Wenn Sie individuell festlegen wollen, welche Zellen markiert werden sollen oder nicht zusammenhängende Zellen markieren wollen, halten Sie die (Alt)-Taste und die (ª)-Taste gedrückt und klicken Sie dann mit der Maus in die zu markierenden Zellen. Elemente hinzufügen Sollten Sie sich bei der Vorausberechnung Ihrer Tabelle vertan haben, können Sie die Tabelle selbstverständlich jederzeit um einzelne Zellen, Zeilen oder Spalten erweitern. Zellen hinzufügen Einzelne Zellen können Sie mit dem Befehl TABELLE/EINFÜGEN/ZELLE einfügen. Das Ergebnis dieses Befehls kann aber je nach Position der Einfügemarke und der ursprünglichen Zellenaufteilung ziemlich überraschende Ergebnisse zeitigen. Es empfiehlt sich daher
왘
entweder gleich ganze Zeilen oder Spalten einzufügen (und dann gegebenenfalls nicht gewünschte Zellen zu löschen)
왘
oder Zellen durch Teilung bestehender Zellen einzufügen (siehe unten).
Zeilen oder Spalten hinzufügen Beschrieben ist hier nur das Einfügen von Zeilen, zum Einfügen von Spalten geht man aber ganz analog vor. 1. Setzen Sie die Einfügemarke in eine Zelle der Zeile über oder unter der Sie Zeilen einfügen wollen. 2. Rufen Sie den Befehl TABELLE/EINFÜGEN/ZEILEN ODER SPALTEN auf. In dem erscheinenden Dialogfeld aktivieren Sie die Option ZEILE, geben an wie viele Zeilen Sie einfügen möchten und ob diese ÜBER oder UNTER DER MARKIERTEN Zeile eingefügt werden sollen.
98
Kapitel 2: Webdesign mit dem FrontPage-Editor Oder 1. Wechseln Sie in den Zeichenmodus, indem Sie das Bleistift-Symbol in der Tabellen-Symbolleiste drücken. 2. Ziehen Sie die Zeile einfach mit dem Bleistift von links nach rechts ein (die Zeile wird stets unter der Zeile eingerichtet, in der Sie die Linie durchziehen). 3. Beenden Sie den Zeichenmodus, indem Sie nochmals auf das BleistiftSymbol klicken oder die (Esc)-Taste drücken. Elemente löschen Markieren Sie das oder die zu löschenden Elemente und rufen Sie den Befehl TABELLE/ZELLEN LÖSCHEN auf. Zellen verbinden oder teilen Zellen verbinden 1. Markieren Sie die zu verbindenden Zellen. 2. Rufen Sie den Befehl TABELLE/ZELLEN VERBINDEN auf oder klicken Sie in der Tabellen-Symbolleiste auf die gleichnamige Schaltfläche. Beachten Sie, dass nur direkt nebeneinander liegende Zellen verbunden werden können. Wenn Sie beispielsweise eine Zelle mit der über ihr liegenden und der rechts liegenden Zelle verbinden wollen, müssen Sie dies in zwei Schritten erledigen. Zellen teilen 1. Markieren Sie die zu teilende Zelle. 2. Rufen Sie den Befehl TABELLE/ZELLEN TEILEN auf oder klicken Sie in der Tabellen-Symbolleiste auf die gleichnamige Schaltfläche. In dem erscheinenden Dialogfeld legen Sie fest, ob die Zelle vertikal oder horizontal geteilt werden soll und wie viel Zeilen oder Spalten angelegt werden sollen. Es gibt außerdem folgende Möglichkeit, Zellen zu teilen: 1. Wechseln Sie in den Zeichenmodus, indem Sie das Bleistift-Symbol in der Tabellen-Symbolleiste drücken. 2. Ziehen Sie die Trennlinie einfach mit dem Bleistift von oben nach unten oder von links nach rechts ein.
99
Tabellen
Hinweis
3. Beenden Sie den Zeichenmodus, indem Sie nochmals auf das BleistiftSymbol klicken oder die (Esc)-Taste drücken.
Statt Zellen mühsam aufzuteilen, können Sie auch eine neue Tabelle innerhalb einer Zelle anlegen.
Tabellen formatieren Nachdem Sie Ihre Tabelle angelegt, den Text eingegeben, zusammengehörige Zellen verbunden, notfalls noch Zeilen oder Spalten eingefügt und überflüssige Zeilen gelöscht haben, sollten Sie sich noch einen Moment Zeit nehmen, um Ihrer Tabelle eine angemessene Formatierung angedeihen zu lassen.
Bild 2.32: Tabelleneigenschaften setzen
100
Kapitel 2: Webdesign mit dem FrontPage-Editor Klicken Sie dazu in eine beliebige Zelle der Tabelle und rufen Sie den Befehl TABELLE/TABELLENEIGENSCHAFTEN/TABELLE auf (oder klicken Sie gleich mit der rechten Maustaste in die Tabelle und rufen den Befehl aus dem Kontextmenü auf).
Hinweis
Es erscheint das Dialogfeld TABELLENEIGENSCHAFTEN, in dem Ihnen die nachfolgend beschriebenen Optionen zur Verfügung stehen.
Das Dialogfeld verfügt über einen ÜBERNEHMEN-Schalter, so dass Sie den Effekt Ihrer Einstellungen austesten können (sofern diese in der Normalansicht umgesetzt werden können), ohne dazu das Dialogfeld schließen zu müssen.
Tabelle auf der Seite ausrichten Zur Ausrichtung der Tabelle gehören die Optionen
왘 왘 왘
Ausrichtung Textfluss Breite und Höhe
Ausrichtung
Bild 2.33: Ausrichtung von Tabellen Legen Sie zuerst die Ausrichtung fest. Hier stehen Ihnen die folgenden Optionen zur Verfügung:
왘
STANDARD. Die Tabelle wird an der Position ausgerichtet, die bei Erstellung der Tabelle gewählt war (üblicherweise links).
101
Tabellen
Achtung
왘 왘 왘
LINKS. Die Tabelle wird am linken Seitenrand ausgerichtet. ZENTRIERT. Die Tabelle wird auf der Seite zentriert. RECHTS. Die Tabelle wird am rechten Seitenrand ausgerichtet – eine Ausrichtung, die nicht von allen Browsern unterstützt wird.
Die verschiedenen Ausrichtungen kommen nur zum Tragen, wenn die Tabellenbreite kleiner als die Seitenbreite ist und der Standard-Textfluss aktiviert ist.
Textfluss
Bild 2.34: Textfluss steuern Standardmäßig ist der Textfluss so geregelt, dass links und rechts neben der Tabelle kein Text angezeigt wird. Wenn Sie beispielsweise eine Tabelle einfügen, während die Einfügemarke inmitten einer Textzeile steht, wird der Text zweimal umgebrochen und die Tabelle in der entstandenen Leerzeile eingefügt. Darüber hinaus können Sie aber auch festlegen, dass die Tabelle vom Text umflossen werden soll.
왘
102
LINKS. Die Tabelle steht links. Der Text unter der Tabelle wird rechts neben die Tabelle gesetzt.
Kapitel 2: Webdesign mit dem FrontPage-Editor
Achtung
왘
RECHTS. Die Tabelle steht rechts. Der Text unter der Tabelle wird links neben die Tabelle gesetzt.
Der Textfluss kommt nur zum Tragen, wenn die Tabellenbreite kleiner als die Seitenbreite ist.
Breite und Höhe Im Dialogfeld TABELLENEIGENSCHAFTEN können Sie auch die Breite und Höhe der Tabelle festlegen. Dabei sollten Sie sich folgende Punkte vergegenwärtigen:
왘
Sie geben nur eine Mindestbreite und -höhe vor. Reichen diese nicht aus, um die Inhalte der verschiedenen Zellen vollständig anzuzeigen, kann der Editor Breite und Höhe heraufsetzen.
왘
Sie können die Angaben in Pixeln oder in Prozent der Fenstergröße des Browsers machen. Die Prozentangabe ist meist vorzuziehen, da damit sichergestellt wird, dass sich die Tabelle der vom Leser eingestellten Browsergröße und der Bildschirmauflösung anpasst und meist vollständig zu sehen ist.
왘
Einstellungen zu Ausrichtung und Textfluss werden oftmals nur dann sichtbar, wenn die Breite der Tabelle kleiner ist als die Seitenbreite.
왘
Sie können die Tabellenabmaße auch direkt im Editor anpassen, indem Sie den rechten oder unteren Rahmen mit der Maus aufnehmen und verschieben.
Den Rahmen konfigurieren Zur Einstellung des Rahmens gehören die Festlegung
왘 왘
der Rahmenstärke und der Farben.
Die Rahmenstärke Die Rahmenstärke betrifft nur den äußeren Rahmen – nicht das Gitter zwischen den Zellen.
103
Tabellen Wenn Sie den Rahmen (inklusive Gitter) ausblenden wollen, wählen Sie die Rahmenstärke 0. Die Rahmenfarben Wenn Sie die genaue Färbung und Darstellung des Rahmens den verschiedenen Browsern überlassen wollen, behalten Sie für die Felder FARBE, HELLER RAHMEN und DUNKLER RAHMEN die Einstellung AUTOMATISCH bei. Im anderen Fall können Sie eigene Farben vorgeben, wobei Sie beachten sollten, dass Sie unterschiedliche Farben für den linken und oberen Rand (Heller Rahmen) und den rechten und unteren Rand (Dunkler Rahmen) des Außenrahmens und des Zellengitters vorsehen können – auf diese Weise können Sie dem Rahmen ein dreidimensionales Aussehen verleihen.
Querverweis
Wenn Sie den Rahmen einheitlich färben wollen, wählen Sie im Feld FARBE eine Farbe aus und setzen Sie den HELLEN und den DUNKLEN RAHMEN auf AUTOMATISCH. Die Verwendung benutzerdefinierter Farben wird im Abschnitt »Farben und grafische Elemente« beschrieben.
Text- und Zellenabstand festlegen
Bild 2.35: Text- und Zellenabstand
104
Kapitel 2: Webdesign mit dem FrontPage-Editor Textabstand Wenn Sie Ihre Zellen mit Text füllen, wirkt es sehr unschön, wenn der Text direkt an der Innenkante der Zelle beginnt. Legen Sie daher einen Abstand (in Pixeln) zwischen den Innenkanten der Zellen und dem Zelleninhalt fest (Vorgabe ist 1 Pixel). Wenn Sie Bilder in eine Zelle einfügen, kann der Abstand störend sein. Setzen Sie ihn dann auf 0. Zellenabstand Mit dieser Option können Sie den Abstand zwischen den Zellen festlegen. Den Hintergrund der Tabelle gestalten Standardmäßig wird der Hintergrund der Tabelle (Zellenhintergrund, Zellenzwischenräume und Titelhintergrund) im FrontPage-Editor weiß und in den Browsern in deren Hintergrundfarbe angezeigt. Wenn Sie möchten, können Sie aber auch
왘 왘
eine Farbe oder ein Bild
als Hintergrund verwenden. Farbe
Querverweis
Um der Tabelle eine Hintergrundfarbe zuzuweisen, wählen Sie diese einfach im Feld HINTERGRUND/FARBE aus. Die Verwendung benutzerdefinierter Farben wird im Abschnitt »Farben und grafische Elemente« beschrieben.
Hintergrundbild Um der Tabelle ein Hintergrundbild zuzuweisen, aktivieren Sie die Option HINTERGRUNDBILD VERWENDEN und wählen Sie die zugehörige Bilddatei über das Dialogfeld HINTERGRUNDBILD WÄHLEN aus (Aufruf über den Schalter DURCHSUCHEN).
105
Achtung
Tabellen
Diese Option ist nur dann verfügbar, wenn Sie die Kompatibilitätsoption NUR MICROSOFT INTERNET EXPLORER eingestellt haben. Ganz korrekt ist dies nicht, denn der neue Netscape 6-Browser unterstützt auch die Verwendung eines Hintergrundbildes (interpretiert den erzeugten HTML-Code aber anders als der Internet Explorer).
Titel Um Ihre Tabelle mit einem Titel zu versehen,
Hinweis
1. Setzen Sie die Einfügemarke in eine Zelle der Tabelle und rufen den Befehl TABELLE/ EINFÜGEN/BESCHRIFTUNG auf. 2. Geben Sie den Text für die Überschrift ein und formatieren Sie den Text (beispielsweise durch Auswahl eines größeren Schriftgrads). 3. Wenn Sie eine Unterschrift statt einer Überschrift wünschen, klicken Sie mit der rechten Maustaste in den Titel und wählen Sie im Kontextmenü den Befehl BESCHRIFTUNGSEIGENSCHAFTEN aus. In dem gleichnamigen Dialogfeld setzen Sie die Option UNTER DER TABELLE.
Alternativ können Sie natürlich auch normale Textzeilen als Über- oder Unterschriften verwenden. Wenn Sie allerdings die Tabelle von Text umfließen lassen, sollten Sie die tabelleninterne Beschriftung wählen.
Formatvorlage Über diesen Schalter gelangen Sie in das Dialogfeld FORMATVORLAGE ändern, das wir schon in Kapitel 2.4.2 angesprochen haben. Allerdings wird es hier trotz des irreführenden Titels nicht zum Ändern einer Formatvorlage genutzt, sondern um der Tabelle eine Stylesheet-Formatierung zuzuweisen. Entweder geben Sie dazu über eines der Felder KLASSE oder ID den Bezeichner eines bereits definierten Stylesheets an oder Sie richten über den Schalter FORMAT einen neuen Inline-Stil speziell für die Tabelle ein.
106
Kapitel 2: Webdesign mit dem FrontPage-Editor
Zellen formatieren Nicht nur die ganze Tabelle auch die einzelnen Zellen der Tabelle können konfiguriert werden. Klicken Sie dazu in die betreffende Zelle und rufen Sie den Befehl TABELLE/TABELLENEIGENSCHAFTEN/ZELLE auf.
Bild 2.36: Das Dialogfeld Zelleneigenschaften Zelleninhalt ausrichten Über die Felder HORIZONTALE und VERTIKALE AUSRICHTUNG legen Sie fest, wie der Zelleninhalt innerhalb der Zelle ausgerichtet werden soll. Abgesehen von der Standardeinstellung können Sie den Zelleninhalt links, rechts, zentriert oder im Blocksatz sowie oben, in der Mitte, auf der Grundlinie oder unten positionieren. Die Option GRUNDLINIE bewirkt, dass Text unterschiedlichen Formats an einer gemeinsamen Grundlinie ausgerichtet wird.
107
Tabellen Zelleninhalt formatieren Im Prinzip können Sie Text in einer Zelle ebenso formatieren wie gewöhnlichen Fließtext. Auf zwei Besonderheiten möchten wir Sie allerdings hinweisen:
왘
Wenn Sie nicht möchten, dass Browser einen Zelleninhalt gegebenenfalls umbrechen, aktivieren Sie die Option KEIN UMBRUCH.
왘
Das Drücken der (ÿ__)-Taste führt üblicherweise dazu, dass die Einfügemarke in die nächste Zelle gesetzt wird. Wenn Sie Tabulatoren im Text einer Zelle verwenden möchten, müssen Sie dieser die Formatvorlage FORMATIERT zuweisen.
Zeilen- und Spaltenüberschriften festlegen Üblicher nutzt man die Zellen der obersten Zeile als Spaltenüberschriften. Um diese durch besondere Formatierung (Fettdruck) hervorzuheben, markieren Sie die Zellen mit den Überschriften und weisen Sie Ihnen im Dialogfeld ZELLENEIGENSCHAFTEN die Option ENTHÄLT ÜBERSCHRIFT zu. Selbstverständlich können Sie in gleicher Weise auch die Zellen der ersten Spalte bei Bedarf als Zeilenüberschriften formatieren. Zellengröße verändern Um es gleich vorwegzunehmen: Die sicherte Art die Größe der Zellen zu verändern, ist es, die Zellenkanten mit der Maus zu verschieben. Ansonsten sind die Ergebnisse oft nur schwer vorhersehbar, da
왘
die Breite, die Sie für eine Zelle festlegen, immer die ganze Spalte betreffen,
왘
die Höhe, die Sie für eine Zelle festlegen, immer die ganze Zeile betreffen,
왘
es schnell zu Konflikten durch unterschiedliche Breitenangaben (Höhenangaben) zwischen den Zellen einer Spalte (Zeile) kommen kann,
왘
es bei Prozentangaben zu Konflikten kommen kann, wenn diese sich in einer Spalte (Zeile) nicht zu 100 addieren.
Im Allgemeinen ist es sinnvoll, für Zellen mit Text die Abmaße in Prozent festzulegen, während es für Zellen, die Bilder enthalten, oftmals günstiger
108
Kapitel 2: Webdesign mit dem FrontPage-Editor ist, die genaue Angabe der Pixelabmaße des Bildes zu übernehmen. Beachten Sie aber, dass dem Browser immer die Möglichkeit vorbehalten ist, die Abmaße der Zellen an den Zelleninhalt anzupassen. Kontrollieren Sie Ihr Tabellenlayout also unbedingt in verschiedenen Browsern (Internet Explorer, Netscape-Browser) und unterschiedlich großen Browserfenstern. Schließlich können Sie mithilfe der Optionen zur ZEILEN- und SPALTENERnoch festlegen, über wie viele Zeilen beziehungsweise Spalten sich eine Zelle erstrecken soll.
STRECKUNG
Zellenhintergrund wählen Hierzu stehen Ihnen die gleichen Optionen wie zur Einrichtung des Tabellenhintergrundes zur Verfügung, nur dass sich die hier vorgenommenen Einstellungen nur auf die markierten Zellen beziehen. Einstellungen für spezielle Zellen haben dabei Vorrang vor den Einstellungen für die gesamte Tabelle. Zellenrahmen gestalten Hierzu stehen Ihnen die gleichen Optionen wie zur Einrichtung des Tabellenrahmens zur Verfügung, nur dass sich die hier vorgenommenen Einstellungen nur auf die markierten Zellen beziehen. Einstellungen für spezielle Zellen haben dabei Vorrang vor den Einstellungen für die gesamte Tabelle. Formatvorlage Über diesen Schalter gelangen Sie in das Dialogfeld FORMATVORLAGE BEARBEITEN, das wir schon im Abschnitt »Formatvorlagen und Cascading Stylesheets« angesprochen haben. Allerdings wird es hier trotz des irreführenden Titels nicht zum Ändern einer Formatvorlage genutzt, sondern um der Zelle eine Stylesheet-Formatierung zuzuweisen. Entweder geben Sie dazu über eines der Felder KLASSE oder ID den Bezeichner eines bereits definierten Stylesheets an oder Sie richten über den Schalter FORMAT einen neuen Inline-Stil speziell für die Zelle ein.
Bilder, Videos und Tabellen in Tabellen Die meisten Tabellen enthalten reinen Text. Es ist aber durchaus möglich, auch andere Datenformate – beispielsweise Bilder – in die Zellen einer Tabelle einzufügen. 109
Tabellen Bilder in Tabellen einfügen
Bild 2.37: Bilder als Zelleninhalt Um Bilder in eine Zelle einer Tabelle einzufügen, gehen Sie im Prinzip genauso vor wie beim Einfügen von Bildern in einen Fließtext: 1. Setzen Sie die Einfügemarke in die Zelle, in der das Bild angezeigt werden soll. 2. Rufen Sie einen der Befehle EINFÜGEN/GRAFIK/AUS DATEI, EINFÜGEN/GRAFIK/CLIPART oder EINFÜGEN/GRAFIK/VON SCANNER ODER KAMERA auf. Die folgenden Schritte gehen davon aus, dass Sie den Befehl EINFÜGEN/ GRAFIK/AUS DATEI gewählt haben. Wenn Sie mehr über den Befehl EINFÜGEN/GRAFIK/CLIPART und die Arbeit mit dem Clip Organizer erfahren wollen, lesen Sie bitte im Abschnitt »Farben und grafische Elemente« nach. 110
Kapitel 2: Webdesign mit dem FrontPage-Editor 3. Wählen Sie die Bilddatei aus und klicken Sie auf OK. 4. Speichern Sie Ihre Webseite mit der eingebetteten Bilddatei.
Hinweis
Zum Abspeichern der Bilddatei erscheint dabei ein eigenes Dialogfeld, in dem Sie über den Schalter ORDNER WECHSELN ein eigenes Verzeichnis zum Abspeichern der Bilddatei auswählen können. Wenn die Webseite Teil eines Webs ist, empfiehlt es sich beispielsweise die Bilddateien im Unterverzeichnis images abzuspeichern.
Bilder, die bereits im Verzeichnis Ihres Webs oder im Unterverzeichnis images abgespeichert wurden, fügt man am schnellsten ein, indem man die Bilddatei direkt aus der Ordnerliste in die Tabellenzelle zieht.
Bildgröße und Zellengröße Standardmäßig versucht der FrontPage-Editor die Zellengröße an die Größe der Grafik anzupassen (abzüglich des eingestellten Textabstandes, siehe oben). Befinden sich mehrere Bilder in einer Spalte (oder Zeile), richtet sich die Spaltenbreite nach dem größten Bild. Dies kann schnell zu einem äußerst unruhigen Gesamteindruck von der Tabelle führen. In solchen Fällen ist es meist vorteilhafter, die kleineren Bilder soweit zu vergrößern, dass sie ihre Zellen ebenfalls ganz ausfüllen. Videos Um ein Video in eine Zelle einzubetten,
왘
rufen Sie den Befehl EINFÜGEN/GRAFIK/VIDEO auf und wählen die Videodatei (Extension .avi) aus
왘
oder Sie rufen den Befehl EINFÜGEN/GRAFIK/CLIPART aus und wählen das Video mithilfe des Clip Organizers aus. Voraussetzung hierfür ist, dass die Videos vom Clip Organizer erfasst wurden (siehe 2.10.4).
왘
oder Sie ziehen die Videodatei per Drag&Drop direkt vom Windows Explorer in die Tabellenzelle.
111
Achtung
Tabellen
Der erzeugte Code wird von den verschiedenen Browsern unterschiedlich verarbeitet – also unbedingt das Ergebnis testen.
Verschachtelte Tabellen Schließlich ist es auch möglich, eine Tabelle innerhalb einer Zelle einer bereits vorhandenen Tabelle anzulegen.
Layout mit Tabellen Tabellen lassen sich nicht nur zur übersichtlichen Präsentation von Daten und Informationen verwenden. Tabellen sind auch ein hervorragendes Mittel, um das Layout – speziell die Aufteilung – einer Seite zu gestalten. Mittlerweile gibt es zwar auch andere Möglichkeiten Textelemente frei auf den Seiten zu positionieren, doch in vielen Fällen ist die Seitenaufteilung mit Tabellen günstiger, da sie schneller und übersichtlicher ist und auch von älteren Browsern unterstützt wird. Grundsätzlich gehen Sie dabei wie folgt vor: 1. Sie legen die Tabelle an und teilen Sie so in Zellen auf, wie es zur Positionierung der einzufügenden Webseitenelemente erforderlich ist. Für komplexere Aufteilungen sollten Sie hier die grafische Erstellung der Tabelle wählen (Befehl TABELLE/TABELLE ZEICHNEN). 2. Sie rufen den Befehl TABELLE/TABELLENEIGENSCHAFTEN/TABELLE auf und setzen die Rahmenstärke auf 0. 3. Sie platzieren die Webseitenelemente in die Zellen Ihrer Tabelle. Schauen wir uns zwei Beispiele an. Mehrspaltiger Text für Online-Magazine Wenn Sie eine kleine Online-Zeitung anbieten wollen, werden Sie die Artikel Ihrer Zeitung in der für Zeitungen typischen Spaltenaufteilung anbieten wollen. Mithilfe von Tabellen ist die Einrichtung einer zweispaltigen Webseite kein Problem:
112
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘 왘
Legen Sie eine neue Webseite an.
왘
Verbinden Sie die beiden Zellen der ersten Zeile, um in diese den Titel der Zeitung eingeben zu können.
왘
Tippen Sie den Text für Ihren Artikel in die beiden Spalten der unteren Zeile ein.
Legen Sie auf der jungfräulichen Seite eine Tabelle mit zwei Spalten und zwei Zeilen an.
Bild 2.38: Online-Magazin Mit einem etwas aufwendigerem Tabellen-Layout können Sie auch Grafiken problemlos in Ihre Zeitung aufnehmen. Ausgefallenes Layout mit Tabellen Auch für Webseiten mit etwas peppigerem Design sind Tabellen gut geeignet (siehe Kapitel 5 zur Aufsetzung eigener Homepages).
113
Hyperlinks
Hyperlinks Was wäre das Web ohne Hyperlinks? Eine klobige, zusammenhanglose Ansammlung von Informationen. Stellen Sie sich eine Großstadt vor, in der in jedem Zimmer jeder Wohnung und jeden Hauses ein Mensch sitzt. In dieser Stadt gibt es Millionen Menschen, doch diese Menschen wissen nichts voneinander, denn die Zimmer haben keine Türen, keine Fenster, kein Radio, kein Fernsehen und kein Telefon. Stellen Sie sich vor, dass alle Gebäude Computer sind, die Wohnungen sind Verzeichnisse, die Zimmer entsprechen Dateien und die Menschen den Inhalten der Dateien. Die Computer sind wie die Gebäude einer Stadt durch Highways verbunden: durch Informations-Highways. Doch diese Verbindungen werden von den Dateien nicht genutzt. Selbstgefällig schlummern diese in ihren Verzeichnissen – jede ein Prinzesschen, das darauf wartet, dass irgendwann zufällig ein Prinz über es stolpert und es wach küsst. In ungefähr diesem Zustand verharrte das Internet vor der Evolution des WWW, des World Wide Web. Plötzlich aber ging ein Ruck durch die Dateien. Es gärte und brodelte. »Dateien aller Länder vereinigt euch«, hörte man sie skandieren. Schon begannen die ersten Dateien, sich zu organisieren. Sie legten sich eine einheitliche Kleidung zu, das so genannte HTML-Format, stellten über Hyperlinks immer neue Kontakte her und gaben ihrer Bewegung einen Namen: World Wide Web. Heute ist das WWW mit Abstand die stärkste und aktivste Kraft im Internet, so dass für viele Anwender die Begriffe WWW und Internet schon fast synonym geworden sind. Den Grundstein dieses Erfolges bilden zweifelsohne die so genannten Hyperlinks, die Verbindungen zwischen den einzelnen Dokumenten. Die Einrichtung dieser Hyperlinks ist Thema dieses Kapitels.
Grundlagen der Hyperlink-Technik Jeder der schon einmal mit einem Browser wie dem Netscape Navigator oder dem Internet Explorer durchs WWW gesurft ist, hat auch schon Hyperlinks benutzt. Meist verstecken sich diese hinter Textstellen, die durch eine besondere Vordergrundfarbe und Unterstreichung hervorgehoben sind.
114
Kapitel 2: Webdesign mit dem FrontPage-Editor Klickt man auf einen solchen Hyperlink, lädt der Browser ein neues Webdokument oder springt zu einer anderen Textstelle. Wie sind Hyperlinks aufgebaut? Ein Hyperlink besteht immer aus zwei Teilen, ähnlich wie auch eine Medaille immer zwei Seiten hat:
왘
Der eine Teil ist für den Besucher der Webseite gedacht. Es ist der nach außen sichtbare Teil, der sich harmonisch in das Erscheinungsbild der Seite einfügen sollten und durch eine spezielle Formatierung oder einen Wechsel des Mauszeigers dem Besucher anzeigt, dass er von hier aus schnell zu weiteren Informationen kommt. Dieser sichtbare Teil kann aus einer Textstelle oder einem Bild (beziehungsweise einem Teil eines Bildes) bestehen. Textstellen, hinter denen sich Hyperlinks verbergen, werden üblicherweise im Browser unterstrichen und in einer anderen Farbe dargestellt, so dass Sie leicht zu erkennen sind. Hyperlinks in Grafiken sind nicht immer so schnell auszumachen, meist lässt sich ihre Position aber erahnen und spätestens, wenn der Besucher den Mauszeiger über den Link bewegt, kann er an dem Wechseln der Cursor-Form erkennen, dass er auf einen Link gestoßen ist.
왘
Der andere Teil ist für den Browser. Klickt der Besucher auf den sichtbaren Teil eines Hyperlinks, ist dies für den Browser eine Aufforderung, die mit dem Hyperlink verbundene Datei zu laden (oder eine andere adäquate Aktion auszuführen). Dazu braucht der Browser die Adresse der zu ladenden Datei, sprich Informationen darüber, wo die Datei im Internet zu finden ist. Diese Information wird in Form eines URLs angegeben.
Sichtbarer Teil und URL müssen nun irgendwie zusammengebracht werden.
Hyperlinks einrichten Betrachten wir zuerst die Einrichtung eines Text-Hyperlinks – also eines Hyperlinks, der im Browser durch eine besonders gekennzeichnete Textstelle zu erkennen ist.
115
Hyperlinks
Bild 2.39: Hyperlinks einrichten 1. Legen Sie eine neue Webseite an und geben Sie zuerst wie gewöhnlich Ihren Text ein, beispielsweise:
Hinweis
»Web-Publishing ist ein weites Feld. Es umfasst Gebiete wie Grafik und Design, Textverarbeitung, WWW, Netzwerk-Kommunikation, ServerVerwaltung, Script-Programmierung, Java-Programmierung etc. Obwohl sich die Autoren dieses Buches durchaus bemüht haben, möglichst alle diese Aspekte in verständlicher wie auch informativer und professioneller Weise anzusprechen, bilden wir uns nicht ein, alle Themen erschöpfend behandeln zu können. Wenn Sie weiterführende Literatur zu diesen Bereichen suchen, besuchen Sie doch einmal den Markt+Technik-Server.«
116
Eigentlich wollte ich als Beispiel einen Link zum FBI einrichten, doch aus Gründen der Geheimhaltung und um internationale Verwicklungen zu vermeiden, habe ich mich dann entschlossen, etwas unverfänglichere Informationen zur Verfügung zu stellen. (Das FBI finden Sie übrigens unter http://www.fbi.gov; wie das CIA Deutschland sieht, erfahren Sie unter http://www.odci.gov/cia/ publications/factbook/geos/gm.html.)
Kapitel 2: Webdesign mit dem FrontPage-Editor 2. Markieren Sie den Textabschnitt, für den Sie einen Hyperlink einrichten möchten. In unserem Beispiel wäre dies der Text: »Markt+TechnikServer«. Sie brauchen allerdings keineswegs immer so offensichtlich auf einen Hyperlink hinzuweisen. Wenn Sie beispielsweise eigene Links für einzelne Themenbereiche einrichten wollen könnten Sie beispielsweise auch die Wörter »Grafik«, »WWW« und/oder »Java-Programmierung« mit Hyperlinks versehen.
3. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf oder klicken Sie in der Standard-Symbolleiste auf die Schaltfläche HYPERLINK EINFÜGEN. 4. Im Dialogfeld HYPERLINK EINFÜGEN, siehe Bild 2.39, geben Sie im Feld ADRESSE die Adresse des zu ladenden Webdokuments ein. Im mittleren Teil des Dialogfelds können Sie sich über die Schalter AKTUORDNER, BESUCHTE WEBSEITEN, ZULETZT VERWENDET eine Auswahl verschiedener Zielseiten anzeigen lassen. In unserem Fall nützt uns dies aber nicht, doch glücklicherweise kennen wir die Adresse und können Sie direkt eintippen: http://www.mut.de.
ELLER
(Wenn Sie sich wegen einer Internet-Adresse unsicher sind, können Sie auf das Symbol WEB DURCHSUCHEN klicken und dann mit Ihrem Webbrowser nach der gewünschten Adresse suchen. Voraussetzung ist eine bestehende Internet-Verbindung) 5. Drücken Sie auf OK. In der Normal-Ansicht des FrontPage-Editors sollte der Text des Hyperlinks jetzt in farbiger Schrift (standardmäßig blau) und unterstrichen dargestellt werden. 6. Testen Sie den Hyperlink. Wechseln Sie zur Vorschau und klicken Sie auf den Hyperlink. Der FrontPage-Editor versucht dann, die Seite zu laden (wobei er bei Bedarf automatisch eine Internet-Verbindung über Ihr Modem einrichtet). Im HTML-Code Ihrer Seite müssen natürlich beide Teile eines Hyperlinks gespeichert werden. Die allgemeine Syntax hierfür ist: TEXT.
117
Hyperlinks In unserem Beispiel sieht der Hyperlink also folgendermaßen aus:
Web-Publishing ist ein weites Feld. Es umfasst Gebiete wie Grafik und Design, ... Wenn Sie weiterführende Literatur zu diesen Bereichen suchen, besuchen Sie doch einmal den Markt+Technik-Server.
Absolute und relative URLs In obigem Beispiel wurde ein absoluter URL angegeben, d.h., die Adresse der anzuzeigenden Webseite wurde vollständig und nicht relativ zum aktuellen Verzeichnis angegeben. (Dass http://www.mut.de nur den Server ohne Verzeichnis und Dateiname spezifiziert, ist kein Fehler. Der Browser lädt in diesem Fall die StandardHomepage auf dem Server.) Soweit es geht, sollte man aber relative URLs statt absoluter URLs verwenden, da diese beim Verschieben ganzer Webs oder beim Umbenennen von Verzeichnisses meist gültig bleiben. Relative URLs sollten immer dann verwendet werden, wenn Sie Hyperlinks auf Seiten einrichten, die Teil Ihres Webs sind: 왘 Wenn Sie einen Hyperlink auf eine andere Seite des gleichen Webs einrichten wollen, können Sie die Zieldatei direkt im Dialogfeld HYPERLINK ERSTELLEN auswählen. Der FrontPage-Editor legt automatisch einen relativen URL an, der einfach nur aus dem Dateinamen besteht. 왘 Wenn Sie einen Hyperlink auf eine Seite eines anderen Webs einrichten wollen, das sich aber ebenfalls auf Ihrem Computer befindet, sollten Sie im Dialogfeld HYPERLINK ERSTELLEN einen relativen URL von der Adresse der aktuellen Datei zur Zieldatei eingeben. Angenommen Sie bearbeiten gerade die Webseite mit dem URL http:// meinServer/demoWeb/persoenliches/lebenslauf.htm. Dieser URL besteht aus 왘 der Adresse Ihres Servers: http://meinServer
왘 왘 왘
der Adresse des aktuellen Webs: /demoWeb dem Unterverzeichnis /persoenliches und dem Webdokument lebenslauf.htm
Von dieser Seite wollen Sie nun einen Hyperlink zur Seite studium.htm einrichten, die detailliertere Informationen zu Ihrer Studienzeit enthält und die Sie bereits als Teil eines anderen von Ihnen eingerichteten Webs erstellt haben. 118
Kapitel 2: Webdesign mit dem FrontPage-Editor Die absolute Adresse dieser Seite lautet: http://meinServer/StudiumWeb/ studium.htm. Um nun einen relativen URL anzugeben, tippen Sie im Feld URL des Dialogfelds HYPERLINK ERSTELLEN http://../../StudiumWeb/studium.htm statt http://meinServer/StudiumWeb/studium.htm ein. Der Browser kann dann selbst aus dieser Angabe die vollständige Adresse zusammensetzen, indem er von der Adresse der aktuellen Webseite, die den Hyperlink enthält, zwei Verzeichnisse zurückgeht (also bis zu /meinServer) und dann die neue Adresse anhängt.
Hyperlinkeigenschaften einstellen Hyperlinkfarben Standardmäßig werden zur Darstellung von Hyperlinks drei Farben verwendet:
왘 왘 왘
eine Farbe zur Kennzeichnung der Hyperlinks eine Farbe zur Kennzeichnung besuchter Hyperlinks eine Farbe zur Kennzeichnung aktiver Hyperlinks
Sie können diese Farben selbst vorgeben, indem Sie den Menübefehl FORaufrufen und die gewünschten Farben in den entsprechenden Feldern der Dialogseite HINTERGRUND auswählen.
Hinweis
MAT/HINTERGRUND
Wenn die Seite ein Design verwendet, können Sie die Hyperlinkfarben nicht selbst bestimmen, da diese vom Design festgelegt werden. Sie können allerdings ein eigenes, angepasstes Design erstellen.
Hyperlinkeigenschaften Ansonsten erfolgt die Konfiguration der einzelnen Hyperlinks über das Dialogfeld HYPERLINK BEARBEITEN, das genauso aufgebaut ist, wie das Dialogfeld HYPERLINK EINFÜGEN. Um es zu öffnen, markieren Sie den Hyperlink und rufen Sie den Befehl EINFÜGEN/HYPERLINK oder den Befehl HYPERLINKEIGENSCHAFTEN aus dem Kontextmenü des Hyperlinks auf.
119
Hyperlinks
Bild 2.40: Hyperlinkeigenschaften Insgesamt stehen Ihnen in diesem Dialogfeld drei Optionen zur Konfiguration eines Hyperlinks zur Verfügung:
왘 왘
Sie können die ADRESSE des Hyperlinks ändern (siehe oben). Sie können den ZIELFRAME vorgeben. Wenn Ihre Webseite Frames verwendet (siehe Kapitel 3 »Frames«), können Sie hier den Frame auswählen, in dem die Datei, die sich hinter dem Hyperlink verbirgt, angezeigt wird.
왘
Sie können auf die Schaltfläche FORMATVORLAGE drücken, um das Erscheinungsbild des Hyperlinks auf der Webseite zu steuern. Diese Einstellungen sind allerdings darauf angewiesen, dass die Besucher Ihrer Website Browser verwenden, die Cascading Stylesheets unterstützen.
왘
Sie können dem Server Daten übermitteln. Wenn Sie den Hyperlink auf ein Programm auf dem Server verweisen lassen, können Sie dem Hyperlink Daten anhängen, die dem Programm übergeben werden. Zum Anhängen der Daten verwenden Sie den Schalter PARAMETER (wird in diesem Buch nicht weiter behandelt).
120
Kapitel 2: Webdesign mit dem FrontPage-Editor
Hyperlinks testen Wenn Sie den URL zu einer Webseite kennen, ist die Einrichtung eines Hyperlinks zu dieser Seite im Grunde ein Kinderspiel. Trotzdem sollten Sie es nicht versäumen, alle in Ihren Webdokumenten verwendeten Hyperlinks zu testen. Haben Sie nur eine überschaubare Zahl von Hyperlinks zu überprüfen, können Sie dies direkt im Editor erledigen. Hyperlinks im Editor testen In der Vorschau-Ansicht brauchen Sie die Hyperlinks nur anzuklicken, um ihnen nachzugehen. Externe Hyperlinks, die zu anderen Websites im Internet führen, lassen sich am Besten in der Vorschau-Ansicht testen, da diese automatisch bei Bedarf eine Verbindung zum Internet herstellt. Um Hyperlinks direkt in der Normal-Ansicht zu verfolgen, drücken Sie die (Strg)-Taste, während Sie auf den Hyperlink klicken. Einzelne Hyperlinks eines Webs in der Hyperlinks-Ansicht überprüfen Einzelne Hyperlinks aus Webseiten, die zu einem Web gehören, können Sie in der Hyperlinks-Ansicht prüfen. 1. Klicken Sie in der Ansichtenleiste auf das Symbol HYPERLINKS. 2. Klicken Sie dann in der Ordnerliste auf die Seite, deren Hyperlinks Sie überprüfen wollen (die Seite sollte zuvor gespeichert werden). 3. Lassen Sie gegebenenfalls die Anzeige aktualisieren, wenn Sie das Gefühl haben, dass letzte Änderungen an der Seite nicht korrekt angezeigt werden (Befehl EXTRAS/HYPERLINKS NEU BERECHNEN). 4. Klicken Sie in den Hintergrund der Ansicht und wählen Sie im aufspringenden Kontextmenü aus, welche zusätzlichen Hyperlinks angezeigt werden sollen. 5. Klicken Sie mit der rechten Maustaste auf den Hyperlink, den Sie überprüfen wollen, und rufen Sie den Befehl HYPERLINK ÜBERPRÜFEN auf. Erweist sich der Hyperlink als fehlerhaft, wird der Pfeil, der zu dem Hyperlink führt, unterbrochen.
121
Hyperlinks
Achtung
Bild 2.41: Einzelne Hyperlinks prüfen
Vergessen Sie nicht, für externe Hyperlinks eine Verbindung ins Internet bereitzustellen.
Alle Hyperlinks eines Webs gleichzeitig überprüfen Alle Hyperlinks eines Webs wie oben beschrieben einzeln zu überprüfen, kann recht mühsam sein. FrontPage stellt Ihnen daher einen eigenen Befehl zur Verfügung, mit dem man alle Hyperlinks auf einmal überprüfen lassen kann.
Bild 2.42: Die Berichte-Symbolleiste
122
Kapitel 2: Webdesign mit dem FrontPage-Editor
Achtung
1. Lassen Sie die Berichte-Symbolleiste anzeigen (Befehl ANSICHT/ SYMBOLLEISTEN/BERICHTE). 2. Klicken Sie in der Symbolleiste auf das letzte Symbol ÜBERPRÜFT HYPERLINKS IM AKTUELLEN WEB. 3. Aktivieren Sie in dem erscheinenden Dialogfeld die Option ALLE HYPERLINKS ÜBERPRÜFEN und klicken Sie auf BEGINNEN. 4. In der Berichte-Ansicht FEHLERHAFTE HYPERLINKS wird Ihnen daraufhin der Zustand Ihrer Hyperlinks angezeigt. Alternativ können Sie sich den Zustand der Links einzelner Seiten auch in der Hyperlinks-Ansicht anschauen.
Vergessen Sie nicht, für externe Hyperlinks eine Verbindung ins Internet bereitzustellen.
Fehlerhafte Hyperlinks korrigieren Wird ein Hyperlink nach der Überprüfung als »Fehlerhaft« ausgewiesen, stimmt etwas mit dem URL nicht oder die adressierte Webseite existiert nicht mehr. Auf jeden Fall ist eine Korrektur erforderlich. Dazu müssen Sie nicht unbedingt in den Editor zurückwechseln. 1. Doppelklicken Sie stattdessen einfach in der Berichte-Ansicht FEHLERHAFTE HYPERLINKS auf den fehlerhaften Hyperlink. 2. In dem Dialogfeld HYPERLINK BEARBEITEN, können Sie sogleich einen neuen URL eingeben. Wird der gleiche fehlerhafte Hyperlink auf mehreren Seiten Ihres Webs verwendet, haben Sie sogar die Möglichkeit, den URL in einem Schritt auf allen betroffenen Seiten korrigieren zu lassen (Option IN ALLEN SEITEN ÄNDERN). 3. Klicken Sie auf den Schalter ERSETZEN.
123
Hyperlinks
Bild 2.43: Hyperlink korrigieren
Hyperlinks zu anderen Texten Nachdem Sie sich im obigen Abschnitt mit dem Grundthema des Hyperlinks-Spiels vertraut gemacht haben, wollen wir uns nun an einigen Variationen versuchen. Hyperlink zu anderer Textstelle auf gleicher Seite Nicht immer muss mit dem Anklicken eines Hyperlinks ein Wechsel zu einer anderen Webseite verbunden sein. Gerade in etwas größeren Webdokumenten ist es üblich, Hyperlinks zwischen den verschiedenen Abschnitten der gleichen Seite einzurichten – und somit dem Besucher langwieriges Suchen und Scrollen abzunehmen. Das folgende Beispiel verwendet daher ein kleines – zugegeben ein sehr kleines – Inhaltsverzeichnis am Anfang der Seite, über das der Besucher gezielt zu den ihn interessierenden Kapiteln springen kann. Textmarken einrichten Voraussetzung dafür, dass eine Textstelle innerhalb eines Dokuments angesprungen werden kann, ist, dass eine Textmarke für die Stelle eingerichtet wurde.
124
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.44: Inhaltsverzeichnis mit Hyperlinks
Bild 2.45: Textmarke setzen
125
Hyperlinks 1. Geben Sie zuerst den vollständigen Text ein. 2. Setzen Sie die Einfügemarke auf die Textstelle, für die eine Textmarke eingerichtet werden soll. 3. Rufen Sie den Befehl EINFÜGEN/TEXTMARKE auf. 4. Geben Sie im Dialogfeld TEXTMARKE einen kurzen, aber sinnvollen Namen für die Textmarke ein. Klicken Sie auf OK. In der Normal-Ansicht des FrontPage-Editors wird die Textmarke durch ein Flaggensymbol (das aber mehr wie eine Axt aussieht) gekennzeichnet. (Wenn Sie eine Textpassage markiert haben, erscheint kein Flaggensymbol, aber die Textpassage wird in der Normal-Ansicht unterstrichen.) 5. Wiederholen Sie die Schritte 2 bis 4 für alle Textabschnitte, die Sie mit Hyperlinks anspringen wollen. Hyperlink innerhalb eines Dokuments einrichten Voraussetzung dafür, dass eine Textstelle innerhalb eines Dokuments angesprungen werden kann, ist, dass eine Textmarke für die Stelle eingerichtet wurde.
Bild 2.46: Hyperlink zu Textmarke
126
Kapitel 2: Webdesign mit dem FrontPage-Editor 1. Markieren Sie den Text, den Sie per Hyperlink mit einem anderen Textabschnitt verbinden wollen. 2. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf. 3. Wählen Sie im Feld LINK ZU des Dialogfelds HYPERLINK EINFÜGEN den Schalter AKTUELLES DOKUMENT aus Im Anzeigefenster werden daraufhin die Textmarken des aktuellen Dokuments zur Auswahl angeboten. 4. Wählen Sie die gewünschte Textmarke aus. Klicken Sie auf OK. 5. Wiederholen Sie die Schritte 1 bis 4 für alle Textabschnitte, die Sie mit Hyperlinks anspringen wollen. 6. Testen Sie den Hyperlink. Hyperlink zu anderer Seite des gleichen Webs Besteht Ihr Web aus mehreren Seiten, werden Sie diese durch Hyperlinks verbinden wollen. Als Fortsetzung des obigen Beispiels zur Sicherheit im Automobilbau wird nun im Abschnitt »Weiterführende Informationen« auf eine andere Seite des Webs verwiesen. (Das aktuelle Web wurde dazu mithilfe des Befehls DATEI/ IMPORTIEREN um eine Kopie der Webseite des Online-Magazins aus Abschnitt 2 »Tabellen« erweitert.) 1. 2. 3. 4.
Geben Sie den Text zu dem Hyperlink ein. Markieren Sie den Text des Hyperlinks. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf. Achten Sie darauf, dass im Feld LINK ZU des Dialogfelds HYPERLINK EINFÜGEN der Schalter DATEI ODER WEBSEITE ausgewählt ist. Im mittleren Teil werden daraufhin die Webseiten und Dateien des aktuellen Webs/Verzeichnisses zur Auswahl angeboten.
5. Wählen Sie die zu ladende Datei aus. Klicken Sie auf OK. 6. Testen Sie die Hyperlinks. Zum Austesten von Hyperlinks zu anderen Seiten des aktuellen Webs muss keine Internet-Verbindung geöffnet werden.
127
Hyperlinks
Bild 2.47: Relativer Hyperlink zu anderer Seite des Webs Hyperlink zu noch nicht vorhandener Seite Der FrontPage-Editor ermöglicht Ihnen auch die Einrichtung von Hyperlinks zu Webseiten, die noch nicht erstellt sind. In solchen Fällen werden die Webseiten dann im Zuge der Einrichtung des Hyperlinks erstellt. 1. 2. 3. 4.
Geben Sie den Text zu dem Hyperlink ein. Markieren Sie den Text des Hyperlinks. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf. Klicken Sie im Feld LINK ZU des Dialogfelds HYPERLINK EINFÜGEN auf den Schalter NEUES DOKUMENT ERSTELLEN. 5. Geben Sie danach den Namen der anzulegenden Datei an und ob Sie die Datei sofort oder später bearbeiten wollen. 6. Klicken Sie auf OK. Der FrontPage-Editor legt daraufhin die neue Datei an und richtet einen Hyperlink darauf ein. Wenn Sie die Option DAS NEUE DOKUMENT JETZT BEARBEITEN aktiviert haben, wird das neue Dokument gleich zur Bearbeitung in den Editor geladen. Ansonsten können Sie es später über die Ordner-Ansicht aufrufen.
7. Testen Sie den Hyperlink. Zum Austesten von Hyperlinks zu anderen Seiten des aktuellen Webs muss keine Internet-Verbindung geöffnet werden.
128
Kapitel 2: Webdesign mit dem FrontPage-Editor Hyperlink zur Seite eines anderen Webs Häufig bieten Webseiten auch Links zu anderen Websites an – sei es in Form einer Top Ten-Liste der interessantesten Webseiten oder einfach als Verweis auf Plätze im Internet, an denen man weiterführende Informationen zu gleichen oder verwandten Themen findet.
Bild 2.48: Absoluter Hyperlink zu anderer Website Um den Abschnitt »Weiterführende Informationen« des obigen Beispiels um einen Hyperlink zu einer anderen Website zu erweitern, gehen Sie wie folgt vor: 1. Geben Sie den Text zu dem Hyperlink ein. 2. Markieren Sie den Text des Hyperlinks. 3. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf und klicken Sie auf den Schalter DATEI ODER WEBSEITE.
4. Geben Sie die ADRESSE der Webseite ein oder öffnen Sie per Klick auf das Internet-Symbol Ihren Browser, in dem Sie nach der Seite im Web suchen können. Wenn Sie die Seite gefunden haben, springen Sie zurück zu
129
Hyperlinks
Hinweis
FrontPage, wo der URL jetzt in das URL-Feld des Dialogfelds übernommen sein sollte. (Vergessen Sie nicht, den Browser danach wieder zu schließen.) Klicken Sie auf OK. 5. Testen Sie den Hyperlink. Zum Austesten von Hyperlinks zu fremden Sites im Internet muss natürlich eine Internet-Verbindung geöffnet werden.
Handelt es sich bei dem anderen Web, in dem sich die Zieldatei des Hyperlinks befindet, um eines Ihrer eigenen Webs, das sich ebenfalls auf Ihrem Server befindet, können Sie statt eines absoluten auch einen relativen URL angeben.
Links zu anderen Protokollen
Achtung
Bisher haben Sie Hyperlinks nur eingerichtet, um Verbindungen zu anderen Webdokumenten herzustellen. Alle URLs fingen daher mit dem Protokoll http:// an. Sie können in Ihren Hyperlinks aber auch noch andere InternetProtokolle verwenden und damit andere Dienste in Anspruch nehmen und auf Ihren Webseiten zur Verfügung stellen. Voraussetzung für fast alle diese Protokolle ist, dass auf Client- und/oder Server-Maschine entsprechende Dienstprogramme installiert sind.
http:// und https:// HTTPS ist eine um verschiedene Sicherheitsaspekte erweiterte Version des HTTP-Protokolls. So erlaubt HTTPS unter anderem die Übertragung von verschlüsselten Daten (sowohl vom Browser zum Server wie auch vom Server zum Browser), was beispielsweise für die Übermittlung von Passwörtern oder Kreditkarten-Nummern interessant ist. Da es für die Nutzung von HTTPS erforderlich ist, dass sowohl Browser wie Server HTTPS unterstützen, sollte man sich derzeit noch nicht allzu
130
Kapitel 2: Webdesign mit dem FrontPage-Editor sehr auf dieses Protokoll verlassen. (Vor allem kann man nur davon abraten, Kreditkartennummern und Ähnliches übers Internet zu schicken!) file:// Wenn Sie file:// statt http:// als Protokoll zum Laden einer Datei angeben, teilen Sie dem Browser mit, dass sich die gewünschte Datei auf dem lokalen Rechner befindet. Also Vorsicht! Der lokale Rechner ist nur so lange Ihr Rechner, solange Sie selbst Ihre Website besuchen. Greifen andere Internet-Teilnehmer auf Ihre Webseiten zu, bezeichnet file:// natürlich die Rechner Ihrer Besucher.
Bild 2.49: Lokale Hyperlinks Der Nutzen dieses Protokolls ist daher recht beschränkt:
왘
Früher nutze man das file-Protokoll zur Erstellung eigener Websites auf dem lokalen Rechner, indem man zuerst alle zukünftigen Hyperlinks mit file:// statt http:// einrichtete. Heute ist man dank FrontPage auf solche Umwege allerdings kaum mehr angewiesen.
왘
Gut verwenden kann man das file-Protokoll für lediglich privat genutzte Webseiten (beispielsweise Startseiten für den Eintritt ins WWW, die man um Links auf lokale Dateien ergänzen möchte).
Schließlich lässt sich das file-Protokoll auch bedingt in öffentlichen Websites verwenden, wenn man davon ausgeht, dass eine bestimmte Datei immer am gleichen Ort vorhanden ist, beispielsweise der Registrierungseditor von Windows 95/98. 131
Hinweis
Hyperlinks
Wenn Sie im Dialogfeld HYPERLINK EINFÜGEN auf das Symbol des Dialogs NACH DATEI SUCHEN klicken, um einen Hyperlink zu einer lokalen Datei herzustellen, verwendet FrontPage automatisch das FILE-Protokoll.
Einrichtung eines FILE-Hyperlinks 1. Legen Sie eine neue Webseite an und tippen Sie bitte den Text aus Bild 2.49 ab, wobei Sie die Verzeichnisangabe C:\Windows an Ihre lokalen Gegebenheiten anpassen sollten.
왘 Sowie Sie die Verzeichnis-Angabe eingetippt und durch Eingabe des
nachfolgenden Leerzeichens beendet haben, wandelt der FrontPageEditor die Verzeichnis-Angabe automatisch in einen URL auf Ihr lokales Verzeichnis um. Löschen Sie zur Übung den Hyperlink. 왘 Um den Hyperlink zu löschen, so dass die Verzeichnis-Angabe nur als einfacher Text stehen bleibt, löschen Sie direkt nach Einrichtung des Hyperlinks durch Drücken der (æ___)-Taste das nachfolgende Leerzeichen. 2. Markieren Sie das Wörtchen »regedit« und rufen Sie den Befehl EINFÜGEN/HYPERLINK auf. 3. Tippen Sie in das Feld ADRESSE den Pfad und den Namen der auszuführenden Datei ein: file://c:/windows/regedit.exe. 4. Wechseln Sie in die Vorschau und testen Sie Ihre Hyperlinks aus. mailto:// Eine einfache und häufig genutzte Möglichkeit, sich Rückmeldungen von den Besuchern einer Website zuschicken zu lassen, ist die Einrichtung einer E-Mail-Verbindung. Einrichtung eines MAILTO-Hyperlinks 1. Setzen Sie ans Ende Ihrer Seite einen kleinen Text auf, der den Besucher darauf hinweist, dass er hier eine E-Mail an den Web-Autor schicken kann. 2. Geben Sie den Text zu dem Hyperlink ein (üblicherweise zeigt man direkt die Mail-Adresse an – es gibt keinen Grund diese zu verbergen und der Besucher kann Sie dem HTML-Text Ihrer Seite sowieso entnehmen).
132
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.50: Angabe einer Mail-Adresse 3. Markieren Sie den Text des Hyperlinks und rufen Sie den Befehl HYPERLINK EINFÜGEN auf. 4. Klicken Sie im Dialogfeld HYPERLINK ERSTELLEN im Feld LINK ZU auf den Schalter E-MAIL-ADRESSE. 5. Es erscheint das Dialogfeld E-MAIL-HYPERLINK ERSTELLEN.
Bild 2.51: Hyperlink zu E-Mail-Adresse einrichten
133
Hyperlinks 6. Geben Sie Ihre E-Mail-Adresse ein (bzw. die E-Mail-Adresse, an die die Antworten weitergeleitet werden sollen). Optional können Sie auch gleich einen Vorschlag für das Betreff-Feld der E-Mail machen. Klickt der Besucher Ihrer Webseite auf diesen Hyperlink (und ist dessen Browser korrekt für die Verarbeitung von E-Mails eingerichtet), ruft sein Browser daraufhin das Dialogfeld zum Aufsetzen und Senden von E-Mails auf, in das Ihre E-Mail bereits als Zieladresse eingetragen wurde. Der Besucher braucht dann nur noch den Text einzugeben und die Mail abzuschicken. ftp:// Ein weiteres, häufig von Webseiten aus genutztes Protokoll ist FTP (File Transfer Protocol). Mithilfe dieses Protokolls können beliebige Dateien übers Internet geschickt werden (während HTTP beispielsweise auf die Übertragung von Webdokumenten und den zugehörigen Dateien spezialisiert ist). Wenn Sie den Besuchern Ihrer Webseiten also Programme oder andere Textdokumente (wie z.B. Word-Dateien) zum Download zur Verfügung stellen wollen, müssen Sie einen FTP-Hyperlink einrichten. Voraussetzung hierfür ist, dass Ihr Server über einen FTP-Dienst verfügt und Sie den Namen und das Root-Verzeichnis des FTP-Servers kennen. Die meisten Webserver bieten auch einen FTP-Dienst an – Sie müssen sich also nur mit Ihrem Server-Provider oder -Administrator in Verbindung setzen und diese Punkte abklären. Um FTP-Links lokal auf Ihrem Rechner austesten zu können, müssen Sie prüfen, ob Ihr Server FTP unterstützt und wenn ja, ob der FTP-Dienst gestartet ist. FTP-Hyperlink einrichten 1. Setzen Sie einen kleinen Text auf, der den Besucher darauf hinweist, dass er über den folgenden Link eine Datei auf seine Festplatte herunterladen kann. 2. Geben Sie den Text zu dem Hyperlink ein (üblicherweise Name oder Inhalt der Datei). 3. Markieren Sie den Text des Hyperlinks und rufen Sie den Befehl HYPERLINK EINFÜGEN auf.
134
Kapitel 2: Webdesign mit dem FrontPage-Editor 4. Geben Sie im Feld ADRESSE des Dialogfelds die FTP-Adresse ein. Hierzu gehört die Internet-Adresse des Servers (bestehend aus Protokoll und Server-Name) sowie der Pfad zur Datei im Basisverzeichnis des FTPDienstes – beispielsweise ftp://servername/unterverzeichnis/dateiname.doc.
Bild 2.52: Datei herunterladen Klickt der Besucher Ihrer Webseite auf diesen Hyperlink, wird die Datei per FTP vom Server zum Rechner des Besuchers übertragen. Im Internet Explorer kann der Besucher dann in dem erscheinenden Dialogfeld das Speichern der Datei veranlassen und ein Download-Verzeichnis auswählen. news: Der Bezeichner news: steht für das NNTP-Protokoll, das den Austausch von Nachrichten über Newsgruppen regelt. Newsgruppen sind Sammlungen von Anmerkungen, Fragen und Antworten zu einem Thema (Aquarien, JavaProgrammierung, Rockmusik, etc.). Teilnehmer an Newsgruppen, können die in der Newsgruppe verwalteten Nachrichten anderer Teilnehmen lesen und selbst Nachrichten an die Newsgruppe schicken. Voraussetzung ist, dass der verwendete Webbrowser für die Teilnahme an den Newsgruppen eingerichtet ist.
135
Hyperlinks NEWS-Hyperlink einrichten 1. Setzen Sie einen kleinen Text auf, der den Besucher darauf hinweist, dass er über den folgenden Link zu einer Newsgruppe wechselt. 2. Geben Sie den Text zu dem Hyperlink ein (üblicherweise der Name und/ oder das Thema der Newsgruppe). 3. Markieren Sie den Text des Hyperlinks und rufen Sie den Befehl HYPERLINK EINFÜGEN auf. 4. Geben Sie im Feld ADRESSE des Dialogfelds den Namen der Newsgruppe ein – beispielsweise news:comp.lang.java.misc. gopher:// Gopher ist wie das WWW ein Verbund von Dateien, die über spezielle Gopher-Verzeichnisse angesteuert werden können. Gopher kennt aber keine Hyperlinks in den Dateien und ist nicht multimedial, weswegen es mit dem Aufkommen des WWW als Navigationsstruktur für das Internet schnell ausgedient hatte. Die alte Gopher-Strukturen bestehen aber größtenteils noch und können mithilfe der meisten heutigen Webbrowser angesteuert werden. GOPHER-Hyperlink einrichten 1. Setzen Sie einen kleinen Text auf, der den Besucher darauf hinweist, dass er über den folgenden Link zu einem Gopher-Verzeichnis wechselt. 2. Geben Sie den Text zu dem Hyperlink ein (üblicherweise der Name und/ oder das Thema des Gopher-Verzeichnisses). 3. Markieren Sie den Text des Hyperlinks und rufen Sie den Befehl HYPERLINK EINFÜGEN auf. 4. Geben Sie im Feld ADRESSE des Dialogfelds den Namen und den Port des Gopher-Servers ein – beispielsweise: gopher://gopher.th-darmstadt.de:70/1. telnet: Telnet ist ein Programm, das es Internet-Teilnehmern ermöglicht, sich auf anderen Internet-Rechnern einzuloggen und von dort aus, bestimmte Programme auszuführen oder auf Dateien zuzugreifen (die Zugriffsrechte sind dabei natürlich recht eingeschränkt).
136
Kapitel 2: Webdesign mit dem FrontPage-Editor Telnet wird traditionell vor allem von öffentlichen Bibliotheken benutzt, die Internet-Teilnehmern via Telnet die Möglichkeit geben, in ihren Katalogen nach bestimmten Büchern oder Artikeln zu suchen. Voraussetzung ist, dass auf dem Client-Rechner des Internet-Teilnehmers ein Telnet-Programm zur Verfügung steht (ist auf UNIX- und Win95Rechnern standardmäßig der Fall).
Bild 2.53: Telnet-Verbindung zu LOCIS-Bibliothek TELNET-Hyperlink einrichten 1. Setzen Sie einen kleinen Text auf, der den Besucher darauf hinweist, dass er über den folgenden Link eine Telnet-Verbindung aufbaut. 2. Geben Sie den Text zu dem Hyperlink ein (üblicherweise der Name und/ oder das Thema der Telnet-Verbindung). 3. Markieren Sie den Text des Hyperlinks und rufen Sie den Befehl HYPERLINK EINFÜGEN auf. 4. Geben Sie im Feld URL des Dialogfelds den telnet-Bezeichner und die Adresse des anzusprechenden Rechners an – beispielsweise telnet:locis.loc.gov.
137
Hyperlinks Klickt der Besucher Ihrer Webseite auf diesen Hyperlink erscheint eine TELNET-Arbeitskonsole. wais: WAIS steht für Wide Area Information System und steht für ein Such- und Abfrage-System zum Auffinden spezieller Informationen im Internet. Heute ist WAIS durch die wesentlich populäreren Web-Suchmaschinen (beispielsweise www.yahoo.com) verdrängt.
Hyperlinks in Grafiken Bis hierher waren alle Hyperlinks mit einem Text als sichtbarem Teil verbunden. Statt mit einer Textpassage können alle oben besprochenen Hyperlinks aber auch mit Grafiken als sichtbarem, anklickbarem Teil verbunden werden. Tatsächlich ist es sogar möglich, innerhalb einer Grafik mehrere Bereiche zu definieren, die dann mit verschiedenen Hyperlinks verbunden werden. Man spricht dann auch von »Image Maps«. Grafiken als Hyperlinks Hyperlinks in Form von Grafiken anzubieten, ist oft eine gute Möglichkeit, die eigene Webseite optisch aufzuwerten. Doch Vorsicht! Nicht immer sind Grafiken ein Gewinn. 왘 In Fließtexten sollten Sie prinzipiell keine Hypergrafiken verwenden (Ausnahmen wären beispielsweise Seiten, die für Kinder gedacht sind). 왘 Text ist als Informationsträger zwar etwas behäbig (Lesen dauert länger als das Erkennen von Bildern), dafür aber sehr prägnant und informativ. Zudem wird Text schneller aufgebaut (geringere Ladezeiten). Text-Hyperlinks haben insbesondere den Vorteil, dass sie durch farbige Kennzeichnung und Unterstreichung schnell und eindeutig als Hyperlinks erkannt werden. 왘 Ob sich hinter einer Grafik ein Hyperlink verbirgt, kann der Leser zwar dadurch testen, dass er den Mauszeiger über die Grafik bewegt (für Hyperlinks wird die Form des Mauszeigers üblicherweise in eine Hand verwandelt), doch sollte man Hypergrafiken so gestalten und einsetzen, dass ihr Verwendungszweck unmittelbar deutlich wird (siehe Bild 2.54). 138
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
Ist die Bedeutung einer Hypergrafik nicht unmittelbar aus der Grafik ersichtlich, ergänzen Sie die Grafik durch ein aussagekräftiges Stichwort, das Aufschluss über das Ziel des Hyperlinks gibt. Unter Umständen kann die Grafik auf diese Weise bis zu einem Hintergrundbild reduziert werden.
왘
Überladen Sie Ihre Webseite nicht mit zu vielen, uneinheitlich gestalteten Hypergrafiken.
Bild 2.54: Beispiel für dezenten Einsatz von Grafiken Hyperlink für Grafik einrichten Um eine Grafik mit einem Hyperlink zu verbinden, gehen Sie ganz genauso wie bei Einrichtung eines Text-Hyperlinks vor – nur dass Sie natürlich statt einer Textstelle eine Grafik auswählen.
139
Hyperlinks
Hinweis
1. Erstellen Sie die Grafik. Eigene Grafiken für Ihre Webseiten können Sie beispielsweise mit dem Image Composer oder einem beliebigen anderen Grafikeditor, der webtypische Grafikformate wie JPEG oder GIF unterstützt (siehe Kapitel 24). Bestehende Dateien können Sie mit dem Befehl DATEI/IMPORTIEREN in Ihr aktuelles Web aufnehmen. 2. Fügen Sie die Grafik ein. Setzen Sie dazu die Einfügemarke an die Stelle Ihrer Webseite, an der Sie die Grafik einfügen wollen und rufen Sie den Befehl EINFÜGEN/GRAFIK/AUS DATEI (oder EINFÜGEN/GRAFIK/CLIPART) auf. Zur freien Positionierung von Grafiken auf einer Webseite können Sie Tabellen oder Stylesheets (Befehl FORMAT/POSITION) verwenden. 3. Markieren Sie die Grafik. 4. Rufen Sie den Befehl EINFÜGEN/HYPERLINK auf. 5. Geben Sie im Feld ADRESSE die Zieladresse des Hyperlinks ein (oder wählen Sie die Zieldatei im mittleren Bereich des Dialogfelds). Klicken Sie auf OK. 6. Testen Sie den Hyperlink.
Wenn Sie Grafikdateien von außerhalb in eine Seite Ihres Webs einfügen, wird die Adresse der Bilddatei im HTML-Code zuerst unter Verwendung des file-Protokolls angegeben. Wenn Sie die eingebetteten Bilder beim Abspeichern der Webseite später im Verzeichnis des Webs speichern, wird das Protokoll in http:// umgewandelt.
Image Maps, ein Bild – mehrere Links Im einfachsten Fall ist immer genau eine Grafik mit einem Hyperlink verbunden. Es ist aber auch möglich, eine Grafik mit mehreren Hyperlinks zu verbinden. Wie kann man ein Bild mit mehreren Links verbinden? Natürlich kann man nicht einfach zwei, drei oder beliebig viele Hyperlinks für eine Grafik definieren und dann hoffen, dass der Browser sich schon den richtigen Hyperlinks aussucht, wenn ein Besucher auf die Grafik klickt.
140
Kapitel 2: Webdesign mit dem FrontPage-Editor Was man aber machen kann, ist eine Grafik in mehrere, sich nicht überschneidende Bereiche aufzuteilen und dann jedem dieser Teilbereiche einen eigenen Hyperlink zuzuordnen. Die Einrichtung einer solchen »Image Map« unterscheidet sich dabei kaum von der Einrichtung einer einfachen anklickbaren Grafik. Sie beginnt mit dem Einfügen der Grafik in die Webseite.
Bild 2.55: Ausgangsbild für die Image Map
141
Hyperlinks Grafik einbinden 1. Erstellen Sie die Grafik. Eigene Grafiken für Ihre Webseiten können Sie beispielsweise mit dem Image Composer oder einem beliebigen anderen Grafikeditor erstellen, der webtypische Grafikformate wie JPEG oder GIF unterstützt (siehe Kapitel 4). Bestehende Dateien können Sie mit dem Befehl DATEI/IMPORTIEREN in Ihr aktuelles Web aufnehmen. 2. Fügen Sie die Grafik ein. Setzen Sie dazu die Einfügemarke an die Stelle Ihrer Webseite, an der Sie die Grafik einfügen wollen und rufen Sie den Befehl EINFÜGEN/GRAFIK/AUS DATEI (oder EINFÜGEN/GRAFIK/CLIPART, siehe Kapitel 2.10.4) auf. Zur freien Positionierung von Grafiken auf einer Webseite können Sie Tabellen oder Stylesheets (Befehl FORMAT/POSITION) verwenden. 3. Markieren Sie die Grafik. Bisher haben Sie den Befehl EINFÜGEN/HYPERLINK kennen gelernt, der die ganze Grafik mit einem einzigen Hyperlink verbindet. Zur Einrichtung mehrerer Hyperlinks zur Grafik müssen wir nun anders vorgehen. 4. Rufen Sie den Befehl ANSICHT/SYMBOLLEISTEN/GRAFIKEN auf. In dieser Symbolleiste finden Sie nicht nur verschiedene Optionen zur Bearbeitung des Bildes (Zuschneiden, Originalzustand, Drehen, Kontrast etc.), sondern auch die Möglichkeit zur Definition von Hotspots – »heißer« oder besser sensitiver Bereiche, die auf Mausklick reagieren, sprich mit Hyperlinks verbunden werden können.
Bild 2.56: Die Grafik-Symbolleiste Hotspot und Hyperlink einrichten 1. Klicken Sie in der Grafik-Symbolleiste auf das Symbol RECHTECKIGER HOTSPOT. 2. Ziehen Sie dann mit dem Bleistiftsymbol ein Rechteck um den sensitiven Bereich der Grafik. Wenn Sie die Maustaste loslassen, erscheint das Dialogfeld HYPERLINK EINFÜGEN.
142
Kapitel 2: Webdesign mit dem FrontPage-Editor 3. Geben Sie im Feld ADRESSE die Zieladresse des Hyperlinks ein (oder wählen Sie die Zieldatei im mittleren Bereich des Dialogfelds aus). Klicken Sie auf OK. 4. Wiederholen Sie die Schritte 1 bis 3 um weitere sensitive Bereiche innerhalb der Grafik zu definieren (wobei Sie auch die Symbole RUNDER und POLYGONFÖRMIGER HOTSPOT verwenden können). Sensitive Bereiche (Hotspots) Mithilfe der Symbole in der Grafik-Symbolleiste können Sie verschieden gestaltete Hotspots einrichten. Rechteckigen Hotspot definieren
1. Markieren Sie zuerst in der Normal-Ansicht des Editors die Grafik. 2. Drücken Sie in der Bild-Symbolleiste das Rechteck-Symbol. 3. Klicken Sie mit der linken Maustaste in der Grafik auf die linke obere Ecke des festzulegenden sensitiven Bereichs (Hotspot). 4. Ziehen Sie bei gedrückter Maustaste ein Rechteck um den sensitiven Bereich. 5. Lassen Sie die Maustaste los. Es erscheint das Dialogfeld HYPERLINK EINFÜGEN, in dem Sie die Adresse des Hyperlinks eingeben können. Kreisförmigen Hotspot definieren
1. Markieren Sie zuerst in der Normal-Ansicht des Editors die Grafik. 2. Drücken Sie in der Bild-Symbolleiste das Kreis-Symbol. 3. Klicken Sie mit der linken Maustaste in der Grafik auf die Mitte des festzulegenden sensitiven Bereiches (Hotspot). 4. Ziehen Sie bei gedrückter Maustaste einen Kreis um den sensitiven Bereich. 5. Lassen Sie die Maustaste los. Es erscheint das Dialogfeld HYPERLINK EINFÜGEN, in dem Sie die Adresse des Hyperlinks eingeben können.
143
Hyperlinks Polygonalen Hotspot definieren
1. Markieren Sie zuerst in der Normal-Ansicht des Editors die Grafik. 2. Drücken Sie in der Bild-Symbolleiste das Polygon-Symbol. 3. Klicken Sie mit der linken Maustaste in der Grafik nacheinander auf die Ecken des Polygons, das den sensitiven Bereich (Hotspot) umfasst. 4. Zum Abschluss klicken Sie noch einmal genau auf den ersten Markierungspunkt oder drücken Sie die (Esc)-Taste, woraufhin der erste und letzte Punkt automatisch verbunden werden. 5. Es erscheint das Dialogfeld HYPERLINK EINFÜGEN, indem Sie die Adresse des Hyperlinks eingeben können. Hotspots kontrollieren Wenn Sie sich darüber informieren wollen, welche Hotspots für eine Grafik definiert sind, brauchen Sie im Editor nur auf die zu kontrollierende Grafik klicken. Die Umrandungen der sensitiven Bereiche werden daraufhin angezeigt.
Oftmals kann man jedoch die einzelnen Umrandungen vor dem Hintergrund der Grafik nur schlecht erkennen. Klicken Sie dann in der GrafikSymbolleiste auf das Symbol HOTSPOTS MARKIEREN. Die einzelnen Hotspots können Sie dann durch Anklicken auswählen und durch Aufruf des Befehls FORMAT/EIGENSCHAFTEN (auch im Kontextmenü der Hotspots enthalten) mit neuen Hyperlinks verbinden oder durch Drücken der (Entf)-Taste löschen. Allerdings ... die Größe der Hotspots können Sie auf diesem Weg nicht verändern. Größe und Form eines Hotspots verändern 1. Markieren Sie zuerst die Grafik. 2. Markieren Sie dann in der Grafik das Feld des Hotspots. 3. Jetzt können Sie die einzelnen Markierungsknoten mit der Maus aufnehmen und verschieben. (Für Rechtecke und Kreise verändern Sie auf diese Weise die Größe, für Polygone die Form und Größe.)
144
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.57: Hotspots für die ersten 3 Beschriftungen Hyperlink eines Hotspots ändern 1. Markieren Sie zuerst die Grafik. 2. Markieren Sie dann in der Grafik das Feld des Hotspots. 3. Rufen Sie den Befehl FORMAT/EIGENSCHAFTEN auf. Hotspot löschen 1. Markieren Sie zuerst die Grafik. 2. Markieren Sie dann in der Grafik das Feld des Hotspots. 3. Drücken Sie die (Entf)-Taste.
145
Farben und grafische Elemente
Farben und grafische Elemente Bevor wir den zweiten Teil dieses Buchs und damit die Grundlagen der Textverarbeitung so langsam abschließen, wollen wir noch ein wenig Farbe in unsere Webseiten bringen. Auch die Verwendung von Linienelementen und die Gestaltung des Seitenhintergrundes werden wir noch ansprechen, und zum Schluss gönnen wir uns noch einen Ausblick auf Grafiken und ClipArt-Objekte, wobei wir uns in diesem Kapitel mehr auf die Einbindung der Bilder und ihre Verwaltung konzentrieren (mehr zur Arbeit mit und zur Erstellung von Bildern erfahren Sie in Kapitel 4).
Farben Ihre Grafikkarte unterstützt 16 Millionen Farben? Nun für Ihre Webseiten benötigen Sie nur zwei Farben:
왘 왘
Signalfarben und Schmuckfarben
Und auch diese sollten Sie nur mit einer gewissen Zurückhaltung verwenden. (Allerdings ist der Einsatz von Farben auf Webseiten nicht ganz so schwierig wie in der Photographie, wo nur ca. 5 – 7% aller Photos durch die Verwendung eines Farbfilms an Qualität gewinnen.) Vorder- und Hintergrundfarben Die Vordergrundfarbe bezeichnet die Farbe des Textes Im FrontPage-Editor können Sie sowohl der ganzen Seite als auch einzelnen Textelementen (Hyperlink, Absatz, markierte Textstellen) eine Vordergrund- und eine Hintergrundfarbe zuweisen.
Bild 2.58: Vorder- und Hintergrundfarben (leider nur in Grauwerten abgebildet)
146
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
Der ganzen Seite weisen Sie Vorder- und Hintergrundfarbe über das Dialogfeld SEITENEIGENSCHAFTEN/HINTERGRUND zu, das Sie über den Befehl FORMAT/HINTERGRUND aufrufen können (Optionen HINTERGRUND und TEXT).
왘
Ganzen Absätzen weisen Sie Vorder- und Hintergrundfarbe in Form einer Schattierung zu. Rufen Sie den Befehl FORMAT/ RAHMEN UND SCHATTIERUNG auf und wählen Sie auf der Seite SCHATTIERUNG die gewünschten Farben aus.
왘
Einzelnen Textpassagen weisen Sie eine Vordergrundfarbe über das Dialogfeld ZEICHEN zu (Aufruf über Befehl FORMAT/ZEICHEN). Wenn Sie auch noch eine eigene Hintergrundfarbe für eine Textpassage vorgeben möchten, müssen Sie dies allerdings direkt in der HTML-Ansicht tun. Klammern Sie die Textpassage in <span>-Tags und definieren Sie für das <span>-Tag den Stil background-color: <span style="background-color: rgb(255,255,255)>Text
Hyperlinkfarben
Bild 2.59: Einstellung der Hyperlinkfarben
147
Farben und grafische Elemente
Hinweis
Für Hyperlinks können Sie – neben der Hintergrundfarbe – drei verschiedene Farben festlegen, die den jeweiligen Bearbeitungszustand signalisieren. Die entsprechenden Optionen zur Festlegung der Farben finden Sie im Dialogfeld SEITENEIGENSCHAFTEN/HINTERGRUND, Aufruf über DATEI/EIGENSCHAFTEN. Wenn die Seite ein Design verwendet, können Sie die Hyperlinkfarben nicht selbst bestimmen, da diese vom Design festgelegt werden. Sie können allerdings ein eigenes, angepasstes Design erstellen (siehe Kapitel 3 »Webs planen«).
Benutzerdefinierte Farben Alle Dialogfelder, die die Auswahl einer Farbe erlauben, bieten neben einer Palette der 16 Windows-Systemfarben noch einige weitere Farben an: 왘 Die Farbe »AUTOMATISCH«, womit die Farbgebung der verarbeitenden Software (beispielsweise dem Webbrowser) überlassen wird. 왘 DOKUMENTFARBEN. Eine Liste der Farben, die auf der Seite verwendet werden. (Aufgeführt werden allerdings nur Farben, die über HTML-Tags definiert sind; Farben, die in Stylesheets definiert sind, werden nicht angezeigt.) 왘 WEITERE FARBEN für Individualisten, die eigene Farben verwenden möchten. Benutzerdefinierte Farben erstellen Um eine benutzerdefinierte Farbe zu definieren, gehen Sie wie folgt vor: Wählen Sie in dem jeweiligen Dialogfeld für die Farbe die Option WEITERE FARBEN aus. Es erscheint das gleichnamige Dialogfeld. Im Dialogfeld WEITERE FARBEN haben Sie drei Möglichkeiten eine Farbe auszuwählen: 왘 Sie klicken in dem zu einem Sechseck mutierten »Farbkreis« auf die gewünschte Farbe, oder 왘 Sie klicken auf den Schalter AUSWÄHLEN, woraufhin Ihr Mauszeiger die Form der Pipette annimmt, die jede beliebige Farbe aufnehmen kann, die Sie auf Ihrem Desktop (wohlgemerkt: Ihrem Desktop!, nicht nur dem Farbkreis) anklicken, oder
148
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
Sie klicken auf den Schalter BENUTZERDEFINIERT, woraufhin Sie in das Windows-Dialogfeld FARBE gelangen.
Bild 2.60: Farben selbst definieren Das Dialogfeld Farbe Im Dialogfeld FARBE stehen Ihnen bis zu 48 Grundfarben zur Verfügung, aus denen Sie direkt wählen können (die genaue Anzahl der angebotenen Grundfarben hängt von den Grafikfähigkeiten Ihres Systems ab). Darunter befindet sich ein Feld mit 16 benutzerdefinierten Farben, die Sie im rechten Teil des Dialogfelds definieren können. 1. Klicken Sie in dem großen Farbfeld auf die Farbe, die Sie auswählen möchten. 2. Klicken Sie in den Farbstreifen ganz rechts, um der Farbe eine Helligkeit zuzuweisen. Im linken Teil des Feldes FARBE|BASIS sehen Sie nun die Farbe, die Sie ausgewählt haben. Ist diese Farbe mit einem Muster von weißen oder schwarzen Punkten durchsetzt, bedeutet dies, dass die Farbe notfalls durch Dithering (Zusammenmischung von Farben und Graustufen) erzeugt wird. 149
Farben und grafische Elemente
Bild 2.61: Farben selbst definieren Im rechten Teil sehen Sie die zugehörige Basisfarbe. Windows verwendet diese Farbe für Elemente, in denen kein Dithering möglich ist – beispielsweise in Linien. Wenn Sie also eine horizontale Linie (siehe unten) einfärben wollen, erhält diese immer die Farbe im rechten Teil des Feldes FARBE/BASIS. 3. Klicken Sie auf OK, um die Farbe zu übernehmen. Wenn Sie eine benutzerdefinierte Farbe abspeichern wollen:
Hinweis
1. Markieren Sie eines der Felder im Bereich der benutzerdefinierten Farben. 2. Wählen Sie die Farbe im rechten Teil des Dialogfelds aus. 3. Klicken Sie auf den Schalter HINZUFÜGEN.
150
Anstatt die Farben über die Farbfelder auszuwählen, können Sie die Farben auch durch Angabe der RGB-Werte (Zahlen zwischen 0 und 255 für Rot, Grün und Blau) oder durch Werte für Farbe, Sättigung und Helligkeit (0 bis 240) definieren.
Kapitel 2: Webdesign mit dem FrontPage-Editor
Horizontale Linien Manche Profis verpönen den Einsatz horizontaler Linien- ebenso wie es manche Germanisten und Literaturkritiker entsetzt, wenn sie Sätze sehen, die mit »Und« beginnen. Und ebenso wie diese Bedenken ihre Berechtigung haben, gibt es auch Ausnahmen, in denen der Einsatz dieser Mittel durchaus von Vorteil sein kann. Schauen Sie sich beispielsweise einmal die alte Webseite der Walt DisneyCompany an.
Bild 2.62: Horizontale Linien in professionellem Design
151
Farben und grafische Elemente Horizontale Linien einrichten 1. Klicken Sie in die Zeile, in der Sie eine horizontale Linie einfügen wollen (mit dem Einfügen ist immer ein Zeilenumbruch verbunden). 2. Rufen Sie den Befehl EINFÜGEN/HORIZONTALE LINIE auf. 3. Passen Sie die Breite der Linie an. Markieren Sie die Linie und rufen Sie den Befehl FORMAT/EIGENSCHAFTEN auf.
Seitenhintergrund Standardmäßig ist der Seitenhintergrund weiß. Wem dies zu nüchtern oder unattraktiv erscheint, dem stehen verschiedene Wege offen, dies auf einfache Weise zu ändern: Farbe Weisen Sie dem Seitenhintergrund eine andere Farbe zu.
Hinweis
1. Rufen Sie dazu den Befehl FORMAT/HINTERGRUND auf und 2. wählen Sie auf der Seite HINTERGRUND eine Hintergrundfarbe aus.
Wenn die Seite ein Design verwendet, können Sie die Hyperlinkfarben nicht selbst bestimmen, da diese vom Design festgelegt werden. Sie können allerdings ein eigenes, angepasstes Design erstellen.
Bilder Um ein Bild als Hintergrund zu verwenden, gehen Sie wie folgt vor: 1. Rufen Sie den Befehl FORMAT/HINTERGRUND auf. 2. Aktivieren Sie auf der Seite HINTERGRUND des Dialogfelds SEITENEIGENSCHAFTEN die Option HINTERGRUNDBILD. Wenn Sie zusätzlich die Option WASSERZEICHEN aktivieren, wird das Hintergrundbild beim Scrollen nicht bewegt (sofern der Browser diese Option unterstützt). 3. Klicken Sie auf den Schalter DURCHSUCHEN und wählen Sie die Bilddatei aus.
152
Kapitel 2: Webdesign mit dem FrontPage-Editor Falls Sie ein Web auf einem Webserver bearbeiten, der die FrontPageServererweiterungen installiert hat, und die Bilddatei bereits zuvor in Ihr Web importiert haben (Befehl DATEI/IMPORTIEREN), klicken Sie in der SUCHEN IN-Leiste auf den Schalter WEBORDNER und wählen im Anzeigefeld das Web aus. 4. Klicken Sie im Dialogfeld HINTERGRUNDBILD WÄHLEN auf den Schalter ÖFFNEN. 5. Drücken Sie im Dialogfeld SEITENEIGENSCHAFTEN den Schalter OK. Echte Bilder lassen sich auf diese Weise nur beschränkt als Seitenhintergrund verwenden. Dies liegt daran, dass der Seitenhintergrund mit dem Bild gekachelt wird. Leider gibt es keinen einfachen Weg, diesen Effekt zu unterbinden. Was Sie tun können, ist, eine Bilddatei mit einem Muster auszuwählen, das ohne sichtbare Übergänge auf der Webseite gekachelt werden kann. Das Muster sollte nicht zu aufdringlich und so gewählt sein, dass Bilder und Text der Seite sich gut gegen das Muster abheben. Da das Muster ehedem im Browser mehrfach neben- und untereinander angezeigt wird, kann das Muster recht klein sein (beispielsweise ein Rechteck von wenigen Pixeln oder ein schmaler Streifen), was auch die Größe der Bilddatei und damit die Übertragungszeit übers Internet reduziert. Design
Bild 2.63: Webhintergründe der Designs Balken und Blaupause
153
Farben und grafische Elemente Wenn Sie Ihrer Webseite ein komplettes Design zuweisen, ist mit diesem auch ein entsprechendes Muster für den Seitenhintergrund verbunden. Um ein Design zuzuweisen oder sich nur vorab über die verschiedenen zur Verfügung stehenden Designs zu informieren, rufen Sie den Befehl FORMAT/DESIGN auf, wählen Sie eines der angebotenen Designs aus und achten Sie darauf, dass im Dialog die Option HINTERGRUNDBILD aktiviert ist.
Bilder und ClipArts Wie Sie eigene Bilder erstellen, welche Grafikformate Sie dabei nutzen sollten und wie Sie mit Bildern Ihre Webseiten professionell gestalten können, erfahren Sie in Kapitel 4. Hier wollen wir klären, wie Sie die Bilder in Ihre Webseiten einbauen. Bilder importieren Das Einfügen eines Bildes ist die Einfachheit selbst. Sie setzen die Einfügemarke an die Stelle, an der das Bild eingefügt werden soll. 1. Sie rufen einen der Befehle EINFÜGEN/GRAFIK/AUS DATEI oder EINFÜGEN/GRAFIK/CLIPART auf. 2. Sie wählen die gewünschte Bilddatei aus und klicken OK. 3. Sie klicken die Grafik im Editor mit der rechten Maustaste an und rufen im Kontextmenü den Befehl BILDEIGENSCHAFTEN auf, um das Erscheinungsbild der Grafik weiter zu konfigurieren. Wenn Sie dabei Bilder von außerhalb Ihres aktuellen Webs auswählen (beispielsweise aus einem anderen Verzeichnis Ihrer Festplatte), werden Sie beim Speichern der Seite automatisch aufgefordert, die verwendeten Bilder in Ihrem Webverzeichnis zu speichern. Damit einhergehend wird im HTMLCode der Webseite der URL zum Importieren des Bildes angepasst. Dies ist wichtig, um sicherzustellen, dass alle zu einer Seite gehörenden Bilder zusammen mit dem Bild zur Verfügung gestellt und vom Browser geladen werden können.
154
Kapitel 2: Webdesign mit dem FrontPage-Editor Bild oder ClipArt? ClipArt-Grafiken sind
왘
Vektorgrafiken, in denen die Bilder als Sammlung von Linien, Kurven und anderen Formen gespeichert sind.
Rasterbilddateien, in denen die Bilder pixelweise abgespeichert sind. Unterstützte Bitmap-Formate sind: *.BMP, *.GIF, *.JPG, *.PCD, *.PCX, *TIF.
Hinweis
Um Bilder dieser Formate zu laden und in Ihre Webseiten aufzunehmen, können Sie einen der Befehle EINFÜGEN/GRAFIK/AUS DATEI oder EINFÜGEN/GRAFIK/CLIPART verwenden. Der wesentliche Unterschied zwischen beiden Verfahren ist, dass Sie im ersten Fall Verzeichnisse durchsuchen, während Sie im zweiten Fall die Verwaltungsoberfläche des Clip Organizers nutzen. Bild- oder ClipArt-Dateien, die in einem nicht Web-tauglichen Grafikformat vorliegen (WMF, BMP etc.), werden – soweit FrontPage dies möglich ist – in eines der Formate .GIF oder .JPG umgewandelt.
Einfügen/Grafik/Aus Datei Nach Aufruf des Menübefehls EINFÜGEN/GRAFIK/AUS DATEI erscheint das Dialogfeld BILD, in dem Sie die einzufügende Bilddatei auswählen können. 1. Durchwandern Sie die Verzeichnisstruktur und wählen Sie die Bilddatei aus. 왘 Wenn die Bilddatei in einem Verzeichnis auf Ihrer Festplatte (oder im Netzwerk) abgespeichert ist, klicken Sie in der SUCHEN INLeiste auf den Schalter DESKTOP und durchwandern Sie dann die Verzeichnishierarchie, bis Sie die Bilddatei gefunden haben.
155
Farben und grafische Elemente
왘 Wenn Sie wissen, dass die Bilddatei unter einem der Ordner VERLAUF,
EIGENE DATEIEN oder FAVORITEN abgelegt ist, klicken Sie auf die zugehörigen Schalter.
왘 Falls Sie ein Web auf einem Webserver bearbeiten, der die Front-
Page-Servererweiterungen installiert hat, und die Bilddatei bereits zuvor in Ihr Web importiert haben (Befehl DATEI/IMPORTIEREN), klicken Sie in der SUCHEN IN-Leiste auf den Schalter WEBORDNER und wählen im Anzeigefeld das Web aus.
2. Klicken Sie im Dialogfeld BILD auf den Schalter EINFÜGEN.
Hinweis
Bild 2.64: Das Dialogfeld Bild
156
Wenn Sie eine Vorschau auf das ausgewählte Bild sehen wollen (vergleiche Bild 2.64), klappen Sie am oberen Rand des BILD-Dialogs das vorletzte Menü auf und wählen Sie den Eintrag VORSCHAU.
Kapitel 2: Webdesign mit dem FrontPage-Editor Wenn Sie Bilder von außerhalb Ihres aktuellen Webs auswählen (beispielsweise aus einem anderen Verzeichnis Ihrer Festplatte), werden Sie beim Speichern der Seite automatisch aufgefordert, die verwendeten Bilder in Ihrem Webverzeichnis zu speichern. Damit einhergehend wird im HTMLCode der Webseite der URL zum Importieren des Bildes angepasst. Einfügen/Grafik/ClipArt
Bild 2.65: Der Clip Organizer Der Clip Organizer ist ein Programm, das Ihnen bei der Organisation und beim Auffinden der auf Ihrem Rechner vorhanden Mediendateien (Bilder, Videos, Sound) behilflich ist. Im Organizer können Sie die Mediendateien – unabhängig davon, in welchen Verzeichnissen sie auf der Festplatte gespeichert sind – in einer von Ihnen beliebig einzurichtenden Ordnerstruktur verwalten (beispielsweise können Sie themenorientierte Ordner anlegen und
157
Farben und grafische Elemente die Clips in diese Ordner verteilen – wie es bei den Clips der Office-Sammlung automatisch geschieht, siehe Bild 2.65). Zudem können Sie die Clips mit Schlüsselwörtern verbinden, nach denen Sie später suchen können. Der erste Schritt bei der Arbeit mit dem Clip Organizer besteht darin, Bilder, Videos und Sounds einzulesen. Dies geschieht automatisch, wenn Sie das erste Mal den Befehl EINFÜGEN/GRAFIK/CLIPART aufrufen. Danach können Sie jederzeit noch weitere ClipArt-Objekte über den Befehl DATEI/ CLIPS ZUM ORGANIZER HINZUFÜGEN aufnehmen. Clips hinzufügen Beim ersten Aufruf des Clip Organizers durchsucht dieser bestimmte Standardverzeichnisse auf Ihrer Festplatte nach Bild-, Video- und Sound-Clips. Wenn Sie weitere Clips hinzufügen wollen, gehen Sie wie folgt vor: 1. Rufen Sie den Clip Organizer auf. Wählen Sie dazu den Befehl EINFÜGEN/GRAFIK/CLIPART aus. Im Aufgabenbereich wird jetzt die Seite CLIP ART EINFÜGEN angezeigt. Klicken Sie im unteren Bereich dieser Seite auf den Eintrag CLIP ORGANIZER. 2. Öffnen Sie im Clip Organizer das Menü DATEI/CLIPS ZUM ORGANIZER HINZUFÜGEN und entscheiden Sie sich für einen der drei Menübefehle 왘 zum automatischen Aktualisieren der Clips aus dem WindowsSystemverzeichnis,
왘 dem manuellen Einlesen der Clips aus einem beliebigen Verzeichnis oder
왘 dem Einlesen über einen Scanner oder eine Kamera. Wir fahren mit dem manuellen Einlesen fort. 3. Wählen Sie den Befehl MANUELL aus. 4. Wechseln Sie im Dialog CLIPS ZUM ORGANIZER HINZUFÜGEN in das Verzeichnis, in dem sich die aufzunehmenden Mediendateien befinden. 5. Klicken Sie auf den Schalter HINZUFÜGEN ZU und wählen Sie im erscheinenden Dialog den Clip-Ordner aus, in den die Clips aufgenommen werden sollen. Um einen neuen Ordner einzurichten, markieren Sie im Dialog den übergeordneten Ordner und klicken dann auf den Schalter NEU.
158
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.66: Manuelles Hinzufügen von Clips 6. Markieren Sie die einzufügenden Dateien (um gleichzeitig mehrere Dateien auszuwählen, verwenden Sie wie gewohnt die Tasten (ª) und (Strg). 7. Klicken Sie auf den Schalter HINZUFÜGEN. Zurück im Clip Organizer können Sie sich die neu eingefügten Clips anzeigen lassen und mit Schlüsselwörtern versehen. 8. Öffnen Sie den betreffenden Clip-Ordner. 9. Rufen Sie für den ersten Clip den Befehl VORSCHAU/EIGENSCHAFTEN aus dem Kontextmenü des Clips auf. 10. Klicken Sie im erscheinenden Dialog auf den Schalter SCHLÜSSELWÖRTER BEARBEITEN. Löschen Sie unnötige oder falsche Schlüsselwörter (der Organizer richtet Standardschlüsselwörter ein, die er aus dem Ursprungsort und der Dateiendung der Clips abliest) und fügen Sie neue Schlüsselwörter hinzu.
159
Farben und grafische Elemente
Hinweis
Bild 2.67: Schlüsselwörter festlegen
Wenn Sie mehreren Clips die gleichen Schlüsselwörter zuweisen wollen, markieren Sie die Clips mithilfe der Tasten (ª) und (Strg) zusammen, bevor Sie den Befehl VORSCHAU/EIGENSCHAFTEN aus dem Kontextmenü aufrufen. Nach dem Drücken von SCHLÜSSELWÖRTER BEARBEITEN. wechseln Sie im Dialog SCHLÜSSELWÖRTER zur Seite ALLE CLIPS AUF EINMAL.
Clips auffinden Um einen der im Clip Organizer verwalteten Clips in eine Webseite einzufügen, gehen Sie wie folgt vor: 1. Rufen Sie den Befehl EINFÜGEN/GRAFIK/CLIPART auf. Im Aufgabenbereich wird jetzt die Seite CLIP ART EINFÜGEN angezeigt. Von da an haben Sie zwei Möglichkeiten. 왘 Sie können im Feld TEXT SUCHEN Schlüsselwörter eingeben und alle Clips anzeigen lassen, zu denen die Schlüsselwörter passen. Die
160
Kapitel 2: Webdesign mit dem FrontPage-Editor gefundenen Clips werden auf einer eigenen Ergebnisseite angezeigt. Über den Schalter ÄNDERN gelangen Sie zurück zur Suchseite.
왘 Sie können das Dialogfeld des Clip Organizers aufrufen (Eintrag CLIP ORGANIZER) und dort die Ordnerhierarchie durchsehen.
2. Wenn Sie den gewünschten Clip gefunden haben, ziehen Sie ihn per Drag&Drop in Ihre Webseite.
Effizientes Arbeiten mit dem Editor Die wichtigsten Voraussetzungen für einen effizienten Umgang mit dem FrontPage-Editor sind:
왘 왘
klare Vorstellung vom Design der zu erstellenden Webseiten
왘
das Wissen um die Möglichkeiten des Editors
sichere Beherrschung der verschiedenen Techniken und Arbeitsabläufe
Darüber hinaus gibt es eine ganze Reihe von Punkten und Optionen, die Web-Autoren helfen können, Zeit und Nerven zu sparen.
Vorlagen nutzen Anstatt mit einer leeren Seite zu beginnen, können Sie eine der von FrontPage vordefinierten Vorlagen wählen oder den Formularseiten-Assistenten nutzen. Seite auf der Grundlage einer Vorlage erstellen 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und wählen Sie im Aufgabenbereich den Eintrag SEITENVORLAGEN. 2. Klicken Sie auf der Dialogseite ALLGEMEIN auf die gewünschte Vorlage. Ich spare mir hier die Vorstellung der einzelnen Vorlagen, da Sie sich durch Anklicken der einzelnen Vorlagen schnell selbst über diese informieren können. Die Felder BESCHREIBUNG und VORSCHAU werden für die ausgewählte Vorlage aktualisiert.
왘 Enthält Ihre aktuelle Seite mehrere Frames, können Sie die neue Seite innerhalb des AKTUELLEN FRAME ÖFFNEN.
161
Effizientes Arbeiten mit dem Editor
왘 Wollen Sie eine Seite für ein Web anlegen, aber erst später bearbei-
ten, aktivieren Sie die Option NUR EINE AUFGABE HINZUFÜGEN. Die Seite wird dann angelegt, aber nicht in den Editor geladen. Stattdessen wird Ihre Aufgabenliste um einen Eintrag erweitert, der Sie daran erinnert, dass es noch eine unbearbeitete Seite gibt.
3. Klicken Sie auf OK.
Bild 2.68: Webseiten-Vorlage auswählen
Querverweis
Seite mit Frames erstellen
162
Die Erstellung von Seiten mit Frames wird in Kapitel 3 »Frames« noch ausführlicher beschrieben.
Kapitel 2: Webdesign mit dem FrontPage-Editor 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und wählen Sie im Aufgabenbereich den Eintrag SEITENVORLAGEN. 2. Klicken Sie auf der Dialogseite FRAMESEITEN auf die gewünschte Vorlage. 3. Klicken Sie auf OK. Im Editor erscheint jetzt die neue Seite mit den leeren Frames, für die Sie ebenfalls Seiten erstellen müssen. Um eine bestehende Seite in einen Frame zu laden, klicken Sie auf den Schalter STARTSEITE FESTLEGEN. Um eine neue Seite für den Frame anzulegen, klicken Sie auf den Schalter NEUE SEITE. Wenn Sie eine neue Seite auf der Grundlage einer Vorlage für den Frame anlegen wollen, gehen Sie dagegen wie folgt vor: 1. Markieren Sie den Frame, für den Sie eine Seite anlegen wollen. 2. Rufen Sie nochmals den Befehl DATEI/NEU/SEITE ODER WEB auf und wählen Sie im Aufgabenbereich wieder den Eintrag SEITENVORLAGEN. 3. Wählen Sie eine Vorlagenseite für die Seite aus. (Die Option IM AKTUELLEN FRAME ÖFFNEN ist per Voreinstellung aktiviert.) 4. Klicken Sie auf OK.
Textmarken setzen Textmarken erfüllen zwei wichtige Aufgaben:
왘
Zum einem erlauben Sie das Springen zu bestimmten Textstellen. Dies kann insbesondere die Bearbeitung umfangreicherer Webseiten erleichtern – beispielsweise Online-Bücher, die aus einer Datei oder nur wenigen HTML-Dokumenten bestehen. In solchen Fällen ist es meist sinnvoll, ein Inhaltsverzeichnis einzurichten und die Kapitel des Buchs mit Textmarken zu versehen (auch in Hinblick auf die spätere Einrichtung von Hyperlinks zu den Kapitelanfängen).
왘
Zum anderen sind Sie Voraussetzung für die Einrichtung von Hyperlinks innerhalb einer Webseite.
Textmarken einrichten 1. Setzen Sie die Einfügemarke auf die Textstelle, für die eine Textmarke eingerichtet werden soll. 2. Rufen Sie den Befehl EINFÜGEN/TEXTMARKE auf. 3. Geben Sie im Dialogfeld TEXTMARKE einen kurzen, aber sinnvollen Namen für die Textmarke ein. Klicken Sie auf OK.
163
Effizientes Arbeiten mit dem Editor
4. In der Normal-Ansicht des FrontPage-Editors wird die Textmarke durch ein Flaggensymbol (das aber mehr wie eine Axt aussieht) gekennzeichnet. (Wenn Sie die Textstelle markiert haben, erscheint kein Flaggensymbol, aber die Textstelle wird in der Normal-Ansicht unterstrichen.)
Bild 2.69: Textmarke definieren Zu Textmarke wechseln 1. Rufen Sie den Befehl EINFÜGEN/TEXTMARKE auf. 2. Wählen Sie im unteren Feld des Dialogfelds TEXTMARKE eine der verfügbaren Textmarken aus. 3. Klicken Sie auf GEHE ZU.
Suchen und Ersetzen Die Verwendung der Befehle SUCHEN und ERSETZEN aus dem BEARBEITEN-Menü dürfte Ihnen wohl bekannt sein. Vielleicht vermissen Sie aber eine Autokorrektur-Funktion, wie sie Word anbietet. Tippfehler müssen Sie also selbst oder mithilfe der Rechtschreibprüfung korrigieren. Sie können den ERSETZEN-Befehl aber verwenden, um immer wiederkehrende, komplizierte Wörter oder Passagen abzukürzen und später in einem Schritt ersetzen zu lassen.
164
Kapitel 2: Webdesign mit dem FrontPage-Editor Angenommen Sie setzen eine Webseite für Ihren Vogelfreunde-Verein auf. Unglücklicherweise lautet die offizielle Bezeichnung des Vereins: »Ornithologischer Verein zum Schutz endemisch vorkommender Spezies« und der Vereinsvorsitzende besteht darauf, dass der Name des Vereins stets ausgeschrieben wird. Gehen Sie dann folgendermaßen vor:
Hinweis
1. Tippen Sie beim Aufsetzen Ihrer Webseite statt des Vereinsnamens jedes Mal »VVV« ein. 2. Wenn Sie mit dem Text fertig sind, rufen Sie den Befehl BEARBEITEN/ERSETZEN auf. 3. Geben Sie im SUCHEN NACH-Feld VVV und im ERSETZEN DURCH-Feld den vollständigen Namen des Vereins ein. 4. Aktivieren Sie die Option NUR GANZES WORT SUCHEN (und wenn Sie ganz sichergehen wollen, auch noch die Option GROSS-/KLEINSCHREIBUNG). 5. Drücken Sie den Schalter ALLES ERSETZEN.
Wenn Sie ein Web geladen haben, können Sie durch Aktivieren der Option ALLE SEITEN alle Webseiten im Web auf einmal durchsuchen lassen.
Globale Suche Über die SUCHEN-Seite des Aufgabenbereichs können Sie direkt von FrontPage aus die Verzeichnisse auf Ihrer Festplatte durchsuchen. 1. Lassen Sie den Aufgabenbereich anzeigen (Befehl ANSICHT/AUFGABENBEREICH) und wechseln Sie mithilfe des aufklappbaren Menüs unter dem abwärts gerichteten Pfeil am rechten Rand der Titelleiste zur Seite SUCHEN. 2. Tippen Sie den zu suchenden Text ein. 3. Wählen Sie im Listenfeld SUCHEN IN die Verzeichnisse aus, in denen gesucht werden soll.
165
Effizientes Arbeiten mit dem Editor
Bild 2.70: Globale Suche
Bild 2.71: Zu durchsuchende Verzeichnisse auswählen Um ein Verzeichnis auszuwählen, klicken Sie in das Kästchen vor dem Verzeichnis. Um ein Verzeichnis samt Unterverzeichnissen auszuwählen, klicken Sie zweimal in das Kästchen des Verzeichnisses.
166
Kapitel 2: Webdesign mit dem FrontPage-Editor Wenn Sie einen lokalen Webserver verwenden, der die FrontPageServererweiterungen installiert hat, können Sie auch die von diesem Server verwalteten Webs durchsuchen. (Ansonsten durchsuchen Sie Webs, die auf Ihrer Festplatte abgespeichert sind, einfach indem Sie die Verzeichnisse der Webs durchsuchen, siehe Bild 2.71.) 4. Wählen Sie im Listenfeld ERGEBNISSE ENTSPRECHEN die Dateitypen der zu durchsuchenden Dateien aus. 5. Starten Sie die Suche, indem Sie auf den Schalter SUCHEN klicken.
Bild 2.72: Anzeige der Suchergebnisse Die gefundenen Dateien werden danach auf einer eigenen Ergebnisseite angezeigt. Um die Dateien zu bearbeiten, brauchen Sie sie nur anzuklicken oder mit der rechten Maus anzuklicken und einen der angebotenen Befehle auszuwählen. Um eine erneute Suche durchzuführen, klicken Sie auf den Schalter ÄNDERN.
167
Effizientes Arbeiten mit dem Editor
Die Office-Zwischenablage Die Office-Zwischenablage steht nur in Office-Anwendungen zur Verfügung und hat gegenüber der normalen Windows-Zwischenablage den Vorteil, dass man in ihr mehrere Objekte gleichzeitig verwahren kann.
Bild 2.73: Die Office-Zwischenablage Die Office-Zwischenablage öffnen Die Office-Zwischenablage wird auf der Seite ZWISCHENABLAGE des Aufgabenbereichs angezeigt. Um die Seite anzuzeigen, rufen Sie den Befehl BEARBEITEN/OFFICE-ZWISCHENABLAGE auf. Elemente in die Office-Zwischenablage kopieren Wenn die Office-Zwischenablage angezeigt wird, brauchen Sie das betreffende Element (Text, Bild etc.) nur zu markieren und den Befehl BEARBEITEN/ EINFÜGEN aufzurufen oder die Tastenkombination (Strg)+(C) zu drücken. Wenn die Office-Zwischenablage nicht angezeigt wird, markieren Sie das Element und drücken Sie zweimal die Tastenkombination (Strg) +(C) .
168
Kapitel 2: Webdesign mit dem FrontPage-Editor
Bild 2.74: Element aus der Office-Zwischenablage einfügen
Hinweis
Elemente aus der Office-Zwischenablage einfügen 1. Lassen Sie die Office-Zwischenablage anzeigen. 2. Setzen Sie die Textmarke an die Position, an der das Element aus der Zwischenablage eingefügt werden soll. 3. Klicken Sie in der Office-Zwischenablage mit der rechten Maustaste auf das einzufügende Element und wählen Sie im Kontextmenü den Befehl EINFÜGEN aus. 4. In der Webseite wird jetzt neben dem eingefügten Element das EinfügenSymbol angezeigt, das Sie anklicken. In dem erscheinenden Kontextmenü können Sie wählen, ob Sie die Formatierung übernehmen oder nur den Text ohne Inhalt verwenden wollen.
Wenn Sie Text in eine Webseite einfügen, sollten Sie in der Regel nur den Text ohne Formatierung übernehmen und den Text gegebenenfalls nachformatieren.
169
Effizientes Arbeiten mit dem Editor
Bild 2.75: Formatierung wählen
Kommentare einfügen Kommentare sind Textelemente, die zwar im FrontPage-Editor, nicht aber in den Browsern sichtbar sind. Sie können Kommentare nutzen, um die Webseite betreffende Hinweise für sich selbst oder andere Web-Autoren direkt im Quelltext der Seite zu speichern. Um einen Kommentar einzugeben. 1. Klicken Sie in FrontPage-Editor auf die Position, an der Sie den Kommentar einfügen möchten. 2. Rufen Sie den Befehl EINFÜGEN/KOMMENTAR auf. 3. Tippen Sie im Dialogfeld KOMMENTAR den gewünschten Kommentar in einem einzigen Absatz ein. Der Text wird automatisch umbrochen, wenn das Zeilenende erreicht ist. Klicken Sie auf OK. Kommentare beginnen mit dem Schlüsselwort »Kommentar« und werden durch violette Schrift hervorgehoben.
170
Kapitel 2: Webdesign mit dem FrontPage-Editor
Rechtschreibprüfung nicht vergessen Nichts ist unangenehmer, als durch schlechte Orthographie und unzählige Tippfehler in Ihren Webseiten aufzufallen. Natürlich ist die deutsche Sprache und Rechtschreibung weder leicht zu erlernen noch wirklich sicher zu beherrschen und kleinere Fehler wird man Ihnen sicherlich nachsehen – zumal manche Rechtschreibfehler in den verschiedenen gedruckten Medien so weit verbreitet sind, dass sie eigentlich schon wieder korrekt sind. Tippfehler und schlimme Patzer sollte man jedoch vermeiden. Helfen kann Ihnen dabei – neben der neuen deutschen Rechtschreibreform – die Rechtschreibhilfe des FrontPage-Editors. Die Rechtschreibhilfe aktivieren Rufen Sie den Befehl EXTRAS/RECHTSCHREIBUNG auf. (Voraussetzung ist natürlich, dass eine Webseite zur Bearbeitung geladen wurde und in der Normalansicht angezeigt wird.) Die Rechtschreibhilfe des Editors geht nun alle Wörter Ihrer Webseite einzeln durch. Jedes Wort wird mit den Eintragungen des von der Rechtschreibhilfe benutzten Wörterbuchs (einer internen Datenbank) verglichen – mit folgenden Konsequenzen:
왘
Die Rechtschreibhilfe findet in ihrem Wörterbuch einen gleich lautenden Eintrag. In diesem Fall geht die Rechtschreibhilfe davon aus, dass das Wort korrekt ist und geht von selbst weiter zum nächsten Wort.
왘
Die Rechtschreibhilfe findet keinen gleich lautenden Eintrag, stoppt und zeigt das Dialogfeld RECHTSCHREIBUNG an. Dies heißt jetzt aber nicht, dass das entsprechende Wort tatsächlich falsch geschrieben wurde. Es heißt nur, dass es keinen gleich lautenden Eintrag im Wörterbuch gibt – was durchaus an der Unvollständigkeit des Wörterbuchs liegen kann.
Das Dialogfeld Rechtschreibung Angenommen Sie führen gerade eine Rechtschreibprüfung durch und die Rechtschreibhilfe ist über ein verdächtigstes Wort gestolpert, für das der Dialog RECHTSCHREIBUNG aufgerufen wurde.
171
Effizientes Arbeiten mit dem Editor
Bild 2.76: Die Rechtschreibhilfe Das verdächtige Wort ist im Editor markiert und wird auch im Dialog angezeigt. Insgesamt sehen Sie dort drei Textfelder:
왘
NICHT IM WÖRTERBUCH zeigt noch einmal das verdächtige Wort an.
왘
ÄNDERN IN enthält den Text, durch den das verdächtige Wort ersetzt wird, wenn Sie den Schalter ÄNDERN drücken. Als Vorgabe sehen Sie hier eine Wiederholung des verdächtigen Wortes oder den ersten Vorschlag aus dem darunter gelegenen Textfeld.
왘
VORSCHLÄGE listet ähnlich lautende Wörter auf, die die Rechtschreibhilfe im Wörterbuch gefunden hat.
Prüfen Sie die Rechtschreibung des verdächtigen Wortes.
왘
Ist das Wort korrekt und allgemein gebräuchlich – dann klicken Sie auf den Schalter HINZUFÜGEN, um das Wörterbuch um einen Eintrag für das neue Wort zu erweitern und die Suche fortzusetzen.
왘
Ist das Wort korrekt, aber wenig gebräuchlich (beispielsweise ein Eigenname oder ein seltenes Lehnwort) – klicken Sie auf einen der Schalter NIE ÄNDERN oder IGNORIEREN, um die Suche fortzusetzen, das Wörterbuch aber nicht unnötig aufzublähen.
왘
Ist das Wort falsch und die Rechtschreibhilfe hat den korrekten Begriff gefunden – wählen Sie den korrekten Begriff aus der Liste der Vorschläge aus (sofern dies nicht schon der Fall ist) und klicken Sie auf einen der Schalter ALLES ÄNDERN oder ÄNDERN, um das Wort zu korrigieren und die Suche fortzusetzen.
172
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘
Ist das Wort falsch und die Rechtschreibhilfe hat den korrekten Begriff nicht gefunden – geben Sie das korrigierte Wort in das Feld ÄNDERN IN ein und klicken Sie auf einen der Schalter ALLES ÄNDERN oder ÄNDERN, um das Wort zu korrigieren und die Suche fortzusetzen.
Thesaurus verwenden Der Thesaurus ersetzt Ihnen das Nachschlagen in Synonym-Wörterbüchern. Er hilft Ihnen bei der Wortwahl, indem er Ihnen zu einem markierten Wort alternative, sinnverwandte Ausdrücke und Wörter vorschlägt. Angenommen Sie haben folgenden Text aufgesetzt: »Ein gutes Essen wirkt gleich noch mal so appetitlich, wenn die Gerichte angemessen dekoriert sind« Nun sind Sie über den Begriff »dekoriert« nicht sonderlich glücklich. Da müsste es doch noch ein treffenderes Wort geben. 1. Markieren Sie jetzt den Begriff. 2. Rufen Sie den Befehl EXTRAS/THESAURUS auf. Es erscheint das gleichnamige Dialogfeld. Wurden Synonyme gefunden, werden diese im Listenfeld zu ERSETZEN DURCH SYNONYM aufgeführt. Wurden gar Synonyme mit verschiedenen Bedeutungsvarianten gefunden, werden die verschiedenen BEDEUTUNGEN im gleichnamigen, links gelegenen Feld aufgelistet und die Liste der Synonyme ändert sich nach der links ausgewählten Bedeutungsvariante. 3. Haben Sie ein passendes Synonym gefunden (beispielsweise »garnieren«), markieren Sie es im rechten Listenfeld und klicken Sie auf den Schalter ERSETZEN.
Hinweis
Sind Sie noch unsicher, können Sie über den Schalter NACHSCHLAGEN das weitere Umfeld einzelner gefundenen Synonyme erkunden. Über den Schalter ZURÜCK, kommen Sie dann wieder zu Ihrem Ausgangsbegriff zurück. Ebenso wie die Rechtschreibhilfe ist auch der Thesaurus mit einer gewissen Vorsicht zu genießen. Trauen Sie dem Thesaurus nicht mehr als Ihrem gesunden Menschenverstand und Ihrem eigenen Sprachgefühl.
173
Effizientes Arbeiten mit dem Editor
Symbolleisten anzeigen und anpassen Um eine der Symbolleisten des Editors ein- oder auszublenden, wählen Sie den entsprechenden Eintrag im Menü ANSICHT aus. Die Symbolleisten werden entweder frei verschiebbar oder in den FrontPage-Rahmen integriert (angedockt) angezeigt – je nachdem, wie die Symbolleiste zuletzt platziert wurde.
왘
Um eine angedockte Symbolleiste aus dem Rahmen zu lösen, klicken Sie mit der linken Maustaste auf den Anfang der Symbolleiste und ziehen die Symbolleiste mit gedrückter Maus in das Innere des FrontPage-Rahmens.
왘
Um ein Symbolleiste in eine Seite des Rahmens zu integrieren, nehmen Sie die Symbolleiste mit der Maus auf und ziehen Sie sie über den Rahmen, bis sie mit diesem verschmilzt.
Bild 2.77: Symbolleisten anpassen
174
Kapitel 2: Webdesign mit dem FrontPage-Editor Zusammensetzung der Symbolleisten anpassen Wenn Sie möchten, können Sie selbst festlegen, welche Schaltflächen und weiteren Elemente in den FrontPage-Symbolleisten angezeigt werden.
Vermissen Sie vielleicht die Schaltflächen zum Hoch- und Tiefstellen? Nun, sie sind noch vorhanden und warten darauf, von Ihnen aktiviert zu werden. 1. Rufen Sie den Befehl ANSICHT/SYMBOLLEISTEN/ANPASSEN auf und wechseln Sie im Dialogfeld ANPASSEN zur Seite BEFEHLE. 2. Die Befehle, die Sie in die Symbolleisten aufnehmen können, sind nach Kategorien geordnet. Wählen Sie zuerst die KATEGORIE aus. Als Antwort auf diese Auswahl wird die Auswahlliste im Feld BEFEHLE aktualisiert. 3. Wählen Sie im Feld BEFEHLE den Schalter für das Tiefstellen aus. 4. Ziehen Sie den Schalter mit der Maus in die Format-Symbolleiste. Ein vertikaler Strich zeigt Ihnen an, an welcher Position der Schalter eingefügt wird. 5. Verfahren Sie ebenso für den Schalter zum Hochstellen der Schrift. Symbole entfernen Solange Sie das Dialogfeld geöffnet haben und im Anpassung-Modus sind, können Sie auch Symbole aus den Symbolleisten entfernen. Klicken Sie dazu mit der rechten Maustaste auf das zu entfernende Symbol und rufen Sie im Kontextmenü den Befehl LÖSCHEN auf oder ziehen Sie das Symbol einfach mit der Maus aus der Symbolleiste.
Editieren in der HTML-Ansicht Wenn Sie Ihre Webseiten in der HTML-Ansicht bearbeiten, sei es, weil Sie spezielle Formatierungen vornehmen wollen, die über die Normal-Ansicht nicht verfügbar sind, sei es, dass Sie die HTML-Ansicht aus persönlicher Neigung vorziehen, sollten Sie sich nicht unnötig viel Arbeit aufbürden. Etliche Befehle und Schaltflächen zur Formatierung und fast alle Befehle zum Einfügen der verschiedenen Webseitenelemente (von der horizontalen Linie bis zur Tabelle) stehen Ihnen auch in der HTML-Ansicht zur Verfügung.
175
Effizientes Arbeiten mit dem Editor HTML-Formatierung anpassen Bevor Sie darüber rätseln, was Ihnen diese Überschrift sagen soll: Hier geht es nicht darum, wie man mit HTML-Tags Webseiten formatiert, sondern darum wie der FrontPage-Editor Ihren HTML-Code in der HTMLAnsicht anzeigt. In FrontPage98 war es nämlich noch so, dass der Editor den HTML-Code bei jedem Speichern umformatierte. Einige Webdesigner, die gewohnt sind, den HTML-Code direkt zu bearbeiten und diesen zu diesem Zwecke übersichtlich mit Umbrüchen und Einzügen zu formatieren, dürfte diese Eigenmächtigkeit des Editors bis zur Weißglut getrieben haben. Nun, damit ist jetzt Schluss. Per Voreinstellung nimmt der Editor keine Änderungen mehr an einmal eingegebenem HTML-Code vor (unabhängig davon, ob Sie oder der Editor den Code eingefügt haben).
Bild 2.78: HTML-Code umformatieren lassen
176
Kapitel 2: Webdesign mit dem FrontPage-Editor Wenn Sie möchten, können Sie aber auch den Befehl EXTRAS/SEITENOPTIONEN aufrufen und auf der Registerseite HTML-QUELLE selbst festlegen, wie der Editor beim Speichern der Seite den HTML-Code umgestalten soll.
HTML in der Normal-Ansicht
Bild 2.79: HTML-Tags in Normal-Ansicht Wenn Sie auch in der Normal-Ansicht sehen möchten, welche HTML-Tags für die Formatierung und das Layout Ihrer Seite verwendet werden, schalten Sie den Befehl ANSICHT/TAGS ANZEIGEN ein.
Browser-Kompatibilität sicherstellen Wenn Sie sicherstellen wollen, dass Ihre Webseiten zu bestimmten Browsern und/oder Servern kompatibel sind, sollten Sie den Befehl EXTRAS/SEITENOPTIONEN aufrufen und die Registerseite KOMPATIBILITÄT anzeigen lassen. Standardmäßig sind auf dieser Seite alle Optionen aktiviert oder auf »Benutzerdefiniert« eingestellt. Wenn Sie möchten, dass FrontPage Ihnen nur Formatierungen und Technologien freigibt, die sowohl vom Internet Explorer als auch dem Netscape Navigator unterstützt werden, wählen Sie die entsprechende Option im Listenfeld BROWSER aus und entscheiden Sie sich für eine BROWSERVERSION. Auch auf Ihren Webserver können Sie FrontPage abstimmen, wobei die interessanteste Option mit Sicherheit das Kästchen MIT MICROSOFT FRONTPAGE-SERVERERWEITERUNGEN ist, denn viele Server unterstützen diese Servererweiterungen nicht.
177
FrontPage-Komponenten (die WebBots)
Bild 2.80: Kompatibilität sicherstellen
FrontPage-Komponenten (die WebBots) Einer der Microsoft-Werbeslogans besagt, dass man mit Microsoft FrontPage professionelle Websites ohne irgendwelche Programmierkenntnisse erstellen kann! Diesem vollmundigen Versprechen steht die Tatsache gegenüber, dass gerade die interessanteren – und vor allem die interaktiven – Elemente und Ausstattungsmerkmale wie Zeiteinblendung, Zugriffszähler, Gästebücher, Formulare etc. nur mithilfe spezieller Programme oder eingefügten Programmcodes realisiert werden können. Wie kann Microsoft nun sein Versprechen einlösen? Ganz einfach. Indem es Ihnen die Programmierung abnimmt und die fertigen Programme mitliefert. Schauen wir uns dies am Beispiel eines Zugriffszählers ein wenig genauer an.
178
Kapitel 2: Webdesign mit dem FrontPage-Editor
Was steckt hinter den FrontPage-Komponenten? Eine bei Webdesignern sehr beliebte FrontPage-Komponente ist der »Zugriffszähler«. An ihrem Beispiel wollen wir uns mit dem Wesen der FrontPage-Komponenten vertraut machen. Der Zugriffszähler als Beispiel Haben Sie auch so Ihre kleinen Fehler und Schwächen? Kein Grund rot zu werden! Wir sind doch alle nur Menschen. Bedenklich wird es aber meines Erachtens, wenn die Leute anfangen, ihre Schwächen vor sich selbst zu verleugnen. Eine der amüsanteren Schwächen ist sicherlich die Leichtgläubigkeit. So wurde vor einigen Jahren in der April-Ausgabe der renommierten Fachzeitschrift »Spektrum der Wissenschaften« von einer Aufsehen erregenden Entdeckung berichtet: Amerikanische Archäologen hatten auf einer Insel bei Neuginea einen frühzeitlichen Computer entdeckt. Aus Seilen und Rollen hatten die Ureinwohner elektronische Bausteine wie AND-Gatter, ORGatter und Inverter erstellt und zu einem echten Rechenwerk zusammengesetzt. Die Archäologen nahmen an, dass die damalige Priesterkaste diesen »Computer« als eine Art Orakel betrieb und ihr Wissen um die Konstruktion dieses Orakels zum Machterhalt nutzte. Schematische Abbildungen zur Funktionsweise des Rechenwerks und eine Einführung in die digitale Schaltungslogik rundeten den Artikel ab. Unter dem Eindruck von so viel Logik und Wissenschaft blieb der gesunde Menschenverstand einiger Leser auf der Strecke. In den nachfolgenden Monaten ergingen daraufhin einige böse Briefe an die Redaktion von aufgebrachten Lesern, die die sensationelle Nachricht sofort weiterverbreitet und sich dabei bei ihren Professoren und Kollegen blamiert hatten. Traurig, wenn einem auch noch der Humor fehlt! Testen Sie doch auch einmal die Leichtgläubigkeit Ihrer Mitbürger. Erstellen Sie eine Webseite mit dem Titel »Zeitmaschine erfunden«. Auf der Seite stellen Sie einen Hyperlink zur Verfügung, den mutige Besucher nur anzuklicken brauchen, um sich selbst in die Zukunft zu katapultieren. Tatsächlich führt der Hyperlink auf die Seite aus Bild 2.81. Bei der Realisierung dieser Seite ergibt sich ein kleines Problem. Die Anzahl der Besucher ändert sich fortwährend. Damit die Besucherzahl auf der Seite trotzdem immer korrekt angezeigt wird, muss man also einen Weg finden,
179
FrontPage-Komponenten (die WebBots)
왘 왘 왘
die Zugriffe auf die Seite zu überwachen. die Anzahl der Zugriffe auf dem Server zwischenzuspeichern. die aktuelle Anzahl der Zugriffe in den Text der Seite einzublenden.
Bild 2.81: Einsatz eines Zugriffszählers Wer überwacht die Zugriffe auf die Seite? Dazu ist zweifelsohne nur der Server in der Lage, auf dem die Seite bereitgestellt wird. Wer zählt die Zugriffe? Dafür ist der Server nicht ohne weiteres eingerichtet. Was man braucht ist ein kleines Programm (üblicherweise in Form eines CGI-Skripts), das auf dem Server ausgeführt wird und das die Zugriffe mitzählt. Wie wird die Anzahl der Zugriffe auf der Webseite angezeigt? Hierfür wird in die Webseite ein Platzhalter eingebaut, der besagt: »An dieser Stelle soll die Anzahl der Zugriffe eingeblendet werden. Die Anzahl der Zugriffe liefert das Programm 'sowieso'.«
180
Kapitel 2: Webdesign mit dem FrontPage-Editor Den Zugriffszähler einrichten Alles was Sie tun müssen, um Ihre Webseite mit einem funktionierenden Zugriffszähler auszustatten, ist, den Platzhalter einzurichten. Legen Sie ein neues Web an. Verwenden Sie dazu die Vorlage STANDARDWenn Sie einen lokalen Webserver betreiben, legen Sie das Web auf dem Webserver an.
WEB.
1. Laden Sie die Homepage des Webs in den Editor und tippen Sie den Text aus Bild 2.81 ein. 2. Setzen Sie jetzt die Einfügemarke an die Textstelle, an der der Zugriffszähler eingeblendet werden soll.
Bild 2.82: Einfügen eines Zugriffszählers 3. Rufen Sie den Befehl EINFÜGEN/WEBKOMPONENTE auf. In dem Dialogfeld WEBKOMPONENTE EINFÜGEN wählen Sie als Komponententyp den Eintrag ZUGRIFFSZÄHLER aus. Im rechten Feld können Sie danach das Erscheinungsbild des Zählers bestimmen. Falls der Eintrag ZUGRIFFSZÄHLER deaktiviert ist, rufen Sie den Befehl EXTRAS/SEITENOPTIONEN auf, wechseln Sie zur Seite KOMPATIBILITÄT und aktivieren Sie die Option MIT MICROSOFT-FRONTPAGE-SERVERERWEITERUNGEN.
181
FrontPage-Komponenten (die WebBots) 4. Drücken Sie auf den Schalter FERTIG STELLEN. Es erscheint ein weiteres Dialogfeld, in dem Sie den Zugriffszähler für den Einsatz in Ihrer Webseite konfigurieren können. Abgesehen davon, dass Sie noch einmal das Erscheinungsbild des Zugriffszählers ändern können, haben Sie die Möglichkeit, einen Anfangswert und eine feste Anzahl von Ziffernstellen vorzugeben. 5. Schicken Sie das Dialogfeld ab. In der Normal-Ansicht wird Ihnen nun der Platzhalter angezeigt.
Bild 2.83: Der FrontPage-Zugriffszähler in der Normal-Ansicht Genau genommen handelt es sich dabei um eine alternative Anzeige. Der vollständige Platzhalter steht im HTML-Code. Im HTML-Code sieht man, dass die Realisierung des Zugriffszählers aus einem Kommentar besteht, der die Beschreibung der FrontPage-Komponente enthält
Nach dem Schließen steht im HTML-Code auch das Datum:
Hinweis
Warum kann man nach dem Einfügen der Datums-Komponente in der Normal-Ansicht oder der Vorschau bereits das aktuelle Datum sehen, obwohl im HTML-Code doch nur der reine Webbot-Kommentar steht? Nun, der FrontPage-Editor kennt natürlich die FrontPage-Komponenten und stellt sie daher zu ihrer Bequemlichkeit direkt so dar, wie sie später aussehen werden.
Zur Kategorie der Entwurfszeit-Komponenten gehören:
왘 왘 왘 왘 왘 왘 왘 184
Datum und Uhrzeit die Komponente zum Einfügen von FrontPage-Kommentare das Seitenbanner die dynamischen Effekte die Office-Tabellen und -Diagramme das Fotoalbum eingeschlossene Inhalte
Kapitel 2: Webdesign mit dem FrontPage-Editor
왘 왘 왘 왘
Hyperlinkleisten, die auf der FrontPage-Navigationsstruktur basieren das Inhaltsverzeichnis die Expedia-, MSN- und MSNBC-Komponenten die erweiterten Steuerelemente
Laufzeit-Komponenten Die Komponenten dieser Kategorie dienen zum Austausch von Informationen zwischen Client und Server. Sie werden daher zur Laufzeit aktiv, beispielsweise wenn die Seite mit der Komponente von einem Browser angefordert wird. Diese Komponenten stützen sich auf die FrontPageServererweiterungen. Folglich sollten Sie bei Ihrem Server-Provider abklären, ob diese Erweiterungen auf dem Server installiert sind, bevor Sie Ihre Webseiten mit diesen Komponenten ausstatten. Zu dieser Kategorie gehören:
왘 왘 왘
die Websuche
왘 왘 왘 왘
die Top-10-Liste
der Zugriffszähler Hyperlinkleisten, die nicht auf der FrontPage-Navigationsstruktur basieren die Listenansicht die Dokumentbibliotheksansicht verschiedene Komponenten zur Unterstützung von Formularen (Bestätigungsfeld, Diskussion, Registrierung, Ergebnisse speichern, Suchen)
Ausführung des Zugriffszählers Da der Zugriffszähler, wie im vorangehenden Abschnitt beschrieben, zur Kategorie der Laufzeit-Komponenten gehört, ist er darauf angewiesen, dass auf dem Webserver, von dem aus die Webseite mit dem Zugriffszähler geladen wird, die FrontPage-Servererweiterungen installiert sind. Wenn Sie das Web mit dem Zugriffszähler auf einen lokalen Webserver mit FrontPage-Servererweiterungen angelegt haben, können Sie jetzt Ihren Browser aufrufen und die Webseite vom Webserver anfordern (geschieht automatisch, wenn die Webseite im FrontPage-Editor angezeigt wird und
185
FrontPage-Komponenten (die WebBots) Sie den Menübefehl DATEI/BROWSERVORSCHAU aufrufen). Die Webseite sollte dann wie in Bild 2.81 aussehen und bei jedem Neuladen der Webseite dürfte der Zugriffszähler um 1 erhöht werden. Wenn die FrontPage-Servererweiterungen nicht auf dem Webserver installiert sind (oder Sie den Fehler machen, als Adresse für die zu ladende Webseite eine Pfadangabe, wie C:\inetpub\wwwroot\zukunft, statt eines URLs, wie http://ihrserver/zukunft, anzugeben), sehen Sie statt des Zugriffszählers nur einen Platzhalter.
Verwendung der FrontPage-Komponenten Fassen wir die bisherigen Erkenntnisse noch einmal allgemeingültig zusammen:
왘
Hinter den FrontPage-Komponenten (auch WebBots genannt; WebBot steht für Web-Roboter) stehen Programme – CGI-Skripts, Java-Applets, ActiveX-Komponenten, die FrontPage-Servererweiterungen etc.
왘
Um eine FrontPage-Komponente in eine Ihrer Seiten aufzunehmen, rufen Sie den entsprechenden Befehl aus dem Menü EINFÜGEN auf (EINFÜGEN/DATUM UND UHRZEIT, EINFÜGEN/WEBKOMPONENTE, EINFÜGEN/KOMMENTAR, EINFÜGEN/SEITENBANNER) Danach erscheint ein Dialogfeld, über das Sie die Komponente nach Ihren Vorstellungen konfigurieren können. Wenn Sie nach dem Einfügen der Komponente die Konfiguration noch einmal ändern wollen, markieren Sie die Komponente und rufen Sie den Befehl FORMAT/EIGENSCHAFTEN auf.
왘
186
Die Komponente und Ihre Einstellungen werden in den HTMLCode eingefügt. Für Laufzeit-Komponenten und EntwurfszeitKomponenten, die nach jedem Bearbeiten der Webseite aktualisiert werden sollen, fügt FrontPage einen Kommentar als Platzhalter für die Komponente ein. Dieser Platzhalter wird entweder vom FrontPage-Editor (beim Schließen der Webseite) oder von den FrontPageServererweiterungen (wenn die Webseite vom Webserver heruntergeladen wird) durch das eigentliche anzuzeigende Element ersetzt.
Kapitel 2: Webdesign mit dem FrontPage-Editor
Die einzelnen FrontPage-Komponenten Gehen wir die einzelnen Komponenten durch. Zu jeder Komponente finden Sie Hinweise zur Einarbeitung der Komponente in Ihre Webseiten, Möglichkeiten zur Konfiguration und ein praktisches Beispiel. Zuvor aber noch eine kurze Übersicht, damit Sie schneller entscheiden können, welche Komponente zur Lösung Ihrer Probleme geeignet ist.
Komponente
Verwendungszweck
Datum und Uhrzeit
Zur Anzeige der letzten Überarbeitung einer Seite Befehl EINFÜGEN/DATUM UND UHRZEIT
Kommentar
Zum Einfügen von Kommentaren in Webseiten Befehl EINFÜGEN/KOMMENTAR
Hyperlinkleisten
Zur Einrichtung einheitlich gestalteter Hyperlinkleisten Befehl EINFÜGEN/NAVIGATION
Schriftzug, der über den Bildschirm läuft. Befehl EINFÜGEN/WEBKOMPONENTE/DYNAMISCHE
EFFEKTE Achtung: Diese Komponente basiert auf einem HTMLTag, das nur vom Internet Explorer unterstützt wird! Anzeigenwechsler
Blendet nacheinander verschiedene Bilder ein. Befehl EINFÜGEN/WEBKOMPONENTE/DYNAMISCHE
EFFEKTE Websuche
Zum Durchsuchen des Textes der aktuellen Webseite. Befehl EINFÜGEN/WEBKOMPONENTE/WEBSUCHE Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen!
Tabelle 2.7: Übersicht über die FrontPage-Komponenten
187
FrontPage-Komponenten (die WebBots)
Komponente
Verwendungszweck
OfficeKomponenten
Office-Tabellen und -Diagramme, die als ActiveXKomponenten eingebunden werden. Befehl EINFÜGEN/WEBKOMPONENTE/TABELLEN UND
DIAGRAMME
Zugriffszähler
Zur Anzeige der bis dato erfolgten Zugriffe auf eine Seite. Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen!
Fotoalbum
Erzeugt Miniaturansichten zu einer Fotogalerie.
Ersetzung
Platzhalter, der später durch seitenspezifische Werte ersetzt wird. Befehl EINFÜGEN/WEBKOMPONENTE/
EINGESCHLOSSENER INHALT Seite einschließen
Zum Einfügen von HTML-Dateien in Webseiten Befehl EINFÜGEN/WEBKOMPONENTE/
EINGESCHLOSSENER INHALT Seite nach Zeitplan einschließen
Zur Einblendung eines besonderen Textes innerhalb eines festgelegten Zeitraums. Befehl EINFÜGEN/WEBKOMPONENTE/
EINGESCHLOSSENER INHALT Bild nach Zeitplan einschließen
Zur Einblendung eines besonderen Bildes innerhalb eines festgelegten Zeitraums Befehl EINFÜGEN/WEBKOMPONENTE/EINGESCHLOSSENER INHALT
Inhaltsverzeichnis
Automatisch erstelltes und aktualisiertes Inhaltsverzeichnis Befehl EINFÜGEN/WEBKOMPONENTE/INHALTSVERZEICHNIS
Top-10-Liste
Erzeugt Top-10-Listen mit Informationen über das Web und seine Besucher (beispielsweise die zehn am häufigsten besuchten Seiten des Webs oder die von den Besuchern am häufigsten verwendeten Browser). Befehl EINFÜGEN/WEBKOMPONENTE/TOP-10-LISTE Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen!
Tabelle 2.7: Übersicht über die FrontPage-Komponenten (Forts.)
188
Kapitel 2: Webdesign mit dem FrontPage-Editor
Komponente
Verwendungszweck
Listenansicht
Befehl EINFÜGEN/WEBKOMPONENTE/ LISTENANSICHT Achtung: Diese Komponente benötigt Microsoft SharePoint!
Dokumentbibliotheksansicht
Befehl EINFÜGEN/WEBKOMPONENTE/ DOKUMENTBIBLIOTHEKSANSICHT Achtung: Diese Komponente benötigt Microsoft SharePoint!
ExpediaKomponenten
Zum Anzeigen von regionalen Landkarten. Befehl EINFÜGEN/WEBKOMPONENTE/
EXPEDIA COMPONENTS Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen! MSN-Websuche
Zum Suchen im World Wide Web. Befehl EINFÜGEN/WEBKOMPONENTE/
MSN COMPONENTS Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen! MSNAktienkurse
Zum Anzeigen aktueller Aktienkurse. Befehl EINFÜGEN/WEBKOMPONENTE/
MSN COMPONENTS Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen! Aktuelle MSNBCNachrichten
Zum Anzeigen aktueller MSNBC-Nachrichten. Befehl EINFÜGEN/WEBKOMPONENTE/
MSNBC COMPONENTS Achtung: Diese Komponente basiert auf den FrontPageServererweiterungen!
Tabelle 2.7: Übersicht über die FrontPage-Komponenten (Forts.)
189
FrontPage-Komponenten (die WebBots)
Komponente
Verwendungszweck
Interne Komponenten
Die von FrontPage vordefinierten Formulare, die Sie über das Dialogfeld SEITENVORLAGEN auswählen und in Ihre Webs einfügen können, verwenden FrontPage-Komponenten zur serverseitigen Auswertung der Formulareingaben. Sie können diese Formulare daher nur verwenden, wenn auf dem Webserver die FrontPage-Servererweiterungen installiert sind (oder Sie müssen die Formulare über das EIGENSCHAFTEN-Dialogfeld umkonfigurieren, siehe 5.3.2).
Tabelle 2.7: Übersicht über die FrontPage-Komponenten (Forts.)
190
Kapitel 3 Von der Webseite zum Web Das vorangehende Kapitel war ganz dem FrontPage-Editor und der Bearbeitung einzelner Webseiten gewidmet. Dabei war es relativ unerheblich, ob die Webseiten allein stehend oder Teil eines Webs waren. Für den fortgeschrittenen Webdesigner ist diese Frage aber ganz und gar nicht unerheblich. Zwar ändert sich an den vorgestellten Techniken zur Bearbeitung der Webseiten auch dann nichts, wenn die Webseiten Teil eines Webs sind, doch bringt die Planung und Erstellung ganzer Webs neue Aufgaben und Herausforderungen mit sich. Das Design der einzelnen Webseiten muss aufeinander abgestimmt werden, der Aufbau des Webs muss geplant, eine für den Webbesucher intuitiv verständliche Navigationsstruktur muss eingerichtet werden, das Web selbst muss verwaltet, geprüft und gewartet werden. Diesen Themen ist das vorliegende Kapitel gewidmet. Bevor wir aber tiefer in Planung und Design von Webs einsteigen können, müssen wir uns noch mit den grundlegenden Arbeitsschritten zum Einrichten von Webs vertraut machen.
Webs anlegen und bearbeiten Mit dem Webdesign verhält es sich wie mit jeder künstlerischen Tätigkeit: Zuerst muss man verschiedene technische Fähigkeiten erwerben, dann kann man mit dem eigentlichen künstlerischen Prozess beginnen. In diesem Sinne werden wir uns nun einige, für die Erstellung von Webs grundlegenden Arbeitsschritte anschauen.
Webs anlegen Über den Menübefehl DATEI/NEU/SEITE ODER WEB können Sie neue Webs anlegen – als Verzeichnis auf Ihrer lokalen Festplatte oder auf einem Server.
Webs anlegen und bearbeiten
Bild 3.1: Neues Web anlegen 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag LEERES WEB oder den Eintrag WEBVORLAGEN. Beide Befehle rufen das Dialogfeld WEBVORLAGEN auf, in dem Sie eine Webvorlage auswählen und eine Adresse für das Web angeben können. Der einzige Unterschied zwischen den Befehlen LEERES WEB und WEBVORLAGEN besteht darin, dass bei Aufruf des Befehls LEERES WEB die Webvorlage Leeres Web als Vorgabe ausgewählt ist, während bei Aufruf des Befehls WEBVORLAGEN die Vorlage STANDARDWEB ausgewählt ist. In beiden Fällen steht es Ihnen selbstverständlich frei, noch eine andere Vorlage auszuwählen (siehe unten). 2. Geben Sie als Adresse den Verzeichnispfad (C:\MeineWebs\) und den Namen (DemoWeb1) des Webs an. FrontPage legt dann unter dem angegebenen Verzeichnispfad ein Unterverzeichnis mit dem Namen des Webs an und speichert darin die Dateien des Webs. Wenn Sie also beispielsweise
192
Kapitel 3: Von der Webseite zum Web als Adresse C:\MeineWebs\DemoWeb1 angeben, legt FrontPage für das neue Web DemoWeb1 unter dem übergeordneten Verzeichnis C:\MeineWebs\ ein Unterverzeichnis DemoWeb1 an, in dem die Dateien des Webs abgespeichert werden. Wenn Sie das Web direkt auf einem Webserver einrichten wollen, geben Sie als Adresse ein neues Verzeichnis unter dem Dokumentenverzeichnis des Webservers an. Wenn auf dem Webserver die FrontPage-Servererweiterungen installiert sind, können (und sollten) sie statt einer Pfadangabe einen URL angeben (beispielsweise http://localhost/MeineWebs/DemoWeb1). 3. Klicken Sie auf OK. Webvorlagen bestehenden Webs hinzufügen
Bild 3.2: Webseiten einer Vorlage einem bestehenden Web hinzufügen Abgesehen von der Vorlage LEERES WEB gehören zu jeder Webvorlage eine oder mehrere Webseiten, die zum größten Teil von FrontPage mit einem
193
Webs anlegen und bearbeiten vorgegebenen Layout und speziellen funktionellen Inhalten ausgestattet werden. Wenn Sie diese Webseiten einem bestehenden Web hinzufügen möchten, gehen Sie wie folgt vor: 1. Öffnen Sie das Web, dem Sie die Webseiten hinzufügen wollen. 2. Rufen Sie danach den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag WEBVORLAGEN. 3. Wählen Sie die gewünschte Vorlage aus und geben Sie die Adresse des Webs ein. 4. Aktivieren Sie die Option ZUM AKTUELLEN WEB HINZUFÜGEN. 5. Klicken Sie auf OK. HTTPS-Webs mit sicherer Verbindung erstellen
Bild 3.3: Web unter HTTPS erstellen
194
Kapitel 3: Von der Webseite zum Web Die meisten Webseiten sind frei und für alle Websurfer zugänglich. Es gibt aber auch Webseiten, die nicht für jedermann zugänglich sein sollen – etwa weil man die auf den Webseiten angebotenen Informationen nur gegen entsprechende Vergütung bereitstellen möchte oder weil die enthaltenen Daten privat oder geheim sind. Der erste Fall liegt beispielsweise vor, wenn Sie einen passwortgeschützten Online-Webdesign-Lehrkurs ins Internet stellen wollen. Nach Entrichtung einer einmaligen Gebühr bekommen Interessenten ein persönliches Passwort zugeschickt, mit dem sie sich auf die entsprechenden Webseiten einloggen können. Der zweite Fall liegt beispielsweise beim Online-Banking vor, wenn der Webserver Webseiten mit Kontoständen und Umsätzen zusammenstellt und an den Kunden schickt. In diesem Fall reicht es nicht, die Webseiten durch Passwörter oder andere Authentifizierungssysteme zu schützen. Auch die Übertragung der Daten muss gesichert werden1. Das Abfangen von Daten, die übers Internet transportiert werden, lässt sich grundsätzlich nicht vermeiden. Man kann aber die Daten so verschlüsseln, dass der Spion mit den abgefangenen Daten nichts anfangen kann. Netscape Communications hat zu diesem Zweck das SSL-Protokoll entwickelt (SSL steht für »Secure Sockets Layer«). Für die Übertragung SSL-geschützter Daten und Webseiten gibt es ein eigenes Internet-Transferprotokoll. Während normale Webseiten via HTTP übertragen werden, werden SSL-codierte Informationen mittels HTTPS2 zwischen Browser und Server übertragen. Voraussetzung hierfür ist, dass der Webserver über einen HTTPS-Port verfügt und der Browser HTTPS-Pakete empfangen und dekodieren kann. 1. Um auf einem Webserver, der die FrontPage-Servererweiterungen installiert hat und SSL unterstützt, ein gesichertes Web anzulegen, müssen Sie im Dialogfeld WEBVORLAGEN lediglich die Option SICHERE VERBINDUNG ERFORDERLICH (SSL) aktivieren.
1.
Alle Daten, die über das Internet verschickt werden, können von entsprechend ausgerüsteten Hackern abgefangen und ausspioniert werden. Wenn ein Hacker dabei die Webseiten Ihres Online-Tutorials abfängt, ist dies nicht weiter schlimm, da der Schaden sich ja gerade einmal auf 10,- bis 20,- DM beläuft (beziehungsweise so viel, wie Sie als Nutzungsgebühr für den Lehrkurs veranschlagt haben). Wenn der Hacker dagegen Ihre Kreditkartennummer in die Finger bekommt, kann der Schaden beträchtlich sein. 2. HTTPS steht für sicheres (secure) HTTP.
195
Hinweis
Webs anlegen und bearbeiten
URLs zu SSL-geschützten Seiten beginnen steht mit der Protokollangabe https:// (statt http://). In den meisten Browsern wird die gesicherte Verbindung durch ein Schlüssel- oder Schlosssymbol angezeigt.
Die FrontPage-Vorlagen Neue Webs werden immer auf der Grundlage von Webvorlagen erstellt.
Hinweis
Die Vorlagen unterscheiden sich in der Art und Zahl der vordefinierten Seiten. Einige Vorlagen sind mit einem Assistenten verbunden, der es erlaubt, den Inhalt der angelegten Webseiten individuell anzupassen. Die Assistenten bestehen aus einer Reihe von Dialogfeldern, über die bestimmte Angaben zur Konfiguration des Webs und seiner Seiten abgefragt werden.
Vorlage
Beschreibung
Standardweb
Einfaches Web mit einer einzigen leeren Seite
Leeres Web
Erstellt ein Web ohne Webseiten
Persönliches Web
Vorlage für ein privates Web mit Homepage und Bildergalerie, Hobbys, Favoriten etc.
Datenbankschnittstellen-Assistent
Erstellt ein Web mit Datenbankanbindung
DiskussionswebAssistent
Web für ein Diskussionsforum mit Inhaltsverzeichnis und Volltextsuche.
FirmenpräsenzwebAssistent
Vorlage für eine professionelle Website, wie sie Firmen und Unternehmen für ihren Internetauftritt nutzen
Kundenunterstützungsweb
Web zur Kundenunterstützung, insbesondere auf die Bedürfnisse von Software-Firmen abgestimmt
Tabelle 3.1: Die FrontPage-Webvorlagen
196
Kapitel 3: Von der Webseite zum Web
Vorlage
Beschreibung
Projektweb
Web zur Unterstützung von Firmenprojekten; inklusive Mitarbeiterverzeichnis, Statusbericht, Zeitplan, Diskussionsplattform etc. Interessant auch für die Veröffentlichung im Intranet.
SharePoint-Website für Teamzusammenarbeit
Web, über das Mitglieder eines Teams Informationen und Ideen austauschen können (beinhaltet Ereigniskalender, Dokumentenbibliothek, Aufgabeliste, Adressenliste etc.)
Web-Import-Assistent
Wandelt ein lokales Verzeichnis mit seinen Unterverzeichnissen und HTML-Dateien in ein Web um.
Tabelle 3.1: Die FrontPage-Webvorlagen (Forts.) Webs speichern, schließen, wieder öffnen Um alle Seiten eines Webs zu speichern, rufen Sie den Befehl DATEI/ALLES auf.
SPEICHERN
Um ein Web zu schließen, verwenden Sie den Befehl DATEI/WEB SCHLIESSEN.
Um ein Web wieder zu öffnen,
왘
wählen Sie das Web im Untermenü DATEI/ZULETZT GEÖFFNETE WEBS aus oder
왘
rufen den Befehl DATEI/WEB ÖFFNEN auf und durchforsten die Verzeichnisstruktur nach dem Namen/Verzeichnis des Webs.
Webs in FrontPage-Webs umwandeln Webs, die nicht mit FrontPage angelegt werden, werden von FrontPage auch nicht als Webs erkannt. Sie können die Webseiten dann entweder einzeln bearbeiten (Befehl DATEI/ÖFFNEN statt DATEI/WEB ÖFFNEN) oder das Verzeichnis öffnen und von FrontPage in ein FrontPage-Web umorganisieren lassen. Am besten verwenden Sie hierzu den Webimport-Assistenten: 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag WEBVORLAGEN. 2. Wählen Sie den Webimport-Assistenten aus, geben Sie die Adresse für das neu einzurichtende FrontPage-Web ein und klicken Sie auf OK.
197
Webs anlegen und bearbeiten
Bild 3.4: Das erste Dialogfenster des Webimport-Assistenten 3. Im ersten Dialog des Assistenten wählen Sie das Verzeichnis (oder die Website) aus, für die Sie das FrontPage-Web erstellen möchten. Klicken Sie danach auf WEITER. 4. Im zweiten Dialog haben Sie die Möglichkeit, einzelne Webseiten von dem Import in das FrontPage-Web auszuschließen. 5. Klicken Sie auf WEITER und auf FERTIG STELLEN, um den Import abzuschließen. Der Assistent legt nun ein neues FrontPage-Web als Kopie des angegebenen Quellwebs an. Eine andere Möglichkeit ein Nicht-FrontPage-Web zu öffnen, besteht darin, den Befehl DATEI/WEB ÖFFNEN aufzurufen, das Verzeichnis des Webs auszuwählen und im Dialog den ÖFFNEN-Schalter zu betätigen. FrontPage legt dann keine Kopie an, sondern fügt dem bestehenden Web alle notwendigen Informationen bei, um es in ein FrontPage-Web umzuwandeln. Die Dateien des Webs bleiben dabei selbstverständlich unverändert erhalten. Wenn das Web gleichzeitig mit einem anderen Programm oder gar von mehreren Webautoren bearbeitet wird, sollte man von dieser Möglichkeit der Umwandlung eher Abstand nehmen.
198
Kapitel 3: Von der Webseite zum Web
Hinweis
Bild 3.5: Webs in FrontPage-Webs umwandeln
Sie können die Umwandlung eines Webs in ein FrontPageWeb auch wieder rückgängig machen. 1. Öffnen Sie das Web, klicken Sie in der Ordnerliste auf das Basisverzeichnis des Webs und drücken Sie die (Entf)-Taste. 2. Im Dialogfeld LÖSCHEN BESTÄTIGEN aktivieren Sie die Option NUR FRONTPAGE-INFORMATIONEN AUS DEM WEB ENTFERNEN... und klicken auf OK.
Achtung
Webs kopieren, verschieben und löschen Wenn Sie ein Web kopieren oder verschieben, besteht die Gefahr, dass in der Kopie nicht alle Elemente des Webs ordnungsgemäß funktionieren. Insbesondere absolute Hyperlinks, die auf Dateien innerhalb des Webs verweisen, sind nach dem Kopieren fehlerhaft (weswegen man für Hyperlinks auf webinterne Dateien grundsätzlich relative Hyperlinks verwenden sollte, siehe Kapitel 2 »Hyperlinks«).
199
Webs anlegen und bearbeiten Webs kopieren 1. Suchen Sie im Windows Explorer das Verzeichnis des Webs auf Ihrer Festplatte. Für Webs, die auf einem lokalen Webserver angelegt sind, ist das Webverzeichnis ein Unterverzeichnis des Webservers. 2. Halten Sie die (Strg)-Taste gedrückt, so dass neben dem Mauscursor ein Plus-Zeichen erscheint. 3. Ziehen Sie mithilfe der Maus das Verzeichnis des Webs zu seinem neuen Bestimmungsort. Alternativ können Sie zum Kopieren auch den Webimport-Assistenten von FrontPage verwenden (siehe oben). Nicht-FrontPage-Webs werden dabei allerdings automatisch in FrontPage-Webs umgewandelt. Webs verschieben 1. Suchen Sie das Verzeichnis des Webs auf Ihrer Festplatte. Für Webs, die auf einem lokalen Webserver angelegt sind, ist das Webverzeichnis ein Unterverzeichnis des Webservers. 2. Verschieben Sie mithilfe der Maus das Verzeichnis des Webs auf Ihrer Festplatte. 3. Wenn Sie das Verzeichnis auf ein anderes Laufwerk verschieben wollen, müssen Sie die (ª)-Taste drücken. Alternativ können Sie das Web auch mit dem Webimport-Assistenten von FrontPage kopieren (siehe oben) und danach das Originalweb löschen. Nicht-FrontPage-Webs werden dabei allerdings automatisch in FrontPageWebs umgewandelt. Webs löschen 1. Suchen Sie das Verzeichnis des Webs auf Ihrer Festplatte und löschen Sie das Verzeichnis. Oder: 1. Öffnen Sie das Web, klicken Sie in der Ordnerliste auf das Basisverzeichnis des Webs und drücken Sie die (Entf)-Taste. 2. Im Dialogfeld LÖSCHEN BESTÄTIGEN aktivieren Sie die Option DIESES WEB VOLLSTÄNDIG LÖSCHEN und klicken auf OK.
200
Kapitel 3: Von der Webseite zum Web Neue Ordner anlegen 1. Wechseln Sie in die Ordner-Ansicht. 2. Klicken Sie in der Ordnerliste mit der rechten Maustaste auf das Basisverzeichnis des Webs (bzw. auf das Verzeichnis, unter dem der neue Ordner angelegt werden soll). 3. Rufen Sie im Kontextmenü den Befehl NEU/ORDNER auf.
Webseiten anlegen, bearbeiten, löschen Neue Webseiten anlegen 1. Wechseln Sie in die Ordner-Ansicht. 2. Rufen Sie den Menübefehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag LEERE SEITE. Oder Klicken Sie in der Symbolleiste auf das Symbol NEUE NORMALE SEITE ERSTELLEN.
Oder
Hinweis
Drücken Sie die Tastenkombination (Strg)+(N).
Wenn Sie zuerst in die Ordner-Ansicht wechseln und dann eine neue Seite anlegen, wird diese direkt in das Verzeichnis des Webs aufgenommen und der Dateiname der Seite wird automatisch als Vorgabe für den Titel übernommen. Wenn Sie ein Web geladen haben und in der Seitenansicht eine neue Seite anlegen, wird diese nicht automatisch zu einem Teil des geladenen Webs (dies geschieht erst beim Abspeichern der Seite, wenn Sie als Speicherverzeichnis ein Verzeichnis des Webs auswählen). Um den Titel festzulegen, müssen Sie im SPEICHERN UNTER-Dialog auf den Schalter TITEL ÄNDERN klicken.
201
Webs anlegen und bearbeiten Neue Webseiten aus Vorlagen Statt einer leeren Seite können Sie auch eine vorformatierte Seite anlegen lassen. Zu diesem Zweck lassen Sie die Seite auf der Grundlage einer Vorlage erstellen.
Bild 3.6: Auswahl einer Seitenvorlage 1. Wechseln Sie in die Ordner-Ansicht. 2. Rufen Sie den Menübefehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag SEITENVORLAGEN. 3. Im Dialogfeld SEITENVORLAGEN wählen Sie eine passende Vorlage aus. Um sich darüber zu informieren, wie eine Vorlage aufgebaut ist, wählen Sie die Vorlage im linken Listenfeld aus und schauen Sie sich dann rechts die Felder Beschreibung und Vorschau an. 4. Klicken Sie auf OK.
202
Hinweis
Kapitel 3: Von der Webseite zum Web
Vorlagen für Frameseiten finden Sie auf der Registerkarte FRAMESEITEN. Über die Registerkarte STYLESHEETS kann man externe Stylesheets anlegen.
Webseiten zur Bearbeitung öffnen 1. Wechseln Sie in die Ordner-Ansicht. 2. Wählen Sie in der Ordnerliste das Verzeichnis, in dem die Webseite abgespeichert ist. 3. Doppelklicken Sie in dem Verzeichnisfenster auf den Dateinamen der Webseite. Oder: In den Ansichten HYPERLINKS und NAVIGATION können Sie Webseiten durch Doppelklick auf ihre Symbole öffnen. Webseiten speichern Um die aktuell im Editor angezeigte Webseite zu speichern, 1. Rufen Sie den Befehl DATEI/SPEICHERN auf. Oder: Drücken Sie die Tastenkombination (Strg)+(S). Um alle geänderten Seiten eines Webs zu speichern, rufen Sie den Befehl DATEI/ALLES SPEICHERN auf. Webseiten schließen Um die aktuell im Editor angezeigte Webseite zu speichern, 1. Rufen Sie den Befehl DATEI/SCHLIESSEN auf. Oder: Klicken Sie auf das Schließen-Symbol in der Titelleiste des Editors. Webseiten kopieren Wenn Sie die Webseite gerade im Editor bearbeiten: 1. Rufen Sie den Befehl DATEI/SPEICHERN UNTER auf und speichern Sie die Datei unter einem anderen Namen.
203
Webs anlegen und bearbeiten Ansonsten: 1. Wechseln Sie in die Ordner-Ansicht und öffnen Sie in der Ordnerliste das Verzeichnis, in dem die Webseite abgespeichert ist. 2. Markieren Sie den Dateinamen der Webseite. 3. Drücken Sie die Tastenkombination (Strg)+(C). 4. Drücken Sie die Tastenkombination (Strg)+(V). Webseiten umbenennen 1. Rufen Sie den Befehl DATEI/SPEICHERN UNTER auf und speichern Sie die Datei unter einem anderen Namen. 2. Klicken Sie mit der rechten Maustaste auf den Dateinamen der Webseite. 3. Wählen Sie im Kontextmenü den Befehl UMBENENNEN. 4. Tippen Sie den neuen Namen ein. Webseiten löschen 1. Markieren Sie den Eintrag der Webseite. 2. Drücken Sie die (Entf)-Taste.
Dateien in Webs importieren 1. Wechseln Sie in die Ansicht ORDNER. 2. Markieren Sie in der Ordnerliste den Ordner, in den Sie die Datei importieren wollen. 3. Rufen Sie den Befehl DATEI/IMPORTIEREN auf. 4. Drücken Sie im Dialogfeld IMPORTIEREN auf den Schalter DATEI HINZUFÜGEN und wählen Sie die gewünschte Datei aus. Alternativ können Sie einen ganzen Ordner oder Teile eines Webs importieren (Schalter ORDNER HINZUFÜGEN und AUS EINEM WEB).
Hinweis
5. Klicken Sie auf OK .
204
Sie können Dateien auch importieren, indem Sie die Datei mit der Maus aus dem Windows Explorer heraus in die Ordnerliste von FrontPage ziehen und dort ablegen.
Hinweis
Kapitel 3: Von der Webseite zum Web
Über den Befehl DATEI/IMPORTIEREN können Sie nicht nur Webseiten, sondern auch Grafiken, Word-Dokumente und andere Dateien in ein Web importieren.
Webs planen Webdesign ist keine Wissenschaft, man kann es nicht wie die klassische Newtonsche Mechanik durch die Ableitung und Beschäftigung mit (augenscheinlich) unveränderlichen Gesetzmäßigkeiten erlernen. Allein mit Talent, Stilempfinden und Kreativität ist es aber auch nicht getan. Erstens ist es schwer kreativ zu sein, wenn einem das nötige Wissen über die zur Verfügung stehenden Stilmittel fehlt (beispielsweise dem Einsatz von Schatten in Grafiken oder der Erweiterung des Webs um eine Eingangsseite). Zweitens hilft Talent nicht bei der Lösung typischer Designprobleme (beispielsweise dem Antialiasing). Drittens ist Stilempfinden keine Garantie dafür, dass man nicht versehentlich mit »ehernen« Regeln wie dem Goldenen Schnitt oder der Vermeidung horizontaler Linien bricht. Der erste Schritt zu einem ansprechenden Webdesign besteht daher darin zu erkennen, dass sich ein gutes Design nicht von allein einstellt. Man muss viel Arbeit investieren, man muss über Hintergrundwissen verfügen, man muss eine geeignete Methodik verfolgen. In diesem und dem folgenden Kapitel wird es daher neben dem Erlernen reiner Techniken mehr und mehr auch um Design-Fragen und -Entscheidungen gehen. Es werden Methoden und Regeln vorgestellt, die Sie mit den Grundsätzen modernen Designs vertraut machen und Ihnen die tägliche Arbeit erleichtern sollen. Ich möchte allerdings vorausschicken, dass allein die Befolgung dieser Methoden und Regeln nicht automatisch zu einem guten Design führt – ebenso wenig wie die Missachtung der einen oder anderen Regel zwangsläufig zu einem schlechten Design führt. Gutes Design entsteht eben nur durch die Kombination aus Wissen, Stilsicherheit, Kreativität und Originalität (die sich schon einmal über Regeln hinwegsetzen darf).
Zur Methodik Es gibt keinen Königsweg zur Erstellung von Websites und folglich auch keine festgelegte Methodik. Dies hat zum einem damit zu tun, dass man kreative Tätigkeiten nicht ohne weiteres in logische Ablaufschemata pressen
205
Webs planen kann, zum anderen bestehen naturgemäß erhebliche Unterschiede zwischen der Erstellung einer privaten Homepage mit zwei, drei untergeordneten Seiten und dem hundertseitigen Internetauftritt eines renommierten Unternehmens. Auf der anderen Seite sind im Zuge der Weberstellung eine Reihe von Entscheidungen zu treffen, die praktisch für jedes Web relevant sind:
왘 왘 왘 왘 왘
Wen soll die Website ansprechen? Welche Inhalte sollen auf der Website angeboten werden? Wie soll das Web aufgebaut sein? Wie soll sich der Besucher im Web bewegen können? Wie soll das übergeordnete Design des Webs aussehen?
Private Webdesigner treffen diese Entscheidungen meist unbewusst, während sie ihr Web aufbauen. Professionelle Webdesigner versuchen, diese Fragen möglichst im Vorfeld der Weberstellung abzuklären. Die Reihenfolge, in der die Fragen hier aufgeführt sind, ist natürlich nicht ganz willkürlich. Die Fragen bauen aufeinander auf, und die Beantwortung jeder Frage beeinflusst die Beantwortung der nächsten Frage. Dies soll jedoch nicht den Eindruck erwecken, dass das Webdesign ein ebenso geradliniger Prozess wäre wie das Ausfüllen eines Fragebogens. Bei komplexeren Webs beginnen die Probleme meist damit, dass man für den geplanten Webaufbau keine passende Navigationsstruktur findet. Also versucht man, die Webstruktur nach den Forderungen der Navigationsstruktur zu verändern. Die Navigationsstruktur wiederum ist wichtiger Teil des übergeordneten Designs, was bedeutet, dass sich die Navigationselemente in gefälliger Weise ins angestrebte Design einfügen müssen. Klappt dies nicht, muss man andere Navigationselemente finden, was unter Umständen seinerseits Änderungen an der Navigationsstruktur nach sich zieht. Hat man schließlich eine brauchbare und ansprechende Lösung gefunden, kommt der Auftraggeber mit neuen Inhalten, die unbedingt noch in das Web eingebaut werden müssen – glücklich, wer in so einem Falle eine Webstruktur gefunden hat, die erweitert werden kann, ohne dass Änderungen an der Navigationsstruktur oder dem Design nötig werden.
206
Kapitel 3: Von der Webseite zum Web
Zielsetzung Der erste Schritt besteht darin, die eigenen Ziele zu definieren. Dient die Website einem privaten oder einem kommerziellen Auftritt? Möchte man mit der Website vorwiegend informieren oder unterhalten, werben oder verkaufen? Wer sind die wichtigsten Zielgruppen? Ziehen Sie aus den Antworten Rückschlüsse und entwickeln Sie eine erste Vorstellung von der Website. Soll sie eher seriös oder poppig wirken? Ist ein schlichtes oder ein verspieltes Design zu bevorzugen? Darf das Design sehr künstlerisch sein oder ist Zurückhaltung gefordert? Wenn Sie einen Webauftritt für eine Firma oder ein Institut entwerfen, informieren Sie sich über die Firma / das Institut und klären Sie diese Fragen im persönlichen Gespräch. Ergründen Sie vor allem, welches Selbstverständnis Ihr Auftraggeber hat. Er wird mit Ihrer Arbeit um so zufriedener sein, um so mehr er sich mit der von Ihnen entworfenen Website identifizieren kann. Das gilt für den ersten Entwurf, den Sie als Bewerbung einreichen, ebenso wie für das Endprodukt.
Stoffsammlung Die nächste Entscheidung betrifft die im Web dargebotenen Inhalte. Denken Sie an die Intention des Webs und tragen Sie zusammen, was gemäß dieser Intention zum Web gehört. Private Homepages enthalten typischerweise einen Lebenslauf, Vorstellung der eigenen Hobbys und Interessen, eventuell eine Bildergalerie mit privaten Fotos. Eine Website für ein wissenschaftliches Institut, wird vermutlich das Institut und seine Mitarbeiter vorstellen, Forschungsergebnisse veröffentlichen und eigene Unterwebs für die aktuellen Projekte unterhalten. Ein Firmenweb wird das Unternehmen und seine Produkte präsentieren, eventuell auch einen Kundenservice anbieten und per Internet neue Mitarbeiter werben. Verzetteln Sie sich nicht! Gerade Anfänger machen schnell den Fehler, unkritisch alles Mögliche im Web anbieten zu wollen. Nun ist gegen eine gewisse Diversifikation zwar nichts zu sagen, doch sollte man grundsätzlich darauf achten, dass das Web ein Thema hat und dieses Thema auch für den Webbesucher erkennbar ist. Wenn Sie also die Stoffsammlung für das Web aufsetzen, trennen Sie zwischen Inhalten, die unbedingt ins Web gehören, und Inhalten, die man zusätzlich anbieten könnte.
207
Hinweis
Webs planen
Beachten Sie auch, dass zusätzliche Inhalte, die sich nur schlecht ins Web einordnen lassen und kaum zu dessen Attraktivität beitragen, die weitere Erstellung des Webs unnötig erschweren.
Nachdem ich Sie davor gewarnt habe, dem Drang zu erliegen, unkritisch noch dieses und jenes mit ins Web aufzunehmen, möchte ich jetzt darauf eingehen, wie Sie die Attraktivität eines Webs durch Zusatzangebote steigern können. Ein attraktives Zusatzangebot sollte
왘 왘 왘
Informationen, Unterhaltung oder einen besonderen Service
bieten. Es sollte neue Webbesucher auf die Website locken und dem Webbesucher darüber hinaus einen Anreiz bieten, die Website mehr oder weniger regelmäßig zu frequentieren. (Im Idealfall soll der Webbesucher die Homepage Ihrer Website in seine Favoritenliste eintragen.) Die größten Freiheiten zur Einrichtung von Zusatzangeboten hat man bei der Erstellung persönlicher Websites, da diese thematisch nicht so eng begrenzt sind wie andere Webs. Es steht Ihnen also vollkommen frei, Ihr Web durch Infos, Online-Spiele, Animationen oder verschiedene Service-Leistungen zu bereichern – vorausgesetzt Sie wissen, wie die entsprechenden Angebote zu verwirklichen sind. Dies kann für Einsteiger durchaus ein Problem sein, denn viele interessante Angebote können nur durch Programmierung realisiert werden. Falls Sie über keine Programmierkenntnisse verfügen, müssen Sie deswegen aber nicht gleich verzagen. Es gibt genügend Möglichkeiten, das eigene Web auch ohne Programmierkenntnisse attraktiver zu gestalten. Eine Möglichkeit ist, eine Liste von Hyperlinks zu interessanten Websites anzubieten. Damit eine solche Liste ein Erfolg ist, sollten Sie entweder eine möglichst originelle und vielfältige Zusammenstellung wählen oder gezielt Links zu einem bestimmten Thema (beispielsweise Ihren Hobbys) anbieten. Die Liste sollte nicht nur Links enthalten, die jeder kennt oder die man schnell mithilfe einer Suchmaschine finden kann. Und damit die Liste Ihren Reiz behält, sollte sie fortlaufend aktualisiert werden. Gute »Lockmittel« sind auch OnlineTutorien oder Rubriken mit regelmäßig wechselndem Inhalt – beispielsweise
208
Kapitel 3: Von der Webseite zum Web Gedichten, Kosmetiktipps, Buchbesprechungen, einem selbst verfasster Fortsetzungsroman und so weiter. Weniger aufwendig sind Service-Leistungen, etwa die Berechnung des Biorhythmus, des Body-Mass-Index, der Umrechnung von DM in Euro oder der Durchführung eines Intelligenz- oder Partnerschaftstests. Solche Services müssen zwar programmiert werden, doch genügen dazu oft schon rudimentäre JavaScript-Kenntnisse oder man findet im Internet fertige Java-Programme, die man nur noch in die eigene Website einbetten muss (FrontPage-Befehl EINFÜGEN/WEBKOMPONENTE/ERWEITERTE STEUERELEMENTE/JAVA-APPLET). Bei themenorientierten Webs (beispielsweise eine Website über heimische Kräuterpflanzen) oder Internetauftritten von Instituten und Unternehmen sollte man darauf achten, dass die Zusatzangebote zum Thema und Konzept der Website passen. Wenn Sie eine Website unterhalten, auf der Sie die einheimische Kräuterwelt vorstellen, sollten Sie nicht versuchen, durch Programmierung eines OnlineKartenspiels mehr Websurfer in Ihr Web zu locken. Vielleicht erhöht sich dadurch Ihre Besucherzahl, doch dürften diese Besucher dann allein wegen des Kartenspiels und nicht wegen des Kräuterlexikons kommen. Ihr Bestreben sollte es aber sein, sich gegenüber anderen Kräuter-Website auszuzeichnen und die Attraktivität des Webs für die Webbesucher zu erhöhen, die sich über Kräuterpflanzen informieren wollen. Richten Sie also beispielsweise eine Suchmaschine ein, mit der man gezielt nach einzelnen Kräutern suchen kann (FrontPage-Befehl EINFÜGEN/WEBKOMPONENTE/WEBSUCHE), bieten Sie Hyperlinks zu verwandten Websites an, stellen Sie Rezepte für Kräutertees und Kräuterliköre ins Web, programmieren Sie ein Quiz, in dem der Besucher sein Wissen über die Kräuter testen kann. So erhöhen Sie die Zufriedenheit Ihrer Besucher und verbessern Ihre Aussichten auf Unterstützung durch Sponsoren aus der Pharmaindustrie, die gerne Werbebannern in Ihrem Web platzieren möchten. Gleiches gilt für die Webs von Firmen. Oberstes Ziel sollte es sein, Kunden – und nicht zufällig vorbeischauende Websurfer – zu werben und an die Website zu binden. Nehmen wir an, Sie vermieten ein Ferienhaus in Norddeutschland. Zu diesem Zweck haben Sie eine Website eingerichtet, auf der man sich das Ferienhaus und seine Lage anschauen kann. Über einen EMail-Link können Interessierte Kontakt mit Ihnen aufnehmen und das Ferienhaus reservieren lassen. Um eine solche Website attraktiver zu gestalten, könnte man eine Karte des Umlands ins Web aufnehmen. Auf der Karte
209
Webs planen könnte man nicht nur den Anfahrtsweg kennzeichnen, sondern auch mögliche Ausflugsziele und Freizeitaktivitäten vermerken. Im Idealfall würde man die Karte mit Hotspots versehen, so dass der Kunde nur auf das in die Karte eingezeichnete Symbol eines Museums oder eines Kanus klicken muss, um sich über die Öffnungszeiten des Museums oder die Kontaktadresse des Kanuverleihers zu informieren. So erhält der Kunde nicht nur einen Eindruck von dem Ferienhaus, sondern auch von der Umgebung und dem regionalen Freizeitangebot. Er wird die Website wegen des zusätzlichen Service seinen Bekannten weiter empfehlen und – sofern ihm das Ferienhaus zugesagt hat – per E-Mail mit dem Eigentümer Kontakt aufnehmen.
Webstruktur Nachdem geklärt ist, welche Inhalte im Web angeboten werden sollen, besteht die nächste Aufgabe darin, die Inhalte auf Seiten aufzuteilen und diese zu organisieren und in eine Webstruktur einzubinden. Beachten Sie, dass die Webstruktur nicht gleich der Navigationsstruktur ist. In der Webstruktur werden die einzelnen Seiten des Webs hierarchisch organisiert. Die Hierarchie ergibt sich daraus, auf welchen Wegen der Webbesucher die einzelnen Seiten erreicht. Insofern steht die Webstruktur natürlich in enger Beziehung zur Navigationsstruktur; in der Webstruktur müssen aber bei weitem nicht alle webinternen Verknüpfungen versinnbildlicht werden, auch sagt die Webstruktur nichts darüber aus, wie die Links implementiert werden (einzelne Textlinks, Hyperlinkleisten, ImageMaps etc.). Wichtig ist,
왘
dass in der Webstruktur möglichst alle Seiten dargestellt werden (im Falle umfangreicher Webs kann man Unterwebs als ein Symbol darstellen und andernorts detailliert skizzieren).
왘
dass man der Struktur den grundlegenden Aufbau des Webs und die wichtigsten Bewegungen der Besucher entnehmen kann.
왘
dass die Struktur möglichst ohne großen Aufwand erweiterbar ist (falls man selbst oder der Auftraggeber später noch weitere Inhalte aufnehmen möchte).
Es gibt verschiedene Grundmuster für Webstrukturen. Da diese Grundmuster historisch entstanden sind, spricht man auch von Webgenerationen.
210
Kapitel 3: Von der Webseite zum Web Anfangs bestanden die meisten Webs aus einer einzigen Webseite mit ein wenig Text, dem Konterfei des Inhabers und Links zu anderen Websites im WWW. Eine solche Homepage umfasste zwei Dateien, die HTML-Datei und eine Bilddatei für das Konterfei, die beide in einem Verzeichnis auf dem Webserver untergebracht wurden. Der nächste Schritt war die Aufteilung des Inhalts auf mehrere Webseiten, die untereinander durch relative Links verbunden waren. Der klassische Aufbau einer solchen Homepage der 2. Generation sah so aus, dass man auf einer Startseite begrüßt wurde und von dort über relative Links zu den weiteren Seiten des Webs verzweigen konnte. Eine solche Website bestand üblicherweise aus genau zwei Ebenen: einer Ebene für die Homepage und einer Ebene für die untergeordneten Webseiten. (Die FrontPage-Webvorlage PERSÖNLICHES WEB verwendet diese Webstruktur, siehe Kapitel 5.) 1. Generation
3. und 4. Generation
Home page
Eingangsseite
Eingangstunnel
2. Generation
Eingangstunnel
Home page
Kernseite Seite A
Seite B
Ausgangstunnel
Ausgangsseite
Seite C
Seite A
Seite B
Seite C
Seite D
Bild 3.7: Typische Webstrukturen
211
Webs planen Heute sind mehr und mehr Webs – private wie firmeneigene – wie Erlebnisparks organisiert: Sie besitzen einen speziellen Eingang, führen den Besucher ausgehend von der Hauptseite über relative Links im Web herum (wobei der Besucher selbst wählen kann, welchen Links er folgen, welche Attraktionen er anschauen möchte) und verabschieden den Besucher mit einer speziellen Seite (die auch schon einmal gleich der Hauptseite sein kann). Während Sie die Webstruktur planen, sollten Sie auch festlegen, welche Webseite die Homepage des Webs sein soll. Aus Sicht des Webservers, auf dem das Web veröffentlicht wird, ist dies die Datei, die den Dateinamen index.htm oder index.html trägt (manche Webserver verwenden auch default.htm, default.html oder andere Namen) und vom Webserver automatisch abgerufen wird, wenn ein Websurfer das Web ohne Angabe einer HTML-Datei ansteuert (beispielsweise http://www.server.de/meinWeb/). Aus Sicht des Webbesuchers ist die Homepage die zentrale Webseite des Webs, von der aus Links zu den untergeordneten Seiten verzweigen und auf die man üblicherweise von jeder Seite aus über einen HOME-Link zurückkehren kann (sofern der Autor des Webs entsprechende Links eingerichtet hat).
Hinweis
Für die Webs der ersten und zweiten Generation decken sich beide Definitionen. Bei Webs der dritten Generation ist dies meist nicht mehr der Fall. Die technische Homepage eines solchen Webs ist die Eingangsseite. Sie trägt den Dateinamen index.htm (oder index.html etc.), damit Websurfer, die das Web das erste Mal besuchen und es über den reinen Web-URL ansteuern, zur Eingangsseite gelangen. Aus Sicht des Websurfers ist hingegen die zentrale Hauptseite des Webs die Homepage, das heißt, er erwartet bei einem Klick auf einen HOME-Link zur Hauptseite des Webs zurückgeführt zu werden – und nicht zur Eingangsseite.
212
Um mit FrontPage festzulegen, welche Seite die Homepage Ihres Webs sein soll, wechseln Sie in die Ordner-Ansicht, klicken Sie mit der rechten Maustaste auf den Eintrag der Datei und wählen Sie im Kontextmenü den Befehl ALS HOMEPAGE BESTIMMEN aus.
Kapitel 3: Von der Webseite zum Web
Navigationselemente Eine wichtiger Schritt bei der Weberstellung ist zu entscheiden, welche Navigationselemente verwendet werden sollen und auf welchen Wegen der Besucher durch das Web geführt werden soll. In den Abschnitten »Navigationsstrukturen« und »Frames« werden wir näher darauf eingehen.
Thema und Symbolik Grundsätzlich sollten die Seiten eines Webs ein gemeinsames Design aufweisen, also: gleichen Seitenaufbau, gleiche Navigationselemente, gleiche Farben und Schriften etc. Der einfachste Weg, ein gemeinsames Design vorzugeben, besteht darin, den Seiten des Webs ein FrontPage-Design zuzuweisen (Befehl FORMAT/DESIGN). Sie können zwischen einer großen Auswahl vordefinierter Designs wählen (wobei man allerdings aufpassen sollte, dass das gewählte Design zum Inhalt des Webs passt – also kein Blumen-Design für die Website eines Architekturbüros verwenden) oder eigene Designs kreieren, indem Sie die Einstellungen für ein bestehendes Design ändern (Schalter ÄNDERN im Dialogfeld DESIGNS) und unter einem neuen Design-Namen abspeichern (Schalter SPEICHERN UNTER). FrontPage-Designs verleihen Ihren Webseiten ein gemeinsames Grunddesign und ein einheitliches Erscheinungsbild, indem sie Farben, Schriftarten, Schaltflächen und Banner vorgeben. Origineller – aber auch unvergleichlich aufwendiger – ist es, ein Thema und eine eigene Symbolik zu entwickeln. Nehmen wir an, Sie haben ein privates Web erstellt, in dem Sie die Planeten unseres Sonnensystems vorstellen. Das Web hat den typischen Aufbau eines Webs der zweiten Generation: Der Besucher wird auf der Homepage begrüßt und kann über Schalter in der Hyperlinkleiste am linken Rand der Homepage zu den untergeordneten Webseiten der einzelnen Planeten verzweigen. Statt ein vordefiniertes FrontPage-Design auszuwählen, kreieren Sie ein eigenes Design. Das Thema dieses Designs ist das Thema Ihrer Website: die Planeten und der Sternenhimmel. So könnten Sie zum Beispiel als Hintergrundbild einen Sternenhimmel verwenden und die Textfarbe auf Weiß setzen.
213
Navigationsstrukturen für Webs Der nächste Schritt wäre, eine Symbolik für Ihre Website zu entwerfen. Eine passende Symbolik für das Planenten-Web wäre beispielsweise die Darstellung der Planeten, wie sie um die Sonne kreisen. Die Homepage könnte dann wie ein Blick vom All auf unser Sonnensystem aussehen. Durch Anklicken der Planenten gelangt man zu den untergeordneten Webseiten.
Hinweis
Betrachten wir noch ein weiteres Beispiel. Nehmen wir an, Sie sollen eine Website für einen Pizza-Service erstellen. Den Pizza-Dienst könnten Sie durch die Front eines kleinen, gemütlichen italienischen Restaurants darstellen. Die dargestellte Front muss nicht die reale Front des Pizza-Restaurants sein (die meisten Fassaden von Pizza-Restaurants wirken wenig heimelig). Überhaupt dürfte eine gemaltes Bild besser geeignet sein als ein Foto. Das gemalte Restaurant muss freundlich und einladend wirken, der Kunde soll bei seinem Anblick unwillkürlich das Gefühl haben, in diesem Restaurant gerne einmal essen zu gehen. Vor dem Restaurant könnte eine Tafel zu sehen sein, wie sie zum Anzeigen der Mittagsgerichte verwendet wird. Auf dieser Tafel könnten dann die Hyperlinks zu den untergeordneten Webseiten stehen. Die Entwicklung einer Symbolik ist wegen der Erstellung der benötigten Grafiken üblicherweise recht aufwendig. Ohne professionelle Software zur Grafikbearbeitung und zeichnerisches Talent ist es sehr schwierig, zu befriedigenden Lösungen zu kommen.
Navigationsstrukturen für Webs Besteht ein Web aus mehreren Webseiten ergibt sich automatisch die Notwendigkeit Navigationselemente bereitzustellen, mit deren Hilfe sich der Besucher von einer Webseite im Web zu anderen Webseite bewegen kann. Die häufigsten Navigationselemente sind einzelne Hyperlinks und Hyperlinkleisten (siehe Bild 3.8).
Hyperlinkleisten Nehmen wir an, Sie haben ein Web mit vier Seiten: der Homepage und drei untergeordneten Seiten A, B und C (siehe Bild 3.9).
214
Kapitel 3: Von der Webseite zum Web
Bild 3.8: Verschiedene Spielarten von Hyperlinkleisten
Bild 3.9: Aufbau des Webs Auf der Homepage wollen Sie eine Hyperlinkleiste einrichten, die Links zu den untergeordneten Seiten anbietet. Hierfür gibt es verschiedene Möglichkeiten. Die wichtigsten werden wir im Folgenden kurz durchgehen.
215
Navigationsstrukturen für Webs Einfache Texthyperlinks
Bild 3.10: Hyperlinkleiste aus Textlinks Texthyperlinks haben den Vorteil, dass sie wenig Arbeit machen und ohne zusätzliche Hilfsmittel eingerichtet werden können. 1. Tippen Sie an der Stelle, an der die Hyperlinkleiste angezeigt werden soll, die Titel der Hyperlinks ein. Für eine vertikale Hyperlinkleiste tippen Sie die Titel in einzelnen Zeilen untereinander ein, für eine horizontale Hyperlinkleiste tippen Sie die Titel nebeneinander, eventuell durch vertikale Striche (|) oder durch ein anderes Zeichen getrennt ein. Die Titel sollten aussagekräftig sein. (Meist sind die Hyperlinktitel gleich den Seitentiteln – oder gekürzten Versionen derselben.) 2. Verbinden Sie die Titel mit Hyperlinks (Befehl EINFÜGEN/HYPERLINK). 3. Falls gewünscht, können Sie die Hyperlinks besonders formatieren (Aufzählung, andere Schrift, andere Farbe etc.) Grafische Schaltflächen Aufwendiger wird es, wenn Sie die Links nicht als einfachen Text, sondern als grafische Schaltflächen einrichten wollen. Eine solche »Schaltfläche« besteht aus einer kleinen rechteckigen Grafik, die über den Befehl EINFÜGEN/HYPERLINK mit einem Hyperlink verbunden wird.
216
Kapitel 3: Von der Webseite zum Web
Bild 3.11: Hyperlinkleiste aus Schaltflächen Das Hauptproblem bei der Generierung solcher Navigationselemente liegt in der Erzeugung der Grafiken für die Schaltflächen. Am Besten bedient man sich hierzu spezieller Grafikprogramme, die die Bildformate GIF und JPEG unterstützen und mit denen man Übergänge glätten kann (Antialiasing). Aber eins nach dem anderen. Nehmen wir an Sie verwenden ein typisches Grafikprogramm wie zum Beispiel Paint Shop Pro (eine Demoversion des Programms kann man von http://www.jasc.com herunterladen). Dann könnten Sie wie folgt vorgehen: 1. Zuerst legen Sie ein neues, rechteckiges Bild an, das die Größe der gewünschten Schaltfläche hat. 2. Zeichnen Sie die Schaltfläche ohne Titel. Das Bild hat immer rechteckige Ausmaße. Das bedeutet aber nicht, dass Sie nur rechteckige Schaltflächen einzeichnen könnten. Sofern Ihr Grafikprogramm die Festlegung einer transparenten Farbe erlaubt, können Sie auch ovale, kreisrunde oder irgendwie anders geformte Schaltflächen erzeugen. Sie malen dazu einfach die Schaltfläche in ihrer gewünschten Form in die Leinwand. Danach füllen Sie den nicht genutzten Leinwandhintergrund in einer Farbe, die im Bild der Schaltfläche nicht vorkommt. Diese Farbe legen Sie schließlich als transparente Farbe fest. In Paint Shop Pro müssen Sie dazu mit dem Pipetten-Werkzeug auf die Farbe klicken. In der Farben-Werkzeugleiste wird dann der Index der Farbe angezeigt.
217
Navigationsstrukturen für Webs Wenn Sie die Bilddatei im GIF-Format speichern, geben Sie in den Speicher-Optionen den Index der Hintergrundfarbe als Index der transparenten Farbe an. 3. Speichern Sie die Bilddatei im GIF- oder im JPEG-Format. (Transparente Farben werden nur von GIF, nicht von JPEG, unterstützt.) 4. Für jede Schaltfläche erzeugen Sie nun eine Kopie und zeichnen den Titel für die Schaltfläche ein. Verfügt Ihr Grafikprogramm über eine Antialiasing-Funktion (Glätten), verwenden Sie diese für das Einzeichnen des Titels. Im Falle von Paint Shop Pro erscheint bei Gebrauch des Text-Werkzeuges ein Dialogfeld, in dem eine Antialiasing-Option angeboten wird.
Hinweis
Der Image Composer, den Microsoft zusammen mit dem FrontPage-Einzelpaket ausliefert, verfügt über einen speziellen Schaltflächen-Assistenten, der die Erstellung von Schaltflächen wesentlich vereinfacht.
Hinweis
5. Die erzeugten Schaltflächen können Sie wie normale Grafiken einfügen (Befehl EINFÜGEN/GRAFIK/AUS DATEI) und mit Hyperlinks verbinden (Befehl EINFÜGEN/HYPERLINK).
Hyperlinkleisten, die aus einzelnen Schaltflächen bestehen, haben zudem den Vorteil, dass man die Schaltflächen gut mithilfe von Java oder JavaScript animieren kann (Rollover-Effekte).
Image Maps Anstatt einzelne Schaltflächen einzurichten, kann man die gesamte Navigationsleiste als ein Bild erstellen und danach in FrontPage mit HotSpots für die einzelnen Links versehen (siehe Kapitel 2 »Hyperlinks«). Dieses Verfahren wird meist für horizontale Navigationsleisten verwendet.
218
Kapitel 3: Von der Webseite zum Web
Bild 3.12: Hyperlinkleiste aus Image Map FrontPage-Hyperlinkleisten
Bild 3.13: FrontPage-Hyperlinkleiste Schließlich stellt Ihnen FrontPage die Hyperlinkleisten-Komponente zur Verfügung.
219
Navigationsstrukturen für Webs Hyperlinkleisten zeichnen sich durch ansprechende Formatierung (als Schaltfläche) und automatische Aktualisierung aus. Maßgeblich für die Zusammensetzung der Hyperlinkleisten ist die Navigationsstruktur, die Sie in der Navigationsansicht von FrontPage anlegen (siehe unten). Zuerst sehen wir uns aber an, wie man Hyperlinkleisten einrichtet: 1. Setzen Sie die Einfügemarke an die Stelle, an der die Hyperlinkleiste angezeigt werden soll. 2. Rufen Sie den Befehl EINFÜGEN/WEBKOMPONENTE auf und wählen Sie den Eintrag HYPERLINKLEISTEN/LEISTE BASIERT AUF NAVIGATIONSSTRUKTUR. Klicken Sie auf WEITER. 3. Wählen Sie ein Design für die Hyperlinkleiste aus und klicken Sie auf WEITER. 4. Bestimmen Sie, ob die Links in der Hyperlinkleiste horizontal oder vertikal angeordnet werden sollen und klicken Sie auf FERTIG STELLEN. Es erscheint das Dialogfeld EIGENSCHAFTEN DER HYPERLINKLEISTE.
Bild 3.14: Hyperlinkleisten-Einstellungen
220
Kapitel 3: Von der Webseite zum Web 5. Legen Sie im Dialogfeld fest, für welche Ebenen und Seiten Hyperlinks angelegt werden sollen. Klicken Sie mit der rechten Maustaste auf die FrontPage-Komponente und rufen Sie im Kontextmenü den Befehl HYPERLINKLEISTENEIGENSCHAFTEN auf.
왘 Seite STIL. Hier können Sie ein Design für die Hyperlinks auswählen und festlegen, ob sie horizontal oder vertikal angeordnet werden sollen.
왘 Seite ALLGEMEIN. Hier wählen Sie aus, zu welchen Seiten die Hyperlinkleiste Hyperlinks anzeigen sollen. Sie wählen dabei keine speziellen Zielseiten aus, sondern Ebenen in Ihrer Webstruktur. Welche Seiten sich hinter den Hyperlinks verbergen, hängt von der jeweiligen Seite ab. Sie können für eine Hyperlinkleiste immer nur eine Ebene auswählen, lediglich die Homepage und die übergeordnete Seite können Sie zusätzlich aktivieren.
Für unser Beispiel markieren Sie die Option UNTERGEORDNETE EBENE und klicken auf OK. Hyperlinkleisten und Navigationsstruktur Maßgeblich für die Hyperlinkleisten ist nicht die Vernetzung der Webseiten durch Hyperlinks, sondern die von Ihnen eingerichtete Navigationsstruktur. Wenn Sie also beispielsweise ein Web mit Homepage und drei zusätzlichen Webseiten haben, die per Hyperlink von der Homepage aus erreichbar sind, und nun in der Homepage eine Hyperlinkleiste für die untergeordnete Ebene anlegen, könnten Sie ja davon ausgehen, dass die drei zusätzlichen Webseiten der Homepage untergeordnet sind und folglich bei der Anzeige der Homepage in einem Browser über die Hyperlinkleiste erreichbar sind. Dies ist allerdings falsch. Die Verknüpfung über Hyperlinkleisten beruht auf einer speziellen, in der Navigationsansicht einzurichtenden Navigationsstruktur. In unserem Beispiel wollen wir auf der Homepage eine Hyperlinkleiste mit Links zu den drei untergeordneten Webseiten anzeigen. Dazu richten wir jetzt in der Navigationsansicht die passende Struktur ein. (Normalerweise richtet man zuerst die Struktur und dann die Hyperlinkleisten ein.)
221
Navigationsstrukturen für Webs 1. Wechseln Sie in die Navigationsansicht und lassen Sie die Ordnerliste anzeigen (Befehl ANSICHT/ORDNERLISTE). 2. Per Drag&Drop ziehen Sie dann die Seiten, die Teil der Navigationsstruktur sein sollen, aus der Ordnerliste in die Navigationsstruktur. Während Sie die Seite mit der Maus verschieben, zeigt Ihnen eine gelbe Verbindungslinie an unter welcher Seite der Navigationsstruktur die neue Seite eingeordnet wird. Ziehen Sie zuerst die Homepage in die Ansicht. Ziehen Sie dann die drei untergeordneten Webseiten in die Struktur und achten Sie darauf, dass die Seiten der Homepage untergeordnet werden (Verbindungslinie von Homepage zu den Seiten).
Hinweis
3. Auf diese Weise ordnen Sie die Seiten in einer hierarchischen Struktur an. Die Ebenen dieser Struktur sind die Ebenen, die Sie im EIGENSCHAFTENDialog der Hyperlinkleisten-Komponente auswählen. Wenn Sie also wie in unserem Beispiel in der Navigationsansicht unter der Homepage eine untergeordnete Ebene mit drei Seiten einrichten und dann in die Homepage eine Hyperlinkleiste mit Links für die untergeordnete Ebene einfügen, erzeugt die FrontPage-Komponente auf der Homepage eine Hyperlinkleiste mit Schaltflächen für jede der drei untergeordneten Seiten.
Beachten Sie, dass Sie nicht alle Seiten des Webs in die Navigationsstruktur aufzunehmen brauchen, sondern nur die, für die in den FrontPage-Hyperlinkleisten Links angezeigt werden sollen.
Hinweis
Im Abschnitt »Webs verwalten« erfahren Sie mehr zu den Befehlen der Navigationsansicht.
222
Um eine bereits eingerichtete FrontPage-Hyperlinkleiste nachträglich mit einer anderen Ebene zu verbinden, klicken Sie mit der rechten Maustaste in die Komponente und rufen im Kontextmenü den Befehl HYPERLINKLEISTENEIGENSCHAFTEN auf.
Kapitel 3: Von der Webseite zum Web Erscheinungsbild in Browser Wenn Sie in einer Hyperlinkleiste eine bestimmte Ebene ausgewählt haben und diese Ebene für die aktuell in den Browser geladene Seite vorhanden ist, werden in der FrontPage-Hyperlinkleiste automatisch Hyperlinks zu allen Seiten dieser Ebene angezeigt. Gibt es aus Sicht der geladenen Seite die gewünschte Ebene nicht (wenn beispielsweise die untergeordnete Ebene eingeblendet werden soll, aber in der Navigationsstruktur keine untergeordnete Ebene für die Seite eingerichtet wurde), wird im Browser auch keine Hyperlinkleiste angezeigt. Schauen Sie sich die Navigationsstruktur aus Bild 3.15 an.
Bild 3.15: Die Navigationsstruktur
Hinweis
Nehmen wir an, Sie richten für dieses Web am oberen und linken Rand Hyperlinkleisten ein. Für die Hyperlinkleiste im oberen Bereich aktivieren Sie im EIGENSCHAFTEN-Dialog die Option GLEICHE EBENE und ÜBERGEORDNETE SEITE. Für die linke Hyperlinkleiste wählen Sie die Option UNTERGEORDNETE EBENE. Dann ergibt sich folgendes Bild. Die Hyperlinkleisten und Randbereiche wirken beeindruckender, wenn man Designs verwendet, die hier zur besseren Orientierung jedoch weggelassen wurden.
223
Navigationsstrukturen für Webs
Bild 3.16: Die Homepage Auf der Homepage entfallen die Schalter der Hyperlinkleiste am oberen Rand, da es weder Seiten der gleichen Ebene noch eine übergeordnete Seite gibt (siehe Bild 3.16). Auf der Seite Inhaltsverzeichnis sieht man Hyperlinks im oberen und im linken Bereich (siehe Bild 3.17). Auf der Seite Seitenplan sieht man nur im oberen Rand Hyperlinks zur Homepage und zur übergeordneten Seite.
Bild 3.17: Eine untergeordnete Seite
224
Kapitel 3: Von der Webseite zum Web
Navigation und Seitenaufbau Bisher haben wir uns nur angesehen, wie man Hyperlinkleisten aufbaut. Damit allein ist es jedoch nicht getan. Wir müssen entscheiden, wo auf den Webseiten die Hyperlinkleisten angezeigt werden sollen und welche Webseiten über Hyperlinkleisten mit welchen Links verfügen sollen. Hyperlinkleisten im Webdesign In unserem Beispiel ging es bisher nur um die Einrichtung einer Hyperlinkleiste, über deren Links der Webbesucher von der Homepage zu den untergeordneten Webseiten verzweigen kann. Worüber wir uns noch keine Gedanken gemacht haben, ist, wie der Besucher von den untergeordneten Seiten zurück zur Homepage kommt. Nun, man kann sich natürlich darauf verlassen, dass die Browser, die die Besucher verwenden, über einen Zurück-Schalter verfügen. Doch dies ist eher schlechter Stil. Besser ist es, einen einzelnen Hyperlink einzurichten, der von den untergeordneten Seiten zur Homepage zurückführt. Meist wird man aber bei einer Struktur wie im unserem Beispiel auch auf den untergeordneten Webseiten Hyperlinkleisten einrichten, über die der Besucher nicht nur zur Homepage, sondern auch direkt zu den anderen untergeordneten Webseiten springen kann (statt diese über die Homepage ansteuern zu müssen). Wenn Sie auch auf den untergeordneten Webseiten Hyperlinkleisten einrichten, sollten Sie an den Grundsatz denken, dass die einzelnen Webseiten eines Webs möglichst das gleiche Design und den gleichen Seitenaufbau haben sollten. Alle Webseiten sollten also grundsätzlich die gleichen Hyperlinkleisten an den gleichen Positionen aufweisen (beispielsweise eine vertikale Hyperlinkleiste am linken Rand und eine horizontale Hyperlinkleiste am Fuße der Seiten). Einheitliche Links Nehmen wir an, Sie statten alle vier Seiten unseres Beispielwebs mit einer vertikalen Hyperlinkleiste aus. Welche Links nehmen Sie in die einzelnen Hyperlinkleisten auf?
225
Navigationsstrukturen für Webs Eine Möglichkeit wäre, nur die Links zu den anderen Webseiten anzubieten. Die Hyperlinkleiste der Homepage enthielte dann Links zu den Seiten A, B und C, die Seite A enthielte Links zur Homepage und den Seiten B und C und so weiter. Eine derartige Bestückung der Hyperlinkleisten ist zwar möglich (sofern Sie keine FrontPage-Hyperlinkleisten verwenden), jedoch aus mehreren Gründen nachteilig:
왘 왘
Sie müssen jede Hyperlinkleiste extra anlegen.
왘
Der Webbesucher kann an der Hyperlinkleiste nicht ablesen, wo im Web er sich gerade befindet.
Der Webbesucher sieht auf jeder Webseite eine anders aufgebaute Hyperlinkleiste. Der Wiedererkennungseffekt geht verloren, der Aufbau ist verwirrend.
Hinweis
Aus diesen Gründen ist es allgemein üblich, in einer Hyperlinkleiste mit Links zu den Webseiten einer bestimmten Ebene stets alle Links anzuzeigen (einschließlich des Links auf die aktuelle Seite). Meist schließt man auch noch die Homepage oder die übergeordnete Seite ein. Nach diesem Prinzip arbeiten übrigens auch die FrontPageHyperlinkleisten. Wenn Sie im EIGENSCHAFTEN-Dialog einer Hyperlinkleiste eine Ebene auswählen, werden in der Leiste stets Links zu allen Seiten dieser Ebene angeboten (auch zur aktuellen Seite, falls diese Teil der Ebene ist). Zusätzlich können Sie einen Link zur Homepage und zur übergeordneten Seite anzeigen lassen.
Wie platziert man Hyperlinkleisten? Hyperlinkleisten werden selten frei in den Textfluss einer Webseite eingefügt. Stattdessen bedient man sich verschiedener Techniken, mit deren Hilfe man die Webseite in einzelne Bereiche aufteilen kann und sieht dabei spezielle Bereiche für die Hyperlinkleisten vor. Tabellen Das am häufigsten eingesetzte Mittel zur Gestaltung des Seitenaufbaus ist die Tabelle (siehe auch Kapitel 2). Obwohl das Anlegen einer Tabelle grundsätzlich keine große Schwierigkeit darstellt, kann die Ausarbeitung eines auf
226
Kapitel 3: Von der Webseite zum Web Tabellen basierenden Seitenlayouts recht arbeitsaufwendig werden. Die Zellen müssen angelegt und richtig verteilt werden, die Abmaße der Tabelle und der Zellen müssen festgelegt werden, eine Vielzahl von Design-Entscheidungen müssen getroffen werden (Rahmenstärke, Abstände zwischen den Zellen und zwischen Zellenrahmen und Zelleninhalt, Umbruch in Zellen etc.), eventuell bietet es sich an, den Inhalt der einen oder anderen Zelle mithilfe einer zweiten, inneren Tabelle aufzuteilen. Eine häufig eingesetzte Technik besteht darin, eine übergeordnete Tabelle für die grobe Seitenaufteilung zu verwenden und Zellen mit strukturiertem Inhalt durch eine innere Tabelle weiter aufzuteilen. So könnte man beispielsweise in einer Zelle, die eine Hyperlinkleiste beherbergen soll, mithilfe einer inneren Tabelle untergeordnete Zellen für die einzelnen Schaltflächen anlegen.
Bild 3.18: Verschachtelte Tabelle für Hyperlinkleiste Da Design und Seitenaufteilung in den Seiten des Webs grundsätzlich gleich sein sollte, empfiehlt sich folgende Vorgehensweise: 1. Setzen Sie eine Seite als Vorlage auf. Richten Sie in dieser Seite die Tabelle ein, arbeiten Sie das Design aus (Farben, Hintergrundgestaltung, Zuweisung eines FrontPage-Designs), setzen Sie den Inhalt für die Tabellenzel-
227
Navigationsstrukturen für Webs
Hinweis
len auf, deren Inhalt in den Seiten des Webs weitgehend unverändert bleibt (beispielsweise Banner in oberem Seitenbereich, Hyperlinkleisten an den Rändern). 2. Erstellen Sie die einzelnen Seiten des Webs, indem Sie die Vorlage kopieren und überarbeiten.
Die FrontPage-Webvorlage PERSÖNLICHES WEB (siehe Kapitel 5) arbeitet mit einem gemeinsamen Tabellenlayout für die einzelnen Webseiten.
Seite einschließen Wenn Sie Ihr Web mithilfe eines gemeinsamen Tabellenlayouts aufbauen, ist es gut möglich, dass bestimmte Zellen der Tabelle in allen (oder vielen Webseiten) den exakt gleichen Inhalt haben. Ein typisches Beispiel hierfür ist ein dreiteiliger Seitenaufbau mit einem oberen Bereich als Kopfzeile (Banner), einem linken Bereich für die Hyperlinkleiste (Inhaltsverzeichnis) und einem rechten Bereich für den eigentlichen Inhalt. Banner und Inhaltsverzeichnis bleiben bei einem solchen Seitenaufbau häufig gleich.
Bild 3.19: Dreiteiliger Seitenaufbau mithilfe einer Tabelle
228
Kapitel 3: Von der Webseite zum Web Um sich Arbeit zu sparen, können Sie wie im vorangehenden Abschnitt beschrieben vorgehen, das heißt, Sie kopieren die gleich bleibenden Zelleninhalte. Sollten aber nachträglich Änderungen an dem kopierten Banner oder Inhaltsverzeichnis erforderlich werden, müssen Sie die Änderungen dann doch in allen Webseiten einzeln vornehmen (oder Sie müssen die Zelleninhalte erneut kopieren). Aus diesem Grunde gibt es die Möglichkeit, Inhalte von Webseiten in andere Webseiten automatisch einfügen zu lassen. In FrontPage leistet dies die Webkomponente EINGESCHLOSSENERINHALT/SEITE. Wenn es in Ihrem Design also Tabellenzellen gibt, deren Inhalt in mehreren Webseiten gleich ist, können Sie wie folgt vorgehen: 1. Legen Sie eine neue Webseite an, in die Sie den Inhalt für die Tabellenzelle aufsetzen (genauso wie er in der Tabellenzelle angezeigt werden soll). 2. Speichern Sie die Webseite. 3. Wechseln Sie nacheinander in die Webseiten, in die Sie den Inhalt der soeben angelegten Webseite einfügen wollen, setzen Sie die Einfügemarke in die betreffende Tabellenzelle, rufen Sie den Befehl EINFÜGEN/WEBKOMPONENTE, wählen Sie den Eintrag EINGESCHLOSSENERINHALT/SEITE, klicken Sie auf FERTIG STELLEN und geben Sie im erscheinenden Dialog die einzufügende Webseite an. Frames Frames sind ein weiteres Mittel zur Gestaltung des Seitenaufbaus. Der Begriff »Seitenaufbau« ist hier jedoch nicht ganz richtig, denn mit Frames teilt man nicht wirklich Webseiten, sondern den Anzeigebereich des Webbrowsers auf. Wie dies geht und wie man Frames zur Gestaltung eines Webs nutzt, erfahren Sie im Abschnitt »Frames«. Randbereiche Eine Besonderheit von FrontPage ist die Einrichtung gemeinsamer Randbereiche. Randbereiche bieten im Vergleich zu Tabellen und Frames nur stark reduzierte Gestaltungsmöglichkeiten, sind aber extrem einfach einzurichten und zu verwalten und für viele Standardlösungen absolut ausreichend.
229
Navigationsstrukturen für Webs
Hyperlinkleisten und gemeinsame Randbereiche Mithilfe der FrontPage-Randbereiche können Sie den Seiten eines Webs schnell und bequem eine gemeinsame Seitenaufteilung zuweisen (und gleichzeitig noch FrontPage-Hyperlinkleisten und Seitenbanner einrichten).
Bild 3.20: Gemeinsame Randbereiche einrichten 1. Legen Sie die Randbereiche für das ganze Web fest. Rufen Sie dazu den Befehl FORMAT/GEMEINSAME RANDBEREICHE auf und aktivieren Sie die Option ANWENDEN AUF: ALLE SEITEN. Markieren Sie Optionen für die Ränder, für die Randbereiche angelegt werden sollen. 왘 Für die Ränder OBEN, LINKS und RECHTS können Sie, wenn Sie wollen, bereits in diesem Dialogfeld Hyperlinkleisten einrichten lassen.
왘 Wenn Sie für den oberen Rand die Option NAVIGATIONSSCHALT-
FLÄCHEN EINSCHLIESSEN markieren, wird neben der Hyperlinkleiste auch ein Seitenbanner eingefügt.
230
Kapitel 3: Von der Webseite zum Web
Bild 3.21: Randbereiche für Seite anpassen 2. Passen Sie die Randbereiche für einzelne Seiten an. Möchten Sie auf einer bestimmten Seite andere Randbereiche verwenden als Sie für das Web vorgegeben haben, laden Sie die Seite in den Editor und rufen Sie dann den Befehl FORMAT/GEMEINSAME RANDBEREICHE auf. Klicken Sie auf die Option ANWENDEN AUF: AKTUELLE SEITE. Klicken Sie dann die Ränder an, für die Sie auf dieser Seite Randbereiche verwenden wollen.
왘 Wenn Sie in der Ordner-Ansicht waren, als Sie den Befehl aufriefen,
können Sie über die Option AUSGEWÄHLTE SEITE(N) festlegen, dass die Einstellungen nur für die in der Ordner-Ansicht ausgewählten Seite(n) gelten soll.
3. Richten Sie die Randbereiche ein. Sie können die Randbereiche nach Belieben mit Text, Bildern, etc. füllen. Um nachträglich eine Hyperlinkleiste in einen Randbereich aufzunehmen, klicken Sie in den Randbereich, rufen Sie den Befehl EINFÜGEN/WEBKOMPONENTE auf und wählen Sie den Eintrag HYPERLINKLEISTEN/LEISTE BASIERT AUF NAVIGATIONSSTRUKTUR auf.
231
Frames
Frames Eine der goldenen Regeln zum Design mehrseitiger Webs lautet: »Dem Besucher die Orientierung durch einheitlichen Aufbau der Seiten erleichtern.« Diese Regel muss natürlich nicht sklavisch befolgt werden, aber man sollte Sie im Hinterkopf haben und – wo es sinnvoll ist – auch beherzigen. Verschiedene Mittel zur Einrichtung eines einheitlichen Aufbaus haben Sie ja bereits kennen gelernt:
왘 왘 왘
Designs Randbereiche Hyperlinkleisten
In diesem Kapitel werden Sie nun noch eine weitere, sehr mächtige Option kennen lernen: die Frames.
Wozu braucht man Frames? Frames dienen dazu, ein Webdokument – oder aus Perspektive des Lesers: den Anzeigebereich im Browser – aufzuteilen. Wozu kann man dieses Konzept verwenden und wie funktioniert es? Frameseiten, Frames und Webseiten Der wichtigste Punkt ist, dass die einzelnen Bereiche eines Frame-Dokuments selbst vollständige Webseiten sind. Während bisher die einzelnen Seiten unserer Webs stets den ganzen Anzeigebereich des Browsers ausfüllten, werden die einzelnen Seiten nun in die Frames der Frameseite eingeblendet. Die Frameseite Die Frameseite ist das übergeordnete Dokument, das als Erstes in den Browser geladen wird. Es handelt sich dabei um ein gewöhnliches HTML-Dokument, nur dass es keinen Text enthält, sondern die Definition der einzelnen Bereiche, in die der Browser aufgeteilt werden soll – die Frames. Um eine neue Frameseite anzulegen, rufen Sie den Befehl DATEI/NEU/ SEITE ODER WEB auf, klicken im Aufgabenbereich auf den Eintrag SEITENVORLAGEN und wechseln im gleichnamigen Dialogfeld zur Registerseite
232
Kapitel 3: Von der Webseite zum Web FRAMESEITEN, wo Sie eine Vorlage auswählen – die Aufteilung der Vorlagenseite kann man in der Vorschau des Dialogfelds begutachten.
Bild 3.22: Frameseite mit vier Frames In der Ansicht HTML DER FRAMESEITE kann man sich den Code zur Aufteilung der Seite in Frames anschauen (einschließlich des alternativen Texts, der in Browsern angezeigt wird, die keine Frames unterstützen): <noframes>
233
Frames
Diese Seite verwendet Frames. Frames werden von Ihrem Browser aber nicht unterstützt.
Die Frames Die Frames definieren die einzelnen Bereiche, in die die Frameseite aufgeteilt wird. Die grundlegende Aufteilung der Frameseite in Frames wird bereits im Dialogfeld SEITENVORLAGEN festgelegt. Klicken Sie dort auf die einzelnen Framevorlagen und schauen Sie sich im Bereich VORSCHAU an, welche Frames in der Vorlage definiert sind. Nach Anlegen der Frameseite können Sie die Aufteilung jederzeit noch durch Einrichtung neuer und Löschen bestehender Frames oder durch Verändern der Framegrößen anpassen. Der letzte Schritt besteht dann darin, jedem Frame die Webseite zuzuordnen, die anfänglich in seinen Bereich angezeigt werden soll. Die Seiten Jedem Frame wird eine Startseite zugewiesen, die beim Laden der Frameseite in dem betreffenden Frame angezeigt wird. Sie brauchen dazu nur in der Normal-Ansicht auf einen der Schalter STARTSEITE FESTLEGEN oder NEUE SEITE zu klicken. Aber auch Zielseiten von Hyperlinks (siehe Kapitel 3) können Frames zugewiesen werden.
Wofür werden Frames eingesetzt? Mithilfe der Frameseiten können Sie den Anzeigebereich des Browsers in mehrere Kompartimente aufteilen. Wie Sie mittlerweile wissen, geschieht dies durch Aufteilung der Frameseite in Frames, in die dann einzelne Webseiten geladen werden.
왘
Frameseiten stellen daher eine Möglichkeit dar, mehrere Webseiten gleichzeitig in einem Browser anzuzeigen.
왘
Innerhalb eines Frames wird immer genau eine Seite angezeigt. Anfangs ist dies die Startseite des Frames, die bereits in der Definition
234
Kapitel 3: Von der Webseite zum Web des Frames festgelegt ist. Frames können die anzuzeigenden Seiten aber dynamisch zugewiesen werden – indem man die Zielseiten von Hyperlinks in Frames umlenkt.
왘
Die Größe der Frames kann entweder fest und unveränderlich vorgegeben oder als »veränderbar« definiert werden, so dass sie vom Leser durch Verschieben der Rahmenelemente angepasst werden kann.
Dieses Konzept eröffnet dem Webautor eine ganze Reihe von Gestaltungsmöglichkeiten: Zweiteilung Teilen Sie die Frameseite in zwei, drei oder mehrere gleichberechtigte Frames, wenn Sie dem Besucher die Möglichkeit einräumen wollen, mehrere Texte (oder mehrere Textstellen eines Dokuments) gleichzeitig betrachten zu können. Hyperlinks sind ein probates Mittel, um schnell und bequem von einem Dokument zum nächsten oder zwischen Textstellen eines Dokuments hin und her zu springen. Will man aber verschiedene Textstellen direkt vergleichen oder gleichzeitig im Auge behalten, ist selbst das Hin- und Herschalten mit Hyperlinks zu unbequem – ganz abgesehen davon, dass Hyperlinks vom Autor vorgegeben werden und nicht immer an den Stellen vorhanden sind, wo der Leser sie sich wünschen würde. Nehmen Sie an, Sie veröffentlichen im Web einen Artikel über den »Zeitlichen Verlauf des Abbaus von Arzneimitteln im menschlichen Organismus«, in dem Sie unter anderem auch auf die Halbwertszeiten der verschiedenen Vitamine eingehen und die Frage erörtern, ob es sinnvoll ist, Vitamin C in teuren Kapseln einzunehmen, nur weil dies eine über den Tag verteilte Abgabe versprechen. Zur Stützung Ihrer These richten Sie Hyperlinks zu anderen Artikeln ein, die das gleiche Thema behandeln. Bei einer einfachen Webseite ohne Frames würde ein Klick auf einen solchen Hyperlink dazu führen, dass Ihre Webseite verschwindet und der neue Artikel geladen wird. Wenn Sie dagegen Frames verwenden, können Sie in einem Frame Ihr Dokument und in dem anderen Frame die Zielseiten der Hyperlinks Ihres Dokuments anzeigen (wie dies geht, erfahren Sie auf den folgenden Seiten).
235
Frames Wenn Sie dem Leser dann noch ermöglichen, den Rahmen zwischen beiden Frames nach Belieben zu verschieben, wird das Studium Ihres Artikels zu einem ungetrübten Erlebnis.
Achtung
Als Ausgangspunkt für eine solche Webseite eignen sich die Framevorlagen HORIZONTALE TEILUNG oder VERTIKALE TEILUNG. Beachten Sie, dass dies allerdings keine gute Möglichkeit ist, einen zweispaltigen Text wie in einem Magazin anzuzeigen – verwenden Sie in solchen Fällen Tabellen.
Inhaltsverzeichnis Frames werden häufig zur Einrichtung von Inhaltsverzeichnissen verwendet. Welchen Vorteil bietet es, das Inhaltsverzeichnis in einem Frame anzubieten, statt einfach an den Anfang des Dokuments zu stellen? Nun, die Antwort liegt natürlich auf der Hand: das Inhaltsverzeichnis bleibt in seinem eigenen Frame ständig sichtbar, während die Texte, die nach einem Klick auf einen Hyperlink des Inhaltsverzeichnisses geladen werden, in einem eigenen Frame angezeigt werden. Die Website aus Bild 3.23 präsentiert eine kleine Gedichtesammlung. Die einzelnen Gedichte werden links im Inhaltsverzeichnis nach Dichtern aufgeführt, die Texte werden im rechten Frame angezeigt. Als Ausgangspunkt für eine solche Webseite eignen sich die Framevorlagen INHALTSVERZEICHNIS oder NAVIGATIONSFRAME OBEN UND UNTEN MIT INHALTSVERZEICHNIS. Titel, Banner, Fußnoten Mittels Frames kann der Anzeigebereich in statische und dynamische Teile aufgeteilt werden. Ein statischer Bereich wäre dabei ein Frame, dessen Seite sich nicht ändert – beispielsweise ein Titel oder Banner, ein Inhaltsverzeichnis, eine Schalterleiste, eine Fußnote. Die eigentliche Information, die Textseiten und Zielseiten der Hyperlinks, wird in einem eigenen Frame angezeigt.
236
Kapitel 3: Von der Webseite zum Web
Bild 3.23: Frame als Inhaltsverzeichnis
Bild 3.24: Frames für Banner und Fußnote 237
Frames Bild 3.24 zeigt die Erweiterung des obigen Beispiels um Titel- und Fußleiste.
Hinweis
Als Ausgangspunkt für eine solche Webseite eignen sich die Framevorlagen NAVIGATIONSFRAME OBEN, NAVIGATIONSFRAME UNTEN, NAVIGATIONSFRAME OBEN UND UNTEN MIT INHALTSVERZEICHNIS oder TOP-DOWNHIERACHIE.
Dies ist eine gute Alternative zur Einrichtung von Hyperlinkleisten und Randbereichen.
Top-Down Teilen Sie den Anzeigebereich einfach von oben nach unten auf, beispielsweise in 1. Schalterleiste 2. Titel und Banner 3. Text Als Ausgangspunkt für eine solche Webseite eignet sich die Framevorlage TOP-DOWN-HIERACHIE.
Probleme mit Browsern ohne Frame-Unterstützung Probleme gibt es vor allem bei Verwendung älterer Browser, die keine eingebaute Frame-Unterstützung implementiert haben. Sie sollten daher auf alle Fälle eine alternative Anzeige vorsehen, die in älteren Browsern statt der Frames angezeigt wird. Wo definiert man die alternative Anzeige? Natürlich im HTML-Code der Frameseite. Diese enthält nämlich neben der Definition der Frame-Bereiche auch noch einen ganz normalen Abschnitt. In diesem Abschnitt können Sie einen alternativen Seiteninhalt vorsehen, der nur in Browsern angezeigt wird, die mit der Frame-Definition nichts anfangen können. Natürlich brauchen Sie den alternativen Seiteninhalt nicht in Form von HTML-Code einzugeben. Wechseln Sie einfach im Editor zur Ansicht OHNE FRAMES. Dort können Sie die Seite ganz normal bearbeiten.
238
Kapitel 3: Von der Webseite zum Web
Frames einrichten Haben Sie die Vorteile der Frames überzeugt? Dann überlegen Sie sich doch, ob Sie für Ihre nächste Website nicht eine Frameseite als Homepage verwenden wollen? Die folgende Ausführung zeigt Ihnen am Beispiel der »Gedichtesammlung«, wie dies geht: Die Gedichtesammlung besteht einfach aus den verschiedenen Quelltexten der Gedichte:
und der Homepage index.htm. Ausgangspunkt für die Nachstellung der Website ist ein neues, leeres Web.
Bild 3.25: Auswahl einer Framevorlage
239
Frames 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf, klicken Sie im Aufgabenbereich auf den Eintrag SEITENVORLAGEN und wechseln Sie im Dialogfeld SEITENVORLAGEN zur Seite FRAMESEITEN. 2. Doppelklicken Sie auf die Vorlage NAVIGATIONSFRAME OBEN UND UNTEN MIT INHALTSVERZEICHNIS. (Das Ergebnis sehen Sie in Bild 3.22.) 왘 Wenn Sie Frameseiten verschachteln wollen, markieren Sie vor Aufruf des Dialogfelds SEITENVORLAGEN im Editor den Frame, in den die neue Frame-Seite eingefügt werden soll, und achten Sie darauf, dass im Dialogfeld die Option IM AKTUELLEN FRAME ÖFFNEN gesetzt ist. 3. Richten Sie die Startseiten der Frames ein. Klicken Sie einfach in dem jeweiligen Frame auf einen der Schalter STARTSEITE FESTLEGEN oder NEUE SEITE. Über den Schalter STARTSEITE FESTLEGEN können Sie bereits angelegte Seiten laden oder eine neue anlegen. Über den Schalter NEUE SEITE legen Sie direkt eine neue Seite an. 왘 Für die Seite des oberen Frames wählen Sie ein passendes Hintergrundbild aus (das Sie zuvor im Image Composer oder einem anderen Grafikeditor angelegt oder eingescannt haben).
왘 Für die Seite des linken Frames tippen Sie das Inhaltsverzeichnis ein
(formatiert als DEFINIERTER BEGRIFF und DEFINITION; Leerzeilen zur Trennung der einzelnen Dichter fügen Sie nachträglich mithilfe der (¢)-Taste ein). Die Hyperlinks richten wir in Schritt 5 ein.
왘 Im rechten Frame werden die Gedichte selbst angezeigt – also die
Zielseiten der Hyperlinks aus dem Inhaltsverzeichnis. Wir wollen aber trotzdem eine Startseite vorsehen, die angezeigt wird, solange noch kein Gedicht ausgewählt wurde. Legen Sie eine neue Seite fest und tippen Sie einen kleinen Begrüßungstext ein.
왘 Auf der Seite des unteren Frames geben Sie eine kleine Fußnote an und hinterlassen Ihre E-Mail.
4. Passen Sie die einzelnen Frames an. Im Einzelnen sollten Sie: 왘 Festlegen, welche Rahmenelemente verschiebbar sind. Damit der Besucher ein Rahmenelement in seinem Browser mit der Maus verschieben kann, müssen für die Frameeigenschaften (Aufruf über gleichnamigen Befehl im Kontextmenü des Frames) der beiden angrenzenden Frames die Option GRÖSSE IM BROWSER VERÄNDER-
240
Kapitel 3: Von der Webseite zum Web gesetzt sein. In unserem Beispiel entspricht die Voreinstellung ziemlich genau unseren Wünschen: verschiebbar ist nur der Rahmen zwischen rechtem und linkem Frame. BAR
왘 Die Größe der Frames anpassen. Dies betrifft in unserem Beispiel
vor allem die Höhe des oberen Frames. Verschieben Sie einfach den unteren Rahmen des Frames bis dieser optimal zum verwendeten Banner oder Titel passt.
5. Richten Sie die Hyperlinks ein. Wird ein Hyperlink innerhalb eines Frames aufgerufen, stellt sich immer die Frage, in welchem Frame die Zieldatei des Hyperlinks angezeigt werden soll. In unserem Beispiel stehen die Hyperlinks beispielsweise im Inhaltsverzeichnis (also im linken Frame), die Zieldateien sollen aber im rechten Frame angezeigt werden. Den Zielframe können Sie für jeden Hyperlink individuell angeben, Sie können aber auch einen Standard-Zielframe für alle Hyperlinks eines Frames definieren:
왘 Rufen Sie im Kontextmenü des linken Frames den Menübefehl SEITENEIGENSCHAFTEN
auf und gehen Sie zur Registerseite ALLGE-
MEIN.
왘 Klicken Sie dort auf das kleine Schaltsymbol rechts neben dem Feld STANDARDZIELFRAME.
왘 Im Dialogfeld ZIELFRAME klicken Sie einfach im Feld AKTUELLE FRAMESEITE auf den gewünschten Zielframe oder geben Sie im Eingabefeld darunter den Namen des Frames an (der Name kann im Dialogfeld FRAMEEIGENSCHAFTEN nachgesehen und geändert werden). Für den linken Frame ist als Zielframe bereits der rechte Frame (Hauptframe) eingestellt, was genau unseren Wünschen entspricht.
왘 Richten Sie mithilfe des Befehls EINFÜGEN/HYPERLINK die Hyperlinks ein.
6. Setzen Sie eine alternative Darstellung auf. Denken Sie daran, dass nicht alle auf dem Markt vorhandenen Browser Frames unterstützen. Wechseln Sie daher zur Ansicht OHNE FRAMES und bearbeiten Sie hier den Inhalt der Frameseite, wie er in Browsern ohne Frame-Unterstützung angezeigt wird.
241
Frames
Frames anpassen Nicht immer findet man im Dialogfeld SEITENVORLAGEN auf der Seite FRAMES eine passende Framevorlage. Dann wählt man einfach die Vorlage aus, die den eigenen Vorstellungen am nächsten kommt und passt im Editor die Frame-Aufteilung der neuen Frameseite den eigenen Wünschen an. Die Frame-Aufteilung anpassen In ungefähr 90 Prozent aller Fälle dürften Sie in den Framevorlagen von FrontPage eine passende Frame-Aufteilung für Ihre Website finden. Dann müssen Sie nur die Größe einzelner Frames anpassen (und vielleicht andere Zielframes für die Hyperlinks der verschiedenen Frames festlegen). In den restlichen Fällen müssen Sie eigene Frames anlegen oder bestehende Frames löschen. Framegröße verändern
Hinweis
Im Editor können Sie die Größen der Frames einfach durch Verschieben der Rahmenelemente anpassen. Bewegen Sie einfach den Mauszeiger über das jeweilige Rahmenelement, bis der doppelköpfige Pfeil erscheint, und verschieben Sie dann das Rahmenelement mit gedrückter Maustaste. Im Browser können die Rahmenelemente auf die gleiche Weise verschoben werden, allerdings nur wenn für die an den Rahmen angrenzenden Frames festgelegt ist, dass ihre Größe im Browser verändert werden darf. Sie selbst legen das im Dialogfeld FRAMEEIGENSCHAFTEN (Aufruf über gleichnamigen Befehl im Kontextmenü des Frames) durch Aktivieren oder Deaktivieren der Option GRÖSSE IM BROWSER VERÄNDERBAR fest.
Framegröße in Pixeln angeben Wenn Sie allerdings Bilder formatfüllend in einem Frame anzeigen wollen, bietet es sich in jedem Fall an, die Framegröße bis auf den Pixel genau auf die Größe des Bildes zu setzen. In diesem Fall klicken Sie mit der rechten Maustaste in den Frame und rufen im Kontextmenü den Befehl FRAMEEIGENSCHAFTEN auf. Im gleichnamigen Dialogfeld können Sie dann die FRAMEGRÖSSE in Pixeln eingeben.
242
Kapitel 3: Von der Webseite zum Web
Bild 3.26: Framegröße festlegen Framegröße relativ zu anderen Frames angeben Oftmals bietet es sich an, über- oder nebeneinander liegende Frames relativ zueinander zu dimensionieren. In solchen Fällen wählen Sie als Einheiten für die Framebreite oder -höhe die Option RELATIV und geben dann als Maß den Anteil des Frames an der Gesamtbreite oder -höhe an. Wenn Sie beispielsweise die Höhe der drei Frames der Top-Down-Vorlage im Verhältnis 1:2:5 aufteilen wollen, setzen Sie die Höhe der Frames auf 1, 2 bzw. 5 und die Einheit jeweils auf Relativ. Die Gesamthöhe der Anzeige wird dann durch die Anzahl der Teile (1+2+5 = 8) geteilt und auf die Frames aufgeteilt (1/8, 2/8 und 5/8). Framegröße in Prozent angeben Schließlich können Sie Breite und Höhe der Frames auch in Prozent des Anzeigebereichs angeben.
243
Achtung
Frames
Framegröße und Größe des Anzeigebereichs Vergessen Sie bei der Größenänderung nicht, dass die Größe der Frameseite (und damit auch die Größe der Frames, die ja immer den ganzen Bereich der Frameseite ausfüllen) an die Größe des Anzeigebereichs des Browsers angepasst wird. Die automatische Anpassung der Frames an die Größe des Anzeigebereichs hat dabei notfalls Vorrang vor den von Ihnen vorgegebenen Abmaßen. Eine direkte Konsequenz daraus ist, dass Frames, die sich über die ganze Breite (Höhe) der Frameseite ausdehnen, nicht in Ihrer Breite (Höhe) eingestellt werden können.
Neue Frames einfügen Neue Frames können Sie einfügen, indem Sie bestehende Frames teilen. Um einen Frame zu teilen, drücken Sie einfach die (Strg)-Taste und ziehen Sie eines der Rahmenelemente des Frames nach innen. Das Teilen ist an sich eine komfortable Methode, bringt aber einige Besonderheiten mit sich, die es zu beachten gilt. Betrachten Sie beispielsweise Bild 3.27.
Bild 3.27: Zeile einfügen (1)
244
Kapitel 3: Von der Webseite zum Web Um in Bild 3.27 den oberen Frame zu teilen, brauchen Sie nur den oberen Rand des derzeit oberen Frames bei gedrückter (Strg)-Taste nach unten in den Frame zu ziehen.
Bild 3.28: Zeile einfügen (2) Frames löschen Um einen Frame zu löschen, klicken Sie in den Frame, um ihn zu markieren, und rufen Sie dann den Befehl FRAME/LÖSCHEN im Menü FRAMES auf. Frames konfigurieren Sind die Frames eingerichtet, werden Sie entsprechend ihres Verwendungszwecks konfiguriert und mit einer Startseite verbunden.
왘
Die wichtigsten Einstellungen zu den Frames finden Sie im Dialogfeld FRAMEEIGENSCHAFTEN (Aufruf über das Kontextmenü des Frames oder den Menübefehl FRAMES/FRAMEEIGENSCHAFTEN).
왘
Über den Schalter FRAMESEITE im Dialogfeld FRAMEEIGENSCHAFTEN) gelangen Sie in das Dialogfeld SEITENEIGENSCHAFTEN, das Sie schon aus Kapitel 2 kennen, und das hier um die Seite FRAMES erweitert wurde. Die restlichen Seiten dienen der Konfiguration der alternativen Darstellung der Frameseite.
왘
Den Inhalt der Frames konfigurieren Sie über die Seiteneigenschaften der Startseiten der Frames (Hintergrundbild, Ränder etc.)
245
Frames
Bild 3.29: Die Frameeigenschaften Um nun die Eigenschaften eines bestimmten Frames anzupassen, klicken Sie in den Frame (um ihn zu markieren) und rufen den Befehl FRAMEEIGENSCHAFTEN auf (entweder über das Kontextmenü oder das Menü FRAMES). Fest oder verschiebbar? Im FrontPage-Editor können Sie alle Rahmenelemente mit der Maus verschieben, um die Größen der Frames anzupassen. Ob dies auch noch bei der Anzeige der Webseite im Browser so ist, hängt von Ihnen ab. Nicht veränderbare Größe Meist wird man die Größe von Frames, die rein grafischen Inhalts sind – wie Titelbanner, Schaltleisten, Abbildungen, als unveränderlich vorgeben. Für solche Frames deaktivieren Sie im Dialogfeld FRAMEEIGENSCHAFTEN, die Option GRÖSSE IM BROWSER VERÄNDERBAR. Wenn Sie sicher sind, dass die Framegröße zum Anzeigen des ganzen Inhalts der zugehörigen Webseite ausreicht, können Sie für das Feld BILDLAUFLEISTEN die Option NIE auswählen. Ist der Bereich bewusst zu klein gewählt, sollten Sie die Option IMMER einstellen (beispielsweise für eine Schalterleiste, die zu lang ist, um sie vollständig einzublenden. Meist werden Sie es aber bei der Vorgabe FALLS ERFORDERLICH belassen.
246
Achtung
Kapitel 3: Von der Webseite zum Web
Aber Achtung! Diese Einstellung bedeutet nur, dass die Rahmenelemente des Frames bei der Anzeige in einem Browser nicht verschoben werden können. Es bedeutet nicht, dass sich die Größe des Frames nicht ändert, wenn der Anwender den ganzen Anzeigebereich des Browser vergrößert oder verkleinert. Dazu müssen Sie die Größe des Frames zusätzlich in Pixel definieren. (Eine Garantie ist dies aber auch nicht, da die Frames ja zusammen den Anzeigebereich des Browsers ausfüllen müssen.) Und nochmals Achtung! Wird die Größe eines Frames als nicht veränderbar eingestellt, bedeutet dies, dass seine Rahmenelemente nicht im Browser verschoben werden können. Dies betrifft dann aber natürlich auch die angrenzenden Frames.
Veränderbare Größe Möchten Sie, dass der Besucher die Größe eines Frames anpassen kann – beispielsweise um den darin angezeigten Text besser lesen zu können, legen Sie fest, dass die Größe des Frames veränderbar ist. Setzen Sie im Dialogfeld FRAMEEIGENSCHAFTEN die Option GRÖSSE IM BROWSER VERÄNDERBAR. Aber Achtung! Betrachten Sie Bild 3.30.
Bild 3.30: Verschiebbare Rahmen
247
Frames Wenn Sie in diesem Beispiel die Größe des linken Frames (Inhaltsverzeichnis) als nicht veränderbar einrichten, den rechten Frame aber als veränderbar, damit der Besucher den Anzeigebereich für die Gedichte vergrößern kann, haben Sie sich einen Bärendienst erwiesen. Denn wie soll der Besucher den rechten Frame vergrößern, wenn nicht auf Kosten des linken Frames – also durch Verschieben des Rahmens zwischen den beiden Frames. Dieses Rahmenelement ist aber fest, weil es zum linken Frame gehört, dessen Größe nicht veränderbar ist. Sie müssen also auch die Größe des linken Frames als veränderbar einstellen, wenn Sie nicht wollen, dass der Besucher den Anzeigebereich nur durch Vergrößern des Browserfensters anpassen kann. Bildlaufleisten Insbesondere für Frames fester Größe kann es interessant sein, die Einblendung von Bildlaufleisten zu steuern. Im Dialogfeld FRAMEEIGENSCHAFTEN stehen Ihnen dazu im Feld BILDLAUFLEISTEN drei Optionen zur Verfügung:
왘 왘 왘
FALLS ERFORDERLICH NIE IMMER
Die Startseite festlegen Die wichtigste Aufgabe ist natürlich die Festlegung der Startseite. Dazu geht man üblicherweise nicht über das Dialogfeld FRAMEEIGENSCHAFTEN – dazu drückt man einfach auf einen der passenden Schalter in den Frames (siehe Bild 3.22). Wenn Sie aber nachträglich eine andere Startseite vorgeben wollen, dann sind Sie im Dialogfeld FRAMEEIGENSCHAFTEN richtig. Über das Feld STARTSEITE, bzw. den Schalter DURCHSUCHEN, können Sie die Startseite wechseln. Rahmen anzeigen Wenn Sie die Frames nur zum internen Aufbau der Seite verwenden wollen, schalten Sie die Anzeige der Rahmenelemente einfach ab. Rufen Sie den Befehl FRAMES/FRAMEEIGENSCHAFTEN auf, klicken Sie im erscheinenden Dialogfeld auf den Schalter FRAMESEITE und deaktivieren Sie auf der Seite FRAMES die Option RAHMEN ANZEIGEN.
248
Hinweis
Kapitel 3: Von der Webseite zum Web
Auf der gleichen Seite können Sie auch den Abstand zwischen den Frames vorgeben. Die meisten Browser unterstützen diese Option allerdings nicht. Wenn Sie die Rahmenelemente ausgeblendet haben, können Sie diese Option aber nutzen, um sich die Grenzen der Frames in der Normal-Ansicht des Editors anzeigen zu lassen.
Frames und Hyperlinks – ein Kapitel für sich Mittlerweile haben Sie Ihre Homepage auf der Basis einer Frameseite erstellt, Sie haben die einzelnen Startseiten zu den Frames aufgesetzt, die Hyperlinks zu weiteren Seiten Ihres Webs eingerichtet, eine Liste mit interessanten Hyperlinks zu Webseiten anderer Websites erstellt. Haben Sie sich dabei Gedanken darüber gemacht, was geschieht, wenn innerhalb eines Frames auf einen Hyperlink geklickt wird? Natürlich wird die entsprechende Webseite geladen, doch wo wird die Seite angezeigt? Wie üblich im Anzeigebereich des Browsers – statt der Frameseite? In dem gleichen Frame, in dem der Hyperlink steht? In einem anderen Frame? Hier besteht offensichtlich Definitionsbedarf. Und es ist auch klar, dass man hier ein flexibles System braucht, denn je nach Konzept einer Frameseite, möchte man manchmal, dass die Zielseite eines Hyperlinks im gleichen Frame, in einem anderen Frame oder statt der Frameseite angezeigt wird. Im Falle unserer Gedichtesammlung sollen beispielsweise die Zieldateien der Hyperlinks im Inhaltsverzeichnis in den rechts daneben gelegenen Frame geladen werden. Man könnte es nun so einrichten, dass man für jeden Hyperlink explizit einen Zielframe angeben kann. Für Frames mit zwanzig bis dreißig Hyperlinks, die alle den gleichen Zielframe haben, wäre dies allerdings ein äußerst zeitaufwendiges Verfahren. FrontPage erlaubt daher ein dreistufiges Konzept, wobei Einstellungen auf unteren Ebenen die Einstellungen auf höheren Ebenen ersetzen.
249
Frames
Ebene
Einstellung in
Beschreibung
1. Ebene - die Frameseite
Befehl FRAMES/FRAMEEIGENSCHAFTEN, SCHALTER FRAMESEITE, Seite ALLGEMEIN, Option STANDARDZIELFRAME
Gibt einen Zielframe für alle Hyperlinks der Frameseite vor – unabhängig davon, in welchem Frame der Hyperlink steht.
2.Ebene - der Frame
Befehl DATEI/EIGENSCHAFTEN, Seite ALLGEMEIN
Gibt einen Zielframe für alle Hyperlinks der Seite (und damit des Frames) vor. Erst verfügbar, wenn eine Seite für den Frame eingerichtet wurde. Beachten Sie, dass für die Frames der FrontPage-Vorlagen teilweise bereits Zielframes vorgesehen sind.
3.Ebene - der Hyperlink
Befehl EINFÜGEN/HYPERLINK, Schalter ZIELFRAME
Weist dem jeweiligen Hyperlink einen Zielframe zu.
Tabelle 3.2: Zielframe festlegen Haben Sie das System verstanden? Geld oder Liebe?-Moderator Jürgen von der Lippe würde jetzt die Reihen seiner verängstigten Zuschauer durchgehen und fragen: Frage Angenommen Sie haben auf Ebene 1 nichts eingestellt, auf Ebene 2 für Frame 1 den Frame 3 festgelegt und richten nun einen Hyperlink in Frame 1 ein. Sie weisen dem Hyperlink keinen expliziten Zielframe zu. Wo wird die Zieldatei des Frames angezeigt? Antwort Richtig, in Frame 3. Frage Angenommen Sie haben auf Ebene 1 festgelegt, dass der Zielframe gleich dem Ursprungsframe ist, auf Ebene 2 haben Sie für Frame 1 den Frame 3 als 250
Kapitel 3: Von der Webseite zum Web Zielframe festgelegt und richten nun einen Hyperlink in Frame 2 ein. Sie weisen dem Hyperlink keinen expliziten Zielframe zu. Wo wird die Zieldatei des Frames angezeigt? Antwort Richtig, in Frame 2. Frage Und wenn der Hyperlink im Frame 1 liegen würde? Antwort
Hinweis
Richtig, in Frame 3 Hyperlinks in Image Maps Auch die Hyperlinks eines Bildes können einem gemeinsamen Zielframe zugewiesen werden. Das Dialogfeld BILDEIGENSCHAFTEN (Aufruf über den gleichnamigen Befehl im Kontextmenü des Bildes) enthält dafür auf der Seite ALLGEMEIN ebenfalls ein Feld ZIELFRAME.
Zielframe festlegen Unabhängig davon, ob Sie den Zielframe für die ganze Frameseite, einen einzelnen Frame oder einen bestimmten Hyperlink festlegen – der Weg führt immer über das Dialogfeld ZIELFRAME. 1. Rufen Sie einen der Befehle aus Tabelle 3.2 auf – je nachdem, für welche Ebene Sie einen Zielframe einrichten möchten. 2. Klicken Sie gegebenenfalls auf das kleines Schaltsymbol neben dem Feld STANDARDZIELFRAME. 3. Wählen Sie jetzt den Zielframe aus. Dazu haben Sie verschiedene Möglichkeiten: 왘 Sie können im Feld AKTUELLE FRAMESEITE einen Zielframe durch Anklicken auswählen (nicht verfügbar, wenn Sie einen Zielframe für die ganze Frameseite vorgeben möchten).
왘 GLEICHER FRAME (_self). Zielframe ist der gleiche Frame, in dem der Hyperlink definiert ist.
251
Webs verwalten
왘 GANZE SEITE (_top). Diese Option ist interessant, wenn Sie die Frameseite verlassen wollen und die Zieldateien von Hyperlinks wieder in den vollständigen Anzeigebereich laden wollen.
왘 NEUES FENSTER (_blank). Ruft eine zweite Instanz des Browsers auf und zeigt in dieser die gewünschte Zieldatei an.
왘 ÜBERGEORDNETER FRAME (_parent). Lädt die Zieldatei in den Frame, unter dem der Frame mit dem Hyperlink definiert ist.
Bild 3.31: Festlegung eines Zielframes
Webs verwalten In welcher Weise man ein Web oder eine Webseite betrachtet oder bearbeitet, wird durch die Wahl der zugehörigen FrontPage-Ansicht festgelegt. Um eine Ansicht auszuwählen, klicken Sie in der Ansichtenleiste auf das Symbol der gewünschten Ansicht oder wählen die Ansicht über den entsprechenden Befehl im Menü ANSICHT aus
252
Kapitel 3: Von der Webseite zum Web
Ansicht
Beschreibung
Seite
Hinter dieser Ansicht verbirgt sich der FrontPage-Editor zum Aufsetzen und Bearbeiten einzelner Webseiten.
Ordner
Diese Ansicht gleicht dem Windows Explorer und zeigt die Verzeichnisstruktur des aktuellen Webs.
Berichte
Unter dieser Ansicht sind eine ganze Reihe von Informationen, Statistiken und Statusanzeigen zusammengefasst.
Navigation
Diese Ansicht zeigt die Navigationsstruktur des aktuellen Webs.
Hyperlinks
Diese Ansicht zeigt die Verknüpfung der Webseiten durch Hyperlinks.
Aufgaben
In dieser Ansicht können Sie festhalten, welche Aufgaben zur Fertigstellung oder Überarbeitung des Webs noch zu erledigen sind.
Tabelle 3.3: Die Webansichten
Die Ansicht Seite
Bild 3.32: Die Ansicht Seite
253
Webs verwalten Diese Ansicht ist für das Aufsetzen und Bearbeiten einzelner Webseiten gedacht. Durch Auswahl dieser Ansicht wechseln Sie in den Editor, mit dem wir uns bereits in Kapitel 2 ausführlich beschäftigt haben. Hier noch einmal die wichtigsten Befehle: Der Editor verfügt selbst wieder über drei Ansichten:
왘 왘 왘
Normal: zum Aufsetzen und Formatieren der Webseiten HTML: zur direkten Bearbeitung des HTML-Codes Vorschau: zum Testen der Seiten
Bild 3.33: Die Editor-Ansichten Webseiten in den Editor laden:
왘
Über den Befehl DATEI/NEU/SEITE ODER WEB und Auswahl einer der Befehl LEERE SEITE oder SEITENVORLAGEN.
왘
Über das Symbol NEUE NORMALE SEITE ERSTELLEN in der Standard-Symbolleiste
왘 왘 왘
Über den Befehl ÖFFNEN im Menü DATEI. In der Ordnerliste auf den Dateinamen doppelklicken. In den Ansichten NAVIGATION und HYPERLINKS auf die Symbole der Webseiten doppelklicken.
Zwischen geladenen Webseiten wechseln:
왘
254
Es können mehrere Webseiten gleichzeitig in den Editor geladen werden, wobei aber immer nur eine Webseite im Vordergrund angezeigt wird.
Kapitel 3: Von der Webseite zum Web
왘
Über die Register am oberen Rand des Editors können Sie zwischen den Seiten wechseln.
왘
Oder verwenden Sie die Tastenkombination (Alt)+(F)+(Nummer). (Die Nummern können Sie dem Menü FENSTER entnehmen.)
Die Ansicht Ordner
Bild 3.34: Die Ansicht Ordner In dieser Ansicht können Sie sich einen Überblick über die Verzeichnisstruktur Ihres Webs und die zugehörigen Dateien verschaffen.
왘
In der Ordnerliste wird das Verzeichnis des Webs mit seinen Unterverzeichnissen angezeigt.
왘
Im rechts davon liegenden Explorer-Fenster wird der Inhalt des in der Ordnerliste ausgewählten Ordners angezeigt.
왘
Durch Doppelklick auf eine Datei im Explorer-Fenster oder in der Ordnerliste können Sie diese direkt in den Editor laden.
255
Querverweis
Webs verwalten
Im Abschnitt »Webs anlegen und bearbeiten« haben wir uns bereits ausführlich mit dieser Ansicht beschäftigt.
Die Ansicht Berichte
Bild 3.35: Die Ansicht Berichte Über diese Ansicht haben Sie Zugang zu einer Vielzahl von Informationen zu Status und Bearbeitungszustand Ihres Webs.
왘
Die Ansicht Berichte besteht aus mehreren Seiten (oder Berichten), die über das Untermenü ANSICHT/BERICHTE oder per Doppelklick auf der Seite SITEÜBERSICHT geöffnet werden können.
왘
Zur Berichte-Ansicht gibt es eine eigene Symbolleiste, die über den Befehl ANSICHT/SYMBOLLEISTEN/BERICHTE angezeigt werden kann.
256
Kapitel 3: Von der Webseite zum Web
Bild 3.36: Berichte-Symbolleiste Bericht öffnen 1. Öffnen Sie das Untermenü ANSICHT/BERICHTE. 2. Wählen Sie im Untermenü den Sie interessierenden Bericht aus. Oder: 1. Klicken Sie in der Ansichtenleiste auf das Symbol der Berichte-Ansicht. 2. Doppelklicken Sie in der Siteübersicht auf den Namen des Bericht, an dem Sie interessiert sind. Oder:
Hinweis
1. Rufen Sie den Befehl ANSICHT/SYMBOLLEISTEN/BERICHTE auf, wählen Sie in der Berichte-Symbolleiste den gewünschten Bericht im Listenfeld BERICHTE aus und wählen Sie gegebenenfalls im daneben gelegenen Feld ein Filterkriterium aus.
In der Siteübersicht sind nicht alle Berichte aufgeführt.
Die FrontPage-Berichte im Überblick Die folgende Tabelle gibt Ihnen einen Überblick über die einzelnen Berichte.
Bericht
Funktion
Siteübersicht
Bietet einen umfassenden, jedoch nicht detaillierten Überblick über den Status Ihrer Website.
Alle Dateien
Zeigt alle aktuell in Ihrem FrontPage-Web enthaltenen Dateien, den letzten Bearbeitungszeitpunkt, die Dateigröße und einige weitere Informationen.
Tabelle 3.4: Die einzelnen Berichte
257
Webs verwalten
Bericht
Funktion
Kürzlich hinzugefügte Dateien
Dateien, die erst vor kurzem neu in Ihr Web integriert wurden, kann FrontPage ausfindig machen und in dieser Übersicht präsentieren.
Kürzlich geänderte Dateien
Dateien, die Sie oder ein anderer Administrator erst vor kurzem geändert haben, und die daher einer genaueren Betrachtung bedürfen, sind in dieser Ansicht zusammengestellt.
Ältere Dateien
Ältere Dateien können Sie in dieser Ansicht auflisten.
Unverknüpfte Dateien
Dateien, die »brachliegen«, sprich, keine Verbindung zur übrigen Webstruktur aufweisen, können mithilfe dieser Ansicht ausfindig gemacht werden.
Langsame Seiten
Seiten, deren Ladezeit aufgrund großer eingebundener Grafiken oder anderer multimedialer Informationen unverhältnismäßig viel Zeit beansprucht, weist diese Ansicht aus.
Fehlerhafte Hyperlinks
Auflistung der in Ihrem Web enthaltenen Hyperlinks, einschließlich Informationen über deren Prüfstatus.
Komponentenfehler
FrontPage integriert zahlreiche interaktive Programmmodule. Treten bei deren Abarbeitung Fehler auf, so können diese mithilfe dieser Ansicht aufgedeckt und manuell behoben werden
Prüfstatus
Verschafft Ihnen den notwendigen Überblick, wenn Sie mit mehreren Administratoren an einem Webauftritt arbeiten.
Zugewiesen
Listet die Aufgaben auf, die Sie an andere Webadministratoren delegiert haben.
Kategorien
Sofern Sie Aufgaben in Kategorien gliedern, beispielsweise »Grafik« oder »Linking«, können Sie diesen Kategorien zugewiesene Aufgaben betrachten
Veröffentlichungsstatus
Alle bereits publizierten Seiten, sowie die noch in lokaler Bearbeitung befindlichen Daten Ihres Webs können Sie in dieser Ansicht anzeigen lassen
Tabelle 3.4: Die einzelnen Berichte (Forts.)
258
Kapitel 3: Von der Webseite zum Web
Bericht
Funktion
Checkout-Status
Übersicht aller dringend noch zu erledigenden Arbeiten, die ansonsten zu Fehlermeldungen auf der Seite des Anwenders führen könnten.
Verwendung
Eine Reihe von Statistiken, die allerdings nur zur Verfügung stehen, wenn das Web auf einem Webserver veröffentlicht ist, der die entsprechenden Statistiken zur Verfügung stellt.
Tabelle 3.4: Die einzelnen Berichte (Forts.) Dateien-Berichte Die Dateien-Berichte wirken wie Filter, mit denen Sie bestimmte Dateien nach dem Datum der Erstellung oder der letzten Bearbeitung herausfiltern können. Zu den Dateien-Berichten gehören die Berichte:
왘 왘 왘 왘
Alle Dateien Kürzlich hinzugefügte Dateien Kürzlich geänderte Dateien Ältere Dateien
Filterkriterien festlegen 1. Rufen Sie den Befehl ANSICHT/SYMBOLLEISTEN/BERICHTE auf und wählen Sie in der Berichte-Symbolleiste den gewünschten Bericht aus. 2. Wählen Sie im daneben liegenden Listenfeld einen Zeitraum aus, der angibt:
왘 Wie alt kürzlich hinzugefügte Dateien sein dürfen. 왘 Wie alt kürzlich geänderte Dateien sein dürfen. 왘 Wann eine Datei als »alt« gilt. Oder: 1. Rufen Sie den Befehl EXTRAS/OPTIONEN auf. 2. Wechseln Sie zur Registerkarte BERICHTSANSICHT. 3. Stellen Sie Vorgaben für die Kriterien ein.
259
Webs verwalten Bearbeitungsmöglichkeiten Der Dateiname kann direkt in der Berichte-Ansicht geändert werden. Markieren Sie die Zeile mit der Datei und klicken Sie auf den Dateinamen. Der Titel kann direkt in der Berichte-Ansicht geändert werden. Markieren Sie die betreffende Zeile und klicken Sie auf den Titel. Sie können eine Aufgabe für eine Datei definieren. Markieren Sie dazu die Datei und rufen Sie den Befehl DATEI/NEU/AUFGABE auf. Der Bericht »Fehlerhafte Hyperlinks« In dieser Ansicht können Sie kontrollieren, ob die in Ihrem Web verwendeten Hyperlinks korrekt sind. Der Prüfstatus eines Hyperlinks kann folgende Werte annehmen:
왘 왘 왘
Unbekannt (nicht geprüft) Fehlerhaft OK
Anzeige einstellen 1. Klicken Sie mit der rechten Maustaste in eine leere Zeile des Berichts. 2. Rufen Sie im Kontextmenü den Befehl ALLE HYPERLINKS ANZEIGEN auf. Dieser Befehl blendet korrekte Hyperlinks (Prüfstatus OK) ein und aus. Einzelnen Hyperlink testen 1. Klicken Sie mit der rechten Maustaste auf den zu prüfenden Hyperlink. 2. Rufen Sie im Kontextmenü den Befehl HYPERLINK ÜBERPRÜFEN auf. Alle Hyperlinks gleichzeitig überprüfen 1. Rufen Sie den Befehl ANSICHT/SYMBOLLEISTEN/BERICHTE auf, um die Berichte-Symbolleiste anzeigen zu lassen. 2. Klicken Sie in der Symbolleiste auf das letzte Symbol ÜBERPRÜFT HYPERLINKS. 3. Aktivieren Sie in dem erscheinenden Dialogfeld die Option ALLE HYPERLINKS ÜBERPRÜFEN und klicken Sie auf BEGINNEN.
260
Achtung
Kapitel 3: Von der Webseite zum Web
Vergessen Sie nicht, für externe Hyperlinks eine Verbindung ins Internet bereitzustellen.
Fehlerhafte Hyperlinks korrigieren 1. Doppelklicken Sie in der Berichte-Ansicht FEHLERHAFTE HYPERLINKS auf den fehlerhaften Hyperlink. 2. In dem Dialogfeld HYPERLINK BEARBEITEN, können Sie sogleich einen neuen URL eingeben. Wird der gleiche fehlerhafte Hyperlink auf mehreren Seiten Ihres Webs verwendet, haben Sie sogar die Möglichkeit, den URL in einem Schritt auf allen betroffenen Seiten korrigieren zu lassen (Option IN ALLEN SEITEN ÄNDERN). 3. Klicken Sie auf den Schalter ERSETZEN.
Die Ansicht Navigation
Bild 3.37: Die Ansicht Navigation
261
Webs verwalten
Hinweis
In dieser Ansicht können Sie die Navigationsstruktur Ihres Webs aufbauen und begutachten.
Die Navigationsstruktur ist nur von Bedeutung, wenn Sie auf Ihren Webseiten FrontPage-Hyperlinkleisten (siehe Abschnitt »FrontPage-Hyperlinkleisten«) verwenden.
Webseiten in die Navigationsstruktur aufnehmen 1. Lassen Sie die Ordnerliste in der Navigation-Ansicht anzeigen (Befehl ANSICHT/ORDNERLISTE). 2. Ziehen Sie die Seiten aus der Ordnerliste in die Navigationsstruktur. 3. Während Sie die Seite mit der Maus verschieben, zeigt Ihnen eine Verbindungslinie an, unter welcher Seite der Navigationsstruktur die Seite eingeordnet wird. Oder:
Hinweis
1. Über den Symbolschalter NEUE NORMALE SEITE ERSTELLEN können Sie eine neue Seite in das Web und die Navigationsstruktur aufnehmen. Die neue Seite wird der Seite untergeordnet, die bei Aufruf des Befehls in der Navigationsstruktur ausgewählt ist.
Für bestimmte Webvorlagen ist bereits eine Navigationsstruktur vorgegeben.
Navigationsstruktur ändern Um die Position einer Seite (und aller untergeordneten Seiten) zu ändern. 1. Klicken Sie die Seite in der Navigationsstruktur an. 2. Ziehen Sie die Seite mit gedrückter Maustaste auf eine andere Position. 3. Achten Sie auf die Verbindungslinie, die Ihnen während des Verschiebens anzeigt, wie die Seite bei Loslassen der Maus abgelegt wird. Um eine Verschiebung rückgängig zu machen, brauchen Sie nur die Tastenkombination (Strg)+(Z) zu drücken.
262
Kapitel 3: Von der Webseite zum Web Seiten aus der Navigationsstruktur löschen 1. Markieren Sie die Seite in der Navigationsstruktur. 2. Drücken Sie die (Entf)-Taste. 3. In dem erscheinenden Dialogfeld können Sie auswählen, ob die Seite nur aus der Navigationsstruktur oder ganz aus dem Web entfernt werden soll. Teile der Navigationsstruktur ein- und ausblenden Um die einer Seite untergeordneten Seiten aus- oder einzublenden, klicken Sie auf das Plus- bzw. Minuszeichen im Symbol der Seite. Ansicht vergrößern und verkleinern Falls die Navigationsstruktur zu groß geworden ist, um vollständig angezeigt zu werden, oder falls Sie nur einen Teilbereich anzeigen lassen wollen, können Sie die Ansicht vergrößern oder verkleinern. 1. Lassen Sie die Symbolleiste der Navigation-Ansicht anzeigen. 2. Wählen Sie im Zoom-Listenfeld einen Vergrößerungsfaktor aus.
Hinweis
Bild 3.38: Symbolleiste zur Navigation-Ansicht
Um eine Datei der Navigationsstruktur zur Bearbeitung in den Editor zu laden, doppelklicken Sie in der Navigationsstruktur auf das Symbol der Datei.
Hyperlinktitel ändern Wenn Sie FrontPage-Hyperlinkleisten einrichten (siehe Abschnitt »FrontPage-Hyperlinkleisten«), übernimmt FrontPage als Titel für die einzelnen Links in der Leiste die jeweiligen Seitentitel der Webseiten in der Navigationsstruktur. Wenn Sie die Beschriftung für einen der Links ändern wollen, gehen Sie wie folgt vor:
263
Webs verwalten 1. Wechseln Sie in die Navigationsansicht. 2. Klicken Sie im Symbol der Seite in den Titel. 3. Geben Sie den neuen Titel ein.
Die Ansicht Hyperlinks
Bild 3.39: Die Ansicht Hyperlinks Diese Ansicht bietet eine grafische Darstellung der Hyperlinkverbindungen des Webs. 1. Wählen Sie in der Ordnerliste die Datei aus, deren Hyperlinkstruktur (ein- und ausgehende Hyperlinks) dargestellt werden soll. 왘 Für Webseiten mit Plus-Kästchen können weitere Hyperlinks eingeblendet werden.
왘 Über das Kontextmenü der Ansicht können Sie festlegen, welche Art von Hyperlinks angezeigt werden sollen.
264
Querverweis
Kapitel 3: Von der Webseite zum Web
Wie man Hyperlinks testet, ist in den Kapiteln 2 »Hyperlinks« und 3 »Webs verwalten«, letzter Abschnitt beschrieben.
Die Ansicht Aufgaben
Bild 3.40: Die Ansicht Aufgaben In dieser Ansicht können Sie sich darüber informieren, welche Schritte zur Erstellung oder Wartung des Webs noch nötig sind. Die einzelnen Aufgaben müssen Sie allerdings vorab selbst eintragen. Nutzen Sie diese Ansicht, um noch zu erledigende Aufgaben oder Missstände, die Ihnen während der Erstellung oder routinemäßigen Wartung auffallen, zu notieren und zu einem späteren Zeitpunkt abzuarbeiten.
265
Webs verwalten Dateiunabhängige Aufgaben eintragen Dateiunabhängige Aufgaben sind Aufgaben, deren Bearbeitung nicht an eine bestimmte Datei gebunden ist. 1. Rufen Sie im Untermenü DATEI/NEU den Befehl AUFGABE auf. Oder 1. Klicken Sie mit der Maus in den Hintergrund der Ansicht und rufen Sie im Kontextmenü den Befehl AUFGABE HINZUFÜGEN auf. Dateiabhängige Aufgabe eintragen Wenn eine Aufgabe speziell mit einer Datei zu tun hat (z.B. ein Hintergrundbild für die Datei aussuchen), sollten Sie die Aufgabe mit der Datei verbinden. FrontPage überwacht dann den Überarbeitungszustand. Um eine Aufgabe mit einer Datei zu assoziieren, 1. Markieren Sie die entsprechende Datei in der Ordnerliste. 2. Rufen Sie den Befehl DATEI/NEU/AUFGABE auf. Aufgaben bearbeiten Um eine Aufgabe, die mit einer Datei assoziiert ist, zu bearbeiten, klicken Sie die Aufgabe mit der rechten Maustaste an und rufen Sie den Befehl AUFGABE AUSFÜHREN auf. FrontPage lädt die Datei in den Editor, wo Sie sie bearbeiten können. Beim Abspeichern wird abgefragt, ob die Aufgabe mittlerweile erledigt ist.
Hinweis
Wenn Sie die Datei aus der Aufgabenansicht heraus aufrufen, aktualisiert FrontPage für Sie den Bearbeitungszustand.
Hinweis
Um eine Aufgabe selbst als erledigt zu markieren, klicken Sie die Aufgabe mit der rechten Maustaste an und wählen Sie den Befehl ALS ERLEDIGT MARKIEREN aus.
Für dateiunabhängige Aufgaben gibt es keine automatische Überwachung des Bearbeitungszustands.
266
Kapitel 3: Von der Webseite zum Web Aufgabendaten ändern
Hinweis
Doppelklicken Sie in der Aufgaben-Ansicht auf die Aufgabe, deren Daten Sie ändern wollen.
Die gleichen Daten, die Sie im Dialogfeld bearbeiten können, können Sie auch direkt in der Aufgaben-Ansicht editieren.
Aufgabe als erledigt markieren 1. Klicken Sie mit der rechten Maustaste auf die Aufgabe. 2. Rufen Sie im Kontextmenü den Befehl ALS ERLEDIGT MARKIEREN auf.
267
Kapitel 4 Grafiken im Webdesign Bilder und Grafiken werden im Webdesign in vielfältiger Weise eingesetzt: als Fotos einer Bildergalerie, als grafische Schaltflächen, als Hintergrundbild, als Aufzählungssymbole, als Animationen und so weiter. Zur Bearbeitung dieser Grafiken stellt Ihnen Microsoft zwei verschiedene Grafikprogramme zur Verfügung:
왘
Image Composer, das mit dem FrontPage-Einzelpaket ausgeliefert wird (und bei Bedarf auch über die FrontPage-Website, www.microsoft.com/frontpage, bestellt werden kann),
왘
PhotoDraw, das Teil des Office-Pakets ist und zu den professionellen Grafikprogrammen gehört.
Sie können aber auch mit jedem anderen Grafikprogramm arbeiten, angefangen mit Paint Shop Pro bis zu Adobe Photoshop. Hilfreich sind auch ein Scanner sowie spezielle Software zur Erstellung von Animationen (beispielsweise ImageMagick oder ULead für GIF-Animationen oder Flash für FlashAnimationen). Welche Grafik-Software Sie verwenden, bleibt Ihnen überlassen. In diesem Kapitel geht es um allgemeine Grundregeln für die Verwendung von Bildern in Webseiten. Wie Sie die Bilder in Ihrem Grafikprogramm erstellen und bearbeiten, entnehmen Sie bitte der Dokumentation Ihrer Grafik-Software.
Die wichtigsten Bildformate Grafikformate gibt es wie Sand am Meer, doch nicht alle sind für Webseiten geeignet. Welche besonderen Eigenschaften sollte ein Grafikformat für Webbilder haben? Die Antwort liegt auf der Hand: Um die Kapazitäten des Netzwerks und die Nerven der Websurfer zu schonen, sollte ein Grafikformat bei annehmbarer Bildqualität möglichst kleine Dateigrößen liefern. Gleichzeitig sollte das Grafikformat einfach auszuwerten und darzustellen sein, damit es von möglichst allen Browsern unterstützt wird. Unter diesen Gesichtspunkten haben sich drei Grafikformate als Standardformate für Webbilder etabliert.
Die wichtigsten Bildformate
GIF
GIF steht für »Graphic Interchange Format« und ist eine Entwicklung von CompuServe. GIF-Bilder werden nach dem LZW-Algorithmus komprimiert, für den die Firma Unisys die Patentrechte innehat. Mit diesem Algorithmus sind hohe Komprimierungsraten ohne Qualitätsverluste erreichbar. Das GIF-Format erlaubt traditionell nur 256 Farben (es gibt Erweiterungen des Formats, die mehr Farben gestatten, doch werden diese nur von wenigen Programmen unterstützt). Für photorealistische Darstellungen scheidet das GIF-Format daher aus. Es ist aber bestens für Design-Elemente (Schaltflächen, Hintergründe, etc.) und Bilder geringer Farbtiefe geeignet. GIF-Bilder können als »interlaced« oder als »non-interlaced« abgespeichert werden. »Non-Interlaced«-Bilder werden Zeile für Zeile an den Webbrowser geschickt und können von diesem erst dann angezeigt werden, wenn sie ganz geladen sind. »Interlaced«-Bilder werden paketweise übertragen, wobei die Pakete jeweils nur jede achte Zeile enthalten. Auf diese Weise erhält der Browser sofort ein Rohbild, das er anzeigen kann und das Paket für Paket verbessert wird. Ein weiterer Vorteil des GIF-Formats ist, dass man eine transparente Farbe definieren kann. Wenn Sie Grafiken im GIF-Format speichern und Ihr Grafikprogramm sowohl das 87a- als auch das 89a-Format unterstützt, wählen Sie das neuere 89a-Format.
JPG
JPG oder JPEG steht für Joint Photographic Expert Group. Es zeichnet sich durch einen leistungsstarken, konfigurierbaren Komprimierungsalgorithmus aus, der allerdings nicht verlustfrei arbeitet. Je stärker die Komprimierung, um so größer die Qualitätsverluste. JPG unterstützt 16 Millionen Farben (TrueColor) und mittlerweile auch den schrittweisen Bildaufbau im Browser (progressive JPG). Es eignet sich vor allem für größere Bilder und für Fotos.
Tabelle 4.1: Grafikformate für Webbilder
270
Kapitel 4: Grafiken im Webdesign
PNG
1995 kündigten CompuServe und Unisys an, dass sie auf den GIFLZW-Komprimierungsalgorithmus Lizenzgebühren erheben wollen. Als Antwort wurde das nicht-kommerzielle PNG-Format entwickelt, das in gewisser Weise, das Beste aus GIF und JPG in sich vereint. Das PNG-Format eignet sich für alle Arten von Bildern. Im Vergleich zu JPG erlaubt es allerdings keine fein abgestufte Bildkomprimierung (es verwendet wie GIF ein verlustfreies Komprimierungsverfahren). Noch hat sich PNG nicht wirklich durchgesetzt. Zum einem liegt dies vermutlich daran, dass die Endbenutzer (Webautoren) nicht von der Lizenz betroffen sind, zum anderen daran, dass ältere Browser PNG nicht unterstützen und GIF und JPG einfach gute Alternativen sind.
Tabelle 4.1: Grafikformate für Webbilder (Forts.) Zur besseren Übersicht hier noch einmal die wichtigsten Unterscheidungskriterien.
Kriterium
GIF
JPG
PNG
Farbtiefe
2 – 256
256 – 16,7 mio
2 – 65536 (S/W) 2 – nahezu unendlich
Komprimierung
verlustfrei
abgestuft, mit zunehmenden Qualitätsverlusten
verlustfrei
Transparenz
ja
nein
ja
Schrittweise Darstellung
ja interlaced-Modus
ja progressive JPG
ja interlaced.Modus
Animationen
ja
nein
nein
Verwendung
Design-Elemente Bilder geringer Farbtiefe Bilder mit transparentem Hintergrund
Bilder hoher Farbtiefe Fotorealistische Darstellungen Große Bilder (> 10 KByte)
Alle Bilder, aber bevorzugt Bilder geringer Farbtiefe und Größe
Tabelle 4.2: Übersicht der Grafikformate für Webbilder
271
Hinweis
Bilddateigröße versus Bildqualität
Für die Bearbeitung von Bildern gelten andere Regeln als für die Veröffentlichung. Entsprechend werden auch andere Ansprüche an das Grafikformat gestellt. Wichtiger als die Größe der Bilddatei und die Unterstützung von Transparent und Interlacing ist die verlustfreie Speicherung und Bearbeitung. Speichern Sie Ihre Bilder daher während der Bearbeitung in Grafikformaten wie TIFF, BMP oder PNG und wandeln Sie erst die fertigen Bilder in GIF oder JPEG um.
Bilddateigröße versus Bildqualität Als verantwortlicher Webautor sollten Sie Bilddateien nie ins Web stellen, ohne zuvor zu prüfen, ob man nicht die Größe der Bilddateien reduzieren könnte. Dies gilt für die Veröffentlichung von Fotos ebenso wie für DesignElemente oder Bilder zur Unterstützung dynamischer Webinhalte. Nehmen wir an, Sie haben eine Fotovorlage, die Sie zur Verwendung auf Ihren Webseiten einscannen und aufbereiten wollen. 1. Scannen Sie das Bild ein. Die interessanteste Einstellung ist dabei die Auflösung in dpi (Dots per Inch = Punkte pro Zoll). Je höher die Auflösung, um so mehr Bildpunkte werden pro Zoll eingescannt und um so höher ist die Bildqualität. Für die Anzeige auf dem Computerbildschirm ist die Auflösung aber mehr oder weniger unerheblich, denn der Monitor kann maximal 75 Dots (Pixel) pro Zoll anzeigen. (So schaffen 17 Zoll-Bildschirme nur maximale Auflösungen von 1280 x 1024; 1280 Pixel : 75dpi = 17 Zoll.) Wenn Sie mit einer höheren Auflösung einscannen, wird das Bild auf dem Monitor nicht schärfer, sondern größer. So gesehen sind 75 dpi absolut ausreichend. Wenn Sie allerdings beabsichtigen, das Bild (oder Teile des Bildes) zu vergrößern, reduziert sich sofort die Bildschärfe, sofern Sie die Vergrößerung nicht bei der Auswahl der dpi-Auflösung eingerechnet haben.
272
Kapitel 4: Grafiken im Webdesign
Mögliche Vergrößerung
Auflösung beim Scannen
100 % (keine Vergrößerung)
75 dpi
200 %
150 dpi
400 %
300 dpi
800 %
600 dpi
Tabelle 4.3: Verhältnis dpi zu Vergrößerung Wenn Sie sich unsicher sind, wählen Sie beim Scannen eine höhere dpiAuflösung. Heruntersetzen können Sie die Auflösung später immer noch (geschieht in den meisten besseren Grafikprogrammen durch Skalierung oder Veränderung der Bildabmaße). 2. Speichern Sie das Bild in dem von Ihnen gewählten Bearbeitungsformat (beispielsweise TIFF). Achten Sie darauf, dass Sie ein Grafikformat wählen, das verlustfrei abgespeichert wird und das auch von dem Grafikprogramm, in dem Sie das Bild weiterbearbeiten wollen, unterstützt wird. 3. Legen Sie eine Kopie an und bearbeiten Sie diese in Ihrem Grafikprogramm. Jetzt haben Sie Gelegenheit, Schriftzüge einzufügen, zu retuschieren, Farben zu verfremden, Effekte auszuprobieren. Führen Sie unbedingt alle Bearbeitungsschritte an der Kopie aus, damit Sie notfalls immer zum Original zurückkehren können. (Verlassen Sie sich nicht allzu sehr auf die Rückgängig-Funktion Ihres Grafikprogramms.) 4. Speichern Sie das fertig bearbeitete Bild und legen Sie auch von diesem eine Kopie an. 5. Reduzieren Sie zum Schluss die Größe der kopierten Bilddatei. Auf die Dateigröße können wir auf verschiedenen Wegen Einfluss nehmen:
왘 über die Farbtiefe, 왘 über die Bildabmaße und 왘 über das verwendete Grafikformat/Komprimierungsverfahren.
273
Bilddateigröße versus Bildqualität Feste Spielregeln gibt es für die Reduzierung kaum, das heißt, man muss ausprobieren, wie man zu dem bestmöglichen Ergebnis kommt. Zwei Fallbeispiele – für ein Foto und eine Grafik – sollen die grundsätzliche Vorgehensweise verdeutlichen.
Bild 4.1: Ausgangsbild und unterschiedlich stark komprimierte JPGDateien Betrachten wir zuerst das Bild Lilly400.tif aus Bild 4.1. Es wurde mit einer Auflösung von 400 dpi und einer Farbtiefe von 16,7 Millionen Farben (24 Bit pro Farbe) eingescannt. Eine weitere Bearbeitung ist nicht vorgesehen, also können wir gleich mit der Reduzierung der Bilddateigröße beginnen – was auch dringend notwendig ist, weil das Original fast 16 MByte einnimmt (1889*2856 (Pixel) * 24 (Bit pro Pixel)). Zuerst einmal ist das Bild so viel zu groß (in Bild 4.1 ist das Bild um den Faktor 6 verkleinert). Ich skaliere es unter Beibehaltung des Seitenverhältnisses auf 315*476 herunter und schon ist die Datei nur noch 440 KByte groß. Da es sich um ein relativ großes Foto mit vielen Farben handelt, entscheide ich mich für JPG als Veröffentlichungsformat. Beim Abspeichern kann ich wählen, wie stark das Bild komprimiert werden soll. Das mittlere Bild in
274
Kapitel 4: Grafiken im Webdesign Bild 4.1 ist mit einem Faktor 50 (bei Auswahl zwischen 1 und 99) gespeichert und belegt danach noch 26 KByte. Die Bildqualität ist noch sehr gut. Das Bild ganz rechts wurde mit dem maximalen Faktor von 90 erzeugt. Es belegt zwar nur noch 4 KByte auf der Festplatte, ist aber auch von nicht akzeptabler Qualität.
Bild 4.2: Reduzierung einer Grafik Unser nächstes Bild ist eine ClipArt-Grafik mit einem Tiger-Kopf, die ursprünglich 72 KByte belegt. Der Tigerkopf soll in eine Webseite eingebaut werden, allerdings ohne den roten (sorry, die Farbe ist beim Abdruck im Buch verloren gegangen) Hintergrund. Stattdessen soll der aktuelle Hintergrund der Webseite durchscheinen. Da wir eine transparente Farbe festlegen wollen, scheidet das JPG-Format von vornherein aus. Es würde bei der geringen Farbtiefe und der mäßigen Bildgröße vermutlich eh keine bessere Reduzierung bringen als GIF oder PNG. Doch zuerst passen wir die Bildgröße an. Die rote Farbe um den Tiger-Kopf soll später transparent sein. Das bedeutet, das man den roten Hintergrund des Tiger-Kopfes nicht sehen wird. Also können wir den Hintergrund auf ein Minimum reduzieren. Die resultierende TIFF-Datei ist in Bild 4.2 nicht zu sehen, hat aber die gleichen Abmaße wie BigTiger_16a.tif und belegt nur noch 34 KByte. Der nächste Schritt besteht darin, die Farbtiefe zu verringern. Die ursprüngliche Datei verwendet eine 256-Farbenpalette. Mit Paint Shop Pro können
275
Bilddateigröße versus Bildqualität wir die Palette auf 16 Farben reduzieren, wobei uns Paint Shop Pro verschiedene Algorithmen zur Auswahl der 16 Farben zur Verfügung stellt. Der erste ausgewählte Algorithmus stellt das Rotbraun des Tigerkopfes und das Rot des Rachens nicht mehr schön dar (in der Schwarzweißdarstellung von Bild 4.2 sind diese Bereiche heller geworden). Im zweiten Anlauf, BigTiger_16b.tif, wählen wir einen Bereich aus (siehe Markierungsrahmen), dessen Farben bei der Reduzierung auf 16 Farben verstärkt gewichtet werden sollen. Dies liefert uns ein akzeptables Ergebnis. Die fertige Datei speichern wir als non-interlaced-GIF-Datei ab (wegen der geringen Dateigröße können wir auf das Interlacing verzichten).
Hinweis
Zu guter Letzt legen wir noch die transparente Farbe fest. Wir lassen uns dazu die Farbpalette des Bildes anzeigen und notieren uns den Index der roten Hintergrundfarbe (die natürlich nicht für andere Teile des Bildes verwendet werden darf). Beim neuerlichen Speichern geben wir den Index der roten Farbe als Index der transparenten Farbe an. Die endgültige Datei belegt nur noch etwas mehr als 6 KByte.1 Die Reduzierung der Farbtiefe vermindert die Dateigröße nicht nur dadurch, dass eine kleinere Palette1 abgespeichert werden muss. Hinzukommt, dass die meisten Komprimierungsverfahren um so effektiver arbeiten, je weniger Farben es im Bild gibt. Es lohnt sich also auch, die Palette von Hand zu überarbeiten und zu schauen, ob man auf einzelne Farben verzichten kann.
Bilder im Arbeitsspeicher Als verantwortlich denkender Webautor sollten Sie nicht nur die Größe der Bilddatei, sondern auch die Größe des unkomprimierten Bildes im Arbeitsspeicher Ihrer Webbesucher im Auge behalten. Nehmen wir zum Beispiel 1.
Paletten werden nur für Bilder bis maximal 256 Farben verwendet. In der Palette wird jede Farbe durch einen RGB-Wert spezifiziert (wobei je 1 Byte zur Kodierung des Rot-f, Grün- und Gelbanteils zur Verfügung steht, d.h. die Palette kann 256 Farben aus einem Spektrum von 16 Mio. Farben enthalten). Für die einzelnen Bildpunkte braucht dann nur noch ein 1-Byte großer Index in die Farbpalette abgespeichert zu werden.
276
Kapitel 4: Grafiken im Webdesign das Foto aus Bild 4.1. Durch die JPG-Komprimierung konnten wir die Bilddatei von 440 KByte auf 26 KByte herunterdrücken. Trotz der stark komprimierten Bilddatei ist das eigentliche Bild aber immer noch 315*476 Pixel groß. Wird es auf dem Bildschirm eines Websurfers angezeigt, belegt jeder dieser Pixel im Speicher 24 oder 32 Bit (je nach eingestellter Farbtiefe auf dem Client-Computer). Noch gravierender wird der Unterschied, wenn Sie große Hintergrundbilder mit wenigen Farben verwenden. Diese lassen sich durchaus schon einmal auf Dateigrößen von unter 5 KByte reduzieren, belegen aber im Arbeitsspeicher des Anwenders dann über 1 MByte.
Animationen Die Erstellung von Animationen ist zweifelsohne eine der faszinierendsten Aufgaben eines Webdesigners. In diesem Kapitel werden wir uns zuerst einen Überblick über die verschiedenen Animationstechniken verschaffen und danach eine eigene GIF-Animation erstellen.
Einführung Die Grundform der Animation ist eine Folge von Bildern, die nacheinander angezeigt werden.
왘
Werden ganz unterschiedliche Bilder in größeren Zeitabständen eingeblendet, erhält man eine Bildwechsler (oder eine Diashow). Hierzu können Sie auch die FrontPage-Webkomponente DYNAMISCHE EFFEKTE/ANZEIGENWECHSLER verwenden.
왘
Wenn sich die Bilder (man spricht auch von Frames1) nur wenig unterscheiden und wie bei einem Zeichentrickfilm relativ schnell aufeinander folgen, entsteht der Eindruck einer durchgehenden Bewegung (siehe Bild 4.3).
Für die Erstellung von Animationen mit bewegten Elementen gibt es wieder unterschiedliche Techniken:
왘
1.
Eine Möglichkeit ist, das gesamte Bild von Frame zu Frame jeweils ein wenig zu verändern (wie in Bild 4.3).
Nicht zu verwechseln mit den Frames der Frameseiten.
277
Animationen
Bild 4.3: Einzelne Bilder (Frames) einer Animation
왘
Eine andere Technik ist die Sprite-Animation, bei der einzelne Figuren oder Teile (die Sprites) vor einem fixen Hintergrund verschoben werden. Wichtig ist dabei, dass der Hintergrund der Sprites (die selbst ja auch nur rechteckige Bilder sind) transparent ist, so dass das Hintergrundbild durchscheinen kann.
In Webseiten kann man solche Animationen auf verschiedene Weisen einbinden:
왘
Man kann die Animation als GIF-Animation erstellen und speichern und dann wie ein ganz normales Bild als -Element einbinden.
왘
Man kann die einzelnen Bilder mithilfe von JavaScript laden und abspielen.
왘
Man kann mithilfe von DHTML Animationen erstellen, die darauf beruhen, dass man absolut positionierte HTML-Elemente via CSSPositionierung und JavaScript verschiebt.
278
Kapitel 4: Grafiken im Webdesign
왘
Man kann die Animationen mithilfe eines leistungsfähigen Animationsprogramms (beispielsweise Flash) erstellen und als multimediales Objekt einbetten.
Wir beschränken uns im Weiteren auf die Erstellung von GIF-Animationen.
GIF-Animationen GIF-Animationen sind Frame-Animationen, das heißt, eine Folge von Bildern wird Bild für Bild hintereinander abgespielt. Um GIF-Animationen erstellen zu können, braucht man
왘 왘
die einzelnen Bilder ein Programm, dass die einzelnen Bilder zu einer GIF-Animation zusammenfügt. Wenn das Programm die erzeugte Animation auch noch optimiert (die Dateigröße reduziert), kann man mit solchen GIFs nette filmähnliche Animationen erstellen.
Bildwechsler und einfache Animationen mit ImageMagick
Hinweis
ImageMagick ist eine Sammlung von Konsolenprogrammen zur Grafikbearbeitung. Wegen der fehlenden grafischen Benutzeroberfläche ist die Bedienung etwas gewöhnungsbedürftig, aber dafür stehen die Programme kostenfrei für fast alle Plattformen zur Verfügung. Die ImageMagick-Programmsammlung kann von www. simplesystems. org/ImageMagick heruntergeladen werden. Nachdem Sie ImageMagick heruntergeladen und installiert haben (siehe begleitende Dokumentation), brauchen Sie nur noch in einem geeigneten Grafikprogramm die Bilder für die Frames zu erstellen, und schon kann es losgehen.
279
GIF-Animationen Für das folgende Beispiel verwenden wir drei Fotos mit Ansichten amerikanischer Städte (siehe Bild 4.4).
Bild 4.4: Einzelne Frames für den Bilderwechsler Die einzelnen Frames haben alle den gleichen Namen, plus einer Indexnummer. Für die Arbeit mit dem ImageMagick-Tool ist dies ganz wichtig. Um aus diesen drei Frames eine GIF-Animation zu machen, gehen Sie wie folgt vor: 1. Kopieren Sie die einzelnen Bilder in das Verzeichnis, in dem die ImageMagick-Tools (EXE-Dateien) installiert wurden. 2. Rufen Sie eine Konsole auf (unter Windows START/PROGRAMME/ MSDOS-EINGABEAUFFORDERUNG) und wechseln Sie in dieser in das Installationsverzeichnis von ImageMagick. 3. Rufen Sie das convert-Tool wie folgt auf: > convert -loop 0 -delay 100 usa*.jpg usaAnim.gif
Das erste Argument, -loop 0, gibt an, wie oft die Animation wiederholt werden soll. Der Wert 0 steht hierbei für eine endlose Wiederholung. Der zweite Argument, -delay 100, gibt an, wie viele Hundertstelsekunden jedes Bild angezeigt werden soll. Das dritte Argument gibt die Frames an. usa*.jpg bewirkt, dass alle JPGBilder, deren Dateinamen mit usa anfängt und die im aktuellen Verzeichnis stehen, aufgenommen werden. Die Reihenfolge der Bilder in der Animation richtet sich nach der lexikographischen Reihenfolge ihrer Dateinamen (in unserem Beispiel also nach den auf das Präfix usa folgenden Nummern). 280
Kapitel 4: Grafiken im Webdesign Schließlich geben wir noch den Namen der zu erzeugenden Animationsdatei an (hier usaAnim.gif).
Bild 4.5: Aufruf von convert Die erzeugte GIF-Datei können wir in ein Verzeichnis auf dem Webserver kopieren und per -Tag in eine Webseite einbinden:
Hinweis
Auf die gleiche Weise kann man mithilfe des convert-Tools zeichentrickähnliche Animationen, Übergänge oder Ähnliches erstellen. Mehr Komfort bieten beispielsweise der Image Composer (http://www.microsoft.de/frontpage) oder der ULead GIF-Animator (http://www.ulead.com).
281
Kapitel 5 Die eigene Internet-Präsenz Sie sind zwischen 9 und 99 und beherrschen schon oder noch die deutsche Rechtschreibung? Sie haben erste Erfahrungen mit dem Internet gemacht und würden jetzt selbst gerne durch eine eigene Seite im WWW vertreten sein, wissen aber nicht so recht, wie Sie dies bewerkstelligen können? Dann sind Sie hier richtig. Ob Sie mehr der ehrgeizige, dynamische und erfolgreiche Typ sind, der fühlt, dass es Zeit wird für den ersten eigenen Internet-Auftritt, ob Sie faul, mufflig und allem Neuen gegenüber verschlossen sind, aber sich unter Druck fühlen, weil alle Ihre Bekannten schon im Internet präsent sind, ob Sie ein eher kleines Licht sind, das seinen bescheidenen Teil zum World Wide Web beitragen will, oder ob Sie eine gewichtige, historische Persönlichkeit darstellen, die ihren mächtigen Schatten über das WWW wirft, oder ob Sie einfach Ihr Chef drängt, endlich eine eigene Homepage aufzusetzen – die Erfüllung Ihrer Träume und die Lösung Ihrer Probleme finden Sie auf den folgenden Seiten. Wie ist dieses Kapitel aufgebaut? 1. Wir beginnen damit, dass wir uns zuerst einmal darüber informieren, wie persönliche Homepages üblicherweise aufgebaut sind, welche Inhalte sie transportieren und welche Fehler man möglichst vermeiden sollte. Dazu schauen wir uns eine einfache, fiktive Homepage an, wie man sie auch im Internet finden könnte. 2. Danach greifen wir uns eine Homepage heraus, die wir eingehender analysieren und begutachten werden. 3. Mit den auf diese Weise gewonnenen Erkenntnissen wagen wir uns an die Erstellung und Einrichtung einer eigenen ersten Website. Dazu stellen wir Ihnen drei verschiedene Webvarianten zur Verfügung: 왘 eine persönliche Homepage, in dem für viele persönliche Homepages typischen schlichtem Design
왘 ein persönliches Web mit etwas ausgefallenerer Homepage 왘 ein Firmenweb
Ein fiktives Beispiel für eine private Homepage Das ganze Kapitel durchzulesen und durchzuarbeiten, dürfte etwas länger als 30 Minuten dauern. Eilige Leser können aber direkt in die Abschnitte zur Erstellung der persönlichen Homepages einsteigen, und dann sollten Sie mit einem Aufwand von ca.. 30 Minuten hinkommen.
Ein fiktives Beispiel für eine private Homepage Einer der Gründe für die Faszination des Internets ist seine anarchische Struktur und Zusammensetzung, die – bestenfalls – durch gewisse Höflichkeitsregeln eingeschränkt wird. Für Sie als Autor einer persönlichen Homepage bedeutet dies, dass Sie in der Wahl des Designs und des Inhalts Ihrer Webseiten völlig frei sind. Dies ist erfreulich und begrüßenswert, aber nicht unbedingt besonders hilfreich. Sofern Sie nicht schon eine klare Vorstellung vom Aufbau Ihrer persönlichen Homepage haben, nehmen Sie sich doch einfach ein wenig Zeit, um sich ins Internet einzuloggen und im WWW nach persönlichen Homepages zu stöbern (Adressen finden Sie in den Mitglieder-Verzeichnissen Ihrer Internet-Provider, über Such-Maschinen oder Freunde und Bekannte). Notieren Sie sich, welche Elemente häufig in Homepages verwendet werden und wie die verschiedenen Webs und deren Seiten aufgebaut sind. Versuchen Sie Mode-Trends auszumachen und lassen Sie sich von den Ideen anderer inspirieren. Merken Sie sich, was Ihnen im Einzelnen gefallen und was Ihnen missfallen hat. Genau dies werden wir im Folgenden am Beispiel einer fiktiven Homepage machen. Sie werden verstehen, dass wir an dieser Stelle keine Homepages von Privatleuten veröffentlichen oder gar analysieren und kritisieren möchten. Die folgende Webseite entstammt daher dem ebenso persönlichen wie fiktiven Web eines zufällig ausgewählten Zeitgenossen1. Was fällt uns an dieser Webseite auf?
1.
Leser, die das FrontPage98-Kompendium kennen, mögen bitte die politische Ausgewogenheit dieses Buches beachten. Nachdem wir zuvor zufällig Helmut Kohl ausgewählt hatten, nun der Wechsel.
284
Kapitel 5: Die eigene Internet-Präsenz
Bild 5.1: Eine Beispiel-Homepage Positives:
왘
Die persönliche Ansprache. Der Autor der Webseite richtet sich direkt mit einem herzlichen Willkommen an seine Besucher. Auch im Fließtext wird der Besucher direkt angesprochen. Das stellt von vornherein ein Gefühl der Vertrautheit her und bindet den Leser.
왘
Der Aufbau mit Banner und Randbereichen ist modern und übersichtlich.
285
Ein fiktives Beispiel für eine private Homepage
왘
Die Seite ist insgesamt eher schlicht angelegt und vermittelt Seriosität, sowie eine gewisse angeborene Ernsthaftigkeit des Autors. Der sparsame Einsatz von Schriften und Formatierungen verstärkt diesen Eindruck.
왘
Das Foto ist recht vorteilhaft. Meiner Einschätzung nach gehören persönliche Fotos nicht unbedingt zu einem persönlichen Web – zumindest nicht auf die Homepage, aber wenn Sie ein gutes, vorteilhaftes Foto von sich haben, sollten Sie es auch verwenden.
왘
Der Text ist kurz gefasst – ohne ermüdende Längen. Es werden vornehmlich Hauptsätze verwandt, wichtige Inhalte werden nicht in Nebensätzen versteckt. Ganz so wie es Tucholsky für gute Reden gefordert hat.
Negatives:
왘
Das verwendete Design (»Zitronenmix«) ist für eine eher auf Seriosität abzielende Website eher schlecht gewählt. Es würde besser zu der Website eines Obstladens passen. Das Design vermittelt aber auch eine gewisse Frische und Jugendlichkeit. Sofern dies Ihrem Naturell entspricht, können Sie es selbst ruhig verwenden. Achten Sie aber in jedem Fall darauf, dass das Design zu Ihnen wie zu Ihrer Website passt.
왘
Der Text ist zu gefühlsbetont. Zwar gehört es zu einer persönlichen Website im Grunde dazu, dass Sie auch einen persönlichen Eindruck von sich vermitteln, doch dies sollte nicht in allzu sehr gefühlsbetonten Äußerungen oder intimen Offenbarungen ausarten, die den Besucher Ihrer Webseiten bestenfalls peinlich berühren. So vollzieht der letzte Absatz zwar eine geschickte Überleitung von der persönlichen Darstellung zu den weiteren Seiten des Webs, doch das Hadern mit dem eigenen Schicksal, das diesen Sätzen zu entnehmen ist, kann beim Leser schnell ein ungewolltes Gefühl des Mitleids und der Kumpanei erzeugen. Vermeiden Sie daher solche Gefühlsausbrüche, auch und gerade dann wenn Sie sich zu Punkten äußern, in denen Sie selbst gefühlsmäßig stark engagiert sind.
왘
Nicht nur was Sie erzählen, auch wie Sie es erzählen, ist von Bedeutung. Wenn Sie Ihre persönliche Webseite beispielsweise zusätzlich auch als Mittel zur Jobsuche nutzen wollen, sollten Sie beachten,
286
Kapitel 5: Die eigene Internet-Präsenz dass findige Personalchefs (und solche, die sich dafür halten) aus scheinbar unauffälligen Formulierungen problemlos ein entlarvendes Bild Ihrer Persönlichkeit erstellen. Eigenschaften wie Bescheidenheit, Fähigkeit zur Selbstkritik und Teamgeist werden dabei schnell in Ängstlichkeit, mangelnde Qualifikation und fehlende Führungseigenschaften umgedeutet. Der Autor der obigen Webseite hätte – trotz aller Leistungen, die er vielleicht aufführen könnte – wegen seiner geradezu zwanghaften Profilierungs- und Gefallsucht und seiner leicht resignierten Grundhaltung daher auf dem freien Arbeitsmarkt wohl kaum eine Chance. Soviel vorab, lassen Sie uns nun mit der Erstellung einer eigenen Homepage beginnen.
Eine typische Homepage Einfache private Homepages bestanden früher aus einer einzigen Webseite, auf der sämtliche Inhalte untereinander aufgeführt wurden. Diese Websites der ersten Generation findet man heute immer seltener. Standard ist für private Websites mittlerweile ein Aufbau aus einer zentralen Startseite (der Homepage) und einer Reihe von untergeordneten Webseiten, die über Hyperlinks von der Homepage aus erreichbar sind. Websites mit einem solchen Aufbau bezeichnet man auch als Websites der zweiten Generation.
Bild 5.2: Aufbau einer Website der 2. Generation Im Folgenden werden wir ein einfaches privates Web der 2. Generation erstellen. Das Web Wir beginnen mit dem Anlegen des Webs.
287
Eine typische Homepage
Bild 5.3: Die Homepage des privaten Webs 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag WEBVORLAGEN. 2. Wählen Sie als Vorlage das STANDARDWEB. 3. Geben Sie die Adresse (Pfad oder URL) des neu anzulegenden Webs an. 4. Wechseln Sie in die Ordner-Ansicht. In der Ordner-Ansicht sollten jetzt die von FrontPage angelegte Verzeichnisstruktur des Webs und die Homepage des Webs angezeigt werden. 5. Legen Sie mithilfe des Symbolschalters NEUE NORMALE SEITE ERSTELLEN (oder den Befehl DATEI/NEU/SEITE ODER WEB/LEERE SEITE) drei oder vier weitere Seiten an. Weisen Sie den Seiten direkt in der OrdnerAnsicht Namen zu. FrontPage markiert dazu bereits automatisch den Dateinamen und wechselt in den Editiermodus. Der eingetippte Name wird automatisch auch als Seitentitel übernommen.
288
Kapitel 5: Die eigene Internet-Präsenz Wie Sie die Seiten nennen, hängt davon ab, welche Inhalte Sie in den Seiten präsentieren wollen. Für das vorliegende Beispiel habe ich die Seiten Bonbons, Skifahren, Yeats und Telefonkarten genannt (was den Links entspricht, die später von der Homepage auf diese Seiten verweisen, siehe Bild 5.3), Sie sind natürlich aber frei, eine beliebige Zahl eigener Seiten mit eigenen Inhalten (Lebenslauf, Interessen, Fotogalerie etc.) anzulegen. Gestaltung der Homepage Die Homepage ist die zentrale Startseite des Webs, für deren Layout, Design und Gestaltung man ruhig etwas mehr Zeit aufbringen sollte – zumal Aufteilung und Design der Homepage üblicherweise für die untergeordneten Webseiten übernommen wird. Für unser erstes Beispiel wählen wir nichtsdestotrotz ein schlichtes Design und Layout, in dem die Inhalte einfach von oben nach unten aufgeführt werden. Komplexere Designvorschläge finden Sie in Kapitel 3 und den beiden nachfolgenden Abschnitten. 1. Doppelklicken Sie in der Ordnerliste auf die Datei index.htm, um sie in den Editor zu laden. 2. Setzen Sie den Text auf. Bauen Sie den Text etwa wie folgt auf: 왘 Titel 왘 Begrüßung 왘 Vorstellung und Smalltalk 왘 Links zu weiteren Seiten 왘 Angabe der E-Mail-Adresse 3. Markieren Sie den Titel. Weisen Sie dem Titel eine größere Schrift zu und lassen Sie den Absatz zentriert anzeigen. 4. Richten Sie die Hyperlinks zu den untergeordneten Seiten ein (Befehl EINFÜGEN/HYPERLINK). 5. Formatieren Sie die Hyperlinks als Aufzählung (Formatvorlagen-Listenfeld). 6. Richten Sie den E-Mail-Link ein (Befehl EINFÜGEN/HYPERLINK). 7. Wählen Sie ein freundliches Design für Ihre Website aus (Befehl FORMAT/DESIGN). Achten Sie darauf, dass Sie im DESIGNS-Dialog die Option ALLE SEITEN aktivieren, damit das Design automatisch auch für die anderen Seiten des Webs verwendet wird. 8. Fügen Sie eventuell ein Photo von sich ein (Befehl EINFÜGEN/GRAFIK/ AUS DATEI).
289
Die Vorlage »Persönliches Web« 9. Um den Text um das eingefügte Bild herum fließen zu lassen, klicken Sie mit der rechten Maustaste auf das Bild und wählen den Befehl BILDEIGENSCHAFTEN auf. Auf der Dialogseite ERSCHEINUNGSBILD wählen Sie eine der Optionen LINKS oder RECHTS. Sollen nachfolgende Absätze unter dem Bild beginnen (siehe Bild 5.3) fügen Sie vor dem ersten Absatz, der unterhalb des Bildes beginnen soll, einen manuellen Zeilenwechsel ein. Rufen Sie dazu den Befehl EINFÜGEN/MANUELLER UMBRUCH auf und wählen Sie eine der Optionen zum Freihalten des Randes – je nachdem an welchem Rand das Bild liegt. Die untergeordneten Seiten Setzen Sie zum Schluss die untergeordneten Seiten auf. Vergessen Sie nicht auf jeder der untergeordneten Seiten einen Hyperlink anzubieten, der zur Homepage zurückführt. Vielleicht überlegen Sie sich auch, die Struktur Ihres Webs in der Navigations-Ansicht nachzubilden und dann Hyperlinkleisten in den untergeordneten Webseiten anzulegen.
Die Vorlage »Persönliches Web« Wer sich vom schlichten Top-Down-Design lösen möchte, der muss zur Aufteilung seiner Webseiten auf Tabellen (siehe Kapitel 2), Frames (siehe Kapitel 3) oder noch modernere Techniken wie CSS-Positionierung oder Flash zurückgreifen. Wie eine typische private Homepage, die auf einem Tabellen-Layout basiert, aussehen könnte, darüber haben sich die Leute bei Microsoft bereits jede Menge Gedanken gemacht. Das Ergebnis ist die Webvorlage PERSÖNLICHES WEB. 1. Rufen Sie den Befehl DATEI/NEU/SEITE ODER WEB auf und klicken Sie im Aufgabenbereich auf den Eintrag WEBVORLAGEN. 2. Markieren Sie im Dialogfeld WEBVORLAGEN den Eintrag PERSÖNLICHES WEB. 3. Geben Sie im gleichen Dialogfeld noch eine Adresse für das neue Web ein und drücken Sie dann auf OK. FrontPage erstellt für diese Vorlage ein komplettes Web, das Sie eigentlich nur noch mit Ihren eigenen Inhalten füllen müssen. Bevor Sie damit beginnen, sollten Sie sich aber einen Überblick über die Struktur des Webs und den Aufbau der einzelnen Seiten verschaffen.
290
Kapitel 5: Die eigene Internet-Präsenz
Bild 5.4: Oberer Teil der Startseite des Persönlichen Webs in der Vorschau
Analyse von Webvorlagen Die angelegten Webseiten Nach Erstellung des Webs befinden Sie sich in der Seitenansicht. Sofern Sie die Anzeige der Ordnerliste nicht über das Menü ANSICHT ausgeschaltet haben, können Sie dieser Liste entnehmen, welche Webseiten FrontPage für die ausgewählte Vorlage eingerichtet hat. Die Homepage Die Datei index.htm bezeichnet die Homepage (kann je nach Server auch default.htm heißen)1. Doppelklicken Sie in der Ansicht SEITE auf diese Datei, um sie im Editor anzuzeigen und sich einen ersten Eindruck zu verschaffen.
1. Zur Erinnerung: Wenn Sie mit Ihrem Browser einen Webserver oder ein Verzeichnis auf einem Webserver ansteuern, ohne den Namen einer HTML-Datei anzugeben, sucht der Webserver üblicherweise nach einer Datei namens index.htm, index.html oder default.htm, default.html und liefert diese zurück. Aus diesem Grund nennt FrontPage Ihre Homepage index.htm, und aus dem gleichen Grund sollten Sie diesen Namen beibehalten.
291
Die Vorlage »Persönliches Web«
Bild 5.5: Die Vorgabedateien des Persönlichen Webs In Bild 5.5 können Sie an den gestrichelten Linien auf der Webseite index.htm erkennen, dass FrontPage für diese Seite bereits Tabellen zur Aufteilung der Webseite angelegt hat. Auch Hyperlinkleisten zur Navigation des Webs wurden bereits eingerichtet: eine vertikale Leiste am linken Rand und eine horizontale Leiste am Fuße der Seite. Der Besucher der Website wird also auf der Homepage begrüßt und kann dann über die Hyperlinks in der Hyperlinkleiste zu den untergeordneten Seiten springen. Das allgemeine Layout Homepage und untergeordnete Webseiten verwenden jeweils das gleiche FrontPage-Design (Netzwerk), das gleiche Tabellenlayout und die gleichen Navigationselemente (Hyperlinkleisten am linken und unteren Rand). Der allen Webseiten gemeinsame Grundaufbau, der immerhin aus drei Tabellen besteht, ist in Bild 5.6 verdeutlicht.
292
Kapitel 5: Die eigene Internet-Präsenz
Bild 5.6: Der Grundaufbau der Webseiten Die Navigationsstruktur Die in allen Webseiten vorhandenen FrontPage-Hyperlinkleisten stellen sicher, dass Websurfer, die das Web besuchen, bequem von jeder Seite des Webs zu jeder anderen Seite des Webs springen können. Die Hyperlinkleisten der Homepage enthalten zu diesem Zweck Links auf alle untergeordneten Seiten des Webs; die Hyperlinkleisten der untergeordneten Webseiten enthalten Links zur Homepage und zu allen anderen untergeordneten Seiten.
293
Die Vorlage »Persönliches Web« Damit die gewünschten Links in den Hyperlinkleisten eingetragen werden, wurden die Hyperlinkleisten von FrontPage entsprechend konfiguriert. Auch die den Hyperlinkleisten zugrunde liegende Navigationsstruktur wurde bereits eingerichtet. Wechseln Sie jetzt in die Navigationsansicht.
Bild 5.7: Die Navigationsstruktur des Webs Wie Sie sehen, haben wir es mit einer recht einfachen Navigationsstruktur aus zwei Ebenen zu tun: in der obersten Ebene steht allein die Homepage, in der Ebene darunter stehen die fünf untergeordneten Seiten. Zur Erinnerung:
왘
Die Navigationsstruktur ist keine grafische Darstellung der Hyperlinkverbindungen zwischen den Seiten. Diese Darstellung liefert die Hyperlinks-Ansicht, die wir uns gleich anschauen werden.
왘
Die Navigationsstruktur allein richtet überhaupt keine Hyperlinks zwischen Seiten ein! Alles was die Navigationsstruktur macht, ist die Seiten eines Webs in Ebenen anzuordnen. (Wobei nicht alle Seiten des Webs in diese Ebenen eingeordnet werden müssen.)
294
Kapitel 5: Die eigene Internet-Präsenz Die Navigationsstruktur ist wichtig für die FrontPage-Hyperlinkleisten. Bei deren Einrichtung wählen Sie nämlich aus, zu welchen Ebenen (übergeordnete, gleiche, untergeordnete) und welchen speziellen Webseiten (Homepage, übergeordnet) die Hyperlinkleiste Links anzeigen soll. Sie wählen also nur die Ebene aus, welche Webseiten zu diesen Ebenen gehören, wird durch die Navigationsstruktur festgelegt.
왘
Die Titel der Links in den Hyperlinkleisten werden in der Navigationsansicht festgelegt. (Einfach in der grafischen Darstellung der Seiten in den Titel klicken und diesen editieren.)
Querverweis
왘
Siehe Kapitel 3 »Navigationsstrukturen für Webs« zur Einrichtung von Gemeinsamen Randbereichen, Navigationsstrukturen und Hyperlinkleisten.
Schauen wir uns noch kurz an, wie die Hyperlinkleisten konfiguriert wurden. Wechseln Sie zurück zur Seitenansicht. Klicken Sie sowohl in der Homepage als auch in einer der untergeordneten Seiten mit der rechten Maustaste auf eines der Elemente in der Hyperlinkleiste und rufen Sie im Kontextmenü den Befehl HYPERLINKLEISTENEIGENSCHAFTEN auf.
Bild 5.8: Konfiguration der Hyperlinkleisten aus Homepage und untergeordneten Seiten 295
Die Vorlage »Persönliches Web« In dem erscheinenden Dialogfeld wird Ihnen angezeigt, mit welchen Ebenen die Links der Hyperlinkleiste eine Verbindung herstellen:
왘
Auf der Homepage stellen die Hyperlinkleisten Verbindungen zur untergeordneten Ebene und zur Homepage her.
왘
Auf den untergeordneten Webseiten stellen die Hyperlinkleisten Verbindungen zu den anderen Seiten der gleichen Ebene und zur Homepage her.
Soweit zum Aufbau der Seiten. Welche Informationen sollen nun auf den Seiten angeboten werden? Die Inhalte der Seiten Abgesehen von den Hyperlinkleisten enthält die Homepage MEINE WEBSITE einen Begrüßungstext und vier Abschnitte mit Vorschauen auf die untergeordneten Webseiten. Füllen Sie die einzelnen Seiten mit eigenen Inhalten, wobei Sie von FrontPage aufgesetzte Kommentare und Schablonen löschen und ersetzen.
왘 Auf der Seite ÜBER MICH stellen Sie sich vor. Denken Sie daran, bei aller Offenheit auch Ihre Anonymität zu wahren. Verzichten Sie darauf Postadresse oder Telefonnummer anzugeben.
왘 Die Seite FAVORITEN enthält eine Liste von Hyperlinks, die Sie anderen weiterempfehlen möchten. Löschen Sie Hyperlinks, die Ihnen nicht gefallen, und fügen Sie eigene Hyperlinks hinzu.
왘 Über die Seite FEEDBACK können die Besucher der Website Kon-
takt mit Ihnen aufnehmen. Die Seite enthält ein Formular, über das man Anregungen und Kritik sowie eine Kontaktadresse hinterlassen kann. Hinter dem Formular steht eine Webkomponente, die die Daten nach dem Drücken des FEEDBACK SENDEN-Schalters des Formulars entgegen nimmt und in einer Datei _private/feedback.txt auf dem Webserver abspeichert. Damit die Formulardaten korrekt verarbeitet werden, müssen auf dem Server die FrontPage-Servererweiterungen eingerichtet sein, siehe auch nächster Abschnitt.
왘 Die Seite INTERESSEN enthält eine Aufzählung Ihrer Hobbys und Interessengebiete. Hier könnte man auch Vereine oder Projekte aufführen, in denen man sich engagiert, oder von Träumen und Idealen erzählen, denen man nachhängt.
296
Kapitel 5: Die eigene Internet-Präsenz
왘 Die Seite FOTOALBUM enthält eine erweiterbare Bildergalerie. Hier können Sie Fotos von sich und Ihrer Familie veröffentlichen. Menschen vorstellen, die Ihnen nahe stehen oder die Sie bewundern, eine Ausstellung selbst geschossener Fotos präsentieren.
Die Vorlage individuell überarbeiten Abgesehen davon, dass Sie die von FrontPage angelegten Webseiten mit eigenen Inhalten füllen, können Sie natürlich auch Aufbau und Gestaltung des Webs und der Webseiten ändern.
왘 Sie können weitere Webseiten hinzufügen, 왘 Sie können die Navigationsstruktur ändern (beispielsweise eine 3. Ebene anlegen),
왘 Sie können das Tabellenlayout verändern, 왘 Sie können ein anderes FrontPage-Design verwenden. Was Sie auf jeden Fall noch tun sollten, ist zu kontrollieren, ob Ihr Web korrekt angezeigt wird, wenn es vom Webserver geladen wird. Kritisch sind vor allem der Zugriffszähler auf der Homepage und das Formular auf der Feedback-Seite. Beide verwenden nämlich FrontPage-Komponenten, die darauf angewiesen sind, dass auf dem Webserver die FrontPage-Servererweiterungen installiert sind. Sollte dies nicht der Fall sein (setzen Sie sich notfalls mit Ihrem Webadministrator oder Internet Service Provider in Verbindung, um diesen Punkt zu klären, sollten Sie die Komponenten nicht verwenden. Löschen Sie dann den Zugriffszähler und die Seite feedback.htm oder ersetzen Sie die Komponenten durch andere Lösungen. Wenn Sie trotz fehlender FrontPage-Servererweiterungen nicht auf die Einrichtung eines Zugriffszählers verzichten wollen, fragen Sie doch einmal bei Ihrem Webserver-Betreiber nach, ob dieser nicht eigene Implementierungen von Zugriffszählern anbietet, die Sie verwenden können. Unter Umständen kann Ihr Webserver Provider Ihnen sogar dabei helfen, das Formular so einzurichten, dass Sie es beibehalten können. (Vermutlich wird er Ihnen ein vordefinierte Webseite mit einem passenden Formular zur Verfügung stellen oder Ihnen ein CGI-Skript nennen, an das Sie die Formulareingaben schicken müssen. In letzterem Fall müssen Sie mit der rechten Maustaste in Ihr Formular klicken und den Befehl FORMULAREIGENSCHAFTEN aufrufen. In dem gleichnamigen Dialogfeld aktivieren Sie dann statt der Option SENDEN
297
Eine ausgefallenere Homepage AN die Option ANDERE EMPFÄNGER. Klicken Sie danach auf den Schalter OPTIONEN und geben Sie im Feld AKTION den relativen Pfad und den Na-
Hinweis
men des CGI-Skripts und im Feld METHODE den vom CGI-Skript unterstützten Übertragungsweg (GET oder POST) an – beides zu erfragen beim Webservice Provider. Wenn sich die Konfiguration des Formulars zu schwierig gestalten sollte, können Sie auf der Feedback-Seite statt eines Formulars auch einfach einen mailto-Hyperlink anbieten, über den die Besucher Ihrer Website Anregungen und Kritik per E-Mail an Sie schicken können. Wenn Sie einmal unsicher sind, welche Seiten FrontPageKomponenten enthalten, die auf eine spezielle Unterstützung auf Seiten des Webservers angewiesen sind, rufen Sie den Menübefehl ANSICHT/BERICHTE/PROBLEME/KOMPONENTENFEHLER auf. FrontPage öffnet daraufhin eine Berichte-Ansicht, in der alle Webseiten mit problematischen Komponenten aufgeführt werden.
Eine ausgefallenere Homepage Die Webvorlage PERSÖNLICHES WEB liefert Ihnen ein Webgerüst mit modernem Layout, wohl durchdachter Navigationsstruktur und attraktivem Design. Was Ihnen die Vorlage nicht bieten kann, ist Originalität und Individualität – schließlich müssen Sie davon ausgehen, dass Tausende von FrontPage-Nutzern weltweit Ihre Webs auf Basis dieser Vorlage erstellen. Grundsätzlich ist es natürlich nicht schlimm, dass es noch andere Webs mit gleichem Aufbau und Design gibt, und Individualität und Originalität erhält das Web ja auch durch Ihre persönlichen Inhalte. Den einen oder anderen Leser wird dies jedoch nicht befriedigen und er wird sich nach ausgefalleneren Design-Lösungen umsehen. Dazu muss man nicht gleich das ganze Design und Layout umstoßen. Eine einfache, kreative Möglichkeit, dem Web eine deutliche persönliche Note zu geben, besteht darin, es um eine Eingangsseite zu bereichern, die der zentralen Homepage vorgeschaltet wird.
298
Kapitel 5: Die eigene Internet-Präsenz
Erweiterung des Webs Ausgangspunkt ist das Persönliche Web aus dem letzten Abschnitt. Diesem soll eine Eingangsseite vorgeschaltet werden, so dass der Aufbau des Webs wie in Bild 5.9 aussieht.
Achtung
Bild 5.9: Aufbau des Webs mit Eingangsseite
Bild 5.9 visualisiert lediglich die Konzeption des Webs, sie entspricht nicht der FrontPage-Navigationsstruktur des Webs, wie sie in der Ansicht NAVIGATION angezeigt wird.
Bevor wir die Eingangsseite anlegen und dem Web hinzufügen, müssen wir uns entscheiden, welchen Namen die Eingangsseite erhalten soll. Genauer gesagt, ist zu entscheiden, ob die Eingangsseite oder die Homepage des Webs den Namen index.htm tragen soll. Wie bereits in Kapitel 3.2.4 beschrieben, wird die Seite mit dem Dateinamen index.htm (oder je nach Server auch index.html, default.htm, default.html) automatisch aufgerufen, wenn der Websurfer als URL keinen Dateinamen, sondern lediglich das Verzeichnis des Webs angibt (beispielsweise http://www.server.de/IhrName statt http://www.server.de/IhrName/index.htm). Wenn Sie für die Homepage, die FrontPage angelegt hat, den Dateinamen index.htm beibehalten und die Eingangsseite eingang.htm nennen, liefert der Webserver als Standarddatei des Webs die Homepage zurück. Websurfer, die nur den URL des Webs angeben, landen daher direkt auf der Homepage und bekommen die Eingangsseite nicht zu sehen. Um die Leute auf die Eingangsseite zu führen, müssen Sie den URL der Startseite bekannt machen. 299
Eine ausgefallenere Homepage Besser ist es meist, der Homepage einen anderen Namen zu geben und die Eingangsseite index.htm zu nennen – auch wenn dies ein wenig mehr Arbeit erfordert. 1. Wechseln Sie in die Ordner-Ansicht und nennen Sie die Datei index.htm in start.htm um (Befehl UMBENENNEN im Kontextmenü der Datei). Hyperlinks, die auf die Datei index.htm verweisen, sind jetzt ungültig. Sollten Sie also Hyperlinks auf die ehemalige Datei index.htm eingerichtet haben, müssen Sie diese jetzt ändern und auf start.htm richten. Auch die Hyperlinkleisten sind nicht mehr korrekt eingerichtet. Zwar basieren die Hyperlinkleisten auf der Navigationsstruktur und sind daher unabhängig von den Dateinamen (wenn Sie den Namen einer Datei ändern, die zur Navigationsstruktur gehört, sorgt die interne Implementierung der Navigationsstruktur dafür, dass die Hyperlinkleisten automatisch auf die richtige Datei verweisen), doch hat sich durch die Änderung des Namens der Homepage auch die Navigationsstruktur geändert. Die neue Datei homepage.htm wird nämlich nicht mehr als Homepage angesehen. Bei der Konfiguration der Hyperlinkleisten wurde aber stets auch angegeben, dass ein Link auf die Homepage angezeigt werden soll (siehe Bild 5.8). Diese Einstellung stimmt nun nicht mehr. Unsere ehemalige Homepage ist nun nur noch die übergeordnete Datei. 2. Öffnen Sie nacheinander die einzelnen Webseiten. Rufen Sie jeweils für beide Hyperlinkleisten das Dialogfeld EIGENSCHAFTEN DER HYPERLINKLEISTE auf (Befehl HYPERLINKLEISTENEIGENSCHAFTEN im Kontextmenü) und aktivieren Sie statt der Option HOMEPAGE die Option ÜBERGEORDNETE SEITE. Die übergeordnete Seite zur Webseite start.htm ist die neue HomepageSeite index.htm, die wir im nächsten Schritt anlegen. Grundsätzlich ist es nicht nötig, einen Link zurück zur Eingangsseite anzubieten. Der Besucher kann ja notfalls das Web neu ansteuern. Für die Hyperlinkleisten der Seite start.htm brauchen Sie also nur die Option HOMEPAGE zu deaktivieren. Jetzt wird die Eingangsseite angelegt. 3. Klicken Sie in der Symbolleiste auf den Schalter NEUE NORMALE SEITE ERSTELLEN und speichern Sie die Seite unter dem Namen index.htm im Verzeichnis des Webs. (Vergessen Sie auch nicht, den Seitentitel zu ändern, Schalter TITEL ÄNDERN im SPEICHER UNTER-Dalog)
300
Kapitel 5: Die eigene Internet-Präsenz
Gestaltung der Eingangsseite Bei der Gestaltung der Eingangsseite hat man meist wesentlich mehr Freiheiten als beim Aufsetzen der anderen Webseiten. Eingangsseiten benötigen keine aufwendigen Hyperlinkleisten oder andere Navigationselemente, ein einfacher Hyperlink zur Hauptseite des Webs genügt. Eingangsseiten dürfen ruhig etwas verspielter sein; wenn Sie also gerne eine lustige GIF-Animation oder eine Bildwechsler-Komponente in Ihrem Web unterbringen würden, diese aber zum Design oder Inhalt der anderen Seiten einfach nicht passt, könnte die Eingangsseite der geeignete Ort sein. Eingangsseiten müssen auch nicht unbedingt dem Grunddesign und Aufbau der restlichen Seiten des Webs folgen; sie sollten allerdings auch nicht in zu starkem Kontrast zu den anderen Webseiten stehen (einem sachlichen, vornehmlich informativen Web sollte man also keine flippige Pop-Art-Eingangsseite voranstellen). Auf jeden Fall sollte die Eingangsseite originell und attraktiv sein und den Besucher dazu animieren, in das Web einzutreten.
Bild 5.10: Eine individuelle Eingangsseite zu einem privaten Web 301
Eine ausgefallenere Homepage Sehen Sie sich beispielsweise die Eingangsseite aus Bild 5.10 an. Passend zum Sujet des Textes ist die Seite eher schlicht und seriös gehalten, wirkt aber gleichzeitig durch die freie Seitenaufteilung und die warmen Farben interessant und ansprechend. Wenn Sie Ihre Eingangsseite in der gleichen Weise aufbauen wollen, gehen Sie wie folgt vor: 1. Laden Sie die Seite in den Editor. Doppelklicken Sie dazu in der Ordnerliste auf die Datei index.htm. 2. Weisen Sie der Seite ein eigenes FrontPage-Design zu. Rufen Sie den Befehl FORMAT/DESIGN auf. Achten Sie darauf, dass die Option AUSGEWÄHLTE SEITE(N) aktiviert ist, damit die anderen Seiten des Webs ihr altes FrontPage-Design behalten. Wählen Sie dann in der Liste ein passendes Design aus (im Beispiel EXPEDITION). 3. Legen Sie eine Tabelle mit drei Zeilen und einer Spalte an. Die mittlere Zeile teilen Sie in zwei Spalten (Befehl TABELLE/ZELLEN TEILEN). 4. Die erste Zeile wird zu unserem Titel (gegenüber der Verwendung eines Banners hat dies den Vorteil, dass der Titel immer der Breite der Tabelle angepasst wird. Geben Sie in die erste Zeile den Titel ein – beispielsweise »Wahre Worte sind nicht schön«. Die Klammern müssen Sie als Sonderzeichen eingeben (Befehl EINFÜGEN/SYMBOL). Markieren Sie den Text und rufen Sie den Befehl FORMAT/ZEICHEN auf. Setzen Sie den Schriftgrad auf 6, den Schriftschnitt auf FETT und die Farbe auf WEISS. Rufen Sie den Befehl TABELLE/TABELLENEIGENSCHAFTEN/ZELLE auf und wählen Sie Violett als Hintergrundfarbe. Wählen Sie ZENTRIERT als horizontale Ausrichtung. 5. In die rechte Zelle der mittleren Zeile geben Sie Ihren Begrüßungstext ein. 6. In die linke obere Zelle fügen Sie mithilfe des Befehls EINFÜGEN/GRAFIK/AUS DATEI ein Bild von sich ein. Sofern Ihr Name nicht weiter auf der Eingangsseite genannt wird, können Sie sich überlegen, Ihren Namen in das Bild zu schreiben. Richten Sie das Bild über die Zelleneigenschaften horizontal und vertikal mittig aus. 7. In der unteren Zeile können Sie weiteren Text einfügen sowie den Hyperlink zur zentralen Startseite des Webs (Hyperlink-Text markieren und Befehl EINFÜGEN/HYPERLINK aufrufen). 8. Legen Sie die Breite der Tabelle fest und blenden Sie den Tabellenrahmen aus. Statt die Tabellenbreite immer an das Browserfenster anpassen zu lassen (Breite = 100 %), ist es meist schöner, die Tabellenbreite festzusetzen
302
Kapitel 5: Die eigene Internet-Präsenz und die Tabelle zentrieren zu lassen. Rufen Sie dazu das Dialogfeld TABELLENEIGENSCHAFTEN auf, setzen Sie die Breite auf eine passende Pixelanzahl (für das obige Beispiel wurden 600 Pixel festgelegt) und wählen Sie als Ausrichtung ZENTRIERT. Setzen Sie die STÄRKE des Rahmens auf 0. 9. Speichern Sie die Seite.
Firmen-Webs Als Mitglied der Office-Familie ist FrontPage nicht nur dem privaten Anwender, sondern ebenso dem Unternehmensbereich verpflichtet. Neben der Vorlage PERSÖNLICHES WEB, das man als Ausgangspunkt zur Erstellung privater Homepages nutzen kann, stellt FrontPage daher eine kleine, aber sehr nützliche Auswahl an Webvorlagen für den Einsatz in kleineren und größeren Unternehmen zur Verfügung. Wenn Sie also als mittelständischer Unternehmer daran interessiert sind, Ihr Unternehmen und Ihre Produkte im Internet zu präsentieren, oder als Webadministrator Ihrer Firma im firmeneigenen Intranet ein Begleit-Web zu einem laufenden Projekt anlegen wollen, sollten Sie sich unbedingt über die betreffenden Webvorlagen informieren (siehe auch Kapitel 3) und überlegen, ob Sie nicht eines davon als Ausgangspunkt für Ihr Web nutzen möchten.
Web veröffentlichen Mittlerweile ist Ihr Web so weit gediehen, dass es der breiten Öffentlichkeit vorgestellt werden kann, das heißt, 1. Sie haben das Web mit mehreren Browsern getestet. (Testen Sie möglichst mit Internet Explorer, Netscape 6, Netscape Navigator.) 2. Sie verfügen über einen Internet-/Intranet-Zugang. 3. Sie haben Zugriffsrechte zu einem Internet-Webserver und kennen die Zieladresse und Ihr Passwort. Falls Sie noch keinen Webserver-Provider haben:
왘 Erkundigen Sie sich zuerst bei Ihrem Internet-Provider. Bei den meisten Online-Dienstanbieter (T-Online, CompuServe, AOL etc.) gehört die Einrichtung privater Homepages zum Standardangebot.
303
Web veröffentlichen
왘 Viele Firmen mit firmeneigenen Intranets bieten Ihren Angestellten einen Webserver zur Veröffentlichung von Homepages im Intranet und/oder Internet zur Verfügung.
왘 Stöbern Sie in Internet-Zeitschriften nach entsprechenden Angeboten.
왘 Rufen Sie den Befehl DATEI/WEB VERÖFFENTLICHEN auf und klicken Sie im erscheinenden Dialogfeld auf den Link, der Sie zu der Liste von Webpräsenzprovidern mit FrontPage-Unterstützung führt.
4. Sie haben die Vorgaben Ihres Webservers bezüglich Name der Homepage, Dateiendungen etc. beachtet. Erkundigen Sie sich gegebenenfalls bei Ihrem Webserver-Provider. Die weitere Vorgehensweise hängt von der Ausstattung Ihres InternetProviders ab.
왘
Verfügt Ihr Internet-Provider über die FrontPage-Servererweiterungen rufen Sie einfach den Befehl DATEI/WEB VERÖFFENTLICHEN auf. (Das zu veröffentlichende Web sollte dabei natürlich in FrontPage geladen sein.)
왘
Wenn Sie sich nicht sicher sind, ob Ihr Internet-Provider die FrontPage-Servererweiterungen unterstützt, rufen Sie einfach einmal den Befehl DATEI/WEB VERÖFFENTLICHEN auf und versuchen Sie, Ihr Web zu veröffentlichen. Wenn Sie dabei eine Fehlermeldung empfangen, dass Ihr Provider die FrontPage-Servererweiterungen anscheinend nicht installiert hat, fragen Sie bei Ihrem Provider nach oder versuchen Sie das Web via FTP zu veröffentlichen.
왘
Wenn Sie gerne zu einem Internet-Provider wechseln würden, der die FrontPage-Servererweiterungen unterstützt, rufen Sie ebenfalls den Befehl DATEI/WEB VERÖFFENTLICHEN auf, klicken dann aber auf den Link, der Sie zu der Suchseite für Webpräsenz-Provider führt, die die FrontPage-Servererweiterungen unterstützen.
왘
Wenn Sie Ihr Web auf einen Server ohne FrontPage-Servererweiterungen hochladen wollen, müssen Sie eines der vielen verfügbaren FTP-Dienstprogramme verwenden (siehe unten).
304
Achtung
Kapitel 5: Die eigene Internet-Präsenz
Denken Sie daran, dass die FrontPage-Servererweiterungen nicht nur für die Veröffentlichung des Webs, sondern auch für bestimmte FrontPage-Komponenten benötigt werden. Komponenten, die auf die FrontPage-Servererweiterungen angewiesen sind, sind auf Servern ohne die FrontPage-Servererweiterungen nicht lauffähig (siehe Kapitel 2).
Veröffentlichung auf einem Webserver mit den FrontPageServererweiterungen Am einfachsten gestaltet sich das Hochladen der Webdateien, wenn Ihr Internet-Webserver die FrontPage-Servererweiterungen unterstützt (siehe Kapitel 1).
Bild 5.11: Auf Webserver mit FP-Servererweiterungen veröffentlichen 1. 2. 3. 4.
Öffnen Sie das Web. Stellen Sie eine Internet-Verbindung her. Rufen Sie den Befehl DATEI/WEB VERÖFFENTLICHEN auf. Geben Sie im Eingabefeld den URL des Webservers und das Verzeichnis auf dem Webserver an, in das die Dateien Ihres Webs hochgeladen werden sollen.
305
Web veröffentlichen 5. Klicken Sie im Dialogfenster WEB VERÖFFENTLICHEN auf den Schalter OPTIONEN, um festzulegen, welche Dateien des Webs hochgeladen werden sollen. 6. Klicken Sie auf den Schalter VERÖFFENTLICHEN.
Hinweis
Die Dateien werden direkt übertragen.
Sie können die Übertragung testen, indem Sie das Web in ein neues Verzeichnis auf Ihrem lokalen Webserver veröffentlichen (vorausgesetzt, Sie haben die Servererweiterungen installiert).
Veröffentlichung auf einem Webserver ohne FrontPageServererweiterungen Wenn Sie Ihr Web auf einen Server ohne FrontPage-Servererweiterungen hochladen wollen, verwenden Sie am besten eines der vielen verfügbaren FTP-Dienstprogramme. Wenn Sie wollen, können Sie beispielsweise den Webpublishing-Assistenten von Microsoft verwenden, der mit den Windows-Betriebssystemen ausgeliefert wird. Ich persönlich ziehe allerdings WS_FTP von Ipswitch vor, da dieses Programm dem Anwender mehr Informationen über Quell- und Zielverzeichnis und die laufende Datenübertragung bietet. Außerdem wird dieses Programm (oder seine Light-Version ws_ftple.exe) von vielen Webserver-Providern (beispielsweise CompuServe und T-Online) empfohlen und unterstützt. WS_FTP installieren 1. Laden Sie die kostenlose Light-Version von WS_FTP herunter. Steuern Sie dazu den URL ftp://ftp1.ipswitch.com/pub/win32/WS_FTPLE.exe an und speichern Sie die EXE-Datei auf Ihrer Festplatte. 2. Doppelklicken Sie auf die heruntergeladene EXE-Datei und folgen Sie den Anweisungen in den Dialogen. Webs mit WS_FTP hochladen 1. Starten Sie das Programm über das Windows-Menü START/PROGRAMME. 2. Es erscheint automatisch das SESSION-Dialogfenster, in dem Sie die Daten für die Verbindung eingeben können.
306
Kapitel 5: Die eigene Internet-Präsenz
Bild 5.12: Verbindungsdaten eingeben Wenn Sie das nächste Mal WS_FTP aufrufen, klicken Sie im Hauptfenster auf den Schalter CONNECT, um dieses Dialogfenster aufzurufen. 3. Geben Sie auf der Registerkarte GENERAL einen frei wählbaren Namen für die herzustellende Verbindung (Profil), die Adresse des FTP-Servers, auf den Sie die Daten hochladen wollen, sowie den Benutzernamen (User ID) und das Passwort, die Sie von Ihrem Webserver-Provider zugeteilt bekommen haben, ein. Wenn Sie das nächste Mal WS_FTP aufrufen, brauchen Sie die Daten nicht mehr erneut einzugeben, sondern wählen einfach das Profil aus. Drücken Sie noch nicht auf OK! 4. Stellen Sie jetzt eine Internetverbindung her (Anwahl über Modem etc.) 5. Drücken Sie jetzt im SESSION-Dialogfenster auf OK, um sich auf dem Rechner Ihres Webserver-Providers einzuloggen. Sie sehen jetzt das zweigeteilte Hauptfenster von WS_FTP. Links werden die Verzeichnisse Ihres lokalen Systems angezeigt, rechts die Verzeichnisse des entfernten Webservers (sobald wir uns auf diesem eingeloggt haben).
307
Web veröffentlichen 6. Klicken Sie im linken Teil auf den Schalter CHGDIR und wechseln Sie zu dem Wurzelverzeichnis des hochzuladenden Webs (bzw. des Verzeichnisses, in dem die hochzuladenden Dateien stehen).
Bild 5.13: Die Verbindung zum Webserver wurde hergestellt 7. Klicken Sie im rechten Teil auf den Schalter CHGDIR und wechseln Sie zu dem Verzeichnis, in das Sie Ihre Webdateien hochladen wollen (unter Umständen beim Webserver-Provider zu erfragen). Wenn Sie möchten, dass WS-FTP automatisch bei Herstellung der Verbindung in ein bestimmtes Verzeichnis wechselt, geben Sie im SESSIONDialogfenster auf der Registerkarte STARTUP das gewünschte Verzeichnis im Eingabefeld INITIAL REMOTE SITE FOLDER an. 8. Markieren Sie im linken Fenster die Dateien und Unterverzeichnisse, die Sie hochladen wollen (Mehrfachauswahl ist bei gedrückter (Strg)- oder (ª)-Taste möglich). 9. Drücken Sie auf den Pfeil-Schalter von WS_FTP, um die Dateien auf den Webserver zu übertragen. 10. Beenden Sie die Verbindung.
308
Kapitel 5: Die eigene Internet-Präsenz
Veröffentlichung unter CompuServe Wenn Sie Kunde bei CompuServe sind, können Sie Ihre private Homepage unter OurWorld veröffentlichen (zu finden unter GO OURWORLD). Zur Dateiübertragung können Sie beispielsweise das oben beschriebene FTP-Programm WS-FTP verwenden. Alle nötigen Einstellungen für die Dateiübertragung – sowie allgemeine Informationen und Tipps zur Veröffentlichung unter OurWorld – können Sie aus dem Internet abfragen.
Bild 5.14: CompuServe – OurWorld 1. Loggen Sie sich auf der CompuServe-Website http://cs2000.compuserve.com ein. 2. Über die Links COMMUNITY und OURWORLD gelangen Sie zur OurWorld-Website. Klicken Sie dort auf den Link EIGENE HOMEPAGE. 3. Folgen Sie den angebotenen Links, um sich über das Hochladen der Homepage zu informieren und ein passendes FTP-Programm herunterzuladen.
309
Hinweis
Web veröffentlichen
Nichts ist so schnelllebig wie das World Wide Web. Es ist daher möglich, dass sich einzelne Links oder Angaben aus diesem Kapitel nach der Drucklegung des Buchs geändert haben.
OurWorld stellt Ihnen für Ihr Web 6 MByte Festplattenspeicher zur Verfügung. Die Veröffentlichung eines privaten Webs ist kostenfrei. Die Homepage muss den Namen index.htm tragen. Ihr Web wird unter dem URL http://ourworld.cs.com/IhrBenutzername/ veröffentlicht.
Veröffentlichung unter T-Online
Bild 5.15: Private Homepages unter T-Online
310
Kapitel 5: Die eigene Internet-Präsenz Wenn Sie Kunde bei T-Online sind, können Sie Ihre private Homepage direkt unter T-Online veröffentlichen. Zur Dateiübertragung können Sie beispielsweise das oben beschriebene FTP-Programm WS-FTP verwenden. Alle nötigen Einstellungen für die Dateiübertragung – sowie allgemeine Informationen und Tipps zur Veröffentlichung unter T-Online – können Sie aus dem Internet abfragen.
Hinweis
1. Loggen Sie sich auf der T-Online-Website http://www.t-online.de ein. 2. Klicken Sie auf den Link PRIVATE HOMEPAGES unter der Rubrik T-ONLINE SERVICES. 3. Folgen Sie den angebotenen Links, um sich über das Hochladen der Homepage zu informieren und ein passendes FTP-Programm herunterzuladen.
Nichts ist so schnelllebig wie das World Wide Web. Es ist daher möglich, dass sich einzelne Links oder Angaben aus diesem Kapitel nach der Drucklegung des Buchs geändert haben.
Die Veröffentlichung eines privaten Webs ist kostenfrei. Die Homepage muss den Namen index.htm tragen. Ihr Web wird unter Ihrem Alias oder Ihrer Teilnehmernummer veröffentlicht und lautet http://vorname.name.bei.t-online.de oder http://0000000000000000.bei.t-online.de.
Veröffentlichung unter AOL Wenn Sie Kunde bei AOL sind, können Sie Ihre private Homepage direkt unter AOL veröffentlichen. 1. Loggen Sie sich auf der AOL-Website http://www.aol.de ein. 2. Klicken Sie auf den Link 1-2-3 HOMEPAGE unter der Rubrik HOMETOWN. Unter AOL können Sie keine eigenen Webs hochladen. Stattdessen stellt Ihnen AOL einen formulargesteuerten Online-Webeditor zur Verfügung, mit dem Sie Ihre Homepage ad hoc erzeugen können.
311
Web bekannt machen
Web bekannt machen Zu guter Letzt müssen Sie Ihre Website im World Wide Web bekannt machen, denn was nützt die schönste Website, wenn sie von niemandem gefunden wird.
Hinweis
1. Schicken Sie E-Mails an Ihre Freunde, Bekannte und Kollegen. 2. Setzen Sie sich mit Webautoren in Verbindung, die über die gleichen Interessengebiete publizieren und fragen Sie an, ob diese Links auf Ihre Homepage einrichten möchten. 3. Melden Sie sich bei verschiedenen Suchmaschinen an, beispielsweise 왘 http://www.yellow.com 왘 http://www.yahoee.com 왘 http://www.submit-it.com
312
Bei manchen Suchmaschinen ist der direkte Eintrag in den Katalog mit einer Gebühr verbunden.
Anhang FrontPage konfigurieren Über die Befehle EXTRAS/OPTIONEN und EXTRAS/ANPASSEN können Sie FrontPage konfigurieren und an Ihre eigenen Bedürfnisse und Vorlieben anpassen.
Allgemeine Optionen
Bild A.1: Allgemeine Optionen Über den Befehl EXTRAS/OPTIONEN rufen Sie das mehrseitige Dialogfeld OPTIONEN auf. Auf der Seite ALLGEMEIN des Dialogs finden Sie eine Zusammenstellung verschiedener, allgemeiner Einstellungen. Sehen Sie sich die Einstellungen in Ruhe an und aktivieren Sie diejenigen, die Sie nutzen wollen. (Die Optionen sind weitgehend selbst erklärend. Sollten Sie bei einer Option nicht gleich wissen, was sie bedeutet, klicken Sie in der Titelleiste des Dialogs auf das Fragezeichen und ziehen Sie es mit der Maus über die Option.)
FrontPage konfigurieren Falls Sie einen Rechner verwenden, der Teil eines lokalen Netzwerks ist, dürfte der Schalter PROXYEINSTELLUNGEN für Sie interessant sein. Ein ProxyServer ist ein Server, der zwischen das Intranet und das Internet geschaltet ist. Ein solcher Server wird üblicherweise dazu verwendet, das Intranet vor unberechtigten Zugriffen von außen zu schützen (Firewall) und den Zugriff auf Internetseiten durch Zwischenspeicherung in einem lokalen Cache effizienter zu gestalten. Wenn Sie über einen Proxy-Server mit dem Internet verbunden sind, 1. klicken Sie auf den Schalter PROXYEINSTELLUNGEN. 2. klicken Sie im erscheinenden Dialog auf die LAN-Einstellungen für das lokale Intranet. 3. geben Sie Adresse und Port des Proxy-Servers an.
Editoren konfigurieren
Bild A.2: Editoren einrichten Auf der Registerkarte EDITOREN KONFIGURIEREN legen Sie fest, welches Programm zur Bearbeitung einer Datei aufgerufen wird, wenn Sie die Datei in der Ordner-Ansicht von FrontPage doppelklicken.
314
Anhang Editor für einen Datentyp festlegen 1. Rufen Sie den Befehl EXTRAS/OPTIONEN auf. 2. Wechseln Sie zur Registerkarte EDITOREN KONFIGURIEREN. 3. Klicken Sie auf die Schaltfläche HINZUFÜGEN. Es erscheint das Dialogfeld EDITORZUORDNUNG HINZUFÜGEN. 4. Geben Sie die aus drei Zeichen bestehende Dateiendung an, die den Dateityp kennzeichnet, der mit dem Editor bearbeitet werden soll. 5. Geben Sie einen Namen für das Editor-Programm ein. Der Name für den Editor ist frei wählbar. Er wird später im Dialogfeld MIT EDITOR ÖFFNEN angezeigt, das aufgerufen wird, wenn Sie die Datei über den Befehl ÖFFNEN MIT im Kontextmenü der Datei aufrufen.
Hinweis
6. Klicken Sie auf die Schaltfläche DURCHSUCHEN und wählen Sie die EXEDatei des Programms aus.
Die registrierten Editoren werden im Dialog MIT EDITOR aufgeführt.
ÖFFNEN
Datei mit beliebigem Editor aufrufen 1. Wechseln Sie in die Ordner-Ansicht. 2. Klicken Sie mit der rechten Maustaste auf die Datei. 3. Rufen Sie im Kontextmenü den Befehl ÖFFNEN MIT aus. 4. Wählen Sie im Dialog MIT EDITOR ÖFFNEN das gewünschte Bearbeitungsprogramm aus.
Symbolleisten und Menü anpassen Wie in allen Office-Anwendungen können Sie die Symbolleisten und die Menüleiste in vielfältiger Weise konfigurieren und anpassen. Symbolleisten ein- und ausblenden 왘 Öffnen Sie das Untermenü ANSICHT/SYMBOLLEISTEN und wählen Sie den Eintrag der Symbolleiste aus, die Sie ein- oder ausblenden wollen.
315
FrontPage konfigurieren Oder:
왘
Hinweis
Klicken Sie mit der rechten Maustaste auf den Hintergrund einer beliebigen Symbolleiste. Welche Symbolleisten aktuell angezeigt werden, wird im Untermenü durch die Häkchen vor den Namen der Symbolleisten angezeigt.
Symbolleisten aus dem Rahmen holen 1. Klicken Sie mit der Maus in den Hintergrund der Symbolleiste. 2. Ziehen Sie die Symbolleiste mit gedrückter Maustaste aus dem Rahmen heraus. Symbolleisten in den Rahmen integrieren 1. Klicken Sie mit der Maus in den Titel der frei platzierbaren Symbolleiste. 2. Ziehen Sie die Symbolleiste mit gedrückter Maustaste auf einen Rand des FrontPage-Rahmens. Neue Symbole in eine Symbolleiste aufnehmen Wenn Sie möchten, können Sie selbst festlegen, welche Symbole, sprich Befehle, in den FrontPage-Symbolleisten angezeigt werden. 1. Rufen Sie den Befehl EXTRAS/ANPASSEN auf. 2. Falls die Symbolleiste, deren Zusammensetzung Sie ändern möchten, nicht angezeigt wird, wechseln Sie im Dialogfeld ANPASSEN zur Seite SYMBOLLEISTEN und aktivieren Sie die Option für die Symbolleiste. 3. Wechseln Sie im Dialogfeld ANPASSEN zur Seite BEFEHLE. 4. Wählen Sie eine Kategorie, in der Sie den gesuchten Befehl vermuten. Als Antwort auf diese Auswahl wird die Auswahlliste im Feld BEFEHLE aktualisiert. 5. Klicken Sie im Feld BEFEHLE auf das Symbol zu dem gewünschten Befehl. 6. Ziehen Sie das Symbol mit gedrückter Maustaste in eine der Symbolleisten. Ein vertikaler Strich zeigt Ihnen, an welcher Position das Symbol eingefügt wird.
316
Anhang
Bild A.3: Weitere Symbole in die Symbolleiste aufnehmen Symbole aus der Symbolleiste entfernen Wenn Sie im Dialogfeld ANPASSEN zur Registerkarte BEFEHLE wechseln, schaltet FrontPage in den Überarbeitungsmodus für die Symbolleisten um. Rufen Sie den Befehl EXTRAS/ANPASSEN auf. Wechseln Sie im Dialogfeld ANPASSEN zur Seite BEFEHLE. Klicken Sie in der Symbolleiste auf das zu entfernende Symbol. Ziehen Sie das Symbol mit gedrückt gehaltener Maustaste aus der Symbolleiste heraus. 5. Lassen Sie die Maus los. 1. 2. 3. 4.
Menüleiste anpassen In der gleichen Weise, wie Sie die Symbolleisten anpassen, können Sie auch die Menüleiste anpassen.
317
PWS und IIS 1. Ziehen Sie den Befehl aus dem ANPASSEN-Dialog in das Menü. 2. Bewegen Sie den Mauszeiger mit gedrückter Maustaste auf den Titel des Menüs, um dieses aufklappen zu lassen. 3. Bewegen Sie die Maus zu der gewünschten Einfügeposition (wird durch einen schwarzen Strich angezeigt). 4. Lassen Sie die Maustaste los. Um einen Befehl aus einem Menü zu entfernen, gehen Sie analog vor und ziehen den zu entfernenden Befehl mit gedrückter Maustaste aus dem Menü heraus.
PWS und IIS Microsoft liefert seine Betriebssysteme je nach Betriebssystemversion mit dem IIS-Server oder mit dessen kleinerem Bruder dem PWS (Personal Web Server) aus. Beide Server können so konfiguriert werden, dass Sie CGI mit Perl-Skripten, ASP und PHP unterstützen.
Bezugsquellen und Installation
Hinweis
Die Standard-Webserver für die Windows-Plattformen, der Personal Webserver (PWS) und der Internet Information Server (IIS), werden zumeist direkt mit dem Betriebssystem ausgeliefert. Welchen Server man nutzen kann und wie dieser zu installieren ist, hängt dabei von der BetriebssystemVersion ab: Windows 95 oder Windows 98, Windows NT 4.0 oder Windows 2000, Workstation- oder Server-Version.
318
Der Betrieb eines lokalen Webservers erfordert, dass das TCP/IP-Protokoll installiert ist. Für Anwender von Windows 95/ 98 oder Windows NT 4.0 Workstation bedeutet dies, dass Sie den Rechner gegebenenfalls eigenhändig als Client-Rechner konfigurieren müssen. Rufen Sie dazu START/EINSTELLUNGEN/SYSTEMSTEUERUNG/NETZWERK auf und fügen Sie – falls nicht schon geschehen – über den Schalter HINZUFÜGEN die Netzwerkkomponenten CLIENT FÜR MICROSOFT-NETZWERKE und TCP/IPPROTOKOLL hinzu (siehe auch Kapitel 1 »Verzeichnispfad oder lokaler Server«).
Anhang Der folgenden Tabelle können Sie entnehmen, welche Server-Software von wo wie für welches Betriebssystem zu installieren ist.
Betriebssystem
Webserver
Windows 95
Verwenden Sie den Personal Webserver. Windows 95 wurde ausnahmslos ohne PWS ausgeliefert. Wenn Sie den Personal Webserver nachinstallieren wollen, müssen Sie ihn von der Microsoft-Website herunterladen. Er ist Teil des Windows NT 4.0 Option Pack für Windows 95 (zuletzt gefunden unter http://www.microsoft.com/ntserver/ nts/downloads/Recommended/NT4OptPk oder http:// www.microsoft.com/msdownload/ntoptionpack/askwiz.asp).
Windows 98
Verwenden Sie den Personal Webserver. Die Server-Software wird mit dem Betriebssystem zusammen ausgeliefert und kann über START/EINSTELLUNGEN/ SYTEMSTEUERUNG/SOFTWARE/WINDOWS SETUP installiert werden. Sie benötigen dazu die Betriebssystem-CDROM.
Windows Me
Die Millenium Edition scheint auf den ersten Blick eine Variante von Windows 98 zu sein, aber der Personal Web Server existiert laut Microsoft für dieses Betriebssystem nicht. Sie müssen also auf einen anderen Server umsteigen.
Windows NT 4.0 Workstation
Verwenden Sie den Personal Webserver. Der Personal Webserver für NT Workstation ist im Windows NT Option Pack enthalten (das man von der Microsoft-Website herunterladen kann, zuletzt gefunden unter http://www.microsoft.com/ntserver/nts/downloads/ Recommended/NT4OptPk oder http://www.microsoft.com/ msdownload/ntoptionpack/askwiz.asp).
Tabelle A.1:
Windows-Betriebssysteme und lokale Webserver
319
PWS und IIS
Betriebssystem
Webserver
Windows NT 4.0 Server
Verwenden Sie den Internet Information Webserver. Der IIS ist Bestandteil des NT Option Packs. (Beispielsweise im NT 4.0 Option Pack, zuletzt gefunden unter http://www.microsoft.com/ntserver/nts/downloads/ Recommended/NT4OptPk oder http://www.microsoft.com/ msdownload/ntoptionpack/askwiz.asp.)
Windows 2000 Professional
Verwenden Sie den Internet Information Server. Dieser befindet sich auf der Betriebssystem-CD-ROM und kann über die Systemsteuerung installiert werden.
Windows 2000 Server
Verwenden Sie den Internet Information Server. Dieser ist bereits in das Betriebssystem integriert.
Tabelle A.1:
Windows-Betriebssysteme und lokale Webserver (Forts.)
Server starten und konfigurieren Server starten Der PWS und der IIS werden üblicherweise automatisch gestartet und erscheinen beim Programmstart als Symbol in der Taskleiste. Über das Kontextmenü des Symbols kann der Webserver angehalten und weiter ausgeführt werden kann.
왘 왘
Unter Windows NT Workstation können Sie auch über EINSTELLUNGEN/SYSTEMSTEUERUNG/DIENSTE nachsehen, ob der Server läuft. Unter Windows 2000 Server können Sie unter (Achtung, der folgende Pfad ist etwas länger) START/PROGRAMME/VERWALTUNG/COMPUTERVERWALTUNG, Unterknoten DIENSTE UND ANWENDUNGEN/ INTERNET-INFORMATIONSDIENSTE, Eintrag STANDARDWEBSITE nachsehen, ob der Server läuft.
Konfiguration und Betrieb Der Personal Web Server für Windows 95/98 kann zum Teil über den Personal Web-Manager konfiguriert werden, zum Teil muss man direkt die Systemregistrierdatenbank bearbeiten (siehe nachfolgende Abschnitte zur Konfiguration für CGI mit Perl, ASP oder PHP).
320
Anhang
Hinweis
Unter Windows NT/2000 erfolgt die Konfiguration über den Internetdienst-Manager, der für NT Workstation zusammen mit den NT 4.0 Option Pack installiert wird und danach über START/PROGRAMME/WINDOWS NT OPTION PACK/ MICROSOFT PERSONAL WEB SERVER/INTERNETDIENSTMANAGER aufgerufen werden kann. Bei Windows 2000 Server ist der Internetdienst-Manager wie auch der IIS-Server in das Betriebssystem integriert und kann über START/PROGRAMME/VERWALTUNG/INTERNETDIENSTEMANAGER aufgerufen werden. Darüber hinaus kann der Webserver auch unter Windows NT/2000 über die Systemregistrierung konfiguriert werden. Unter Windows NT/2000 steht Ihnen eine Online-Hilfe mit Informationen zur Konfiguration und zum Betrieb des PWS/IIS zur Verfügung. Rufen Sie den Internet Explorer auf und steuern Sie den URL http://localhost/iishelp an.
Bild A.4: Online-Hilfe zu PWS/IIS unter Win NT/2000
321
Kleine HTML-Referenz Dokumentenverzeichnis Das Dokumentenverzeichnis ist das übergeordnete Verzeichnis, unter dem alle auf dem Webserver veröffentlichten Webseiten und Webs abgespeichert werden müssen. Das Dokumentenverzeichnis des Personal Web Servers (wie auch des IIS-Webservers) lautet standardmäßig C:\inetpub\wwwroot. Sie können entweder auf Ihrer Festplatte nachsehen, ob ein entsprechendes Verzeichnis angelegt wurde, oder das Verwaltungsprogramm zu Ihrem Webserver aufrufen. Im Falle des Personal Web-Managers brauchen Sie dazu nur auf das Symbol des Webservers in der Taskleiste doppelzuklicken. Wenn Sie mit dem IIS-Webserver arbeiten, müssen Sie das Administrationstool für die Internet-Informationsdienste aufrufen (für Windows 2000 Server erfolgt der Aufruf über START/PROGRAMME/VERWALTUNG/COMPUTERVERWALTUNG, Unterknoten DIENSTE UND ANWENDUNGEN/INTERNET-INFORMATIONSDIENSTE, Befehl EIGENSCHAFTEN im Kontextmenü zu STANDARDWEBSITE, Registerkarte BASISVERZEICHNIS).
Kleine HTML-Referenz
Hinweis
In der HTML-Ansicht des Editors können Sie den HTML-Code1 Ihrer Webseiten anschauen und direkt bearbeiten. Fortgeschrittene Anwender können dies nutzen, um den von FrontPage automatisch generierten HTML-Code nachzubearbeiten oder um Code zu erweitern, der über die FrontPage-Befehle nicht eingefügt werden kann.
1.
322
Einige der hier vorgestellten Tags und Attribute sollten laut HTML-4-Standard nicht mehr verwendet werden (Meist handelt es sich um Formatierungsanweisungen, für die man besser CSSStylesheets verwenden sollte). Da diese Tags und Attribute aber immer noch allgemein unterstützt und auch von FrontPage weiterhin verwendet werden, sind sie in der folgenden Referenz mit aufgeführt. (Zu Ihrer Orientierung haben ich die betreffenden Tags und Attribute mit einem Sternchen (*) gekennzeichnet.)
HTML ist eine Abkürzung für »Hypertext Markup Language«.
Anhang Wenn Sie bisher noch nie direkt mit HTML gearbeitet haben, sollten Sie die HTML-Ansicht und die vorliegende Referenz nutzen, um sich mit HTML vertraut zu machen.
Tags HTML-Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument in etwa vom Browser auf dem Bildschirm dargestellt werden soll. Diese Layout- und Formatierungsanweisungen heißen Tags und bestehen immer aus:
왘 왘 왘
einer öffnenden Klammer .
Man unterscheidet Tags mit und ohne Inhalt. Tags mit Inhalt treten paarweise auf, d.h., es gibt ein Starttag und ein Endtag. Das Endtag ist durch einen Slash / vor dem Tag-Namen gekennzeichnet, z.B. . Zwischen den Tags steht der Inhalt, der von den Tags beschrieben wird. Ich bin eine Überschrift
Hinweis
Tags ohne Inhalt fügen bestimmte sichtbare oder unsichtbare Elemente in die Webseite ein. Das Tag steht beispielsweise für einen Zeilenumbruch. Die Tag-Namen werden meist groß geschrieben, aber dies ist keine Vorschrift. Wer seine Webseiten in Hinblick auf XML und XHTML möglichst kompatibel halten will, der sollte die TagNamen klein schreiben (und Tags ohne Inhalt mit Leerzeichen und Slash schreiben: ).
Formatierung mit Tags Um zum Beispiel ein Wort oder eine Textpassage in Fettschrift (engl. Bold) darzustellen, schließt man den betreffenden Text einfach in die HTML-Tags und für Fettschrift ein:
323
Kleine HTML-Referenz Dieser Text ist fett ...
Zeilenumbrüche Hier muss man zwischen Umbrüchen im Text der Webseite (NormalAnsicht) und Umbrüchen im HTML-Code (HTML-Ansicht) unterscheiden. Wenn Sie in der Normal-Ansicht einen Zeilenumbruch erzwingen wollen, rufen Sie den Befehl EINFÜGEN/MANUELLER UMBRUCH auf. In der HTMLAnsicht tippen Sie stattdessen das Tag ein. Wie Sie den HTML-Code selbst umbrechen, spielt keine Rolle. Attribute In den meisten Tags können zusätzliche Optionen als Attribute angegeben werden. Grundsätzlich sieht die Syntax für alle Tags in HTML wie folgt aus:
Zum Beispiel:
Hinweis
Damit wird eine Grafik dargestellt, die die Höhe 500 Punkte und Breite 200 Punkte hat. Die meisten Browser sind so tolerant, Werte auch ohne Anführungszeichen zu erkennen. Wer es ganz korrekt machen möchte, fügt diese aber hinzu.
Das HTML-Grundgerüst Ein HTML-Dokument sollte das folgende Grundgerüst enthalten. <TITLE> Das HTML-Grundgerüst
324
Anhang
Hier steht der eigentliche Text.
Hinweis
Die Einrückungen dienen lediglich der besseren Lesbarkeit.
Die Tags des Grundgerüsts haben folgende Bedeutung:
Tag
Beschreibung
Versionsinformation, die den Browser darüber informieren soll, welcher Version des HTML-Standards das vorliegende HTML-Dokument entspricht.
...
Zeigt an, dass das Dokument im HTML-Format vorliegt
...
Markiert den Kopfbereich des Dokuments, in dem der Titel definiert werden muss
<TITLE> ...
Gibt dem Dokument einen Namen. Er sollte kurz und aussagekräftig sein, da er bei vielen Browsern als Name für die Bookmarks verwendet wird
...
Markiert den Bereich, in dem der eigentliche Inhalt des Dokuments steht.
Achtung
Tabelle A.2:
HTML-Tags des Grundgerüsts
Lassen Sie sich nicht verwirren, falls Sie einmal Seiten sehen, bei denen manche der Tags fehlen. Es handelt sich nicht um eine korrekte HTML-Seite und sie wird nur deshalb korrekt angezeigt, weil viele Browser von sich aus die fehlenden Tags ergänzen.
325
Kleine HTML-Referenz – Der Textkörper Die -Tags umschließen den wichtigsten Teil Ihres HTML-Dokuments, den Textkörper. Hier sind die eigentlichen Informationen abgelegt, die später auf Ihrer Seite angezeigt werden. Zum BODY-Tag gehören eine Reihe optionaler Attribute, die zur so genannten Seiteneinstellung gehören und das Erscheinungsbild Ihrer Seite beeinflussen:
Attribut
Beschreibung
BACKGROUND*
Hintergrundbild
BGCOLOR*
Hintergrundfarbe Farben können entweder im (englischen) Klartext – zum Beispiel als »white« – angegeben werden oder als hexadezimaler Code #FFFFFF (für Weiß).
TEXT*
Textfarbe
LINK*
Farbe von Hyperlinks
VLINK*
Farbe von Hyperlinks, die bereits besucht wurden.
ALINK*
Farbe aktivierter Hyperlinks.
Tabelle A.3:
Traditionelle Body-Attribute
Layout- und Formatierungsbefehle Um das Layout des Textes im BODY-Bereich zu beeinflussen, steht eine Vielzahl von Tags zur Verfügung, von denen hier nur die wichtigsten aufgeführt sind. Überschriften (Headings) Um Überschriften hervorzuheben, gibt es 6 Heading Levels, H1 bis H6, die bewirken, dass ein größerer Font und/oder eine Fettschrift gewählt wird: Dies ist eine Überschrift
326
Anhang Absätze (Paragraphs) Anders als Dokumente in einem Textverarbeitungssystem beachtet der Browser nicht, wie lange eine Zeile ist und wo ein Zeilenumbruch im Quelltext steht. Dies geschieht immer dann, wenn ein Absatz-Tag
angetroffen wird oder ein Umbruch-Tag :
Dies ist ein Beispiel für einen Absatz. Eingegebene RETURNs werden ignoriert. Ein Umbruch erfolgt vom Browser erst dann, wenn ein neuer Paragraph angezeigt wird.
Hier beginnt ein neuer Abschnitt. Ein Zeilenumbruch kann auch mit dem BR-Tag erzwungen werden.
Die Ausrichtung eines Absatzes kann mithilfe eines Stylesheets oder mithilfe des ALIGN-Attributs festgelegt werden.
Ausrichtung
Beschreibung
..
*
linksbündig
..
*
zentriert
..
*
rechtsbündig
Tabelle A.4:
Absatzausrichtung mit ALIGN
Horizontale Linien Eine teils beliebte, teils verpönte Gliederung in HTML-Dokumenten ist die Abgrenzung von Textpassagen durch horizontale Linien mit dem -Tag. Hervorheben von Text Um Textpassagen vom übrigen Text hervorzuheben, gibt es zwei Kategorien von Formatierungen:
왘 왘
physikalische Formatierungen und logische Formatierungen.
Physikalische Formatierungen Formatierungen, die konkret vorschreiben, wie der Text aussehen soll: z.B. eine größere Schriftart, Fettdruck oder Kursivschrift, unterstrichen, blinkende Schrift, usw.
327
Kleine HTML-Referenz
Tag
Beschreibung
...
Fettschrift
...
Kursivschrift
<SMALL> ...
kleine Schrift
...
große Schrift
<STRIKE> ... *
durchgestrichener Text
... *
unterstrichener Text
...
Schreibmaschinenschrift
<SUB> ...
Tiefer gestellter Text
<SUP> ...
Höher gestellter Text
... *
ändert die Schriftgröße (n zwischen 1 und 7)
... *
ändert die Schriftart
... *
ändert die Schriftfarbe
Tabelle A.5:
Physikalische Formatierungen
Logische Formatierungen Bedenkt man den Ursprung von HTML, einem Format, bei dem es vor allem darum ging, Struktur in wissenschaftliche Texte zu bringen und diese leicht mit dem Computer auswerten zu können, sind die logischen Textauszeichnungen eigentlich die typischen HTML-Formatierungen. Logische Schriftauszeichnungen werden dazu verwendet, um inhaltlich verwandte Textstellen besonders zu kennzeichnen, so können Sie z.B. Definitionen oder Zitate hervorheben. Mit der logischen Auszeichnung ist abhängig vom verwendeten Browser meist auch eine besondere optische Hervorhebung verbunden.
<EM>
<SAMP>
Tabelle A.6: 328
Logische Formatierungen
Anhang
Listen (Aufzählungen und Nummerierungen) Nummerierte Listen und Aufzählungen sind beliebte Mittel, um Inhalt in gegliederter Form anzuzeigen. Nummerierte Listen verwendet man für Listeneinträge, die in einer bestimmten zeitlichen Abfolge oder Rangfolge stehen. Die Listeneinträge ungeordneter Aufzählungen werden nicht durchnummeriert, sondern die einzelnen Punkte beginnen mit Aufzählungszeichen (z.B. Punkt oder Quadrat). Man kann sie beispielsweise für Produktmerkmale oder Argumentationsaufzählungen nutzen. Nummerierte Listen
Die gesamte Liste wird zunächst mit dem OL-Tag umschlossen (ol = ordered list = nummerierte Liste).
Jedes einzelne Listenelement muss zusätzlich noch einmal in LI-Tags eingefügt werden (li = list item = Listenelement). Eine komplette Liste sieht also folgendermaßen aus:
Eintrag 1
Eintrag 2
Eintrag 3
Aufzählungen
Mit dem UL-Tag (ul = unordered list = ungeordnete Liste) wird eine einfache Aufzählung ohne Nummerierung eingefügt. Genau wie bei der nummerierten Liste, müssen die einzelnen Listenelemente in LI-Tags eingeschlossen werden.
329
Kleine HTML-Referenz
Tabellen Der Einsatz von Tabellen beschränkt sich nicht nur auf die tabellarische Darstellung von Daten, sondern wird heute in erster Linie zur Gestaltung der Seite eingesetzt. So können Sie zum Beispiel mehrspaltigen Text erzeugen oder Grafiken scheinbar frei platzieren. Wenn Sie dabei die Gitternetzlinien verschwinden lassen, erzielen Sie eine optisch gelungene Präsentation (so genannte »Blinde Tabellen«). Um tabellarische Daten anzuzeigen, können Sie Tabellen definieren und Ihre Textinformationen ablegen. Eine Tabelle besteht aus beliebig vielen Zellen und ist aufgeteilt in Spalten und Zeilen. Optional kann auch ein Tabellenkopf hinzugefügt werden.
– Definition einer Tabelle Die komplette Tabelle wird durch die TABLE-Tags eingeschlossen. Die Definition der einzelnen Zeilen und Spalten findet innerhalb dieses Bereichs statt. Rahmenstärke
Die Rahmenstärke der gesamten Tabelle lässt sich mit BORDER definieren. Setzen Sie hier den Wert Null ein, so erzeugen Sie eine Tabelle ohne sichtbares Gitternetz.
Das Attribut FRAME bietet seit HTML 4.0 neue Möglichkeiten für die Gestaltung des äußeren Randes der Tabelle. Mit dem Wert »Void« wird der äußere Rahmen z.B. nicht angezeigt.
FRAME-Wert
Bedeutung
Void
Kein Rahmen
Above
Rand oben
Below
Rand unten
Tabelle A.7:
330
Werte des Frame-Attrtibuts
Anhang
FRAME-Wert
Bedeutung
HSides
Rand oben und unten
LHS
Rand links
RHS
Rand rechts
VSides
Rand links und rechts
Box
Rand an allen Seiten
Border
Rand an allen Seiten
Tabelle A.7:
Werte des Frame-Attrtibuts (Forts.)
Gitterlinien
Mit RULES legen Sie die Umrahmung der einzelnen Zellen fest. Der Wert »None« sorgt dafür, dass einzelne Zellen keinen sichtbaren Rand erhalten. Möchten Sie einen Rand lediglich zwischen den einzelnen Spalten (Zeilen) erzeugen, so setzen Sie den Wert »Cols« (»Rows«) ein.
– Zeilen definieren Eine einzelne Zeile wird mit den TR-Tags definiert (TR = table row = Tabellenzeile). Die Reihenfolge innerhalb der Tabelle muss immer eingehalten werden: erst wird eine neue Zeile definiert und in dieser Zeile werden die Spalten definiert. In anderer Reihenfolge funktioniert es nicht.
– Zelleninhalt In die TD-Tags schließen Sie dann den eigentlichen Inhalt, den die Tabelle enthalten soll ein (TD = table data = Tabellendaten). Dabei spielt es keine Rolle um welche Art von Daten – Text oder Bilder – es sich handelt.
– Tabellenüberschriften Die TH-Tags sind eigentlich ein Ableger der normalen Datenzellen. Mit ihnen wird der Tabellenkopf (TH = table head = Tabellenkopf) definiert. Sie werden genau wie die TD-Tags innerhalb der Tabellenzeile eingesetzt. Der Tabellenkopf als erste Tabellenzeile wird von den meisten Browsern besonders hervorgehoben.
331
Kleine HTML-Referenz Eine komplette Tabelle mit Tabellenkopf, zusätzlich zwei weiteren Datenzeilen und insgesamt zwei Spalten wird wie folgt definiert. Die Einrückung dient hier nur der Übersicht:
Kopfzelle
Kopfzelle
Zeile 1 /
Zeile 1 /
Zeile 1 /
Zeile 1 /
Spalte 1 Spalte 2
Spalte 1 Spalte 2
Spalte 1 Spalte 2
Zellenabmaße
Die Größe einer Zelle kann explizit spezifiziert werden. Ansonsten passt der Browser Breite und Höhe automatisch dem Zelleninhalt an.
Hinweis
Bilder Die meisten Browser beschränken sich bei der Anzeige der Grafik auf die Formate GIF und JPEG, eventuelle PNG.
Um Grafiken in Ihren Text einzubinden, brauchen Sie
왘 왘
das IMG-Tag (img = image = Bild) und eine Datenquelle, die Sie mit SRC angeben (SRC = source = Datenquelle).
332
Anhang Rahmen um Bilder In der Standardeinstellung wird kein Rahmen um das Bild gezogen. Mit dem Attribut BORDER* kann die Rahmenstärke in Pixel angegeben werden.
Alternative Textdarstellung Mithilfe des ALT-Tags (ALT = alternativ) kann ein alternativer Text oder eine Bildbeschreibung zu der Grafik mitgeliefert werden. Dieser Text ist im Browser sichtbar, während das Bild übertragen wird, oder wenn die Bildübertragung ausgeschaltet ist.
Achtung
In früheren Versionen war dieses Attribut nur optional zu benutzen, im HTML 4.0-Regelwerk ist seine Nutzung zwingend vorgeschrieben.
Abstand zu umgebenden Text Sie können bestimmen, wie groß der Abstand zwischen Bild und umfließendem Text in Pixel sein soll. Mit VSPACE* geben Sie den vertikalen Abstand und mit HSPACE* den horizontalen Abstand an.
Ausrichtung
Grafiken, die Sie in den Text einbinden, können Sie auf verschiedene Arten mithilfe des ALIGN*-Attributs ausrichten. Sie bestimmen damit auch, wie der Text das Bild umfließt. Setzen Sie z.B. Ihre Grafik mit ALIGN="left" linksbündig auf die Seite, so wird folgende Text entsprechend rechts um das Bild herumfließen.
333
Kleine HTML-Referenz
ALIGN
Bedeutung
Left
Linksbündig / Text rechts
Right
Rechtsbündig / Text links
Top
Schriftoberkante bündig mit der Grafik
Middle
Text mittig zur Grafik
Bottom
Text untenbündig zur Grafik
Tabelle A.8:
Werte für das ALIGN-Attribut des IMG-Tags
Hyperlinks – Verweise auf andere Webseiten Das Besondere an den HTML-Dokumenten ist die Möglichkeit, anklickbare Verweise auf andere HTML-Seiten hinzuzufügen, die sich auch auf einem ganz anderen Rechner befinden. Hierzu dient eine Kombination aus dem Anker-Tag ... (der Anker für den Verweis) und dem Schlüsselwort HREF, dem der URL des Links mitgegeben wird.
Besuchen Sie doch mal den Webserver der Firma Sun!
Hyperlinks zu anderen Websites Text des Hyperlinks
Hyperlinks zu Webseiten der eigenen Website Zu Seite 2
Hyperlinks zu bestimmten Textstellen Zuerst muss in der Zielwebseite ein Zielpunkt (Textmarke) für den Hyperlink definiert werden. Zu Absatz 1
Dann kann der Hyperlink aufgesetzt werden:
334
Anhang Zu Absatz 1
Oder: Zu Absatz 1 auf Seite 1
Frames Frames bieten die Möglichkeit, den Bildschirm in verschiedene Bereiche aufzuteilen. In jedem Bereich des Fensters wird dann eine eigene HTML-Datei angezeigt. – Framesseiten-Aufbau Durch das FRAMESET-Tag wird dem Browser mitgeteilt, dass nun eine Frames-Definition folgt. Frame-Zeilen anlegen Möchten Sie Ihren Bildschirm in Zeilen unterteilen, so verwenden Sie das Attribut ROWS. Gleichzeitig geben Sie durch Kommata getrennt die Höhe der einzelnen Zeilen an. Entweder verwenden Sie hier absolute Pixelangaben oder Prozentwerte. Sie können statt einer Zahl auch einfach ein Sternchen (*) angeben, sofern Sie die Höhe nicht selbst bestimmen möchten. Die Höhe wird dann den Erfordernissen angepasst.
Frame-Spalten anlegen Um das Anzeigefenster in Spalten zu unterteilen, verwenden Sie analog zum ROWS-Befehl das COLS-Tag.
Framesets verschachteln Sie können mehrere Framesets ineinander verschachteln, um eine Aufteilung in Spalten und Zeilen zu erhalten. <TITLE>Framesseite
335
Kleine HTML-Referenz
Einzelne Frames definieren Um einen einzelnen Frame zu definieren und mit einem HTML-Dokument zu verbinden, verwendet man das -Tag.
Auch für die Definition der einzelnen Frames existieren weitere Attribute. Bildlaufleisten Kann in einem Rahmen nicht der komplette Inhalt des zugehörigen Dokuments angezeigt werden, so fügt der Browser automatisch Bildlaufleisten hinzu. Mit dem Attribut SCROLLING können Sie vorgeben, ob Bildlaufleisten in Frames eingeblendet werden sollen.
Wert
Beschreibung
SCROLLING = NO
Es werden keine Bildlaufleisten angezeigt.
SCROLLING = YES
Es werden immer Bildlaufleisten angezeigt.
SCROLLING = AUTO
Bildlaufleisten werden eingeblendet, wenn der Inhalt der Webseite nicht vollständig im Frame angezeigt werden kann.
Tabelle A.9:
336
Optionen für Bildlaufleisten in Frames
Anhang
Formulare Eine einfache Möglichkeit, um in Kontakt mit den Besuchern Ihrer Webseiten zu treten, bieten Formulare. Formulare bestehen aus
왘 왘
einer umschließende FORM-Definition.
왘
einem »Abschicken«-Schalter, um die Daten zum Server zu übertragen.
Formularfeldern der verschiedensten Art, über die der Besucher Daten in das Formular eingeben kann.
– Formular definieren
Formulareingaben verschicken Der Wert des Attributs METHOD legt die Übertragungsmethode fest (POST oder GET). Der Wert von ENCTYPE legt die Codierung der Formulardaten fest. Formulareingaben verarbeiten Als Wert für das ACTION-Attribut wird das CGI-Skript angegeben, das die Formulareingaben auf Seiten des Servers in Empfang nimmt und verarbeitet. Die Formularfelder Die Eingabe der Daten erfolgt in den Formularfelder des Formulars. Die verschiedenen Typen von Formularfeldern erlauben Eingaben unterschiedlichster Art und Weise: direktes Eintippen von Text (Texteingabefeld), Auswahl einer Option (Optionsfeld), Auswahl aus einer Liste (Listenfeld). Jedes Formularfeld verfügt über ein NAME-Attribut, über das das Formularfeld identifiziert werden kann, sowie ein weiteres Attribut, das den Wert der Eingabe in das Formularfeld aufnimmt – meist VALUE.
337
Kleine HTML-Referenz
Formularfeld
Beschreibung
Einzeiliges Textfeld
Zur Eingabe eines kurzen Textes.
Einzeiliges Textfeld
Eingabefeld zur verdeckten Eingabe von Daten, wie man sie beispielsweise zur Eingabe von Passwörtern benötigt. Statt der Buchstaben und Ziffern werden Platzhalter (meist Sternchen) angezeigt.
Textfeld mit Bildlauf
Text in Textfeld Mehrzeiliges Eingabefeld – beispielsweise für Kommentare, Diskussionsbeiträge etc.
Kontrollkästchen
Zum Aktivieren und Deaktivieren einzelner Optionen.
Optionsfeld
Zum Aktivieren und Deaktivieren einzelner Optionen. Optionsfelder können im Gegensatz zu Kontrollkästchen intern gruppiert werden, wobei innerhalb einer Gruppe immer nur eine Option ausgewählt werden kann.
Tabelle A.10: Formularfelder
338
Anhang
Formularfeld
Beschreibung
Dropdown-Menü
<SELECT NAME=" " SIZE=" "> Formularfeld, das in einer aufklappbaren Liste eine Reihe verschiedener Optionen zur Auswahl bereitstellt. <SELECT NAME="Betriebssystem"> Windows 3.11 Windows 95 Windows 98 Windows NT 4.0
Schaltfläche
Schaltfläche, die beim Anklicken irgendwelche Aktionen ausführt. Spezialisierte Schaltflächen sind die Schalter zum Abschicken (TYPE="submit") und Zurücksetzen (TYPE="reset") des Formulars.
Bild
Zur Anzeige von Bildern und Grafiken in Formularfeldern.
Beschriftung
Beschriftung Zur Beschriftung anderer Formularfelder.
Tabelle A.10: Formularfelder (Forts.)
339
Kleine HTML-Referenz
Skripte
Hinweis
Da der JavaScript-Code direkt vom Browser ausgeführt wird (vorausgesetzt der Browser verfügt über einen integrierten JavaScript-Interpreter, was bei den aktuellen Browsern meist der Fall ist), schreiben Sie den Quelltext Ihres Skripts direkt in den HTML-Code der Webseite. Der Ort, an dem Sie das Skript einfügen, ist prinzipiell egal – meist schreibt man den Skriptcode in den HEAD-Bereich.
Jedes Skript wird in die HTML-Tags <SCRIPT>
eingeschlossen. Skriptsprache angeben Zudem sollte man dem Browser mitteilen, welcher Interpreter für das Skript verwendet werden soll (dies ist wichtig, wenn ein Browser mehrere Skriptsprachen unterstützt). Dazu wird das Attribut TYPE verwendet: <SCRIPT TYPE="text/javascript"> ...Quelltext...
Hinweis
Der Browser ruft nun den eingebauten Interpreter auf, und dieser führt das Skript aus. Früher wurde zur Kennzeichnung der Skriptsprache meist das LANGUAGE*-Attribut verwendet, doch wird dessen Gebrauch mittlerweile nicht mehr offiziell empfohlen.
Skriptinhalt vor Browsern verbergen Wenn Sie den Code des Skripts vor Browsern, die JavaScript nicht unterstützen, verbergen wollen (was zu empfehlen ist), kommentieren Sie den Code aus:
340
Anhang <SCRIPT TYPE="text/javascript">
Skript aus Datei laden Skripte können auch als eigene Dateien auf dem Server abgelegt werden. Den URL des Skripts geben Sie dann in der Kopfzeile an: <SCRIPT TYPE="text/javascript" SRC="http://server/verzeich/Skript.js">
Einfügen von Applets
Hinweis
Wie Sie an dem Sternchen erkennen, gilt auch das <APPLET>*Tag als veraltet. HTML 4.0 empfiehlt stattdessen das neue *-Tag, das allerdings von den aktuellen Browsern unterschiedlich interpretiert wird. Derzeit sollte man daher auf jeden Fall noch das <APPLET>*-Tag verwenden.
Hinweis
Zum Einfügen von Java-Applets dient das <APPLET>*-Tag. Notwendige Attribute sind WIDTH und HEIGHT, die die Breite und Höhe des Applets in Pixeln angeben.
In FrontPage können Sie zum Einbetten eines Applets auch den Befehl EINFÜGEN/WEBKOMPONENTE, Komponententyp ERWEITERTE STEUERELEMENTE/JAVA-APPLET verwenden.
Kleine HTML-Referenz Quellverzeichnis angeben Wenn das Applet nicht im gleichen Verzeichnis wie das HTML-Dokument steht, müssen Sie mit CODEBASE den vollständigen Pfad oder einen URL angeben, z.B. <APPLET CODE="MeinApplet.class" CODEBASE="d:/java/applets" WIDTH=100 HEIGHT=80>
Ausrichtung Optional kann man noch mit dem ALIGN-Attribut die Ausrichtung des Applets im umgebenden Text steuern:
Ausrichtung
Beschreibung
ALIGN="left"
Ausrichtung zum linken Rand hin
ALIGN="right"
Ausrichtung zum rechten Rand hin
ALGIN="top"
Ausrichtung der Zeile am oberen Rand des Applets
ALIGN="middle"
Ausrichtung der Zeile an der Mitte des Applets
ALIGN="bottom"
Ausrichtung der Zeile am unteren Ende des Applets
Tabelle A.11: Ausrichtung von Applets Parameter übergeben Parameter werden an das Applet mit dem -Tag übergeben. Es können beliebig viele Parameter angeben werden. Jeder einzelne Parameter ist durch seinen Parameternamen (NAME) und einen Wert (VALUE) definiert: <APPLET CODE="MeinApplet.class" WIDTH=50 HEIGTH=50 ALIGN="top">
342
Anhang
Sonstige TAGs dienen dazu, den Skriptcode vor Browsern, die über keinen integrierten JavaScript-Interpreter verfügen, zu verbergen. Der eigentliche Code besteht aus einem einzigen Befehl, der der Hintergrundfarbe (Eigenschaft bgColor) der Webseite (repräsentiert durch document) die Farbe Cyan zuweist. Die Standardfarben können Sie über ihre englischen Namen zuweisen. Beliebige Farben können Sie als RGB-Werte angeben, das heißt, Sie spezifizieren für den Rot-, Grün- und Blauanteil der Farbe je einen Wert zwischen 00 und FF: document.bgColor="#FF0000";
// rot
Der vollständige HTML-Code der Webseite sollte danach ungefähr wie folgt aussehen: <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Script-Type" content="text/javascript"> Hintergrundfarbe <script type="text/javascript">
351
JavaScript
...
Wenn Sie mithilfe der document-Methode write() einen Text in eine Webseite ausgeben wollen, fügen Sie die <script>-Tags an der Stelle im BODYAbschnitt ein, an der der Text angezeigt werden soll: <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Script-Type" content="text/javascript"> Dynamischer Text <script type="text/javascript">
352
Anhang Wie Sie sehen, wird der auszugebende HTML-Code direkt in den runden Klammern der write-Methode übergeben, man muss ihn lediglich in Anführungszeichen setzen. Komplikationen gibt es, wenn der auszugebende Text ebenfalls Anführungszeichen enthalten muss, beispielsweise wenn man wie in obigem Beispiel ein Attribut (dessen Wert ja gemäß HTML 4 in Anführungszeichen stehen soll) mit ausgeben will. In so einem Fall kann man sich dadurch behelfen, dass man im auszugebenden HTML-Code einfache statt doppelte Anführungszeichen verwendet oder den Anführungszeichen das Escape-Zeichen \ voranstellt. (Fortgeschrittene JavaScript-Programmierer können den auszugebenden HTML-Code zuerst in einem String-Objekt ablegen und dann der write-Methode das String-Objekt übergeben.)
Skripte als Reaktion auf bestimmte Ereignisse ausführen Wenn Sie möchten, dass Skriptcode nicht automatisch beim Laden der Webseite, sondern erst bei Eintritt eines bestimmten Ereignisses ausgeführt wird, gehen Sie wie folgt vor: 1. Fügen Sie im HEAD-Abschnitt der Webseite ein <script> Element ein. <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> Ereignisbehandlung <script type="text/javascript">
2. Tippen Sie den Skriptcode nicht direkt in die <script>-Tags ein, sondern eingefasst in eine Klassendefinition. <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> Ereignisbehandlung
353
JavaScript <script type="text/javascript">
3. Verbinden Sie die Funktion mit einem HTML-Ereignis. ... ...
Für die verschiedenen HTML-Elemente gibt es verschiedene Ereignisse, die man abfangen kann. Für jedes dieser Ereignisse gibt es ein bestimmtes HTML-Attribut, das man im Tag des HTML-Elements angibt und dem man den Namen der aufzurufenden JavaScript-Funktion zuweist. In obigem Skript wurde die JavaScript-Funktion hintergrundfarbe() beispielsweise mithilfe des onload-Attributs mit dem Laden-Ereignis des BODY-Elements verbunden (dieses Ereignis tritt ein, wenn die Webseite in den Browser geladen wird). Welche HTML-Elemente über welche Ereignisse verfügen ist zwar grundsätzlich im HTML-Standard vorgegeben, wird aber von den aktuellen Browsern nicht in identischer Weise unterstützt – beispielsweise unterstützt der Netscape Navigator im Gegensatz zum Netscape 6-Browser und zum Internet Explorer 5 keine Klickereignisse (onclick) auf Bildern (Elementen). Das folgende Beispiel zeigt, wie man mit JavaScript einen Rollover-Effekt für Schaltflächen erzeugt. Das Beispiel ist wegen seiner Komplexität für den Einsteiger sicherlich nicht ganz leicht zu verstehen. Dafür ist es praxisnah und kann relativ problemlos für eigene Anwendungen übernommen und angepasst werden.
JavaScript var schalterAn = new Array(); schalterAn[0] = new Image(); schalterAn[0].src = "button1b.gif"; schalterAn[1] = new Image(); schalterAn[1].src = "button2b.gif"; schalterAn[2] = new Image(); schalterAn[2].src = "button3b.gif"; function rollover_an(index) { document.images[index].src = schalterAn[index].src; } function rollover_aus(index) { document.images[index].src = schalterAus[index].src; } //-->
Für diese Webseite wurden zu jeder Schaltfläche zwei Bilddateien erstellt: ein Bild mit der normalen Schaltfläche (beispielsweise button1a.gif) und ein Bild, das die Schaltfläche mit dem Rollover-Effekt zeigt (button1b.gif). Die normalen Schaltflächen wurden in die Webseite eingebettet (IMG-Tags) und mithilfe einer Tabelle ausgerichtet. Jede Schaltfläche wurde mit einem Hyperlink verbunden. Im HTML-Code sieht das so aus, dass die IMGElemente in -Anker eingefasst sind. Jeder dieser Anker verfügt über drei Attribute:
왘 왘 왘
href – die Adresse der anzusteuernden Webseite onmouseover – die Maus wird über die Schaltfläche bewegt onmouseout – die Maus wird von der Schaltfläche herunter bewegt
Das onmouseover-Ereignis wurde mit dem Aufruf der JavaScript-Funktion rollover_an() verbunden. In den runden Klammern des Funktionsaufrufs wird eine Kennziffer übergeben, anhand der die Funktion ablesen kann, über welcher Schaltfläche die Maus steht. In gleicher Weise wurde das onmouseout-Ereignis mit dem Aufruf der JavaScript-Funktion rollover_aus() verbunden. Kommen wir nun zum eigentlichen Skriptcode.
357
JavaScript Die ersten JavaScript-Befehle sind nicht in eine Funktionsdefinition eingefasst, das heißt, sie werden automatisch beim Laden der Webseite ausgeführt. Ihre Aufgabe ist es, die verschiedenen Bilder für den Rollover-Effekt vorab zu laden. Dadurch läuft der Rollover-Effekt später, wenn der Webbesucher seine Maus über die Schaltflächen bewegt, schneller ab.
Hinweis
Gespeichert werden die Bilder in zwei Array-Objekten: einem ArrayObjekt für die Schaltflächen ohne Effekt (schalterAus) und ein Array-Objekt für die Schaltflächen mit Effekt (schalterAn). Array-Objekte sind Sammelbehälter für andere JavaScriptObjekte.
Nach der Erzeugung des Array-Objekts var schalterAus = new Array();
wird ein leeres Image-Objekt erzeugt und an der ersten Position im Array abgelegt. schalterAus[0] = new Image();
Die Position wird durch einen Indexwert angegeben. Die erste Position hat immer den Index 0. Danach wird das Image-Objekt mit einer Bilddatei verbunden, indem der URL der Datei der Image-Eigenschaft src zugewiesen wird. schalterAus[0].src = "button1a.gif";
Das Ganze wird für die beiden anderen Schaltflächen, die an den Positionen 1 und 2 im Array abgelegt werden, wiederholt. schalterAus[1] = new schalterAus[1].src = schalterAus[2] = new schalterAus[2].src =
Image(); "button2a.gif"; Image(); "button3a.gif";
Wenn der Webbesucher die Maus über eine der Schaltflächen bewegt (beispielsweise die zweite), tritt das onmouseover-Ereignis ein.
