Tutorial zur Verwendung des Frameset-Tags in HTML

Frameset-Seiten unterscheiden sich etwas von normalen Webseiten. Obwohl es immer noch mit <HTML> und dem <HEAD>-Tag beginnt, das den Titel und andere Skripte enthält, stellt sein Inhalt nur das Layout-Design jeder Seite dar. Daher ist kein <BODY>-Element mehr erforderlich, sondern nur noch ein <frameset>-Tag.

Attributeinführung
Rahmen: Legt die Randstärke des Rahmens fest.

bordercolor: Legt die Rahmenfarbe des Rahmens fest.

Frameborder: Legen Sie fest, ob der Frame-Rand angezeigt werden soll. Die Einstellwerte sind nur 0 und 1; 0 bedeutet kein Rand, 1 bedeutet, den Rand anzuzeigen.

cols: Teilt die Seite vertikal. Es gibt drei Möglichkeiten, den Wert auszudrücken: „30 %, 30 (oder 30px)“; die Anzahl der Werte stellt die Anzahl der Fenster dar und die Werte sind durch „“, getrennt. „30 %“ bedeutet, dass der Rahmenbereich 30 % der gesamten Browserseitenfläche einnimmt; „30“ bedeutet, dass die horizontale Breite des Bereichs 30 Pixel beträgt; „“ bedeutet, dass der Bereich den verbleibenden Seitenraum einnimmt. Beispiel: cols="25%,200,*" bedeutet, dass die Seite in drei Teile unterteilt ist, der linke Teil 25 % der Seite einnimmt, die horizontale Breite in der Mitte 200 Pixel beträgt und der Rest der Seite der rechte Teil ist.

Zeilen: Seite horizontal unterteilen. Die numerische Darstellungsmethode und Bedeutung sind dieselben wie in den Spalten.

Framespacing: Legen Sie den Leerraum zwischen den Frames fest.

Verwendung
Schauen wir uns diesen Code an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< Rahmensatz Zeilen = "*" spalten = "180,*" Rahmenrand = 0 Grenze = 0 >
< Rahmen src = "links.html" scrollen = "nein" noresize > </ frame >
< Rahmen src = "main.html" Name = "Haupt" > </ Rahmen >
</frameset>

Dieser Code bedeutet: Es wird ein zweispaltiges Frameset gesetzt, die Breite der linken Spalte beträgt 180px und noresize bedeutet, dass die Breite fix bleibt.

Wie verwenden Sie also die Rahmennavigation, um zu einem bestimmten Abschnitt zu springen? Der folgende Code stellt den Navigationsrahmen auf der linken Seite dar:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< html >
<Kopf>
< Meta Zeichensatz = "utf-8" >
</ Kopf >
< Textkörper Hintergrundfarbe = "#ffffd2" >
<ul>
< li > < ein href = "./reg.html" target = "main" > Benutzer registrieren </ a > </ li >
< li > < ein href = "./main.html" target = "main" > Zurück zur Startseite </ a > </ li >
<ul>
</ Körper >
</ html >

Diese Links zielen auf den zweiten Frame. Der zweite Frame zeigt das verknüpfte Dokument. Ein Navigationsrahmen, in dem Links auf bestimmte Abschnitte in der Zieldatei verweisen.

Schauen wir uns dieses Beispiel genauer an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "de" >
<Kopf>
< Meta http-equiv = "Inhaltstyp" Inhalt = "Text/HTML; Zeichensatz=UTF-8" >
< Titel > Haorooms Blog-Frame-Standard - Demo </Titel>
</ Kopf >
< Rahmensatz Zeile = "180,*" >
< Rahmen Name = "oberster Rahmen" src = "topframe.html" />
< Rahmensatz Spalten = "50%,50%" >
< Rahmen src = "links.html" Name = "linker Rahmen" />
< Rahmen src = "rechts.html" Name = "rechterRahmen" />
</frameset>
</frameset>
</ html >

Das Layout und die Effekte jedes Teils des Auswahlbereichs mithilfe von js sind wie folgt:
2016530120259070.png (799×559)

<<: Beispiel für die Validierung eines JavaScript-Formulars

>>: So verwenden Sie Portainer zum Erstellen einer visuellen Schnittstelle für Docker

Tutorial zur Verwendung des Frameset-Tags in HTML

HTML-Code für Multiheader-Tabellen

So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)

Beispielcode zur Implementierung des Schaltflächeneffekts „Wassertropfen-Wellenanimation“ mit CSS+JS

Ein kurzer Überblick über CSS3-Pseudoklassenselektoren

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

Artikel empfehlen

Zentrieren des Formulars in HTML

Analyse des Docker-Image-Erstellungsprinzips (Sie können ein Image erstellen, ohne Docker zu installieren)

Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters

Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden

Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher

JavaScript-Flusskontrolle (Schleife)

Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript

Analyse der Verwendung von Schleifenanweisungen (WHILE, REPEAT und LOOP) in gespeicherten MySQL-Prozeduren

Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).

Die MySQL-ID beginnt von 1 zu steigen, um das Problem der diskontinuierlichen ID schnell zu lösen

Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker

So binden Sie einen Domänennamen an den Nginx-Dienst

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Vue implementiert Chat-Schnittstelle

So stellen Sie die MySQL5.7-Kodierung auf utf8mb4 ein