Anzeige
Tutorialbeschreibung

Arbeiten mit Frames in Dreamweaver

Arbeiten mit Frames in Dreamweaver

Frames
Ein Frame ist ein verschiebbarer Teilbereich einer HTML -Seite, in dem eine andere HTML-Seite dargestellt werden kann. Das einzelne Segment wird dabei als Frame (engl. Rahmen ) bezeichnet, die Definition aller Frames als Frameset .


Die Frame-Technik wurde von Netscape im Navigator 2.0 eingeführt. Das W3C hat Framesets in den Versionen HTML 4.0 und XHTML 1.0 standardisiert. Bedauerlicherweise ist der W3C-Standard für Framesets inkompatibel zu den Implementierungen in gängigen Browsern, sodass eine valide Frameset-Seite meist nicht den Wünschen des Seitenautors entspricht und eine optisch ansprechende Seite nicht valide ist. Der Microsoft Internet Explorer unterstützt Frames ab der Version 3.0, der Browser Netscape Navigator ab Version 2.0. Alle Opera- und Mozilla-Browser sowie alle Firefox-Browser unterstützen Frames ab der Version 1.0.


Vorteile
- parallele Darstellung von mehreren Einzeldokumenten, die sich unabhängig voneinander verschieben lassen
- es muss damit nicht ständig die gesamte Webseite neu geladen werden
- nur der eigentliche Seiteninhalt wird gescrollt, aber die Menüleiste und andere wichtige Bereiche bleiben im Blickfeld des Benutzers
- über Frames lassen sich problemlos Inhalte aus unterschiedlichen Quellen bzw. aus verschiedenen Webanwendungen miteinander kombinieren; so könnten Unterergebnisse in einem weiteren Frame angezeigt werden


Nachteile
- Probleme mit der Adressierung; normale HTML-Seiten haben nur eine Adresse, mit der sie erreichbar sind, Frames bestehen jedoch aus mehreren Unterseiten, wobei im Browser meist die Adresse der Framedefinition (des Framesets) angezeigt wird, die sich bei dem Wechsel auf eine andere Unterseite in der Regel nicht ändert. Somit wird es schwierig, eine bestimmte Unterseite zu verlinken, ein Lesezeichen darauf zu setzen (verlinkt er den Frameset, wird die im Frameset definierte Startseite statt der gewünschten Unterseite geladen, gibt der die direkte Adresse an, so fehlen die übrigen Komponenten der Seite wie etwa die Navigation; dieses Problem lässt sich jedoch zum Glück per Javascript beheben)
- Suchmaschinen haben mit Frames leider teilweise Probleme, denn es werden dann z.B. Unterseiten erfasst und diese direkt verlinkt, jedoch fehlt dann bei dieser Verlinkung wie im 1. Punkt beschrieben die Navigation, die sich nur mit Javascript wieder zurückholen lässt. Auch kann es passieren, dass durch diesen Umstand nicht alle Seiten indiziert werden und dies zu einer schlechteren Platzierung in der Suchmaschine führt.
- Frames sind meistens nur für bestimmte Bildschirmauflösungen konzipiert.
- Probleme beim Ausdruck

Viele Experten aus dem Bereich Gebrauchstauglichkeit raten ausdrücklich vom Einsatz von Frames ab. Auch lässt sich beobachten, dass professionelle Seiten nur selten Frames einsetzen, aber auch bei privaten Webseiten wird immer öfter auf Frames verzichtet. Trotzdem möchte ich hier erklären, wie es mit Frames in Dreamweaver funktioniert.
Ein kleines Beispiel für eine Seite, die mit Frames aufgebaut ist, z.B. www.asc46.de/alte_webseite (Firmenwebseite, die vor meiner Umstellung auf CMS - Basis online war):

Bilder



Wie am Beispiel zu sehen, ist die Navigation typisch links und im rechten Bereich der Inhalt. Egal, wie weit nach unten gescrollt wird, die linke Navigation bleibt am gleichen Platz. Vorteil ist natürlich, dass ich nicht mehr nach oben scrollen muss, um einen neuen Menüpunkt anzuklicken.

Eines der Hauptargumente gegen Framesets ist die angeblich schlechte Indizierung in Suchmaschinen. Ich kann das selber nicht bestätigen, jedenfalls nicht bei Google.
Metaangaben im noframes-Bereich: Eine Frameset-Datei ist an sich nur ein Verweis auf weitere Dokumente und Darstellungseinstellungen für den Browser. Das bedeutet, dass ein Frameset zunächst gar keine Inhalte hat, die eine Suchmaschine indizieren könnte, außer den hoffentlich vorhandenen Metaangaben.

In einer Frameset-Datei ist ein Bereich vorhanden, der noch aus Zeiten stammt, als noch nicht alle Browser in der Lage waren, Frames darzustellen. In diesem noframes-Bereich könnt ihr jede Menge Text und Verweise verstecken. Diese werden von keinem der halbwegs aktuellen Browser angezeigt, von den Suchmaschinen jedoch sehr wohl als Inhalt erkannt.


noframes-Bereich eines Framesets
<noframes> <body> </body> </noframes> Frameset nachladen
Hier ein kleiner Tipp, wie ich den Browser veranlasse, wenn die Frames nicht alle geladen wurden, weil z.B. die Suchmaschine nur auf die Inhaltsseite verlinkt, diese nachzuladen:
<script> if (window.name!='mainFrame') top.location.replace('NAME_FRAMESETS?NAME_DATEI_DES_FRAMES'); </script>

 
So, genug Theorie. Nun komme ich mal langsam zur Praxis: Zunächst erstelle ich ein neues Dokument, danach ein Klick auf den Reiter Layout und auf das Frames-Symbol:

Bilder



 
Damit die Arbeit mit den Frames noch einfacher wird, gibt es dafür eine extra Palette:

Bilder



 
Dann erscheint diese neue Palette:

Bilder

Bilder



Frame-Rahmen
Stell bei allen Frames die Randbreite und die Randhöhe auf 0, um eine einheitlich definierte Größe zu erhalten. Stell am besten unter Rahmen die Option Nein ein, denn in den meisten Fällen werden keine Frame-Rahmen benötigt.

Automatische Scrollbalken

Ganz wichtig ist die Einstellung Rollen. Hier lege ich fest, ob ein Frame einen Inhalt scrollbar darstellen darf oder nicht. Für feste Bereiche wie Navigationen sollte dies deaktiviert werden. Im Hauptfenster wird es jedoch meistens auf Auto gestellt. So erscheinen Scrollbalken nur dann, wenn sie auch benötigt werden.

Frame-Namen
Jeder einzelne Frame erhält einen eigenen Namen; in meiner Abbildung mainFrame.

Größe der Frames
Nachdem die Dokumente den Frames zugewiesen wurden, müssen noch die richtigen Frame-Breiten und -Höhen eingestellt werden. Klick dazu direkt auf den Frame-Rahmen im Dokumentenfenster.

Bilder



 
Der Quellcode der Index-Datei, der alle Frames beinhaltet, sieht so aus:

Bilder



 
Da ich eine linke Navigation habe und einen rechten Bereich für meinen Inhalt, gibt es insgesamt 3 Dateien. Eine für die linke Navigation, dann eine Datei für die rechte Navigation und dann eine Index-Datei, die alle Frames beinhaltet bzw. darauf verweist.

Bilder



 
So, und hier noch einen kleinen Tipp am Rande: Wenn man einen Klick auf einen Link in der linken Navigation tätigt und dabei z.B. zwei Frames auf einmal aktualisiert haben möchte, geht das nur mit JavaScript. Hier ein kleines Beispiel dafür:
< script type = " text/javascript " > <!--
function Fenster(URL1,URL2) {
parent.Frame1.location.href=URL1;
parent.Frame2.location.href=URL2;
}
//-->
</ script >

Dieses Script sollte im Head-Bereich der Seite stehen, wobei ich Frame1 durch den Namen von Frame 1 und Frame2 durch den Namen von Frame 2 ersetze.
Anstelle der URL gebe ich im Link jetzt folgende Javascript-Funktion an:

< a href = " javascript:Fenster('link1.htm','link2.htm') " > Test </ a > Die erste URL wird in Frame1, die zweite in Frame2 geladen.

Oder ohne Script geht das auch z.B. so:
onclick="parent.open('link1.htm','frame1'); parent.open('link2.htm','frame2')" im Link angeben.

Dabei können natürlich auch nur einer oder mehr als 2 Frames angesprochen werden. Der kleine Haken dabei, wenn ich das auf einen Button oder eine Tabellenzelle anwende: Der Mauszeiger ändert sich nicht beim Überfahren. Das kriegt man in den Griff, indem man das noch hinzufügt:
onmouseover="style.cursor='pointer'"


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ChrisS80
  • 23.10.2011 - 14:12

Super Tutorial und klasse erklärt.Schade dass man Frames kaum noch benutzt.

Portrait von mediocritas
  • 11.04.2011 - 20:14

vielen dank, hat mir echt geholfen

Portrait von Das_Auge
  • 22.03.2011 - 22:31

Sehr gutes TUT, hat mir echt weitergeholfen...Danke

Portrait von artesmaracay
  • 25.10.2010 - 15:50

Prima Anleitung! Ist ziemlich Neuland fuer mich, aber der Weg entsteht ja beim Gehen.

Portrait von Gsigold
  • 12.10.2010 - 16:06

Super auch als Anfänger kann ich nach diesem Tutorial gut arbeiten!

Portrait von artesmaracay
  • 29.07.2010 - 19:43

Wunderbar, dankesehr. Fuer mich als Neuling im HTML sehr bereichernd und gut erklaert.

Portrait von michei
  • 13.04.2010 - 20:01

Geht super schnell. Danke für den tipp mit den zwei frames!

Portrait von Claudsn123
  • 13.04.2010 - 16:15

Guter Man! Danke für deine ausführliche erklärung!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.03.2010 - 14:29

Sehr gute Anleitung, vorallem ist der Überblick mit den roten Pfeilen sehr gut.

Portrait von petibelle
  • 05.03.2010 - 16:31

Lohnt sich immer wieder, hier zu stöbern!

Portrait von yavuz26
  • 25.01.2010 - 11:24

Super erklärt, mach weiter so.

Portrait von Fripi
  • 29.11.2009 - 20:50

Besten Dank! Hat weitergeholfen..

Portrait von TK814
  • 25.11.2009 - 15:51

Sehr gut gemacht und hat geholfen

Portrait von Hilde_
  • 24.11.2009 - 20:44

Leicht verständlich. Vielen Dank!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 30.10.2009 - 09:23

Recht herzlichen dank für die Mühe.

Portrait von Peblebrook
  • 25.10.2009 - 21:29

Vielen vielen Dank! Hat mich sehr weiter gebracht!

Portrait von baze1987
  • 05.10.2009 - 13:33

danke bringt mich extrem weiter

Portrait von rdgdaywalker
Portrait von FFFFFF
  • 14.09.2009 - 23:12

Vielen Dank.das hilft

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.07.2009 - 12:54

Vielen Dank, sehr informativ.

x
×
×