lernscouts.de
Home Datenschutz Nutzungsbedingungen Impressum Kontakt
Microsoft - Ihr Potenzial. Unser Antrieb.
Strategische Partner
Bundesinitiative Jugend ans Netz Initiative D21


 
Webseiten erste Schritte
Vorbereitung und erste Schritte für die eigene Website
Jill hat sich vorgenommen, aus ihrer Bewerbungsmappe eine Website zu bauen. Sie hat schon öfter solche Seiten im Internet gesehen und es klingt schon toll, wenn man sagen kann: „Ich habe auch eine Hompage“. Jill möchte ihre Zeugnisse ins Internet stellen. Dazu hat sie diese bereits eingescannt. Von ihrer Volleyballmannschaft hat sie jede Menge Fotos. Einige davon wären auf der Homepage auch ganz schön. Sie hat alle Themen, Einfälle und ihr Material auf kleine Kärtchen geschrieben. Jetzt legt sie immer andere zusammen, um zu schauen, wie sie zueinander passen. Aber es ist noch ein ziemliches Chaos…

In dieser Lerneinheit erfährst du:

Woraus eine Website besteht und wie sie dargestellt wird
Hoch Runter

Webseiten, Website und Homepages
Webseiten sind Dokumente, die auf besonderen Computern abgespeichert sind. Man nennt diese Computer HTTP-Server, sie sind mit dem World Wide Web verbunden.

Um die Dokumente sehen zu können, braucht man einen Internetanschluss und ein zusätzliches Programm: einen
Browser.

Das Herstellen von Webseiten kann auch offline geschehen. Wenn man die Webseite dann jedoch veröffentlichen möchte, braucht man auch einem Internetzugang und ein Programm, mit dem man die Webseitendateien in das Internet hochladen kann. Das sind FTP Programme.

Übrigens
Ein und dieselbe Webseite kann mit verschiedenen Browsern oder mit verschiedenen Betriebssystemen betrachtet ganz anders aussehen. Unterschiede können auch durch die Einstellungen entstehen, die Anwender für ihren Computer treffen: die Bildschirmauflösung, die Farbeinstellungen usw. Profis überprüfen beim Erstellen von Webseiten immer wieder, wie diese unter verschiedenen Bedingungen aussehen.

Eine Website besteht aus mehreren Webseiten, die einen Zusammenhang bilden und miteinander verknüpft sind. Dabei gibt es meistens eine „Eingangsseite“, die Homepage, über die man auf alle weiteren Seiten gelangt. Wenn man sich eine Website als Haus oder Wohnung vorstellt, dann würden die Webseiten den einzelnen Zimmern entsprechen.

Es fällt oft schwer, sich in einer fremden Umgebung zurechtzufinden. In einem Haus würde man vielleicht herum geführt – in einem öffentlichen großen Gebäude wie z.B. ein Bahnhof gibt es überall Schilder, die darauf hinweisen, in welcher Stadt und auf welchem Gleis man sich befindet und wie man zu den anderen Gleisen gelangt.

Auch auf Websites, gerade wenn sie umfangreich sind, gibt es Orientierungshinweise: die Navigation.

Ebenso wie ein Haus eine Anschrift hat, damit man es findet, braucht eine Website oder eine Webseite eine Adresse, damit sie aufgesucht werden kann. Die zukünftige sollte möglichst kurz, aber trotzdem aussagekräftig sein. Es ist also nicht sinnvoll, mit Abkürzungen zu arbeiten. Umlaute und Sonderzeichen dürfen im Namen nicht vorkommen.

TIPP
In den Links auf der rechten Seite finden sich Internetseiten, wo man nachschauen kann, ob die URL mit dem Wunschnamen noch frei ist und bei welchem Internetanbieter oder Webpräsenzprovider man seine Domain anmelden kann.
Verschiedene Anbieter stellen auf ihren Seiten kostenlos Webspace zur Verfügung. Die Internetadresse beinhaltet dann allerdings den Domainnamen des Anbieters und wird so etwas länger.

Bild oder Text
Auf den meisten Websites finden sich viele Bilder. Das können Fotos, Zeichnungen oder Grafiken sein. Fotos werden für eine Website in das jpeg- umgewandelt. Dieses eignet sich für Bilder mit vielen Farben und Farbübergängen. Dabei werden die Bilder gleichzeitig . Für eine Webseite ist es wichtig, dass die Bilder nicht so viel Kilobyte haben. Je mehr Kilobyte bei einer Webseite zusammenkommen, desto länger dauert es, bis sie sich auf dem Bildschirm aufgebaut hat. Wenn man selbst schon einmal richtig lange gewartet hat, bis eine Seite vollständig geladen war, weiß man wie lästig das sein kann.

Die richtigen Einstellungsmöglichkeiten fürs Web findet man in jedem Bildbearbeitungsprogramm. In dem nützlichen Office „Picture it“ von Microsoft oder in dem Bildbearbeitungsprogramm Foto Designer Pro hat man die Möglichkeit, Bilder für Webseiten richtig zu komprimieren.

Zeichnungen oder Grafiken liegen auf einer Webseite meist im gif- vor. Dieses eignet sich für Bilder mit klaren Formen oder Linien und wenig Farben.

Text oder Grafik?
Text oder Grafik?

Wenn man eine bestimmte Schrift auf einer Webseite betrachtet, kann es sein, dass jemand mit einem anderen oder anderen Einstellungen nicht dieselbe Schrift sieht. Möchte man also gerade für Überschriften oder für die Navigationsbuttons eine besondere Schrift, muss man das Wort als Grafik darstellen. Jetzt wird es zwar überall gleich dargestellt – allerdings ist nun auch die Ladezeit etwas größer.

Text kann im Internet in verschiedenen Schriftgrößen, Farben und Stilen wiedergegeben werden. Auch der Abstand des Textes zum Dokumentrand, Absätze oder der Zeilenumbruch können mit Hilfe von bestimmt werden.

Der Unterschied zwischen einem Haus und einer Hompage
Der Quellcode besteht aus – Hypertext . Das ist keine Programmiersprache, sondern eine „Textbeschreibungssprache“ die festgelegt, wie der Inhalt auf der Webseite erscheinen soll.

Zwei Ansichten einer Webseite
Zwei Ansichten einer Webseite
Hier sieht man die Normalansicht und den Quellcode von Jims Webseite.


Einige Absätze vorher wurde eine Website mit einem Haus und dessen Zimmern verglichen. Die einzelnen Webseiten kann man sich dabei als verschiedene Zimmer für verschiedene Zwecke vorstellen. Wenn das Haus mehr eine Laube ist, die aus ein bis zwei Zimmern besteht, kann man das Bauwerk gut ohne Plan bauen. Auch die Materialien, die man dazu benötigt sind überschaubar.

Hat das Haus jedoch mehrere Zimmer über mehrere Stockwerke verteilt, kommt man ohne Bauplan nicht aus. Man brauch den Plan auch, um besser abschätzen zu können, welche und wie viel Materialien für den Bau zur Verfügung stehen müssen.

Bis hier hin ähneln sich Bauwerke und Websites… Bei Bauwerken würde man nach der Planung zu bauen beginnen. Nach einiger Zeit wäre Richtfest und schließlich Einweihung.

Eine Website baut sich durch einen bei jedem Aufruf wieder neu auf. Wenn der „Bauplan“ gut ist und alle „Materialien“ bereitstehen, geht das zum Glück in wenigen Sekunden.

Den ständigen Neuaufbau kann man durchaus mit dem Aufbau eines Zeltes vergleichen. Wer selbst schon einmal gezeltet hat weiß, dass man beim Aufbau schneller ist, wenn alle notwenigen Teile geordnet, verpackt und zugänglich sind. Und wie oft kommt man mit dem Aufbau nicht voran, weil ein ganz bestimmtes, wichtiges Teil nicht an seinem Platz ist. Daher hat man meist eine Tasche für die Stangen, eine Tasche für die Heringe, eine weitere mit dem Außenzelt usw.

Ordnerstruktur von Websites
Übung: Materialien werden in Ordnern sortiert
Um den reibungslosen Zusammenbau der Website zu gewährleisten, werden auch hier die Materialien sortiert: Es gibt einen Ordner für Grafiken, für Fotos, für Texte, vielleicht für sogar für Filme.


Wie man mit FrontPage arbeitet
Hoch Runter

Das Programmfenster
Früher konnte man eine Website nur erstellen, indem man selbst
HTML- Code schrieb. Das ist heute nicht mehr nötig. Es gibt verschiedene Programme, mit denen man direkt seine Gestaltungsvorstellungen umsetzen kann. Auch Microsoft FrontPage ist ein solches Programm: Das Programmfenster bietet eine Ansicht in und eine Entwurfsansicht. Zwischen beiden Ansichten kann man hin und her schalten und arbeiten.

Nach dem Starten des Programms öffnet sich ein Programmfenster, welches in fünf Bereiche untergliedert ist. Zuoberst befindet sich die . Hier sind Programmicon und -name platziert. Nachdem man eine Datei gespeichert oder ein vorhandenes geöffnet hat, sieht man in der auch die genaue Pfadangabe.

Im Bereich unter der gruppieren sich die und zwei Symbolleisten. Die listet bestimmte Themenbereiche auf, beim Anklicken der Begriffe klappt eine Auswahl von Befehlen zu dem gewählten Stichwort aus.

Die Symbolleisten bestehen aus kleinen Symbolschaltflächen. Es sind häufig verwendete Befehle, die durch kleine schnell zu erreichen sind.

Der mittlere Streifen ist für den Arbeitsbereich und den reserviert.

Wie in anderen Microsoft Office Programmen auch, bietet der Hilfestellung und verschiedene Auswahlmöglichkeiten an.

Im Arbeitsbereich erstellt man eine Website oder einzelne htm-Seiten. Durch Registerkarten kann man zwischen „Website“ und „htm-Seite“ umschalten. Für letztere gibt es dann vier Ansichten, die am Fuß des Fensters angezeigt sind:

1) Entwurf: die Ansicht in welcher man die htm-Seite direkt gestalten kann
2) Teilen: hier sieht man einen Teil der Entwurfsansicht und einen Teil der Code-Ansicht
3) Code: Abbildung des Codes, hier kann auch per Hand eingegeben werden
4) Vorschau: diese Ansicht vermittelt einen Eindruck, wie eine htm-Seite aussehen könnte. Sie stellt jedoch keinen Ersatz für eine Browserkontrolle dar, die regelmäßig durchgeführt werden sollte.

Für die Registerkarte „Website“ gibt es sechs Übersichtsmodi für verschiedene Themenbereiche wie Ordner, Navigationsstruktur usw.
Das FrontPage schließt wie alle Microsoft Office Programme mit der ab.

In der folgenden interaktiven Grafik kann man sich die Bereiche noch einmal anschauen.

Frontpage Programmfenster
Übung: Bereiche des Programmfensters
In dieser interaktiven Grafik kann man sich die Bereiche des Programmfensters noch einmal anschauen.


Kleiner Unterschied mit großen Folgen
Im Programm FrontPage wird zwischen Webseite und Website unterschieden. Da beide Begriffe sehr ähnlich klingen und die Worte beinahe gleich aussehen, tauchen sie immer zusammen mit einem Icon auf: die Webseite wird als einzelnes dargestellt, die Website als Ordner.

Die ersten Schritte in einem Programm beginnen immer damit, dass man in der den Befehl „Neu“ anklickt und ein Neues erhält. FrontPage bietet verschiedene Möglichkeiten an „Neu“ anzufangen: eine neue leere Seite, eine neue Textdatei, eine Seite aus einer vorhandenen Seite…Oder man beginnt mit einer neuen Website.

Die Entscheidung sollte man sich gut überlegen – als Webseite angelegte Dokumente lassen sich nachträglich nicht in FrontPage als Website darstellen.

Um den Unterschied nachzuvollziehen, probiert man am besten die folgenden Übungen aus:

Mach’s nach: Eine neue Webseite erstellen
Über das Aufklappmenü des Aufgabenbereichs oder über die Symbolschaltfläche „Neu“ auf der zweiten Symbolleiste kommt man zu dem Befehl neue leere Seite. Die neue Seite öffnet sich daraufhin in der voreingestellten Ansicht des Arbeitsfensters. In der Symbolleiste am Fuß des Arbeitsfensters sollte die Ansicht Entwurf ausgewählt sein.

Die blinkt nun auf einer weißen Seite – man kann einfach mit dem Schreiben beginnen: Das ist Seite 1. Wenn man mit gedrückter linker Maustaste den Text markiert, kann man die Schriftfarbe oder –stil in der Symbolleiste über dem Arbeitsfenster ändern.

Auch die Hintergrundfarbe kann verändert werden: Im Menü klickt man auf den Befehl Hintergrund und erhält das Dialogfenster Seiteneigenschaften. Hier stellt man die Registerkarte ein. In dem Feld Hintergrund sucht man sich eine Farbe aus.

Die Webseite speichern
Zum Speichern der Webseite klickt man auf das kleine Diskettenicon der Symbolleiste. Wenn sich das Dialogfenster Speichern unter öffnet, ist der Speicherort Meine Websiten meist schon vorausgewählt. Hier erstellt man zunächst einen neuen Ordner und speichert dann die Datei unter dem Namen „seite1.htm“ ab.

Jetzt ergänzt man die abgespeicherte Seite und fügt unter den Titel die Worte „klick mich“ hinzu.

Für den nächsten Schritt sollte noch einmal eine leere Seite erstellt werden, mit einer anderen Hintergrundfarbe. Die Seite wird als „seite2.htm“ im gleichen Ordner abgespeichert.

Auf dieser Seite steht: Das ist Seite 2 und mit einem Absatz darunter ebenfalls „klick mich“.

Beispielwebseiten mit Hyperlinkverknüpfung
Beispielwebseiten mit Hyperlinkverknüpfung
Hier ist die Webseite 1 verlinkt mit Seite 2 und die Webseite 2 ist mit der Seite 1 verlinkt.


Mach’s nach: Die Seiten verknüpfen
Jetzt kann man die Seiten miteinander verknüpfen. Man nimmt sich zunächst „seite1.htm“ vor und markiert die Worte „zu Seite 2“. Über das Menü Einfügen und den Befehl Hyperlink erhält man das Dialogfenster Hyperlink einfügen. Hier sucht man sich in der Ordnerstruktur die Datei „seite2.htm (öffnen)“. Nachdem man auf den OK Button geklickt und gespeichert hat, ist der Hyperlink schon fertig.

Das gleiche wird nun noch einmal mit „seite2.htm“ vorgenommen. Über das Menü Datei wählt man den Befehl Browservorschau. Wenn sich eine Seite im öffnet, kann man über die zwischen den Seiten hin und her schalten.

Vom Umfang her hat man mit diesen zwei Seiten immerhin eine kleine Laube gebastelt.

TIPP
Im Menü Ansicht kann man über den Befehl Tags anzeigen in die Entwurfsansicht Tags einblenden. Es werden dann nur die Tags, die direkt mit dem Inhalt verbunden sind und im Teil „body“ stehen aufgeführt. Wer sich mit HTML anfreunden will, kann sich so übersichtlich mit gängigen Tags vertraut machen und findet sich in der Ansicht Code auch leichter zurecht.

Mach’s nach: Die erste Website in drei Sekunden
Im Gegensatz zu einzelnen Webseiten ist eine Website ein ganzes Geflecht von Webseiten. Wie kann man ein solch kompliziertes Gebilde wie eine Website in drei Sekunden erstellen, nachdem man für die vorherige Übung eine Weile gebraucht hat, um sie in FrontPage nachzuvollziehen? Ganz einfach deswegen, weil es in FrontPage fertige Vorlagen für Websites gibt. In diese braucht man dann nur noch die eigenen Texte und Bilder einzufügen.

Für die nächste Übung wählt man über den oder die Symbolschaltfläche Neu den Befehl Website. Es öffnet sich das Dialogfenster Webvorlagen, aus dem man eine Vorlage auswählen kann. Dabei geht es noch nicht um das Aussehen der Website, sondern um einen Website-Typ. Für die Übung wählt man die Vorlage Persönliche Website. Im Arbeitsfenster erscheint daraufhin automatisch die Ansicht der Registerkarte Website. In diesem hat man die Übersicht über den eben erstellten Ordner Website mit seinen Unterordnern und htm-Seiten. FrontPage hat fünf Ordner und sechs verschiedene htm-Seiten angelegt. Die index.htm-Seite stellt die Homepage oder die Startseite dar und ist deshalb durch ein besonderes Icon hervorgehoben.

Schon ist die Website angelegt!

Woraus besteht eine Website?
Woraus besteht eine Website?

Das Geflecht verstehen
Die Ansicht der Registerkarte Website wird unten durch eine Symbolleiste abgeschlossen, auf welcher man auf weitere Ansichten der Website umschalten kann: schaltet man auf die Ansicht Navigation um, erhält man einen guten Überblick, wie die Seiten angeordnet sind.
Man sieht zuoberst die Index-Seite mit dem Titel „Meine Webseite“. Von hier aus kommt man zu den anderen Seiten. Die Titel kann man ganz einfach ändern, indem man die Seite auswählt und auf die rechte Maustaste klickt. In dem Ausklappmenü klickt man auf den Befehl Eigenschaften und erhält das Dialogfenster Eigenschaften von index.htm. In der Registerkarte Allgemein kann man in das Feld Titel einen Namen eingeben. Es kann durchaus ein anderer als der Dateiname sein. So könnte man die Startseite also auch „Jills Hompage“ nennen.

Neue Seiten zu einer Website hinzufügen
Übung: Die Website erweitern
In der Ansicht Navigation kann man die Website auch leicht erweitern. Möchte man z.B. bei der Seite „Interessen“ für jedes Hobby eine weitere Unterseite anlegen, markiert man die entsprechende Ausgangsseite und fügt über die Symbolleiste der Ansicht Navigation eine Neue Seite hinzu. Die neue Seite wird unter der Seite „Interessen“ angeordnet und ist als Unterseite zum Thema „Interessen“ zu verstehen.


Mach mit: Das Design ändern
Bis jetzt wurden durch FrontPage zunächst die Ordner und Seitenstruktur angelegt. Die einzelnen Seiten existieren noch gar nicht richtig. Daher geht man auf die Ansicht Ordner oder Navigation und ruft die Seiten durch Doppelklick auf. Jede Seite ist zunächst mit dem Standarddesign hinterlegt und mit Mustertext versehen, den man durch eigenen Text ersetzen kann.

FrontPage bietet einen sehr großen Fundus an verschiedenen Designs an. Auch auf der Internetseite von Microsoft werden regelmäßig neue FrontPage-Designs zum download angeboten.

Über das Menü klickt man auf den Befehl Design. Nun erscheint der Design auf der rechten Seite. In der Auswahl Alle verfügbaren Designs kann man nun verschiedene Designs ausprobieren.
Den Vorgang muss man für jede einzelne htm-Seite wiederholen und schließlich alles abspeichern.

Wie eine Website und wie eine Navigation aufgebaut ist
Hoch Runter

Verknüpft und verwoben
In der vorausgegangenen Übung konnte man gut sehen, dass eine Website wirklich eine Art Netz ist, weil jede Seite mit jeder anderen Seite verknüpft werden kann. Das funktioniert übrigens nicht nur innerhalb der eigenen Website. Man kann eine Seite auch mit fremden Websites verknüpfen. Das nennt sich dann externer Link, während die
Verknüpfung innerhalb einer Seite interner Link heißt.

Es gibt jedoch auf den Seiten noch andere Verknüpfungen. Wenn man ein Foto oder eine Grafik auf eine Internetseite einbindet, hat man ebenfalls eine hergestellt.
Im folgenden Beispiel sind die Verknüpfungen als Code aufgeführt:

Verknüpfen und verweisen
Verknüpfen und verweisen

Alle zusammenhängenden Teile werden im Code mit <spitzen Klammern> eingefasst. Dann folgt der Buchstabe „a“, der festlegt, dass der Link an dieser Stelle verankert ist. Mit „href“ ist Hyperlink gemeint. Dann steht in englischen Anführungszeichenbei den der Name des Ziels, z.B. seite.1.htm. Durch die Zeichenfolge </a> wird dieser Teil beendet.

Für ein Bild funktioniert es ähnlich. Die Einleitung erfolgt durch die Zeichenfolge img src=, gefolgt von der Pfadangabe des Bildes in englischen Anführungszeichen. Alles ist in spitze Klammern eingefasst. Img src steht für „Image source“, was Bildquelle bedeutet.

Durch die Pfadangabe bei der Bildverknüpfung wird deutlich, dass es zu Komplikationen kommt, wenn man den Bilderordner oder das betreffende Bild verschiebt.
Aber auch beim Verlinken von Seite zu Seite gibt es Schwierigkeiten, wenn man die Seiten später an eine andere Stelle stellt.

Alle Teile einer Website gehören in den Ordner der Website. Sie sollten nach dem Anlegen nicht verschoben werden.

Mach’s nach: Den Überblick behalten
Bevor man mit dem Aufbau seiner Website beginnt, sollte man sich also einen Plan machen: Wie viele Seiten werden es? Wie werden sie heißen und welche Inhalte sollen darauf? Wie sind sie miteinander verbunden? Wohin kommt man von welcher Seite?

Möglichkeiten der Verknüpfung
Möglichkeiten der Verknüpfung

Auch die Planung kann man schon mit FrontPage vornehmen. Dazu öffnet man eine neue Website und wählt im Dialogfenster Webvorlagen die Vorlage Standart Website aus.
Das ist eine ganz schlichte Website, die nur aus einer Index-Seite und zwei Unterordnern besteht. Nun schaltet man auf die Ansicht Navigation um. Durch das Hinzufügen von neuen Seiten über die Symbolleiste in der Navigationsansicht verbinden sich die Seiten gleich zu einem Navigationsbaum. Durch anwählen und ziehen kann man die neuen Seiten in ihrer Anordnung auch verschieben.

Jill möchte eine Bewerbungswebsite erstellen und hat sich folgende Struktur ausgedacht:
Indexseite: die möchte Jill mit „Jills Homepage“ betiteln. Es wird eine Begrüßungsseite sein.
Darunter, in die erste Ebene kommen dann die Seiten mit den Titeln „Wer ich bin“, „Was ich mache“, „Zeugnisse“ und „Kontakt“. In dieser Ebene sind bei Jill die Dateinamen und die Seitentitel gleich.

TIPP
Dateinamen für HTML-Seiten werden immer klein geschrieben. Leerzeichen, Umlaute wie ü, ä, ö oder Sonderzeichen sollten nicht darin vorkommen. Die Dateinamen müssen nicht mit den Seitentiteln identisch sein. Sinnvoller sind kurze, aussagekräftige Namen.

Für die Seite „Was ich mache“ hat Jill viele Ideen. Hier möchte sie von ihren Hobbys und Interessen berichten. Sie würde gern Fotos von ihren Modellbauten zeigen und ein bisschen erzählen, wie lange es gedauert hat, sie zu bauen oder welche sie sich selbst ausgedacht hat.
Aber auch von ihrer Volleyballmannschaft möchte sie gern einige Fotos abbilden und vor allen Dingen von der letzten Freizeit berichten. Beides auf eine Seite zu packen, findet Jill eigentlich zuviel. Außerdem hat sie ja noch andere Interessen. Daher entscheidet sie sich, von der Seite „Was ich mache“ ausgehend noch zwei Unterseiten anzulegen für die Themen „Modellbau“ und „Volleyball“. Jetzt hat Jill eine Navigationsstruktur mit FrontPage fertig gestellt.

Jills Website-Struktur
Jills Website-Struktur

Mach’s nach: Eine Navigation anlegen
Um mit diesem Teil der Übung fortzufahren, ist es wichtig, dass man die Navigationsstruktur von Jills Website in der Ansicht Navigationwie sie in der Abbildung gezeigt wird nachgebaut hat.

Nun führt man einen Doppelklick auf das Kästchen index.htm aus und öffnet damit die entsprechende, leere Seite. Über das Menü Einfügen wählt man den Befehl Navigation und erhält das Dialogfenster Webkomponente einfügen. Im Komponententyp sucht man die Möglichkeit Hyperlinkleisten aus. Im Leistentyp stellt man dann die Option Leiste basiert auf Navigationsstruktur ein und drückt anschließend auf Weiter.

Jetzt kann man sich verschiedene Designs von Leistentypen scrollen. Dabei bilden immer vier ähnlich gestaltete Buttons ein Design. Die oberen sind etwas größer und stehen für die erste Ebene. Die unteren Buttons sind zurückgenommener, weil sie für die untergeordnete Ebene stehen. Jeweils der rechte der Buttons ist hervorgehoben. Er unterscheidet sich geringfügig von seinem Nachbarn und gibt dem Besucher der Webseite später eine Orientierungshilfe.

Nachdem man sich nun für ein Design entschieden hat, klickt man auf Weiter. Im Wählen Sie eine Orientierungkann man sich für eine horizontale oder vertikale Anordnung der Navigationsleiste entscheiden. Durch das Anklicken des Buttons Fertigstellen erscheint das Dialogfenster Eigenschaften der Hyperlinkleiste. Hier wird eingestellt, auf welche Seiten die Navigation verweist und welche Verweise sichtbar sind. Je nach dem in welcher Ebene man sich befindet und auf welche Ebene mittels der Navigationsleiste zugegriffen werden soll sucht man sich die passende aus. Außerdem kann man noch Häkchen in die Kontrollkästchen Homepage und übergeordnete Seite setzen.

In diesem Beispiel wird die index.htm mit einer Navigation versehen. Daher wählt man hier untergeordnete Ebene aus, die Kontrollkästchen bleiben leer.

Übrigens
Solange die Website noch nicht gespeichert ist, haben die Registerkarten der Webseiten ein Sternchen hinter dem Namen. Man sollte immer wieder zwischendurch abspeichern.

Wenn man die Navigation für eine untergeordnete Seite erstellen möchte, geht man ebenso vor: nach dem Doppelklick auf die Seite „Wer ich bin“ in der Ansicht Navigation passiert man wieder die bekannten Dialogfenster. Aber Achtung! In dem Dialogfenster Eigenschaften der Hyperlinkleiste muss man sich genau überlegen, welche Möglichkeit man wählt. Jetzt befindet man sich eine Ebene tiefer als auf der index.htm. Daher sollte man sich nun für Gleiche Ebene entscheiden und in das Kontrollkästchen Homepage ein Häkchen setzen.

In der folgenden Kamerafahrt kann man die Prozedur für die Erstellung einer Navigation nachempfinden. Man muss sie für jede einzelne Webseite wiederholen.

Wählt man innerhalb der Registerkarte Website die Ansicht Hyperlink, erhält man einen Überblick, wie die Seiten mit einander Verknüpft sind.

Navigation erstellen
Übung: Navigationsstruktur entwickeln
Bevor man eine Navigation entwickelt, sollte man eine Navigationsstruktur gebastelt haben. Das kann man in der Ansicht Navigation der Registerkarte Website vornehmen. Die neuen Webseiten, die man innerhalb der Website erstellt, werden von FrontPage gleich richtig verknüpft.


Zusammenfassung

Jill hat es geschafft, ihre vielen Kärtchen zu sieben Webseiten zu bündeln. Da die einzelnen Webseiten alle mit einander verknüpft sind und zusammenhängen, wird Jill gleich eine Website erstellen. Sie entscheidet sich, nicht eine der Vorlagen zu nutzen. Lieber möchte sie selbst bestimmen, wie viele und welche Seiten sie baut. Daher wählt sie die „Standardwebsite“ aus. Über die Ansicht Navigation hat sie zügig eine Navigationsstruktur erstellt. Durch das Ordnen und Bündeln der Kärtchen war sie gut vorbereitet und braucht nicht lange zu überlegen.

Danach fügt sie auf jede einzelne Webseite eine Navigation ein. Sie benutzt immer das gleiche Design und die gleiche Anordnung, damit die Besucher auf ihrer Seite nicht durcheinander kommen. Manchmal waren die Eigenschaften der Navigation nicht richtig eingestellt. Dann erschien nicht die Navigation sondern ein Hinweis. Doch wenn man den doppelt anklickt, öffnet sich das Dialogfenster „Eigenschaften der Hyperlinkleiste“ erneut.

Teste dein Wissen!

 
 Toolbox


Drucken
Die Druckversion des Lernobjekts
Wissensnetz
Das Wissensnetz mit allen Begriffen.

 Film zum Lernobjekt

 Mehr im Netz
Struktur einer Website und Navigation
Wie baue ich meine Website auf? Wie findet der Besucher sich zurecht?
Dr.Web
Webdesign Magazin
Jakobs Alertbox
Deutsche Übersetzungen der Alertbox von Jakob Nielsen, der als sog. Guru für benutzerfreundliches Design gilt.
HTML-Dateien selbst erstellen
Der Klassiker unter den HTML-Anleitungen

 Kontakt
 © 2004 helliwood:media. Alle Rechte vorbehalten. Rechtliche Hinweise | Informationen zum Projekt | Autorenverzeichnis