Hilfreiche Ratschläge

So erstellen Sie schwebende Frames in HTML

Pin
Send
Share
Send
Send


Sicher haben Sie schon mehr als einmal von einem Konzept wie Frames gehört. Sie können in jedem HTML-Tutorial darüber lesen sowie in Ressourcen zum Erstellen von Websites. Nachdem ich viele Beispiele und Beschreibungen studiert hatte, beschloss ich, alles über Frames in meinen eigenen Worten in einer sehr einfachen Form zu erzählen. Die Vor- und Nachteile sowie zukünftige Rahmen werden ganz unten auf dieser Seite erläutert. Was genau sind Frames in HTML?

Was sind Frames in HTML

Seien Sie nicht beunruhigt, dass dies ein wenig unverständlich klingt. Lassen Sie uns sofort das einfachste Beispiel geben, und dann wird alles klar.

Öffnen Sie die Hilfe in einem beliebigen Programm (es kann sich um einen Notizblock, eine Art Programm, einen Browser usw. handeln). Fast immer sehen Sie eine Hilfe, die aus zwei Teilen besteht (Navigation links, Inhalt rechts). Der linke und der rechte Teil sind nur separate Rahmen. Unten sehen Sie einen Screenshot, der mithilfe des gewöhnlichen Windows-Notizblocks erstellt wurde:

Was Sie sehen, ist eine Webseite, die aus zwei unabhängigen Frames besteht. Hier ist ein HTML-Beispielcode für einen solchen Frame aus einer Hilfe.

Beispiel mit Frames Nr. 1 (Hilfe machen)

Im obigen Framework sieht die oben beschriebene Hilfe folgendermaßen aus:

Das Unterteilen einer Seite in Bereiche mithilfe von Frames ist dem HTML-Tabellenlayout sehr ähnlich (siehe HTML-Tabellen-Tag). Beispielcode für eine solche Seite könnte folgendermaßen aussehen:

Erklärung zum Beispiel Nr. 1

Wie Sie dem obigen Code entnehmen können, ist eine aus Frames erstellte Seite einer normalen HTML-Seite sehr ähnlich: Es gibt ein HTML-Tag, einen Abschnitt und einen Titel zum Öffnen, aber es gibt einen großen Unterschied. Sie haben wahrscheinlich bemerkt, dass das Body-Tag, das für den Hauptteil der Seite verantwortlich ist, fehlt. Stattdessen wird ein Tag eingefügt, das für den Hauptteil der Seite verantwortlich ist. Dieses Tag weist zwei Attribute auf: cols = "25%, 75%". Dies bedeutet, dass der gesamte Textkörper der Seite vertikal in zwei Bereiche im Verhältnis 1: 3 aufgeteilt wird. Der erste Bereich nimmt 25% der Breite des gesamten Bildschirms ein (er hat das erste Bild menu.html), der zweite Bereich 75% der Breite des gesamten Bildschirms (er hat den zweiten Bildinhalt.html).

Das letzte völlig optionale Tag ist dieses. Es wird für Browser benötigt, die keine Frames unterstützen. Wenn der Browser keine Frames unterstützt, wird empfohlen, den Benutzer höflich über dieses Tag zu informieren.

Beachten Sie übrigens, dass das Tag kein schließendes Tag benötigt.

Hoffe, Sie haben jetzt ein Verständnis für Frames. Um schwierigere Beispiele zu verstehen, erstellen wir eine einfache HTML-Seite, die aus 4 Frames besteht. Dies wird Beispiel Nummer 2 sein.

Beispiel mit 4 Bildern Nr. 2

Rahmen zum Beispiel 2:

Der Code für die ursprüngliche HTML-Frameseite lautet wie folgt:

Top.html Dateicode

Datei-Code Menu.html

Content.html File Code

Code für about-site.html

Code about-autor.html Datei

Footer.html-Dateicode

Erklärung zum Beispiel Nr. 2

Zunächst wird die gesamte Seite horizontal in drei Bereiche im Verhältnis 3: 14: 3 unterteilt. Verantwortlich dafür ist das Attribut rows = "15%, 70%, 15%". Der erste Frame in unserem Beispiel ist der Header (wir haben ihn top.html genannt), 15% der Höhe sind ihm zugeordnet. Als nächstes kommt ein großer Rahmen, der 70% der Höhe einnimmt. Wir teilen es in zwei Teile unter Verwendung von cols = "25%, 75%" in einem Verhältnis von 1: 3. Links ist der Frame menu.html, rechts ist content.html. Wir haben speziell den zweiten Frame-Namen "main" genannt, um die Seiten zu wechseln. Bitte beachten Sie, dass in der Datei menu.html jedem Link das Attribut target = "main" zugewiesen ist. Auf diese Weise können Sie Elemente in den Bereich main laden, wenn Sie auf diesen Link klicken. Am unteren Rand der Site befindet sich der letzte Frame footer.html.

Wenn Sie Beispiel Nr. 2 implementieren, sollten Sie diese HTML-Seite in ihrem ursprünglichen Zustand erhalten:

Wenn Sie zu der Seite über die Site gehen, sieht die Seite folgendermaßen aus:

Wenn Sie zur Autorenseite gehen, sehen Sie Folgendes:

Das Tag wird benötigt, um einen externen Frame auf der Seite einzufügen. Ein typisches Beispiel wäre der Videocode von youtube. Das Format dieses Tags sieht sehr einfach aus:

Die optionalen Attribute dieses Tags sind w und height = "height" und das erforderliche Attribut src = "https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0% "B5% D1% 81% 20% D1% 84% D1% 80% D0% B5% D0% B9% D0% BC% D0% B0."

Tag-Attribute und Eigenschaften

1. Attribut COLS = "Parameter"
Gibt die Anzahl der vertikalen Seitenumbrüche an.

2. Attribut ROWS = "Parameter"
Gibt die Anzahl der horizontalen Seitenumbrüche an.

Nun werden wir uns überlegen, wie die Parameter der Partition eingestellt werden.

a) Verwenden einer Zahl, die der Anzahl der Pixel entspricht. Zum Beispiel legt cols = "100,100,300" fest, dass die Seite in drei Bereiche unterteilt wird, deren Breite jeweils 100 Pixel, 100 Pixel und 300 Pixel beträgt.

b) Mit Prozent der Gesamtbreite / -höhe. In den obigen Beispielen haben wir die prozentuale Partitionierung verwendet, daher erscheint es sinnlos, ein Beispiel anzugeben.

c) Mit * (Sternchen). Zum Beispiel definiert cols = "2 *, 3 *, 100" die ersten beiden Bereiche in einem Verhältnis von 2: 3, und der dritte Bereich ist 100 Pixel breit.

Alle drei Methoden können kombiniert werden. Zum Beispiel cols = "2 *, 100,15%, 4 *".

3. Attribut Frameborder = ""
Bestimmt, ob ein Frame einen Frame hat. Wenn die Antwort Ja lautet, ist das nächste vierte Randattribut gültig.

4. Attribut border = "parameter"
In Pixel legt border die Stärke des Strichs des Frame-Bereichs fest. Beispielsweise definiert Frameborder = "2" einen Bereich mit einem ausgewählten Umriss von 2 Pixeln.

5. Das Attribut bordercolor = "color"
Definiert die Farbe des Rahmens, falls vorhanden. Die Farbe kann sowohl in Worten als auch im Code eingestellt werden (siehe HTML-Farbpalette).

Hinweis: Beachten Sie, dass das Tag ein schließendes Tag benötigt.

Die Vorteile von Frames

  • Die Möglichkeit, mehrere Seiten unabhängig voneinander in einem Fenster anzuzeigen (Beispiel 1 und 2 oben),
  • Die Möglichkeit, den Seiteninhalt zu wechseln, ohne die Seite neu zu laden (nur ein Bereich des Bildschirms ändert sich),
  • Die Möglichkeit, die Site-Struktur flexibel zu gestalten (Kopfzeile, Menü, Fußzeile usw. - alle statischen Informationen werden separat in Dateien gespeichert, sodass Sie einen Teil der Site schnell bearbeiten können).
  • Der Benutzer kann die Größe des Anzeigebereichs selbst ändern, wenn die Option "Größe ändern" nicht aktiviert ist.

Nachteile von Frames

  • Suchmaschinen indizieren Websites schlecht nach Frames, da sie hochgeladene Dateien in Frames nicht interpretieren können. Die Suchmaschine unterscheidet Seiten nach ihrer Adresse (URL) und bei Frames ändert sich die Seitenadresse trotz unterschiedlicher Zustände nicht. Dies verstößt gegen die Regeln der Suchmaschine und daher nicht gegen die Tatsache, dass die Suchmaschine die Website indizieren kann.
  • Es ist nicht möglich, die Site mit einem Lesezeichen für Frames zu versehen, da Die Seiten-URL ist identisch. Sie können also nur den ursprünglichen Zustand des Rahmens speichern.
  • Nicht alle Browser unterstützen Frames.

Die Zukunft der Rahmen:
Viele Webmaster haben bereits begonnen, Frames abzulehnen. Dies ist auf die Schwierigkeiten bei der Werbung in Suchmaschinen zurückzuführen. Jetzt zieht jeder nach Ajax, um Informationen auf einer Seite der Website dynamischer und moderner darzustellen.

Sehr geehrter Leser, wir haben die HTML-Tags des Dokuments in Bezug auf Frames überprüft. Trotz der zweifelhaften Zukunft dieses Trends sollte jeder Webmaster über Frames Bescheid wissen.

Link zur nächsten Lektion: Lektion 12. CSS-Positionseigenschaft

Verwenden von Tag A zum Laden in einen Frame

Verwenden eines Hyperlink-Tags Sie können ein Dokument in einem bestimmten Frame laden.

Href. Gibt die URL oder den Namen des neuen Dokuments an, das Sie in ein bestimmtes Frame-Fenster laden möchten.

Ziel. Definiert den Namen des Frames, in den das neue Dokument geladen wird. Dieser Name muss dem Frame mit dem NAME-Attribut im Tag zugewiesen werden.

Im folgenden Beispiel ist der Bildschirm in zwei vertikale Bereiche unterteilt. Das Inhaltsverzeichnis befindet sich im kleineren linken Teil, und alle anderen HTML-Dokumente werden im rechten geladen. Das Inhaltsverzeichnis enthält einfache Text-Hyperlinks zu den entsprechenden Abschnitten. Damit alles funktioniert, müssen Sie HTML-Dokumente in den Dateien cosm.htm, eat.htm, perf.htm, massage.htm und manic.htm erstellen.

Das Tag beseitigt die Notwendigkeit, das TARGET-Attribut in jedem einzelnen Hyperlink zu wiederholen, wenn alle auf dasselbe Frame-Fenster zeigen. Dazu setzen Sie das Tag mit dem Attribut TARGET in den Container ....

Mit dem Tag können Sie das Inhaltsverzeichnis left.htm des vorherigen Beispiels verkleinern.

Attribut Ziel Jeder spezifische Link wird durch das gleichnamige Tag-Attribut ersetzt.

Spezialeffekte, die mit dem Attribut TARGET erzielt werden

Wie bereits erwähnt, dürfen Frame-Namen nicht mit einem Unterstrich beginnen, da Service-Namen damit beginnen, die bestimmte Informationen an den Browser übermitteln. Es folgen spezielle Namen, mit denen jeweils ein bestimmter Effekt erzielt wird.

TARGET = "_ blank". Das Dokument wird in ein neues Browserfenster geladen.

TARGET = "_ self". Das Dokument wird in das aktuelle Fenster geladen.

TARGET = "_ Eltern". Das Dokument wird in den übergeordneten Frame geladen. Normalerweise ist dies ein Frame im Container ... vor dem aktuellen. Wenn es keinen übergeordneten Frame gibt, wird der Wert "_parent" identisch mit "_self".

TARGET = "_ top". Das Dokument wird in den obersten Frame geladen.

Grundsätzlich sind diese Dienstnamen so konzipiert, dass sie auf die eine oder andere Weise aus der aktuellen Rahmenstruktur „ausbrechen“. Experimentieren Sie mit ihnen, um zu verstehen, wie Dokumente in verschiedene Fenster geladen werden können.

HTML 4.0 führt schwebende (oder eingebettete) Frames ein. Mit einem Tag können Sie einen Frame in ein normales HTML-Dokument einfügen. Und der Container ... wird hier nicht benötigt.

Das schließende Tag ist erforderlich!

ALING. Definiert die Art der Ausrichtung. Es nimmt die Werte "left", "center", "right" an.

HÖHE. Definiert die Höhe des Rahmens in Pixel.

WIDTH. Definiert die Breite des Rahmens in Pixel.

SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME. Ähnlich wie die zuvor diskutierten.

vspase. Legt Ränder oberhalb und unterhalb von außerhalb von iframe fest

hspase. Legt die Seitenränder außerhalb des Iframes fest

Randbreite. Legt fest, wie stark die Einrückung am linken und rechten Rand innerhalb des Iframes größer oder gleich 1 sein soll.

Randhöhe. Bestimmt den Grad der Einrückung entlang der oberen und unteren Kante innerhalb des Iframes, der größer oder gleich 1 sein sollte.

Scrollen. Gibt an, ob die Bildlaufleiste im Iframe angezeigt wird, der Wert kann "yes", "no" oder "auto" sein. Der Standardwert für reguläre Dokumente ist auto.

Titel. Tooltip-Text.

Legt fest, was im Browserfenster angezeigt wird, wenn es keine Frames unterstützt.

Das Problem der Adressleiste mit der Rahmenstruktur der Site

Bei der Verwendung von Frames auf der Site wird eine Seite verwendet, die die Position der Frames angibt.

Hier ist ein Beispiel für eine solche Seite:

Nach dem Laden dieser Seite werden Informationen in Frames geladen. Innerhalb dieser Frames treten alle Benutzer-Klicks auf den Seiten der Site auf. In der Adressleiste wird immer nur der Pfad zur Startseite angezeigt, der sich bei Übergängen nicht ändert. Der Besucher weiß nicht, wo er sich gerade befindet.

Wenn ein Besucher nicht sofort zur Hauptseite der Site gelangt (z. B. von einer Suchmaschine), führt dies nicht zu einer Rekonstruktion der gesamten Frame-Struktur. Aus diesem Grund kann der Websitebesitzer die Adresse nicht auf der internen Seite der Website angeben.

Es gibt verschiedene Lösungen für dieses Problem.

Zuvor war der Ball ein Beispiel für eine Rahmenstruktur. Wir werden verschiedene Möglichkeiten in Betracht ziehen, um dieses Problem zu lösen.

Die Idee ist folgende: Beim Laden einer Seite, die einen Informationsteil enthält, überprüfen wir die Umgebung der Seite und erstellen sie mithilfe eines Skripts, wenn die erforderliche Rahmenstruktur fehlt.

Drei Fälle sind möglich:

  1. der Besucher ging auf die Seite mit der Rahmenstruktur,
  2. der Besucher ging auf eine der Informationsseiten,
  3. Der Besucher gelangte auf die Seite mit dem Navigationsmenü.

Im ersten Fall ist nach der Überprüfung keine Aktion erforderlich. Der zweite und der dritte Fall sind fast identisch, daher werden wir im Folgenden nur den zweiten Fall betrachten.

Und so bekommt der Besucher "wo es nicht nötig ist". Fügen Sie ganz oben auf der Seite das Skript ein, mit dem die Rahmenstruktur erstellt wird.

Die Implementierung der Lösung ist sowohl clientseitig als auch serverseitig möglich. Der Hauptnachteil der clientseitigen Implementierung liegt auf der Hand - die Abhängigkeit von den Fähigkeiten und Einstellungen des Clients. Beispielsweise ist das Schreiben von Skripten auf dem Computer des Benutzers verboten. Die zweite Option funktioniert nicht, wenn der Server keine Unterstützung bietet Php.

JavaScript-Lösung.

Bei diesem Ansatz gibt es eine Einschränkung - nicht alle Browser unterstützen ihn JavascriptIn einigen Fällen deaktivieren Benutzer selbst Skripts.

Überprüfen Sie zunächst die Umgebung der Seite und erstellen Sie sie dann, wenn die erforderliche Rahmenstruktur fehlt.

Erstellen Sie eine Datei frame.js:

Zuerst überprüfen wir den Namen des Fensters, in das die Seite geladen wird: if (window.name! = "main"). Wenn der Fenstername und der Frame-Name nicht übereinstimmen, müssen Sie eine Frame-Struktur erstellen. Dies geschieht dynamisch mit der Methode schreiben Einrichtung dokumentieren.

Wir verbinden eine Datei mit jeder Seite der Site frame.js. Nun haben die Seiten der Site die folgende Struktur:

Mit diesem Lösungsansatz für dieses Problem entfällt die Notwendigkeit einer Datei mit einer Rahmenstruktur.

PHP-Lösung

Mit diesem Ansatz wird die Website mehr Besuchern zur Verfügung stehen.

Wir werden die Umgebung der Seite anders prüfen (nicht wie bei der Verwendung Javascript) Wir laden das Dokument mit dem Parameter in den Frame Frames = Ja. Beim Öffnen der Seite überprüfen wir diesen Parameter und erstellen bei Bedarf dynamisch eine Rahmenstruktur. Unten ist der Code, der dafür verantwortlich ist.

Fügen Sie den Code in eine Datei ein frames.php. Jetzt müssen Sie es mit jeder Seite der Site verbinden. Unten sehen Sie ein Beispiel für eine solche Seite.

In diesem Fall muss wie bei der clientseitigen Implementierung keine separate Erstellung erfolgen HTML Dokument zur Beschreibung der Rahmenstruktur.

Rahmenerstellung

Die Struktur eines HTML-Dokuments mit Frames ähnelt stark dem Format eines normalen HTML-Dokuments. Wie in einem normalen HTML-Dokument wird der gesamte Code zwischen Pairing und Tags platziert, und die Überschriften befinden sich im Container. Der Hauptunterschied zwischen einem Dokument mit Frames und einem regulären HTML-Dokument besteht darin, dass ein Dokument mit Frames ein gepaartes Tag anstelle eines Tags verwendet (aus der englischen Framesammlung - einer Framesammlung).
Das folgende Beispiel zeigt die Struktur eines HTML-Dokuments mit Frames:

Beispiel: Aufbau eines HTML-Dokuments mit Frames

frame_left

Im obigen Beispiel enthält die Seite drei Bereiche, in denen zunächst jeweils die HTML-Dokumente frame_top.html, frame_left.html und frame_right.html geladen werden. Ein Frame kann neben HTML-Dokumenten auch Grafiken enthalten. Geben Sie dazu im Attribut die Adresse des entsprechenden Bildes an srczum beispiel src = "http://wm-school.ru/html/image.gif". Beachten Sie, dass das Element ohne schließendes Tag verwendet wird.
In einem Container können nur Tags oder andere Frames enthalten sein, die von einem Container abgedeckt werden.
Das Tag weist die folgenden Attribute auf:

  • Reihen - beschreibt die Aufteilung der Seite in Zeilen:
  • cols - beschreibt die Aufteilung der Seite in Spalten:
Die Bereiche, die sich aus dieser Paginierung ergeben, sind Frames. Das Fehlen dieser Attribute definiert einen Frame, der das gesamte Browserfenster einnimmt.

Im Attributwert Reihen und cols Es muss nicht die Anzahl der Zeilen oder Spalten angegeben werden, sondern der Wert für die Breite und Höhe der Frames. Alle Werte in der Liste sind durch Kommas getrennt. Abmessungen können in absoluten Einheiten (in Pixel) oder als Prozentsatz angegeben werden:

  • cols = 20%, 80% - Das Browserfenster ist über das Attribut in zwei Spalten unterteilt colsnimmt die linke Spalte 20% und die rechte 80% des Browserfensters ein.
  • Zeilen = "100, *" Das Browserfenster wird mit dem Attribut in zwei horizontale Fenster unterteilt Reihen, das obere Fenster ist 100 Pixel und das untere ist der verbleibende Platz, der durch das Sternsymbol angegeben wird.

Wie Sie diesem Beispiel entnehmen können, der Container mit dem Attribut Reihen Mit first werden zwei horizontale Frames erstellt, und anstelle des zweiten Frames wird ein weiterer Frame ersetzt, der den unteren horizontalen Frame mithilfe des Attributs in zwei Spalten aufteilt colsnimmt die linke Spalte 20% und die rechte 80% des Browserfensters ein.
Wenn der Browser keine Frames unterstützt, wird der Text zwischen den Tags und im Fenster angezeigt. Alles zwischen Tags und wird von Browsern, die Frames unterstützen, ignoriert. Daher muss der Entwickler Code schreiben, der den Inhalt der Frames auf andere Weise dupliziert, und diesen Code in den Container einfügen, damit alle Benutzer seine Webseite sehen können.
Wie bereits erwähnt, wird ein nicht gepaartes Tag verwendet, um einen separaten Rahmen in das Dokument einzufügen. Attribut src Gibt das Dokument an, das in diesem Rahmen angezeigt werden soll, z. Wenn das Attribut src fehlt, wird ein leerer Rahmen angezeigt.

Rahmen oder Leerzeichen zwischen Frames

Standardmäßig zeigt der Browser einen grauen und in der Regel dreidimensionalen Linienrand zwischen Frames an, mit dem Besucher die Größe des Frames anpassen können.
Der Rahmenrand kann wie jedes andere Rahmenelement gesteuert werden. Zu diesem Zweck gibt es mehrere Elementattribute, mit denen Sie die Rahmengrenzen anpassen können. Die Dicke der Begrenzungslinie wird durch das Attribut bestimmt Grenze. Standardmäßig beträgt die Randstärke fünf.
Um den Rahmenrahmen auszublenden, müssen Sie entweder den Wert für die Rahmenbreite gleich Null angeben oder dem Attribut den Wert „no“ oder „0“ zuweisen Rahmenrand. Attribut Rahmenrand kann nur zwei entgegengesetzte Werte annehmen. Wenn der Attributwert Rahmenrand gleich "ja" oder "1", dann wird der Rahmen der Frames angezeigt, und wenn "0" oder "nein", dann nein. Beachten Sie die Attributwerte Rahmenrand variieren für verschiedene Browser. Verwenden Sie das Attribut zweimal, um dieses Problem zu beheben Rahmenrand, und für einige Browser müssen Sie das Attribut noch hinzufügen Framespacing mit einem Wert von "0":

Im folgenden Beispiel entfernen wir die Grenze zwischen Frames:

Sehen Sie sich das Video an: Zimmerer JJWS Schwebender Dachstuhl Tag der offenen Tür 2013 (Juni 2022).

Pin
Send
Share
Send
Send