Mit Frames arbeiten

Lektion 8 8 Mit Frames arbeiten Frames eignen sich zur Kontrolle des Layouts und der Struktur Ihrer Web-Site. Nutzen Sie sie einerseits als Navigations- werkzeuge und andererseits um mehr als eine Information gleichzeitig anzuzei- gen. In dieser Lektion erzeugen Sie ein Frameset mit drei Frames und fügen Inhalte in diese Frames ein. 368 LEKTION 8 Mit Frames arbeiten Über diese Lektion In dieser Lektion lernen Sie Folgendes: • Ein Frameset erzeugen • Frameset-Optionen mit Hilfe des Frameset-Inspektors ändern • Einzelne Frames mit Hilfe des Frame-Inspektors einrichten • Frames mit Inhalt versehen • Ziel-Frames innerhalb des Framesets erstellen • Das Frameset mit Ihrer Homepage verknüpfen Kopieren Sie falls nötig den Ordner Lektion07 aus dem Ordner Lektionen von der CD-ROM auf Ihre Festplatte. Im Verlauf dieser Lektion überschreiben Sie beim Arbeiten die Startdateien. Wenn Sie die Startdateien wieder herstellen möchten, kopieren Sie sie von der Adobe GoLive CS Classroom in a Book-CD. Hinweis: Wenn Sie unter Windows arbeiten, müssen Sie die Lektionsdateien erst entsperren, bevor Sie mit ihnen arbeiten können. Weitere Informationen finden Sie unter »Die Classroom-in-a-Book-Dateien kopieren« auf Seite 15. Framesets Ein Frameset besteht aus einer HTML-Seite, die mehrere Frames aufnimmt, von denen jeder ein einzelnes Dokument enthält. Mit Hilfe einer solchen Frame- Struktur stellen Sie mehrere HTML-Dokumente auf einmal dar, wobei jedes in einem eigenen Fenster innerhalb des Browserfensters liegt. Jeder Frame ist unab- hängig und kann je nach Zweck mit oder ohne Rollbalken angelegt werden. So verwenden Sie beispielsweise Frames zum Erstellen einer Navigationshilfe oder eines Inhaltsverzeichnisses, die auch dann im Browserfenster sichtbar bleiben, wenn der Betrachter gerade durch die Seite in einem anderen Frame rollt. Ein Frameset enthält die einzelnen dargestellten HTML-Seiten nicht wirklich, sondern stellt ihnen einfach eine Gliederung zur Verfügung. Wenn Sie sich den HTML-Quellcode einer Seite ansehen, die ein Frameset enthält, stellen Sie fest, dass sie bloß einfache HTML-Meta-Information und ein paar Zeilen mit beschreibendem Code für die Definition des Framesets enthält – weiter nichts. ADOBE GOLIVE CS 369 Classroom in a Book Das einfachste Frameset enthält zwei Frames: einen für die Navigation auf der Seite und einen für die Darstellung des Inhaltes. Das Frameset, das Sie in dieser Lektion erzeugen, besteht aus drei Frames: einem Navigations-Frame, einem Frame für die Hauptseite und einem Frame für ein Banner-Bild. Im Allgemeinen umfasst das Erstellen eines Seiten-Layouts mit Frames die fol- genden Schritte: • Erstellen der Inhaltsseiten, die in den Frames angezeigt werden sollen, und anschließend Erstellen einer leeren Seite für das Frameset. • Aufbau des Framesets und Benennen der Frames. Hinweis: Mindestens ein Frame eines Framesets muss in der Größe änderbar sein. • Jeden Frame mit einer Inhaltsseite verknüpfen. Soll der Frame mehrere Seiten anzeigen, verknüpfen Sie ihn mit der ersten Seite, die standardmäßig angezeigt werden soll. • Öffnen der Inhaltsseite, die als Navigationshilfe bzw. Inhaltsverzeichnis dienen soll, und Festlegen der Zielseiten und Ziel-Frames für jeden Link auf der Seite. 370 LEKTION 8 Mit Frames arbeiten Falls Sie eine Aktion »Netscape CSS Fix« verwenden wollen, fügen Sie sie im Head-Bereich der Seiten ein, die in den Frames angezeigt werden sollen, und nicht in den Head-Bereich des Framesets. Aufbau eines Framesets In dieser Lektion erzeugen Sie ein Frameset namens frameset.html und zeigen anschließend zahl- reiche Inhaltsseiten darin an, wie in der folgenden Abbildung dargestellt. B A D E F C A. frameset.html B. nav.html C. banner.html D. head.html E. thorax.html F. abdomen.html Vorbereitungen In dieser Lektion erzeugen Sie ein Frameset für eine Web-Site namens bugbody und fügen den Frames anschließend Inhalte hinzu. Zuerst betrachten Sie die fer- tige Web-Site in Ihrem Web-Browser. 1 Öffnen Sie die Web-Seite index.html im Ordnerpfad Lektionen/Lektion08/ 08End/ bugbody ordner/bugbody/ in Ihrem Browser. ADOBE GOLIVE CS 371 Classroom in a Book Dies ist die Homepage der Web-Site bugbody. Da sie nicht zum Frameset gehört, stellt der Browser sie vollständig als eine Seite dar. Hinweis: Frames funktionieren nicht sehr gut mit Web-Suchmaschinen, da diese in Framesets keinen Inhalt erkennen. Daher sollten Sie für Ihre Homepage bzw. Index- Seite kein Frameset verwenden. Außerdem lassen sich in einem Browser für Frame- basierte Web-Seiten keine Lesezeichen hinzufügen, weil die entsprechenden URLs auf das Frameset und nicht auf die gewünschten Seiten verweisen. 2 Klicken Sie auf den Text »Enter«. Dieser Link verweist auf eine HTML-Seite namens frameset.html. Obwohl Sie in dieser Seite einen Inhalt sehen, enthält frameset.html ausschließ- lich den Code für das Frameset der Web-Site. Die Inhaltsseiten sind HTML-Sei- ten, die der Browser innerhalb des Framesets öffnet. 372 LEKTION 8 Mit Frames arbeiten Sie sehen, dass die Seite drei Frames enthält: die Information über den Heuschreckenkopf ist die Hauptseite, die Inhaltsliste ist ein weiterer Frame und das animierte Bild am unteren Rand ist ebenfalls ein Frame. 3 Klicken Sie auf die Links in der Inhaltsliste, um die Web-Site zu erkunden. 4 Wenn Sie mit dem Betrachten der Web-Site fertig sind, verlassen oder schlie- ßen Sie Ihren Browser. ADOBE GOLIVE CS 373 Classroom in a Book Ein Frameset erstellen Wenn Sie eine neue Web-Site mit Frames erstellen möchten, müssen Sie zuerst die Seite mit Ihrem Frameset einrichten und dann sehr genau überlegen, wie die Frames angeordnet sein sollen. Erst danach sollten Sie damit beginnen, Ihre Inhaltsseiten hinzuzufügen und zu formatieren. Sie öffnen in dieser Lektion zuerst die Web-Site bugbody und erzeugen dann eine neue HTML-Seite mit einem Frameset. 1 Starten Sie Adobe GoLive. GoLive ruft standardmäßig ein Einführungs-Dialogfenster auf, das Sie auffor- dert, entweder eine neue Seite oder eine neue Web-Site zu erstellen oder eine vorhandene Datei zu öffnen. Hinweis: Sie können in den GoLive-Voreinstellungen bestimmen, dass GoLive dieses Einführungsdialogfenster beim Starten nicht aufruft. Falls GoLive das Dia- logfenster beim Starten nicht aufruft, wählen Sie Datei: Neue Web-Site und fahren mit Schritt 3 fort. 2 Klicken Sie auf »Öffnen«, um eine vorhandene Datei zu öffnen. 3 Öffnen Sie die Datei bugbody.site im Ordnerpfad Lektionen/Lektion08/ 08Start/ bugbody ordner/. Diese Web-Site enthält eine Homepage (index.html) und mehrere Inhaltsseiten. Diese Seiten wurden noch nicht in Frames platziert. Daher erstellen Sie jetzt ein Frameset für die Inhaltsseiten der Web-Site. 4 Wählen Sie Datei: Neue Seite, um eine neue Web-Seite zu erzeugen. 5 Markieren Sie den Seitentitel »Unbenannte Seite«. 6 Geben Sie den Text Bug Parts als neuen Titel ein und klicken Sie irgendwo in das Dokumentfenster. Jetzt fügen Sie der neuen Web-Seite ein Frameset hinzu. Beim Arbeiten mit Frames wählen Sie zunächst ein Frameset in der Objekte-Palette und passen es dann im Dokumentfenster im Frame-Editor an. 374 LEKTION 8 Mit Frames arbeiten 7 Klicken Sie im Dokumentfenster auf das Register »Frame-Editor« ( ), um den Frame-Editor in den Vordergrund zu bringen. Im Fenster steht im Augenblick nur der Text Keine Frames. 8 Klicken Sie oben in der Objekte-Palette auf die Sammlung »Frame und Fra- mesets« ( ). Sammlung »Frame und Framesets« in der Objekte-Palette Die Sammlung »Frames« enthält zahlreiche Frameset-Vorlagen, die jeweils bis zu drei Frames enthalten. Jede Vorlage zeigt Ihnen das Aussehen der Frames auf der Web-Seite. Hinweis: Das zweite Symbol links oben in der ersten Zeile, Frame, zeigt nur einen Frame. Mit Hilfe dieses Symbols fügen Sie einem Frameset einen weiteren Frame hinzu. 9 Wählen Sie in der Sammlung »Frame und Framesets« der Objekte-Palette das Symbol, das Sie links in der Marginalspalte sehen (Frameset: links fest, oben rechts variabel) und ziehen Sie es aus der Sammlung »Frame und Framesets« in den Frame-Editor. GoLive zeigt im Dokumentfenster ein ent- sprechendes Frameset an Frameset in den Frame-Editor ziehen ADOBE GOLIVE CS 375 Classroom in a Book GoLive ruft das Dialogfeld »Dokumenttyp ändern« auf und macht Sie damit darauf aufmerksam, dass der bisherige Dokumenttyp »HTML 4 - Übergang« nicht mit dem geplanten Dokumenttyp »HTML 4 - Frameset« kompatibel ist. Bestätigen Sie die Änderung in »HTML 4 - Frameset« durch Klicken auf OK. Sie sehen, dass jeder Frame die Worte »NoName« und »[Empty Reference!]« ent- hält. Im Verlauf dieser Lektion benennen Sie jeden Frame und fügen ihm Inhalt hinzu. Jetzt schauen Sie sich allerdings erst einmal den HTML-Quellcode des neuen Framesets an.