HTML rėmeliai yra būdas padalyti naršyklės langą į kelias dalis, kurių kiekviena gali įkelti ir rodyti skirtingą HTML dokumentą. Šiame straipsnyje pamatysime praktinius HTML rėmelių pavyzdžius.

Nors pastaraisiais metais jo naudojimas sumažėjo dėl modernesnių ir lankstesnių metodų, tokių kaip CSS ir „JavaScript“ vis dar galima rasti kai kuriose svetainėse, ypač sukurtose 1990-aisiais ir 1990-ųjų pradžioje. kad 2000 m.

Kaip rėmeliai arba rėmeliai veikia HTML?

Rėmeliai sudaryti iš dviejų elementų:

1. Rėmelių rinkinys: Elementas naudojamas naršyklės langui padalyti į stačiakampes dalis, kurių kiekviena gali įkelti savo HTML dokumentą.

2. rėmeliai: Elementas naudojamas per a norėdami apibrėžti kiekvieną atskirą skyrių. Ir siunčia iškviesti kokį nors kitą dokumentą, kuris įkeltas rėmelių rinkinyje.

   instagram story viewer

• Sekite su: „iFrame“ pavyzdžiai

Kaip sukurti rėmelius HTML

Norėdami sukurti HTML dokumentą su rėmeliais, atlikite du labai paprastus veiksmus:

1. Sukurkite HTML dokumentą, kuris apibrėžia rėmelių struktūrą naudodami elementą. Pavyzdžiui:

1 failas: frameset.html

2. Sukurkite vieną ar daugiau HTML dokumentų, kuriuos norite įkelti į rėmelius.

2 failas: frame1.html

Tai yra 1 kadras

3 failas: frame2.html

Tai yra 2 kadras

Rėmelio atributai HTML

Kai kurie iš svarbiausių elementų atributų yra:

• slinkimas: Šis atributas naudojamas slinkties juostų išvaizdai kadre valdyti. Jis gali turėti reikšmes „auto“, „taip“ arba „ne“.

• nedidinti: Šis atributas naudojamas siekiant neleisti vartotojui keisti rėmelio dydžio.

• yam: Šis atributas naudojamas norint suteikti rėmeliui pavadinimą, kuris gali būti naudingas norint nurodyti rėmelį nuorodose ir scenarijuose.

• src: Šis atributas naudojamas nurodyti HTML dokumento URL, kuris turi būti įkeltas į rėmelį.

• rėmo kraštinė: Šis atributas nurodo, ar rėmeliai turi turėti kraštines, ar ne. Galimos reikšmės yra „1“ (kad būtų rodomos kraštinės) arba „0“ (kad nebūtų jokių kraštinių). Pavyzdžiui, .

• siena: Šis atributas apibrėžia kraštinės tarp kadrų plotį pikseliais. Pavyzdžiui, tarp kadrų sukurs 5 pikselių kraštinę.

• tarpas tarp rėmelių: Šis atributas panašus į siena. Jis taip pat apibrėžia tarpą tarp kadrų pikseliais. Pavyzdžiui, nustatys 10px tarpą tarp kadrų.

• kraštinės spalva: Šis atributas leidžia keisti rėmelių kraštinių spalvą. Galima nurodyti bet kokią galiojančią spalvą. Pavyzdžiui, padarys rėmelių kraštą raudoną.

Naudojimo pavyzdys:

Kaip susieti su konkrečiu rėmeliu

Naudodami atributą galime atidaryti nuorodą konkrečiame rėmelyje taikinys Etiketėje. Vertė taikinys turėtų būti toks pat kaip rėmelio pavadinimas (yam atributas ). Pavyzdžiui:

meniu.html
Puslapis 1
2 puslapis

Tokiu atveju meniu rėmelyje spustelėjus nuorodas „Puslapis 1“ arba „Puslapis 2“, atitinkamas puslapis bus įkeltas į „turinio“ rėmelį.

Kaip sulaužyti rėmus

Jei norite, kad nuoroda atidarytų puslapį už rėmelių rinkinio ribų (t. y. pakeistų visą rėmelių rinkinį), galite naudoti specialią reikšmę _viršuje atributui taikinys. Pavyzdžiui:

meniu.html
išeiti iš rėmų

Kai spustelėsite „Išeiti iš rėmelių“, naršyklė įkels „pageOutofFrames.html“ visame lange ir pakeis rėmelių rinkinį.

Ekrano padalijimo į du stulpelius su rėmeliais pavyzdys

Šiame pavyzdyje ekranas padalijamas į du vienodo dydžio stulpelius. Kiekvienas stulpelis įkelia skirtingą HTML puslapį.

Naršymo šoninės juostos su rėmeliais kūrimo pavyzdys

Šiame pavyzdyje sukuriama šoninė juosta, kuri užima 25 % ekrano ir naudojama naršymui. Likusi ekrano dalis naudojama pagrindiniam turiniui rodyti.

Ekrano padalijimo į eilutes ir stulpelius pavyzdys

Šis sudėtingesnis pavyzdys padalija ekraną į keturias lygias dalis. Kiekviena sekcija įkelia skirtingą HTML puslapį.

Viršutinės naršymo su HTML rėmeliais pavyzdys

Sukurkite failą, kuris apibrėžia du kadrus iš eilės. Du failai, kuriuos ji apibrėžia, yra: vienas skirtas naršymui (kuris užima 20 % lango pločio) ir kitas pagrindiniam turiniui (kuris užima likusį lango plotį).

Tada turėsite sukurti failus „navigation.html“ ir „content.html“. Pavyzdžiui, „navigation.html“ gali atrodyti taip:

Puslapis 1

2 puslapis

3 puslapis


O „content.html“ gali būti maždaug taip:

Sveiki atvykę į mūsų svetainę!

Čia bus rodomas naršymo lange pasirinkto puslapio turinys.

Tokiu atveju paspaudus nuorodą „navigation.html“, atitinkamas puslapis įkeliamas į „turinio“ rėmelį.