Rammer i HTML er en måde at opdele browservinduet i flere sektioner, som hver kan indlæse og vise et andet HTML-dokument. I denne artikel vil vi se praktiske eksempler på frames i HTML.

Selvom brugen er faldet i de senere år på grund af vedtagelsen af ​​mere moderne og fleksible teknikker, såsom CSS og JavaScript kan stadig findes på nogle websteder, især dem, der blev oprettet i 1990'erne og begyndelsen af ​​1990'erne. det af 2000.

Hvordan fungerer frames eller frames i HTML?

Rammer består af to elementer:

1. Rammesæt: Elementet bruges til at opdele browservinduet i rektangulære sektioner, som hver kan indlæse sit eget HTML-dokument.

2. rammer: Elementet bruges inden for en at definere hver af de enkelte sektioner. Og den sender til kalde et andet dokument, der er indlæst inde i rammesættet.

   instagram story viewer

• Følg med: iFrame eksempler

Sådan laver du rammer i HTML

For at oprette et HTML-dokument med rammer skal du følge to meget enkle trin:

1. Opret et HTML-dokument, der definerer strukturen af ​​rammerne ved hjælp af elementet. For eksempel:

Fil 1: frameset.html

2. Opret et eller flere HTML-dokumenter, der skal indlæses inden for rammerne.

Fil 2: frame1.html

Dette er Frame 1

Fil 3: frame2.html

Dette er Frame 2

Rammeattributter i HTML

Nogle af de vigtigste element egenskaber er:

• rulle: Denne attribut bruges til at styre udseendet af rullepanelerne i rammen. Det kan have værdierne "auto", "ja" eller "nej".

• noresize: Denne attribut bruges til at forhindre brugeren i at ændre størrelsen på rammen.

• yam: Denne attribut bruges til at give rammen et navn, som kan være nyttig til at referere til rammen i links og scripts.

• src: Denne attribut bruges til at angive URL'en på HTML-dokumentet, der skal indlæses i rammen.

• rammekant: Denne attribut angiver, om rammer skal have rammer eller ej. Mulige værdier er "1" (for at vise grænser) eller "0" (for at vise ingen grænser). For eksempel, .

• grænse: Denne egenskab definerer bredden af ​​grænsen mellem rammerne i pixels. For eksempel, vil skabe en 5px kant mellem rammerne.

• rammeafstand: Denne egenskab ligner grænse. Det definerer også mellemrummet mellem rammerne i pixels. For eksempel, indstiller en afstand på 10px mellem billederne.

• kantfarve: Denne attribut giver dig mulighed for at ændre rammernes farve. Enhver gyldig farve kan angives. For eksempel, vil gøre rammerne røde.

Eksempel på brug:

Sådan linker du til en bestemt ramme

Vi kan åbne et link i en bestemt ramme ved hjælp af attributten mål I etiketten. Værdien af mål skal være det samme som rammenavnet (yam egenskab af ). For eksempel:

i menu.html
Side 1
Side 2

I dette tilfælde vil et klik på "Side 1" eller "Side 2"-links i menurammen indlæse den tilsvarende side i "indhold"-rammen.

Sådan knækker du rammerne

Hvis du vil have et link til at åbne en side uden for rammesættet (dvs. erstatte hele rammesættet), kan du bruge den særlige værdi _top for attributten mål. For eksempel:

i menu.html
gå ud af rammer

Når du klikker på "Exit Frames", vil browseren indlæse "pageOutofFrames.html" i det fulde vindue og erstatte rammesættet.

Eksempel på opdeling af skærmen i to kolonner med rammer

Dette eksempel opdeler skærmen i to lige store kolonner. Hver kolonne indlæser en anden HTML-side.

Eksempel på oprettelse af en navigationssidebjælke med rammer

Dette eksempel opretter en sidebjælke, der fylder 25 % af skærmen og bruges til navigation. Resten af ​​skærmen bruges til at vise hovedindholdet.

Eksempel på opdeling af skærmen i rækker og kolonner

Dette mere komplekse eksempel deler skærmen op i fire lige store dele. Hver sektion indlæser en anden HTML-side.

Eksempel på topnavigation med HTML-rammer

Opret en fil, der definerer to rammer i træk. De to filer, den definerer, er: en til navigationen (som fylder 20 % af vinduets bredde) og en til hovedindholdet (som fylder resten af ​​vinduets bredde).

Dernæst skal du oprette filerne "navigation.html" og "content.html". For eksempel kan "navigation.html" se sådan ud:

Side 1

Side 2

Side 3


Og "content.html" kunne være noget som dette:

Velkommen til vores hjemmeside!

Her vil indholdet af den side, der er valgt i navigationen, gå.

I dette tilfælde, når du klikker på et link i "navigation.html", indlæses den tilsvarende side i "indhold"-rammen.