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):

Wir empfehlen:
Dreamweaver-Video-Training

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:

 

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

 

Dann erscheint diese neue Palette:


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.

 

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

 

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.

 

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'“

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training