Frames im Dreamweaver 8 inkl. iframe Frames Frameset ... - Lehrer

Frames im Dreamweaver 8
inkl. iframe
Eberhart 1
Frameset anlegen
• Datei NEU / Kategorie „FRAMESETS“
Eberhart 3
Erstens: sofort Frameset speichern
Soll eine Seite mit Frames gespeichert werden, müssen
sowohl das Frameset selbst als auch die darin enthaltenen
Seiten gespeichert werden.
1. Klicke mit gehaltener ALT-Taste in einen Frame, dann:
2. Menü Datei / Frameset speichern unter… .
3. Wähle als Name „index.htm“.
Nur wenn ein Frame markiert ist (gestrichelte Umrandung),
zeigt Dreamweaver den Menüpunkt „Frameset speichern“
an.
Eberhart 5
Frames
Frames sind definierte Bereiche, mit denen der Anzeigebereich
eines Browsers unterteilt wird. Jeder Bereich kann
eine andere Webseite anzeigen. Jedes HTML-Dokument
kann unabhängig von den anderen angezeigten
Dokumenten bedient und geladen werden.
Vorteil: aufwendige Teile, zB Kopfzeile mit Logo wird nur
einmal am Anfang geladen. Danach nur mehr die
benötigten Seiten.
Nachteil: Schwierigkeiten bei Suchmaschinen, große
Probleme beim beliebten „Bookmarken setzten“ – damit
kann ein Inhalt zu den Favoriten hinzugefügt werden
Eberhart 2
speichern
• Für jeder Frame wird ein eigener Titel nötig. Sofort nach
dem Anlegen ist dieser
festzulegen, da dieses
Fenster eingeblendet
wird.
• Die Namen der Frames
sind eingestellt, die Titel können frei vergeben werden,
zB „inhalt“.
Tipp: Die Rahmen von Frames ein- bzw. ausblenden:
Menü / Ansicht – visuelle Hilfsmittel – Frame Rahmen.
Eberhart 4
Somit ist jedoch nur die übergeordnete Frameset Datei
gespeichert, nicht die einzelnen Seiten:
• Die Speicherung: klicke nach einander in alle Frames
und speichere diese einzeln mit STRG + S
oder
• Menü Datei / Frame speichern.
• Gib passende Namen, wie zB kopf.html, navi.html
Eberhart 6

Hyperlinks in Frames
• Markiere einen Hyperlink
• Gib im Eigenschaftsinspektor im Feld „Hyperlink“ den
Namen der Seite an, die angesteuert werden soll bzw.
ziele mit dem „Fadenkreuz“ darauf.
• Öffne das Listenfeld „Ziel“ und wähle
den Zielframe aus, zB mainFrame
Eberhart 7
Frames bearbeiten
Die Abmessungen können durch Ziehen verändert werden.
Weitere Änderungen sind möglich mit:
Menü / Modifizieren – Frameset zB „Frame links teilen“
– teilt den linken Frame vertikal.
Oder manuell:
1) positioniere den Mauszeiger auf einem Frame-
Rand, sodass der Mauszeiger zu einem Doppelpfeil
wird.
2) ziehe mit der gedrückten ALT – Taste den Rand
nach links/rechts oder oben/unten, um vertikal oder
horizontal zu teilen.
Eberhart 9
Eigenschaften festlegen
Im Bereich „Eigenschaften“ lassen sich alle wichtigen
Merkmale für das Aussehen der Site festlegen:
zB Größe, Breite der Rahmen, Bildlaufleiste der Frames.
Abmessungen lassen sich durch Ziehen mit gedrückter
Maustaste (ungenau) festlegen, oder:
• Klicke auf eine Trennlinie zwischen zwei Frames
• Die kleine Vorschau zeigt den zu bearbeitenden Frame an
• Die Werte dafür können nun verändert werden
Eberhart 11
Übung: Lage-Web
• Erstelle ein Frameset für folgendes Web: Lageplan
• Verwende dazu die Bilder plan_a.png – plan_d.png
• Navigation: 4 Hyperlinks, öffnen sich im „mainFrame“
• Seiten: frameset = index.htm, inhalt, kopf, navi, plan1,
plan2, plan3, plan4
• „inhalt.html“: grauer
Hintergrund
Eberhart 8
Bearbeiten von Frames
Menü Einfügen / HTML / Frames bietet ebenfalls die
Möglichkeit,
Frames zu erstellen.
Zum Bearbeiten klicke auf die Trennlinie zwischen zwei
Frames. Im Eigenschafteninspektor erscheinen nun die
Details für neben- oder untereinander liegende Frames.
Je nachdem, ob eine horizontale oder vertikale Trennlinie
angeklickt wurde:
Eberhart 10
„Relative“ Frames
• Klicke auf die Trennlinie und suche dir den Frame aus,
den du bearbeiten willst.
• Stelle die Höhe in Pixel ein
• Wähle für einen der Frames
die Auswahl: „Relativ“.
Dadurch erhält dieser
Frame die Möglichkeit,
den restlichen Platz im Browser auszufüllen und ist
daher nicht an eine fixe Breite gebunden.
• Es kann jedoch nur maximal ein Frame eine relative
Breite haben
Eberhart 12

Übung:
• In unserem Frameset soll die Navigation 150 Pixel breit
sein und der rechte Frame daneben (inhalt.html)
RELATIV gehalten sein.
• Der obere Kopfframe soll eine Höhe von 120 Pixel
erhalten.
Tipp: um in das Frameset zu gelangen, klicke auf die
Trennlinie und dann im Eigenschafteninspektor auf
die linke bzw. obere Zelle im Framesymbol.
Eberhart 13
• Wichtig: Frames mit einer festen Breite sollen in den
Eigenschaften „Keine Größenänderung“ zulassen
aktiviert habe. Dadurch kann verhindert werden, dass
der Nutzer diesen Frame selbst skaliert.
• Auswahl: ROLLEN
Steuert die Darstellung von
Rollbalken im Browser.
„JA“: es werden immer Rollbalken
angezeigt, auch wenn der Platz ausreicht
„NEIN“: es erscheinen niemals Rollbalken
„AUTO“ oder „Standard“: Rollbalken, wenn erforderlich
Eberhart 15
Framenamen zuweisen
Klicke mit gedrückter ALT-Taste auf die einzelnen Frames.
Damit wird der angeklickte Frame mit einer gepunkteten
Rahmenlinie dargestellt. Im Eigenschafteninspektor
kann links unten der jeweilige Name vergeben
werden. Der Name soll aus einem Wort bestehen, ohne
„ß“, Beistrich und Punkt; das erste Zeichen soll keine Zahl
sein.
Eberhart 17
Frames auswählen
1)Klicke mit gedrückter ALT-Taste auf einen Frame.
oder
2)Das Bedienfeld „Frames“ zeigt die
Frames der Seite im Kleinformat an:
entweder „Umschalt-Taste + F2“
oder
3)Menü FENSTER, Frames anklicken.
Ein markierter Frame ist mit einem
gepunkteten Rahmen dargestellt.
Eberhart 14
Frame-Eigenschaften einstellen
• „Randhöhe“ und „Randbreite“ steuern, wie dick der
Browser die Trennlinie zwischen Frames zeichnet. Ist
nichts eingetragen, verwendet der Browser einen
Standardwert. Soll die Trennlinien komplett
ausgeblendet werden, stelle beide Felder auf 0.
Eberhart 16
„iframe“
= „inline frame“: dieser landet mitten in einer HTML Seite
und wird in diese Seite eingebunden. Dieser iframe
verweist auf eine andere HTML Seite einer beliebigen
Art. Somit kann eine externe URL aber auch eine interne
Seite angezeigt werden.
• Die Größe ist beliebig.
• Einziger Nachteil: nur in
der Code – Ansicht
zu erzeugen, nicht
in der Entwurfsansicht.
Eberhart 18

„iframe“ einfügen
• Einfügeleiste „HTML“ , „frame“ , „schwebender Frame“
• ABER NUR in der CODEANSICHT
Eberhart 19
• Wähle „plan1.html“ und gib die Breite und Höhe der
Anzeige ein. Nutze dabei die Codevervollständigung.
• Schalte in den
Entwurf und
betrachte die
Anzeige:
Eberhart 21
iframe formatieren
• Frameborder: erlaubt zwei Möglichkeiten: 0 oder 1
Standard = 0;
• scrolling
Eberhart 23
• Erstelle eine Datei „iframe.html“
• Wechsle in die Codeansicht und schaffe Platz im „body“.
Klicke „schwebender Frame“ und schreibe src=“
Damit erscheint die Möglichkeit „Durchsuchen“ um eine
passende Datei zu suchen.
Wähle „plan1.html“ von
der ersten Übung.
• Statt eines internen
Links kann auch eine
beliebige URL eingefügt
werden, zB http://www.google.at
Schaffe
folgendes
Web mit den
Angaben aus
dem Ordner:
Übung_
Angabe
Eberhart 20
Ergebnis: iframe
Eberhart 22
Übung 2
Eberhart 24

Übung 3
Schaffe ein neues Web, in dem du folgende drei Varianten
für Seiten einbauen sollst:
1. Einfache HTML Site
2. Site mit beliebigen Frames
3. Site für Online-Umfragen, Multiple Coice Site
Eberhart 25
Multiple choice Site festlegen
Eberhart 26