HTML - Einführung Teil 5

  • Mit dem fünften Teil und der Erläuterung zu Frames soll die html-Einführung erstmal beendet werden. Es kann dann prinzipiell jeder eine komplette und auch komplexe Webseite erstellen - die Feinheiten ergeben sich natürlich aus der Realisierung verschiedener Seiten. Frames. Was sind Frames? Das sind unabhängige Teile des partitionierten Browser-Anzeigebereiches. Jeder dieser Bereiche verhält sich eigenständig. Jeder Frame stellt eine htm(l)-Datei dar. Das "Frameset" ist die Aufteilung des Anzeigebereiches, also die Datei, die das Aussehen der zu einer Einheit verknüpften Frames ausmacht und steuert. Es (die frameset-Datei) ist auch die Datei, die KEINEN <body>-Bereich hat, da sie ja eben "nur" das Zusammenspiel und Zusammenwirken der Einzelseiten steuert, selbst also keinen Inhalt aufweist! Wie sieht nun sowas im Detail aus: Um sich leichter in seinen häufig sehr vielen Dateien zu orientieren, nennen wir jetzt in der Startphase die "frameset-Datei" einfach mal "frame.htm". Sie kann natürlich jeden x-beliebigen Namen haben - gar keine Frage. Das Grundgerüst sieht so aus: <br /><br /><html><br /><head><br /><title>Seitentitel - der dann generell gleich bleibt - also sinnvoll zu vergeben!!! </title><br /></head><br /><br /><frameset><br /><br /></frameset><br /><br /></html><br /><br />Anmerkung: Da bei einem frameset ja mehrere Einzelseiten zu einer neuen Einheit geformt werden, und diese dann - in der Regel - durch das ganze Projekt Bestand hat, ist der Seitentitel hier sehr wichtig. Denn er bleibt die gesamte Zeit bestehen (Browsertitelzeile), die Titel der Einzelseiten tauchen NICHT auf. Also bitte Titel wie "Frameseite" (oder so) vermeiden. Jetzt möchte ich mal die Ausgestaltung des <frameset> ein wenig beleuchten. Fangen wir einfach an: 2 senkrechte Dateien (cols = Reihen) sollen das Browserfenster füllen. Links die Navigationsdatei, rechts das Hauptfenster. <br /><br /><frameset cols="200,*" border="0" framespacing="0" frameborder="0"><br /> <frame src="left.htm" name="left" scrolling="no" noresize><br /> <frame src="main.htm" name="main" scrolling="auto"><br /></frameset><br /><br /> Hierbei ist der linke frame 200 Pixel breit, der Rest ist mit "*" definiert, will heißen, der Rest wird ausgefüllt. Immer wenn * gesetzt wird, dann definiert sich dadurch der Teil der Seite, dem kein bester Wert zugeordnet werden soll. Die frames haben keinen Zwischenraum und auch keine Abtrennung, man kann gestalterisch "eine Einheit" schaffen, auch wenn es ja zwei unabhängige Bildteile sind. Unter <frame> wird immer der Einzelteil des <frameset> definiert. Im Beispiel also 2 Teile, die senkrecht angeordnet sind. Man ordnet jedem <frame> die Quelle (src = source) zu, welche Datei geladen werden soll. Im Beispiel im linken Bildteil die Datei "left.htm" (bei der nicht gescrollt werden soll), im rechten Bildteil - als Hauptbereich - die Datei "main.htm". Natürlich ist jeder individuelle Name möglich, wenn die allgemeinen Regeln eingehalten werden. Da ja in einem Frameset durch unterschiedliche Links unterschiedliche Bereiche "angesprungen" werden können (hier der linke Bereich oder der rechte Hauptbereich), ordnet man jedem <frame> auch einen Namen zu, um die dann zu realisieren (hier: name="left" und name="main"). Auch hier ist jeder Name möglich, sollte halt leicht zu merken und kurz sein, um sich selbst die Arbeit zu erleichtern. Bei der Gestaltung der in den frames enthaltenen Dateien muss dann natürlich darauf geachtet werden, dass diese dort auch abgebildet werden können. So wäre im Beispiel die Datei "left.htm" mit einer 300 Pixel breiten Tabelle oder einem 300 Pixel breiten Bild überfordert, da der Bereich ja nur 200 Pixel breit ist. Also immer auf Sinnhaltigkeit der Einzeldateien achten. Soll jetzt aus der Linken Navigationsdatei eine neue Seite im rechten Bereich aufgerufen werden (der meist übliche Fall), dann sieht der Link beispielsweise so aus: <br /><br /><a href="main1.htm" target="main">Linktext</a><br /><br /> Klickt man auf den Link, dann ist die klare Zuordnung gegeben: Die Datei "main1.htm" soll in das Ziel (target) "main" geladen werden. So wird also "main.htm" gegen "main1.htm" ausgetauscht - unser Vorhaben hat geklappt. Würde man den target-Befehl weglassen, dann bleibt man im gleichen frame-Bereich, es würde im Beispiel "left.htm" gegen "main1.htm" ausgetauscht, was wir ja aber nicht wollen. Denn dann wäre unsere Navigation verschwunden und der Haupttext wäre in unserem schmalen Navigationsbereich (200 Pixel). Bitte einfach mal durchspielen, dann wird es am besten klar! Will man das Browserfenster waagerecht aufteilen, dann gilt das gleiche wie oben, lediglich "cols" wird gegen "rows" (Reihen) ausgetauscht. Das Procedere mit target und so bleibt gleich. Nun können aber auch - und da fängt die Vielfältigkeit der Gestaltung ja eigentlich erst wirklich an - die framesets verschachtelt werden. Dabei ist einfach nur logisch vorzugehen und es sollte keine Probleme geben. Will man z. B. 4 frames unterbringen, sollte man sich zuerst überlegen, wie diese aufgeteilt werden sollen. Nehmen wir an: 1 waagerechter Bereich über die gesamte Breite (180 Pixel hoch), darunter 3 senkrechte Bereiche. Diese 3 senkrechten Bereiche sollen folgende Pixel-Breiten haben: 150, Rest, 90. Dann sieht unser verschachteltes frameset wie folgt aus: <br /><br /><frameset rows="180,*" border="0" framespacing="0" frameborder="0"><br /> <frame src="oben.htm" name="top" scrolling="no" noresize><br /> <frameset cols="150,*,90" border="0" framespacing="0"<br />frameborder="0"><br /> <frame src="links.htm" name="left" scrolling="auto"><br /> <frame src="haupt.htm" name="main" scrolling="auto"><br /> <frame src="rechts.htm" name="right" scrolling="auto"><br /> </frameset><br /></frameset><br /><br /> Man teilt also den Anzeigebereich zuerst einmal waagerecht auf, dann wird der untere Bereich senkrecht in die drei Bereiche gegliedert. Es werden also 2 framesets miteinander verschachtelt, um das gewünschte Ergebnis zu erzielen. Bitte immer name="....." nicht vergessen, um dann später das richtige Zielfenster anspringen zu können (möglichst logische Namen vergeben!). Sollte das obige Beispiel auch unten noch einen durchgehenden Bereich haben, so sähe es z. B. so aus: <br /><br /><frameset rows="180,*,50" border="0" framespacing="0" frameborder="0"><br /> <frame src="oben.htm" name="top" scrolling="no" noresize><br /> <frameset cols="150,*,90" border="0" framespacing="0"<br />frameborder="0"><br /> <frame src="links.htm" name="left" scrolling="auto"><br /> <frame src="haupt.htm" name="main" scrolling="auto"><br /> <frame src="rechts.htm" name="right" scrolling="auto"><br /> </frameset><br /> <frame src="unten.htm" name="bottom" scrolling="no" noresize><br /></frameset><br /><br /> Es existieren nun 5 Bereiche: 1 waagerechter - 3 senkrechte - 1 waagerechter. Die beiden waagerechten laufen hierbei über die gesamte Breite. Anmerkung: Man sollte es natürlich nicht übertreiben. Es müssen alle Einzelseiten ja geladen werden, um das komplette Bild zu erzeugen, auch wird es ja irgendwann unübersichtlich und kaum noch nachvollziehbar, wo was passiert. Also 3 bis 5 Bereiche sollten das Optimum bis Maximum sein. Immer auch an den Seitenbesucher (= Kunden, Gast) denken, nicht nur die eigene Kreativität ausleben. Nochmal zum letzten Beispiel: Der obere Bereich ist 180 Pixel hoch, die drei darunter senkrecht angeordneten Bereiche sind (von links) 150, offen und 90 Pixel breit, der untere waagerechte Bereich ist dann 50 Pixel hoch. Dieser komplexe Aufbau ist noch überschaubar und kann sicherlich auch sinnvoll sein. Alle Pixelangaben können natürlich variiert werden, aber bitte die Seiten dann sowohl mit dem Explorer als auch dem Navigator mal ansehen, da es doch ab und an Darstellungsabweichungen gibt. Das Gesagte gilt natürlich nur für frames-Freunde. Diejenigen, die frames für die eigene Seite ablehnen, sind von all dem verschont. Es kann jetzt natürlich vielfältigst verschachtelt werden, und je mehr Bereiche ich habe, um so mehr Möglichkeiten an Verschachtelungen ergeben sich. VIEL SPASS BEIM TÜFTELN! Da ich natürlich nicht alle Möglichkeiten (auch nicht ansatzweise) durchspielen kann - außerdem hätten Sie ja dann nix mehr zu tun - hoffe ich, dass meine Erläuterungen und Ausführungen verständlich sind.