Dreamweaver MX 2004 Arbeiten mit Frames - muc.kobis.de · Landeshauptstadt München Autorin: Uta Conrad 10.02.2006 e-mail : [email protected] Dreamweaver MX 2004 Arbeiten mit

Landeshauptstadt München

Autorin: Uta Conrad 10.02.2006 e-mail : [email protected]

Dreamweaver MX 2004 Arbeiten mit Frames

Inhalt: Mit Hilfe von Frames kann die Navigation auf Webseiten erheblich vereinfacht werden. Mit Hilfe von Frames wird das Browserfenster in mehrere Teile geteilt. Ein Teil enthält die Navigation, ein anderer die jeweiligen Inhalte. Sie erlernen hier anhand von einem einfachen Beispiel die Erstellung von Webseiten mit Frames. Dieses Selbstlernmaterial baut auf die Inhalte des Grundlagenkurses zu Dreamweaver 2004 auf.

Schul- und Kultusreferat Thema: Dreamweaver MX - Frames 2

Landeshauptstadt München Autorin: Uta Conrad e-mail : [email protected]

1 Inhaltsverzeichnis 1 INHALTSVERZEICHNIS ................................................................................................................ 2

2 VORBEMERKUNGEN ................................................................................................................... 2 2.1 METHODE................................................................................................................................. 2 2.2 BEFEHLSVARIANTEN .................................................................................................................. 2 2.3 AUFBAU DER ARBEITSANLEITUNG............................................................................................... 2 2.4 VEREINBARUNGEN..................................................................................................................... 2

3 DIE OBERFLÄCHE VON DREAMWEAVER MX........................................................................... 3

4 DIE EIGENSCHAFTEN DER FRAMES VERÄNDERN.................................................................. 7

5 EINE NAVIGATION ERST ELLEN ................................................................................................. 8 2 Vorbemerkungen 2.1 Methode

Im EDV-Bereich ist es inzwischen völlig unbestritten, dass Selbsttätigkeit von Schulungsteilnehmern für erfolgreiches Lernen unverzichtbar ist. Da die hier anwesenden TeilnehmerInnen einen sehr unterschiedlichen Stand bezüglich Vorwissen und Übung besitzen, werden sich auch sehr unterschiedliche Arbeitsgeschwindigkeiten ergeben. Damit die Geübteren nicht gebremst und die Ungeübteren nicht gehetzt werden hat sich das Konzept der Selbstlernmaterialien, das ein individuelles Arbeitstempo zulässt, sehr bewährt. Sie bekommen zu jedem heute benutzten Programmteil relativ ausführliche Arbeitsanleitungen. ð Bitte halten Sie sich zu Beginn eines neuen Abschnitts möglichst genau an diese Schritt-

für-Schritt-Anweisungen, auch wenn Ihnen dabei manches schon sehr vertraut ist. Meine Rolle ist es Sie bei auftretenden Schwierigkeiten zu beraten, das funktioniert aber nur, wenn ich nicht an allen Plätzen gleichzeitig gebraucht werde. Am Ende eines Abschnitts ist es geradezu erwünscht, dass Sie Ihr neues Können an selbstgestellten Aufgaben erproben.

2.2 Befehlsvarianten Auch und gerade in der "Windows -Welt" gibt es für jeden Befehl zwei bis fünf Eingabevarianten. Wir benützen hier überwiegend die Mausvariante und die Bildschaltflächen. Das ist für den Anfang sinnvoll, da man sich wenig merken muss und nicht andauernd die Zeit mit Nachschlagen verbringt. Benützt man einen Befehl später häufiger so kann man dann immer noch entscheiden, ob man lieber zu Tastenkürzeln greift.

2.3 Aufbau der Arbeitsanleitung In der linken Spalte werden die notwendigen Handgriffe beschrieben, in der rechten Spalte finden sich erläuternde Bildschirmausschnitte. Es ist sinnvoll jeweils ca. eine halbe Seite zu lesen und dieses dann direkt umzusetzen.

2.4 Vereinbarungen Befehle und Menüs werden kursiv geschrieben, Tasten und Tastenkombinationen z.B. Strg+Umschalt in Kapitälchen, Buchstaben die Sie eintippen sollen in Schreibmaschinenschrift. Befehlsfolgen werden manchmal in Kurzform so angegeben: Menü/ Untermenü/ Befehl.



3 Die Oberfläche von Dreamweaver MX Der Arbeitsbereich von Dreamweaver MX 2004 ist in mehrere Bereiche aufgeteilt. Ganz oben finden Sie das bei allen Programmen übliche Menü. Darunter befindet sich die Leiste „Einfügen“ über die Sie alle möglichen Elemente einer Webseite per Mausklick erzeugen können. Darunter finden Sie eine Leiste „Dokumente“, mit deren Hilfe man die Ansicht, die Bezeichnung und die Veröffentlichung der einzelnen Dokumente steuern kann. Die Rechte Seite - die „Bedienfeldgruppe“ - enthält ein oder mehrere Fenster, die hintereinander angeordnet sind. Im Moment sollte mindestensdas Dateien-Fenster geöffnet sein. Es ist für diesen Kurs eines der wichtigsten Fenster. Am unteren Rand des Bildschirms finden Sie das Eigenschaften-Fenster, das Ihnen eine sehr bequeme Möglichkeit bietet, die Eigenschaften des aktuell markierten Objektes Ihrer Webseite zu überprüfen und zu ändern. In der Mitte finden Sie das Dokumentenfenster, in dem Sie Ihre Webseiten bearbeiten können.

Einfügen-Leiste Menüleiste

Dokumente-Leiste

Bedienfeldgruppe

Dokumente

Eigenschaften-Fenster

Dateien-Fenster



1. Eine einfache Navigation mit Hilfe von Frames erstellen

Viele Webseiten werden mit Hilfe von Frames strukturiert. Das bedeutet, dass das, was ein Browser anzeigt, ein sogenanntes Frameset is t. Der Browser lädt zuerst eine Framesetdatei, die eine genaue Beschreibung enthält, wie das Fenster aufgeteilt werden soll und welche HTML -Datei in welchen Fensterbereich geladen werden soll. Jeder Fensterbereich erhält einen Namen über den der Bereich dann angesprochen werden kann.

Ein Browserfenster soll in 2 Bereiche aufgeteilt werden. Ein schmaler Bereich auf der linken Seite, der den Namen links erhält und der Rest, der den Namen haupt erhält, da sich da das meiste abspielt. Beim Laden eines solchen Framesets muss auch noch angegeben werden, welche HTML -Seiten in welchen Bereich angezeigt werden sollen. Wie wir sehen werden, können sich die Inhalte der einzelnen Bereiche aber später ändern. In unserem Beispiel soll im Frame links die Hauptnavigation geladen werden, die in der Datei hauptnav.htm abgespeichert werden soll. Der Hauptbereich haupt soll eine Startseite (Datei: start.htm) anzeigen. Name: links Geladene Datei: hauptnav.htm

Name: haupt Geladene Datei: start.htm

Diese Informationen werden in einer speziellen HTML-Datei (Framsetdatei) abgespeichert. In unserem Fall erhält Sie den Namen index.htm , da diese Datei als erstes geladen werden soll. Später können durch Verlinkung die Inhalte der einzelnen Bereiche verändert werden Erstellen wir also das Framset mit Hilfe von Dreamweaver. Für die folgende Übung sollten Sie sich auf Ihrem Homeverzeichnis ein Arbeitsverzeichnis dreamweaver2 anlegen, in dem Sie Ihr Werk speichern können. Wie schon im Grundkurs arbeiten wir mit einer Site. Erstellen Sie sich eine neue Site (Menü: Site à Sites verwalten) und geben Sie Ihr einen Namen (z.B. hier: Dreamweaver Frames ). Geben Sie als Stammverzeichnis das neu erstellte Verzeichnis dreamweaver2 an.



Öffnen Sie jetzt das Dateien-Fenster in der Bedienfeldgruppe rechts. Erstellen Sie eine Neue Datei start.htm, die später die Startseite im Frame haupt werden soll. Sie können eine neue Datei erzeugen, indem Sie den Stammordner mit der rechten Maustaste anklicken und im Kontextmenü „Neue Datei“ wählen.

Öffnen Sie diese Datei start.htm indem Sie doppelt auf das Symbol links neben dem Dateinamen klicken. Schreiben Sie einen Text auf die Seite. Jetzt sollten Sie sich über den Menüpunkt Ansicht -> visuelle Hilfsmittel-> Frame-Rahmen den Framerahmen sichtbar machen. Der Framerahmen ist der dicke Rand der Arbeitsfläche. Für die Weiterarbeit benötigen Sie jetzt das Framefenster rechts in der Bedienfeldgruppe. Öffnen Sie das Fenster über das Menü Fenster à Frames.

Jetzt soll das Fenster in zwei Frames geteilt werden. Wählen Sie in der Einfügen-Leiste die Layout-Ansicht. Wählen Sie bei dem Dropdownmenü für Frames das Element „linken Frame“. Es entsteht ein Frameset mit der gewünschten Aufteilung. Wie Sie sehen, ist die Startseite in den Hauptframe gewandert. Die erste Aktion ist jetzt das Framset zu speichern. Wählen Sie den Menüpunkt Dateià Framset speichern unter und geben Sie dieser Datei wie oben geplant den Namen index.htm. Jetzt müssen wir nur noch die Webseite erzeugen, die in den linken Frame geladen werden sollen. Schreiben Sie auf der linken Seite einen Text und speichern Sie dann den Bereich unter Datei à Frame speichern ab. Es wird jeweils die Framedatei gespeichert, in der der Cursor steht. Wählen sie die zu Beginn geplanten Dateinamen hauptnav.htm .

Achten Sie auf die Reihenfolge. Das Frameset ist die Datei, die nur festlegt, wie der Bildschirm aufgeteilt wird und welche Webseite wohin geladen wird (index.htm). Die Frameseiten sind die einzelnen Seiten, die in unserem Fall rechts und links angezeigt werden. (hauptnav.htm und start.htm)



Schließen Sie jetzt alle Dokumente-Fenster. Im Dateien-Fenster der Bedienfeldruppe können Sie erkennen, dass 3 neue Dateien entstanden sind: Die Framesetseite index.htm und die Seiten hauptnav.htm und start.htm . Öffnen Sie die Datei index.htm. Diese Aktion bewirkt das Öffnen des kompletten Framesets incl. der definierten Startdateien. Klicken Sie auf den rechten Frame. Jetzt erscheint oben der Dateiname der rechten Framedatei start.htm . Wenn Sie auf den linken Frame klicken erscheint oben der Dateiname des Navigationsframes hauptnav.htm . Achtung: Sie können auch die Seiten einzeln öffnen. Öffnen Sie die Seiten hauptnav.htm und start.htm über das Dateien-Fenster. Sie haben jetzt eine der Dateien in der Dateienliste doppelt (Die Datei im Frameset und die Datei als einzelne Datei). Das kann bei der weiteren Arbeit zu Problemen führen, wenn Sie abwechselnd in den beiden Fenstern Änderungen in der gleichen Datei durchführen. Es siegen dann die Änderungen in dem Fenster, das Sie zuletzt abgespeichert haben. Am besten ist es, wenn Sie immer nur eine Version einer Datei geöffnet haben. Schließen Sie die beiden zuletzt geöffneten Fenster wieder und gehen Sie zurück z ur Frames-Seite.



4 Die Eigenschaften der Frames verändern Über das Frames-Fenster können Sie die Eigenschaften des Framesets verändern. Klicken Sie den Navigationsframe an und sehen Sie sich das Eigenschaften-Fenster an. Hier können Sie Rahmenfarbe, Randbreite und den Namen des Frames einstellen. Sie können auch festlegen ob die AnwenderIn im Browser das linke Fenster rollen darf, falls der Platz für den gesamten Inhalt nicht ausreicht , Ändern Sie die Framenamen wie geplant auf links. Klicken Sie den rechten Frame an und nennen Sie diesen haupt.

Wenn Sie auf den äußeren Rahmen im Frames-Fenster klicken, erscheinen im Eigenschafts-Fenster die Eigenschaften des Framesets. Hier können Sie unter anderem die Breite des Navigationsframes angeben. Klicken Sie in der schematischen Darstellung der Frameaufteilung auf das linke Eingabefeld und geben Sei dann dafür die Breite ein ( 140 Pixel).

Jetzt können Sie der Startseite auch noch einen Seitentitel geben, der später in der Kopfleiste des Browsers angezeigt wird. Speichern Sie Ihre Änderungen ab. (Dateià Alles Speichern )

Geben wir der Sache mit einem Beispiel einen Sinn: Eine Schule erstellt ein Intranet. Um die Navigation zu vereinfachen, hat sich die Schule entschlossen, mit Frames zu arbeiten. Der linke Frame soll eine Übersicht über alle Hauptpunkte des Intranets enthalten, im Hauptframe werden dann die Inhalte angezeigt. Sie kennen diese Struktur - sie wird auch von der Stadt München verwendet.



5 Eine Navigation erstellen Erstellen wir also im linken Frame ein paar Gliederungspunkte:

• Aktuelles • Stundenplan • SchülerInnenweb • LehrerInnenweb • Englisch • Deutsch • Französisch

......... Geben Sie einfach diese Punke auf der Webseite im linken Frame ein und wählen Sie ein Hintergrundfarbe. Gestalten Sie auch die Startseite im Hauptframe.

Für jeden Unterpunkt im linken Navigationsframe soll eine neue Seite im Hauptframe erscheinen. Das wird mit Links bewerkstelligt. Um auf eine Seite verlinken zu können, muss diese Seite erst einmal vorhanden sein. Erstellen Sie also für jeden Unterpunkt eine neue Webseite im Sitemanager und gestalten Sie diese Seiten. Wenn Sie Wert auf eine einheitliche Gestaltung legen, können Sie die grundlegende Gestaltung in der ersten Datei erledigen und dann mit Datei à Speichern unter diese Datei „vervielfältigen“. Öffnen Sie alle neuen Dateien im Dokumente-Fenster.



Jetzt müssen wir nur noch die Verlinkung einfügen. Das geht prinzipiell genauso wie bei einer normalen Verlinkung. Holen Sie das Fenster mit dem Frameset nach vorne. Wählen Sie einen der Unterpunkte im linken Frame aus und erstellen Sie einen Link auf die entsprechende Datei. Testen Sie die Funktion mit Hilfe der Vorschau (Taste F12) oder über den

Button

Das Ergebnis ist noch nicht zufrieden stellend. Eigentlich sollte die verlinkte Seite ja im Hauptframe erscheinen, sie erscheint aber im linken Frame.....

Markieren sie den Link noch einmal und tragen Sie im Eigenschafts-fenster bei dem Unterpunkt Ziel den Namen des Frames ein, in dem die verlinkte Seite erscheinen soll. Der Dreamweaver bietet Ihnen alle möglichen Framenamen an. Wir wählen natürlich haupt, denn da soll die Seite geladen werden. Testen Sie jetzt noch einmal in der Browservorschau.....

Jetzt können Sie den Vorgang für alle anderen Unterpunkte wiederholen. Ihr Intranet hat eine erste Struktur erhalten. Testen Sie Ihren Erfolg in der Browservorschau. Jetzt können Sie alle weiteren Links erstellen.



Der Dreamweaver bietet Ihnen neben den von Ihnen erstellten Framenamen im Auswahlfeld Ziel noch weitere Ziele an.

• _blank öffnet das verknüpfte Dokument in einem neuen Browserfenster. Das aktuelle Fenster bleibt dabei verfügbar. Das wird oft bei Links angewendet, die aus der aktuellen Website herausführen.

• _parent öffnet das verknüpfte Dokument im übergeordneten Frameset des Hyperlinks. Das wird interessant, wenn wir Frames ineinander verschachteln.

• _self öffnet das verknüpfte Dokument im aktuellen Frame. Dabei wird der derzeitige Inhalt des Frames ersetzt. Das ist eigentlich der Standard.

• _top öffnet das verknüpfte Dokument im äußersten Frameset des aktuellen Dokuments. Dabei werden alle Frames ersetzt.

In diesem Beispiel wurden alle HTML-Dateien in ein Verzeichnis gespeichert. Das ist nur bei einer so geringen Anzahl von Dateien wie in unserem Beispiel sinnvoll. In der Realität würde jeder der Hauptnavigationspunkte mit seinen vielen Seiten in einem Unterverzeichnis abgelegt werden.

2. Die Navigation mit Hilfe von weiteren Frames verfeinern Nehmen wir einmal an... Die Fachschaft Mathematik ist begeistert von der Möglichkeit, Informationen ins Intranet zu stellen, und beginnt mit der Produktion von Webseiten. Die Mathematikfachschaft bekommt ein eigenes Verzeichnis in unserem Web und kann dort ihr eigenes Intranet pflegen. Es wäre sogar möglich, der Fachschaft eigenen Webspace zu geben (z.B. auf dem virtuelle Hefte Server des PI) und die Site so einzubinden. Die Fachschaft entscheidet sich, eine eigene Navigationsleiste einzuführen. Da ja die linke Seite schon die Hauptnavigation enthält, wird die Navigation für die Mathematik oben eingefügt. Zusammen sieht das dann so aus: Name: links Geladene Datei: hauptnav.htm

Name: oben Datei: mathnav.htm Name: unten Datei: mathstart.htm

Im Frame soll also nach Anklicken des Mathematik-Links auf der linken Navigationsseite anstatt der Datei mathematik.htm eine weitere Framesetdatei geladen werden, die das Hauptfenster wiederum in 2 Frames teilt: oben und unten.



Wir entwerfen jetzt nur das neue Framset. Eigentlich wiederholen wir nur den oben beschriebenen Vorgang. Deshalb ist die Beschreibung hier auch kürzer. Erstellen Sie einen neuen Ordner mathematik. Erstellen Sie eine neue Datei im Ordner mathematik mit dem Namen mathstart.htm und öffnen Sie die Datei. Jetzt können Sie mit Hilfe des Eigenschaften-Fensters (Frames wählen) das Fenster in oben und unten teilen. Schreiben Sie in die beiden Frames einen Text. Speichern Sie die Framesetdatei im Verzeichnis mathematik unter dem Namen index.htm (Dateià Frameset speichern, dieser Menüpunkt erscheint nur, wenn der äußere Rahmen des Frames markiert ist). Geben Sie der Webseite oben den Namen mathnav.htm. Der untere Frame enthält die Datei mathstart.htm , die auch noch gespeichert werden muss.

Zum Speichern der Frames müssen Sie zuerst den Cursor in den Frame setzen, den sie Speichern möchten, und dann über Datei à Frame speichern abspeichern.

Jetzt müssen wir den Frames noch Namen geben, damit wir später die Namen als Ziel angeben können. Öffnen Sie das Frames-Fenster und und geben Sie im Eigenschafts-fenster den Frames die Namen oben und unten.



Jetzt können wir die Navigation für die Mathematikfachschaft erzeugen. Nehmen wir einmal an, wir benötigen die Unterpunkte: Klasse, LehrerInnen, Linkliste, Infos

Gestalten Sie den oberen Frame entsprechend und erstellen Sie für jeden Unterpunkt eine neue HTML-Datei im mathematik -Verzeichnis. Verlinken Sie dann die Dateien. Testen Sie die Funktion des Frames. Haben Sie vielleicht vergessen im Eigenschaften-Fenster das Ziel: unten anzugeben?

Jetzt binden wir unser Werk in den Hauptframe ein. Öffnen Sie die übergeordnete Datei index.htm und erzeugen Sie im Navigationsframe einen neuen Link Mathematik, der zum Startframe der Mathematikseiten mathematik/index.htm verweist. Das Ziel ist der Frame haupt. Testen Sie jetzt die Funktion. Wenn alles richtig gelaufen ist, erscheint nach Anklicken von Mathematik der neue Frame im rechten Teil des Browsers ☺

Jetzt sollten Sie in der Lage sein, Ihre eigene Struktur für eine Website aufzubauen. Dabei ist eine gute Planung der Struktur die wichtigste Grundlage für eine sinnvolle Navigation. Nehmen Sie sich also Zeit, wenn Sie eine größere Struktur planen und analysieren Sie genau die geplanten Inhalte. Frames sind nicht immer das sinnvollste Mittel für eine Navigation, denn Sie beanspruchen Platz auf dem Bildschirm, der für die eigentlichen Informationen verloren geht. Deshalb ist es manchmal sinnvoller, die Navigation auf den Seiten zu integrieren, indem man z.B. auf jeder Seite einen Link auf die übergeordneten Navigationsebenen setzt. Ein Beispiel dafür finden Sie im rechten Frame von muc.kobis (http://www.muc.kobis.de). Falls Sie Anmerkungen oder Verbesserungsvorschläge zu diesem Selbstlernmaterial haben, schicken Sie mir doch bitte eine E-Mail ( [email protected] )

Documents

Dreamweaver MX 2004 Arbeiten mit Frames - muc.kobis.de · Landeshauptstadt München Autorin: Uta Conrad 10.02.2006 e-mail : [email protected] Dreamweaver MX 2004 Arbeiten mit