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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Frames / Framesets und Frames definieren</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Frames, also unterteilte Fenster definieren.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Frames, Framesets, Bildschirmfenster, <frameset>, <frame>, <noframes>, cols=, rows=">
<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/definieren.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>Framesets und Frames definieren</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="#allgemeines"><b>Allgemeines zu Frames</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#grundgeruest"><b>Grundgerüst einer HTML-Datei mit Framesets</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#framesets"><b>Framesets definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#frames"><b>Frames zu einem Frameset definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#noframes"><b>Noframes-Bereich definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#langbeschreibung"><b>Langbeschreibung für Framefenster</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</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"><a class="an" name="allgemeines">Allgemeines zu Frames</a></h2>
<p>Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in
verschiedene, frei definierbare Segmente aufteilen. Jedes Segment kann
eigene Inhalte enthalten. Die einzelnen Anzeigesegmente (also die Frames)
können wahlweise einen statischen Inhalt
(= "non scrolling regions") oder einen wechselnden Inhalt
haben. Verweise in einem Frame können Dateien aufrufen, die dann in einem anderen Frame angezeigt werden.</p>
<p>Frames sind kein weiteres Element, um typische Aufgaben der Textverarbeitung zu
bewältigen, sondern ein Element, das die spezifischen
Eigenschaften der Bildschirmanzeige konsequent nutzt. Frames
eröffnen völlig neue Möglichkeiten, um Information
hypertextuell (d.h. nicht-linear) aufzubereiten.</p>
<p>Frames werden ab Netscape 2.0 und ab MS Internet Explorer 3.0 unterstützt. Seit HTML 4.0 gehören die Frames auch zum HTML-Standard. Dort allerdings nicht zur HTML-Variante "Strict", sondern stattdessen mit einer eigenen Variante "Frameset" ausgestattet. Die nebenstehende Abbildung zeigt, wie Frames im Anzeigefenster des Browsers wirken:</p>
<p><img src="frames.gif" width="300" height="200" border="0" alt="Frames"></p>
<p>Das Bild stellt den Inhalt des gesamten Anzeigefensters des Browsers schematisch dar. Das Anzeigefenster ist in drei unabhängige Bereiche aufgeteilt. Die Verweise links und unten können beispielsweise immer eingeblendet bleiben, während sich der Inhalt des Hauptfensters je nach ausgewähltem Verweis ändern kann. Dabei werden im Beispiel der Abbildung immer drei verschiedene HTML-Dateien gleichzeitig angezeigt: links und unten immer die gleiche Datei, im Hauptfenster jeweils eine wechselnde Datei, je nach ausgewähltem Verweis.</p>
<p>In jedem Frame stehen alle Anzeige-Features zur Verfügung - so ist es z.B. denkbar, in einem Frame Textinformation anzuzeigen, während in einem anderen Frame gleichzeitig ein passendes Video abläuft.</p>
<p>Durch den Einsatz von Frames wachsen die Gestaltungsmöglichkeiten außerordentlich. Frames stellen an das Design von HTML-Seiten aber auch besonders hohe Ansprüche und haben einige nicht zu bestreitende Nachteile. Einige Tips, die Sie beachten sollten, finden Sie im Abschnitt <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>.</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/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="grundgeruest">Grundgerüst einer HTML-Datei mit Framesets</a></h2>
<p>Um Frames zu definieren, brauchen Sie eine spezielle HTML-Datei, in der ein Frameset definiert wird. Das Frameset bestimmt die Fensteraufteilung. Für eine solche Datei ist ein anderes Grundgerüst erforderlich als das sonst übliche Grundgerüst von HTML-Dateien.</p>
<h3 class="xmp">Schema:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset ...> <!-- Frameset-Definition -->
<frame ...> <!-- Framefenster-Definition -->
<noframes>
Wird angezeigt, wenn der Browser keine Frames anzeigen kann
</noframes>
</frameset>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Unterschiede zu anderen HTML-Dateien beginnen bei der <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/grundgeruest.htm#dokumenttyp"><b>Dokumenttyp-Angabe</b></a>. Bei Dateien, in denen Sie Framesets und Frames definieren, müssen Sie die oben gezeigte Dokumenttyp-Angabe zur HTML-Variante "Frameset" notieren.</p>
<p>Ein weiterer wichtiger Unterschied zu anderen HTML-Dateien ist, dass Dateien mit Frameset-Definitionen kein <code>body</code>-Element besitzen. Anstelle des <code>body</code>-Elements, also nach dem abschließenden <code></head></code>-Tag für den Dateikopf, werden die Frames definiert. Dabei können Sie:<br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#framesets"><b>Framesets definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#frames"><b>Frames zu einem Frameset definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#noframes"><b>Noframes-Bereich definieren</b></a></p>
<p>Mit Framesets bestimmen Sie die Aufteilung der Framefenster, mit Frames die Datenquellen der einzelnen Framefenster, und der Noframes-Bereich ist für Browser gedacht, die keine Frames anzeigen können, oder bei denen die Anzeige von Frames deaktivierbar ist und vom Anwender deaktiviert wurde.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Der Titel (<code><title></code>...<code></title></code>), den Sie in der Datei mit der Frameset-Definition angeben, wird während der gesamten Dauer des Frame-Sets angezeigt, auch wenn andere Dateien innerhalb des Frame-Sets aufgerufen werden. Leider gibt es bislang keine Möglichkeit, den Titel zu aktualisieren. Wählen Sie in der Datei, die die Frame-Set-Definitionen enthält, deshalb einen allgemeinen, aussagekräftigen Titel, der für das gesamte Projekt Gültigkeit hat.</p>
<p>Der URI der Datei mit der Frameset-Definition, also beispielsweise <var>http://www.ihr-guter-name.de/</var>, bleibt in der gleichen Form in der Adresszeile des Browsers stehen, auch wenn der Anwender durch Navigieren innerhalb des Framesets andere Seiten des Projekts in eines der Framefenster lädt.</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/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="framesets">Framesets definieren</a></h2>
<p>Beim Definieren von Framesets bestimmen Sie, wie das Anzeigefenster
des Browsers in verschiedene Framefenster aufgeteilt werden soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, definieren Sie Reihen und Spalten für die Framefenster. Ebenso, wie es möglich ist, Tabellen in HTML zu verschachteln, ist das auch bei Framesets möglich. Anstelle eines Frames können Sie auch ein untergeordnetes Frameset notieren. Auf diese Weise können Sie beliebige Fensteraufteilungen erreichen.</p>
<h3 class="xmp">Detailbeispiel 1:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<frameset rows="20%,80%">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Frameset-Definition im Detailbeispiel 1 ergibt folgende Framefenster-Konstellation:</p>
<p><img src="frameset1.gif" width="160" height="120" border="0" alt="Frameset mit Reihen zu 20% und 80%"></p>
<p>Im einleitenden Tag <code><frameset...></code> bestimmen Sie die Aufteilung. Durch <code>rows=</code> teilen Sie das Anzeigefenster in Reihen auf (<i>rows = Reihen</i>). Dahinter bestimmen Sie, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von <code>rows="20%,80%"</code> eine Aufteilung in zwei Reihen erzwungen, wobei die obere Reihe 20% des Anzeigefensters in Anspruch nimmt, die untere 80%.</p>
<p>Trennen Sie die Angaben zur Aufteilung durch Kommata!</p>
<h3 class="xmp">Detailbeispiel 2:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<frameset rows="100,*,60">
<!-- Dadurch ergeben sich drei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Frameset-Definition im Detailbeispiel 2 ergibt folgende Framefenster-Konstellation:</p>
<p><img src="frameset2.gif" width="160" height="120" border="0" alt="Frameset mit Reihen zu 100 Pixeln, automatisch und 60 Pixeln"></p>
<p>Mit der Angabe <code>rows="100,*,60"</code> werden drei untereinanderliegende Reihen für Framefenster erzeugt. Die obere Reihe wird genau 100 Pixel hoch, die untere Reihe genau 60 Pixel hoch, und die mittlere Reihe erhält den Rest des Anzeigefensters, abhängig von der Größe des Anzeigefensters beim Anwender.<br>
Mit Zahlenangaben, die ein Prozentzeichen enthalten, wird die Aufteilung also prozentual (relativ zur Größe des Anzeigefensters) interpretiert. Bei Zahlenangaben ohne Prozentzeichen wird die Angabe als absoluter Pixelwert interpretiert. Mit dem Sternzeichen <code>*</code> definieren Sie Bereiche von relativer Größe, abhängig von den übrigen Angaben.<br>
Sie können auch vier oder mehrere Reihen definieren. So definieren Sie beispielsweise mit <code>rows="10%,25%,30%,25%,10%"</code> fünf Reihen.</p>
<h3 class="xmp">Detailbeispiel 3:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<frameset cols="200,*">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Frameset-Definition im Detailbeispiel 3 ergibt folgende Framefenster-Konstellation:</p>
<p><img src="frameset3.gif" width="160" height="120" border="0" alt="Frameset mit Spalten 200 Pixeln und automatisch"></p>
<p>Mit dem Attribut <code>cols=</code> teilen Sie das Anzeigefenster in Spalten auf (<code>cols = columns = Spalten</code>). Dahinter bestimmen Sie, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von <code>cols="200,*"</code> eine Aufteilung in zwei Spalten erzwungen, wobei die linke Spalte 200 Pixel des Anzeigefensters in Anspruch nimmt, die rechte den Rest. Bei <code>cols=</code> sind die gleichen Angaben möglich wie bei <code>rows=</code>.</p>
<h3 class="xmp">Detailbeispiel 4:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<frameset cols="40%,60%">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird
Das erste Framefenster wird normal definiert, anstelle des zweiten
folgt jedoch das folgende untergeordnete Frameset: -->
<frameset rows="20%,80%">
<!-- Noch mal zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
</frameset>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Frameset-Definition im Detailbeispiel 4 ergibt folgende Framefenster-Konstellation:</p>
<p><img src="frameset4.gif" width="160" height="120" border="0" alt="Frameset mit Spalten zu 40% und 60%, wobei die zweite Spalte aufgeteilt wird in ein Frameset zu 20% und 80%"></p>
<p>In diesem Beispiel werden Reihen und Spalten für eine komplexere Aufteilung von Framefenstern definiert. Bei solchen Aufteilungen müssen Sie zunächst das gesamte Fenster im Auge behalten. Dieses Fenster wird im Beispiel zunächst mit <code>cols="40%,60%"</code> in zwei Spalten aufgeteilt. Das erste Framefenster für die linke Spalte (im obigen Beispiel nicht explizit definiert, dort steht nur der längere Kommentar) wird ein ganz normales Framefenster mit Inhalt. Anstelle des zweiten Framefensters für die rechte Spalte wird jedoch ein neues, untergeordnetes Frameset definiert. Mit der Angabe <code>rows="20%,80%"</code> erhält es eine Aufteilung in zwei Reihen, also für zwei untereinanderliegende Framefenster, wobei das obere 20% der zur Verfügung stehenden Fläche einnimmt, und das untere 80%.</p>
<h3 class="xmp">Detailbeispiel 5:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<!-- zwei Frames, deren Inhalt hier bestimmt wird -->
</frameset>
<frameset cols="50%,50%">
<!-- noch mal zwei Frames, deren Inhalt hier bestimmt wird -->
</frameset>
</frameset>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die Frameset-Definition im Detailbeispiel 5 ergibt folgende Framefenster-Konstellation:</p>
<p><img src="frameset5.gif" width="160" height="120" border="0" alt="Frameset mit zwei Reihen zu je 50%, wobei beide Reihen aufgeteilt werden in zwei Spalten zu je 50%"></p>
<p>Das Beispiel zeigt eine komplexere Aufteilung in vier Bereiche. Da in einem solchen Fall alle Bereiche gleich groß sind, ist es egal, ob Sie mit der Definition der Spalten oder Reihen beginnen. Wichtig ist die durchgängige Logik. Wenn Sie - wie im Beispiel - mit der Definition der Reihen beginnen, müssen Sie anstelle von Frames untergeordnete Frame-Sets definieren, in denen Sie jede der beiden Reihen in zwei Spalten aufteilen. Erst innerhalb dieser untergeordneten Frame-Sets werden dann die eigentlichen Frames definiert.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Frame-Sets sollten immer so definiert sein, dass das gesamte Anzeigefenster abgedeckt wird. Verwenden Sie dazu Prozentangaben, die in der Summe 100 ergeben, oder das Sternzeichen <code>*</code>.</p>
<p>Neben der prozentualen Aufteilung ist noch eine weitere relative Angabe zur Framefenster-Aufteilung erlaubt. Sie können das relative Verhältnis bei <code>rows=</code> oder <code>cols=</code> auch durch Zahlen, gefolgt von einem Sternzeichen, bestimmen.<br>
Mit einer Aufteilung wie <code>rows="1*,5*,3*"</code> definieren Sie drei Reihen, also Platz für drei untereinanderliegende Framefenster, wobei das oberste Framefenster ein Neuntel einnimmt, das zweite fünf Neuntel und das dritte drei Neuntel (also ein Drittel). Die "9" ergibt sich durch Zusammenzählen von 1, 3 und 5, wodurch das relative Verhältnis ermittelt wird.</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/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="frames">Frames zu einem Frameset definieren</a></h2>
<p>Nachdem Sie durch die Definition von Framesets die gewünschte Aufteilung des
Anzeigefensters bestimmt haben, geben Sie mit der Definition der Frames an,
welche Inhalte in den einzelnen Framefenstern zunächst angezeigt werden sollen.</p>
<h3 class="xmp">Beispiel Teil 1 - Datei mit Frameset:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/frames.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 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation">
<frame src="startseite.htm" name="Daten">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>
</pre></td></tr></table>
<h3 class="xmp">Beispiel Teil 2 - Datei <var>verweise.htm</var> für linkes Framefenster:</h3>
<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 bgcolor="#E0C0FF" text="#000000" link="#804080" vlink="#603060" alink="#804080">
<h1>Navigation</h1>
<p>
<a href="../index.htm" target="Daten"><b>&Uuml;ber Frames</b></a><br>
<a href="../../index.htm" target="Daten"><b>&Uuml;ber HTML</b></a><br>
<a href="../../../index.htm" target="Daten"><b>Noch viel mehr</b></a>
</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xmp">Beispiel Teil 3 - Datei <var>startseite.htm</var> für rechtes Framefenster:</h3>
<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 bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000" alink="#A00000">
<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit je einem <tt><frame></tt>-Tag definieren Sie innerhalb eines Framesets die zugehörigen Frames (<i>frame = Rahmen</i>).
Theoretisch können Sie das <code><frame></code>-Tag ohne weitere Attribute notieren. In diesem Fall zeigt der Browser in dem entsprechenden Framefenster eine leere Fläche an. Normalerweise werden Sie jedoch die Framefenster mit Inhalt füllen wollen. Dazu dient das Attribut <code>src=</code> (<i>src = source = Quelle</i>). Bei der Wertzuweisung an dieses Attribut können Sie die Datei oder Datenquelle angeben, die im entsprechenden Framefenster zunächst angezeigt werden soll. Dabei 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> - mit einer Ausnahme: Sie dürfen keine Anker innerhalb der Datei mit Framesets adressieren. Eine Wertzuweisung wie <code>src="#weiter_unten"</code> ist also nicht erlaubt - widerspricht allerdings auch sowieso aller Logik.<br>
Sie können also andere HTML-Dateien des eigenen Projekts in das Framefenster laden, aber auch andere Dateitypen wie z.B. Grafiken. Auch Dateien oder Datenquellen von entfernten Servern können Sie - mit absoluter <code>http://</code>-Adressierung beispielsweise - in ein Framefenster laden. Doch dabei ist höchste Vorsicht geboten: damit machen Sie sich fremde Inhalte zueigen und können sich schnell juristischen Ärger einhandeln.</p>
<p>Ferner sollten Sie gleich für jedes definierte Framefenster mit <code>name=</code> einen Namen vergeben. Diese Namen brauchen Sie, um Verweise zu definieren, die in diesem Framefenster angezeigt werden sollen. Ferner sind die Namen wichtig, wenn Sie zusätzlich <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../javascript/index.htm"><b>JavaScript</b></a> einsetzen und damit auf einzelne Framefenster zugreifen wollen.<br>
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>Definieren Sie für jede "Zelle" Ihrer durch das Frameset definierten "Tabelle" ein Framefenster. Im obigen Beispiel wird ein Frameset für zwei Framefenster definiert, mit der Aufteilung, die durch die Angabe <code>cols="250,*"></code> bestimmt wird. Ins linke Framefenster, also dem mit 250 Pixeln Breite, soll im Beispiel eine Datei namens <code>verweise.htm</code> geladen werden, und ins rechte Framefenster eine Datei namens <code>startseite.htm</code>. So wie im Beispiel bei <code>src=</code> notiert, müssen sich beide Dateien im gleichen Verzeichnis befinden.</p>
<p>Die beiden HTML-Dateien selbst sind gewöhnliche HTML-Dateien. An der Datei <code>verweise.htm</code> können Sie bei den darin notierten Verweisen sehen, wozu die Namen der Framefenster gut sind: mit <code>target="Daten"</code> wird dort bei den Verweisen bestimmt, dass das Verweisziel in dem Framefenster angezeigt wird, das bei der Framefenster-Definition mit <code>name="Daten"</code> den entsprechenden Namen erhalten hat. Weitere Einzelheiten zu diesem Thema finden Sie im Abschnitt <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="verweise.htm"><b>Verweise bei Frames</b></a>.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das <code>frame</code>-Element besteht nur aus dem Standalone-Tag <code><frame></code>. Wenn Sie <b>XHTML-konform</b> arbeiten, müssen Sie das <code>frame</code>-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <code><frame /></code>.<br>
Weitere Informationen dazu im Kapitel <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xhtml/index.htm"><b>XHTML und HTML</b></a>.</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/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="noframes">Noframes-Bereich definieren</a></h2>
<p>Für Anwender, deren Browser keine Frames unterstützen, können Sie Ihr Projekt so gestalten, dass solche Anwender dennoch Daten aufrufen können. Noframes-Bereiche haben dabei zwei Aufgaben: zum einen können Sie in der Datei stehen, in der das Frameset definiert ist. Dort können Sie für Browser, die keine Frames anzeigen können, oder bei denen der Anwender die Anzeige von Frames abgeschaltet hat, einen alternativen Inhalt anbieten. Es kann sich um beliebigen, mit HTML strukturierte Inhalte handeln.<br>
Darüber hinaus können Sie Noframes-Bereiche aber auch in HTML-Dateien verwenden, die innerhalb des Framesets als Inhalte in Framefenstern angezeigt werden sollen. Browser, bei denen die Frames angezeigt werden, sollten den Inhalt solcher Noframes-Bereiche unterdrücken. Browser, bei denen die Frames nicht angezeigt werden können oder keine Frames angezeigt werden, zeigen den Inhalt an. Auf diese Weise können Sie z.B. eine einfache Alternativ-Navigation für nicht-framefähige Browser anbieten. Das folgende Beispiel zeigt die Verwendungsweisen für Noframes-Bereiche.</p>
<h3 class="xmp">Beispiel Teil 1 - Datei mit Frameset:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/frames2.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 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise2.htm" name="Navigation">
<frame src="startseite2.htm" name="Daten">
<noframes>
<h1>Willkommen!</h1>
<p>Dieses Projekt verwendet Frames. Bei Ihnen werden keine Frames angezeigt.</p>
<p>W&auml;hlen Sie einen der Verweise aus:<br>
<a href="startseite2.htm"><b>Startseite</b></a><br>
<!-- weitere Verweise usw. --></p>
</noframes>
</frameset>
</html>
</pre></td></tr></table>
<h3 class="xmp">Beispiel Teil 2 - Datei <var>startseite2.htm</var> für rechtes Framefenster:</h3>
<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 bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000" alink="#A00000">
<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!</p>
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen werden keine Frames angezeigt:</p>
<p><a href="frames2.htm">zur&uuml;ck zur Startseite</a></p>
</noframes>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel zeigt die Datei mit der Frameset-Definition und die Datei, die im rechten Framefenster angezeigt wird. Die Datei <code>verweise.htm</code>, die ins linke Framefenster geladen wird, ist in diesem Zusammenhang hier unerheblich und ist deshalb nicht nochmal dargestellt.</p>
<p>Innerhalb von Dateien, die Framesets definieren, sollte ein Noframes-Bereich, markiert durch <code><noframes></code> und <code></noframes></code>, am Ende des äußersten Framesets vor dem letzten abschließenden <code></frameset></code>-Tag notiert werden. Im obigen Beispiel wird nur ein einfaches Frameset definiert, das aus zwei Framefenstern besteht. In diesem Fall werden also die beiden Framefenster notiert und unterhalb davon, vor dem abschließenden <code></frameset></code>, der Noframes-Bereich.</p>
<p>Innerhalb des Noframes-Bereichs können Sie alles notieren, was Sie sonst auch zwischen <code><body></code> und <code></body></code> notieren können, also z.B. Überschriften, Textabsätze, Tabellen, Grafikreferenzen usw. Da es sich bei Browsern, die keine Frames anzeigen können, in der Regel um sehr einfach gestrickte Browser handelt, oder um solche, die unter nicht-grafischen Oberflächen laufen, brauchen Sie keinen übermäßigen Aufwand für die Optik des Inhalts im Noframes-Bereich zu betreiben. Eine saubere Strukturierung genügt.</p>
<p>Im obigen Beispiel ist innerhalb des Noframes-Bereichs der Datei mit der Frameset-Definition eine Willkommens-Überschrift notiert, ein Hinweis, dass es sich um ein Projekt mit Frames handelt, und es werden Verweise angeboten. Beispielsweise der Verweis auf die Seite <code>startseite2.htm</code>, die bei Anzeige von Frames im rechten Framefenster erscheint. Ferner könnten Sie an dieser Stelle all jene Verweise anbieten, die bei Anzeige von Frames in der links angezeigten Datei <code>verweise2.htm</code> stehen. Auf diese Weise können Anwender ohne frame-fähigen Browser dennoch alle Verweise ausführen, die sonst im Frameset angeboten werden.</p>
<p>In der Datei <code>startseite2.htm</code> taucht im obigen Beispiel jedoch auch ein Noframes-Bereich auf. Für Browser, die keine Frames anzeigen können, können Sie in solchen Bereichen Inhalte anbieten, die sonst über das Frameset erledigt werden - beispielsweise einen Rückverweis auf die Startseite. Diese Möglichkeit wird auch im Beispiel benutzt: durch den Rückverweis auf die Datei mit den Frameset-Definitionen, die ja auch einen Noframes-Bereich enthält und dort Verweise auf die übrigen Projektseiten anbietet, können Sie eine vollständige, wenn auch etwas simple Alternativ-Navigation für Anwender ohne frame-fähigen Browser realisieren.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Noframes-Bereiche in Projektdateien außerhalb der Datei mit Frameset-Definitionen sind allerdings mit Vorsicht zu genießen: denn leider werden sie nicht nur von nicht-frame-fähigen Browsern angezeigt, sondern auch von älteren frame-fähigen. So zeigt beispielsweise Netscape 4.x den Noframes-Bereich in der Datei <code>startseite2.htm</code> des obigen Beispiels gnadenlos an und verwirrt damit Anwender, bei denen das Frameset angezeigt wird. Internet Explorer 5.x und Netscape 6.x unterdrücken dagegen Noframes-Bereiche in solchen Projektdateien.</p>
<p>Wenn Sie in Projektdateien, die in einem Framefenster angezeigt werden, Noframes-Bereiche notieren, müssen Sie für solche Projektdateien die HTML-Variante "Transitional" wählen, denn in der "Strict"-Variante gibt es keine Frames und auch keine Noframes-Bereiche.</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"> <a class="an" name="langbeschreibung">Langbeschreibung für Framefenster</a></h2>
<p>Sie können bei der Definition von Frames angeben, wo eine ausführliche Beschreibung des Inhalts des betreffenden Framefensters zu finden ist. Browser, die zwar Frames erkennen, aber bei denen die Anzeige von Frames nicht möglich ist, z.B. akkustische Ausgabesysteme, können z.B. das bei der Langbeschreibung angegebene Ziel ausgeben.</p>
<h3 class="xmp">Beispiel:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation">
<frame src="startseite.htm" name="Daten" longdesc="startseite_extra.htm">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>longdesc=</code> in einem <code><frame></code>-Tag können Sie auf eine Stelle verweisen, wo der Inhalt dieses Framefensters in einer längeren Beschreibung zusammengefasst wird. Erlaubt ist ein URI, d.h. bei der Angabe 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>.</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"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#frameset"><b>Element-Referenz</b></a> für Framesets (<code><frameset>...</frameset></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#frameset"><b>Attribut-Referenz</b></a> für Framesets (<code><frameset>...</frameset></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#frame"><b>Element-Referenz</b></a> für Frames (<code><frame>...</frame></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#frame"><b>Attribut-Referenz</b></a> für Frames (<code><frame>...</frame></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#noframes"><b>Element-Referenz</b></a> für Noframes-Bereiche (<code><noframes>...</noframes></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#noframes"><b>Attribut-Referenz</b></a> für Noframes-Bereiche (<code><noframes>...</noframes></code>)</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="eigenschaften.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="eigenschaften.htm"><b>Eigenschaften von Frames</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="../formulare/verarbeiten.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="../formulare/verarbeiten.htm"><b>Formulare verarbeiten</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>
|
