Einstieg in Frontpage
Web-Seiten ohne
Aufwand gestalten



Wenn einige Anfangshürden genommen sind, macht der Web-Editor und Site-Manager Frontpage 98 das Publizieren von Internet-Angeboten einfach und komfortabel. sharpi online zeigt Ihnen in acht Schritten den problemlosen Einstieg in das Web-Programm:

 

 

 

Die erste Web-Site einrichten

 

Design-Vorlagen verwenden

 

Web-Seiten im Editor bearbeiten

 

Neue Web-Seiten hinzufügen

 

Mit Tabellen elegant layouten

 

Hyperlinks richtig verwalten

 

Eigene Ideen in Designs umsetzen

 

Die Web-Site veröffentlichen

 

Designs benötigen eine Menge Platz

 

InfoTips

Das Publizieren von Web-Seiten war bisher echte Expertenarbeit, denn die dazu nötigen Programme erforderten profunde Kenntnisse der Internet-Technik. Doch inzwischen stehen dem Anwender Hilfsmittel zur Verfügung, die das Veröffentlichen im Web zum Kinderspiel machen.

   Frontpage 98 von Microsoft ist ein solches Autoren-Tool. Es ist mit einer grafischen Benutzerführung ausgestattet und erlaubt, HTML-Seiten fast wie mit einer modernen Textverarbeitung anzufertigen. Das Software-System besteht aus mehreren Teilen:

  • Frontpage-Explorer: Er dient dem Entwerfen und Verwalten ganzer Web-Sites. Er organisiert die dazugehörigen Dateien und Ordner, importiert bereits vorhandene Web-Seiten, stellt vorgefertigte Gestaltungselemente (Designs) zur Verfügung. Frontpage überwacht Hyperlinks und verwaltet Zugriffsrechte.
  • Frontpage-Editor: Der Editor erlaubt es, eine einzelne Web-Seite zu bearbeiten. Sie können Text, Bilder, Tabellen, Formularfelder oder andere HTML-Elemente einfügen und sehen die Arbeitsfläche dabei im wesentlichen so, wie dies später ein Web-Browser anzeigen würde.
  • Image Composer: Eine Bildbearbeitung mit verschiedenen Effekten. Das Programm enthält auch einen Gif-Animator, um aus einzelnen Gif-Bildern kleine Animationen zu erzeugen.
  • Server-Erweiterungen: Eine Gruppe von Programmen, die auf dem Web-Server installiert werden, auf dem Ihre Web-Seiten gespeichert werden. Sie unterstützen das Veröffentlichen und Verwalten der Web-Seiten. Die Dokumentation (Server Extensions Resource Kit) finden Sie auf der CD-ROM im Verzeichnis SERK\DEU. Rufen sie aus diesem Verzeichnis das HTML-Dokument HOME.HTM auf.
  • Software Development Kit: Weitere Angaben für Entwickler, beispielsweise zu CGI oder Wizards. Sie sind im Verzeichnis \SDK zu finden.


Die erste Web-Site einrichten

Falls sich Ihr PC in einem lokalen Netzwerk befindet, bestimmt Frontpage 98 beim ersten Start den Host-Namen und die TCP/IP-Adresse des lokalen PC.

Vergewissern Sie sich notfalls bei Ihrem Netzadministrator über diese Daten. Danach fragt das Programm, ob es ein bestehendes Frontpage-Web öffnen soll. Die Liste darunter erlaubt den Zugriff auf schon bestehende Projekte.

   Wählen Sie die Option "Neues Frontpage-Web erstellen" aus und bestimmen Sie im nächsten Schritt dem Typ der Site. Zur Auswahl stehen: Diskussionsweb-Assistent, Firmenpräsenzweb-Assistent, Kundenunterstützungsweb, Leeres Web, Persönliches Web und Projektweb.

   Je nachdem, welchen Eintrag Sie wählen, wird unter der Liste ein kurzer Text angezeigt, der die Art des Webs beschreibt. Wählen Sie "Firmenpräsenzweb-Assistent"und geben sie ihm einen Titel, etwa "Firma".

   Nun müssen Sie noch den Ort angeben, an dem die neue Web-Site gespeichert werden soll. Klicken Sie dazu auf die Schaltfläche "Ändern". Falls Sie in einem Intranet arbeiten und dort ein Arbeitsverzeichnis verwenden wollen, geben Sie hier die entsprechende http-Adresse an. Um das Projekt auf der lokalen Festplatte zu speichern, geben Sie den entsprechenden Pfad an, beispielsweise "C:\MEINWEB".

   Wenn Sie nun alle Angaben bestätigen, legt Frontpage das Verzeichnis MEINWEB auf C: an und erzeugt verschiedene Verzeichnisse: _PRIVATE, _VTI_CNF, _VTI_LOG, _VTI_PVT und IMAGES. War das angegebene Verzeichnis schon vorhanden, fragt die Software, ob sie diesen Ordner in ein Frontpage-Web konvertieren soll. Diese Konvertierung erzeugt die genannten Unterordner.

Ein Assistent stellt die Web-Site zusammen

Nun meldet sich der Assistent für das Firmenpräsenzweb. Er klärt zusammen mit Ihnen, wie das Firmenweb aussehen soll. Insgesamt haben Sie 13 Dialoge zu bewältigen. Dabei geht es um die Art und den Aufbau der Web-Seiten, um das Feedback-Formular und die Art der E-Mail-Übertragung, um die Hyperlinks des Inhaltsverzeichnisses, um gleichbleibende Elemente auf einer Seite am oberen und unteren Seitenrand (Navigationshilfen, Seitentitel, Logo und so weiter), Firmenanschrift und die Auswahl eines Designs.

   Überspringen Sie den Design-Dialog, denn es ist hier noch nicht wichtig. Zum Schluß fragt der Assistent, ob nach dem Erzeugen der Site die Aufgaben-Ansicht angezeigt werden soll. In dieser Ansicht listet die Software anfallende Arbeiten auf. Deaktivieren Sie die Option und stellen Sie Ihr Web fertig. Das Ergebnis stellt Frontpage in der Navigations-Ansicht dar.

   Die verschiedenen Ansichtsarten im Frontpage-Explorer können Sie in der Ansichten-Leiste links im Programmfenster auswählen. Am wichtigsten sind:

  • Ordner-Ansicht: Zeigt den Speicherort an, an dem Frontpage die Site ablegt, im vorliegenden Fall C:\MEINWEB und die entsprechenden Unterordner. Die Ansicht entspricht der Darstellung im Windows-Explorer.
  • Alle Dateien: Diese Ansicht listet sämtliche Dateien, die zur Site gehören, in einer Reihe auf. Ordner werden dabei nicht berücksichtigt.
  • Navigation: Die Navigations-Ansicht ist im Anfangsstadium zweifellos das wertvollste Werkzeug. Sie gibt in Form eines Organigramms Auskunft über den Aufbau der Web-Site und stellt dar, wie die Seiten miteinander verknüpft sind.
  • Sollte die Struktur nicht ganz im Fensterausschnitt angezeigt werden, klicken Sie mit der rechten Maustaste auf die hellblaue Fläche und wählen "Größe anpassen" aus. Bei kleinen Web-Sites können Sie so sämtliche dazugehörigen Seiten anzeigen lassen.
  • Designs: Microsoft liefert eine stattliche Anzahl vorgefertigter Gestaltungselemente für eine Web-Site mit. Unterstützt von der Design-Ansicht, können Sie Ihrer Site so ein Design zuweisen.


Design-Vorlagen verwenden

Frontpage bietet mehr als 50 vorgefertigte Designs an, erreichbar über die Designs-Ansicht.

Zu einem Design gehören Hintergrundbild, Banner, Schaltflächen, Aufzählungszeichen, Überschriften, Trennlinien, Navigationsleisten und die Farben der Hyperlinks. Zu jedem Design können Sie außerdem angeben, ob es mit Hintergrundbild, aktiven Grafiken oder lebendigen Farben verwendet werden soll.

   Wenn Sie in der Ansicht-Leiste auf das Symbol "Design" klicken, erscheint im Fenster eine Liste der verfügbaren Themen. Bei der Auswahl eines Eintrags zeigt die Design-Vorschau die entsprechenden Gestaltungselemente an. Stellen Sie sich vor,

   Sie würden als Unternehmen "Meridian" Landkarten verkaufen. Dazu würde das Design "Expedition" passen. Klicken Sie es an und übernehmen Sie es mit Hilfe der entsprechenden Schaltfläche. Frontpage stattet daraufhin Ihre Web-Seiten mit den jeweiligen grafischen Elementen aus. Das kann einige Zeit dauern.

   Die Designs sind eine bequeme Möglichkeit, eine Site schnell und unkompliziert zu gestalten. Doch wirken sie - das liegt in der Natur der Sache - relativ schematisch. Zum Üben sind sie allerdings hervorragend geeignet.

   Um sich mit dem Programm vertraut zu machen, können Sie mit den mitgelieferten Vorlagen experimentieren. Sie müssen auch nicht immer alle Elemente eines Designs verwenden. Um bestimmte Elemente zu löschen, verwenden Sie den Editor.


Web-Seiten im Editor bearbeiten

Die Grundlagen des Firmen-Web sind geschaffen. Zum Bearbeiten der Seiten wechseln Sie zurück in die Navigations-Ansicht.

Mit einem Doppelklick auf das Symbol für die Home-Seite öffnen Sie das Dokument im Frontpage-Editor. In der Kopfleiste der Seite sehen Sie Firmenlogo, Navigationsleiste, eine Titelgrafik mit der Aufschrift "Home" und drei Schaltflächen.

   Darunter beginnt der Seitentext mit den weiteren Hyperlinks. Das Logo ist ein Platzhalter, das Sie durch das "richtige" Logo ersetzen müssen. Aktivieren Sie den Kopfbereich, klicken Sie den Platzhalter mit der rechten Maustaste an und wählen Sie "Bildeigenschaften".

   In diesem Dialog können Sie mit der zur Bildquelle gehörenden Schaltfläche "Durchsuchen" ein Bild auswählen. Um eine Datei aus einem beliebigen Verzeichnis zu holen, müssen Sie im nächsten Dialog auf das Explorer-Symbol neben dem Eingabefeld "URL" klicken.

   Sie können auch ein Bild der mitgelieferten Clipart verwenden, falls Sie sie installiert haben. Nach dem Laden des Firmenlogos ersetzen Sie den grünen Text neben dem Logo durch einen eigenen. Klicken Sie den Text an. Er wird daraufhin ausgewählt, und Sie können einen eigenen Text eingeben.

   Mit Hilfe der Format-Symbolleiste können Sie die verschiedenen Elemente auf der Seite ausrichten. Um die Position des Textes neben dem Firmenlogo zu verändern, müssen Sie wieder die Bildeigenschaften aufrufen und das Register "Erscheinungsbild" auswählen.

   Die Listbox "Ausrichtung" erlaubt die Formatierung des Textabschnitts in bezug auf das Logo.

   Mit Hilfe der rechten Maustaste erhalten Sie neben den jeweiligen Objekteigenschaften auch Zugriff auf die Seiten-, Absatz- und Zeicheneigenschaften. Mit Drag-and-Drop lassen sich die Elemente auch beliebig positionieren. Versuchen Sie es einfach.

Neue Web-Seiten hinzufügen

Sie können unbesorgt auch Elemente löschen. Die Designs übertreiben mit den Schaltflächen ein wenig. Im Seitenkopf genügt zum Beispiel die schmale Navigationsleiste mit Home, Feedback, Inhalt und Suchen.

Die drei Schaltflächen unter der großen "Home"-Leiste sind überflüssig. Löschen Sie sie.

   Nun stellt sich die Frage, wie man die Beschriftungen der Navigationsleiste und von "Home" ändert. Der Editor bietet dazu keine Möglichkeit. Da die jeweiligen Angaben mit der Struktur der Web-Site zu tun haben, hat Microsoft die entsprechenden Funktionen zur Veränderung im Explorer angesiedelt.

   Wechseln Sie zurück in die Navigations-Ansicht des Explorers und ändern Sie den Namen des Feedback-Symbols durch zweimaliges Klicken (kein Doppelklick!) in "Mail an Meridian". Sie können statt des zweiten Mausklicks auch die Taste [F2] drücken. Der Text "Home" läßt sich dann durch einen anderen ersetzen.

   Nennen Sie die Home-Seite zum Beispiel "Willkommen!". Klicken Sie mit der rechten Maustaste dann rechts neben das Suchen-Symbol auf den Fensterhintergrund, wählen Sie "Neue Stammseite"und nennen Sie sie "Archiv".

   Rufen Sie wieder die Homepage, jetzt die "Willkommen"-Seite im Editor auf. Sie sehen, daß die große Überschrift der Seite nun nicht mehr "Home", sondern "Willkommen!" heißt und daß sich die Beschriftung einiger Schaltflächen der Navigationsleiste gemäß der vorgenommenen Eingaben verändert hat.

   Darüber hinaus ist nun die fünfte Navigations-schaltfläche "Archiv"dazugekommen. Auch die neben dem Text zum Unternehmensziel stehenden Schaltflächen lassen sich auf die gleiche Weise umbenennen und erweitern.

   Entfernen Sie nun noch den ersten Haupttext und die horizontale Linie, so daß "Unser Unternehmensziel" am Textanfang steht. Wenn Sie die Textattribute dieser Überschrift ändern wollen, setzen Sie den Cursor in die entsprechende Textzeile und rufen über die rechte Maustaste "Absatzeigenschaften" auf. Im entsprechenden Dialog finden Sie Formate, die den gängigen HTML-Textformatierungen entsprechen.

   Werfen Sie nun wieder mal im Frontpage-Explorer einen Blick auf die Aufgaben-Ansicht. Obwohl Sie die Homepage bearbeitet haben, hat sich am Status des betreffenden Aufgabeneintrages nichts geändert. Die Aufgabenliste erweist sich somit eher als Notizblock

Mit Tabellen elegant layouten

Fügen Sie nun eine Tabelle auf der Homepage ein. Sie soll als Layout-Hilfe das Firmenlogo und die Anschrift des Unternehmens aufnehmen.

Setzen Sie den Cursor noch vor das Firmenlogo und wählen Sie im Hauptmenü "Tabelle | Tabelle einfügen...". Im dazugehörigen Dialog formatieren Sie die Tabelle mit einer Zeile und zwei Spalten. Wenn Sie die Angaben übernehmen, wird die Tabelle am Seitenanfang eingesetzt.

   Setzen Sie nun per Drag-and-Drop das Firmenlogo und den dazugehörigen kurzen Text in die linke Zelle.

   Setzen Sie den Cursor in die rechte Zelle und geben Sie die Unternehmensanschrift, Telefon, Fax und E-Mail-Adresse ein. Trennen Sie die einzelnen Angaben durch einen erzwungenen Zeilenumbruch ([Shift][Return]).

   Formatieren Sie diese Angaben rechtsbündig, indem Sie sie auswählen und in der Format-Symbolleiste das Symbol für "Zentriert" anklicken. Verkleinern Sie noch die Schrift mit Hilfe der Formatierung "Überschrift 6".

   Nun müssen die Tabellenränder noch verschwinden, denn man soll sie nicht sehen. Rufen Sie mit Hilfe des Kontextmenüs der Tabelle die Tabelleneigenschaften auf, setzen Sie die Rahmenstärke auf 0 und verlassen Sie den Editor.

   Da die Kopfleiste eine Art Formatvorlage für alle Seiten der Web-Site ist, werden Sie feststellen, daß sich die Veränderungen, die Sie vorgenommen hatten, auf jedem HTML-Dokument niedergeschlagen haben.

Hyperlinks richtig verwalten

Zwei Ansichten des Explorers haben Sie noch nicht kennengelernt: die Ansichten "Hyperlinks" und "Hyperlinkstatus".

Die Hyperlinks-Ansicht zeigt das Verknüpfungsgeflecht der Seiten an. Dabei steht jeweils die Seite im Mittelpunkt, die in der Navigations-Ansicht oder im Fensterbereich "Alle Seiten" ausgewählt ist.

   Links von ihr sind alle Seiten aufgelistet, die einen Hyperlink besitzen, der auf diese Seite verweist. Rechts von ihr finden sich alle Seiten, auf die ein Hyperlink der ausgewählten Seite zeigt.

   Viele Seitensymbole zeigen ein Pluszeichen in der oberen linken Ecke. Wenn Sie es anklicken, entfalten sich von der betreffenden Seite alle Links, die auf sie hinweisen, und das Pluszeichen verwandelt sich in ein Minuszeichen. Ein erneuter Klick blendet die Links wieder aus.

   Ein Tip: Die Arbeitsfläche dieser Hyperlink-Ansicht ist nicht unbedingt übersichtlich. Um schnell den Fensterausschnitt zu bewegen, klicken Sie mit der Maus auf die Fläche und halten die Maus- taste gedrückt. Der Mauszeiger wird zu einer Hand, mit der sie den Fensterausschnitt schnell verschieben können.

   Die Hyperlinkstatus-Ansicht ähnelt mehr der Aufgaben-Ansicht. Sie listet fehlerhafte Links auf, falls welche vorhanden sind. Wenn Sie auf der Homepage zum Beispiel einen Link einfügen, der keine vollständige Adresse besitzt, etwa nur http://www, finden Sie eine entsprechenden Eintrag in der Hyperlinkstatus-Ansicht.

   Der Status wird als "unbekannt" gekennzeichnet und mit einem gelben Punkt markiert. Sie können den fehlerhaften Link mit einem Doppelklick direkt in der Hyperlinkstatus-Ansicht bearbeiten und korrigieren. Sobald dies geschehen ist, erlischt der betreffende Eintrag in der Hyperlinkstatus-Ansicht.

Eigene Ideen in Designs umsetzen

So so, Ihnen gefallen die mitgelieferten Designs nicht? Dann machen Sie sich doch selbst welche!

Auf der Frontpage-CD-ROM finden Sie im Verzeichnis \SDK\THEMES\DESIGNER das Programm Theme Designer. Mit dessen Hilfe können Sie die vorhandenen Designs Ihren Wünschen anpassen oder sogar völlig eigene Themen anlegen.

   Nach dem Installieren finden Sie das Programm im Explorer-Menü "Extras" als Option "Show Theme Designer". Wenn Sie im Theme Designer den Menüpunkt "FILE | NEW THEME..." auswählen, sehen Sie eine ziemlich mausgraue Versammlung von Gestaltungselementen: normale Schaltflächen und Navigationsschaltflächen (Button), Banner, Standardtext (Regular text sample), Überschriften (Heading), Hyperlinks (Link) und mehr.

   Jedes Element besitzt ein Kontextmenü, mit dessen Hilfe Sie die jeweiligen Eigenschaften aufrufen und verändern können. In erster Linie ist das die Grafik, die das Element darstellt. Außerdem sind Zeichensatz, Farben oder die Ausrichtung zu beeinflussen.

   Beim Sichern des Designs müssen Sie einen Titel für die Auswahlliste in der Design-Ansicht angeben und einen Kurznamen nennen, der als Ordnername für die Themeninformation im THEMES-Verzeichnis verwendet wird

Die Web-Site veröffentlichen

Der letzte Schritt beim Erstellen eines Internet-Angebots ist das Veröffentlichen im Web oder Intranet.

Auch für diesen Schritt bietet Frontpage eine spezielle Funktion, so daß Sie nicht auf irgendeine FTP-Software für den Dateitransfer zurückgreifen müssen. Sie ist im Explorer als Symbol "Publizieren" in der Symbolleiste oder im Menü "Datei"unter "FrontPage-Web publizieren..." zu finden.

   Der Publikations-Assistent fragt zuerst, wo die Web-Site publiziert werden soll. Um einen Server in die Liste aufzunehmen, klicken Sie auf die Schaltfläche "Weitere Webs...". Hier geben Sie die Adresse des Internet- oder Intranet-Servers ein.

   Wer zum Beispiel seine Web-Seiten beim Online-Dienst AOL veröffentlichen will, gibt members.aol.com ein. Sie können die Dateien aber auch zuerst testweise auf der lokalen Festplatte "veröffentlichen". Dann setzen Sie den gewünschten Verzeichnispfad ein, zum Beispiel C:\TESTWEB.

   Zusätzlich können Sie bestimmen, ob nur zwischenzeitlich veränderte Seiten überspielt werden sollen oder ob Sie die gesamte Web-Site transferieren wollen. Beim erstenmal lädt Frontpage natürlich alle Dateien an den Bestimmungsort. Später, wenn ein Angebot lediglich aktualisiert werden soll, genügt es, die geänderten Seiten zu kopieren.

   Gibt man mit "OK" grünes Licht, fragt der Publishing-Assistent nach dem Namen des Web-Servers. AOL-Kunden geben hier members.aol.com ein. Als Verzeichnispfad müssen Sie "/" und den AOL-Namen angeben, der auch als Verzeichnisnamen auf dem Server gilt.

   Im nächsten Dialog benötigen Sie noch Teilnehmername und Kennwort, und Frontpage beginnt mit dem Upload.

   Damit haben Sie die grundlegenden Schritte im Umgang mit Frontpage kennengelernt. Natürlich kann sich dieser Workshop nur auf die nötigsten Grund-lagen beschränken.

   Doch sollten Sie nun ein Gefühl für die Arbeitsweise des Programms entwickelt haben und dafür, wie es zu bedienen ist. Zusammen mit dem Theme Designer und der Bildbearbeitung haben Sie alles, um komfortabel eine Intranet-Site zu pflegen.

Designs benötigen eine Menge Platz


Die Meridian-Firmen-Site, die der Frontpage-Assistent in diesem Workshop erzeugt hat, umfaßt nach dem Veröffentlichen auf der lokalen Fest-platte sage und schreibe 355 Dateien und belegt 602 Kilobyte bei 16 HTML-Dokumenten, die der Online-Anwen- der später zu sehen bekommt.

   Von diesen Dateien lädt das Programm 199 beim Publizieren auf den Server - ein ungeheurer Overhead, der sich leider nicht vermeiden läßt. Wer nicht soviel Platz zur Verfügung hat, sollte die Designs nicht verwenden.

   Die Frontpage-Designs dürften sich somit nur für den Einsatz im großen Firmenweb oder im Intranet im lokalen Netzwerk eignen, wo Speichermangel und Übertragungsgeschwindigkeit in der Regel keine Themen sind.

   Um ihre Leistungsfähigkeit auszuschöpfen, müssen auf dem Server außerdem die Frontpage-Server-Erweiterungen installiert sein. Erkundigen Sie sich in diesem Fall bei Ihrem Internet-Anbieter, ob dies möglich ist und was es kostet.

   Der Test mit einer einzigen Web-Seite ohne Frontpage-Designs, je-doch mit zwei Grafiken erzeugte dagegen die drei erwarteten Dateien. Zusätzlich kopierte die Software die (leeren) Ordner IMAGES und _PRIVATE auf den Web-Server

Infotips

Im Internet finden Sie bei Microsoft und in den Nachrichtengruppen Informationen und Tips zu Frontpage 98.

Infos online:

Frontpage-Resource: http://www.microsoft.com/frontpage/

Neue Designs und Templates:

Das Installationsprogramm ist zwar in englischer Sprache, doch die Designs selbst werden korrekt in Deutsch verwaltet