Kapitel 8

Geschrieben von Torsten Lenneper. Veröffentlicht in FrontPage 2000

Stern inaktivStern inaktivStern inaktivStern inaktivStern inaktiv
 

Mit Hyperlinks arbeiten

Nun kommen Sie zu einem wichtigen Teil beim Erstellen Ihres Webs. Die Hyperlinks, oder auch kurz Links genannt, haben das Surfen im Internet stark erleichtert. Sie verbinden mit den Links Webseiten miteinander. Die Verbindung kann innerhalb einer Seite bzw. Webs stattfinden aber auch auf fremde Webs verweisen. Der Vorteil der Links ist, Sie müssen nicht manuell die Seiten aufrufen oder aber an das Ende einer Seite scrollen. Der Hyperlinks führt Sie direkt zum Ziel, und das per Klick auf eine solche Verknüpfung.

Links auf Webseiten erkennen Sie in der Regel daran, dass sie unterstrichen sind. Da aber auch normaler Text unterstrichen dargestellt werden kann, ist das zweite Merkmal der Mauszeiger. Dieser ändert sich, wenn Sie ihn über einen Link führen, in eine Hand .

Die Planung

Sie haben bisher sechs Webseiten erstellt. Nun sollten Sie diese Seiten miteinander verbinden. Ohne diese Verbindungen würde dem Besucher, wenn er Ihre Webadresse eingegeben hat, nur die Homepage angezeigt. Auf die anderen Seiten kann er nicht gelangen, es sei denn, er kennt die einzelnen Dateinamen und gibt diese zusätzlich in der Adressleiste des Browsers ein.

 
 


Die Pfeile in der folgenden Abbildung zeigen, von welcher Seite Sie zu einer anderen gelangen sollten.

Wenn Sie die Links so anordnen, kann der Besucher von der Homepage zu allen anderen Seiten und auch wieder zurück gelangen.


Hyperlinks formatieren

Hyperlinks erkennt man in der Regel auf Anhieb daran, dass sie unterstrichen sind und die Schriftfarbe blau verwendet wurde. Wenn Sie die Farbe ändern möchten, rufen Sie das Dialogfenster «Seiteneigenschaften» auf und öffnen dort das Register «Hintergrund». Suchen sich dort eine andere Farbe aus (wenn dies nicht unbedingt sein muss, sollten Sie die Standardeinstellungen beibehalten). Damit der Besucher weiss, welche der Links er bereits angeklickt hat, werden besuchte Links andersfarbig dargestellt. Auch für diese Darstellung können Sie eine Farbe auswählen . Die letzte Auswahlmöglichkeit haben Sie für den Hyperlink, der gerade aktiv ist . Die Dauer, wie lange ein Link als besuchter Link dargestellt wird, hängt von den Einstellungen in Ihrem Browser ab. Im

Internet Explorer legen Sie die Zeitspanne z.B. unter «Verlauf» fest.

Relative und absolute Hyperlinks

Wenn Sie einen Hyperlink auf einer Seite einfügen wird die Verknüpfung als Internet-Adresse, so wie Sie sie auch in die Adressleiste eingeben, gespeichert. Diese Adresse nennt man auch URL (Uniform Resource Locator). Es gibt nun zwei verschiedene Arten von Hyperlinks.

Bei den absoluten Links wird die vollständige URL gespeichert, wie z.B. http://www.rtl.de/computer/computer.html. In dieser Adresse wird das Protokoll, der Webserver, ein Unterverzeichnis auf dem Server und der eigentliche Dateiname der Seite aufgeführt. Diese Links sollten Sie benutzen, wenn Sie von Ihrem Web auf ein anderes im Internet verweisen möchten.

Bei den relativen Hyperlinks verzichtet man z.B. auf die Angabe des Protokolls und Webservers. In diesem Fall werden die fehlenden Informationen durch die aktuell verwendeten übernommen. Wenn Sie von Ihrer Homepage auf die Seite mit den Restposten verweisen möchten, müssen Sie nicht http://www.copuco.de/repo.htm eingeben, sondern es reicht die Angabe des Dateinamens. Dies erleichtert Ihnen vor allem dann die Arbeit, wenn Ihr Web auf einen anderen Server verschoben werden soll. In dem Fall müssen Sie nämlich nicht sämtliche Angaben des Webservers in Ihren Links ändern, da die sich ja nur auf die einzelnen Seiten im aktuellen Web beziehen.

Hyperlink mit Text erstellen

Öffnen Sie die Seite «index.htm» und fügen Sie hinter dem letzten Absatz einen neuen Absatz ein, in dem Sie einmal die Enter-Taste drücken. Geben Sie den folgenden Text ein . Markieren Sie den Text und klicken Sie danach auf das Symbol . Den Befehl zum Erstellen von Hyperlinks finden Sie auch im Menu EINFÜGEN►HYPERLINK oder im Kontextmenu. Es öffnet sich ein Dialogfenster.


Der Link soll auf die Seite, auf der Sie sich vorstellen, verweisen. Markieren Sie also die Datei durch Klick. Die URL trägt FrontPage automatisch als relativen Link für Sie ein. Auch wenn Sie die Datei später einmal in einen anderen Ordner verschieben, passt FrontPage die URL automatisch für Sie an. Wenn Sie jetzt noch auf die Schaltfläche klicken, wird das Fenster geschlossen und der Text wird unterstrichen dargestellt. Öffnen Sie die Vorschau und klicken einmal auf den Link. Es sollte nun die verknüpfte Seite angezeigt werden. Wenn Sie nicht in die Vorschau wechseln möchten, können Sie auch die Strg-Taste gedrückt halten, während Sie den Link anklicken (oder Sie nehmen den Befehl HYPERLINK FOLGEN aus dem Kontextmenu). Wenn Sie die Seite im Browser betrachten und den Link anklicken, kommen Sie momentan nur über die Zurück-Schaltflächen wieder zur vorigen Seite. Das werden Sie später zum Teil noch abändern.

Mit Hilfe der Symbole können Sie ausserdem eine Verbindung zum Internet aufbauen und eine Seite von einem anderen Web als Link einfügen oder Sie suchen nach einer bestimmten Datei auf Ihrer Festplatte, um ebenfalls einen absoluten Link zu erstellen. Weiterhin können Sie einen Link einfügen, der beim Besucher das Fenster zum Schreiben einer neuen E-Mail öffnet, welches dann bereits mit der von Ihnen angegebenen Adresse ausgefüllt wurde. Die letzte Möglichkeit ist ein Link auf eine neue Seite, die Sie dann erst später gestalten werden.

Hyperlink mit Grafik erstellen

Genauso oft wie Hyperlinks, die aus einfachem Text bestehen, finden Sie mittlerweile Grafiken, die, wenn Sie sie anklicken, eine Verknüpfung öffnen. Es spielt übrigens keine Rolle, ob Sie ein grosses Bild oder aber eine kleine ClipArt, wie z.B. ein Aufzählungszeichen verwenden. Achten Sie nur darauf, dass der Besucher die Grafik auch als Hyperlink wahrnehmen kann.

Öffnen Sie die Seite «wir.htm» und wählen Sie den Befehl EINFÜGEN►BILD►CLIPART. Suchen Sie sich eine Grafik aus und fügen Sie diese ein. Da Sie ja bereits in den bisherigen Übungen auf dieser Seite schon eine Grafik eingefügt haben, können Sie auch gleich diese benutzen. Rufen Sie das Dialogfenster «Hyperlink erstellen» wie bei der Texterstellung auf. Denken Sie nur daran, die Grafik auch zu markieren bzw. den Rechtsklick in die Grafik auszuführen. Klicken Sie im Fenster auf die Datei «index.htm» und bestätigen mit und speichern die Seiten wieder einmal. Jetzt können Sie zwischen den beiden Seiten hin und her wechseln.


Hoverschaltflächen

Diese Schaltflächen werden durch verschiedene Animationen ‚belebt’. Sie haben sicherlich im Internet schon einmal auf einen Link geklickt und dabei ein Klickgeräusch gehört. Oder die Schaltfläche verändert die Farbe, wenn man mit der Maus darüber fährt. Diese Animationen werden mit Hilfe von kleinen «Java-Applets» realisiert. Darum müssen Sie sich allerdings nicht kümmern, da FrontPage diese Applets selbstständig erstellt und einfügt (Sie können sich später auch selbst mit der Programmiersprache Java beschäftigen und selbst kleine Programme schreiben).

Schaltfläche erstellen

Auf der Homepage soll eine Schaltfläche eingefügt werden, die auf die Seite mit den Restposten verweist. Die Schaltfläche soll rot dargestellt werden und grün leuchten, wenn Sie mit der Maus darauf zeigen.

Öffnen Sie zunächst die Seite «index.htm» und setzen die Einfügemarke an das Ende der Seite. Gehen Sie in das Menu EINFÜGEN►KOMPONENTE►HOVERSCHALTFLÄCHE oder wählen Sie die Komponente über das Symbol aus. Im folgenden Dialogfenster geben Sie einen Text ein, der dann später auf der Schaltfläche erscheinen soll. Wenn Sie die Schriftart, -schnitt, -grad und -farbe verändern möchten, klicken Sie auf die entsprechen­de Schaltfläche im Fenster und nehmen im nächsten die Änderungen vor.

Als nächstes suchen Sie die Seite, auf die der Link verweisen soll, in dem Sie auf klicken. Jetzt suchen Sie sich die Farben für die Schaltfläche aus und legen einen Effekt fest. Die Grösse der Schaltfläche können Sie ebenfalls bestimmen. Wenn Sie mit Ihren Einstellungen zufrieden sind, schliessen Sie das Fenster durch Klick auf . Jetzt müssen Sie die Seite speichern und dann erst wechseln Sie über das Register in die Vorschau um den Effekt zu testen. Wenn Sie mit der rechten maus in die Schaltfläche klicken ( aber in der Normalansicht) rufen Sie das Fenster wieder auf, um eventuelle Änderungen vorzunehmen. Alternativ steht der Befehl im Menu FORMAT►EIGENSCHAFTEN. Probieren Sie einmal die verschiedenen Effekte aus, vergessen Sie aber nicht, jedes Mal zu speichern, bevor Sie in die Vorschau wechseln.


Benutzerdefinierte Schaltfläche

Wenn Sie auf die Schaltfläche klicken, öffnet sich ein weiteres Dialogfenster. Hier legen Sie fest, ob ein Sound beim Klicken oder bereits beim Überfahren der Schaltfläche abgespielt werden soll. Sie können allerdings nicht die ‚normalen’ Soundformate verwenden (beachten Sie hierzu die Online-Hilfe).

Wenn Sie statt der Schaltfläche lieber eine Bild benutzen möchten, suchen Sie sich die Datei im unteren Bereich heraus. Es besteht auch die Möglichkeit, ein zweites Bild mit anzugeben, so dass sich die Bilder beim Überfahren mit der Maus verändern.

Links innerhalb einer Seite

Wenn Sie Seiten mit viel Text erstellt haben, muss der Besucher, wenn er bestimmte Informationen sucht, durch das gesamte Dokument scrollen. Besser ist es da, wenn Sie den Text aufteilen und den verschiedenen Abschnitten Überschriften zuweisen. Die Überschriften erscheinen am Anfang bzw. oberhalb des eigentlichen Textes und der Besucher kann durch Klick direkt zu dem entsprechenden Thema innerhalb der Seite springen.

Textmarken erstellen

Damit Sie innerhalb einer Seite an die gewünschten Stellen springen können, müssen Sie diese Sprungmarken markieren. Diese Markierungen nennt man Textmarken.

Öffnen Sie die Seite «angebot.htm» und geben Sie den Text wie abgebildet ein.

Markieren Sie jetzt den ersten Punkt der Nummerierung. Gehen Sie in das Menu EINFÜGEN►TEXTMARKE um das Dialogfenster zum Erstellen der Textmarke zu öffnen. Der markierte Text wird gleich als Name für die Textmarke eingetragen. Lassen Sie es bei der Einstellung und klicken anschliessend auf . Der Punkt wird in der Seitenansicht nun mit einer gestrichelten Linie dargestellt.


Textmarke löschen

Wenn Sie eine Textmarke nicht mehr benötigen, lässt sie sich ganz schnell entfernen. Klicken Sie dazu in die Textmarke und gehen wieder in das Menu EINFÜGEN►TEXTMARKE oder klicken Sie rechts in die Marke und nehmen den Befehl TEXTMARKENEIGENSCHAFTEN aus dem Kontextmenu. Es öffnet sich wieder das Fenster aus Abbildung 8.6. Markieren Sie in der Liste die gewünschte Textmarke und klicken dann auf . Die Marke wird dann ohne Rückfrage gelöscht. Haben Sie versehentlich die Falsche gelöscht, klicken Sie einfach auf das Symbol um die Aktion wieder rückgängig zu machen.

Hyperlink zur Textmarke

Nachdem Sie die Vorarbeit erledigt haben, können Sie nun die Überschrift mit der Textmarke verlinken. Markieren Sie dazu die Überschrift und klicken auf das Symbol oder Sie wählen den Befehl aus dem Menu EINFÜGEN►HYPERLINK. Im unteren Bereich des Fensters wählen Sie die Textmarke aus der Liste aus. In der angezeigten URL erkennen Sie die Textmarke am vorangestellten Nummernzeichen . Ein Klick auf übernimmt Ihre Einstellung und schliesst das Fenster. Wie Sie sehen, wurde die Überschrift in einen Hyperlink verwandelt. Speichern Sie die Seite und wechseln über das Register zur Vorschau. Ein Klick auf diesen Link sollte den passenden Text am oberen Rand des Fensters anzeigen.

Nun kann der Besucher zwar schnell zu einem bestimmten Punkt auf Ihrer Seite gelangen, doch wenn er wieder zur Übersicht möchte, muss er wieder scrollen. Sie sollten deshalb zusätzlich bei jedem Abschnitt auch noch einen Link einfügen, der den Besucher mit einem Klick wieder an den Anfang der Seite bringt. Das werden Sie jetzt mit einer ClipArt erledigen.

Setzen Sie die Einfügemarke bei Punkt 1 hinter das Wort . Jetzt rufen Sie die ClipArts über EINFÜGEN►BILD►CLIPART auf. Geben Sie als Suchbegriff «Pfeil» ein und drücken Sie die Enter-Taste. Fügen Sie die Grafik wie abgebildet ein und markieren sie durch einen Klick. Da die Grafik für Ihre Zwecke zu gross ist, formatieren Sie über das Menu FORMAT►EIGENSCHAFTEN.


Öffnen Sie das Register «Erscheinungsbild». Die Grafik soll am rechten Rand erscheinen, also wählen Sie diese Ausrichtung und ändern Sie auch noch die Stärke der Rahmenlinie.

Nun klicken Sie in das Kästchen um die Grösse ändern zu können. Da nicht proportional geändert werden soll,
entfernen Sie hier das Häkchen. Geben Sie nun die Werte für die Breite und die Höhe in Pixel ein und klicken danach auf .

Die Grafik sollte nun so aussehen und sich auch an der richtigen Stelle befinden.

Markieren Sie die Überschrift und erstellen eine Textmarke mit dem Namen «oben». Zum Schluss klicken Sie die Grafik mit der rechten Maustaste an und wählen aus dem Kontextmenu den Befehl HYPERLINK. Im folgenden Fenster suchen Sie in der Liste die Textmarke und klicken dann auf .

Speichern Sie die Seite und die eingebettete Grafik und wechseln anschliessend wieder in die Vorschau. Klicken Sie auf den Link um zum ersten Nummerierungspunkt zu gelangen. Wenn Sie jetzt wieder nach oben möchten, klicken Sie auf die Grafik.

Textmarken auf anderen Seiten

Es ist auch möglich, einen Link zu einer anderen Seite im Web zu erstellen. Sie müssen die Seite, auf der der Link eingefügt werden soll und die Seite mit der Textmarke öffnen, ansonsten erscheinen die Marken nicht. Erstellen Sie nun den Link durch Klick auf . Im Dialogfenster markieren Sie dann oben in der Liste die Seite, die die Textmarke enthält und wählen diese dann unten aus der Liste aus. In der URL wird dem Nummernzeichen noch der Name der Datei vorangestellt .


Hyperlink zum Internet

Die bisherigen Hyperlinks haben Ihr Web nicht verlassen. Der Besucher springt innerhalb einer Seite oder von einer Seite auf eine andere. Sie können aber auch Links erstellen, die direkt eine Seite aus einem anderen Web aufrufen. Auf der Seite mit den Sonderposten werden Artikel angeboten, allerdings ohne Beschreibungen. Sie können nun die Artikelbeschreibung selbst hinzufügen oder aber, Sie verweisen auf die Seite des Herstellers, wo der Besucher genaue Informationen zum Produkt erhält.

Öffnen Sie die Seite «sopo.htm» und markieren Sie in der Tabelle den Artikel . Wählen Sie aus dem Menu EINFÜGEN►HYPERLINK und tragen im Feld «URL» die Adresse der Webseite ein (wenn Sie die Seite vorher zur Kontrolle besucht haben, kopieren Sie im Browser die Adresse und fügen sie hier wieder ein. Das erspart Tipparbeit und vermeidet Fehler) . Alternativ klicken Sie auf das Symbol um den Standardbrowser zu starten. Gehen Sie zur gewünschten Seite. Sobald die Seite geladen wurde, wechseln Sie zurück zu FrontPage und die Adresse steht im Feld. Bestätigen Sie durch Klick auf . Der Besucher kann jetzt die gewünschten Informationen direkt vom Hersteller abrufen.

Hyperlinks für E-Mails

Ein etwas anderer Link ist der hier vorgestellte. Bisher wurden die Links nur zur Navigation genutzt. Dieser Link vereinfacht dem Besucher die Kontaktaufnahme mit Ihnen. In Kapitel 6 haben Sie auf der Seite «wir.htm» die E-Mail Adresse eingegeben. Diese Adresse wurde von Frontpage automatisch in einen Link umgewandelt. Klicken Sie den Link mit der rechten Maustaste an und rufen die HYPERLINKEIGENSCHAFTEN aus dem Kontextmenu auf. Wie Sie sehen, wurde hier schon eine URL eingefügt . Sie haben auch wieder die Möglichkeit, eine Grafik oder einen anderen Text einzugeben und zu verlinken. Dann müssen Sie allerdings die URL manuell eingeben.

Wenn dieser Hyperlink nun angeklickt wird, öffnet sich bei dem Besucher automatisch das Fenster für eine neue Nachricht des bei ihm installierten E-Mail Programms. Die Adresse ist schon eingegeben und der Besucher kann seinen Text eingeben und die E-Mail an sie versenden. Testen Sie das einmal auf Ihrer Seite.


Selbermachen 8.1

¨Erstellen Sie weitere Textmarken in der Seite «angebot.htm»

¨Erstellen Sie die Hyperlinks um innerhalb der Seite zu den einzelnen Textmarken zu springen

¨Um immer wieder an den Anfang der Seite zu gelangen, fügen Sie auch die Grafik mit dem Pfeil ein. Sie können sich Arbeit sparen, in dem Sie den Hyperlink markieren und kopieren und anschliessend an den passenden Stellen wieder einfügen

Selbermachen 8.2

¨Erstellen Sie auf der Seite «repo.htm» Hyperlinks zu den Herstellern. Die Adressen können Sie im Internet finden oder Sie ‚erfinden’ die Adressen selbst (ob diese dann funktionieren ist allerdings fraglich, aber auch unerheblich für diesen Kurs)

Selbermachen 8.3

¨Öffnen Sie die Seite «angebot.htm» und erstellen aus dem Punkt «I» einen Hyperlink zu einer neuen leeren Seite

¨Geben Sie den Text auf der Seite ein

¨Speichern Sie die Seite mit dem vorgegebenen Titel unter dem Namen «hdd40.htm»

¨Erstellen Sie auf die gleiche Weise einen weiteren Hyperlink zu den Festplatten bis 80 GB. Passen Sie den Text entsprechend an und speichern unter «hdd80.htm»

¨Überprüfen Sie alle Seiten und Links im Browser

Obwohl man sie immer und überall sieht, ist die Arbeit mit den Hyperlinks doch gar nicht so schwer. Es ist halt nur viel Arbeit. Aber die Seiten sollten doch komfortabel gestaltet werden und den Besucher immer schnell zum Ziel bringen.

Im nächsten Kapitel beschäftigen Sie sich mit den organisatorischen Dingen, unter anderem auch mit der Prüfung der erstellten Links.

Bis dahin

Kapitel 8