UbuntuZone

prasu2926 · **Verfasst am:** 23.11.2006, 23:33 **Titel:** HTML Teil2

7.10 Frameset verschachteln

Zum Abschluss erstellen wir noch ein verschachteltes Frameset, es besitzt 2 Zeilen, von denen die untere wiederum in 2 Spalten aufgeteilt ist. Hä? Wenn du dir darunter nichts vorstellen kannst, schau dir das Beispiel an! Als erstes brauchst du eine weitere Seite, die Datei "titel.html", wo - wie der Name schon sagt - der Titel oder ein Banner hinkommt. So oder ähnlich kann die Datei Aussehen:

[ Titelseite ]

<html>
<head>
<title>Der Titel</title>
</head>
<body>
<h1>Hier kommt ein feststehender Titel hin...</h1>
</body>
</html>

Dann brauchen wir ein neues Frameset. Erstelle dazu bitte die Datei "dreiframes.html". Und das kommt dort hinein:

[ Frameset ] [ Screenshot ]

<html>
<head>
<title>Verschachteltes Frameset</title>
</head>
<frameset rows="80,*" border="0">
<frame src="titel.html" name="titel">
<frameset cols="120,*">
<frame src="navigation.html" name="links">
<frame src="frames1.html" name="rechts">
</frameset>
</frameset>
</html>

Zuerst sind es zwei Zeilen. Die untere ist aber kein normales Frame, sondern ein weiteres Frameset, welches sich in 2 Spalten aufteilt! Beide Framesets müssen mit </frameset> ausgeschaltet werden (häufiger Fehler)!

Am Ende zeige ich dir noch kurz, wie du auf Browser, die keine Frames anzeigen können, Rücksicht nimmst: Notiere im Frameset (vor dem letzten schließenden </frameset>) einen solchen Satz:

<noframes>Dein Browser unterstützt keine Frames!</noframes>

Alle neueren Browser unterstützen natürlich Frames, aber man kann ja nie wissen - sicher ist sicher... Smilie

7.11 Zum Schluss noch eine Abschluss...

...übung! Winken

Du sollst eine kleine Website mit 2 Dokumenten erstellen. Die erste erstellen wir gemeinsam, die zweite und den ebenfalls in der Navigation enthaltenen E-mail - Link fertigst du selber an. Wir verwenden für die Gestaltung unsere "lern.css" - Datei. Für die Zeilenbegrenzung (damit du bei größeren Monitoren / Auflösungen den Text komfortabel lesen kannst, das Auge nicht den ganzen Bildschirm überblicken muss, um den Text zu erfassen) sorgt eine Tabelle. Wir verwenden die serifenlose Schriftart Verdana [ wie schon gesagt bei Websites nur serifenlose Schrift benutzen! ]. OK, dann fangen wir mal an, speichere die Datei unter "uebungswebsite1".html":

[ Übungsseite 1 ] [ Übungsseite 2 ] [ Screenshot Seite 1 ] [ Screenshot Seite 2 ]

<html>
<head>
<title>Unsere erste Website</title>
<link rel="stylesheet" type="text/css" href="lern.css">
</head>
<body>

<table style="width: 700px;">
<tr>
<td>

<p><span class="aktiv">Home</span> - <a href="uebungswebsite2.html">Über mich</a> - <a href="mailto:deineemail@adresse.de">Kontakt</a></p>

<h1>Willkommen!</h1>
<p>Ich finde es super, dass du meine Homepage besuchst! Hier habe ich einige Informationen über mich bereitgestellt!</p>

<h2>Was gibt es hier alles?</h2>
<p>Sieh dich ruhig ein wenig um! Ich würde mich auch über eine E-mail von dir freuen...</p>

</td>
</tr>
</table>

</body>
</html>

Du musst den Inhalt und die Struktur natürlich nicht von mir übernehmen - fertige am besten selber solch einen geschwollenen Text an. Verwende deine E-mail Adresse und poliere den Link ein wenig auf (mit Kurz - Info beim Darüberfahren und Betreff). Die 2. Seite namens "uebungswebsite2.html" soll vom Aufbau (Navigation und aktuelle Seite mit <span> vorgehoben) gleich sein, beim Inhalt sind dir keine Grenzen gesetzt. Du kannst gerne noch mehr Rubriken einbauen. Auch das Verändern der CSS - Datei ist nicht verboten..... Smilie

7.12 Der Kurs ist zu Ende...

"Das reicht!" habe ich mir gedacht, es gibt zwar noch viele (sinnvolle) Frame - Attribute, auch sind wir auf unzählige HTML - und CSS - Attribute und Eigenschaften nicht eingegangen, aber ich denke dir wurde ein Einstieg in HTML und CSS ermöglicht. Wenn du etwas nicht verstehst, Verbesserungsvorschläge, Lob oder Kritik hast, schreibe mir eine E-mail, oder poste dein Anliegen in die Comments! Noch ein schöner Screenshot aus Word, mit welchem ich den Kurs geschrieben habe (und nachher alle Anführungszeichen ändern durfte!) - zur Zeitenzahl ist zu sagen, dass ich die Schriftart Arial in 10 Punkt verwendet habe... >>> Bild <<<

Ach, was ich noch vergessen habe:

Vielen Dank fürs Lesen! UND: Nicht die gute Bewertung und den kostruktiven Kommentar vergessen... Smilie

Anzeige · **Verfasst am:** 23.11.2006, 23:33 **Titel:** Anzeige

HTML Teil2