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.
ISBN 3-8272-6107-4 © 2001 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Einbandgestaltung: Grafikdesign Heinz H. Rauner, Gmund Lektorat: Jürgen Bergmoser,
Satz: reemers publishing services gmbh, Krefeld, www.reemers.de Druck und Verarbeitung: fgb, freiburger graphische betriebe, www.fgb.de Printed in Germany
Der Eröffnungsbildschirm HTML-Editor und Webmanager Webseite oder Web? Verzeichnispfad oder lokaler Server Die FrontPage-Servererweiterungen
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)
Von der Webseite zum Web Webs anlegen und bearbeiten Webs planen Navigationsstrukturen für Webs Frames Webs verwalten
Grafiken im Webdesign Die wichtigsten Bildformate Bilddateigröße versus Bildqualität Animationen GIF-Animationen
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
Anhang FrontPage konfigurieren PWS und IIS Kleine HTML-Referenz JavaScript Glossar Literaturhinweise und Internet-Adressen
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,
Saarbrücken, den 12. April 2001
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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.
Im Kapitel 2 »Effizientes Arbeiten mit dem Editor« erfahren Sie mehr zu den Seiten ZWISCHENABLAGE und SUCHEN.
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.
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.
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 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:
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.
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:
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 (
