HTML-Framework_Powernode Java Academy

HTML-Framework_Powernode Java Academy

1. Rahmen

In einem Browser-Dokumentfenster kann nur eine Webseitendatei angezeigt werden. Durch die Verwendung von Frames können jedoch mehrere Seiten im selben Browserfenster angezeigt werden. Eine Seite, die einen Frame verwendet, besteht hauptsächlich aus zwei Teilen: Einer ist der Frame-Satz und der andere ist die spezifische Frame-Datei.

Frameworks werden meist für das Layout von Website-Backends oder Intranet-Systemen verwendet.

1. Frameset (<frameset></frameset>): Dies ist eine Datei, mit der dieses HTML-Dokument als Frame-Modus definiert und die Fensteraufteilung festgelegt wird. Vereinfacht ausgedrückt ist ein Frameset eine Datei, die die Framework-Struktur speichert und zugleich die Einstiegsdatei für den Zugriff auf die Framework-Datei darstellt. Besteht eine Webseite aus zwei Frames links und rechts, so existiert neben den beiden Webseitendateien links und rechts noch eine Gesamtframeset-Datei. Auf einer Seite, die Frames verwendet, wird das <body>-Tag durch das Frame-Tag <frameset> ersetzt. Jeder in der Frame-Seite enthaltene Frame wird durch das Tag <frame> definiert.

Zeilenattribut: Fenster horizontal teilen. Die horizontal geteilte Fensterfunktion schneidet die Seite horizontal, das heißt, sie teilt die Seite in mehrere vertikal angeordnete Fenster auf. Zeilen können mehrere Werte annehmen, jeder Wert stellt die horizontale Breite eines Rahmenfensters dar und seine Einheit kann Pixel oder ein Prozentsatz des Browsers sein. Dabei ist allerdings zu beachten, dass grundsätzlich beim Setzen von mehreren Zeilenwerten mehrere Frames benötigt werden, also entsprechend viele <frame>-Parameter notwendig sind.

  <html>
  
  <Kopf>
  
  <title>Der Effekt eines horizontal geteilten Fensters</title>
  
  </Kopf>
  
 <frameset rows="30%,70%">
 
     <Rahmen>
 
     <Rahmen>
 
 </frameset>
 
 </html>

cols-Attribut: Fenster vertikal teilen. Vertikales Aufteilen von Fenstern bedeutet, die Seite entlang der vertikalen Richtung in mehrere Fenster aufzuteilen, d. h. die Seite in mehrere links und rechts angeordnete Fenster zu unterteilen. Spalten können mehrere Werte annehmen, jeder Wert stellt die horizontale Breite eines Rahmenfensters dar und die Einheit kann Pixel oder ein Prozentsatz des Browsers sein. Ähnlich wie bei der horizontalen Aufteilung von Fenstern gilt im Allgemeinen: Wenn Sie mehrere Spaltenwerte festlegen, benötigen Sie mehrere Frames, also mehrere <frame>-Parameter.

  <html>
  
  <Kopf>
  
  <title>Der Effekt der vertikalen Teilung des Fensters</title>
  
  </Kopf>
  
<frameset cols="20%,55%,25%">
 
     <Rahmen>
 
     <Rahmen>
 
     <Rahmen>
 
 </frameset>
 
 </html>

Frameborder-Attribut: Legt den Rahmen fest. Standardmäßig ist das Rahmenfenster von einer Rahmenlinie umgeben. Die Anzeige der Rahmenlinie kann über den Parameter frameborder angepasst werden. Die Syntax lautet:

<frameset frameborder="Ob angezeigt werden soll"> oder <frame frameborder="Ob angezeigt werden soll">. Der Wert von Frameborder kann nur 0 oder 1 sein. Wenn der Wert 0 ist, wird der Rand ausgeblendet, wenn der Wert 1 ist, wird der Rand angezeigt. Die Einstellung im Frameset wirkt sich auf den gesamten Frame aus, während die Einstellung im Frame nur auf den aktuellen Frame wirkt.

  <html>
  
  <Kopf>
  
  <title>Stellen Sie den Randanzeigeeffekt des Rahmenfensters ein</title>
  
  </Kopf>
  
  <Frameset-Zeilen="20%,55%,25%">
 
 <Rahmen Rahmenrand="1">
 
 <frameset cols="35%,65%" frameborder="0">
 
 <Rahmen>
 
 <Rahmen>
 
 </frameset>
 
 <frame frameborder="0">
 
 </frameset>
 
 </html>

Framespacing-Attribut: die Rahmenbreite des Rahmens. Die Rahmenbreite beträgt standardmäßig 1 Pixel und kann über den Parameter „Framespacing“ angepasst werden.

Syntax: <frameset framespacing="Rahmenbreite">

Hinweis: Die Rahmenbreite ist die Breite der Linien zwischen den Rahmen auf der Seite, gemessen in Pixeln. Dieser Parameter kann nur für Frame-Sets verwendet werden und ist für einzelne Frames ungültig.

  <html>
  
  <Kopf>
  
  <title>Stellen Sie die Rahmenbreite ein</title>
  
  </Kopf>
  
 <frameset rows="30%,70%" framespacing="10">

     <Rahmen>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <Rahmen>
 
         <Rahmen>
 
         <Rahmen>
 
       </frameset>
 
 </frameset>
 
 </html>

Bordercolor-Attribut: die Rahmenfarbe des Rahmens. Mit dem Parameter bordercolor können Sie die Rahmenfarbe des Rahmensatzes festlegen.

Syntax: <frameset bordercolor="Farbcode">

Hinweis: Auch dieser Parameter ist nur für das gesamte Frameset gültig, nicht für ein einzelnes Frame.

  <html>
  
  <Kopf>
  
  <title>Rahmenrandfarbe festlegen</title>
  
  </Kopf>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="CC99FF">
 
     <Rahmen>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="9900FF">
 
         <Rahmen>
 
         <Rahmen>
 
         <Rahmen>
 
       </frameset>
 
 </frameset>
 
 </html>

2. Frame- (<frame>) und src-Attribute.

Jede Seite in der Rahmenstruktur ist ein separater Text und diese Dateien werden über den src-Parameter festgelegt.

Syntax: <frame src="Adresse der Seitenquelldatei">

Hinweis: In der Auslagerungsdatei befindet sich der spezifische Inhalt der Frame-Seite. Bei einem Frame ohne festgelegte Quelldatei handelt es sich lediglich um eine leere Seite und hat keine Auswirkung. Die Quelldatei der Seite kann eine normale HTML-Datei, ein Bild oder eine andere Datei sein.

  <html>
  
  <Kopf>
  
  <title>Seitenquelldatei festlegen</title>
  
  </Kopf>
  
 <frameset rows="30%,70%">
 
     <frame src="bild01.gif">

     <frame src="src01.html">
 
 </frameset>
 
 </html>

3. <noframes></noframes>-Tag

Das Tag <noframes></noframes> wird verwendet, um Seiteninhalte anzuzeigen, wenn der Browser keine Frames unterstützt.

  <html>
 <frameset cols="25%,50%,25%">
    <frame src="/beispiel/html/frame_a.html">
    <frame src="/beispiel/html/frame_b.html">
    <frame src="/beispiel/html/frame_c.html">
  <keine Frames>
  <body>Ihr Browser kann keine Frames verarbeiten! </body>
  </noframes>
  </frameset>
 </html>

2. Schwebender Rahmen (<iframe>)

Ein schwebender Frame ist ein spezieller Frame, der ein untergeordnetes Fenster in einem Browserfenster verschachtelt. Das heißt, die gesamte Seite ist keine Frameseite, sondern enthält ein Framefenster. Anzeige des entsprechenden Seiteninhalts im Rahmenfenster. Schwebende Rahmen werden auch Inline-Rahmen genannt und haben daher ihren Namen.

Syntax: <iframe src="Seitenquelldatei"></iframe>

Hinweis: Ähnlich wie bei gewöhnlichen Rahmenstrukturen können auch schwebende Rahmen viele Parameter festlegen, wie z. B. Name, Bildlauf, Rahmenrand usw. Im Vergleich zu normalen Rahmen enthalten schwebende Rahmen jedoch keine Rahmenabstands- und Rahmenfarbenparameter.

src-Attribut: Der grundlegendste Parameter im Floating Frame ist src. Er wird zum Festlegen der Quelldateiadresse der Floating Frame-Seite verwendet und ist auch ein erforderlicher Parameter für die Floating Frame-Seite. Denn der schwebende Rahmen macht nur dann Sinn, wenn der Inhalt der Quelldatei gesetzt ist. Syntax: <iframe src="Seitenquelle">

Breiten- und Höhenattribute: In einer normalen Rahmenstruktur muss die Größe des Rahmens nicht festgelegt werden, da dieser das gesamte Browserfenster darstellt. Aber im schwebenden Rahmen wird es in eine normale HTML-Seite eingefügt und die Größe des gesamten Rahmens kann angepasst werden. Syntax: <iframe src= src="Floating Frame Page Source File" width="Seitenbreite" height="Seitenhöhe">, die Breiten- und Höhenwerte der Seite sind beide in Pixeln angegeben.

 <html>
 <Text>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>Einige ältere Browser unterstützen keine Iframes. </p>
 <p>Falls nicht unterstützt, ist das Iframe unsichtbar. </p>
 </body>
 </html>

3. Ein Beispiel für ein Rahmenlayout

  <html>
  <Kopf>
      <title>Framework-Hauptseite</title>
  </Kopf>
 <frameset rows="20%,*"><!--Frameset, Container für Steuerdateien-->
      <frame name="topFame" src="3.html" noresize/>
        <frameset cols="240px,*">
            <Framename="linkerFrame" src="1.html"/>

      <Framename="RechterFrame" src="2.html" Randbreite="20px" Scrollen="Nein"/>
             
         </frameset>
        <keine Frames>
        <!--Der Noframes-Tag kann den Body-Tag enthalten-->
         <Text> 
             Diese Seite unterstützt das Frameset-Tag nicht!
         </body>
     </noframes>
  </frameset>
 </html>

4. So verlinken Sie aus dem Frame heraus

Im Hintergrund-Layout von Websites kommen häufiger Frameworks zum Einsatz. In vielen Fällen müssen wir aus dem Rahmen springen und die Seite neu laden. Wie kann der Link also aus dem Rahmen springen? Tatsächlich müssen Sie nur das Zielattribut des Tags <a></a> als „_top“ angeben, um dies zu erreichen. Hier ist ein einfaches Beispiel.

  <html>
  
  <Text>
  
  <p>In einem Rahmen gefangen? </p> 
  
  <a href="/index.html"
  Bitte hier klicken! </a> 
  
 </body>
 </html>

<<:  Übung zum dynamischen Erstellen von Dialogen entsprechend dem Dateinamen in vue+el-element

>>:  Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)

Artikel empfehlen

HTML-Grundlagen: Die grundlegende Struktur von HTML

Die Grundstruktur von HTML-Hypertextdokumenten bes...

Natives JavaScript zur Implementierung einer zufälligen Namensaufruftabelle

In diesem Artikelbeispiel wird der spezifische Co...

Tiefgreifendes Verständnis der Vue-cli4-Routing-Konfiguration

Inhaltsverzeichnis Vorwort - Vue Routing 1. Die g...

Tutorial zu HTML-Tabellen-Tags (20): Zeilenhintergrund-Farbattribut BGCOLOR

Mit dem BGCOLOR-Attribut kann die Hintergrundfarb...

Details zur JS-Array-Deduplizierung

Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

XML-Dateien sollten so weit wie möglich in UTF-8 ...

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Im vorherigen Artikel haben wir drei gängige Meth...

Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite

Hier erfahren Sie, wie Sie nach der Verkleinerung...

Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“

Frage Die feste CSS-Positionierung position:fixed...

CSS Zurück zum Anfang Codebeispiel

Die meisten Websites haben heutzutage lange Seite...

Fehler MySQL-Tabelle 'performance_schema...Lösung

Die Testumgebung ist mit MariaDB 5.7 eingerichtet...

Detaillierte Analyse der MySQL-Indizes

Vorwort Wir wissen, dass die Indexauswahl Aufgabe...

Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts

Szenarioanforderungen 1. Wir können die Skriptfun...

Implementierung von MySQL Multi-version Concurrency Control MVCC

Inhaltsverzeichnis Was ist MVCC MVCC-Implementier...

W3C Tutorial (4): W3C XHTML Aktivitäten

HTML ist eine Hybridsprache, die zum Veröffentlic...