1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Frames / Eingebettete Frames</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie eingebettete Frames definieren können, um innerhalb einer HTML-Datei eine andere HTML-Datei oder andere Datenquellen anzuzeigen.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Frames, eingebettete Frames, Inline-Frames, <iframe>, width=, height=, name=, src=, hspace=, vspace=, frameborder=, align=">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/frames/eingebettete.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Frames == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Frames</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Eingebettete Frames</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#definieren"><b>Eingebettete Frames definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#eigenschaften"><b>Eigenschaften eingebetteter Frames</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#verweise"><b>Verweise zu eingebetteten Frames</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="definieren">Eingebettete Frames definieren</a></h2>
<p>Eingebettete Frames werden vom MS Internet-Explorer ab Version 3.x interpretiert, von Netscape bis einschließlich Version 4.x dagegen nicht. Seit HTML 4.0 gehören sie zum HTML-Standard. Eingebettete Frames sind ein eigenständiges Gestaltungsmittel zur Informationsaufbereitung, das anders funktioniert als "normale" Frames. Eingebettete Frames erzeugen keine Aufteilung des Bildschirms, sondern sind ähnlich wie Grafiken Bereiche innerhalb einer HTML-Datei, in denen fremde Quellen, vor allem andere HTML-Dateien angezeigt werden können.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/iframe.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingebettete Frames definieren</title>
</head>
<body>
<h1>Fenstergucker</h1>
<p>Gucken Sie mal SELFHTML im Fenster an:</p>
<iframe src="../../../index.htm" width="90%" height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Für HTML-Dateien mit eingebetteten Frames gilt das gewöhnliche <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/grundgeruest.htm"><b>Grundgerüst einer HTML-Datei</b></a>. Eingebettete Frames können dann im Textkörper der HTML-Datei an einer gewünschten Stelle vorkommen. Mit <code><iframe...></code> leiten Sie einen eingebetteten Frame ein (<i>iframe = inline frame = Rahmen im Textfluss</i>). Mit dem Attribut <code>src=</code> bestimmen Sie, was in dem eingebetteten Frame angezeigt werden soll. Es kann sich um eine andere HTML-Datei oder eine beliebige andere lokale oder entfernte Datenquelle handeln. Bei der Wertzuweisung gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/referenzieren.htm"><b>Referenzieren in HTML</b></a>.<br>
Ferner sollten Sie für den eingebetteten Frame mit <code>name=</code> einen Namen vergeben. Diese Namen brauchen Sie, um <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#verweise"><b>Verweise zu dem eingebetteten Frame</b></a> zu definieren. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (<code>_</code>), den Bindestrich (<code>-</code>), den Doppelpunkt (<code>:</code>) oder den Punkt (<code>.</code>). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (<code>_</code>) enthalten. Groß- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.</p>
<p>Dringend zu empfehlen ist das Bestimmen der gewünschten Breite und Höhe des eingebetteten Framefensters. Die Breite geben Sie im einleitenden <code><iframe></code>-Tag mit dem Attribut <code>width=</code> an, die Höhe mit <code>height=</code>. Erlaubt sind Pixelangaben oder Prozentwerte, die sich auf die Größe des verfügbaren Raums beziehen.</p>
<p>Zwischen dem einleitenden <code><iframe></code> und dem erforderlichen, abschließenden <code></iframe></code> können Sie Text und andere Elemente notieren, die von Web-Browsern angezeigt werden, die den eingebetteten Frame nicht interpretieren.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Wenn Sie das <code>iframe</code>-Element in einer HTML-Datei notieren, müssen Sie in dieser Datei die HTML-Variante "Transitional" wählen. Eingebettete Frames gehören also auch nicht zur "reinen Lehre".</p>
<p>Andere Möglichkeiten, um Inhalte aus anderen Dateien innerhalb einer HTML-Datei anzuzeigen, sind <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../multimedia/objekte.htm#datendateien"><b>Datendateien als Objekt</b></a> (ebenfalls HTML-Standard), <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../layer/definieren.htm#inhalt_aus_datei"><b>Layer mit Inhalt aus anderer Datei</b></a> (Netscape-spezifisch) sowie <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../cgiperl/intro/ssi.htm"><b>Server Side Includes</b></a> (HTML-Standard-konform, jedoch nur in HTTP-Umgebung ausführbar).</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="eigenschaften">Eigenschaften eingebetteter Frames</a></h2>
<p>Sie können verschiedene weitere Eigenschaften definieren, um ein eingebettetes Framefenster zur Umgebung auszurichten.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/iframe_eigenschaften.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Bild zum Scrollen</h1>
<iframe src="bild.jpg" name="Bildframe" width="300" height="200" align="left"
scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
<img src="bild.jpg" width="464" height="580" border="0" alt="Bild"></p>
</iframe>
<p>Dieses Bild wurde auf dem Karwendelstein bei Mittenweld
aufgenommen, in ca. 2400 Mether H&ouml;he. Es demonstriert, was einem in
einem Freistaat so alles passieren kann ...</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel zeigt, wie Sie ein eingebettetes Framefenster dazu verwenden können, um eine größere Grafik anzuzeigen und diese mit eigenen Scrollbars auszustatten.</p>
<p>Mit <code>align="left"</code> richten Sie den eingebetteten Frame links aus. Nachfolgende Inhalte fließen dann rechts um den Frame. Mit <code>align="right"</code> richten Sie den eingebetteten Frame rechts aus und nachfolgende Inhalte fließen links um den Frame. Dieses Attribut ist jedoch als <i>deprecated</i> eingestuft und durch die CSS-Eigenschaft <code>text-align</code> ersetzbar (z.B. <code><iframe style="text-align:left"></code>).</p>
<p>Mit <code>scrolling="yes"</code> können Sie Scrollbars (Bildlaufleisten) in dem eingebetteten Frame erzwingen, mit <code>scrolling="no"</code> unterdrücken. <code>scrolling="auto"</code> können Sie ebenfalls angeben, doch dies entspricht der Voreinstellung.</p>
<p>Mit <code>frameborder="0"</code> können Sie den sichtbaren Außenrahmen des eingebetteten Frames unterdrücken. <code>frameborder="1"</code> ist die Voreinstellung.</p>
<p>Zwei weitere Attribute, nämlich <code>hspace=</code> und <code>vspace=</code>, werden vom Internet Explorer ebenfalls interpretiert, sind aber im Zusammenhang mit eingebetteten Frames nicht im HTML-Standard verzeichnet - was etwas inkonsistent ist, da das <code>align</code>-Attribut bei solchen Framefenstern genauso wirkt wie etwa bei Grafiken oder Objekten. Mit <code>hspace=</code> [Pixel] bestimmen Sie den Abstand zum Text neben dem eingebetteten Frame, mit <code>vspace=</code> [Pixel] den Abstand zum Text über bzw. unter dem Frame (<i>hspace = horizontal space = horizontaler Abstand, vspace = vertical space = vertikaler Abstand</i>). Beide Angaben erzeugen jedoch ungültiges HTML.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Genau wie bei normalen Frames besteht auch bei eingebetteten Frames die Möglichkeit, mit dem Attribut <code>longdesc=</code> eine <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="definieren.htm#langbeschreibung"><b>Langbeschreibung</b></a> zu referenzieren.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="verweise">Verweise zu eingebetteten Frames</a></h2>
<p>In einer HTML-Datei, in der Sie einen eingebetteten Frame definieren, können Sie mit Verweisen auch den Inhalt des eingebetteten Frames ändern.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/iframe_verweise.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Fernsteuerung</h1>
<iframe src="startseite.htm" name="Fensterlein" width="500" height="400" marginheight="10" marginwidth="10" align="right">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>
<p>
<a href="willkommen.htm" target="Fensterlein"><b>andere Seite</b></a><br>
<a href="startseite.htm" target="Fensterlein"><b>erste Seite</b></a>
</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Voraussetzung für Verweise zu einem eingebetteten Frame ist, dass der eingebettete Frame mit <code>name=</code> einen Namen erhalten hat. Im obigen Beispiel ist das der Name <code>Fensterlein</code>.<br>
Für das Setzen eines Verweises zu dem eingebetteten Frame gelten die üblichen Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/referenzieren.htm"><b>Referenzieren in HTML</b></a>. Damit das Verweisziel in dem Frame angezeigt wird, notieren Sie im einleitenden Verweis-Tag zusätzlich die Angabe <code>target=</code> (<i>target = Ziel</i>). Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="layouts.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="layouts.htm"><b>Frames als Mittel für Seitenlayouts</b></a></td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="verweise.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="verweise.htm"><b>Verweise bei Frames</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Frames</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
