Infokurs Startseite --> Modul A: Microsoft Office --> Lektion 6: FrontPage

Modul A: Microsoft Office

Lektion 6: FrontPage

Bis Office2003 war Microsoft FrontPage das Programm zum Entwerfen und Bearbeiten von Websites von Microsoft. Seit Office2007 existiert es nicht mehr. Es wurde von Microsoft durch das Programm ExpressionWeb ersetzt. Der Hersteller hat nämlich die, zwischenzeitlich auf mindestens 16 (wenn nicht mehr) angewachsenen Office-Kompoenten in zwei einzelnen Suite geteilt: Die Productivity-Suite, die alle klassischen Office-Anwendungen wie Excel, Word und PowerPoint, Acess etc. enthält und die Creativity-Suite, die nun um die Gunst der Mac-User buhlen soll. FrontPage ist, wie gesagt, in Zweitere als "Microsoft ExpressionWeb" eingegangen. Expression Web lässt sich fast identisch bedienen. Einige Komponenten, die nicht HTML-konform waren sind entfallen. Die Veränderungen waren jedoch so minimal, dass ich darauf verzichtet habe eigene Beschreibungen dafür zu erstellen.

 Microsoft FrontPage 2003

6.1 Die FrontPage-Oberfläche (WYSIWYG-Editor)

Bei Microsoft Frontpage handelt es sich -wie bei Word und PowerPoint auch - um einen WYSIWYG-Editor (What You See Is What You Get). Dies bedeutet, dass das Layout, das in FrontPage gemacht wird, auch im Browser entsprechend aussehen soll. Da HTML allerdings nur Empfehlungen und keine verbindlichen Gestaltungsvorschriften enthält, kann die Darstellung von Browser zu Browser jedoch teils deutlich abweichen. Daher sollten Sie das Ergebnis immer in mehreren Browsern (Internet Explorer, Firefox, Opera, …) kontrollieren. Außerdem sollten Sie sich darüber im Klaren sein, dass auch die Bildschirmauflösung beim Webseitenbetrachter auswirken auf Ihr Layout hat. Daher bietet Frontpage im Menü „Datei“ -> „Browservorschau“ immer mehrere Auflösungen des Standardbrowser als Voreinstellung an. Machen Sie also regelmäßig Gebrauch von dieser Kontrollmöglichkeit.
Auf der Frontpage-Oberfläche sehen Sie links eine Ordnerleiste mit allen Ordnern und Dateien Ihrer Webpräsenz. Eventuell – das ist jedoch keine Standardeinstellung – wird dort auch eine Aufgabenleiste angezeigt.
In der Mitte sehen Sie das Hauptfenster, in dem je nach Ansicht entweder noch einmal alle Ordner und Dateien oder die lokalen Ordner und Dateien zusammen mit den Remotedateien auf dem Webserver angezeigt werden oder die Entwurfsansicht oder aber die Berichtsansicht angezeigt wird. Um von der Ordneransicht in die Entwurfansicht einer Seite zu gelangen klicken Sie einfach auf die entsprechende HTML-Datei doppelt. Um später wieder zurück zur Ordneransicht zu gelangen, wählen Sie die Registerkarte „Webseite“.
Rechts  befindet sich eine Sidebar mit, mit der Sie die meisten Aufgaben erledigen. Diese Sidebar kennen Sie wahrscheinlich schon aus den anderen Office^xp oder 2003-Anwendungen.

6.2 Eine neue Webseite erstellen

Um eine Webpräsenz zu erstellen müssen Sie in Frontpage ein entweder lokales oder ein servergespeichertes Abbild dieser Seite anlegen. Früher (bis FP-Version 2002) sprach man von einem Frontpage-Web. Gehen Sie dazu wie folgt vor:
Wählen Sie „Datei“ > „Neu…“ und anschließend rechts in der Sidebar „Webseite…“ > „Webseite mit einer Seite…“. Im dann folgenden Dialog können Sie einen Speicherort für Ihre neue Seite angeben und sich für zahlreiche Webseitenvorlagen entscheiden. Wählen Sie hier „Standardwebseite“. Die lokale Replik der Webseite ist also erstellt!

6.3 Eine neue Einzelseite erstellen

Um innerhalb Ihrer Seite eine leere HTML-Seite zu erstellen klicken Sie einfach auf das Symbol „Neu“ (nicht auf den kleinen Dropdown -Pfeil daneben!) in der Standardsymbolleiste. Es erscheint eine neue leere Seite in Ihrer Webseite. 

6.3.1 Standardseiten

Bei Standardseiten handelt es sich um leere weiße Webseiten. Sie enthalten keinerlei weitere Informationen, außer eventuell (sofern sie dies bei den Frontpage-Eigenschaften so eingestellt haben) einem Generator und Prog-ID-Tag im Seitenkopf.

6.3.2 Frameseiten

Frameseiten sind Rahmenseiten. In Ihnen werden zwei, drei oder vier andere Seiten angezeigt. Typisch war die Verwendung von Frameseiten um auf allen Seiten eine Navigation angezeigt zu bekommen, die nicht aus dem Fenster hinausrollt, wenn Sie im Text weiter herunterrollen. Frames bieten allerdings für Menschen mit einem Handycap und Nutzer von Handheld oder Pocket-PC sowie Mobiltelefonen einige Nachteile und sollten daher nur noch eingesetzt werden, wenn es unbedingt nötig ist. Sie können auch in eine ganz normale Seite einen Frame einbetten um dort fremden Inhalt anzuzeigen. Einen solchen Frame würde man I-Frame (Inline-Frame) nennen.
Um eine Frameseite zu erstellen. Wählen Sie in der Sidebar „Neue Seite“ à „Mehr Seitenvorlagen“ und dort im Reiter „Frameseiten“ die Seite aus, die am besten zur Aufgabe passt.

6.3.3 Webseitenstruktur

Jede Webseite besteht strukturell aus drei Elementen: Der Dokumententypdeklaration, dem Seitenkopf und dem Seitenkörper. Die Doctype-Declaration gibt an, welche HTML-Version oder XHTML-Version zur Erstellung Ihrer Seite verwendet worden ist. Eine mögliche Version sieht so aus:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Der eigentliche HTML-Quelltext wird durch das Tag <html> eingeleitet und ganz am Ende durch das schließende </html> wieder geschlossen. Es gibt also zu fast jedem öffnenden Tag ein schließendes Tag, das zusätzlich zum öffnenden einen Schräger vorangestellt hat. Die Tags, die von dieser Regel abweichen, werden entsprechend kenntlich gemacht.
Der Webseitenkopf wird durch folgende Tags umschlossen: <head> und </head>. Im Seitenkopf sind Informationen zum Zeichensatz und zur Sprache, zum Autor, der Seitentitel, viele weitere Angaben und eventuell ein Stylesheet (CSS, s.u.) enthalten. Außerdem wird dort der Titel der Seite zwischen den Tags <title> und </title> hinterlegt. In Frontpage erledigen Sie dies über die Seiteneigenschaften (Kontextmenü --> Eigenschaften --> Reiter „Allgemein“). Tragen Sie in das Feld Titel den gewünschten Titel ein.
Im Seitenkörper befinden sich die Sachen, die später im Browser angezeigt werden. Er wird von den Tags <body> und </body> umschlossen. Damit sieht die einfachste vorstellbare Webseite so aus:

6.3.4 Kopfvariablen

Im Dateikopf verbergen sich zahlreiche Angaben. Diese werden unterschieden in Systemvariablen und Benutzervariablen. Sie lassen sich in den Seiteneigenschaften im Reiter „Benutzerdefiniert“ frei eintragen. Einige können Sie jedoch auch mit Frontpage-Mitteln vereinfacht eintragen. Eine vollständige Auflistung aller möglichen Einträge finden Sie unter: http://de.selfhtml.org/navigation/html.htm#kopfdaten

6.3.4.1 Systemvaribalen (http-equiv)

Systemvariablen bestimmen unter anderem das Verhalten des Browsers, der eine Seite anzeigt.

Die wichtigsten können Sie in Frontpage über die Seiteneigenschaften (Kontextmenü --> „Eigenschaften“ --> Reiter „Sprache“ bereits festlegen.

Legen Sie alles so fest, wie im vorstehenden stehenden Screenshot gezeigt, um eine für deutsche Seiten gültige Deklaration zu erhalten. Unter Sprache legt sich Frontpage immer auf die windowseigene (aber nicht zum Standard gehörende Einstellung) fest, was Sie damit ändern sollten. Sie erhalten damit im Dateikopf folgende Variablen gefüllt:

<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Sie können dort außerdem noch viele weitere Variablen hinterlegen, die unter anderem bestimmen, wann die Seite wieder frisch vom Server geladen soll, anstatt aus dem lokalen Chache des Browsers, ob Betreiber von Proxyservern diese Seite speichern dürfen oder nicht und vieles Andere mehr. Auf jeden Fall sollten Sie noch die folgende Variable über den Reiter „Benutzerdefiniert“ eintragen. Sie weist den Broswer an, die Seite immer von der Originaladresse und nicht aus Zwischenspeicherungen in Proxyservern zu laden. Damit gewährleisten Sie, dass der Surfer immer den aktuellen Inhalt zu sehen bekommt:

<meta http-equiv="expires" content="0">

6.3.4.2 Benutzervariablen (name)

Benutzervariablen enthalten im Gegensatz zu den Systemvariablen keine Angaben, die das Verhalten des Browsers beeinflussen können. Vielmehr finden Sie dort weitergehende Informationen zum Seitenersteller und dem Seiteninhalt. Die Benutzervariablen werden über den Reiter „Allgemein“ in den Seiteneigenschaften gefüllt. Dort können Sie Stichwörter und eine Seitenbeschreibung eingeben. Außerdem sollten Sie noch folgende Variablen dort eintragen:

<meta name="author" content="Name">
<meta name="robots" content="all">

Bei der author-Varibale können Sie Ihren Namen als Seitenersteller eingeben. Die zweite Variable lässt zu, dass Suchmaschinen alle Seiten auslesen dürfen. Der Seitenkopf sieht nun folgendermaßen aus:

6.3.4.3 Weitere Kopfangaben

Im Webseitenkopf können nun noch weitere Angaben – die so genannten logische Beziehungen oder Rückbeziehungen – eingetragen werden, so zum Beispiel die Verknüpfung mit einem externen Stylesheet, eine Basisadresse für die relative Adressierung etc. Außerdem können Sie ein Stylesheet auch direkt im Seitenkopf definieren. Wie das geht steht weiter unten. Wichtig sind hier vor allem die Angaben, zur logischen Einordnung der Seite innerhalb der Seitenstruktur. Damit ist es zum Beispiel möglich Hyperlinks zur Startseite, nächsten Seite, vorherigen Seite, Copyrightseite usw. festzulegen. Nähere Details finden Sie unter:
http://de.selfhtml.org/html/kopfdaten/beziehungen.htm

Seit der Einführung des Internet Explorer 8 machen Webseitenentwickler von Zeit zu Zeit die Erfahrung, dass es bei der Darstellung einiger ihrer Websites mit diesem Browser zu Problemen kommt. Unter Umständen sind einige Elemente verschoben oder lassen sich nicht bedienen. Dies liegt daran, dass Entwicklungen bislang häufig extra für einen speziellen Browser geschrieben wurden. Viele Entwickler bauten dazu so genannte "Browserweichen" in ihren HTML-Code mit ein, die zunächst den Browser auswerteten und dann unterschiedlichen Code lieferten. Damit trugen Sie der geringen Standardkonformität des Internet Explorers Rechnung. Microsoft hat nun (endlich) damit angefangen, den Browser mehr an diese Standards anzunähern. Wenn nun also eine Ihrer Entwicklungen nicht mehr korrekt dargestellt wird, sollten Sie den Fehler also zunächst bei sich selbst suchen. Hilft alles nichts können Sie eine abwärtskompatible Darstellung erzwingen, damit z.B. Ihr Webshop zunächst erst einmal weiterlaufen kann. Setzen Sie dazu die folgende Kopfvariable:

 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Es sollte Ihnen dabei aber auf jeden Fall klar sein, dass dies als Notbehelf gedacht ist und es besser wäre, wenn  sie zunächst den Quelltext überarbeiteten.

6.4 Webseiten gliedern

Wenn alle Kopfdaten gepflegt sind, können Sie sich dem Seitenkörper, dem Body zuwenden. Alle Angaben, die dort gemacht werden, wirken sich auf die angezeigte Seite direkt aus. Wenn Sie zum Beispiel einen einfachen Absatz beginnen wollen, in dem Text steht, dann wird dieser Text direkt im Browser angezeigt.

6.4.1 Absätze

Öffnen Sie einen Absatz mit dem Tag <p>(-> paragraph, engl. für Absatz) und schließen ihn mit </p>. Zeilenumbrüche innerhalb eines Absatzes erzwingen Sie durch drücken der Hochstelltaste und Return gleichzeitig. Es wird das <br> (-> break-Tag) eingefügt, das alleine steht. Ein </br>-Tag existiert nicht! Zusätzlich können Sie bei Bedarf noch eine horizontale Linie mit Hilfe des <hr>-Tags einfügen.
Alles dazwischen wird als Text im Browser angezeigt. Getreu der Maßgabe „form follows function“ sollten sie dabei darauf achten, niemals Formatierung und Inhalt zu vermischen. Wie das konkret umsetzbar ist erkläre ich später.

Neben normalem Text stehen Ihnen eigene Tags für Überschriften, Listen und Aufzählungen sowie Tabellen zur Verfügung. Innerhalb des HTML-Quelltextes können Sie jederzeit einen Kommentar anlegen, der nicht im Browser gezeigt wird, sondern nur für Sie als Entwickler bestimmt ist. Kommentare sehen wie folgt aus:

<!-- Dies ist ein Kommentar -->

Legen Sie doch einmal einen Absatz mit den berühmten Worten: „Hallo Welt!“ an. Dazu tippen Sie im Frontpage einfach im Entwurfsmodus die Worte ein und drücken Enter.

6.4.2 Überschriften

Im HTML haben Sie die Möglichkeit auf maximal sechs Überschriftenebenen zurückzugreifen. Diese Überschriften werden durch eines der folgenden Attribute geöffnet bzw. wieder geschlossen.

<h1> Überschriftebene 1 </h1>
<h2> Überschriftebene 2 </h2>
<h3> Überschriftebene 3 </h3>
<h4> Überschriftebene 4 </h4>
<h5> Überschriftebene 5 </h5>
<h6> Überschriftebene 6 </h6>

Sie werden feststellen, dass diese Überschriften auch optisch unterschiedlich formatiert werden. Dies können und werden wir mit Hilfe der Cascading Stylesheets noch anpassen. Legen wir einmal eine Überschrift erster Ordnung fest, die wie folgt überschreibt. „Begrüßung an die Welt“. Dazu gehen Sie mit dem Cursor vor die zuvor erstellten Wörter und drücken einmal Enter. Das „Hallo Welt!“ wird um einen Absatz nach unten geschoben. Geben Sie nun die Überschrift ein und markieren Sie sie komplett, so wie rechts gezeigt. Wählen Sie nun aus dem Formatvorlagenfenster in der Formatsymbolleiste Überschrift 1. Das Ergebnis sieht folgendermaßen aus:


Wie sieht nun der gesamte Quelltext unseres ersten Gehversuchs aus?

6.4.3 Listen

Listen sind ein probates Mittel um Inhalte in Stichpunkten zu vermitteln. Um eine Liste zu beginnen, klicken Sie auf die Schaltfläche Aufzählung in der Formatsymbolleiste. Es erscheint ein Punkt. Geben Sie Ihren Stichpunkt ein. Wenn Sie nun mit Listen arbeiten beginnen Sie einen neuen Punkt jeweils durch drücken der Entertaste. Soll lediglich ein Zeilenumbruch erzeugt werden, drücken Sie wieder Shift+Return gemeinsam. Zum Beenden der Liste einfach zweimal Return hintereinander drücken. Eine Liste kann dann so aussehen:

Hallo Welt!

• Was ich dir schon immer sagen wollte,
  aber nie zu fragen gewagt habe
• Dieser Spruch wurde schon in der 70er Jahren zum Testen verwendet

Wie sieht nun das passende HTML aus? Eine einfache Liste wird mit dem Tag <ul> geöffnet und mit </ul> wieder geschlossen. Jeder einzelne Aufzählungspunkt wird mit <li> geöffnet und mit </li> wieder geschlossen. Insgesamt sieht das ganze jetzt so aus:

Wenn Sie den runden schwarzen Punkt zu langweilig finden, können Sie auch ein anderes Bullet verwenden. Dazu klicken Sie mit der rechten Maustaste auf die Liste und wählen Listelementeigenschaften. Im anschließenden Dialog können Sie zwischen den verschiedenen Bullets wählen.

Im HTML wird dadurch dem öffnenden <ul>-Tag das Attribut type mitgegeben. Attribute können fast jedem Tag angefügt werden, auch <p> und <h>. Für das Attribut Listentyp stehen Ihnen folgende Werte zur Verfügung: disc (schwarzer Punkt, Standard); circle (schwarzer Kreis); square (Quadrat). Das ganze Tag sieht dann wie folgt aus:

<ul type="square">

6.4.4 Aufzählungen

Die funktionsweise von Aufzählungen ist sehr nah verwandt mit den Leisten. Aufzählungen erlauben das Nummerieren von Listenpunkten. Ihr öffnendes Tag ist <ol>(ordinal list). Das schließende Äquivalent ist </ol>. Nummerierungen lassen sich in Frontpage durch einen Klick auf das entsprechende Icon in der Formatsymbolleiste aktivieren. Sie sind aber ein wenig weiter anpassbar als Listen. Erstellen wir eine Liste mit 5 Punkten. Als Text verwenden Sie am besten „Punkt1“ bis „Punkt5“. In der Gegenüberstellung entsteht nun Folgendes:

Es gibt nun zwei entscheidende Formatierungsmöglichkeiten: Das Einstellen des Zählers und das Einstellen des Zahlenformates.

a. Zahlenformat einstellen

Sie können auch andere Zahlzeichen an Stelle der arabischen Ziffern einstellen: Römische Zahlen, kleine Römische Zahlen, große und kleine Buchstaben. Rufen Sie dafür wieder den Dialog "Listelement-Eigenschaften" im Kontextmenü auf und wählen Sie dort das gewünschte Zahlenformat. Was passiert dabei im HTML?

Dem <ol>-Tag wird wieder ein Attribut mitgegeben, nämlich:

<ol type="I"> für Römische Zahlen
<ol type="i"> für kleine Römische Zahlen
<ol type="A"> für große Buchstaben
<ol type="a"> für kleine Buchstaben

b. Zählbeginn festlegen

Gerade wenn eine Liste sehr lang wird, bietet es sich an nach zehn Punkten eine neue Seite zu erstellen um dem Anwender zu viel Scrollen zu ersparen. Nur in der neuen Liste würde die Zählung ja wieder bei 1 beginnen. Ebenfalls im Listelement-Eigenschaften-Dialog können Sie daher einen Startwert mitgeben, der das <ol>-Tag mit dem Attribut „start“ versieht, das den kleinsten Wert der Liste festlegen:
<ol start"11"> lässt die Liste also erst bei 11 beginnen.

6.4.5 Tabellen

Zu guter letzt bleibt Ihnen auch die Möglichkeit mit Hilfe von Tabellen den Inhalt von Webseiten zu strukturieren. Tabellen werden in FrontPage - wie auch in Word - über das Menü „Tabelle“ eingefügt. An dieser Stelle werde ich deshalb nicht weiter darauf eingehen. Was passiert dabei nun im HTML-Code?
Jede Tabelle wird mit dem Tag <table> geöffnet und mit </table> wieder geschlossen. Dazwischen gibt es Tags die jeweils eine neue Zeile beginnen (<tr> = table row) und schließen </tr> sowie Tags die innerhalb einer Zeile den Beginn <td> einer sowie das Ende </td> einer neuen Zelle definieren. Die Überschriftenzelle erhält statt des < td>-Tags ein <th>-Tag (table heading). Eine 2x2-Tabelle mit Überschriften in der ersten Zeile hat also im HTML folgende Struktur:

Die Kennzeichnung einer Zelle als Überschrift hat also auch Einfluss auf deren Formatierung. Eine Überschrift wird in Frontpage im Eigenschaften- Dialog jeder Zelle definiert. (Kontextmenü). Aktivieren Sie dort den Haken bei "Zelle enthält überschrift".

Sie können nun auch Tabellen verschachteln, in dem Sie innerhalb einer Zelle erneut mit dem Tag <table> beginnen. Beachten Sie jedoch dann, dass Sie auch das Attribut id=“table1“ auf table2 hochsetzen müssen, damit die Tabellen auseinander gehalten werden können.

6.5 Webseiten gestalten

6.5.1 Grundlegende Gestaltungsempfehlungen

Das Herangehen an die Webseitenerstellung kann sehr unterschiedlich sein. Häufig existiert bereits eine bildliche Vorstellung der Internetpräsenz, denn diese folgt sehr häufig einem Corporate Design des Unternehmens. Die Philosophie, die dahinter steckt geht davon aus, dass ein Unternehmen mehr Erfolg hat, wenn mit ihm ein gewisser Wiedererkennungswert verbunden ist. Dieser keineswegs neuen Auffassung ist zu verdanken, dass sich trotz aller Stilbrüche der Jahrzehnte oder mittlerweile Jahrhunderte Marken wie Mercedes Benz oder Maggi nie von ihren Markenzeichen getrennt haben.

Ganz im Gegenteil: Sehr häufig wurde das Logo als Teil des ganzen Unternehmenskonzeptes in den Vordergrund gehoben, („Ich fahre die Marke mit dem Stern.“) sozusagen als Luxus- oder Statussymbol.

Diese Überlegungen erschweren das Erstellen von Firmenwebseiten häufig, weil der Grundsatz „form follows function“ nicht mehr einzuhalten ist. Dabei gelten einige ganz einfache Gestaltungsrichtlinien, die keinesfalls nur auf das Webdesign beschränkt sind als gute Maßgabe zum augenfreundlichen Gestalten der Präsenz.

Hat man jedoch die Möglichkeit eine Webseite von Grund auf neu zu erstellen und das ohne tief greifende Vorgaben, so empfiehlt es sich einige Minimalprinzipien einzuhalten:

Zum Beispiel die Farbgebung und das Farbenzusammenspiel können sehr schnell das Ende einer guten Webseite bedeuten. Beachten Sie also bitte ein paar der nachfolgenden Punkte:

6.5.2 veraltete Textformatierung mit HTML-Tags

Obwohl HTML eine Sprache zur inhaltlich-logischen Beschreibung von Internetseiten ist und eigentlich nicht dazu gedacht war auch Gestaltungsinformationen hinsichtlich des Stils aufzunehmen, wurde in Zeiten der Browserkriege zwischen Netscape und Internet Explorer Formatierungstags in den HTML-Standard aufgenommen. Einige davon sind immer noch gültig, Andere wurden mittlerweile als veraltet deklariert, weil Ihre Funktion mittlerweile über CSS (s.u.) abgebildet werden kann.

6.5.2.1 Text mit dem <font>-Tag formatieren

Wenn Sie beliebigen Text in Frontpage markieren und dann die Schriftart aus der Schriftartenleiste wählen, wie Sie es aus Word kennen, wird das <font>-TAG eingefügt. Es kann in verschiedenen Ausprägungen vorkommen. So zum Beispiel in der Ausprägung:

<font face=“Arial“>. Das Attribut „face“, gibt dabei eine Schriftart für den Text fest vor. Ist diese Schriftart auf dem Rechner des Betrachters nicht installiert zeigt dieser lediglich die Standardschriftart (meist Times New Roman) an. Das Tag wird auch verwendet, wenn Sie über die Schriftartenformatierung eine Schriftfarbe (font color="red")oder Schriftgröße (font size="10pt" oder font size="3") angeben. Es schließt mit dem Tag </font>.

6.5.2.2 Weitere Tags zur Formatierung

Neben dem eben erwähnten Font-Tag gibt es auch weitere Formatierungstags. Dabei spricht man von absoluten Tags zur Schriftformatierung und Tags zur inhaltlichen Textauszeichnung. Sie alle werden durch ihr schließendes Pendant wieder geschlossen.

Die häufigsten absoluten Tags sind:

Die häufigsten logischen Tags sind:

6.5.3 Formatierung mit Cascading Stylesheets

Cascading Stylesheets sind die saubere Alternative zu den HTML-internen Formatierungen. Sie können entweder im Dateikopf einer HTML-Datei stehen und gelten dann für diese Datei oder in einer externen Datei mit der Endung *.css . Dann können Sie in jede HTML-Datei ihrer Präsenz eingebunden werden. Der Vorteil liegt auf der Hand, denn der Quelltext Ihrer Seite wird dadurch um einiges schlanker. Außerdem verringern sich die Ladezeiten, weil das CSS nur einmalig heruntergeladen werden muss und dann im lokalen Cache des Benutzers liegt.

6.5.3.1 Beschreibung von CSS

Mit CSS die Trennung von Inhalt und Form vollzogen. Es ist möglich sowohl Schrift als auch Objekte (Kästen, Rahmen, Flächen etc.) von außerhalb des HTML-Quelltextes zu formatieren. Daneben kann CSS (ab Version 2.0) auch Objekte positionieren. Das bedeutet, Sie könne auch die Position einer Tabelle oder eines Kastens damit bestimmen.

6.5.3.2 Anlegen und einbinden eines externen Stylesheets

Um ein Stylesheet anzulegen gehen Sie in Frontpage wie folgt vor: Wählen Sie Datei --> Neu... --> mehr Seitenvorlagen --> Reiter "Stylesheets" --> Standardstylesheet. Frontpage legt im Stammverzeichnis Ihrer Webseite nun eine leere Datei an, die standardmäßig default.css heißt. Diese Datei kann nun Formatierung und Positionierung von Schriftarten und Objekten steuern. Allerdings muss sie in jede Seite einzeln eingebunden werden. Das Einbinden funktioniert über eine logische Beziehung im Dateikopf der HTML-Seite mit folgendem Eintrag:
<link rel="stylesheet" type="text/css" href="default.css">

Liegt die HTML-Seite in einem Unterverzeichnis, muss der Pfad (href) zum Stylesheet entsprechend angepasst werden. Das folgende Beispiel gilt für eine Datei, die ein Verzeichnis tiefer liegt, als das Stylesheet:
<link rel="stylesheet" type="text/css" href="../default.css">

In Frontpage wird das Einbinden über folgenden Weg umgesetzt. Der Vorteil hier ist, dass dies für alle Seiten innerhalb der Webseite zu gleich erfolgen kann. Gehen Sie dazu wie folgt vor:
Öffnen Sie eine HTML-Seite, am besten Ihre Indexseite und wählen Sie anschließend im Menü „Format“ den Punkt „Link zu Stylesheet“. Es erscheint das rechts gezeigte Dialogfenster: "Link zu Stylesheet".

Hier klicken Sie auf „Hinzufügen…“ und wählen die Stylesheetdatei aus. Wenn Sie den Optionsbutton oben links statt auf „Ausgewählte Seiten“ auf „Alle Seiten“ setzen, wird dieses Stylesheet dann allen HTML-Dateien zugewiesen.

6.5.3.3 Formatieren mit CSS

a. Standardelememte

In einem Stylesheet kann zu jedem Standard-Textelement wie Überschriften, Zitaten oder aber auch ganz einfachen Absätzen eine Formatierung vorgegeben werden. Darüber hinaus können auch noch Ausprägungen, die so genannten Klassen, definiert werden, die jedem Element zugewiesen werden können. Die Formatierung bezieht sich immer auf einen ganzen Absatz oder eine Überschrift. Sie gelten also so lange, bis das schließende Tag (also </p> oder </h1>,</h2>…) erscheint.
Soll lediglich ein Teil, zum Beispiel ein Wort, eines Absatzes formatiert werden, so ist dies jedoch auch möglich, indem im HTML-Quelltext das <span>-Tag um das Wort oder den Buchstaben gelegt wird und im CSS eine Klasse für span definiert wird. Ich komme später noch einmal darauf zurück.

Die Angabe im CSS bezüglich Textelement entsprechen in der Regel den HTML-Tags, jedoch ohne die Klammern < >. Das bedeutet, dass das Element p, die Formatierung des <p>-Tags (eines einfachen Textabsatzes) bestimmt. Welche Möglichkeiten gibt es dazu nun?
p Standard-Absatzformat (Normal)
h1 Überschrift 1
h2 Überschrift 2
h3 Überschrift 3
h4 Überschrift 4
h5 Überschrift 5
h6 Überschrift 6
a:link Hyperlink
a:hover Hyperlink, der mit der Maus überfahren wird
a:visited Hyperlink, der bereits besucht wurde
a:active Hyperlink, wenn darauf geklickt wird (auch wenn deshalb ein
Fenster im Hintergrund geladen wird, dann aber so lange bis es vollständig geladen worden ist.)
span für das <span>-Tag, das mehrere andere Tags „umspannen“ kann.

Diese Liste ist nicht abschließend. Jedes Mal, wenn also nun im HTML-Quelltext ein Tag gesetzt wird, das im CSS als Element definiert worden ist, nimmt dieses die Formatvorgaben aus dem CSS an. Wurde zum Beispiel für
p im CSS die Schriftgröße auf 13pt festgelegt, wird jeder Absatz, der nicht im HTML explizit anders formatiert worden ist in 13er Schriftgröße gesetzt. Wie könnte nun ein Eintrag für p aussehen?

p {
   color: black;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 12pt;
   text-align: justify
  }

Damit wären also Einstellungen für Schriftfarbe, -art, -größe und –ausrichtung gemacht.) Die Aufzählung bei den Schriftarten ermöglicht es, eine ähnliche Schriftart für den Fall, dass der Betrachter der Webseite eine Schriftart nicht installiert hat, als Alternative anzugeben. Die Schriftarten werden in der angegebenen Reihenfolge überprüft. Der Eintrag „sans-serif“ wählt an dieser Stelle als letzte Alternative eine nichtserife Schriftart, sofern keine der vorstehenden auf dem Client-Rechner verfügbar wäre.
Entsprechend können Sie auch für die anderen Elemente verfahren. Frontpage gibt Ihnen dazu Hilfestellung. Öffnen Sie die Stylesheetdatei durch einen Doppeklick in Frontpage und wählen Sie die Schaltfläche Formatvorlage. Hier können Sie aus den zahlreichen Einstellungen im Dialog wählen. Folgende Kategorien stehen Ihnen dazu zur Verfügung:
Zeichen: Wählen Sie hier die Schriftartenformate für Ihre Klassen. Es ist möglich die Schriftart, -größe, -farbe und die Verzierung zu wählen. Nachher im Stylesheet selbst taucht Ihre Schriftartenauswahl im Bereich font-family auf. Dort können Sie dann – wie schon erwähnt - händisch durch Kommata getrennt auch weitere Schriftarten angeben, die dann der Reihe nach zur Anwendung kommen, sobald die Primäre Schriftart nicht verfügbar sein sollte. Denken Sie daran als letzte Wahl sans-serif, serif oder monospaced anzugeben

Absatz: Im Bereich „Absatz“ verbergen sich alle Steuerungsmöglichkeiten, die mit Textausrichtung, Zeilenabstand und Abstand des Absatzes zum vorhergehenden oder nachfolgenden Absatz zu tun haben.
Rahmen: Im Bereich „Rahmen“ lassen sich Textrahmen sowie deren Füllung (eine Farbe oder ein Hintergrundbild) festlegen. Wenn Sie keinen einheitlichen Rahmen aus vier gleichen Rahmenlinien wollen, achten Sie darauf im Dialog den untersten Punkt „Anpassen“ zu wählen.
Nummerierung: Hier können Sie wieder Bestimmung zur Aufzählung (zum Beispiel ein eigenes Bullet) festlegen.
Position: Wird weiter unten besprochen.

b. Klassen

Darüber hinaus können eigene Ausprägungen, die Klassen bestimmt werden. Dies macht zum Beispiel dann Sinn, wenn die Überschrift h1 auf
unterschiedlichen Seiten mit unterschiedlichen Hintergründen oder unterschiedlich positioniert eingesetzt werden soll. Diese Ausprägungen beginnen jeweils mit einem Punkt gefolgt von Ihrem Namen. Es ist also denkbar folgende Ausprägungen zu haben:
.leftside
.center
.rightside
und dadurch die Ausrichtung der Überschrift zu verändern. Dabei gilt: „Spezieller“ hat immer Vorrang vor dem Allgemeineren. Am speziellsten ist das <font>-Tag im HTML. Wird dort eine Eigenschaft eingestellt (zum Beispiel Schriftart oder -farbe) hat dies immer Vorrang vor allen anderen Formatierungen über CSS. Eine Stufe darunter stehen Formatierungen, die mit dem <span>-Tag getroffen worden sind. Sie übersteuern alle sonstigen CSS-Formate unterwerfen sich aber der Bestimmung des <font>-Tags. Noch eine Ebene tiefer finden sich die Klassen. Sie übersteuern zwar einfache Elemente wie <p> aber werden von <span>- und <font>-Tags übersteuert. Die unterste Ebene sind die einfachen Elemente. Sie werden immer dann angezeigt, wenn keinerlei weitere Formatierungen vorhanden sind, die sie übersteuern. Folgende Reihenfolge würde also gelten:
<font>
<span>
<p class=“center“>
<p>

6.5.3.4 Objekteigenschaften definieren

Analog zu den Textformatierungen können Sie auch Formate für die Eigenschaften von Blockobjekten definieren. Ein Blockobjekt ist im HTML ein Tagpärchen aus <div> und </div>. Alles was im HTML-Quelltext zwischen diesen beiden Tags steht nimmt die Formatierungsanweisungen aus dem CSS an. Im CSS wird nun jedoch nicht eine Klasse für das <div> definiert, wie man vermuten könnte, sondern ein eigener Eintrag, der mit einer Raute beginnt. Diesen Eintrag können Sie nicht über Formatvorlage  Neu erstellen. Sie müssen ihn händisch in dieser Form (geschweifte Klammern dürfen nicht fehlen!) anlegen:
#yellow_box { }

Der Eintrag könnte zum Beispiel der Name für einen gelben Rahmen sein, der mit einem hellgelben Farbton gefüllt ist. Um nun der Box eine Formatierung zukommen zu lassen, wählen Sie – genau wie bei den Schriftarten – über den Button Formatvorlage eine Objektformatierung aus. Sollten Sie hierbei eine Schriftfarbe oder Schriftart vorgeben, so bezieht sich das auf alle Textelemente innerhalb des <div>-Tags im HTML, es sei denn diese sind durch eine Klasse (weil spezieller) oder durch eine Ausprägung (weil noch spezieller) oder durch das <font>-Attribut im HTML-Quelltext (weil am speziellsten) formatiert. Dass allgemeine Blockobjekt <div> kann dann – genauso wie bei den Schriftformaten – formatiert werden. Dabei können Sie gehen Sie wie folgt vor, wenn Sie direkt im HTML editieren. Fügen Sie ihrem einleitenden <div>-Tag eine Id mit dem Namen des CSS-Objektes hinzu. Das sieht dann so aus:
<div id=“yellow_box“>
...
</div>

In der Entwurfsansicht in FrontPage gehen Sie umgekehrt vor. Erstellen Sie zunächst den Text, der in Ihr Blockelement soll und klicken anschließend auf die entsprechende Tagschaltfläche oberhalb der Ansicht. Wählen Sie anschließend “Mit Tag umschließen...;“ und sie werden dann aufgefordert anzugeben mit welchem Tag Ihr Inhalt umschlossen werden soll. Wählen Sie dort <div> und bestätigen Sie.
Um nun dem <div>-Tag seine Id zuzuweisen klicken Sie auf dessen (neu hinzugekommene Schaltfläche) und wählen sie „Tag bearbeiten...“. Hier können Sie nun eingeben: id=yellow_box.
Das <div>-Tag, das sie eben kenn gelernt haben trennt Inhalte voneinander, nämlich alles was außerhalb des Tags steht von dem was darin steht. Es ermöglicht den Unhalt getrennt vom umgebenden zu formatieren. Daher rührt auch der Tagname (to divide = engl. „teilen“).
Es gibt auch ein umspannendes oder umschließendes Tag, das ich weiter oben bereits erwähnte. Es kann mehrere unterschiedliche Tags mit einer Art Klammer umlegen. Dieses Tag (<span>) kann auch gesondert im CSS wie eine Klasse formatiert werden.
Es ist spezieller als Klassen und Ausprägungen und hat daher vor ihnen Vorrang. Auf Grund dieser Eigenschaft eignet sich das span-Tag um einzelne Textpassagen innerhalb eines Absatzes anders als diesen zu formatieren. Legen Sie dazu einfach eine neue Formatvorlage an und wählen Sie im Dropdownfeld „Formatvorlagentyp“ statt „Absatz“ Zeichen als Typ aus. Es erscheint folgender Eintrag im CSS-File.

span.ihrname { }

Im Dokument markieren Sie später einfach alles, das mit dem Span-Eintrag umschlossen werden soll und weisen Sie das span über das Formatvorlagen- Dropdownfeld zu. Wollen Sie einfach nur so (ohne Ausprägung) ein span-Tag um Ihre Auswahl legen, fügen Sie im HTML die Auswahl <span> ... </span> ein.

6.5.4 Positionierung mit CSS

Seit CSS-Version 2.0 ist es auch möglich mit Hilfe von Stylesheets Objekte zu positionieren. Dabei ist relativ unerheblich um welches Objekt (Bild, <div>-Tag, Text etc.) es sich handelt. Die Positionierung erreichen Sie im Formatvorlagen-Dialog „Format“ --> „Position“.
Hier können Sie nun mehrere Eigenschaften festlegen. Sie sehen zunächst das links gezeigte Dialogfeld, das zwei Bereiche hat. Im oberen Bereich „Umbruchart“ können Sie festlegen wie sich das Objekt im fließenden Text verhalten soll, ob es also mit dem Text innerhalb der Zeile steht (Standard) oder ob es vom Text links oder rechts umflossen werden soll. Wenn sie sich für Links entscheiden wird Ihrem Objekt die Eigenschaft text-float: left oder text-float: right mitgegeben.
Bei der Positionierung haben Sie mehr Auswahl: Sie können ein Objekt entweder direkt und fest positionieren, sodass es hinter dem Text zu liegen scheint und nicht mitscrollt, wenn Sie weiter herunterrollen (absolute Position) oder Relativ zu einem Ankerpunkt.
Wo genau das Objekt dann liegt, können Sie über die Felder im unteren Bereich, des Dialogfeldes vorgeben. Damit können Sie (in Pixeln gerechnet) einen Horizontal sowie einen Vertikalwert vorgeben. Außerdem können sie auch noch eine Ebene (Z-Ordnung) vergeben. Damit ist es dann möglich Objekte hintereinander zu „schichten“. Wenn Sie CSS basierte Positionierung einsetzen wollen, machen Sie sich bitte keine Illusionen darüber, dass das was sie wollen auch von den Browsern so interpretiert wird. Am genauesten setzt der Opera die Vorgaben um. Der Firefox oder der SeaMonkey ist größtenteils zuverlässig. Lediglich der Internet Explorer ist keineswegs standardkonform, obwohl man ihm bescheinigen muss, dass er dazugelernt hat. Während der IE 5 kaum eine Vorgabe richtig umgesetzt hat und das Bild beim IE 5.5 immer noch grausam war, kommt der IE 6 schon ein großes Stück weiter. Mit dem neuen IE 7 kann man nun fast schon leben. Allerdings ist mittlerweile der CSS-Standard 3.0 im Anflug und man darf gespannt sein, ob der Internet Explorer dann wieder einen ähnlichen Rückstand zur Konkurrenz aufweist, wie dies in der Vergangenheit der Fall war.

6.5.5 Bildressourcen verwenden

Was wären Webseiten ohne Bilder? Damit Webseiten mehr Charme haben als der Videotext, sind sie unverzichtbar. Allerdings ist FrontPage selbst kein gutes Grafikprogramm. Auch mit den Windows und Office-Standardmitteln (Paint und PictureManager) ist nicht unbedingt eine gute Bildverarbeitung möglich. Wenn Sie also gute Grafikergebnisse erzielen wollen setzen Sie besser auf ein anderes Pferd wie Photoshop oder CorelDraw. An einigen Stellen werde ich jedoch trotzdem auf Funktionen der Standardmittel zurückgreifen, wenn diese hilfreich sind.
Außer der rein optischen Begründung gibt es auch noch weitere Gründe für Bilder, denn Bilder verankern sich tiefer im Gedächtnis als reiner Fließtext. Daher eignen sich auch Piktogramme wie zum Beispiel dieses hier:
besser um eine Information weiterzugeben, als reiner Text „Achtung: Fluchtweg bitte hier rechts gehen.“
Die Korrelation aus Bildern und Sprachen haben sich unter Kommunikationswissenschaftlern als effektivste Methode zum Einprägen von Informationen erwiesen. Bilder und Schemata ermöglichen es nämlich, komplexe Zusammenhänge einfach – auf einen Blick – darzustellen. Auf diese Eigenschaft sollten Sie nicht verzichten.

6.5.5.1 Bilddateitypen

Aus der Flut der Bildformate ist es nicht immer ganz leicht das passende Bildformat zu finden. Generell haben alle Formate unterschiedliche Eigenschaften. Nicht alle sind gleich geeignet für ein und die selbe Aufgabe. In der professionellen Grafik unterscheidet man zwischen Pixel- und Vektorgrafiken. Wenden wir uns zunächst den Pixelgrafiken zu. Bei Pixelgrafiken wird die Bildfläche in eine große Anzahl von Bildpunkten, die Pixel, unterteilt. Gängige Pixelformate für Computermonitore sind 800x600, 1024x768, 1280x1024 für Monitore im Format 4:3. Jeder der Bildpunkte kann nun eine Farbe annehmen. Wie viele unterschiedliche Farben in einer Grafik vorkommen dürfen hängt vom Grafikformat ab.

GIF: So gibt es bei GIF (graphics interchange format) eine Begrenzung auf 256 Farben in der Farbpalette. Wenn Sie also ein Foto in das GIF-Format konvertieren kommt es also zwangsläufig zu einer Farbreduktion und Farbverfälschung. Allerdings eignen sich GIF-Bilder hervorragend für Strichzeichnungen, Comics etc.
Ein weiterer großer Vorteil des GIF-Formats ist die Tatsache, dass sie eine Farbe bestimmen können, die später transparent dargestellt wird. Um davon Gebrauch zu machen. Markieren Sie die Grafik in FrontPage und wählen Sie auf der Bilder-Symbolleiste das Icon (Transparente Farbe bestimmen). Klicken Sie anschließend mit dem Cursor auf die Farbe (innerhalb Ihrer Grafik), die als transparent dargestellt werden soll. Der zweite Vorteil von GIF-Bildern ist, dass sie relativ klein sind und so, auch von Mitmenschen ohne DSL-Anschluss in angemessener Zeit heruntergeladen werden können.

JPG: Das JPG-Format eignet sich besonders um Fotos mit vielen Farben darzustellen. Das Format unterstützt Kompression, wobei mit zunehmendem Kompressionsfaktor der Qualitätsverlust steigt. Das JPG-Format wird von den meisten Kameras von vornherein erzeugt. Je nach Einstellung können auch JPG-Bilder viel Speicherplatz und Downloadzeit in Anspruch nehmen. Die Kompression können Sie festlegen, wenn Sie ein Bild einfügen und dann doppelt darauf klicken. Unter Bilddateityp können Sie für JPGs die Qualität einstellen. (Natürlich immer nur reduzieren, aus einem komprimierten Bild wieder mehr zu machen ist nicht möglich.)

PNG: Das PNG-Format liegt in zwei Varianten vor. Zum einen als 8-Bit-Variante, die dem GIF entspricht und zum anderen als 24-Bit-Variante, die sich dafür eignet weitestgehend verlustfrei Fotos darzustellen. Beide Variante kenn zudem Kompression und Transparenz. Das PNG-Format ist ein freies Format, das ganz bewusst als Gegenformat zu den propietären Formaten GIF und JPG auftritt. Leider hat sich Microsoft lange diesem Format verwehrt. Erst seit Windowsxp kann Paint überhaupt PNG-Grafiken anzeigen. Außerdem hat Microsoft immer noch nicht gelernt, dass PNG-Grafiken transparent sein können. In FrontPage wird diese Eigenschaft nämlich nicht unterstützt und auch der Internet Explorer stellt die Transparenz als helles Magenta dar. PNG eignen sich genau wie PNG-Grafiken in den allermeisten Fällen als Webseitengrafiken, weil sie recht klein sind.

BMP: Das BMP-Format (24-bit Bitmap) ist nicht geeignet im Internet eingesetzt zu werden. Es unterstützt keine Kompression und auch keine Transparenz, ist allerdings verlustfrei und daher sehr, sehr groß und würde Ewigkeiten zum herunterladen benötigen.

6.5.5.2 Bilder einfügen

Wie werden nun Bilder mit Frontpage in eine HTML-Seite eingefügt? Um ein Bild in eine Seite einzufügen wählen Sie im Menü „Einfügen“ --> „Grafik“ --> „Aus Datei…“ oder klicken auf das entsprechende Icon in der Standard-Symbolleiste. Im HTML wird dabei folgendes Konstrukt erzeugt:

<img border="0" src="pfad_zum_bild/beispiel.png" alt="Dieses Bild zeigt ein Beispiel für das Einfügen von Bildern in eine Webseite" width="391" height="151">

Das <img>-Tag benötigt kein schließendes Tag. Es steht allein. Das Attribut „border“ legt fest, ob um das Bild ein Rahmen angezeigt werden soll und falls ja in welcher Stärke. Im angegeben Beispiel ist die Rahmenlinie jedoch ausgeblendet. Das zweite Attribut src gibt den Pfad und den Dateinamen des Bildes an. Sollte dieser außerhalb Ihrer Webseitenstruktur liegen, gibt Frontpage dort unsaved### an und importiert das Bild beim Speichern in den aktuellen Ordner. Das ist deshalb wichtig, weil so sichergestellt ist, dass Sie kein Bild das „irgendwo“ auf Ihrem Rechner schlummert vergessen mit hochzuladen. Das letzte Attribut „alt“ gibt einen Alternativtext an. Dieser ist nach der aktuellen HTML-Spezifikation „mandatory“, also verbindlich. Er wird angezeigt, wenn der Browser das Bild nicht herunterladen kann oder – und darauf kommt es wirklich an – falls ein sehbehinderter Mensch mit einem Screenreader auf Ihre Internetseite zugreift. Daher ist es absolut wichtig nicht hinter jedem Bild nur den Dateinamen als Alternativtext zu hinterlegen, sondern eine wirkliche Beschreibung des Bildes. In FrontPage können Sie den Alternativtext auch über die Bildeigenschaften im Kontextmenü des Bildes festlegen. Die beiden letzten Attribute geben die Breite und die Höhe des Bildes an. Dabei können Sie entweder einen Prozentwert oder die absolute Größe in Pixeln angeben.

6.5.5.3 Bilder ausrichten

Bilder können entweder per CSS (s.o.) ausgerichtet werden oder per Anweisung im HTML-Quellcode. Innerhalb des HTML-Quellcodes können sie dies über das Attribut „align“ das die Eigenschaften left, right oder center annehmen kann. Wenn Sie ein Bild links oder rechtsbündig ausrichten wird es vom Text umflossen.

6.5.5.4 Hintergrundbilder und Farben

Jedes Objekt, jede Tabelle und jede Schrift kann mit einem Hintergrundbild oder einer Farbe belegt sein. Im CSS können Sie die Farbe über den Formatierungsdialog --> Rahmen --> Reiter „Schattierung“ festlegen. Es wird dann in die CSS-Definition ein entsprechender Eintrag eingefügt. Soll der komplette Hintergrund einer Seite im HTML mit einem Bild oder einer Farbe belegt werden, so kann dies direkt im <body>-Tag geschehen.

<body background=“pfad_zum_bild/hintergrundbild.png“>
...
</body>

Neben einem Bild können Sie auch einen Hexadezimalwert angeben oder eine der definierten Farbnamen wie „white“ oder „yellow“, „red“ oder „black“. Außerdem ist es möglich an Stelle des Attributs "background" das Attribut "stylesrc" zu verwenden und damit auf ein CSS-File zu verweisen, aus dem die Hintergrund-Informationen für die Seite hervorgehen.

6.6 Hyperlinks einsetzen

Hyperlinks (Querverweise) sind das Mittel im Internet um Informationen zu verknüpfen und von einem Punkt zum nächsten zu gelangen. Hyperlinks können als Links innerhalb einer Seite, zu anderen Seiten, zu einer definierten Stelle innerhalb einer anderen Seite oder als relative Links zu Seiten innerhalb der Webseitenstruktur auftauchen.

6.6.1 Standard-Hyperlinks

Wenn Sie in FrontPage einen Hyperlink einfügen wollen, klicken Sie auf das Symbole Hyperlink einfügen. Sie gelangen in einen Dialog, bei dem Sie ein Hyperlinkziel eingeben können, zum Beispiel auf http://www.stefan-klebs.de oder ftp://heise.de.
Im Quelltext wird dabei dann das <a>-Tag gesetzt. (a für address). Es wird immer vom schließenden </a> begleitet. Der Text oder das Bild zwischen der Tagklammer wird dann nachher im HTML-Dokument anklickbar.
Das Tag kann in vielen Ausprägungen vorkommen und wird daher durch folgendes Attribut spezifiziert: href (hyperlink reference). Konkret sähe dies für die erste der beiden oben genannten Adressen so aus:

<a href=“http://www.stefan-klebs.de“>Webseite von Stefan Klebs</a>

Man spricht hier im Übrigen von einem absoluten Pfad. Innerhalb ihrer eigenen Webseitenstruktur können sie auch mit relativen Pfadnamen arbeiten. Wenn in Ihrem Stammverzeichnis die Datei index.htm liegt und im Unterverzeichnis „contact“ die Datei „imprint.htm“), dann können Sie in der Indexseite auch folgenden Hyperlink setzen:

<a href=“./contact/imprint.htm“>Impressum</a>

Dabei gibt der Punkt an, dass im aktuellen Verzeichnis begonnen werden soll. Andersherum würde der der Link folgendermaßen aussehen:

<a href=“../index.htm“>Startseite</a>

Der zweifache Punkt würde dabei das nächst höhere Verzeichnis zum Zielverzeichnis bestimmen. Wollten Sie zwei Etagen nach oben wechseln, müssten sie das Konstrukt so einsetzen:

<a href=“../../index.htm“>Startseite</a>

6.6.2 Hyperlinks in einem neuen Fenster öffnen

Um Hyperlinks in einem neuen Fenster zu öffnen gehen Sie in FrontPage folgendermaßen vor. Im Hyperlink-Dialog wählen Sie „Zielframe“ und klicken dort auf „Neues Fenster“. Ihrem Tag wird dann folgendes Attribut angefügt:

<a href=“http://www.stefan-klebs.de“ target="_blank">Webseite von Stefan Klebs</a>

6.6.3 Hyperlinks in einer Frameseite einsetzen

In einem Frameset haben Sie, abhängig von der Anzahl, Ihrer Frames unterschiedliche Möglichkeiten Hyperlink-Ziele zu bestimmen. Dabei kommt wie schon bei der Neuen Seite das „target“-Attribut zum tragen.

target=“_self“ öffnet den Link im gleichen Fenster
target=“_parent“ öffnet den Link im übergeordneten Fenster
target=“_top“ löst das Frameset auf und zeigt das Ziel ans ganze Seite ohne Frames
Bei definierten Frames kann auch der Name des Frames angegeben werden

6.6.4 Hyperlinks in einem Dokument verwenden (Textmarken)

Um innerhalb eines Dokuments an eine andere Stelle (zum Beispiel an eine Überschrift zu springen) ist es erforderlich diese Stelle als Textmarke oder „Ankerpunkt“ vorher zu definieren. Dazu markieren Sie die Stelle mit der Maus und klicken im Menü „Einfügen“ auf „Textmarke“. Anschließend werden Sie aufgefordert einen Namen für diese Textmarke zu vergeben. Achten Sie darauf keinerlei Leerzeichen oder Sonderzeichen zu verwenden. Im Quelltext entsteht dadurch folgende Konstruktion

<a name=“kapitel_eins“>1. Kapitel</a>

Sie können nun von überall auf diese Textmarke verweisen.

a. innerhalb einer Webseite verweisen

Wenn Sie nun einen Hyperlink zur entsprechenden Stelle setzen wollen, gehen Sie wie gewohnt vor und rufen den Hyperlink-Dialog auf, wählen jedoch keine Datei aus, sondern klicken auf die Schaltfläche „Textmarke“. Dort werden Sie Ihre eben angelegte Textmarke vorfinden. (Achtung: Sie müssen die Datei einmal gespeichert haben.) Im HTML erscheint dadurch folgende Anweisung:

weiter zum <a href=“#kapitel_eins“>1. Kapitel</a> des Buches.

b. zu einer Textmarke in einer anderen Seite springen

Um eine Textmarke in einer anderen Seite anzusprechen, gehen Sie ganz ähnlich vor. Wählen Sie jedoch im Hyperlink-Dialog zuerst die Zeildatei und klicken Sie dann auf „Textmarke“, wo Sie anschließend die gewünschte Marke wählen können.

zum <a href=“texte.htm#kapitel_eins“>1. Kapitel</a> des Buches.

6.6.5 Mailto-Hyperlink

Sie können ein Link hinterlegen, der dazu führt das beim Anweder das Mailprogramm mit einer Neuen E-Mail geöffnet wird. Dazu wählen Sie im Hyperlink-Dialogfeld einfach das Feld „E-Mail-Adresse“ im Bereich „Link zu...“. Das Hyperlinkfenster verändert sich und sie können einen Empfänger und einen Betreff bereits vorbestimmen. Im HTML erscheint folgender Quelltext:

<a href=“mailto:kontakt@stefan-klebs.de?subject=Kursübersicht“>Mail</a>

6.6.6 Hyperlink-Quickinfos

Fast alle Browser unterstützen eine Technik, mit der es möglich ist ein kleines gelbes Infofeld anzeigen zu lassen, wenn man mit der Maus über den Hyperlink fährt. In diesem Feld können Sie eine Info wie "Hier geht's zu meinem Online-Shop" platzieren. Verwenden Sie dazu folgendes Attribut im <a>-Tag:

<a href="./shop.htm" title="Hier geht's zu meinem Online-Shop"</a>

6.7 Gemeinsame Randbereiche verwalten und einsetzen

Gemeinsame Randbereiche sind das Frontpage eigene Mittel zum Einbinden von seitenübergreifenden Inhalten in mehrere Seiten. Dabei bedient sich FrontPage eines versteckten Verzeichnisses _borders, in dem - je nach Bedarf - bis zu vier HTML-Seiten (top, left, right, bottom) abgelegt werden. Die Inhalte dieser Seiten baut Frontpage beim Veröffentlichen der eigentlichen Seiten mit Hilfe von Tabellenzellen (1x1-Tabellen) in jede dafür bestimmte Seite mit ein. Der Vorteil ist die Framelosigkeit dieser Methode. Der Nachteil ist, dass Menüs oder Banner, die sie in diese Randbereiche legen mit dem Inhalt wegscrollen. Dennoch können gemeinsame Randbereiche ganz praktisch sein. Um einen gemeinsamen Randbereich über alle Seiten festzulegen gehen Sie wie folgt vor: Wählen Sie im Menü "Format" --> "Gemeinsame Randbereiche..." und sie gelangen in ein Dialogfeld. Hier können Sie festlegen, ob die Einstellung für eine oder alle Seiten der Webseite gelten sollen und welchen Seitenrand Sie zu einem solchen gemeinsamen Rand umfunktionieren wollen.
Um die versteckten Ordner auch in Frontpage anzuzeigen klicken Sie im Menü "Extras" auf "Websiteeinstellungen...". Dort in Registerkarte "Erweitert" finden Sie die entsprechende Einstellung zu versteckten Dateien.

6.8 Webseite überprüfen

Vor der Veröffentlichung Ihrer Seite (und später in regelmäßigen Abständen), sollten Sie diese auf inhaltliche, logische oder technische Fehler überprüfen. FrontPage liefert dazu mehreren Hilfsmittel mit aus, die Ihnen die Arbeit, gerade bei komplexen Seiten, deutlich erleichtern. Darüber hinaus stehen Ihnen die Developer-Toolbar für den Internet Explorer, die Sie bei Microsoft herunterladen können sowie zahlreiche Validierungen im Web zur Verfügung.

6.8.1 FrontPage-Berichte

In der Ansichtregisterkarte "Website" bietet FrontPage im unteren Bereich mehrere Ansichten an. Eine davon heißt Berichte. Klicken Sie darauf und FrontPage beginnt Daten zu Ihrer Webseite zu sammeln. Abhängig von der Gesamtgröße kann das ein wenig dauern, nur Geduld. Ist das erledigt, sehen Sie links eine Übersicht über Ihre Webpräsenz. Wichtig sind im Prinzip die Fehlerkategorien. Durch einen Klick auf die Kategorie gelangen Sie in die detailierte Liste. Von dort aus können Sie eine Detailfehlermeldung sehen und in die betroffene Seite abspringen um den Fehler zu korrigieren. Sie sollten zum Beispiel darüber nachdenken unverknüpfte Dateien, also Dateien, die zwar in Ihrer Webseite abgelegt sind, aber von keiner Webseite aus aufgerufen werden können aus der Seite zu entfernen um Speicherplatz auf dem Server zu sparen. Zwei Prüfungen sind ganz essentiell für den späteren Betrieb der Webseite. Erstens die Übersicht über die langsamen Seiten. In den Optionen lässt sich dazu Einstellen von welcher Verbindungsbandbreite ausgegangen werden soll und ab welcher Ladezeit eine Seite als langsame Seite gelten soll. Gehen Sie bei Internetverbindung am besten von 128 KBbit/s und 30 Sekunden Ladezeit aus, denn noch nicht alle Surfer verfügen über Breitbandanschlüsse. Auf Modembenutzer würde ich allerdings keine allzugroße Rücksicht mehr nehmen. Die zweite wichtige Kategorie ist die der fehlerhaften Hyperlinks. Am besten Sie gehen in jedes Dokument was in der Übersicht angegeben ist korrigieren die Fehler. Zu guter letzt sollte auch ein Blick auf die Komponentenfehler nicht fehlen. Alle anderen Infos können, aber müssen Sie nicht zwangsläufig korrigieren. Die Seite läuft auch ohne die Korrektur.

6.8.2 Analysen

Neben den FrontPage-Berichten, gibt es auch die Möglichkeit die Seiten auf die Benutzbarkeit hin zu überprüfen. Betroffen sind eventuell Menschen mit Behinderungen, Menschen, die mit alten Bildschirmen und geringerer Auflösung arbeiten, Menschen mit PDAs, Handhelds und Mobiltelefonen und weitere mehr. Für Sie spielt zum Beispiel eine Rolle, dass hinter jedem Bild und jedem Hyperlink eine Erklärung liegt, dass bei Scriptgesteuerten Seiten eine Noscript-Alternative existiert usw. Um die Seite auf die Kriterien des World Wide Web-Consortiums ( http://www.w3c.org) zu testen, können Sie im Menü "Extras" --> "Eingabehilfen" wählen. Hier können Sie auch Einstellen, welche Prüfungen durchgeführt werden sollen und welche Art von Meldungen (Fehler, Warnungen) ausgegeben werden sollen. Wählen Sie alle drei Prüfungen aus und lassen Sie diese einmal durchlaufen. Wenn Sie anschließend alle Fehler korrigiert haben, dann sind Sie ein gutes Stück weiter vorangekommen.

6.8.3 Aufgaben

Sie werden feststellen, dass die laufende Pflege einer Webseite in der Regel viel zeitintensiver ist, als das erstmalige Erstellen. Ein Änderungswunsch führt häufig zu 50 Baustellen, an denen Sie etwas umsetzen müssen. Um dabei nichts zu übersehen gibt es die Möglichkeit Aufgaben im System zu hinterlegen, an denen Sie dann entlang arbeiten können. Jede Aufgabe kann entweder für sich stehen oder eine HTML-Seite direkt zugeordnet werden. Wenn Sie die Ansicht "Aufgaben" in der Registerkarte "Website" wählen, können Sie jederzeit durch Rechtsklick auf den weißen Bereich und dann Auswahl von "Aufgabe hinzufügen.." eine neue Aufgabe anlegen. Diese Aufgabe können Sie nun einem User, der im Projekt beteiligt ist zuweisen und eine Priorität sowie eine Aufgabenbeschreibung einfügen.

Über diesen Weg können Sie jedoch keine Verknüpfung zu einer bestimmten Webseite hinzufügen. Wenn Sie dies wollen, markieren Sie in der normalen Ordneransicht die gewünschte Webseite und klicken Sie anschließend auf den kleinen Pfeil neben der Schaltfläche für ein neues Dokument. In der Dropdownliste wählen Sie dann Aufgabe. Das Dialogfeld, das Sie dann sehen entspricht dem gezeigten. Jedoch ist dort eine Assoziation mit der vorher markierten Webseite eingetragen. Als Verantwortlicher im Feld "Zugewiesen an" steht Standardmäßig der Seitenverantwortliche, der für die Seite global im Reiter "Arbeitsgruppe" der Seiteneigenschaften hinterlegt ist. Sie können die Zuständigkeit dort jedoch auch ändern und einen anderen im System bekannten Benutzer auswählen. Die Aufgabe taucht nun auch in der Kategorie Aufgaben bei den Berichten auf. Sie können aus der Aufgabenansicht auch durch Doppelklick direkt in die Seite springen. Die Aufgabe wird dann vom System automatisch von "noch nicht begonnen" (Status rot) auf "in Bearbeitung" (Status gelb) gesetzt. Um eine Aufgabe als erledigt zu markieren, wenn alle Arbeiten abgeschlossen sind, wählen Sie in der Aufgabenansicht (Kontextmenü der Aufgabe) "als erledigt markieren". Die Aufgabe bekommt dann einen entsprechenden Grünstatus.

5.9 Upload der Seite auf einen Server

Um die fertige Seite nun auf einen Server hochzuladen, gibt es die Möglichkeit dies entweder mit einem externen FTP-Tool zu erledigen oder direkt durch FrontPage erledigen zu lassen. Seit FrontPage 2003 steht Ihnen dazu ein akzeptables Tool unter "Datei" --> "Webseite veröffentlichen..." zur Verfügung. Die Versionen davor beherrschen das gängige Transferprotokoll FTP nicht. Vielmehr war es erforderlich, dass der Server die FrontPage-Extensions unterstützt hat. Damit wollte Microsoft windowsbasierte Webserver verkaufen. Erst als man merkte, dass sich diese Strategie nicht durchsetzte, baute man die Unterstützung für den anderen Protokolle auch ein. Heute stehen insgesamt vier Protokolle zur Verfügung. Wichtig sind primär zwei davon: FTP und Dateisystem.
Wenn Sie sich für Dateisystem entscheiden, weil Sie zum Beispiel im Firmennetzwerk einen Samba-Server zur Verfügung stehen haben, müssen Sie eigentlich nur noch das Laufwerk und den Ordner angeben, in dem die Seite gespeichert werden soll.
Wenn Sie FTP wählen, können Sie den FTP-Server und ein entsprechendes Verzeichnis angeben. Diese Informationen erhalten Sie von Ihrem Webhosting-Anbieter. Ein entsprechender Benutzername und ein Kennwort wird in einem späteren Schritt benötigt.
Achten Sie bitte als DSL-Kunde darauf den Haken bei "Passives FTP verwenden" in jedem Falle zu setzen. Es könnte sonst mit Ihrer Firewall Probleme geben.

Sind auf dieser Registerkarte alle Infos gefüllt, stehen Ihnen zwei weitere Reiter zur Verfügung. Der zweite "HTML optimieren" kann getrost ignoriert werden. Sie könnten alle HTML-Kommentare entfernen. Allerdings ist die "Optimierungseffizienz" nahezu null und von daher keinen Gedanken wert.
Im dritten Reiter "Veröffentlichen" haben Sie jedoch wieder die Möglichkeit sich um wichtige Dinge zu kümmern. Sie können dort festlegen, ob generell immer alle Seiten und Dateien auf dem Zielserver ersetzt werden, oder ob nur veränderte Dateien ersetzt werden sollen. Im letzteren Fall können Sie dazu dann noch festlegen, wie Sie bestimmen, welche Seite aktueller ist. Der Zeitstempel ist zwar als Alternative verfügbar, aber nicht immer verlässlich. (Zum Beispiel wenn der Serveradministrator eine Seite ändern musste und diese Seite nun einen aktuelleren Zeitstempel als Ihre lokale hat, aber einen veralterten Inhalt.) Der Inhaltsvergleich ist zwar aufwändiger, aber dafür auch zuverlässiger.

5.10 Tagregister

Die folgenden Tags sind in diesem Kurs besprochen worden. (In order of appearance)

Letzte Aktualisierung 30.04.2011 23:45 Uhr
© by Stefan Klebs (2004-2011)